Hi All,
Looking to get some help on alignment here. I've been reading up on CSS positioning but nothing I do seems to be working.
LadyNRed gave me the idea of using < LI > inline styling to put elements side-by-side, but for some reason my content pane "wraps" down underneath the rest of the site...
http://www.corazzinirealestate.com
Can someone tell me what I'm doing wrong? Thanks in advance! here's the code:
HTML Code:
<div class="wrapper">
<div class="homebutton">
<a href="http://www.corazzinirealestate.com">
<img src="http://www.corazzinirealestate.com/portals/_default/skins/spacer.gif" width="100" height="100" />
</a>
</div>
<ul id="navlist">
<li>
<div class="leftmenu">
<a href="http://www.corazzinirealestate.com/tabid/938/Default.aspx" onmouseover="document.images['listings'].src='<%= SkinPath %>/lori-images/listingson.jpg';" onmouseout="document.images['listings'].src='<%= SkinPath %>/lori-images/listingsoff.jpg';">
<img src="<%= SkinPath %>/lori-images/listingsoff.jpg" id="listings" border="0" alt="">
</a><a href="http://www.corazzinirealestate.com" onmouseover="document.images['contact'].src='<%= SkinPath %>/lori-images/contacton.jpg';" onmouseout="document.images['contact'].src='<%= SkinPath %>/lori-images/contactoff.jpg';">
<img src="<%= SkinPath %>/lori-images/contactoff.jpg" id="contact" border="0" alt="">
</a><a href="http://www.corazzinirealestate.com" onmouseover="document.images['portfolio'].src='<%= SkinPath %>/lori-images/portfolioon.jpg';" onmouseout="document.images['portfolio'].src='<%= SkinPath %>/lori-images/portfoliooff.jpg';">
<img src="<%= SkinPath %>/lori-images/portfoliooff.jpg" id="portfolio" border="0" alt="">
</a>
</div>
</li>
<li class="contentpane" runat="server" id="contentpane">
</li>
</ul>
<div class="login">
<dnn:login runat="server" id="dnnLOGIN" />
</div>
</div>
And my css:
Code:
body {height: 100%;
background-image: url(lori-images/picketfence.jpg);
background-repeat: no-repeat;
background-position: top center;}
.wrapper {width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid black;
background-image: url(lori-images/background.gif);}
/* TOP MENU BAR CONTAINER */
.login {width: 50px;
height: 20px;
position: relative;
bottom: 0px;
left: 50px;}
.homebutton {width: 100px;
height: 100px;
position: relative;
top: 0px;
left: 0px;}
.leftmenu {width: 53px;
height: 500px;
left: 50px;
background-color: transparent;
border: 1px blue solid;
margin-left: 50px;}
.contentpane {width: 675px;
height: 488px;
border: 1px #f19a14 solid;
background-color: transparent;
}
ul#navlist
{
padding: 0;
margin: 0;
list-style-type: none;
border: 1px red solid;
}
ul#navlist li { display: inline; }
.dnnlogin {height: 40px;
vertical-align: bottom;}
|
