30. januar 2013 - 15:53Der er
5 kommentarer og 1 løsning
Problemer med placering af indhold med div og css
Hej eksperter!
Jeg har været i gang med et meget simplere design til min hjemmeside, men noget er gået galt og jeg ved ikke hvad!
Min opbygning er såre simpel. Jeg bruger includes til det som er ens på alle sider såsom menuen, banner, bunden osv. Disse er placeret via min standardopsætning som er ens på hver side, altså det er kun indholdet i disse divs der er includes.
Jeg bruger divs til en "container" som er hele siden minus baggrund. I den er er som sagt en top, menu, venstre side, højre side, bund og et indholdsområde. Faktisk er kun indholdsområdet forskelligt fra side til side.
Via min standardopsætning burde alting sådan set se meget ens ud, det gør det imidlertid ikke:
Jeg går ud fra, at forskellen på et ønsket og et dårligt resultat er, at på et dårligt resultat sidder content div'en nedenunder i stedet for til venstre for commercial div'en. Årsagen er, at commercial div'en ved de dårlige resultater er for bred til at kunne sidde ved siden af commercial div'en. Er du opmærksom på, at du i content div'en bruger en margin på 200 px til venstre og højre? Prøv at erstatte margin-left:200px og margin-right:200px med margin-left:auto og margin-right:auto. Ikke alene vil det formodenligt placere content div'en til venstre for commercial div'en, den vil også placere indholdet centralt i content div'en.
Det er egentligt en div-opsætning jeg har lånt fra en template og der virker det. Jeg har således brugt de samme indstillinger derfra, dog med et andet resultat...
Jeg har prøvet det du skriver og det synes ikke rigtigt at virke. Som du kan se har jeg ikke noget indhold i min "lefty" endnu og ved at sætte marginerne til auto vil det bare sætte alt indhold i "content1" helt til venstre, men stadig under min "commercial".
Jeg er blevet gjort opmærksom på at de steder, hvor det er galt er de steder, hvor teksten er længere end bredden på div'en. Der har jeg forsøgt med wraps:
Der er bare ét problem! Jeg har sgu fået en scroller i min container-div?! Når det er løst, ligger jeg løsningen op, som Christian ledte mig på sporet af :) Det er lidt nemmere bare at lave en width:auto :)
Jeg endte med selv at løse problemet. Dette kode har to divs med fast størrelse og én varierende.
Her er koden, da jeg sikkert ikke er den eneste der ender med det her problem.
I det her stykke kode går venstre og højre side næsten helt til bunds(90%), men det er vigtigt at højden for containeren, body og html sættes til 100%! Dette er blandt andet for at bunden af siden ikke ender midt oppe på skærmen på en side med meget lidt indhold. Jeg råder til at siderne ikke gøres længere end 90% da det så måske kan gå ud over det man har i bunden.
Det er vigtigt at siderne, højre og venstre-div, kommer FØR content-feltet!
Grunden til at jeg bruger min-height til højden på min body, er at ellers vil baggrundsfarven stoppe midt på siden. Med min-height vil den derfor nu gå ud over de 100% ved f.eks. lange sider.
Koden kan kopieres direkte ind i progam og bruges...
<body> <div align="center"> Her kan indsættes et banner og en menu </div>
<div class="container"> <div class="lefty"> Venstre side<br><br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed quis sem. Curabitur semper, libero at tincidunt dictum, justo dolor blandit massa, sit amet condimentum ligula metus id lacus. In eros felis, varius et, ultricies quis, vulputate vel, ipsum. Aliquam nisi elit, sagittis eget, lacinia in, gravida quis, arcu. Vestibulum molestie fermentum pede. Nam nonummy eros et libero. Integer lorem erat, pulvinar id, pretium eu, tristique adipiscing, odio. Praesent eget nunc. Nunc eleifend ultrices pede. Aliquam velit tellus, auctor quis, euismod sit amet, pharetra in, augue. Sed accumsan laoreet </div> <div class="commercial"> Højre side<br><br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed quis sem. Curabitur semper, libero at tincidunt dictum, justo dolor blandit massa, sit amet condimentum ligula metus id lacus. In eros felis, varius et, ultricies quis, vulputate vel, ipsum. Aliquam nisi elit, sagittis eget, lacinia in, gravida quis, arcu. Vestibulum molestie fermentum pede. Nam nonummy eros et libero. Integer lorem erat, pulvinar id, pretium eu, tristique adipiscing, odio. Praesent eget nunc. Nunc eleifend ultrices pede. Aliquam velit tellus, auctor quis, euismod sit amet, pharetra in, augue. Sed accumsan laoreet </div>
<div class="content1"> Her er sidens indhold. Det er muligt at lave to(eller flere) div's ovenpå hinanden herinde, så længe de har de samme egenskaber: float:none ! </div> <div class="content2"> F.eks. lige som det her! Baggrundsfarven kan sættes til "inherit", så den arver containerens farve. </div>
<div class="footer"> Her findes der en bund </div> </div>
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.
