After a decade-long break from web design, I am easing my way back into the world of div properties (which have become much more popular since my last stint). Currently, I am working on creating a layout like this:
Logo | Icons Div Banner Div Link Div Content Div Footer Div
My current challenge lies in centering the Link Div, which contains:
<div class="menu">
<a class="link1" href="#">Home</a>
<a class="link2" href="#">About Us</a>
<a class="link3" href="#">Services</a>
<a class="link4" href="#">Portfolio</a>
<a class="link5" href="#">Contant Us</a>
</div>
The CSS I am currently using:
.menu
{
TO BE USED
}
.menu a
{
display: block;
float: left;
line-height: 144px;
margin: 5px;
opacity: 0.3;
text-align: center;
width: 144px;
}
.link1
{
background: #fdd22a;
}
.link2
{
background: #009fe3;
}
.link3
{
background: #574696;
}
.link4
{
background: #ee7202;
}
.link5
{
background: #e61c67;
}
.link6
{
background: #96c11f;
}
You can see a sample of my work here: .
Currently, with not enough links or knowledge yet to align them perfectly within the margins (lining up with the logo and social media icons), I think the next best step for me is to focus on centering the link divs. The code I linked may be a bit messy as I haven't had the chance to tidy things up just yet.
Any suggestions or feedback would be greatly appreciated.