top-border con sopra il testo

**gabar-el** · 22-11-2006, 17:31

ciao,nn c capisco molto di css ma diciamo che mi do fare.sto cercando di creare un bordo attorno a un div in cui il bordo superiore sia abbastanza alto da contenere un intestazione.come si fa?ho notato che se alzo i px del top-border semplicemente mi ritrovo un bordo + alto con la scritta che di conseguenza scende.invece vorrei che la scritta stesse sopra al bordo superiore.spero di essermi spiegato.
per ora ho questo codice:

codice:

#box {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin-top: 4px;
    margin-left: 0px;
    padding-bottom: 8px;
    border-top: 3px solid #000000;
    border-bottom: 3px solid #000000;
    border-left: 3px solid #000000;
    border-right: 3px solid #000000;
}

**gra-fichetto** · 22-11-2006, 17:41

spero di essermi spiegato.

Sinceramente, non credo di aver capito.

L'intestazione deve "battere" sul bordo superiore? Deve, cioè, essere all'interno del bordo superiore?

**gabar-el** · 22-11-2006, 17:43

si esatto,deve essere all'interno del bordo superiore.scusa,ma era un pò difficile x me farmi capire,speravo + di essere capito,come è stato....

**gra-fichetto** · 22-11-2006, 18:01

ma era un pò difficile x me farmi capire...

Nessun problema.
Non so come sia strutturata la tua pagina.
Ti posto solo un esempio.

La tua pagina:

codice:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title></title>
<style type="text/css">
@import url("stile.css");
</style> 
</head>

<body>
<div id="box">
<p class="intestazione">Intestazione</p>
</div>

</body>
</html>

Il tuo CSS:

#box {
position: relative;
padding-bottom: 8px;
border-top: 2em solid #000000;
border-bottom: 3px solid #000000;
border-left: 3px solid #000000;
border-right: 3px solid #000000;
}
.intestazione{
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #FFF;
margin-top: -1.4em;
margin-left: 1em
}

Ci sarebbe, comunque, un metodo migliore...

**gabar-el** · 22-11-2006, 18:05

beh a sto punto allora mi conviene impostare il colore di sfondo nel tag h.....cmq grazie,valuterò il tuo suggerimento.ciao

**gra-fichetto** · 22-11-2006, 18:14

mi conviene impostare il colore di sfondo nel tag h...

Esatto.
Quindi la tua pagina potrebbe diventare:

codice:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title></title>
<style type="text/css">
@import url("stile.css");
</style>
<!--[if lte IE 6]>
<link rel="stylesheet" href="stile-ie.css" type="text/css" media="screen" />
<![endif]-->
</head>

<body>
<div id="box">
	<div id="contenitore">
	<h1 class="intestazione">Intestazione</h1>
	

Altro testo testo testo testo</p>
	</div>
</div>

</body>
</html>

Il tuo CSS:

codice:

#box {
	width: 600px; 
	position: relative;
	border: 2px solid #000;
}
#contenitore p, #contenitore h1{
	padding: 1%
}
.intestazione{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #FFF;
	display: block;
	width: 98%;
	background: #000;
	margin: 0
}

Il CSS per IE:

codice:

.intestazione{
width: 100%;
}

**gabar-el** · 22-11-2006, 18:18

ok,grazie....

**gra-fichetto** · 22-11-2006, 18:22

Nulla...

**gabar-el** · 23-11-2006, 12:09

ciao, son di nuovo qua....ho un problemino, mi sono accorto che dando lo sfondo al tag h mi rimangono i bordi laterali + alti dello sfondo del tag.ovvero vanno + su di quello che dovrebbero, oppure è il tag che nn è abbastanza in alto....insomma guardando la cella (xchè l'ho applicato alla cella il css)ci sono due punte di troppo sui lati,come posso risolvere? forse creando un div?ma poi come applico una classe?xchè nn vorrei creare un id, devo ripeterlo varie volte nella pagina.boh forse sto facendo confusione, cmq x ora il mio css è questo, al quale va semplicemente aggiunto lo sfondo del tag h in html

codice:

.tdBox {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin-top: 0px;
    margin-left: 0px;
    padding-bottom: 8px;
	border-bottom: 3px solid #000000;
    border-left: 3px solid #000000;
    border-right: 3px solid #000000;
	background: #999999;
}

**gra-fichetto** · 23-11-2006, 12:16

E' possibile vedere la pagina online?
Hai la possibilità di postare il codice pagina ed il css?

Discussione: top-border con sopra il testo

Strumenti discussione

Ricerca discussione

Visualizza

top-border con sopra il testo

Permessi di invio