Menu
I'm trying to do a basic layout for a website. But I have two problems:
fiddle: http://jsfiddle.net/4awfk/
HTML:
<body>
<main id="stora">Stora</main>
<nav id="navigation">
<ul>
<li id="ettan"><a>Inredningsuppdrag</a></li>
<li id="tvaan"><a>Instagram</a></li>
<li id="trean"><a>Kontakt</a></li>
<li id="fyran"><a>Leverans</a></li>
</ul>
</nav>
<footer>adress</footer>
</body>
CSS:
* {
padding:0;
margin: 0;
}
html {
height: 100%;
width: 100%;
}
body {
background: yellow;
height: 100%;
width: 100%;
}
li {
list-style: none;
}
#stora {
width: 50%;
height: 100%;
background: red;
float:left;
}
#navigation {
width: 50%;
height: 100%;
background: blue;
float: right;
}
footer {
width: 100%;
height: 25px;
background: white;
position: fixed;
bottom: 0px;
}
#ettan {
width: 50%;
height: 70vh;
background: olive;
float: left;
}
#tvaan {
width: 50%;
height: 35vh;
background: turquoise;
float: left;
}
#trean {
width: 50%;
height: 35vh;
background: white;
float: left;
}
#fyran {
width: 100%;
height: 30vh;
background: gray;
float: left;
}
614
To remove the spaces between the divs try setting font-size:0 for the whole document and set a font-size on the anchors or the element containing your text, try this for your example:
html {
height: 100%;
width: 100%;
font-size:0;
}
#navigation ul li a {
font-size:14px;
}
Briefly the vh (viewport height) is a new feature in CSS3, I'll explain with an example, if you set your div height to 50vh, this means that you want your div height to stretch to 50% of the viewport height, while setting it to 50% would make stretch to 50% of the div's parent height (same applies for width:50vw).
Here is a reference on how to use them.
EDIT
Another thing to try:
Try floating only the left div and remove the float from the right div, but set display:inline-block for both of them, I can't test the result because I don't have safari, so try it and let us know if it helps.
#stora {
width: 50%;
height: 100%;
background: red;
float:left;
display:inline-block;
}
#navigation {
width:50%;
height: 100%;
background: blue;
display:inline-block;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
