[CSS] posizionamento banner laterali

19-07-2013, 14.00.11

Salve a tutti,
vi chiedo aiuto perchè dopo 3 giorni non sono riuscito ad ottenere ciò che volevo, ammetto di essere alle prime armi con CSS quindi magari potreste consigliarmi voi; iniziamo col dire che sto realizzando questo sito in locale per il momento ma comunque vi spiego la pagina è strutturata tutta dentro un grande riquadro e al di fuori ci esso (ai lati) vorrei aggiungere 2 banner (1 per lato), non tanto per le pubblicità ma per fare pratica (anche perchè penso non vedrà mai un server).
con molti e moli tentativi sono riuscito a posizionarli ai lati ma succede che se riduco la finestra del browser il banner destro segue il margine quindi si sovrappone al corpo centrale, cosa assolutamente da evitare,

Codice HTML:

		<style type="text/css">
		body {  background-image: url('penguins.jpg'); background-repeat: no-repeat;   background-color:gold; 
}
		#adsx { position:relative;  float: left; width: 120px; 
		}
		#container { background-color:red; min-width: 600px; margin-top: 40px; margin-right: 120px; margin-left: 120px; 
		}
		#addx	{  width: 120px; position:relative; right: 15px; float: right;
		}
		#header { height: 120px; margin: 0 auto; background-color: yellow; background-image: url('senzanome.png'); background-repeat: x; 
		}
		#corpo { background-color: silver; margin: 10px auto; height: 600px;
		}
		#footer { background-color: black; height: 150px; margin: 10px auto;
		}
		</style>
###############################

	<div id="adsx"> <img src="sx.jpg">
	</div>
	<div id="addx"> <img src="dx.jpg">
	</div>	
	<div id="container">
		<div id="header">********
		</div>
		<div id="corpo"> 
		</div>
		<div id="footer">
		</div>
	</div>

adesso vi ho postato il codice di come si trova adesso.

Ripeto quello che vorrei riuscire a fare è di posizionare i banner senza che essi seguano i bordi della finestra ... consigli? errori che mi sono sfuggiti? meglio usare altre opzioni??

19-07-2013, 14.30.29

Potresti provare ad impostare delle misure in pixel in questo modo:

Codice:

body {
width:1000px;
margin:auto;
}

Comunque, nel codice che hai postato, hai dimenticato di chiudere la parantesi graffa nel body

19-07-2013, 14.41.18

la parentesi è chiusa, li si vede nel lato, comunque devo dire che questa "cavolata" funziona... e io che pensavo chissà a cosa dovevo ricorrere o modificare .... grazie!!

ipotizzando volessi aggiungerne un altro al di sopra dell "header" in orizzontale ???

19-07-2013, 15.16.56

Scusa, mi era sfuggita li a sinistra :)
Intendi aggiungere un "banner" orizzontale in alto?

19-07-2013, 20.39.42

Originalmente inviato da mathis

Scusa, mi era sfuggita li a sinistra :)
Intendi aggiungere un "banner" orizzontale in alto?

si, centrato al di sopra del riquadro

19-07-2013, 20.48.21

Non basta inserire il tuo banner subito dopo il tag <body> in questo modo?

Codice:

<body>
<div style="text-align: center;">
        //Codice banner
</div>

Scusa ma non sono a casa quindi rispondo velocemente

24-07-2013, 16.57.43

Possiamo dire che il prblema dei banner laterali sia stato archiviato

ora è nato un nuovo problema, anzi oserei dire dilemma, in quanto non so nemmeno se sia veramente possibile effettuarlo con i fogli di stile, ve lo espongo:

nel riquadro centrale, il vero e proprio pezzo importante del sito, voglio inserire dei riquadri, ognuno dei quali si collegherà ad un altra pagina, e sto utilizzando i seguenti codici:
.cs { width:99px; height:200px; text-align:center; float:left; border-style:dashed; border-width:1px; border-color:orange;
}

<div id="corpo">
<a href="" class="cs">1 </a>
<a href="" class="cs">2 </a>
<a href="" class="cs">3 </a>
<a href="" class="cs">4 </a>
<a href="" class="cs">5 </a>
<a href="" ><div class="cs">6 </div></a>
</div>
il codice per funzionare funziona, visualizza caselle differenti con ognuno il suo testo all'interno e il suo collegamento (temporaneamente mancante ma funzionante), solo che per dare un tocco in più vorrei che vengano visualizzati come se fossero centrati, incolonnati al centro, invece così si vedono si incolonnati ma a sinistra, ossia i margini dx e sx non sono uguali ... non sono riuscito a venirne fuori neanche modificando il codice del div contenitore ... che questa sia un'altra sciocchezza???
il codice del contenitore è questo
#corpo { background-color: silver; margin: 10px auto; height: 2400px; padding:auto;
}

24-07-2013, 17.42.45

Puoi linkare la pagina dove trovo il codice che hai postato?

24-07-2013, 18.21.48

Originalmente inviato da helpcode

Puoi linkare la pagina dove trovo il codice che hai postato?

in locale funziona meglio ma comunque l'ultimo mio problema è evidente ugualmente

ecco il link: http://marco1991.altervista.org//pro...o%20brand.html

24-07-2013, 18.30.01

Quello che vuoi fare è un layout tabellare, per cui in questo caso (uno dei pochi in assoluto), è meglio usare le tabelle.

Altrimenti puoi fissare la larghezza del div centrale grande, e settare la larghezza dei link di conseguenza in modo che riempiano tutto.

Per altre informazioni, contattami pure.

24-07-2013, 18.33.59

Originalmente inviato da helpcode

Quello che vuoi fare è un layout tabellare, per cui in questo caso (uno dei pochi in assoluto), è meglio usare le tabelle.

Altrimenti puoi fissare la larghezza del div centrale grande, e settare la larghezza dei link di conseguenza in modo che riempiano tutto.

Per altre informazioni, contattami pure.

siccome sono ancora alle prime armi con i css e non ho molto tempo libero penso ci farò un pensierino alle tabelle domenica, arrivando dall'html pensavo di poter evitare le tabelle, da me sempre odiate, ma penso che rivaluterò la situazione, anche perchè con l'aiuto dei css non dovrebbe essere difficile come lo ricordo ...

24-07-2013, 18.36.37

Ripeto, potresti fissare la larghezza del div padre e settare la larghezza dei link di conseguenza.

Oppure cambiare il layout della pagina..quello spetta a te ;)

24-07-2013, 18.43.01

bè quindi dici di impostare es. width (del pezzo centrale) a 600px e ogni casella per i link a 200px in modo da riempire? ci avevo già pensato e provato ma credo che il bordo "rubi alcuni pixel" sciocchezze lo so ma siccome sono ancora in fase di apprendimento e sono un tipo a cui piace sperimentare volevo riuscire a "centrarli" pur tenendo a mente che li sto mettendo in fila utilizzando il float ..

tornando al fatto di reimpostare il layoutut con tabelle, ti riferivi all'intero layout o magari solo nell'area in cui sono i riquadri dei link?

24-07-2013, 19.41.06

ci avevo già pensato e provato ma credo che il bordo "rubi alcuni pixel"

E' vero ma per risolvere questo problema basta non fare 200px ma 199px.
Poi o togli il bordo destro dell'ultimo link oppure togli il bordo destro del div centrale.

Se vuoi invece restare concentrato con i div, puoi usare "table-layout". Guarda quì:
> http://stackoverflow.com/questions/5...o-equal-widths
Esempio: http://jsfiddle.net/g4dGz/

tornando al fatto di reimpostare il layoutut con tabelle, ti riferivi all'intero layout o magari solo nell'area in cui sono i riquadri dei link?

No no, mi riferivo solo all'area dei link. Assolutamente non fare mai un layout intero con le tabelle :) http://webdesign.about.com/od/layout/a/aa111102a.htm

28-07-2013, 14.33.13

come posso risolvere quel piccolo problemino con la barra il alto di AV? http://marco1991.altervista.org//pro...o%20brand.html
dovrebbe occupare tutto lo schermo per larghezza ma invece si ferma prima, perchè? inoltre il tutto non risulta centrato come si piuo veder in locale

28-07-2013, 15.44.22

Modifica il valore top a -40px e il valore width calc(100% + 75px)

**acsocmel** · 28-07-2013, 22.11.01

io ti consiglio di fermarti adesso e cominciare a leggere una guida
cercane una nei link utili

Discussione: [CSS] posizionamento banner laterali

LinkBack

Strumenti discussione

Display

[CSS] posizionamento banner laterali

Regole di scrittura