Jeg skal lave en relativt simpel hjemmeside og har opbygget skitsen med div tag. Det har dog været lidt bøvlet arbejde og ville derfor høre om der ikke findes en nemmer måde at opbygge det på, eller bare en nemmer måde at organisere div tags på. Se i bunden hvor eksempel på siden samt html koden, farverne jeg har brugt er bare random valgt..
Jeg har samlet det hele i en Div tag som har en fast defineret størrelse
De problemer jeg har haft er at:
Float: Hvis jeg bruger float left og right, skal den overordnet div været samme størrelse som den total mængde af de interne div.
Border: først fik jeg alle div tags stillet op der i ville jeg tilføje border på dem alle, men da borderen ligger sig på yder siden væltede de rundt i den overordnet div tag som lego klodser.
Border / Margin #1: Når to div tag står helt op af hinanden med border bliver stregen rigtig tyg, pga der er to border helt op af hinanden. Jeg har løst det ved og vælge specefike sider der skal være border-(side): none; men er der ikke en nemmer måde at styrre dette på?
Border / Margin #2: hvis man har en stor div tag med to små neden under skal man kompensere for margen og border størrelse op den store af dem, kan dette undgås?
helt general, er der en nem måde at designe layoutet på en side?
Kode: Vælg alt
<body style="background-color: pink">
<div style="height: 2400px; width: 1200px; margin: 10px auto;">
<div style="height: 100px; width: 1004px; background-color: red; border: 1px solid black; margin: 2px 2px;">
<p>Her kommer en overskrift</p>
</div>
<div style="height: 50px; width: 750px; float: left; background-color: graytext; border: 1px solid black; border-bottom: none; margin: 0px 0px 0px 2px;">
<p>Her kommer en under-overskrift</p>
</div>
<div style="height: 50px; width: 250px; float: left; background-color: gray; border: 1px solid black; border-bottom: none; margin: 0px 2px 0px 2px;">
<p>Her kommer en under-overskrift</p>
</div>
<div style="height: 250px; width: 750px; float: left; background-color: green; border: 1px solid black; margin: 0px 0px 2px 2px;">
<p>lHer kommer en masse super godt indhold</p>
</div>
<div style="height: 250px; width: 250px; float: left; background-color: yellow; border: 1px solid black; margin: 0px 2px 0px 2px;">
<p>lHer kommer en masse super godt indhold</p>
</div>
<div style="height: 50px; width: 1004px; float: left; background-color: graytext; border: 1px solid black; border-bottom: none; margin: 0px 2px 0px 2px;">
<p>Her kommer en under-overskrift</p>
</div>
<div style="height: 100px; width: 1004px; float: left; background-color: yellowgreen; border: 1px solid black; margin: 0px 2px 2px 2px;">
<p>lHer kommer en masse super godt indhold</p>
</div>
<div style="height: 50px; width: 500px; float: left; background-color: gray; border: 1px solid black; border-bottom: none; margin: 0px 0px 0px 2px;">
<p>Her kommer en under-overskrift</p>
</div>
<div style="height: 50px; width: 500px; float: left; background-color: graytext; border: 1px solid black; border-bottom: none; margin: 0px 0px 0px 2px;">
<p>Her kommer en under-overskrift</p>
</div>
<div style="height: 250px; width: 500px; float: left; background-color: blue; border: 1px solid black; margin: 0px 0px 2px 2px;">
<p>lHer kommer en masse super godt indhold</p>
</div>
<div style="height: 250px; width: 500px; float: left; background-color: blueviolet; border: 1px solid black; margin: 0px 2px 2px 2px;;">
<p>lHer kommer en masse super godt indhold</p>
</div>
</div>
</body>
</html>
