Jump to content

Float sidebar div, and prevent stuff from going under it

cs.punk

By cs.punk
in CSS Help

 Share

Recommended Posts

cs.punk Advanced Member

cs.punk

Posted
Posted

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]

Link to comment
Share on other sites
cs.punk Advanced Member

cs.punk

Posted
  • Author
Posted

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]

Link to comment
Share on other sites
departedmind Member

departedmind

Posted
Posted

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>

 

Link to comment
Share on other sites
cs.punk Advanced Member

cs.punk

Posted
  • Author
Posted

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 :)

Link to comment
Share on other sites
cs.punk Advanced Member

cs.punk

Posted
  • Author
Posted

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..

Link to comment
Share on other sites
cs.punk Advanced Member

cs.punk

Posted
  • Author
Posted

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...

Link to comment
Share on other sites
DEVILofDARKNESS Regular Member

DEVILofDARKNESS

Posted
Posted

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

Link to comment
Share on other sites
cs.punk Advanced Member

cs.punk

Posted
  • Author
Posted

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 :-\)

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • 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.