SitePoint Sponsor |
|
User Tag List
Results 1 to 15 of 15
Thread: Help needed with positioning :/
-
Dec 3, 2003, 14:54 #1
- Join Date
- Jul 2002
- Location
- Newcastle, UK
- Posts
- 318
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Help needed with positioning :/
OK, am i right in thinking position: absolute; will position an object relative to its parent object?
The reason I ask is that i am re-designing my website, here it is so far: http://www.infinite-fire.net/v3/index.php -- as you can see im having some issues, especially in IE - could someone explain how 1) to make the <div> for the middle of the header centered, and the right and left /// images just fit around it?
Also 2) make the right and left columns 130px wide, and the middle expand to 90% of the remainder (regardless of resolution).
Thanks, i could really use help here :s
-
Dec 3, 2003, 15:30 #2
- Join Date
- Oct 2003
- Location
- Winona, MN USA
- Posts
- 10,053
- Mentioned
- 142 Post(s)
- Tagged
- 2 Thread(s)
Originally Posted by Huscy
Position relative will position an object relative to its parent object.
If I am understanding correctly, you want your content to occupy 90% of the entire page body. To do this, simple use
body{margin: x 5%}
With x being the distance you want between the top of the page and the beginning of your content (or in this case, your first division)
Then with declaring the width of left and right columns, the center should expand to fill the remainder.Linda Jenkinson
"Say what you mean. Mean what you say. But don't say it mean." ~Unknown
-
Dec 3, 2003, 16:12 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Position absolute positions the elements relative to the upper left corner of the page body.
Position relative will position an object relative to its parent object.
Position absolute positions an element in relation to its parents top left co-ordinates. It's parent is defined as the nearest ancestor that has a value set for the property position other than static (the default). If there is no ancestor then the parent is the root element which is effectively the html element( which is the body outside of all margins).
What this means is that to place an object absolutely in relation to its parent the parent needs to be position:relative (or position:absolute) (In the case of position:fixed the containing block is the viewport.)
Ther usual way to position in respect to a parent container is to give the parent container a position:relative but not to supply any co-ordinates. In this way the parent stays in the flow and the child positioned absolutely positioned within it and will move with its parent if required.
Position relative is only relative to itself. The element is moved in respect of the position it already occupies and then placed according to the co-ordinates given.
Basically position:relative;left:10px;top:10px will move an element 10px from the left and 10px from the top of where it would have been had it not been positioned .
Also the space that the element previously occupied is preserved. What that means is that everything else on the page will think that the element has not been moved at all. If you move an element a great distance with position:relative you will leave a whole that the element previously occupied. The element will be removed from the flow but the space it occupied will not.
Hope that clears it up a bit
Paul
-
Dec 3, 2003, 16:30 #4
- Join Date
- Jul 2002
- Location
- Newcastle, UK
- Posts
- 318
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
THANK YOU for clearing that up, if you look now - http://www.infinite-fire.net/v3/index.php - you can see that I have fixed most of the problems, but cant seem to figure out how to get the middle column to be 90% of the leftover space ...
-
Dec 3, 2003, 17:24 #5
Originally Posted by Huscy
height: auto;
Thats if you meant you wanted it to be 90% vertical.
-
Dec 3, 2003, 22:37 #6
- Join Date
- Oct 2003
- Location
- Winona, MN USA
- Posts
- 10,053
- Mentioned
- 142 Post(s)
- Tagged
- 2 Thread(s)
Originally Posted by Paul O'B
http://www.wdvl.com/Authoring/DHTML/...ndy_chart.html
It would appear that along with many other things html and css, there are different schools of thought on positioning.Linda Jenkinson
"Say what you mean. Mean what you say. But don't say it mean." ~Unknown
-
Dec 4, 2003, 02:34 #7
- Join Date
- Jul 2002
- Location
- Newcastle, UK
- Posts
- 318
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
HHHMmmm ive got it working in firebird, but IE is making the central column far too wide, http://www.infinite-fire.net/v3/index.php - heres my code:
#midcol {
min-width: 450px;
/*margin-left: 130px;
margin-right: 130px;*/
background-color: #E1DACA;
border: 2px solid #444;
padding-top: 2px;
padding-bottom: 5px;
position: absolute;
top: 80px;
right: 150px;
left: 130px;
}
can anybody help me (please!!) .
-
Dec 4, 2003, 05:46 #8
- Join Date
- Apr 2003
- Location
- Bath, UK
- Posts
- 353
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Shyflower
Additionally if you care to experiment you will find Paul is correct.
The may be "there are different schools of thought" on how positioning should work but there is only one way that it is specified and most of the common browsers do a reasonable job of achieving it.
-
Dec 4, 2003, 06:53 #9
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by Benanfa
-
Dec 4, 2003, 13:05 #10
- Join Date
- Jul 2002
- Location
- Newcastle, UK
- Posts
- 318
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
can anyone help me ?
-
Dec 4, 2003, 15:16 #11
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
I think the best you can do for ie without changing the whole design is to give IE a width. Ie doesn't like its width defined by margins only.
So you could add this which only IE will get.
Code:* html #midcol {width:65%;}
To achieve your layout would need a complete redesign I think.
Paul
-
Dec 5, 2003, 02:41 #12
- Join Date
- Jul 2002
- Location
- Newcastle, UK
- Posts
- 318
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well how *could* i acheive my layout, the current code only took an hour or so to write, im not bothered if it needs re-coding
-
Dec 5, 2003, 08:55 #13
- Join Date
- Apr 2002
- Location
- Arkansas
- Posts
- 809
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Huscy when I do a 3 column layout like you are doing here what I would do is keep your header <div> and your <div> called maincont. Inside maincont I would put 1 simple table with 1 row, 3 columns then set up classes to define the table cells, leftcol, midcol, rightcol then if you want the "content box" like you currently have create something like midcol_content so you end up with a <div> inside your middle column in the table.
Sure it's not a total tableless design but let's face facts CSS2 is not perfect and this is a nice workaround until CSS3 comes out and addresses the 3 column layout issue.
-
Dec 5, 2003, 15:44 #14
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Well how *could* i acheive my layout, the current code only took an hour or so to write, im not if it needs re-coding
It also depends on what else you are going to do on the page afterwards and which column you are going to change. Unlike tables CSS needs to be more specific and there isn't one layout to catch all possibilities (unfortunately).
Just to copy your layout in a different way can be achieved as follows but as mentioned above maybe entirely unsuitable.
anyway here it is:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Web Design Centre - Infinite-Fire</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> /* Type CSS rules here and they will be applied to pages from 'editcss' immediately as long as you keep this window open. */ /**** LINK-tag style sheet styles.css ****/ /* Infinite-Fire.net CSS source */ body { background-color: #444; font-family: Arial, Helvetica, sans-serif; font-size: 0.9em; padding: 5px; } pre { font-family: Arial, Helvetica, sans-serif; font-size: 0.9em; margin-bottom: 2px; margin-top: 0px; } p { margin-left: 15px; margin-right: 15px; font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; } a:link { border: 2px solid #DFD9C9; color: #444; font-weight: bold; text-decoration: none; z-index: 4; } a:visited { border: 2px solid #DFD9C9; color: #444; font-weight: bold; text-decoration: none; margin: 5px; z-index: 4; } a:hover { border-right: 2px solid #DFD9C9; border-left: 2px solid #DFD9C9; border-bottom: 2px solid #444; border-top: 2px solid #444; color: #8A5507; font-weight: bold; text-decoration: none; z-index: 4; } #maincont { background-color: #C5C0B6; border: 2px solid #FFF; padding: 3px; position: relative; min-height:700px;/*min-height for mozilla */ min-width:700px;/*min-width for mozilla */ } * html #maincont {height:700px}/*min height for ie6 */ #lefthead { background-image: url(images/header_leftbg.gif); width: 40%; height: 62px; } #righthead { background-image: url(images/header_rightbg.gif); width: 40%; height: 62px; position: absolute; right: 5px; margin-top: -62px; } #midhead { background-image: url(images/header_centre.gif); background-repeat: none; width: 189px; height: 62px; margin-left: auto; margin-right: auto; margin-top: -62px; } .dashed_hr { background-image: url(images/dashed_hr.gif); background-repeat: repeat-x; width: 100%; height: 1px; margin-top: 5px; margin-bottom: 5px; } #leftcol { position:absolute; left:0; } #midcol { margin-left: 130px; margin-right:145px; background-color: #E1DACA; border: 2px solid #444; padding-top: 2px; padding-bottom: 5px; } #rightcol { position: absolute; right: 15px; top: 80px; text-align: right; } #nav { border-bottom: 2px solid #444; text-align: center; width: 100%; padding: 0px; } #container {height:100%} </style> </head> <body> <div id="maincont"> <div id="lefthead"></div> <div id="midhead"></div> <div id="righthead"></div> <div class="dashed_hr"></div> <div id="leftcol"> <img src="images/googleaddemo.gif" alt="" /> </div> <div id="midcol"> <div id="nav"> <pre><a href="#">Home</a> - <a href="#">Forum</a> - <a href="#">Photoshop</a> - <a href="#">HTML</a> - <a href="#">CSS</a> - <a href="#">Webmaster</a></pre> </div> <p> Welcome To Infinite-Fire.net - Web Design Centre Welcome to infinite-fire.net V3, THE place for web designers, programmers from novice to expert.</p> <p>We offer a plethoria of free web site design and programming tutorials - from HTML to JavaScript to PHP and CSS, tips and tricks.</p> <p>If you're looking for HTML tutorials, PHP Scripts or simply a web design community, look no further - Infinite-Fire offers all this and more!</p> </div> <div id="rightcol"><img src="images/addemo.gif" alt="" /></div> </div> </body> </html>
Paul
-
Jan 30, 2004, 10:33 #15
- Join Date
- Sep 2003
- Location
- Berks, UK
- Posts
- 33
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for the pointer Paul O'B
Many thanks Paul,
I had been having a 'mare with absolute positioning of a block inside another block. As you'd suspect, the inner blocks, with an absolute position, were anchoring relative to the top-left of the page, instead of the top-left of the container block I'd put them in. In the end I got the effect I was after by using negative margins. The disadvantage there was that it extended the height of the parent container by 50% with blank space - causing scrolling.
Adding position:relative to the parent block made it all work!
Many thanks again.
NigelWebsite: www.clarihon.co.uk
********************************
Getting you on the web - cost effectively
********************************
Bookmarks