16 replies [Last post]
egr103
Offline
Regular
England
Last seen: 13 years 28 weeks ago
England
Timezone: GMT+1
Joined: 2006-11-14
Posts: 37
Points: 0

Hello,

I am a bit stuck on how to set up a web page that has 1 main column (that acts as the container for the content within it).

This 1 column needs to be 100% of the browsers width, no matter what size the screen res.

Forgive me if this is a basic answer but i am just having problems (i.e. when i just create a div tag and set it to 100%, it doesn't do it).

I have read that liquid layouts are best but i could really do with some guidance.

I look forward to your reply guys

Evan

P.S. This is'nt urgent or necessary really but i thought i would ask this seeing as i am posting on here. I want an image to display the full width of this 1 column (above). Should i have 1 really large image (that fits perfectly on a 1024x768 res) that gets cut off if people view it on a 800x600 res? Any suggestions?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Let's start with the code

Let's start with the code you have done already and we will help you get it to look like what you want.
Gotta remember, we are here to help, not do it for you.
You have to help us help you Smile

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Forgive me for being dense,

Forgive me for being dense, but the body defaults to 100% width, and thus a div inside that without a width specified will 100% width.

egr103
Offline
Regular
England
Last seen: 13 years 28 weeks ago
England
Timezone: GMT+1
Joined: 2006-11-14
Posts: 37
Points: 0

Hello, If you visit this

Hello,

If you visit this link:

Test Page- http://www.wyedean.gloucs.sch.uk/evan/test.html

the css page can be found here- http://www.wyedean.gloucs.sch.uk/evan/testStyles.css

You will see the gaps at the sides of the image, i do not want these gaps their.

I appreciate all of the responses.

P.S. Don't worry about the image question as i think i have solved it. Try resizing the window and watch the image. If it displays correctly for you guys then i'm sure its good.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi I'm just up the road

Hi

I'm just up the road from you!

Why on earth do you want the image to do that? That is, squidge up as you narrow the site?

I fear it might be a good idea to get yor ideas for the site up front so that, before yuo do too much work, you set off in the right direction and not waste your time down a dead end.

CT

egr103
Offline
Regular
England
Last seen: 13 years 28 weeks ago
England
Timezone: GMT+1
Joined: 2006-11-14
Posts: 37
Points: 0

at the moment i am just

at the moment i am just treading water.

I want a nice graphically pleasing image for the div tag that looks good regardless of what resolution it is viewed on. Would it be better to NOT resize the image BUT INSTEAD set the image to have a fixed width of say 1600px. When a visitor views the site in 800x600 the high res graphic gets cut off (trimmed down) but still maintains its look while losing the complete image?

Can you suggest a better method of maintaing the look of a high res graphic that is different to the one i am currently using?

Any ideas on the 100% div problem i'm having?
Thanks
Evan

egr103
Offline
Regular
England
Last seen: 13 years 28 weeks ago
England
Timezone: GMT+1
Joined: 2006-11-14
Posts: 37
Points: 0

at the moment i am just

Whoops, duplicate post!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Evan I see. You want a

Hi Evan

I see. You want a site with 100% width (you probably forgot to set the html and body to 0 margin and padding, like this:

html, body { padding:0; margin:0; }

Putting a picture in the page like that isn't a good idea.

You have two files. HTML and CSS. The html file contains content, using semantically correct html elements. Images CAN be content, but only IF they add meaning to the site. Yours is not content. It is their to make it look pretty.

The css file contains all the style and pretty stuff.

The downside to 100% width sites is that it is sensible to set a minimum width, and IE6 says no way. You can try to do it with MS proprietary expressions, but I can never get them to work.

Or you can settle or a fixed width site in the middle of the window (I use 970px now).

Really though, ignore the style and design for now. Get your content (even if it is dummy text and stock photo's, and get a plain text page properly marked up. Then add the style.

egr103
Offline
Regular
England
Last seen: 13 years 28 weeks ago
England
Timezone: GMT+1
Joined: 2006-11-14
Posts: 37
Points: 0

i see what you mean with the

Ah thats what i am missing...now will that bit of html and body code make (unless specified) content stick to the very top of the page as well as the sides?

i see what you mean with the image thing.

Just out of curiosity how do i insert an image using CSS that isn't using the background-image method for div tags?

plus you sounded as if having a 'pretty' page is a bad thing?

I will create a dummy page full of how i want to layout things and i shall validate it and then upload it in this post ok for your approval.

Cheers
Evan

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

egr103 wrote:i see what you

egr103 wrote:
i see what you mean with the image thing.

Just out of curiosity how do i insert an image using CSS that isn't using the background-image method for div tags?

plus you sounded as if having a 'pretty' page is a bad thing?

Background is the way to go, yes. But, in the background, an image won't scale.

I wrote a quick article yesterday on another forum about 'professional' looking sites.

My last requirement was the wow factor. If it looks good, do it. If it doesn't, don't.

Your idea of a background image to the main content will work for a fixed width site, or fixed width content area, but not for a flexible width content area unless the image is particularly well suited to being cropped.

egr103
Offline
Regular
England
Last seen: 13 years 28 weeks ago
England
Timezone: GMT+1
Joined: 2006-11-14
Posts: 37
Points: 0

ok, I have just created a

ok, I have just created a very basic mock-up of how i want my site to basically look like.

Check the above URL's again and you will notice the example stuff.

Now when i got and resize the browser window, nasty things happen. I would like the content to move (while staying centered) with the resize as much as possible...at the moment the 'content' and 'navBar' divs move under the 'logo' div. Could you tell me why it does this?

Plus in firefox, the divs don't appear correctly in maximize mode let alone anything else.

Could you check that the divs add up ok in the css document? I am really unsure about this sort of thing, when i've done the basic layout of sites i am fine. Its just getting the layout to display correctly the way i want it to that i have problems.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

OK, the design is easy to do

OK, the design is easy to do right, but I am getting tired and tomorrow beckons.

It appears you have either a bar across the whole top or a top margin that is blue.

Then the background image behind the whole thing.

The logo is at the top of a left column, the nav above the main content, the content under that. Is that right?

Please don't use flash for navigation. It is inaccessible to visually impaired users using text readers and therefore falls foul of the Discrimination Disability Act.

Did I get this right?

Is the nav a straight horizontal bar or is it one of those awful multi level drop down jobs?

egr103
Offline
Regular
England
Last seen: 13 years 28 weeks ago
England
Timezone: GMT+1
Joined: 2006-11-14
Posts: 37
Points: 0

ClevaTreva wrote:It appears

ClevaTreva wrote:

It appears you have either a bar across the whole top or a top margin that is blue.

Then the background image behind the whole thing.

The logo is at the top of a left column, the nav above the main content, the content under that. Is that right?

?

All is right but the blue bar at the top is only on display due to the top margin setting within the '#col1' div tag. This enables the background color for the body to be on show.

Quote:
Please don't use flash for navigation. It is inaccessible to visually impaired users using text readers and therefore falls foul of the Discrimination Disability Act.

Quote:
Is the nav a straight horizontal bar or is it one of those awful multi level drop down jobs

Oh no! i hate those drop down nav bars! I find them really hard to use and really unfreiendly to visitors! It is horizontal however.

As for the flash thing, i will have a text navbar within the footer, therefore catering for visually impaired users.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

OK, I can see what you want.

OK, I can see what you want. I'll post some code for you to look at in a bit.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ok This is my first look at

Ok

This is my first look at it. I have tried to be true to your concept whilst making it work better.

html:

Your Page Title Here
@import url(teststyles.css);

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum urna eu sem. Nam enim libero, vestibulum in, lobortis vel, pharetra eu, pede. Sed sem felis, varius in, lobortis in, pharetra sit amet, urna. Aliquam nisl. Nam viverra volutpat tortor. Donec et tortor. Nullam sapien sapien, tincidunt nec, tincidunt et, malesuada ut, neque. Donec mi. Curabitur sed ante. Integer ut sapien. Integer justo nunc, bibendum vel, ultricies at, viverra id, dui. Nullam nec quam vel lorem pretium auctor. Morbi sed dui. Maecenas a quam. Suspendisse molestie tellus quis ipsum. Aliquam erat volutpat. Suspendisse sit amet ligula. Ut velit leo, vulputate eu, imperdiet vel, laoreet at, sapien. Sed neque. Pellentesque sit amet augue.

css:

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0px; padding:0px; border:0px; border-collapse:separate; border-spacing:0px; } body{ font-family: verdana, arial, helvetica, sans-serif; font-size:100.1%; /*** Don't change this setting. Make all other font-sizes in % (preferred) or ems ***/ color:#000000; background: url(bg_vertical.jpg) center top no-repeat; min-width:970px; /*** Content Width ***/ text-align:center; padding-top:150px; } input,select{ margin:0px; padding:0px; } strong,b{ font-weight:bold; } p{ line-height:1.1em; } #fullheightcontainer, #footer { font-size:76%; } #fullheightcontainer{ margin-left:auto; margin-right:auto; text-align:left; position:relative; width:970px; /*** Content Width ***/ display:table; margin-bottom:-60px; /*** NEGATIVE TOTAL Height of Footer Rows ***/ background: url(logoeg.gif) 125px 0 no-repeat; } #wrapper{ position:relative; margin-left:390px; /*** Left Column Width ***/ width:400px; /*** Center Column Width (takes into account left and right shady border widths) ***/ min-height:480px; } * html #wrapper{height:480px;} #navbar{ background: #FF9900; height: 20px; } #content{ background: #FFF; padding:10px 0; margin-top:10px; } #content p { margin:0 10px; line-height:1.3em; } #footer{ z-index:1; position:relative; width:100%; height:0px; } #footer-inner{ width:970px; /*** Content Width ***/ margin-left:auto; margin-right:auto; height:0px; } #subfooter1{ text-align:right; height:60px; overflow:hidden; position:relative; margin-left: 570px; }

Notice that I have used lowercase for all names. I have found unix servers prefer this

CT

egr103
Offline
Regular
England
Last seen: 13 years 28 weeks ago
England
Timezone: GMT+1
Joined: 2006-11-14
Posts: 37
Points: 0

wow, i wasn't expecting that

wow, i wasn't expecting that much effort to be put in.

Wonderful stuff, i haven't tried it yet but i will do soon and i will let you know.

Is it possible to explanation what some of this code does? This is merely so i can understand what i'm working with and then in the future move on from such designs and create better ones.

Much appreciated

Evan

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

It only took 15 minutes!

It only took 15 minutes! Just used one I had done before and changed it.

As to explanations, just focus on on bit and ask away.