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 Layout Help Needed

Discuss CSS Layout Help Needed in the CSS Help forum on Dev Shed.
CSS Layout Help Needed 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 August 5th, 2003, 11:54 AM
njc njc is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2003
Posts: 46 njc User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 57 m 9 sec
Reputation Power: 6
CSS Layout Help Needed
( http://www.njcc.net/index2.html )

I need that right part to be moved up... like where the left nav-bar is. It scales how i want to, the bottom is right, the left has a static pixel width like i want, i just need that right bar to move up... here's the style sheet

Code:
body {
	font-family: verdana, sans-serif;
	font-size: 12px;
	background-color: #cccccc;
}

p {
	text-align: justify;
}

#top {
	margin: 20px 20px 0px 20px;
	padding: 10px;
	border: 5px solid #000;
	background: #ccc;
	height: 100px;
}

#nav-left {
	background: #ccc;
	top: 120px;
	left: 0px;
	border: 5px solid #000;
	margin: 20px;
	width: 250px;
}

#content-right {
	margin: 20px;
	margin-left: 290px;
	border: 5px solid #000;
	padding: 5px;
}

#bottom {
	margin: 20px;
	text-align: right;
	border: 5px solid #000;
	padding: 5px;
}
Reply With Quote
  #2  
Old August 5th, 2003, 12:52 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 17 m 15 sec
Reputation Power: 548
Code:

#nav-left {
	background: #ccc;
	float:	left;
	border: 5px solid #000;
	margin: 20px;
	width: 250px;
}


you can use float,

works in mozFB, opera7, konqueror
can't check it in ie here, but i assume it will work
there,
Reply With Quote
  #3  
Old August 5th, 2003, 12:53 PM
njc njc is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2003
Posts: 46 njc User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 57 m 9 sec
Reputation Power: 6
nice, thank you
Reply With Quote
  #4  
Old August 5th, 2003, 01:03 PM
njc njc is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2003
Posts: 46 njc User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 57 m 9 sec
Reputation Power: 6
Ok, it looks great here...

http://www.njcc.net/index2.html

but if there's only a little bit of text on the page, in the content-right div, it kind of collapses on itself

http://www.njcc.net/index3.html

updated style sheet

Code:
body {
	font-family: verdana, sans-serif;
	font-size: 12px;
	background-color: #cccccc;
}

p {
	text-align: justify;
}

ul {
	list-style-image: url(bullet.jpg)
}

a:link {color: #000099}     /* unvisited link */
a:visited {color: #000099}  /* visited link */
a:hover {color: blue}   /* mouse over link */
a:active {color: blue}   /* selected link */
a.current {font-weight: bold}

.noCSS { display: none; }

#top {
	margin: 0px;
	margin-left: 20px;
	margin-right: 20px;
	padding: 0px;
	padding-left: 15px;
	background: #ccc;
	height: 100px;
}

#nav-left {
	background: #ccc;
	top: 120px;
	padding-top: 15px;
	left: 0px;
	float:left;
	border-top: 1px solid #000099;
	margin: 20px;
	margin-right: 0px;
	width: 200px;
}

#content-right {
	margin: 20px;
	margin-left: 240px;
	padding-left:5px;
	padding-top: 0px;
	border-left: 1px solid #000099;
}

#bottom {
	margin: 20px;
	margin-top: 5px;
	text-align: right;
	border: 1px solid #000099;
	padding: 5px;
}
Reply With Quote
  #5  
Old August 5th, 2003, 01:05 PM
njc njc is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2003
Posts: 46 njc User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 57 m 9 sec
Reputation Power: 6
bvah, nevermind, i just threw in a height attribute in the right, it's a hack, but oh well
Reply With Quote
  #6  
Old August 5th, 2003, 01:16 PM
njc njc is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2003
Posts: 46 njc User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 57 m 9 sec
Reputation Power: 6
ok, one more quick problem
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > CSS Layout Help Needed

« 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 2 hosted by Hostway.