My website http://www.thedanesband.com looks different on some other computers. how can I make it so it looks the same where ever I look at it from. Do i need to change the positioning?
Having a look at your CSS, you've absolutely positioned nearly everything! Although this isn't a bad thing, however your website isn't wrapped in any sort of containing div and everything is just assigned in the body tag.
Run your HTML and CSS code through the W3C Validator, I did and it had quite a few errors, some you can't avoid such as the device-width meta tag for mobile devices, but there are a few you can sort out.
I'd suggest having something like this;
< div class="page-wrap" >
All of your other divs inside of this
< /div >
Then in your CSS you would have something like;
.page-wrap {
width: 960px;
margin: 0 auto;
}
This will help keep your page nicely centered in the browser and neatly formatted.
Yeah, it's obviously trustworthy, but it will throw up the odd error here and there that you can't avoid, especially when trying to accommodate all of the various browser sizes etc.
My website http://www.thedanesband.com looks different on some other computers. how can I make it so it looks the same where ever I look at it from. Do i need to change the positioning?
@Zienali
Having a look at your CSS, you've absolutely positioned nearly everything! Although this isn't a bad thing, however your website isn't wrapped in any sort of containing div and everything is just assigned in the body tag.
Run your HTML and CSS code through the W3C Validator, I did and it had quite a few errors, some you can't avoid such as the device-width meta tag for mobile devices, but there are a few you can sort out.
I'd suggest having something like this;
Then in your CSS you would have something like;
This will help keep your page nicely centered in the browser and neatly formatted.
Good luck!
@watson90
Thanks a lot! Is the w3c validator trustable? or should I be carful with some of the "errors"
Yeah, it's obviously trustworthy, but it will throw up the odd error here and there that you can't avoid, especially when trying to accommodate all of the various browser sizes etc.
You'll probably want to put the rule "postion: relative" in there too. Like so
That way, anything that is absolutely positioned will stay inside your wrapper.
If you are wanting to move away from an absolutely positioned-based layout, take a look at using css floats.
Here are some resources :
"Siz Keys to Understanding CSS Layouts"
CSS Float Theories