Building my Website: (Navigation and Main six images)
#wrap {
margin: 30px auto;
width: 980px;
}
This is the main content area of my site. The width of the content is 960 wide with an extra 10px on each side for the drop shadow of each white box.
My navigation menu I have situation at the top right of the website, in line with the logo, these elements then balance each other out being in their own space above the content on each page.
The Navigation menu is floated left to sit next to the logo inside the div id #headerRight. The buttons are then an unordered list (ul).
#headerRight ul {
list-style-type: none;
margin: 50px 0 0;
}
List-style: none makes sure there’s not style applied to the list (bullets).
#headerRight ul li {
float: left;
margin: 0 10px 0 0;
padding: 0;
}
This code applies to each individual list item and floats them left next to each other, and has a 10px margin space to the right of each list item and no padding.
The six boxes I have on the front page are to display six recent projects/ best work to viewers when first viewing my site. Each box is floated left and they sit inside the wrap and sit next to each other in a row until there’s no space to fit on one line are then pushed down onto the second line. If I didn’t float these items, then they would stack one after another. Each box is 280px wide with a 10px Padding all the way round. The margin of 10px keeps the boxes apart with a gap in between.
