Problema con bordi selettore

**deleted_id_189000** · 24-04-2011, 20:23

Salve.

Volevo sapere come posso visualizzare i bordi di una zona delimitata da un selettore.

Il selettore si chiama container1 ed è formattato in questo modo nel foglio di stile css:

#container1{width:40%; height:5%; margin-top: 2%; text-align:center; color:white; font-weight: bold; font-size:5; border-top:5px solid black; border-left:5px solid black; border-right:5px solid black;}

Nel codice HTML della pagina si fa riferimento all’oggetto container1 in questo modo:

<div id=”container1”>
</div>

In tal modo riesco a visualizzare solo un lato del bordo (non so se sia il bordo superiore o inferiore; comunque è uno dei due visto che è orizzontale). Potete vederlo voi stessi nello qui

Come mai non vengono visualizzati gli altri bordi?

Analogamente vi chiedo se potete dirmi come si può fare a visualizzare i bordi di un div che non sia per forza associato ad un selettore.

Grazie.

Ciao.

**Myaku** · 24-04-2011, 21:18

Originariamente inviato da albval

#container1{width:40%; height:5%; margin-top: 2%; text-align:center; color:white; font-weight: bold; font-size:5; border-top:5px solid black; border-left:5px solid black; border-right:5px solid black;}

font-size: 5 -> manca l'unità di misura.
se ancora non funziona, prova a definire nell'ordine: top | right | bottom | left
altrimenti, verifica anche che il bordo non resti nascosto perché il div collassa, sennò bisogna che ci posti il link alla pagina di modo che vediamo tutto il codice

comunque è uno dei due visto che è orizzontale).

beh il bottom non l'hai neppure definito

se ti servono tutti e 4, usa la shorthand "border"

Potete vederlo voi stessi nello qui

io vedo più bordi. occhio che se hai creato più div, non puoi usare lo stesso id, ma dovrai usare o id diversi (ma se lo stile è lo stesso non ti conviene) o una classe.

**deleted_id_189000** · 27-04-2011, 18:33

Ciao.

Ho provato con border-top, border-left, border-right, border-bottom ma niente da fare.

Come hai detto è meglio che vi posto il codice.

Eccolo qua.

Questo è il codice sorgente HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="no">
<title>FancyBox 1.3.4 | Demonstration</title>
<link rel="stylesheet" href="style2.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>'); </script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script> <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script> <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style2.css"> <link rel="stylesheet" href="CSS%5CPRIMA_PAGINA.css" type="text/css">
<script type="text/javascript">
$(document).ready(function() { /* * Examples - images */ $("a#example2").fancybox({ 'opacity' : true, 'overlayShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); $("a#example5").fancybox(); $("a[rel=example_group]").fancybox({ 'transitionIn' : 'none', 'transitionOut' : 'none', 'titlePosition' : 'over', 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>'; } }); }); </script> </head> <body> <div id="container1"> </div>
<div id="container2"> </div>
<div id="container3"> </div>
</body>

Questo è invece il foglio di stile style2.css richiamato nell’head del sorgente,

#container1{width:40%; height:5%; margin-top: 0%; text-align:center; color:white; border:5pt solid black; font-weight: bold; font-size:5pt;}

#container2{width:80%; height:30%; margin-top:2%; margin-left:5%; margin-right:5%; border:5pt solid black; border-width:5px;}

#container3{width:40%; height:30%; margin-top:10%; margin-left:5%; margin-right:5%; border-top: 5pt solid red; border-right: 5pt solid red; border-bottom: 5pt solid red; border-left: 5pt solid red;}

img{border:2% border-style:solid; border-color:black;}

Grazie.

Ciao.

Discussione: Problema con bordi selettore

Strumenti discussione

Ricerca discussione

Visualizza

Problema con bordi selettore

Re: Problema con bordi selettore

Permessi di invio