Thanks for the help, that did take care of the error. I have been struggling with layout for this. Basically I'm trying to get the Logo and the Nav blocks to be next to each other - horizontal >
(LOGO)(Nav menu)
(ContentPane)
(NewsBox)
(FooterPane)
With the code I have included here, I see the Logo, in the Top Right of the page, below that, with a Left margin of 240px, I see the Nav block.
with your above suggestion included, I have come up with the following code:
ASCX:
<body>
<div class="main"> <!-- browser --->
<dnn:LOGIN runat="server" id="dnnLOGIN" />
<div id="wrap"> <!-- site --->
<!-- Logo section nav --->
<div id="Logo"><a title="Specialty Engine Components" href="/"><img src="<% =SkinPath %>images/logo-sec.png" width="240" height="80" alt ="Specialty Engine Components" /></a></ div> <!-- Logo --->
<div class="nav" runat="server" ID="topnav" visible="true"></div>
<!-- begin mainbody -->
<div class="ContentPane" runat="server" ID="ContentPane" visible="true"></div>
<!-- end content holder -->
<div class="newsbox" runat="server" ID="news_box" visible="true"></div>
</div>
<div class="footerpane" runat="server" ID="footer_pane" visible="true">
<div class="footer" >
<div class="footer-text">
<p>Copyright © 2012, Street Muscle. All Rights Reserved.</p>
<p class="page-footer">
<a href="http://www.streetmuscleonline.com/" target="_blank"></a>created by Frustrated
Incorporated.</p>
</div>
</div>
</div>
</div>
</body>
---------------------------------------------------
CSS:
html, body
{
height: 100%;
}
body
{
padding: 0;
margin: 0;
background-image: url('images/body_bg.jpg');
background-repeat:repeat-x;
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 10pt;
}
.main
{
width: 100%;
height: 100%;
}
#wrap
{
width: 1005px;
margin: auto;
padding: 40px 0 0 0;
}
.cleared
{
display: block;
clear: both;
float: none;
margin: 0;
padding: 0;
border: none;
font-size: 0;
height: 0;
}
/* begin Menu */
#logo
{
position: absolute;
width: 260px;
background-color: Red; /* temp setting to see div Logo block behind logo*/
}
#logo a img
{
border:0;
}
.nav
{
margin-left: 240px;
width: 760px ;
height: 80px ;
}
/* ContentPane */
.ContentPane
{
float: left;
padding-top: 60px;
width: 1005px;
height: auto;
background-color: white;
}
etc...
Please forgive my ignorance here, I trying to teach myself by trial and error.
1. How do I get the .nav section to be horizontally next to the logo?
I tried to float the logo and the nav sections-left in the css, but that just screwed it up more.
2. After doing the tutorial and getting the logo image to function correctly, I don't seem to have any control on the style of this section in the CSS, under the section:
#logo
{
position: absolute;
width: 260px;
background-color: Red; /* temp setting to see div Logo block behind logo ----- not working?*/
}
- if i remove this code, the skin does not change - reading from the ascx line, I assume. With the ascx line, is there a way to modify that block inside CSS?
I appreciate your patience and any suggestions you can offer.