Fitting Screen sizes.

I think I have done it, with changing it to a ul.

But know that Cellspacing will not work. how can I space out the li?

In the CSS, something like;

ul li {padding-right:15px;}

... would add 15pixels 'blank' space to the end of each li.

I have another issue, Would seem them some parts move around when seen on other screen sizes.

You would need to look into responsive design to get past this, which basically is all about making sites look and work well on any device, at any screen size, which might be a little too advanced at the minute. You may be able to get around the problem for the time being by specifying a minimum width for the body and some elements. Remember, if you set a value of something to be a percentage of the screen size, it will always be that percentage of the current screen size. Specifying a min-width will tell the browser not to reduce that element to less than that specified size when it is shrunk down.
 
In the CSS, something like;



... would add 15pixels 'blank' space to the end of each li.



You would need to look into responsive design to get past this, which basically is all about making sites look and work well on any device, at any screen size, which might be a little too advanced at the minute. You may be able to get around the problem for the time being by specifying a minimum width for the body and some elements. Remember, if you set a value of something to be a percentage of the screen size, it will always be that percentage of the current screen size. Specifying a min-width will tell the browser not to reduce that element to less than that specified size when it is shrunk down.

Thanks that did work indeed. I will have to look into that Responsive Design. I have not heard of it.

Can't seem to access your demo page this morning border. Any ideas?

Strange, seems to be working. Just tried it on other systems on other nets. I will re up the link.

Flave

I have not yet updated it with the ul li padding. But will do soon.
 
In the CSS, something like;



... would add 15pixels 'blank' space to the end of each li.



You would need to look into responsive design to get past this, which basically is all about making sites look and work well on any device, at any screen size, which might be a little too advanced at the minute. You may be able to get around the problem for the time being by specifying a minimum width for the body and some elements. Remember, if you set a value of something to be a percentage of the screen size, it will always be that percentage of the current screen size. Specifying a min-width will tell the browser not to reduce that element to less than that specified size when it is shrunk down.

Thanks for ul padding. worked great. I have not heard of Responsive Design, had a little look after reading your post. does seem outta my reach for now. So how would using min width work? So something like setting body too 100% min width? Unsure how it would work. Would I not have to set it all to very small to fit on all different screen types?


Strange the Site should be working. I will post another link.

www.dannywebs.zll.org
 
Thanks for ul padding. worked great. I have not heard of Responsive Design, had a little look after reading your post. does seem outta my reach for now. So how would using min width work? So something like setting body too 100% min width? Unsure how it would work. Would I not have to set it all to very small to fit on all different screen types?

This is where responsive design would come in. You can specify a different set of CSS values based on the browser window size. Basically you can make elements to look different when viewed on a mobile device (or at a particular browser windows size). I'd concentrate on getting yours looking ok on a large window until you're comfortable with working with CSS and HTML.

The min value basically works like this. Let's say you have a div that holds your main content. Giving it something like these values;

#content {width:100%;min-width:960px;}

... would make it stretch to the edge of your browser window (or whatever div it was inside), but reducing the browser window would only shrink the div to a minimum of 960 pixels.
 
OK I will give that ago. Thanks so much the help by the way Paul you and Corrosive have been amazing
 
You should put everything you currently have (logo, navigation, content) inside another div to keep it all in check. Elements move about when you resize the window because they're all 'loose' inside it (if that makes sense).

Something like...

<body>
<div id="wrapper">
[EVERYTHING YOU CURRENTLY HAVE]
</div> <!-- wrapper -->
</body>

Specifying a width/min-width for this wrapper div should help keep everything neat.
 
OK, So I gave this ago.



HTML:
<html>
<head>
<link type="text/css" rel="stylesheet" href="WaterCSS.css"/>
<title>Flave</title>



</head>
<body>
<div id="content">
<div id="logo">
<img src="http://www.graphicdesignforums.co.uk/images/logo.png"/>
</div>
<ul cellspacing="60">
<li>Collection</li>
<li>Shop</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="header"></div>
<img id="text" src="http://www.graphicdesignforums.co.uk/images/text.png"/>
</div>
</body>
</html>

I set it to this in CSS

HTML:
#content {
width:100%;
min-width:960px;
}

All the content at the top of the page sits right. But the text (that was made in Photoshop and then was exported as an img) moves about. It is positioned in the middle of the page. But when seen on another screen size moves around the page. but not the nav bar. Hope that makes sense.


OK I just did something very 'nooby!' I forgot to save the html. So the new div wrapper was not saved! So now. All the content is just sqised on the top of the page. But they are in the same position on another screen save. So could be win in some ways!!

Does that make sense? hehe
 
Last edited:
OK so I forgot to add a height:100%; in the new Div wrapper. But, still the text that is meant to be in the middle of the page moves around when on another screen. is there something I am missing?
 
Do you have an updated version online I can take a loo at? On the current version the image has a 'left' value of 40%, which is 40% of the current browser windows size.

Also you have a 'header' div below the navigation that is empty.
 
Ignore the above post it fixed itself, must be the free web host!

But the site is up now, should be working
 
I think another way to put this (I think is part of the issue) When I mess with the internet window with a page up the content on the page does not move. But with one of my pages all the content tries to move into room.
 
The best thing you can do for your content (as Paul said earlier in the thread) is to pick a maximum width (say 1000px?) and then create a 'wrapper' div that contains your content. Make your wrapper left and right margins to 'auto' and your page will remain centred on the screen. You can still set your wrapper width to 100% (so max-width: 1000px; width: 100%;) then start to build your content inside that wrapper and use the box model and floats to position elements in relation to each other. This is how websites are put together. Paul also mentioned Responsive Design which may be a little advanced for you at the moment but is worth researching and keeping in mind as you go.

You may even be better starting with a fixed-width layout as you learn the box model because they are a lot easier. One thing to say (and I'm sure you know this) is that, although web design isn't rocket science you aren't gonna learn it in a week. You'll need a lot of patience. That said, when it 'clicks' it really clicks and it's like coming out of a thick fog it just takes a little while to get there.
 
Back
Top