I've created a simple page which uses two buttons for navigation. I want the page to be "fluid" (resizing your window won't affect the main content) and I think I've accomplished that except for one thing that the programmer I'm working with pointed out, that is the two buttons will wrap if the window gets resized to that point (I assume he's thinking about how it will look on a mobile device). Is there a better way to redo the navigation using some CSS tricks?
Here's the style sheet:
Here's the style sheet:
Code:
body {
font-family:Arial, Helvetica, sans-serif;
background-color:#c0e1e6;
margin:0;
padding:0;
}
#wrapper {
overflow:auto;
}
#top {
background-image:url(homepage-top.gif);
background-repeat:no-repeat;
height:108px;
display:block;
}
.colorbar-top {
height:38px;
background-image:url(colorbar-top.gif);
background-repeat:repeat-x;
}
.colorbar-bottom {
height:22px;
background-image:url(colorbar-bottom.gif);
background-repeat:repeat-x;
}
.maincontent {
background-color:#FFF;
background-image:url(homepage-centerbkg.jpg);
background-repeat:no-repeat;
background-position:top left;
height:293px;
margin:0;
padding:0;
}
.interiorcontent {
background-color:#fff;
margin:0;
padding:20px;
overflow:auto;
}
a {
color:#0072b1;
text-decoration:none;
font-weight:bold;
}
.bluetext {
color:#0072b1;
font-weight:bold;
}
.footer {
font-size:11px;
color:#FFF;
margin:0 100px 10px 100px;
padding:10px;
float:right;
}
.leftmenu {
float:left;
width:170px;
font-size:14px;
font-weight:bold;
padding:0 10px 0 10px;
}
.rightcolumn {
border-left-color:#c0e1e6;
border-left-style:solid;
border-left-width:1px;
margin-left:200px;
padding:0 0 0 25px;
}
.goldtext {
color:#FF9C00;
}
.graytext {
color:#C1C1C1;
}
.smalltext {
font-size:10px;
color:#B4B4B4;
}
.clear {
clear:both;
}
Comment