Jump to content

Float sidebar div, and prevent stuff from going under it


cs.punk

Recommended Posts

Two pics have been attached...

 

The code is :

<body bgcolor="#146AA8">

<h1 class="heading" align="center">Me Trader</h1>
<p align='center' class='smallheading'>Users online in past 10 minutes: 8 users online</p>
<div class='colorbreak'></div>
<div class='colorbreak2'></div>
<div class='colorbreak'></div>

<div class='floatleft'>
<div class='navlbox'>
		    	   <a href='/login.php'>Login</a>
				   </div><div class='navlbox'>
					 <a href='/register.php'>Register</a>
					 </div><div class='navlbox'>
				 <a href='/classfields/classfields.php'>Ads</a>
				 </div><div class='navlbox'>
								  <a href='/discussion_board/board.php'>Discussion Board</a>
								  </div><div class='navlbox'>
				 <a href='/blogs/blogs.php'>Blogs</a>
				 </div></div>

<div class='sidebox'>
<br/>
<p align="center" class="paragraph">Me Trader has had a HUGE update, allot of great features have been added! We hope you enjoy it!
<br/><a href='freezone.php'>FREE Zone! Ringtones, amazing stuff, funny stuff!</a>
<br/>- Me Trader Team</p>


<p class='heading2-sidemargin'>Latest blog posts</p><div class='sidemargin'>
         <p class="smallheading"></p>
         </div><p class='heading2-sidemargin'>Latest discussion board posts</p><div class='sidemargin'>
         <p class="smallheading"><a href='/discussion_board/topic.php?topicid=1&boardid=1'>Welcome to Me Trader Discussion Boards!</a> (2009-05-16 09:09:38)
      <br/><a href='/discussion_board/topic.php?topicid=2&boardid=4'>RE</a> (2009-05-16 12:39:03)
      <br/><a href='/discussion_board/topic.php?topicid=3&boardid=4'>!READ RULES BEFORE POSTING!</a> (2009-05-16 12:44:00)
      <br/><a href='/discussion_board/topic.php?topicid=4&boardid=4'>Me Trader</a> (2009-05-16 12:47:21)
      <br/><a href='/discussion_board/topic.php?topicid=5&boardid=1'>dsadsa</a> (2009-05-23 20:07:41)
      <br/></p>
         </div><p class='heading2-sidemargin'>Latest classfield posts</p><div class='sidemargin'>
         <p class="smallheading"><a href='/ads.php?adid=3'>nokia n78</a>  test (2009-05-18 12:08:35)
      <br/><a href='/ads.php?adid=6'>Core 2 Dup E6300 CPU</a>  R5000 (2009-06-04 12:35:25)
      <br/><a href='/ads.php?adid=7'>Core 2 Dup E6300 CPU</a>  R5000 (2009-06-04 12:35:26)
      <br/><a href='/ads.php?adid=8'>Core 2 Dup E6300 CPU</a>  R5000 (2009-06-04 12:35:26)
      <br/><a href='/ads.php?adid=9'>Core 2 Dup E6300 CPU</a>  R5000 (2009-06-04 12:35:27)
      <br/></p>
         </div><br/>
<hr/>

 

[attachment deleted by admin]

Sorry forgot the css and another pic:

 

div.navlbox
{text-align: center;
   background-color: #4486B5;
   border: solid;
   border-color: #000000;
   width: 260px;
}

div.topbox
{background-color: #387EAF;
}

div.colorbreak
{background-color: #004A7F;
   width: 100%;
   height: 3px;
}

div.colorbreak2
{background-color: #387EAF;
   width: 100%;
   height: 2px;
}

div.sidebox
{position:relative;
   height: 100%;
}

div.floatright
{float: right;
}

 

[attachment deleted by admin]

Well, just came close, well there are so many things to organize in your code.

 

Instead of using 3 div to create the top 'colorbreak' you can use one with top and bottom border and color of your choice, and you can use list to organize the navigation.

 

A little help...

 

<!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">
div.navlbox
{text-align: center;
   background-color: #4486B5;
   border: solid;
   border-color: #000000;
   width: 260px;
}

div.topbox
{background-color: #387EAF;
}


/* Added this class */ 
div.color-break {
width:100%;
height:2px;
background-color: #387EAF;
border-top:3px solid #004A7F;
border-bottom:3px solid #004A7F;
}

div.container { 
width:100%;
height:auto;
overflow:hidden;
}

#navigation {
margin:0;
padding:0; 
text-align: center;
   	background-color: #4486B5;
   	border: solid;
   	border-color: #000000;
   	width: 25%;
float:left;
list-style:none;
margin-bottom:20px;
}

#navigation li { 
border-bottom:2px solid black;
padding:2px 0;
}

#navigation li.last { border-bottom:none;}

div.sidebox {
margin:0; padding:0; 
width:70%; 
	float:right;
   	height: 100%;
}

/* ... */

div.colorbreak
{background-color: #004A7F;
   width: 100%;
   height: 3px;
}

div.colorbreak2
{background-color: #387EAF;
   width: 100%;
   height: 2px;
}

div.floatright
{float: right;
}
</style>

</head>

<body bgcolor="#146AA8">

<h1 class="heading" align="center">Me Trader</h1>
<p align='center' class='smallheading'>Users online in past 10 minutes: 8 users online</p>

<div class="color-break"></div>

<div class="container">
<ul id="navigation">
<li><a href='/login.php'>Login</a></li>
<li><a href='/register.php'>Register</a></li>
<li><a href='/classfields/classfields.php'>Ads</a></li>
<li><a href='/discussion_board/board.php'>Discussion Board</a></li>
<li class="last"><a href='/blogs/blogs.php'>Blogs</a></li>
</ul>



<div class='sidebox'>
<br/>
<p align="center" class="paragraph">Me Trader has had a HUGE update, allot of great features have been added! We hope you enjoy it!
<br/><a href='freezone.php'>FREE Zone! Ringtones, amazing stuff, funny stuff!</a>
<br/>- Me Trader Team</p>


<p class='heading2-sidemargin'>Latest blog posts</p>

<div class='sidemargin'>
         <p class="smallheading"></p>
</div>

<p class='heading2-sidemargin'>Latest discussion board posts</p>

	<div class='sidemargin'>
	<p class="smallheading"><a href='/discussion_board/topic.php?topicid=1&boardid=1'>Welcome to Me Trader Discussion Boards!</a> (2009-05-16 09:09:38)
         <br/><a href='/discussion_board/topic.php?topicid=2&boardid=4'>RE</a> (2009-05-16 12:39:03)
         <br/><a href='/discussion_board/topic.php?topicid=3&boardid=4'>!READ RULES BEFORE POSTING!</a> (2009-05-16 12:44:00)
         <br/><a href='/discussion_board/topic.php?topicid=4&boardid=4'>Me Trader</a> (2009-05-16 12:47:21)
         <br/><a href='/discussion_board/topic.php?topicid=5&boardid=1'>dsadsa</a> (2009-05-23 20:07:41)
         <br/></p>
         </div>

	 <p class='heading2-sidemargin'>Latest classfield posts</p>

	 <div class='sidemargin'>
         <p class="smallheading"><a href='/ads.php?adid=3'>nokia n78</a>  test (2009-05-18 12:08:35)
         <br/><a href='/ads.php?adid=6'>Core 2 Dup E6300 CPU</a>  R5000 (2009-06-04 12:35:25)
         <br/><a href='/ads.php?adid=7'>Core 2 Dup E6300 CPU</a>  R5000 (2009-06-04 12:35:26)
         <br/><a href='/ads.php?adid=8'>Core 2 Dup E6300 CPU</a>  R5000 (2009-06-04 12:35:26)
         <br/><a href='/ads.php?adid=9'>Core 2 Dup E6300 CPU</a>  R5000 (2009-06-04 12:35:27)
         <br/></p>
         </div>
</div>

</div>
</body>
</html>

 

Well, just came close, well there are so many things to organize in your code.

 

Instead of using 3 div to create the top 'colorbreak' you can use one with top and bottom border and color of your choice, and you can use list to organize the navigation.

 

A little help...

 

Thanks dude! Gonna check it now now :)

Rosejay what do you mean standard?...

 

Btw thanks departedmind, although im still looking for a solution... My code was messy and i use PHP and i copied the source, thinking its gonna be a quick question... If anyone knows a solution please post here..

It's not our task to clean up somebody's messy codes, we are here to help people who don't understand what they are doing wrong...

 

I did'nt expect anyone to 'clean' up the code... I just thought I would post it to give someone an idea of what I have/am talking about...

Okay, you say:

If anyone knows a solution please post here..

 

On what a solution?

 

If you understand the css, you should clean it up if you find it messy,

if you don't, I would sugest to learn it, it is really easy.

 

Sorry if I sounded a bit angry :) but I'm because I'm stuck myself with some php code ;p

Okay, you say:

If anyone knows a solution please post here..

 

On what a solution?

 

If you understand the css, you should clean it up if you find it messy,

if you don't, I would sugest to learn it, it is really easy.

 

Sorry if I sounded a bit angry :) but I'm because I'm stuck myself with some php code ;p

 

LoL, messy or not messy should not make a difference... And btw I am reading your php topic right now...(hmm :-\)

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.