bottone CSS (arrotondato)

28-08-2012, 16.36.25

Salve a tutti...ho un problemino con i css.
In pratica, devo fare un bottone, successivamente posizionato sulla homepage, che parte da un'immagine di base, ossia, i famosi 4 angolini arrotondati fatti con photoshop.

La mia immagine è caricata in internet e adesso sono alle prese con i file.
Nel file "style.css" ho inserito questo codice:

#contenitore{
width: 500px;
}
.css_angoli{
background-image:url (http://digilander.libero.it/InoueChe...otondati_1.png) no-repeat;
height:20px;
}
#angolo_superiore_sinistra{
background-position:absolute; top: 0px; left: 100px;
}
#angolo_superiore_destra{
background-position:absolute; top: 0px; right: 970px;
}
#angolo_inferiore_sinistra{
background-position:absolute; top: 0px; left: 100px;
}
#angolo_inferiore_destra{
background-position:absolute; top: 0px; right: 970px;
}
.colore_sfondo{
background-color:#4de419;
height:20px;
margin:auto;
}
.contenuto{
background-color:#4de419;
color: #000000;
}

mentre nel file "index.html" ho inserito questo:

<div id="contenitore">
<div class="css_angoli" id="angolo_superiore_sinistra">
<div class="css_angoli" id="angolo_superiore_destra"></div>
<div class="colore_sfondo"></div>
</div>
<div class="contenuto">Homepage</div>
<div class="css_angoli" id="angolo_inferiore_sinistra">
<div class="css_angoli" id="angolo_inferiore_destra"></div>
<div class="colore_sfondo"></div>
</div>

Alla visualizzazione del sito, riesco a vedere la parola "Homepage" ma non il design del bottone che dovrei aver creato. Qualcuno potrebbe gentilmente darmi una mano?

28-08-2012, 17.20.13

Perché non usi il border-radius per fare gli angoli?

28-08-2012, 18.13.50

sinceramente le ho provate tutte, sembra che il file css qui non vada proprio.
Il border-radius l'ho usato per una parte del testo e nemmeno così funziona, per quello ho provato con il metodo delle immagini...
nessuno dei due funziona... non capisco il perchè.
il file .css comincia con body {background....
il file .html richiama il .css con <link rel=”stylesheet” type=”text/css” href=”style.css”>, mi sembra giusto, eppure non funziona assolutamente niente di quello che metto nel .css

28-08-2012, 18.16.23

Hai controllato maiuscole minuscole?

Fai questa prova, metti questo codice tra i tag <head> </head>

Codice:

<style type="text/css">
#contenitore{
width: 500px;
}
.css_angoli{
background-image:url (http://digilander.libero.it/InoueChe...otondati_1.png) no-repeat;
height:20px;
}
#angolo_superiore_sinistra{
background-position:absolute; top: 0px; left: 100px;
}
#angolo_superiore_destra{
background-position:absolute; top: 0px; right: 970px;
}
#angolo_inferiore_sinistra{
background-position:absolute; top: 0px; left: 100px;
}
#angolo_inferiore_destra{
background-position:absolute; top: 0px; right: 970px;
}
.colore_sfondo{
background-color:#4de419;
height:20px;
margin:auto;
}
.contenuto{
background-color:#4de419;
color: #000000;
}

</style>

28-08-2012, 18.25.54

oddio funziona!
L'unica cosa è che così andrei bene se dovessi gestire una sola pagina...ma per il sito sono davvero tante! L'index che è diversa da tutte potrei gestirla così, ma per le altre credo ci sia il solito problema.

28-08-2012, 18.33.40

il problema sta nel collegamento al file css a questo punto.

28-08-2012, 18.38.57

Infatti è quello che ho pensato anche io, però all'inizio della pagina html io ho questo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<HEAD>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
...

Non so proprio dove andare a parare, a me sembra corretto

28-08-2012, 18.40.58

hai due aperture del tag <head> cancella quella in maiuscolo.

Edit: poi prova a copiare questo

Codice HTML:

<link rel="stylesheet" type="text/css" href="style.css" />

28-08-2012, 18.43.38

Prova a sostituire:

Codice:

<link rel=”stylesheet” type=”text/css” href=”style.css”>

con:

Codice:

<link rel="stylesheet" type="text/css" href="style.css">

Se non si nota, cambiano i "doppi apici"

EDIT: battuto sul tempo ;-)

28-08-2012, 18.45.17

Poi un'altra cosa, stai usando XHTML, quindi devi chiudere sempre ogni tag con /

28-08-2012, 19.00.23

Non ci posso credere, maledette virgole.
Grazie mille ad entrambi, ho imparato un paio di cose nuove e ho imparato a tenere d'occhio quegli apici -.-
Grazie ancora :)

**dreadnaut** · 28-08-2012, 19.02.08

Ecco, ora che hai fatto funzionare il css, puoi buttare via tutte quelle righe ed immagini e sostituirle con una riga di border-radius

28-08-2012, 19.05.55

magari potessi, il metodo funziona solo se ho l'immagine, del border-radius non ne vuole sapere.

#presentazione {
border-radius:1px solid #4de419;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
background-color: # 2f2f2f;
}

28-08-2012, 19.07.59

Il border radius funziona anche senza prefissi

28-08-2012, 19.09.25

ah, grazie mille ancora :)

28-08-2012, 19.09.48

Cosa sarebbe questo?

Codice:

#presentazione {
border-radius:1px solid #4de419;

}

Penso tu voglia impostare il bordo!? togli radius in questa riga!

**dreadnaut** · 28-08-2012, 19.10.13

Di certo non funziona se nella proprietà che si chiama raggio del bordo ci metti dentro lo spessore ed il colore

Codice:

  border: 1px solid orange;
  border-radius: 10px;

**Taitaonline** · 31-08-2012, 11.54.54

Temo che il Border radius non gli funzioni perchè come DOCTYPE usa XHTML ...

A mio modesto parere sarebbe tutto più semplice passare già all' HTML5 che, pur essendo ancora in fase di studio, è molto più semplice e performante.

31-08-2012, 12.08.25

Scusa, ma non centra se usa XHTML oppure HTML, io uso il border-radius tranquillamente anche su XHTML.

Discussione: bottone CSS (arrotondato)

LinkBack

Strumenti discussione

Display

bottone CSS (arrotondato)

Regole di scrittura