Hi
I've got a central portion of my site which displays all the relevant content, the rest of the page is for navigation and aesthetics (!).
As you can see, I run a driving school. I'm putting together a system of lesson plans using PHP/MySQL to retrieve data to 'plug into' the Lesson Plan page. Each page will have the following sections; Title, Description, Objective, Recap (prior knowledge), Main Points for success, Diagram.
What I'd like is for these to be placed the same for every lesson, but if one has a large amount of text then the DIV height will automatically increase and the subsequent DIVs will re-position just below.
I can fix them all in height, width and top/left position but this looks rubbish when the amount of text either doesn't fill the box or is too much.
The main problem is this. With 'absolute' positioning I can't work out what to do with the 'top' attribute to ensure that each DIV is just 5px below the previous one. So, in 'relative' positioning I can't get my head round how to make the relation to the previous DIV if it isn't nested!?!?!
In short, i've got my knickers in a twist and I'm normally OK and working these things out.
Can someone shedsome light onto the CSS trickery that I've overlooked. I am of course a humble amateur.
Regards
Richdo you mean on your homepage ?
<!-- m --><a class="postlink" href="http://roundthebend.greater-peterborough.com/sorry">http://roundthebend.greater-peterborough.com/sorry</a><!-- m -->, i did mean to post a link......
<!-- m --><a class="postlink" href="http://www.round-the-bend.co.uk">http://www.round-the-bend.co.uk</a><!-- m -->
the yellow blob in the middle is where all this action needs to take place, and that is defined by CSS as follows:
<DIV ID='content'>
#content {
position: absolute;
top: 10px;
left: 50%;
height: 430px;
width: 480px;
margin: auto auto auto -240px;
color: #225aa5;
background-color: #fbde00;
overflow: auto;
}I can fix them all in height, width and top/left position but this looks rubbish when the amount of text either doesn't fill the box or is too much.
what "box" are you talking about?
i dont see anything that is not fitting in any box
pliz dont write your tags in uppercase!Sorry for the delay (I'm in UK).
I've cobbled together an example of the problem here <!-- m --><a class="postlink" href="http://www.round-the-bend.co.uk/lesson_plan2.php">http://www.round-the-bend.co.uk/lesson_plan2.php</a><!-- m -->
Ideally, the white box would shrink to fit the text and then the red box would shift up so that it is just below the white box.
I appreciate any help whether it be straight solutions or a nudge in the right direction.
With regard to my tags being uppercase, I apologise if my HTML is not written according to standards just now. However, I am an amateur and when I started the site I was unaware of such standards. Now, I need to get certain things up and live on the site before I can afford the time required to standardise all of the code. I'm sure you can appreciate that my customers aren't too fussed as long as the pages render correctly in their browsers. So far, no complaints.
Thanks
RichI suppose my question is really this:
How can you position a <div> to always be 10px below the bottom of another <div> and have the same horizontal alignment as that <div> ?
Also, how can the height of a <div> be controlled by content ?
I'd like a link to a tutorial or example page which shows this kind of positioning.I'm part of the way there. I can change the height of a <div> just by ommitting height from the CSS and then letting content do the talking.
I can position the next <div> in the layout just by ommitting the position attributes. However, how can I get a 10px gap between <div>'s ?
Looking at CSS Zen Garden for ideasuse relative positioning:
<div style="position: relative; top: 5px;">1</div>
<div style="position: relative; top: 25px;">2 - 25px from the bottom of 1.</div>
<div style="position: relative; top: 105px;">3 - 105px from bottom of 2.</div>By not using position:absolute on all your elements.
Basic positioning (<!-- m --><a class="postlink" href="http://www.brainjar.com/css/positioning/default.asp">http://www.brainjar.com/css/positioning/default.asp</a><!-- m -->)Thanks all, I'll have a go later First I'm gonna check out Brainjar for some better understanding of positioning.
richardSo far, so good......but can anyone help with the slightly more tricky part.
I've successfully got the lemon yellow part ("Carry out a basic a set of checks which are essential before you drive.") and the green part to sit side-by-side. I've achieved this by using a <div> to contain the two separate <div>'s.
What I need now, is to place another <div> directly below that. So, if the green <div> is tallest then the new <div> will be just below that. However, if the lemon yellow <div> is tallest then the new one will be just below that. The new <div> will stretch across the centre part of the screen like the other brightly coloured <div>'s.
When I tried using...
position: relative; top: 5px
.....the result was an overlap between the new <div> and the two current <div>'s.
Any ideas?
I've got a central portion of my site which displays all the relevant content, the rest of the page is for navigation and aesthetics (!).
As you can see, I run a driving school. I'm putting together a system of lesson plans using PHP/MySQL to retrieve data to 'plug into' the Lesson Plan page. Each page will have the following sections; Title, Description, Objective, Recap (prior knowledge), Main Points for success, Diagram.
What I'd like is for these to be placed the same for every lesson, but if one has a large amount of text then the DIV height will automatically increase and the subsequent DIVs will re-position just below.
I can fix them all in height, width and top/left position but this looks rubbish when the amount of text either doesn't fill the box or is too much.
The main problem is this. With 'absolute' positioning I can't work out what to do with the 'top' attribute to ensure that each DIV is just 5px below the previous one. So, in 'relative' positioning I can't get my head round how to make the relation to the previous DIV if it isn't nested!?!?!
In short, i've got my knickers in a twist and I'm normally OK and working these things out.
Can someone shedsome light onto the CSS trickery that I've overlooked. I am of course a humble amateur.
Regards
Richdo you mean on your homepage ?
<!-- m --><a class="postlink" href="http://roundthebend.greater-peterborough.com/sorry">http://roundthebend.greater-peterborough.com/sorry</a><!-- m -->, i did mean to post a link......
<!-- m --><a class="postlink" href="http://www.round-the-bend.co.uk">http://www.round-the-bend.co.uk</a><!-- m -->
the yellow blob in the middle is where all this action needs to take place, and that is defined by CSS as follows:
<DIV ID='content'>
#content {
position: absolute;
top: 10px;
left: 50%;
height: 430px;
width: 480px;
margin: auto auto auto -240px;
color: #225aa5;
background-color: #fbde00;
overflow: auto;
}I can fix them all in height, width and top/left position but this looks rubbish when the amount of text either doesn't fill the box or is too much.
what "box" are you talking about?
i dont see anything that is not fitting in any box
pliz dont write your tags in uppercase!Sorry for the delay (I'm in UK).
I've cobbled together an example of the problem here <!-- m --><a class="postlink" href="http://www.round-the-bend.co.uk/lesson_plan2.php">http://www.round-the-bend.co.uk/lesson_plan2.php</a><!-- m -->
Ideally, the white box would shrink to fit the text and then the red box would shift up so that it is just below the white box.
I appreciate any help whether it be straight solutions or a nudge in the right direction.
With regard to my tags being uppercase, I apologise if my HTML is not written according to standards just now. However, I am an amateur and when I started the site I was unaware of such standards. Now, I need to get certain things up and live on the site before I can afford the time required to standardise all of the code. I'm sure you can appreciate that my customers aren't too fussed as long as the pages render correctly in their browsers. So far, no complaints.
Thanks
RichI suppose my question is really this:
How can you position a <div> to always be 10px below the bottom of another <div> and have the same horizontal alignment as that <div> ?
Also, how can the height of a <div> be controlled by content ?
I'd like a link to a tutorial or example page which shows this kind of positioning.I'm part of the way there. I can change the height of a <div> just by ommitting height from the CSS and then letting content do the talking.
I can position the next <div> in the layout just by ommitting the position attributes. However, how can I get a 10px gap between <div>'s ?
Looking at CSS Zen Garden for ideasuse relative positioning:
<div style="position: relative; top: 5px;">1</div>
<div style="position: relative; top: 25px;">2 - 25px from the bottom of 1.</div>
<div style="position: relative; top: 105px;">3 - 105px from bottom of 2.</div>By not using position:absolute on all your elements.
Basic positioning (<!-- m --><a class="postlink" href="http://www.brainjar.com/css/positioning/default.asp">http://www.brainjar.com/css/positioning/default.asp</a><!-- m -->)Thanks all, I'll have a go later First I'm gonna check out Brainjar for some better understanding of positioning.
richardSo far, so good......but can anyone help with the slightly more tricky part.
I've successfully got the lemon yellow part ("Carry out a basic a set of checks which are essential before you drive.") and the green part to sit side-by-side. I've achieved this by using a <div> to contain the two separate <div>'s.
What I need now, is to place another <div> directly below that. So, if the green <div> is tallest then the new <div> will be just below that. However, if the lemon yellow <div> is tallest then the new one will be just below that. The new <div> will stretch across the centre part of the screen like the other brightly coloured <div>'s.
When I tried using...
position: relative; top: 5px
.....the result was an overlap between the new <div> and the two current <div>'s.
Any ideas?