Salve a tutti!
Sto facendo un sito e una volta finito ho notato che quando rimpicciolisco un po la pagina tutto si scombina, cambiando di posizione.
Invece youtube.com , quando si ridimensiona tutto rimane a suo posto e i margini ai lati si fanno sempre più piccoli
Il mio sito ha una struttura che è simile a youtube, come posso fare per questo problema dei margini per renderòi come quelli di youtube?
Ciao, non sappiamo come è il tuo codice. Hai forse usato posizionamenti assoluti? O hai dei float? Sarà il caso di farci vedere la pagina (inserendo un link) o il suo codice (postando html e css) perché si possa capire dov'è il problema
codice:<!doctype html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="stylesheet1.css"> </head> <body> <div id="out"> <div id="in"> <h6>p</h6> [img]logo3.rgb[/img] Cantami o Diva, del Pelide Achille l'ira funesta che infiniti addusse lutti agli Achei, molte anzi tempo all'Orco generose travolse alme d'eroi, e di cani e d'augelli orrido pasto lor salme abbandonò (così di Giove l'alto consiglio s'adempìa), da quando primamente disgiunse aspra contesa Il re de' prodi Atride e il divo Achille Cantami o Diva, del Pelide Achille l'ira funesta che infiniti addusse lutti agli Achei, molte anzi tempo all'Orco generose travolse alme d'eroi, e di cani e d'augelli orrido pasto lor salme abbandonò (così di Giove l'alto consiglio s'adempìa), da quando primamente disgiunse aspra contesa Il re de' prodi Atride e il divo Achille</p> <div id="navbar"> 222222222 </br></br> 111111111</br></br> 0000000000 </div> </div> </div> </body> </html>
codice:body{background-color:#CDB79E;min-width: 1000px;} div#in{border-style:ridge; border-width:10px;border-color:#EED5B7;background-color:white;max-width: 1300px; margin-top:150px;min-width:1300px; margin-left:325px;} p{color:#8B7D6B; margin-left:340px; size:10px; font-size:20px; position:absolute; top:175px; right:290px; left:470px;min-width:800px; text-align:justify;} div#navbar{position:absolute; top:300px; left:355px; font-size:30px;min-width: 300px} h6{padding-bottom:300px; color:white} a{text-decoration:none; color:#8B7D6B;} a:focus,a:hover{ border-top:2px solid #8B7D6B;border-bottom:2px solid #8B7D6B;} img{position:absolute; top:160px; border:none}
Puoi ripartire da qui:
css:
non so se questa sia la visualizzazione voluta, la tua pagina era costruita per una risoluzione diversa dalla mia. In pratica: un position:relative sul div che contiene gli elementi posizionati assolutamente; via il margin-left dal contenitore che viene centrato col valore auto. Regola a questo punto a piacimento i margini del div coi link e il paragrafo col testocodice:body{background-color:#CDB79E;} div#in{width:1300px; border:10px ridge #EED5B7; background-color:#fff; margin:150px auto 0 auto; position:relative} p{color:#8B7D6B; margin-left:325px; size:10px; font-size:20px; position:absolute; top:25px; right:25px; width:800px; text-align:justify;} div#navbar{position:absolute; top:150px; left:25px; font-size:30px;width: 300px} h6{padding-bottom:300px; color:white} a{text-decoration:none; color:#8B7D6B;} a:focus,a:hover{ border-top:2px solid #8B7D6B;border-bottom:2px solid #8B7D6B;} img{position:absolute; top:10px; border:none}
Permessi di invio
Rispondi quotando