5 replies [Last post]
coolmanlg
Offline
newbie
Last seen: 14 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-12-05
Posts: 6
Points: 0

Am working on a two column layout with a header, content section and a right navigation. I have been able to record some success but the right nav will not display as I want. The Issues am having are:

1. I need the right nav to be on the same top level with the header and for the right and left border property of the right nav to extend down. This is not the case now and I have tried all I know but no success. What am I doing wrong?

2. When the contents increases, it pushes the left nav down.I don't have any idea what's causing this.

3. When the browser is resized, it pushes the right nav to the middle of the content.

Layout [/html]

<!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=iso-8859-1" />
<title>Liquid Layout</title>
<link href="template_css.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
	<div id="sitemast">
	  	<h1><img id="mast_image1" src="http://www.dqdemos.com/2collayout/images/topmast_grey.gif" alt="image of a ship " /></h1>
		<h1><img id="mast_image2" src="http://www.dqdemos.com/2collayout/images/topmast_colored.gif" alt="An image of a ship" /></h1>
  </div><!---end  site header and top navigation menu section -->
	
	
	
	<div id="content_area">
	  
	  <!-- end site content section -->
      <!-- <div id="footer">
	footer | home
	
	</div> end footer and navigation -->
<p>&nbsp;</p>
	</div>
	<!-- end site content section -->
	
	<!-- <div id="footer">
	footer | home
	
	</div> end footer and navigation -->

</div><!-- end site container to hold individual blocks -->
<div id="clear"></div>
<div id="leftnav">
			<p id="dms_flag"></p>
			<p>Lori ipsum</p>
		
	</div><!-- end left navigational link -->

</body>
</html>

 

[b] stylesheet

body{

	margin:0px;
	padding:0px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000;
	background-color:#fff;
	
	}
	
#container{
	margin:1em 0px 1em 1% ;
	background-color:#fff;
	background-image:url(images/rightnav_bkgd_image.gif);
	background-repeat:repeat-y;
	background-position: right;
	width:750px;
	/*border-right:1px dotted #cccccc;*/
	padding-right:3px;
	
	
	
	
	}
	
#sitemast{
	background-color:#666;
	/*border-bottom:1px solid #333;*/
	margin-right:225px;
	}
	
#sitemast h1{
	margin:0;
	/*padding:.5em;*/
	font-size:9px;
	font-weight:normal;
	padding-top:0px;
	
	}

#leftnav{
	float:right;
	width:173px;
	/*margin-right:5px;*/
	left:0px;
	top:0px;
	margin-top:-42.5%;
	padding:0 2px;
	border-top:1px solid #CCCCCC;
	margin-right: 263px;
	border-right:1px dotted #ccc;
	border-left:1px dotted #ccc;
	}

#leftnav p#dms_flag{
	background-image:url(../2collayout/images/dms_flag.gif);
	background-repeat:no-repeat;
	
	
	width:173px;
	height:186px;
}
	
#leftnav p{
	margin-top:0px;
	
	background-image:url(http://www.dqdemos.com/2collayout/images/latest_news_image.gif);
	background-repeat:no-repeat;
	width:173px;
	height:153px;
	
	}
	
#content_area{
	padding-top:2px;
	margin:0 215px 0 0px;
	padding-right:8px;
	padding-left:0px;
	font-size:x-small;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	backgroung-color:#ccc;
	
	}

#footer{
	clear:both;
	background-color:#666;
	padding:1em;
	
	}
	
#mast_image1{
	width:536px;
	/*height:auto;*/
	height:153px;
	margin:0;
	}
#mast_image2{
 	width:536px;
	/*height:auto;*/
	height:153px;
	margin:0;
	
	}
#clear{
	clear:both;
	
	}


here is the url : http://www.dqdemos.com/2collayout/2col_liquid.html

I have included the correct image here.

Thanks all.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 2 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

2 col layout problem. Help pls.

To start with, move the #leftnav ahead of whatever is to be beside it.

Google float tutorial for some float background.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

coolmanlg
Offline
newbie
Last seen: 14 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-12-05
Posts: 6
Points: 0

Almost there....

Thanks kk5st.
Read up tutorials on float and I have reworked the marke up based on what I've read so far.

The rightnav column now comes before the header and the content sections. So here are my new issues:

 

<!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=iso-8859-1" />
<title>fluidlayout</title>
<link href="template_css.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="rightnav">

<h2><img src="http://www.webbmind/fluid/images/flag_image.gif" alt="daddo flag image" /></h2>
<h2><img src="http://www.webbmind/fluid/images/right_nav_bkground_img.gif" alt="navigation links image" /></h2>

</div>
<div id="logo"><h1><img src="images/topmast_grey.gif" alt="daddo logo" /><h3>Home|About us|</h3><img src="images/topmast_colored.gif" alt="daddo logo" /></h1></div>
<div id="content">
  
  
</div>


</body>
</html>



/* CSS Document */
body{
	margin:0px;
	padding:0px;
	background: url(images/tiled_image.gif) repeat-y ;
	}

#rightnav{
	float:right;
	width:175px;
	margin-right:280px;
	margin-top:5px;
	padding-left:3px;
	padding-top:2px;
	display:inline;
	
	border-left:1px dotted #ccc;
	border-right:1px dotted #ccc;
	border-top:1px solid #ccc;
	
	
	}
	
h3{
	margin-top:-34px;
	
	font-size:9px;
	padding-left:220px;
	margin-bottom:-0px;
	color:#fff;
	
	
	}
#logo{
	/*margin-top:-10px;*/
	margin-left:5px;
	width:538px;
	margin-top:5px;
	
	
	}
	
#content{
	margin-right:44%;
	margin-left:5px;
	width:534px;
	border-left:1px dotted #ccc;
	margin-top:-15px;
	

	
	}
.style1{
	text-align:justify;
	}


1. I need to have the dotted border style on the rightnav to extend to the end of the document. That is not happening now. I have read about the faux column and tried it but its not working. Any help here?

2.On a 1280 x 800, there is too much gap between the rightnav and the content section.Any suggestion here?

3. How do I make sure that when the browser is resized, the rightnav does not overlap the content area?

Here is the url: www.webbmind.net/fluid/fluid.html

Thanks all.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 2 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

2 col layout problem. Help pls.

Check out my 2 column demo. I think it will suggest solutions for these issues. Work with it a bit and we'll have more specific suggestions at the next step.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

coolmanlg
Offline
newbie
Last seen: 14 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-12-05
Posts: 6
Points: 0

My guardian angel

kk5st, u are my mentor... thanks.

I have gone through your demo and I have 2 questions:

1. Do I wrap the div elements in a wrapper?

2. How do I overlap the borders?

Thnx.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 2 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

2 col layout problem. Help pls.

You wrap the page as a whole in a div. That establishes a context. Think of it as putting your tools, each in their own place, in your toolbox. Now you can move the toolbox around without disturbing the alignment of the tools inside. You can wrap each column in a div to act as a drawer in the box. Don't get carried away, but use what you need.

Look at the margin on the main area. Now add or subtract a bit and watch the borders.

Alternatively, you could put a line down the edge of the bg image to fake a border.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.