CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

CSS Problem: newbie question....

Discuss CSS Problem: newbie question.... in the CSS Help forum on Dev Shed.
CSS Problem: newbie question.... Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old November 24th, 2003, 10:43 PM
sym sym is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Posts: 8 sym User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
CSS Problem: newbie question....
Hi,

I'm still getting a hang of CSS and am having a problem -- I'm having a hard time for a specific section to "expand" down as I add content -- for example: I have a:

Code:
<div class="content">
  Hi.
  Hi.
  Hi.
  ..... etc (just an example)
</div>


and for content I'd have:

Code:
.content
{
    background-color: #000000;
    height: 400px;
}


That's no problem.. but I have that on top of ANOTHER <div> tag that has a black background -- it's hard to explain.. so I will give you a link to the page:

http://daband.org/v1/

As you can see -- the black doesn't keep extending down. I have no idea how to solve this.

The link to my stylesheet is at:

http://daband.org/v1/standard.css

Please take a look at the source of the page and stylesheet to see what I'm doin wrong... I'm clueless..

Regards
Sym
Reply With Quote
  #2  
Old November 24th, 2003, 11:41 PM
Nasrim Nasrim is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Oct 2002
Posts: 809 Nasrim User rank is Corporal (100 - 500 Reputation Level)Nasrim User rank is Corporal (100 - 500 Reputation Level)Nasrim User rank is Corporal (100 - 500 Reputation Level)Nasrim User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 6 Days 14 h 51 m 39 sec
Reputation Power: 10
Make your content_body position relative instead of absolute.

Code:
.content_body
{
	top: 5px;
	left: 162px;
	height: 480px;
	padding: 1px;
	position: relative;
	width: 460px;
	color: white;
	background-image: url('http://daband.org/v1/images/body_bg.gif');
	background-repeat: repeat;
}
Reply With Quote
  #3  
Old November 25th, 2003, 06:11 AM
sym sym is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Posts: 8 sym User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Quote:
Originally posted by Nasrim
Make your content_body position relative instead of absolute.

Code:
.content_body
{
	top: 5px;
	left: 162px;
	height: 480px;
	padding: 1px;
	position: relative;
	width: 460px;
	color: white;
	background-image: url('http://daband.org/v1/images/body_bg.gif');
	background-repeat: repeat;
}


Well, it still looks messed up, here's how it looks now:

http://daband.org/v1/index2.html
Reply With Quote
  #4  
Old November 25th, 2003, 08:06 AM
Nasrim Nasrim is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Oct 2002
Posts: 809 Nasrim User rank is Corporal (100 - 500 Reputation Level)Nasrim User rank is Corporal (100 - 500 Reputation Level)Nasrim User rank is Corporal (100 - 500 Reputation Level)Nasrim User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 6 Days 14 h 51 m 39 sec
Reputation Power: 10
You changed main_body and navigation to relative. They need to stay absolute.

Only one you needed to change was content_body.

Also you are short on closing </div> tag at the bottom.

It works this way in my tests with IE, Mozilla, and Opera.
Reply With Quote
  #5  
Old November 25th, 2003, 11:06 AM
Akh's Avatar
Akh Akh is offline
|<.+#f@#+.&.|
Dev Shed Frequenter (2500 - 2999 posts)
  
Join Date: Mar 2002
Location: norway
Posts: 2,622 Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 3 Weeks 6 Days 2 h 18 m 25 sec
Reputation Power: 548
use float. easiest solution,

Code:
.navigation
{
	float:left;
	padding: 1px;
	width: 146px;
	background-color: #000000;
	border-right: 1px #E8E4DC dotted;


}

.content_body
{
	margin-left: 155px;
	padding: 1px;
	width: 460px;
	color: white;
	background-image: url('http://daband.org/v1/images/body_bg.gif');
	background-repeat: repeat;
}


and there is lots you could to fix up that code,
remeber to use alt-attributes on every image,

instead of the table in the navigation
you could have used a list,

instead of this
Code:
<div class="content_body">  
      
      <img src="images/body_news.gif" border="0">  <br><br>  
               
      <div class="content_title">
        Launch: rgamer.net. 
      </div>            
      <div class="content_date">

        November 24th, 2003
      </div>      
      <div class="content_text">
        Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
        Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
        Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
        Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
        Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
        Welcome!  rgamer.net has finally launched.  We hope that you like our layout.          
      </div>


you could write it like

Code:
    <div class="content_body">  
      
	  <h1><img  src="body_news.gif" alt="Current news"></h1> 
           
      <h2>
        Launch: rgamer.net. 
      </h2>            
      <h3>
        November 24th, 2003
      </h3>      
      <p>
        Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
        Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
        Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
        Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
        Welcome!  rgamer.net has finally launched.  We hope that you like our layout.
        Welcome!  rgamer.net has finally launched.  We hope that you like our layout.          
      </p>


and the css

Code:
.content_body
{
	margin-left: 155px;
	padding: 1px;
	width: 460px;
	color: white;
	background-image: url('http://daband.org/v1/images/body_bg.gif');
	background-repeat: repeat;
}

.content_body h2
{
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #B6C1D5;
}

.content_body h3
{
	font-family: arial;
	font-size: 7pt;
	color: #6A7589;
	font-weight: bold;
}

.content_body p 
{
	align: justify;
	padding: 5px;
}
Reply With Quote
  #6  
Old November 25th, 2003, 01:37 PM
sym sym is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Posts: 8 sym User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Quote:
Originally posted by Nasrim
You changed main_body and navigation to relative. They need to stay absolute.

Only one you needed to change was content_body.

Also you are short on closing </div> tag at the bottom.

It works this way in my tests with IE, Mozilla, and Opera.


Akh, I will try your float solution soon.. but for now, Nasrim, I have tried what you said and this is what it now looks like in I.E and then in Mozilla Firebird. It looks pretty much perfect in I.E, except the left dotted line doesn't extend down -- it stops 1/2 down as shown. And in Firebird, the content body looks messed up on the bottom, as shown here:





How can I get the dotted line to extend all the way down? It doesn't seem to want to.... and the bottom looks messed up in Firebird (what I mainly use).
Reply With Quote
  #7  
Old November 25th, 2003, 02:23 PM
sym sym is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Posts: 8 sym User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Well, it seems like I solved the problem about it not showing up correctly on the bottom with Firebird -- I fixed that as shown on:

http://daband.org/v1/

However, I cannot seem to get the white border dotted line on the left to continue down as more content is added -- it' doesn't have a height specified so to me it should keep going -- but it seems to simply stop going down.

Any ideas?
Reply With Quote
  #8  
Old November 25th, 2003, 03:46 PM
Akh's Avatar
Akh Akh is offline
|<.+#f@#+.&.|
Dev Shed Frequenter (2500 - 2999 posts)
  
Join Date: Mar 2002
Location: norway
Posts: 2,622 Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 3 Weeks 6 Days 2 h 18 m 25 sec
Reputation Power: 548
you are missing the <ul></ul> tags in the
navigation list

just set the border-left to .content_body instead
of border-right in .navigation

.content_body
{
..
border-left: 1px #E8E4DC dotted;
}
Reply With Quote
  #9  
Old November 25th, 2003, 04:40 PM
sym sym is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Posts: 8 sym User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Akh,

I hate to be a bother but I changed .content_body to have the border-left, and the dotted line runs past the black on the bottom -- take a look:

Any ideas?:

http://daband.org/v1/
Last edited by sym : November 25th, 2003 at 04:43 PM.
Reply With Quote
  #10  
Old November 25th, 2003, 05:37 PM
Akh's Avatar
Akh Akh is offline
|<.+#f@#+.&.|
Dev Shed Frequenter (2500 - 2999 posts)
  
Join Date: Mar 2002
Location: norway
Posts: 2,622 Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 3 Weeks 6 Days 2 h 18 m 25 sec
Reputation Power: 548
it is because of the relative postion, top:5px;

just replace it with
margin-top:5px;
Reply With Quote
  #11  
Old November 25th, 2003, 05:47 PM
Nasrim Nasrim is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Oct 2002
Posts: 809 Nasrim User rank is Corporal (100 - 500 Reputation Level)Nasrim User rank is Corporal (100 - 500 Reputation Level)Nasrim User rank is Corporal (100 - 500 Reputation Level)Nasrim User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 6 Days 14 h 51 m 39 sec
Reputation Power: 10
If you change the top margin on your content_body to 0 it fixes that problem, and if you're going to use <ul> you need to increase the navigation width to accomodate the way it pushes everything to the right.

Code:
.content_body
{
	top: 0px;
	left: 162px;
	padding: 5px;
	position: relative;
	width: 460px;
	color: white;
	border-left: 1px #E8E4DC dotted;
}
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > CSS Problem: newbie question....

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support |