?
Solved

CSS Style not rendering

Posted on 2011-10-07
13
Medium Priority
?
179 Views
Last Modified: 2012-05-12
Hi Please can you advise what I'm doing wrong with my CSS --

Parent Divs are not expanding to include Child Divs.....

Navigattion links are not staying in line.....

It's been a long day ...

my code is below -

Thank you


<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body
{
	margin: 0px;
	background-image: url("../images/body.png");
	background-position: center top;
	background-repeat: repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.pagesplit{
	width:100%;
	float:left;
	position:relative;
}
.wrapper{
	margin:0 auto;
	width:1000px;
	position: relative;
	margin-bottom: 4px;
	overflow: visible;
}
.headsection{
	height: 40px;
	position: relative;
}
.navigationsection{
	height:34px;
	position: relative;
}
.navigationsection ul{
	float:left;
	position:relative;
	list-style:none;
	width:100%;
	margin:0;
	padding:0;
	background-image:url(../images/navigation.jpg);
	background-repeat:no-repeat;
}
.navigationsection li{
	float:left;
}
.navigationsection a{
	display: block;
	line-height:32px;
	padding:0px 12px;
	width: 60px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
}
.maincontent{
	height: 180px;
	position: relative;
}
.footer{
	height:100px;
	position: relative;
}
.testdiv{
	position:relative;
	float:left;
	width:100%;
	background-color:#333333;
}
.maincolumn{
	float:left;
	position:relative;
	width: 808px;
}
.rightcolumm{
	float:right;
	position:relative;
	width:182px;
}
.logoarea{
	float:left;
	position:relative;
	width:300px;
}
.topnonlogo{
	float:right;
	position:relative;
	width:690px;
}
.topbar-form-section, .topbar-account-section{
	position:relative;
	float:right;
	width: 100%;
}
.topbar-form-section{
	height:75px;
	background-color: #000;
}
</style>
</head>

<body>
<div class="pagesplit">
  <div class="wrapper headsection">  
    <div class="logoarea">logoarea</div>
    <div class="topnonlogo">
      <div class="topbar-account-section">Content for New Div Tag Goes Here</div>
      <div class="topbar-form-section">Content for New Div Tag Goes Here</div>
    </div>
  </div>
</div>
<div class="pagesplit">
  <div class="wrapper navigationsection">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Members</a></li>
      <li><a href="#">Suppliers</a></li>
      <li><a href="#">Two Words</a></li>
      <li><a href="#">button two</a></li>
      <li><a href="#">Uplift</a></li>
      <li><a href="#">button four</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Finance</a></li>
      <li><a href="#">Admin</a></li>
    </ul>
  </div>
</div>
<div class="pagesplit">
  <div class="wrapper maincontent">
    <div class="maincolumn">maincolumn</div>
    <div class="rightcolumm">rightcolumn</div>
  </div>
</div>
<div class="pagesplit">
  <div class="wrapper footer">Content for New Div Tag Goes Here</div>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:garethtnash
  • 6
  • 6
13 Comments
 
LVL 61

Expert Comment

by:HainKurt
ID: 36932355
"Navigattion links are not staying in line....."

can you please post a screenshot that shows how they should like...
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36932373
Looks good on FF and IE here with your sample code. Can you give us a live URL or more details? A screen shot as HainKurt suggested would be great too
0
 

Author Comment

by:garethtnash
ID: 36932519
Hi,

Changed my CSS slightly....

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body
{
	margin: 0px;
	background-image: url("../images/body.png");
	background-position: center top;
	background-repeat: repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.pagesplit{
	width:100%;
	float:left;
	position:relative;
}
.wrapper{
	margin:0 auto;
	width:1000px;
	position: relative;
	margin-bottom: 40px;
	overflow: visible;
}
.headsection{
	position: relative;
}
.navigationsection{
	height:34px;
	position: relative;
}
.navigationsection ul{
	float:left;
	position:relative;
	list-style:none;
	width:100%;
	margin:0;
	padding:0;
	background-image:url(../images/navigation.jpg);
	background-repeat:no-repeat;
}
.navigationsection li{
	float:left;
}
.navigationsection a{
	display: block;
	line-height:32px;
	padding:0px 12px;
	width: 60px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
}
.maincontent{
	height: 180px;
	position: relative;
}
.footer{
	height:100px;
	position: relative;
}
.testdiv{
	position:relative;
	float:left;
	width:100%;
	background-color:#333333;
}
.maincolumn{
	float:left;
	position:relative;
	width: 808px;
}
.rightcolumm{
	float:right;
	position:relative;
	width:182px;
}
.logoarea{
	float:left;
	position:relative;
	width:300px;
	height: 75px;
	background-color: #666666;
}
.topnonlogo{
	float:right;
	position:relative;
	width:690px;
}
.topbar-form-section, .topbar-account-section{
	position:relative;
	float:right;
	width: 100%;
}
.topbar-form-section{
	height:75px;
	background-color: #000;
}
</style>
</head>

<body>
<div class="pagesplit">
  <div class="wrapper headsection">  
    <div class="logoarea">logoarea</div>
    <div class="topnonlogo">
      <div class="topbar-account-section">Content for New Div Tag Goes Here</div>
      <div class="topbar-form-section">Content for New Div Tag Goes Here</div>
    </div>
  </div>
</div>
<div class="pagesplit">
  <div class="wrapper navigationsection">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Members</a></li>
      <li><a href="#">Suppliers</a></li>
      <li><a href="#">Two Words</a></li>
      <li><a href="#">button two</a></li>
      <li><a href="#">Uplift</a></li>
      <li><a href="#">button four</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Finance</a></li>
      <li><a href="#">Admin</a></li>
    </ul>
  </div>
</div>
<div class="pagesplit">
  <div class="wrapper maincontent">
    <div class="maincolumn">maincolumn</div>
    <div class="rightcolumm">rightcolumn</div>
  </div>
</div>
<div class="pagesplit">
  <div class="wrapper footer">Content for New Div Tag Goes Here</div>
</div>
</body>
</html>

Open in new window


Page can be seen here

Have deliberatley added a 40px margin to the bottom of each .wrapper ...

Nothing happening

Thank you
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 30

Expert Comment

by:LZ1
ID: 36932529
Unfortunately I'm still not seeing what you mean by "not staying in line".  Are there other navigational menus that are not cooperating? What browser are you using?
0
 

Author Comment

by:garethtnash
ID: 36932629
IE9, actually the navigation links are working fine now, but the 40px margin bottom isn't infact anything with a class of .wrrapper disapears unless I give it a heaight..

I need it to expand to allow for an overflow..

Have tried overflow visible..

TY
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36932673
If there is no content, then the div has no reason to expand.  I checked IE and it still looks fine to me. The 40px bottom margin is on all the elements it needs to be on.
0
 

Author Comment

by:garethtnash
ID: 36932850
For me, there is no gap between the black box and the navigation bar, here there should be a 40px gap... screendump
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 36932905
Oh I see now.  Try adding a <div style="clear:both;"> </div> as the last thing in the wrapper headsection
0
 

Author Comment

by:garethtnash
ID: 36932940
Thank you that seems to have done he trick.....

Can you explain?

Should I add it to the bottom of all of the other regions too?

TY
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36932963
Basically after you've floated so many elements, you'll need to clear those floats. Otherwise, as you saw, you'll end up with inconsistent heights. It would be a good practice to clear your floats in general, so what I would do is make a class called "clear" or something along those lines. Then add it wherever you need it.

<div class="clear"></div>
0
 

Author Closing Comment

by:garethtnash
ID: 36933046
Thank you
0
 

Author Comment

by:garethtnash
ID: 36933215
Hi LZ1,

Sorry, two more problems...

The right hand column is out of line and had a top paddig that shouldn't be there.....

TY
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body
{
	margin: 0px;
	background-image: url("../images/body.png");
	background-position: center top;
	background-repeat: repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
.clear{
clear:both;
}
ol, ul {
	list-style:none;
}
.pagesplit{
	width:100%;
	float:left;
	position:relative;
}
.wrapper{
	margin:0 auto;
	width:1000px;
	position: relative;
	overflow: visible;
}
.headsection{
	position: relative;
	margin-bottom: 8px;
}
.navigationsection{
	height:34px;
	position: relative;
	margin-bottom: 8px;
}
.navigationsection ul{
	float:left;
	position:relative;
	list-style:none;
	width:100%;
	margin:0;
	padding:0;
	background-image:url(../images/navigation.jpg);
	background-repeat:no-repeat;
}
.navigationsection li{
	float:left;
}
.navigationsection a{
	display: block;
	line-height:32px;
	padding:0px 12px;
	width: 60px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
}
.maincontent{
	height: 180px;
	position: relative;
}
.footer{
	height:100px;
	position: relative;
}
.testdiv{
	position:relative;
	float:left;
	width:100%;
	background-color:#333333;
}
.maincolumn{
	float:left;
	position:relative;
	width: 808px;
}
.rightcolumm{
	float:right;
	position:relative;
	width:172px;
}
.logoarea{
	float:left;
	position:relative;
	width:300px;
	height: 75px;
	background-color: #666666;
}
.topnonlogo{
	float:right;
	position:relative;
	width:690px;
}
.topbar-form-section, .topbar-account-section{
	position:relative;
	float:right;
	width: 100%;
}
.topbar-form-section{
	height:75px;
	background-color: #000;
}
/* RightColumn Menu Bar*/
.product_menu{
	border-bottom: 2px solid #f7f7f7;
	margin-bottom: 20px;
	margin-top: 0px;
	padding-top: 0px;
}
.product_menu h2 {
	background: #d7d7d7 url(../images/productmenu-h1-bg.png) no-repeat left top;
	height: 30px;
	border: 1px solid #d7d7d7;
	border-bottom: 0;
}
/* Hide Text From Element */
.product_menu h2 span{
	position: absolute;
	left: -50000px;
}
#prod_nav {
	position: relative;
	z-index: 300;
	border-left: 1px solid #d7d7d7;
	border-right: 1px solid #d7d7d7;
	border-bottom: 2px solid #d7d7d7;
	float: left;
}
#prod_nav li.top {
	display: block;
	float: left;
	width: 170px;
	border-top: 1px solid #d7d7d7;
	border-bottom: 1px solid #fbfbfb;
	height: 31px;
}
#prod_nav li a.top_link {
	font-size: 11px;
	display: block;
	width: 159px;
	padding-left: 11px;
	line-height: 31px;
	color: #9e1f6a;
	text-decoration: none;
	cursor:pointer;
	background: #f0f0f0;
}
#prod_nav li a.top_link span, #prod_nav li a.top_link span.down {
	display: block;
	padding-right: 20px;
	background: url(../images/productmenu-arrow.gif) no-repeat right center;
}
#prod_nav li:hover a.top_link {
	color:#9e1f6a;
	background: #fff;
}
/*.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

/*.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }

/* html .clearfix { height: 1%; }
/* End Clear Fix Hack for Firefox */

</style>
</head>

<body>
<div class="pagesplit">
  <div class="wrapper headsection">  
    <div class="logoarea">logoarea</div>
    <div class="topnonlogo">
      <div class="topbar-account-section">Content for New Div Tag Goes Here</div>
      <div class="topbar-form-section">Content for New Div Tag Goes Here</div>
    </div>
    <div class="clear"></div>
  </div>
</div>
<div class="pagesplit">
  <div class="wrapper navigationsection">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Members</a></li>
      <li><a href="#">Suppliers</a></li>
      <li><a href="#">Two Words</a></li>
      <li><a href="#">button two</a></li>
      <li><a href="#">Uplift</a></li>
      <li><a href="#">button four</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Finance</a></li>
      <li><a href="#">Admin</a></li>
    </ul>
  </div>
</div>
<div class="pagesplit">
  <div class="wrapper maincontent">
    <div class="maincolumn">maincolumn</div>
    <div class="rightcolumm">
    <div class="product_menu">
        <h2><span>Product Categories</span></h2>
        <ul id="prod_nav" class="clearfix">
          <li class="top"><a href="#" class="top_link"><span class="down">View Orders</span></a></li>
          <li class="top"><a href="#" class="top_link"><span>Create Order</span></a></li>
          <li class="top"><a href="#" class="top_link"><span>Batch Orders</span></a></li>
          <li class="top"><a href="#" class="top_link"><span>Product Search</span></a></li>
          <li class="top"><a href="#" class="top_link"><span>Create Product</span></a></li>
          <li class="top"><a href="#" class="top_link"><span class="down">Product Categories</span></a></li>
          <li class="top"><a href="#" class="top_link"><span>Nominal Codes</span></a></li>
        </ul>
      </div>
      </div>
      <div class="clear"></div>
  </div>
</div>
<div class="pagesplit">
  <div class="wrapper footer">Content for New Div Tag Goes Here</div>
</div>
</body>
</html>

Open in new window

0
 
LVL 30

Expert Comment

by:LZ1
ID: 36933230
You'll need to open up another question. As long as it's in the CSS zone, I'll be able to help you further.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question