Web design problem. Pls help me

[Guest Darktemplar665]

A friend of mine asked me to make him a web site; since I'm really new at this I said I'll give it try. Now I have a problem I made the site on my pc with 22" screen and when I open it it looks fine. But when I open it on the laptop with 15" screen the whole page is shifted to the left with 1/3 of the screen empty ( just the background color ). So how do I make the page to be in the center of the screen no mater what size it is; and to allways be over the entire screen.

 

Pls if someone knows; as I said I'm totally new at this so if you can explain it with a little more details. TY in advance.

P.S. I'm using NetObjects Fusion

[falkencreative]

Depends on how you have your site coded. You have a link to the site so we can look at the code?

[NuCoder]

Try this:

 

body {

margin: 0;

text-align: center;

}

 

#wrapper {

margin: 0 auto;

text-align: left;

}

 

As Ben stated - try and provide your code with these requests....

[amitte]

hello friends..

 

well i have kind of the same problem so i'll post under this topic.

 

i have a photo gallery with css style. the photos displays when i hover different menu items.

 

the problem is the different positioning of the photo in a laptop screen and a pc screen.

 

now it is set to be correct in a laptop..

 

this is my site - http://www.blacksmith-yt.co.il

 

the photo gallery is in the landing page. just hover the navbar in the right side of the window.

 

thanks in advance.

[Andrea]

Your code is very hard to work with, there is way too much white space between the lines. It won't hurt how the page displays, so.

 

You have several validation errors - the center tag has been deprecated, use CSS to center your h tag. You cannot insert a p tag into li tags. You could use the nail as the list image.

 

As to the images on hover - it'll be easier on you and the eye if they are all the same size - at the very least the same height.

 

I'm playing around with things for a bit - we'll see how far I get.

[Andrea]

I played around a little bit - http://www.aandbwebdesign.com/misc/dark.html - but haven't had enough time to figure out how to get the images to show up in the right spot. I'm using the same image for each hover for the moment, to avoid the issue with the different size images, but it hasn't helped me yet. I'll try to get back to this later, but cannot promise.

[amitte]

thankS

about the syntex-i'll sure get that fixed.. i know about the

but becasue i have my whole code in a mess i try to focus in the most importent issues.

 

and for now its the different positioning in pc screen VS laptop screen. why?????????????????

 

p.s.

i cant get the link u posted... are u sure this is the right one?

Edited January 19, 2010 by amitte

[Andrea]

The link works - but I cannot get the positions right. I don't think it's an issue between laptop and PC, but between different resolutions. Mine now works for 1280 wide, but at anything less, and the position is off again. Using % for left didn't help, either.

 

However - I would think you'd be better off cleaning the code first and working from the top down.

 

Can someone else help with the positioning of these hover pics?

[amitte]

well in all the possible resolutions in my LT the position is O.K. both in top bottom and right left. (exept of one image that is progressing right every time i decrease the resolution..)

 

in the PC in the same settings- (1280 on 720) - the position is off..

 

the text size is the same (medium)

 

the PC and LT have both IE7 but-

 

the virsion of the PC-7.0.5730.13

128 bits of encryption

} i don realy know if it makes any differnce

the LT virsion- 7.0.6001.18000

256 bits of encryption

 

///////////////////////////////////////////////////////////////

 

so- i think its have to be somthing with the width of the screen.. i dont know the actual term but like i watch videos in 16:9 in my LT

 

so its probebly somthing to do with this.... right????

 

 

 

p.s.- the cleaning of the code is right now in the top of my To Do List...

[virtual]

It is not a screen resolution issue, I tested your site in 3 different browsers Safari, Firefox and Opera, on a Mac laptop at 1440 x 900 and the photo gallery image shows in a different position in each. Same thing on a PC at 1440 x 900 in IE 7 and 8, Firefox and Chrome, none of the images showed in the same place either.

 

Clean up your code first as Andrea suggested. Also as she said your images need to be all the same size.

[amitte]

i know about the browser compatibility problem i have... just now i start to understand those things.. and its going to take me some days to clean my code.. then validate and make it compatible for IE.. FF.. CHROME..

 

(BTW- if you are familiar with good resources exept www.quircksmode.com.. i will be more than happy to learn about/from them)

[virtual]

Just looked at your code and your problem stems from your positioning. The div#nav a:hover span have position:absolute but the containing div#nav is floated so the photos are not appearing in relation to the #nav tag but in relation to either the viewport or the site tag. The div#nav has to be position: relative so that the absolutely positioned span tag can place itself in relation to the div#nav.

 

The css should be like this:

div#nav a:hover span {
position: absolute;
visibility: visible;
top: 140px;
right: 470px;
}

 

The top and right place the span image in the same position relative to the #nav. You do not have to give each span tag a different id unless you want the image to appear in a different position. If that is the case you would need to change the top and right on the span tag with id to change the position.

 

I hope I am making myself clear. Here is an article, which will help you understand the whole concept of positioning.

http://www.barelyfitz.com/screencast/html-training/css/positioning/

and this one on absolute positioning within relative positioning

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

[amitte]

ok.. so first of all i've cleaned my code and it is vlidated.

 

1. what is nail? i didnt find it in W3school refernce...

 

2. to validate ny code i had to take out every element within the tag.. so now my photo gallery wont fire off.. u see now when i say-

 

div#nav a:hover span

 

nothing hapens... i thought mybe to put an ID to the tag or to its parent (a

tag) but still nothing..

 

do u know how i can stay with a validate code and still can pull off this CSS photo gallery?

 

 

oops.. of course it wont fire of because the span is not inside the

Edited January 22, 2010 by amitte

[virtual]

1. what is nail? i didnt find it in W3school refernce...

Nail is not a css or html term, it's the metal thing you hammer into 2 planks to hold them together.

2. to validate ny code i had to take out every element within the tag.. so now my photo gallery wont fire off..

You were not validating for other reasons, if you don't put the span within the tags it won't have the hover element, so obviously your gallery won't work.

This is how you should write your li tags

></pre>
<li> 
           ????? 

   ???? ??? ??? ???? ????? ??????? 
      

Note that the class which you had on the

tag is now on the tag, and you were missing alt tags for all your images which will prevent validation.

 

Now to the positioning of your photo gallery. As I said in the previous post

The div#nav has to be position: relative so that the absolutely positioned span tag can place itself in relation to the div#nav.

 

The css should be like this for the containing div

div#nav {
position: relative;
top: 0;
right: 10px;
width: 150px;
background: rgb(237,228,201);
}

and

div#nav a:hover span {
position: absolute;
visibility: visible;
top: 140px;
right: 470px;
}

If you make all your hover images the same size you do not need to give them an id, they will appear in the same place from any of the nav links.

[Andrea]

amittee, when you make your changes, load them up somewhere so we can see what's happening.

[amitte]

hy andrea and virtual.

 

first of all i want to thank u very much for your time and effort. i think that i am on a verge of break through in my understending of css!

 

i changed a lot in my code and css.. i invite u to take a look on the new page - www.blacksmith-yt.co.il

 

i have one problem in FF and Chrome (im not sure about IE8...)-

 

when i set my hover images to be

top: -0.1%

those browsers makes them refer to div#site.. and not the div#nav..

 

why?

 

p.s.- i need the "top" set because without it the image will be set verticaly to each

tag..

 

p.s.2 - i use IE7 in my laptop..

[Andrea]

don't have time right now to look into it further, but in Firefox, your hovers are all over the place.

[amitte]

OK

 

thats it.. every thing is in place.

 

a summery for all the young web developers like me-

 

problem= positioning is of set.. codes not validated.. CSS photo gallery ofset..

 

solution=

 

• Validate your code!
  
• get a good idea about the BoxModel (http://www.quirksmode.org/css/box.html)
  
• get a good idea about positioning and floats (http://www.w3schools.com/css/css_positioning.asp, http://www.w3schools.com/css/css_float.asp, also- http://www.quirksmode.org/css/contents.html)
  
• here is a very good exemple of a CSS photo gallery (http://www.webreference.com/programming/css_gallery/index.html)
   
  

 

and again thank u andrea and virtual...

[virtual]

Tested in different resolutions on Firefox, IE7 and 8, Chrome and Safari and they all work fine.

 

The only comment I would make is that you didn't take up my suggestion to remove the p tags and put the class on the a tags. You are adding extra unnecessary markup and the cleaner your code, the quicker it downloads and the easier it is to debug. Also your images take forever to download

[pavelitbay]

...nice conversations friends

i want more/...