14 replies [Last post]
mds1256
Offline
newbie
Last seen: 11 years 12 weeks ago
Timezone: GMT+1
Joined: 2007-10-13
Posts: 9
Points: 2

hard to explain really... but i will do my best

i have 3 div's

page
nav
and content and it goes like this

lots of content in here blah blah for about 50 lines etc....

so as you can see there is one main div called page that has all the other divs in.

right now i have a layout using position=absolute so place the divs where i want them. see below

---------------------------------- page div
| ---------- ---------------- |
| | nav div | | | |
| ---------- | content | |
| | div | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| ---------------- |
| |
----------------------------------

like i said i am using position=absolute. for both the nav and content div's for define where they are to be placed.

The problem is i have set the Page Div to have a background of grey but it only seems to go to a portion of the content div box when i have 50 lines of text. I am wanting it to be grey all the way where ever the text stops in the content box...

any ideas

if i dont use position tag it works fine but obviously i is located at the left then and it needs to be in that location......

sorry if i have described it wrong

thanks

//mod edit: ASCII art enclosed in <code></code> tags to trigger {white-space: pre;}
--gary/kk5st

mds1256
Offline
newbie
Last seen: 11 years 12 weeks ago
Timezone: GMT+1
Joined: 2007-10-13
Posts: 9
Points: 2

didnt come out the way i

didnt come out the way i wanted :shrug: but does any 1 know how to solve this?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 20 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Please show us all your code

Please show us all your code - all the HTML and CSS - like the stickies ask you for. Please also wrap code in the <code></code> tags

Verschwindende wrote:
  • CSS doesn't make pies

mds1256
Offline
newbie
Last seen: 11 years 12 weeks ago
Timezone: GMT+1
Joined: 2007-10-13
Posts: 9
Points: 2

html: <!DOCTYPE html PUBLIC

html:

Untitled Document

sdfgsdfg

sdf

gsd

fg

sdfg

ds

dsf

gds

fg

dsfg

dsf

g

dsfg

dsf

gdsf

 

 

dg

df

css

/* CSS Document */ #table { position:absolute; width:900px; height:830px; left: 0px; top: 0px; background-color:#CCCCCC; border:1px solid #ccc; }

#headertop{
position:absolute;
width:900px;
height:45px;
left: 0px;
top: 0px;
z-index: 1;
}

#headermiddle{
position:absolute;
width:900px;
height:125px;
left: 0px;
top: 46px;
z-index: 2;
}

#nav{
position:absolute;
width:900px;
height:33px;
left: 0px;
top: 172px;
z-index: 3;
}

#breadcrum{
position:absolute;
width:900px;
height:20px;
left: 0px;
top: 206px;
z-index: 4;
}

#leftcontbox1{
position:absolute;
width:147px;
height:191px;
left: 5px;
top: 241px;
z-index: 5;
}

#leftcontbox2{
position:absolute;
width:147px;
height:191px;
left: 5px;
top: 454px;
z-index: 8;
}

#maincontent{
position:absolute;
width:720px;
left: 179px;
top: 241px;
}

#footer{
position:absolute;
width:900px;
height:26px;
left: 0px;
top: 774px;
}

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 7 years 17 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hi,

Hi,

try giving overflow:hidden to your page div.

And to tell you the truth i really dont like all the absolute positioning. why do you wan to do that???

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

mds1256
Offline
newbie
Last seen: 11 years 12 weeks ago
Timezone: GMT+1
Joined: 2007-10-13
Posts: 9
Points: 2

the overflow just hides the

the overflow just hides the extra text but i need it displayed.

I dont know any other way to make a layout in css other than use absolute positioning to get the divs in the correct place.... i am always willing to learn tho??

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Google is your friend; look

Google is your friend; look for two column css layout. There are several tutorials. You may also view my sig link for an example.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Here's An Example...

Give this a shot and see if this works.

Untitled Document

Website Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vel justo. Fusce magna dui, ultricies ac, sagittis auctor, sodales eu, magna. Praesent vestibulum, nibh in ornare rhoncus, justo quam commodo diam, ut sagittis dolor ante eu ipsum. Aliquam id urna egestas orci egestas nonummy. Praesent adipiscing dictum nibh. Nunc tortor turpis, commodo non, auctor et, commodo id, nisi. In odio. Vivamus sodales erat non orci. Sed nibh felis, ultricies at, consequat ut, scelerisque quis, lorem. Curabitur tristique euismod eros. Nullam hendrerit iaculis velit. Maecenas euismod libero sit amet tortor. Mauris elit eros, vehicula quis, porttitor non, rutrum id, purus. Quisque hendrerit, diam sed aliquet lacinia, est mauris consectetuer urna, a ultrices tortor nulla tincidunt purus. Pellentesque suscipit neque id lorem.

Proin blandit justo ac erat. In scelerisque hendrerit nulla. Donec magna massa, ullamcorper vel, iaculis eget, suscipit nec, risus. Nulla facilisi. Ut vulputate, massa vel sollicitudin eleifend, neque augue euismod justo, ut pretium eros eros in augue. Integer in mauris. Praesent consectetuer lacus at sem. Aliquam auctor est vitae odio sagittis congue. Ut lacinia, magna sed pharetra aliquam, massa neque pellentesque arcu, eget suscipit tortor massa quis elit. Quisque quis tortor. Ut pellentesque velit at lorem.

Nam malesuada fermentum eros. Nullam felis felis, tincidunt quis, dignissim eu, posuere quis, urna. Pellentesque vestibulum velit quis tortor. Nulla facilisi. Sed at nulla. Proin in pede id urna placerat imperdiet. Quisque a lectus. Morbi tristique. Nulla et lorem eget odio pharetra gravida. In in velit nec velit ornare dictum. Integer tincidunt ultrices erat. Praesent at lorem. Nunc auctor. Quisque ac quam vel sapien semper viverra. Aenean condimentum lectus quis elit. Donec sed metus eu tortor tristique elementum. Sed at neque eget sem consequat lacinia. Aenean lacinia egestas nunc. Duis felis dolor, interdum eu, scelerisque vel, eleifend ut, nunc. Aenean sit amet lectus sit amet orci mollis dignissim.





/* GLOBAL RESET */ html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr { margin:0px; padding:0px; border:0px; border-collapse:separate; border-spacing:0px; }

/* BEGIN STYLING */

body {
background-color: #FFF;
font: 100.1% Helvetica, Arial, Verdana, Tahoma, Sans-Serif;
color: #000;
}

#wrapper {
width: 780px;
margin: 0 auto;
}

h1 {
padding: 10px;
border: 1px solid #000;
height: 50px;
}

#nav {
width: 150px;
border: 1px solid #000;
padding: 5px;
float: left;
}

#nav ul li {
list-style: none;
}

#content {
margin-left: 175px;
}

#footer {
border: 1px solid #000;
font-size: .7em;
padding: 5px;
margin-top: 15px;
}

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

mds1256
Offline
newbie
Last seen: 11 years 12 weeks ago
Timezone: GMT+1
Joined: 2007-10-13
Posts: 9
Points: 2

that worked like a treat. a

that worked like a treat. a see what i need to do... i need to set margins of the body to 0px and then to position everything using margin-left... am i right there?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

sort of... you just need to

sort of... you just need to learn how to deal with floating elements.
Also note the fact that I have a ton less div tags then you do.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

mds1256
Offline
newbie
Last seen: 11 years 12 weeks ago
Timezone: GMT+1
Joined: 2007-10-13
Posts: 9
Points: 2

how would i put another e.g.

how would i put another e.g. nav box underneath the current links box. i have tried copying the div and css and altering the reference to them in the css so the 2 boxes look at the 2 different css, but it just seems to sit beside it and i cannot get it to go under the current nav box?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

paste what you have and

paste what you have and attach an image to what you want it to look like

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

mds1256
Offline
newbie
Last seen: 11 years 12 weeks ago
Timezone: GMT+1
Joined: 2007-10-13
Posts: 9
Points: 2

code now html <!DOCTYPE

code now

html

Untitled Document

Website Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vel justo. Fusce magna dui, ultricies ac, sagittis auctor, sodales eu, magna. Praesent vestibulum, nibh in ornare rhoncus, justo quam commodo diam, ut sagittis dolor ante eu ipsum. Aliquam id urna egestas orci egestas nonummy. Praesent adipiscing dictum nibh. Nunc tortor turpis, commodo non, auctor et, commodo id, nisi. In odio. Vivamus sodales erat non orci. Sed nibh felis, ultricies at, consequat ut, scelerisque quis, lorem. Curabitur tristique euismod eros. Nullam hendrerit iaculis velit. Maecenas euismod libero sit amet tortor. Mauris elit eros, vehicula quis, porttitor non, rutrum id, purus. Quisque hendrerit, diam sed aliquet lacinia, est mauris consectetuer urna, a ultrices tortor nulla tincidunt purus. Pellentesque suscipit neque id lorem.

Proin blandit justo ac erat. In scelerisque hendrerit nulla. Donec magna massa, ullamcorper vel, iaculis eget, suscipit nec, risus. Nulla facilisi. Ut vulputate, massa vel sollicitudin eleifend, neque augue euismod justo, ut pretium eros eros in augue. Integer in mauris. Praesent consectetuer lacus at sem. Aliquam auctor est vitae odio sagittis congue. Ut lacinia, magna sed pharetra aliquam, massa neque pellentesque arcu, eget suscipit tortor massa quis elit. Quisque quis tortor. Ut pellentesque velit at lorem.

Nam malesuada fermentum eros. Nullam felis felis, tincidunt quis, dignissim eu, posuere quis, urna. Pellentesque vestibulum velit quis tortor. Nulla facilisi. Sed at nulla. Proin in pede id urna placerat imperdiet. Quisque a lectus. Morbi tristique. Nulla et lorem eget odio pharetra gravida. In in velit nec velit ornare dictum. Integer tincidunt ultrices erat. Praesent at lorem. Nunc auctor. Quisque ac quam vel sapien semper viverra. Aenean condimentum lectus quis elit. Donec sed metus eu tortor tristique elementum. Sed at neque eget sem c

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

onsequat lacinia. Aenean lacinia egestas nunc. Duis felis dolor, interdum eu, scelerisque vel, eleifend ut, nunc. Aenean sit amet lectus sit amet orci mollis dignissim.

css

/* GLOBAL RESET */
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}

/* BEGIN STYLING */

body {
background-color: #FFF;
font: 100.1% Helvetica, Arial, Verdana, Tahoma, Sans-Serif;
color: #000;
}

#wrapper {
width: 780px;
margin: 0 auto;
background-color:#CCCCCC;
}

h1 {
padding: 10px;
border: 1px solid #000;
height: 50px;
}

#nav {
width: 150px;
border: 1px solid #000;
padding: 5px;
float: left;
margin-left:12px;
margin-top:20px;
}

#nav ul li {
list-style: none;
}

#nav1 {
width: 150px;
border: 1px solid #000;
padding: 5px;
float: left;
margin-left:15px;
margin-top:250px;
}

#content {
margin-left: 200px;
margin-top: 200px;
}

#footer {
border: 1px solid #000;
font-size: .7em;
padding: 5px;
margin-top: 15px;
}

attached is something what i am after

AttachmentSize
Untitled-1.jpg 54.24 KB
Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

How does this

How does this look?

Untitled Document

Website Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vel justo. Fusce magna dui, ultricies ac, sagittis auctor, sodales eu, magna. Praesent vestibulum, nibh in ornare rhoncus, justo quam commodo diam, ut sagittis dolor ante eu ipsum. Aliquam id urna egestas orci egestas nonummy. Praesent adipiscing dictum nibh. Nunc tortor turpis, commodo non, auctor et, commodo id, nisi. In odio. Vivamus sodales erat non orci. Sed nibh felis, ultricies at, consequat ut, scelerisque quis, lorem. Curabitur tristique euismod eros. Nullam hendrerit iaculis velit. Maecenas euismod libero sit amet tortor. Mauris elit eros, vehicula quis, porttitor non, rutrum id, purus. Quisque hendrerit, diam sed aliquet lacinia, est mauris consectetuer urna, a ultrices tortor nulla tincidunt purus. Pellentesque suscipit neque id lorem.

Proin blandit justo ac erat. In scelerisque hendrerit nulla. Donec magna massa, ullamcorper vel, iaculis eget, suscipit nec, risus. Nulla facilisi. Ut vulputate, massa vel sollicitudin eleifend, neque augue euismod justo, ut pretium eros eros in augue. Integer in mauris. Praesent consectetuer lacus at sem. Aliquam auctor est vitae odio sagittis congue. Ut lacinia, magna sed pharetra aliquam, massa neque pellentesque arcu, eget suscipit tortor massa quis elit. Quisque quis tortor. Ut pellentesque velit at lorem.

Nam malesuada fermentum eros. Nullam felis felis, tincidunt quis, dignissim eu, posuere quis, urna. Pellentesque vestibulum velit quis tortor. Nulla facilisi. Sed at nulla. Proin in pede id urna placerat imperdiet. Quisque a lectus. Morbi tristique. Nulla et lorem eget odio pharetra gravida. In in velit nec velit ornare dictum. Integer tincidunt ultrices erat. Praesent at lorem. Nunc auctor. Quisque ac quam vel sapien semper viverra. Aenean condimentum lectus quis elit. Donec sed metus eu tortor tristique elementum. Sed at neque eget sem c

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

onsequat lacinia. Aenean lacinia egestas nunc. Duis felis dolor, interdum eu, scelerisque vel, eleifend ut, nunc. Aenean sit amet lectus sit amet orci mollis dignissim.

/* GLOBAL RESET */ html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr { margin:0px; padding:0px; border:0px; border-collapse:separate; border-spacing:0px; }

/* BEGIN STYLING */

body {
background-color: #FFF;
font: 100.1% Helvetica, Arial, Verdana, Tahoma, Sans-Serif;
color: #000;
}

#wrapper {
width: 780px;
margin: 0 auto;
background-color:#CCCCCC;
overflow: auto
}

h1 {
padding: 10px;
border: 1px solid #000;
height: 50px;
}

#nav1,
#nav2 {
width: 150px;
border: 1px solid #000;
padding: 5px;
float: left;
margin-left:12px;
margin-top:20px;
}

#nav2 {
clear: left;
}

#nav1 ul li,
#nav2 ul li {
list-style: none;
}

#content {
margin-left: 200px;
}

#content p {
padding: 20px 10px 5px 0;
}

#footer {
border: 1px solid #000;
font-size: .7em;
padding: 5px;
margin-top: 15px;
clear: both;
}

you needed to float #nav2 to the left and also clear it from the left from the previous float Smile

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

mds1256
Offline
newbie
Last seen: 11 years 12 weeks ago
Timezone: GMT+1
Joined: 2007-10-13
Posts: 9
Points: 2

WHOOO lol... thats it, you

WHOOO lol... thats it, you guys are excellent. Much appriciated Smile I know what you mean now i didnt know you had to clear the float before hand. thanks very much Laughing out loud