Ok, ive been getting some slating from a friends friend about the way i use
Position: absolute; for all my positioning.
Now as a few of you will know ive posted quite alot on this forums about various things and ive been given lots of help, ive been working alot on my css file for positioning of the elements on my iste so that its all working properly on all screen sizes.
Ive since found a method that im very happy with and is all working on all screen sizes i.e 15-50 inch.
The point of this post is that a friend of mine has a friend who is a web developer and has been for a few years, He's been slating the way i use absolute positiing for all of my positioning, BUT wont tell me why! he just laughs and says 'i wouldn't do it that way' but he wont explain what he means, surely if everything works whats the problem?
I know this is a strange post but its bugging me.
What are your opinions and why?
Thanks.
no/good/at/this
09-17-2008, 03:20 PM
And sorry he does say that i should use relative and not absolute, but again wont tell me why.(hence the title of this post)
Declan1991
09-17-2008, 06:45 PM
To be honest, I'd use neither. I don't see any reason to use either for the general design of the page. Personally I find it makes me lazy and I don't think about the page as logically. When that happens, it doesn't degrade nicely. Note as well, you say 15" plus, what about 15" and less?
felgall
09-18-2008, 12:48 AM
It is much easier to position elements that don't need to overlap and which are in the order you want them to display in by using float and clear.
It is easier to get absolute positioned elements to work better when you enclose them in relative positioned elements that they belong to so that when the relative positioned elements are rearranged that the absolute positioned ones are rearranged automatically with them.
The only time absolute positioning by itself works is where you are going to move the element with javaScript.
no/good/at/this
09-18-2008, 12:47 PM
Ok i see your logic, as for the 'less than 15 inch' the main background color is full width, where as the page contents are between 5 and 6 inches in width depending on the page you are viewing, ive not had any trouble yet.
Although you do make a good point especially with the growing popularity of people viewing the web on smaller devices such as mobile phones, so thats something to think about, not exactly straight forward this web development lark is it!
no/good/at/this
09-18-2008, 02:41 PM
div.miblock { /*position: absolute;*/float: left; margin-left: 408px; margin-top: 180px; /*top: 180px; left: 408px;*/ outline-style: ridge; width: 373px; height: 300px; outline-width: thin; outline-color: #999; }
As you can see ive commented out the positions and added a float: right;.
What i dont get with the float option is how to position a div element or anything for that matter, in the center of the page when the property 'center' doen't exist. So surely absolute positioning is the best option for it?
Shorts
09-18-2008, 03:32 PM
Add to your 'div.miblock' the following:
margin-left:auto;
margin-right:auto;
It'll then set the margins accordingly depending on the parent element.
so
<div style="text-align:center; width:100%;">
<div style="margin-left:auto; margin-right:auto; text-align:left; width:500px;">This is a 500px box centered in the middle of the page.</div>
</div>
Thats the best method for centering :]
http://www.finalsandwich.com/
no/good/at/this
09-19-2008, 10:43 AM
I appreciate you taking the time to help but this didn't work for what i need it completely threw the page out, im gonna have to start over.
Thanks though il suss it.
felgall
09-19-2008, 03:57 PM
You can't centre things using absolute positioning because it will no longer be centred when the window is a different size from what you expected. You have to use margins to control centring.
no/good/at/this
09-26-2008, 04:30 AM
The thing i dont fullt get with margins, is that when you set a margin to an element, lets say for arguments sake i did this:
div.mainnav{margin-left: 2%; margin-right: 2%; width: 500px; height: 300px; background: #fff;}
Nothing unusual there, but when i try to assign margins to another element wrapped in a div the margin values for the new elements are then overriding the others so my whole page is moving when all i want is that one element to move.
Example, i used the method that 'shorts' gave me above and it worked for the centering, but when i came to putting more elements into the page using margins it just ended up a complete mess.
So again what is the point of position absolute if nobody uses it for positioning? surely its good for something?
Shorts
09-26-2008, 11:12 AM
Hmmm, if its messing up other portions of your site i'd need to see what you are trying to accomplish to help you out, as floats and other types of margins might need to be in place.
Yes, position:absolute does serve a purpose, personally I use it for JavaScript related popups\drag-n-drops. Or for something extremely simple like: http://www.phynet.com/
To do a whole layout though tends to work best when you know the window is going to be a set height\width, if the page size is going to change then the design can go with it.
P.S. a great tutorial for floats can be found at: http://css.maxdesign.com.au/floatutorial/index.htm
no/good/at/this
09-26-2008, 11:49 AM
Hey buddy cheers for that, i like what you've done with that preview phynet thats cool.
What il do is follow some advice from the tutorial and if im still too thick to sort it il post my code for ya, ive got to try to sort it myself for a better learning curve.
Shorts
09-26-2008, 02:43 PM
Hey mate, glad to help. Also don't worry about getting it all just yet. Keep experimenting, thats how I've learned everything. (Experimenting and looking at people's codes\tutorials).
Good luck, and I'll be here for any pointers and such nots.
no/good/at/this
09-26-2008, 06:20 PM
Hi again shorts, well this is what ve come up with and its getting me results only im not sure if its the correct way of doing it, also its confusing me a little as to why i have to use a minus value, view the css below:
div#sitename {margin-left: 135px; margin-top: -273px; width: auto;}
div.fullnav {margin: 2% 2% 1% 5%; float: left;}
As you can see i have had to put -273px from top to get the position right, it is infact only a distance of 50px from the top so needless to say im a little confused!
Also life would be so much easier if we could still use <div class="blah" align="center">content</div>, but thats just too easy.
felgall
09-26-2008, 10:35 PM
.blah {margin:0 auto;}
and
<div class="blah">content</div>
is much easier since all the elements with that class will be centered automatically with less HTML.
no/good/at/this
09-27-2008, 03:49 AM
Hi felgall, true thats much easier, as far as this minus property goes, have i stumbled on to some kind of css hack or is it normal practice to use this approach? afterall it works and very importantly it validates.
Ok as you can see this is taken from my css, ive got 2 navigation blocks, one is 'block' the other inline-block.
The firstnav is 'block' the secondnav is 'inline-block', the properties are not set in the divs, but on the anchor links them selfs ive only wrapped them in divs for positioning, im trying to align the first anchor link on 'secondnav'(inline-block) directly to the right of the top link in 'firstnav'(block) so it will look like this:
Home|Rig making|Bait Guide|Bait making|Tackle Guide
Gallery
Fsc Shop
Register
Invite Friends
Contact Me
Advertise on fsc
Media Uploader
Tutorials
Obviously it looks better on my page as they are all buttons of the same size, or atleast it would look better if i could get the 'inline-block' to position correctly, ive set a minus property for the margin in 'seconnav' but everytime i get close it pushes the last anchor link to the next line down.
Any idea's?
If you need more code just ask
Thanks
no/good/at/this
09-28-2008, 02:13 PM
scratch that guys ive done it.
i would like to know why i have to use a minus property to get position though?
Declan1991
09-28-2008, 03:16 PM
Why haven't you all that in a ul?
no/good/at/this
09-28-2008, 06:22 PM
What good will that do, yes it will give me a nice looking list but its no good when it comes to moving the elements again.
no/good/at/this
09-28-2008, 06:25 PM
Sorry that comes across really snotty, i know exactly what your saying but the secondnav will eventually move around, hard to explain but it needs to be a seperate element.
/* second nav */
a.rigmaking {display: inline-block; width: 140px; height: 22px; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; text-align: left; text-decoration: none; background: url('fscimages/gradient8.jpg'); outline-style: groove;}
a.baitguide {display: inline-block; width: 140px; height: 22px; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; text-align: left; text-decoration: none; background: url('fscimages/gradient8.jpg'); outline-style: groove;}
a.baitmaking {display: inline-block; width: 140px; height: 22px; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; text-align: left; text-decoration: none; background: url('fscimages/gradient8.jpg'); outline-style: groove;}
a.tackle {display: inline-block; width: 140px; height: 22px; font-family: Verdana, helvecia ,"Sans Serif", Arial, Times New Roman, Lucida Sans Unicode; font-size: 13px; color: #fff; text-align: left; text-decoration: none; background: url('fscimages/gradient8.jpg'); outline-style: groove;}
a:hover {background: url('fscimages/gradient6.jpg');}
no/good/at/this
09-29-2008, 11:39 AM
display; inline-block; only works in the latest version of FF as i annoyingly found out earlier, works ok on everything else as far as i know, ignore the comment on /* firstnav */ as you can see its not a list but it was.
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.