doppio bordo e background interno

**patt** · 25-02-2011, 10:30

Ciao,
come posso fare coi css il menu laterale come in questo link http://osc.template-help.com/wt_24425/index.html che ha un bordo esterno, una riga bianca e poi il background interno? Ho provato con un'immagine ma col repeat non posso distanziarla dall'alto e mi ritrovo senza il secondo bordo bianco in alto e in basso

**ResianTaxidrive** · 25-02-2011, 12:16

beh puoi fare un div che ha sfondo bianco e bordo grigio; a suo interno avrai un ul con sfondo grigio. Al div esterno applichi un padding di 1px e sei a posto

**codencode** · 25-02-2011, 17:52

Quanto suggerito da @ResianTaxidrive è giusto a patto che il div contenga solo un ul e non il titolo come si vede nel sito linkato (Our Product).
Nel caso in cui si voglia inserire anche il titolo, si può sfruttare il div esterno come suggerito da @ResianTaxidrive ma inserire al suo interno un altro div a cui assegnare lo sfondo grigio e dentro il quale inserire l'ul.

**ResianTaxidrive** · 25-02-2011, 17:55

non sono d'accordo, perchè non si dovrebbe inserire un titolo?
io farei

<div>
<h2> Our products </h2>
<ul>bla bla[/list]
</div>

e gli stili come ho detto sopra. Ma che ci sia un titolo o meno cosa cambia?

**codencode** · 25-02-2011, 18:03

Cambia che lo sfondo grigio viene dato solo a ul e quindi la parte occupata da h2 non lo prende.

**patt** · 25-02-2011, 18:10

Ma con border-image di css3 si può fare direttamente senza ulteriori tag?

**ResianTaxidrive** · 25-02-2011, 18:12

bon metterai il background grigio anche ad h2

**codencode** · 25-02-2011, 18:12

Si, ma tieni presente che i CSS3 non sono supportati da IE (oltre a non essere ancora standard).

**ResianTaxidrive** · 25-02-2011, 18:14

Originariamente inviato da patt
Ma con border-image di css3 si può fare direttamente senza ulteriori tag?

a parte il fatto che il css3 non è interpretato da ie8 e precedenti, perchè usare una immagine quando puoi farne a meno?
QUesto funziona bene:

codice:

<!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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
div {
	background-color: #FFFFFF;
	width: 300px;
	border: thin solid #999999;
	padding:2px;
}
ul, h2{
  background:#999;
}
h2,ul{
  margin:0;
}
-->
</style>
</head>

<body>
<div>
<h2> Our products </h2>
<ul>[*]bla bla[*]bla bla[*]bla bla[/list]
</div>
</body>
</html>

**codencode** · 25-02-2011, 18:15

Originariamente inviato da ResianTaxidrive
bon metterai il background grigio anche ad h2

Perfetto, solo che c'è da stare attenti nel caso si diminuisca dinamicamente la dimesione del testo nel browser (CTRL -) in quanto è possibile che si crei uno spazio tra h2 ed ul facendo vedere il bianco di sotto.

Discussione: doppio bordo e background interno

Strumenti discussione

Ricerca discussione

Visualizza

doppio bordo e background interno

Permessi di invio