[INeedHelpPlease]

Hi

I have made a website and i need help. when i have a full screen my webpages are fine but when i restore the window my toolbar goes on to two lines instead of havin it when its a full window. can anyone help?

Attached File(s)

•  CSS_Coding.css (3.48K)
  Number of downloads: 43

[Nykc]

Not enough information to answer this. Can we see the code in action (ie. Link to the site, etc...)

also it would be easier if you

This post has been edited by Nykc: 03 April 2008 - 07:08 AM

[INeedHelpPlease]

Here is a page with the css file. images are missing but you will see what i mean when you restore or try to change the size of the screen

Attached File(s)

•  Accommodation.htm (2.62K)
  Number of downloads: 53
•  CSS_Coding.css (3.48K)
  Number of downloads: 53

[PsychoCoder]

Can you post a link to the site so we can see this in action? You need to realize that the majority of people, myself included, aren't going to download and open files from a person we don't know

[INeedHelpPlease]

This is not an active website. Its a college project. i can assure you that the files are ok.

[Nykc]

For future reference, including in this post. copy and paste your code like this-

Like psycho said, people don't like downloading stuff from unknown sources. use the code tags please. We want to help you, but don't make it harder for yourself.

This post has been edited by Nykc: 03 April 2008 - 07:35 AM

[Nykc]

Are you talking about your toolbar on your web browser?

Your page is displaying fine for me.

I would suggest re-sizing your banner from 895px to width="790" or something similiar. Alot of people still use 800 x 600 Resolution and when developing webs you will need to consider that.

This post has been edited by Nykc: 03 April 2008 - 07:43 AM

[INeedHelpPlease]

the css file is not showing the toolbar on the actual page i have created. if you view the page with the css you will see the toolbar which is Home, venues, transport, accommodation and transport

[Nykc]

Your CSS was named incorrectly, it was CSS Coding instead of CSS_Coding.css

But the quick answer to your problem is use percentages instead of set widths. That's why it is displaying like that.

This post has been edited by Nykc: 03 April 2008 - 07:59 AM

[INeedHelpPlease]

i have tried but i cant do it. maybe i have done the wrong bit but could you help please

[Nykc]

I am looking at still - Cause I tried it and it screwed something else up. One thing is you should use a container or wrapper to hold it in place.

I will continue to work at it but first thing is first is there a reason you are using such wide resolutions?

I am going to try and reconstruct and see what happens

[Nykc]

I added a Div id = container right beneath the opening body, and right before the closing </body> tag.

#container
{
width:1024px;
}
#lang
{
background-position:40px 140px;
background-attachment: fixed;
background-repeat:no-repeat;; 
position: absolute;
border: solid 0px black;
left:770px;
top:5px;
}

#banner
{
background-position:40px 140px;
background-attachment: fixed;
background-repeat:no-repeat;; 
position: absolute;
border: solid 0px black;
left:50px;
top:25px;
text-align:left;
}


#main
{
background-position:40px 140px;
background-attachment: fixed;
background-repeat:no-repeat;; 
position: absolute;
background-color:white;
border: solid 2px red;	
left:50px;
top:142px;
Width:900px;
height:450px;
text-align:left;
overflow:auto;
font: normal 18px/15px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
color:black;
filter:alpha(opacity=85);
-moz-opacity:.85;
opacity:.85;}
}


#table
{
position: absolute;
background-color:white;
border: solid 1px black;	
left:15px;
top:70px;
Width:820px;
height:360px;
font: normal 15px/15px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
overflow:auto;
text-align:left;
color:black;
filter:alpha(opacity=75);
-moz-opacity:.90;
opacity:.90;}
}

#travel
{
position: absolute;
background-color:white;
border: solid 0px black;	
left:100px;
top:270px;
Width:400px;
height:300px;
font: normal 15px/15px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
overflow:auto;
text-align:left;
color:black;
filter:alpha(opacity=80);
-moz-opacity:.80;
opacity:.80;}
}

#list
{
position: absolute;
left:720px;
top:160px;
colour:black;
text-align:center;
filter:alpha(opacity=96);
-moz-opacity:.96;
opacity:.96;
}

#travelfrom
{
position: absolute;
left:60px;
top:10px;
colour:black;
text-align:center;
}

#travelto
{
position: absolute;
left:260px;
top:10px;
colour:black;
text-align:center;
}

#traveltimehour
{
position: absolute;
left:260px;
top:180px;
colour:black;
text-align:center;
}

#traveltimeminute
{
position: absolute;
left:310px;
top:180px;
colour:black;
text-align:center;
}

#travelday
{
position: absolute;
left:60px;
top:180px;
colour:black;
text-align:center;
}

#travelmonth
{
position: absolute;
left:110px;
top:180px;
colour:black;
text-align:center;
}


}
#navcontainer
{
width: 100%;
margin: 10px 0 0 50px;
padding: 0;
height: 10px;
}

#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer ul li a
{
background: #666666;
width: 150px;
height: 8px;
position:relative;
left:-10px;
top:103px;
border-top: 1px solid red;
border-left: 1px solid red;
border-bottom: 1px solid red;
border-right: 1px solid red;
padding: 0;
margin: 0 0 10px 0;
color: white;
text-decoration: none;
display: block;
text-align: center;
font: normal 15px/21px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover
{
color: #ffffff;
background: #808080;
}

#navcontainer a:active
{
background: #808080;
color: #ffffff;

}

#navcontainer li#active a
{
background: #666666;
border: 1px solid red;
color: #ffffff;
}

#stadium
{
position: absolute;
background-color:white;
border: solid 0px black;	
left:450px;
top:250px;
Width:420px;
height:320px;
font: normal 15px/15px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
overflow:auto;
text-align:left;
color:black;

}

You are going to have to tweak it some more, but this will get you started. and now your menu bar stays constant. you will have to modufy the values, I would recommend building for 800 x 600. Atleast this will steer you in the right direction.

This post has been edited by Nykc: 03 April 2008 - 08:22 AM

[PsychoCoder]

You're going to have a hard time accomplishing this the way your CSS is set up at the moment. It is making the nav bar 2 lines when you make the window smaller because you have each item set at 180 pixels wide, so when the window is made smaller it has no choice but to go onto a 2nd line.

EDIT: Dang you NY, you beat me to the punch.

I too would suggest designing for an 800 x 600 resolution, thats the resolution I always design for as well. If you design for this resolution you will cater to the largest portion of users possible.

This post has been edited by PsychoCoder: 03 April 2008 - 08:26 AM

[INeedHelpPlease]

no reason no.

what line of coding shall i change?

[PsychoCoder]

Well I made some modifications to the CSS nykc offered. Here is what I came up for for an 800x600 display. There's still some tweaking needed for the actual navigation bar, but everything else works fine

#container
{
width:800px;
}
#lang
{
background-position:40px 140px;
background-attachment: fixed;
background-repeat:no-repeat;
position: absolute;
border: solid 0px black;
left:625px;
top:5px;
width:100%;
}

#banner
{
background-position:40px 140px;
background-attachment: fixed;
background-repeat:no-repeat;; 
position: absolute;
border: solid 0px black;
left:50px;
top:25px;
text-align:left;
}


#main
{
background-position:40px 140px;
background-attachment: fixed;
background-repeat:no-repeat;; 
position: absolute;
background-color:white;
border: solid 2px red;	
left:50px;
top:142px;
Width:800px;
height:500px;
text-align:left;
overflow:auto;
font: normal 18px/15px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
color:black;
filter:alpha(opacity=85);
-moz-opacity:.85;
opacity:.85;}
}


#table
{
position: absolute;
background-color:white;
border: solid 1px black;	
margin:5px;
top:70px;
Width:785px;
height:360px;
font: normal 15px/15px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
overflow:auto;
text-align:left;
color:black;
filter:alpha(opacity=75);
-moz-opacity:.90;
opacity:.90;}
}

#travel
{
position: absolute;
background-color:white;
border: solid 0px black;	
left:100px;
top:270px;
Width:400px;
height:300px;
font: normal 15px/15px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
overflow:auto;
text-align:left;
color:black;
filter:alpha(opacity=80);
-moz-opacity:.80;
opacity:.80;}
}

#list
{
position: absolute;
float:right;
left:632px;
top:160px;
colour:black;
text-align:center;
filter:alpha(opacity=96);
-moz-opacity:.96;
opacity:.96;
width:255px;
}

#travelfrom
{
position: absolute;
left:60px;
top:10px;
colour:black;
text-align:center;
}

#travelto
{
position: absolute;
left:260px;
top:10px;
colour:black;
text-align:center;
}

#traveltimehour
{
position: absolute;
left:260px;
top:180px;
colour:black;
text-align:center;
}

#traveltimeminute
{
position: absolute;
left:310px;
top:180px;
colour:black;
text-align:center;
}

#travelday
{
position: absolute;
left:60px;
top:180px;
colour:black;
text-align:center;
}

#travelmonth
{
position: absolute;
left:110px;
top:180px;
colour:black;
text-align:center;
}


}
#navcontainer
{
width: 800px;
margin: 10px 0 0 50px;
padding: 0;
height: 10px;

}

#navcontainer ul
{
width:100%;
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#navcontainer ul li a
{
background: #666666;
width: 150px;
height: 8px;
position:relative;
left:-10px;
top:103px;
border-top: 1px solid red;
border-left: 1px solid red;
border-bottom: 1px solid red;
border-right: 1px solid red;
padding: 0;
margin: 0 0 10px 0;
color: white;
text-decoration: none;
display: block;
text-align: center;
font: normal 15px/21px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#navcontainer ul li a:hover
{
color: #ffffff;
background: #808080;
}

#navcontainer a:active
{
background: #808080;
color: #ffffff;

}

#navcontainer li#active a
{
background: #666666;
border: 1px solid red;
color: #ffffff;
}

#stadium
{
position: absolute;
background-color:white;
border: solid 0px black;	
left:450px;
top:250px;
Width:420px;
height:320px;
font: normal 15px/15px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
overflow:auto;
text-align:left;
color:black;

}