
|
View Full Version : Css
Norbertt 03-15-2008, 04:18 AM Hello , I've been wondering , is this a valid way of position elements in css ?I've seen a lot of people use absolute value stuff , but doesn't that mess up the web page when viewed in different resolutions ?
#ScrollBox{
width:541px;
height:127px;
background-image:url(../images/Scrollerbox.PNG);
margin:-217px 0px 0px 178px;
background-repeat:no-repeat;
}
the_pm 03-15-2008, 09:51 AM The most common way to position elements is to float them (sometimes within containing elements) and use margins to push them into place. One CSS rule isn't really enough information to go on - do you have a more complete sample of what you're trying to position?
Norbertt 03-15-2008, 10:45 AM Well , That's basically it . I use divs , and to position them I Just use margin values in pixels , though I'm unfamiliar with the term float ?
Float: http://www.w3schools.com/css/pr_class_float.asp
Norbertt 03-15-2008, 11:06 AM Float: http://www.w3schools.com/css/pr_class_float.asp
0wnd. = *(
clrockwell 03-15-2008, 06:29 PM Hello , I've been wondering , is this a valid way of position elements in css ?I've seen a lot of people use absolute value stuff , but doesn't that mess up the web page when viewed in different resolutions ?
#ScrollBox{
width:541px;
height:127px;
background-image:url(../images/Scrollerbox.PNG);
margin:-217px 0px 0px 178px;
background-repeat:no-repeat;
}
That is a valid way to position, but using absolute position can have the same result. As far as cross browser, if you position something absolutely, say 20 px from the left, it will appear that distance in every browser. I would say absolute positioning is the most reliable positioning, but does not allow for a lot of flexibility.
Norbertt 03-15-2008, 08:03 PM That is a valid way to position, but using absolute position can have the same result. As far as cross browser, if you position something absolutely, say 20 px from the left, it will appear that distance in every browser. I would say absolute positioning is the most reliable positioning, but does not allow for a lot of flexibility.
Jess Is awesome , What are some of the drawbacks though of absolute positioning ? Isn't using margins better for different resolutions ?
Fixago 03-15-2008, 08:58 PM Absolute and relative positioning are rarely used. Floats should be used instead. An example of when you would use absolute positioning would be something like the dropdown navigation menu on this site:
http://www.magentocommerce.com
Though you could do that without absolute positioning too. It's just best to avoid abs/rel positioning if/when possible.
clrockwell 03-16-2008, 02:06 PM Though you could do that without absolute positioning too. It's just best to avoid abs/rel positioning if/when possible.
I have to disagree, I have used combinations of absolute/relative/floats in many layouts I have coded, with great results. I think that using all three has great benefit. If your content is dynamic, then using floats for 'guts' control should be done, but for things like headers and footers, where the content will most likely not change, absolute/relative is a more reliable way to control the look of your site no matter the browser size.
Positioning this way also has its benefits when it comes to the css-less appearance of your site. If, for instance, your logo appears above your navigation in your css site but you want the navigation to be above the logo with css disabled, absolute positioning (or margins) can do this for you.
Just play around with all of the options css puts on the table and you will find what you prefer. Just notate well, validate, and enjoy learning what css can do for you. IMHO.
When used correctly, and it fits with your content, I do not see any drawbacks to absolute positioning. It is not always the best tool for the job, then again, neither are floats, or relative positioning. The designer gets together with the coder, both with content in hand, and decide what will serve the site best.
Jess Is awesomeDo we have a mutual friend? PM if so, otherwise I am missing something :)
Good luck!
Fixago 03-16-2008, 06:42 PM If your content is dynamic, then using floats for 'guts' control should be done, but for things like headers and footers, where the content will most likely not change, absolute/relative is a more reliable way to control the look of your site no matter the browser size.
I don't see how dynamic versus static content has anything to do with determining whether or not to use floats or relative/absolute positioning. It's content, it has no bearing on this.
Positioning this way also has its benefits when it comes to the css-less appearance of your site. If, for instance, your logo appears above your navigation in your css site but you want the navigation to be above the logo with css disabled, absolute positioning (or margins) can do this for you.
Why would anyone worry about what the site looks like when CSS is disabled? What percentage of Internet users are browsing with CSS disabled?
clrockwell 03-16-2008, 07:28 PM Why would anyone worry about what the site looks like when CSS is disabled? What percentage of Internet users are browsing with CSS disabled?
You should not worry about what it looks like, because chances are if there is no css, the user is either on a cell phone or using a screen reader (among other possibilities). Both cases warrant paying attention to the structure of your document though.
Instead of trying to attack the posters that try and address the original questions, maybe you could offer some of your vast expertise to help.
awatson 03-17-2008, 12:36 PM There's as many ways to layout CSS as there are layouts for sites, it's sort of pointless to generalize.
Fixago 03-17-2008, 07:15 PM You should not worry about what it looks like, because chances are if there is no css, the user is either on a cell phone or using a screen reader (among other possibilities). Both cases warrant paying attention to the structure of your document though.
Even on a mobile device, CSS will be used. That's where you would set the media type correctly and have stylesheets for screen, handheld, print, etc.
Instead of trying to attack the posters that try and address the original questions, maybe you could offer some of your vast expertise to help.
I already did, just doing some cleanup.
|