Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-16-2011, 11:29 PM   PM User | #1
Sylsky
New to the CF scene

 
Join Date: Jul 2011
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Sylsky is an unknown quantity at this point
Full sized website

Hello!

First of all, i'm sorry for my english, it's not my native language.
I am new on this forum, I hope I didn't miss any presentation thread :S

I'd use the ScrollTo in jQuery, but i've got some problems with the HTML/CSS (even if I thought that I knew those languages pretty well before starting learning jQuery :S).

Well, I'd make the same kind of website than this:
http://digitaldrop.net/

I do know the guy used a div with a very large width (like 30.000 pixels for this website) and an height of... 100% I guess?

I have some problems for the 100% things and I couldn't find any tutorial explaining it. How the webdesigner of this website placed his content exactly in the middle of every pages, on every screens? When i'm coding, I generally use a wrapper of 1024 width, as most of people are running with 17"+ screens.

How do I have to organize my css to obtain a kind of same result? Any of you got a tutorial which could help me?

PS: I'm not asking the way to use the jQuery system (scrollTo), just how to code a website on a big width AND make it fits for every screens.

Thank you in advance,

Sylvain, computer graphics student.
Sylsky is offline   Reply With Quote
Old 07-19-2011, 07:04 PM   PM User | #2
Sylsky
New to the CF scene

 
Join Date: Jul 2011
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Sylsky is an unknown quantity at this point
Up :<
Sylsky is offline   Reply With Quote
Old 07-19-2011, 07:57 PM   PM User | #3
djh101
Regular Coder

 
djh101's Avatar
 
Join Date: May 2009
Location: Santa Clarita
Posts: 603
Thanks: 48
Thanked 63 Times in 63 Posts
djh101 is an unknown quantity at this point
margin: auto; or margin: 0 auto; will generate equal left/right margins that should center your content.
__________________
"Yeah science!"
Online Science Tools
djh101 is offline   Reply With Quote
Old 07-19-2011, 11:21 PM   PM User | #4
Sylsky
New to the CF scene

 
Join Date: Jul 2011
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Sylsky is an unknown quantity at this point
Ya I know this one... but on a 30 000 pixel width, how do I place my elements correctly. To have... One page on 1200px, another on 1200,etc... everything placed correctly.
Sylsky is offline   Reply With Quote
Old 07-19-2011, 11:49 PM   PM User | #5
djh101
Regular Coder

 
djh101's Avatar
 
Join Date: May 2009
Location: Santa Clarita
Posts: 603
Thanks: 48
Thanked 63 Times in 63 Posts
djh101 is an unknown quantity at this point
Code:
* {
margin: 0; padding: 0;
}
html {
width: 200%; /* 100 * number of pages %) */
height: 100%;
}
body {
width: 100%;
height: 100%;
}
div.page {
width: 50%; /* 100 / number of pages % */
height: 100%;
float: left;
}
The only problem with this is that you cannot get a precise decimal from some numbers (e.g. if you have 3 pages, each one would need be 33.3333....% wide). One way this could be fixed would be by having your pages scroll vertically as opposed to horizontally, thus they could all have a comfortable width/height of 100%.

The site you mentioned is actually not optimized very well for different page sizes. What it does is oversize the pages and center the content (for a certain page width) so that you can resize your browser and you will still be able to at least see the content. However, the layout breaks in an 800x600 layout or larger than 1280x1024.
__________________
"Yeah science!"
Online Science Tools
djh101 is offline   Reply With Quote
Old 07-20-2011, 02:22 PM   PM User | #6
Sylsky
New to the CF scene

 
Join Date: Jul 2011
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Sylsky is an unknown quantity at this point
Alright, it's working! Thank you very much

Last edited by Sylsky; 07-20-2011 at 03:12 PM..
Sylsky is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 07:37 PM.


Advertisement
Log in to turn off these ads.