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

Page layout with multiple divs

Discuss Page layout with multiple divs in the Web Design Help forum on Dev Shed.
Page layout with multiple divs Web Design Help forum discussing topics such as video editing, audio editing, animation, etc. This is also the place to get recommendations on preferred web authoring tools.

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 October 20th, 2004, 09:03 PM
landonab landonab is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2004
Posts: 6 landonab User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Page layout with multiple divs
I am trying to learn page creation as I go and have been hand coding most of it. I've used dreamweaver some during the process but it seems faster to just code as you go. My problem is with div tags and how to use them properly. I have a page with a header and below that a content box and directly to the right of it a navigation box. problem is the nav box doesn't want to go where i want it. Following is my html and css:

Code:
<div id="top_image"><img src="Images/TopImage1.gif" alt="top_image" width="650" height="108" />
</div>

<div id="main_content"><h1>Lorem ipsum</h1><p>dolor sit amet........</p>
</div>

<div id="navigation">
         <ul>
		<li><a href="this.html">This</a></li>
		<li><a href="that.html">That</a></li>
		<li><a href="theOther.html">The Other</a></li>
	</ul>
</div>


CSS:

Code:
#top_image {
	position: absolute;
	top: 0%;
	width: 650px;
	height: 108px;
	border-right-color: #CCCCCC;
	border-right-style: solid;
	border-right-width: 5px;
	border-left-color: #CCCCCC;
	border-left-style: solid;
	border-left-width: 5px;
	border-bottom-color: #cccccc;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	left: 20%;
}

#main_content {
	position: absolute;
	top: 113px;
	height: 325px;
	width: 450px;
	border-right-color: #CCCCCC;
	border-right-style: solid;
	border-right-width: 5px;
	border-left-color: #CCCCCC;
	border-left-style: solid;
	border-left-width: 5px;
	border-bottom-color: #cccccc;
	border-bottom-style: solid;
	border-bottom-width: 5px;
	background-image: url(Images/PageBackground2.gif);	
	left: 20%;
}

#navigation {
	position: relative;
	top: 113px;
	right: 650px;
	width: 195px;
	height: 325px;
	border-right-color: #CCCCCC;
	border-right-style: solid;
	border-right-width: 5px;
	border-left-color: #CCCCCC;
	border-left-style: solid;
	border-left-width: 5px;
}


If anyone can give me some pointers or direct me to some good websites that explain this, I'd appreciate it. I tried w3c tutorials and others but they don't get in to multiple divs that I have found.

Thanks!!
Last edited by edwinbrains : October 21st, 2004 at 11:32 AM.
Reply With Quote
  #2  
Old October 21st, 2004, 04:44 AM
austint01's Avatar
austint01 austint01 is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Oct 2004
Location: leeds
Posts: 836 austint01 User rank is Corporal (100 - 500 Reputation Level)austint01 User rank is Corporal (100 - 500 Reputation Level)austint01 User rank is Corporal (100 - 500 Reputation Level)austint01 User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 1 Week 3 Days 21 h 4 m 59 sec
Reputation Power: 5
Quote:
Originally Posted by landonab
If anyone can give me some pointers or direct me to some good websites that explain this, I'd appreciate it. I tried w3c tutorials and others but they don't get in to multiple divs that I have found.

Thanks!!



www.bluerobot.com

type css tutorials in google
Reply With Quote
  #3  
Old October 21st, 2004, 07:12 AM
landonab landonab is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2004
Posts: 6 landonab User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Quote:
Originally Posted by austint01
www.bluerobot.com

type css tutorials in google


Thanks for the URL. I've been searching google and others quite a bit and haven't had a lot of luck. I did find some things late lastnight that helped.

Thanks again.
Reply With Quote
  #4  
Old October 21st, 2004, 08:37 AM
BonRouge's Avatar
BonRouge BonRouge is offline
Winemaster
Dev Shed Beginner (1000 - 1499 posts)
  
Join Date: Jul 2004
Location: Sendai, Japan
Posts: 1,354 BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 3 Weeks 3 Days 2 h 52 m 6 sec
Reputation Power: 85
I haven't tested your code, but maybe you need to make the nav bar position:absolute too....(?)
Reply With Quote
  #5  
Old October 21st, 2004, 11:33 AM
edwinbrains's Avatar
edwinbrains edwinbrains is offline
Retired Moderator
Dev Shed God 4th Plane (6500 - 6999 posts)
  
Join Date: Jan 2004
Location: London, UK
Posts: 6,670 edwinbrains User rank is Second Lieutenant (5000 - 10000 Reputation Level)edwinbrains User rank is Second Lieutenant (5000 - 10000 Reputation Level)edwinbrains User rank is Second Lieutenant (5000 - 10000 Reputation Level)edwinbrains User rank is Second Lieutenant (5000 - 10000 Reputation Level)edwinbrains User rank is Second Lieutenant (5000 - 10000 Reputation Level)edwinbrains User rank is Second Lieutenant (5000 - 10000 Reputation Level)edwinbrains User rank is Second Lieutenant (5000 - 10000 Reputation Level)  Folding Points: 85411 Folding Title: Advanced FolderFolding Points: 85411 Folding Title: Advanced FolderFolding Points: 85411 Folding Title: Advanced FolderFolding Points: 85411 Folding Title: Advanced FolderFolding Points: 85411 Folding Title: Advanced Folder
Time spent in forums: 1 Week 6 Days 23 h 36 m 40 sec
Reputation Power: 92
I've edited your post to include [ code ] tags. It just makes the code easier to read.
__________________
- Edwin -

The General Rules Thread | The General FAQ Thread
Reply With Quote
  #6  
Old October 21st, 2004, 03:14 PM
landonab landonab is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2004
Posts: 6 landonab User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Quote:
Originally Posted by edwinbrains
I've edited your post to include [ code ] tags. It just makes the code easier to read.


Ah, thank you. I'll do that in the future.
Reply With Quote
  #7  
Old October 21st, 2004, 03:40 PM
m-niki m-niki is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2004
Location: The Netherlands
Posts: 7 m-niki User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Send a message via MSN to m-niki
maybe if you let the navigation bar float right it will help?

float:right;
width:200px;

etc.

You must set the margin for the content then on

margin-left:210px;

so it won't be under or over the navigation bar.
In the html the navigation comes first to the content I believe..I hope this will do the trick...I haven't looked that well at your coding...
It worked out well for me!!
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > Web Design Help > Page layout with multiple divs

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





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 1 hosted by Hostway.