On my home page I have the background set up with a table like soo
<table align="center" border="0" width="100%" height="100%">
<td width="13%" style="background:#000000 url(pictures/back3.jpg) fixed top left;"></td>
<td width="74%" style="background:#000000 url(pictures/back4.jpg) fixed top left;">
****CONTENT GOES HERE*******
</td>
<td width="13%" style="background:#000000 url(pictures/back3.jpg) fixed top left;"></td></tr>
</table>
Obviously this causes some problems because my content cannot extend in to the sides (13% td's)
help would be greatly appreiciated...... thanks
Full Version: Html Code Helpage...possible Css Fix?
Hello
Do you really have to use percentage (%) for sizing the tables? I mean, it could cause unequally ratio between objects.
I prefer using exact dimensions defined by px...
Do you really have to use percentage (%) for sizing the tables? I mean, it could cause unequally ratio between objects.
I prefer using exact dimensions defined by px...
A link to your site would be helpful. I dont know what you are using a table for as there may be another solution to doing this. You know u can style tables using css. I would aslo suggest separating content from presentation. Ie html for content etc and css to style the certain elements .
Anyway i would use px value to define the dimensions as well. Percentages can become a huge pain in the ass later on. As you have just figured out
.
Anyway i would use px value to define the dimensions as well. Percentages can become a huge pain in the ass later on. As you have just figured out
.
thanks for replying guys......
and i would love to have a seperate style sheet for my background....
but i'm not sufficient in coding css??....can someone help??----(just want the background to be coded as shown)
here is my site so you can see my problem....... http://www.vicarious.clanteam.com/index.html
the problem occers when users have lower resolution..
since the content (for now the buttons) are contained in the greenish area they tend to flow over underneath....(resize the window for a visual)
I believe the problem would be solved if the content could flow into the purple colored areas......
and/or a horizontal scroll bar appears instead of having the content flow over......(I believe this would be solved if i took out the percentages)
LAST RESORT<---------If the only solution is to set acual pxls what is the most used resolution????------>LAST RESORT
Obviously i have many questions and concerns so please respond with as many details as possible....
please reply and help me out.... thanks
and i would love to have a seperate style sheet for my background....
but i'm not sufficient in coding css??....can someone help??----(just want the background to be coded as shown)
here is my site so you can see my problem....... http://www.vicarious.clanteam.com/index.html
the problem occers when users have lower resolution..
since the content (for now the buttons) are contained in the greenish area they tend to flow over underneath....(resize the window for a visual)
I believe the problem would be solved if the content could flow into the purple colored areas......
and/or a horizontal scroll bar appears instead of having the content flow over......(I believe this would be solved if i took out the percentages)
LAST RESORT<---------If the only solution is to set acual pxls what is the most used resolution????------>LAST RESORT
Obviously i have many questions and concerns so please respond with as many details as possible....
please reply and help me out.... thanks
Well...
I think that's simply a problem with the size of "menu bar" and table (in %) which contains large menu bar, whatever... I have 20'' large LCD monitor set on 1440 x 900 resolution and I have no problem to view your page, but I have simulated on a smaller monitor size, and it happens... Large menu bar breaks in two lines, and putts down smaller part which doesn't fit in the size of monitor in the same line... Its normal function!!! Maybe you should consider to do a smaller menu bar and it will be ok even for those guys with smaller size of monitor.
However, If you still like it this size... Put all of buttons into one exact table size (e.g. table width: 1200 px) and it won't breaks in two parts with monitors size of 1024 px. But it will cause another effect! The user won't be able to see whole menu bar in one piece, without using horizontal scroll bar, which is uglier then first version.
Here is an excellent - Monitor Size Simulation - tool which you may use to check how it looks like with smaller monitors size!
I recommend to you, change whole page into a CSS and do it a bit smaller... It makes also very amateur impression in generally (
sorry about this) to users!
Talking about help with CSS coding... Man, its not just a small mistake to correct, it is entier web page to do?! It takes a lot of time to learning and trying before you will be able to understand how to do it... Otherwise, someone else must to do that job entirely for you!
Snooper
I think that's simply a problem with the size of "menu bar" and table (in %) which contains large menu bar, whatever... I have 20'' large LCD monitor set on 1440 x 900 resolution and I have no problem to view your page, but I have simulated on a smaller monitor size, and it happens... Large menu bar breaks in two lines, and putts down smaller part which doesn't fit in the size of monitor in the same line... Its normal function!!! Maybe you should consider to do a smaller menu bar and it will be ok even for those guys with smaller size of monitor.
However, If you still like it this size... Put all of buttons into one exact table size (e.g. table width: 1200 px) and it won't breaks in two parts with monitors size of 1024 px. But it will cause another effect! The user won't be able to see whole menu bar in one piece, without using horizontal scroll bar, which is uglier then first version.
Here is an excellent - Monitor Size Simulation - tool which you may use to check how it looks like with smaller monitors size!
I recommend to you, change whole page into a CSS and do it a bit smaller... It makes also very amateur impression in generally (
sorry about this) to users! Talking about help with CSS coding... Man, its not just a small mistake to correct, it is entier web page to do?! It takes a lot of time to learning and trying before you will be able to understand how to do it... Otherwise, someone else must to do that job entirely for you!
Snooper
thanks for all of the suggestions and help........and yes, I am very amatuer at web design =S.....my bad lol
Here is a starter for your site. File Included in attachment Ok heres the xhtml doc
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Serach information goes here- Ie google will show this on their submission page">
<title>Vicarious</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="main-container">
<div class="logo">
<img src="images/logo.png" alt="Vicarious" title="" border="0" /></a>
</div>
<div>
<div id="menu-container">
<ul class="menu">
<li><a href="index.html" class="nav"> Home </a></li>
<li><a href="services.html" class="nav"> Clan Rules</a></li>
<li><a href="portfolio.html" class="nav"> Ranking System</a></li>
<li><a href="clientarea.html" class="nav"> The Elite</a></li>
<li><a href="contactus.html" class="nav"> Forums </a></li>
</div>
Heres css file
.background{
background-image:'images/back3.jpeg';
background-repeat: repeat
}
#main-container{
width:677px;
height:auto;
margin:auto;
padding:0px;
position:relative;
}
.logo{
padding: 10px 0px 0px 100px
}
#menu-container{
font-family:Arial, Helvetica, sans-serif;
padding:0px;
margin:10px 0px 10px 0px;
}
ul.menu {
list-style-type:none; display:block; width:450px;
margin: auto; padding:0px; background:none;
border: 1px #eeeeee solid ;
}
ul.menu li {
display:inline;
font-size:13px;
font-weight:bold;
line-height:52px;
}
a.nav:link, a.nav:visited {
display:block; float:left; padding:0px; margin:0;width: auto; margin:0px 14px 0px 14px; text-align:center;
text-decoration:none; background:none; color:#534848;
}
a.nav_selected:link, a.nav_selected:visited {
display:block; float:left; padding:0px; margin:0;width: auto;margin:0px 14px 0px 14px;text-align:center;
text-decoration:none; color: #FF6600;
}
a.nav:hover {
color: #8215b1; text-decoration:none;
}
As i have said just unzip the file as the way it is.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Serach information goes here- Ie google will show this on their submission page">
<title>Vicarious</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="main-container">
<div class="logo">
<img src="images/logo.png" alt="Vicarious" title="" border="0" /></a>
</div>
<div>
<div id="menu-container">
<ul class="menu">
<li><a href="index.html" class="nav"> Home </a></li>
<li><a href="services.html" class="nav"> Clan Rules</a></li>
<li><a href="portfolio.html" class="nav"> Ranking System</a></li>
<li><a href="clientarea.html" class="nav"> The Elite</a></li>
<li><a href="contactus.html" class="nav"> Forums </a></li>
</div>
Heres css file
.background{
background-image:'images/back3.jpeg';
background-repeat: repeat
}
#main-container{
width:677px;
height:auto;
margin:auto;
padding:0px;
position:relative;
}
.logo{
padding: 10px 0px 0px 100px
}
#menu-container{
font-family:Arial, Helvetica, sans-serif;
padding:0px;
margin:10px 0px 10px 0px;
}
ul.menu {
list-style-type:none; display:block; width:450px;
margin: auto; padding:0px; background:none;
border: 1px #eeeeee solid ;
}
ul.menu li {
display:inline;
font-size:13px;
font-weight:bold;
line-height:52px;
}
a.nav:link, a.nav:visited {
display:block; float:left; padding:0px; margin:0;width: auto; margin:0px 14px 0px 14px; text-align:center;
text-decoration:none; background:none; color:#534848;
}
a.nav_selected:link, a.nav_selected:visited {
display:block; float:left; padding:0px; margin:0;width: auto;margin:0px 14px 0px 14px;text-align:center;
text-decoration:none; color: #FF6600;
}
a.nav:hover {
color: #8215b1; text-decoration:none;
}
As i have said just unzip the file as the way it is.
sweet!!
I'll Definitley check it out and re-reply
I'll Definitley check it out and re-reply
I had a go at this too...
Hope you don't mind me posting my attempt here: http://www.prixat.zxq.net/vicarioussite/vic-fluid3col.html
I kept it totally fluid CSS with percentages but used the 'min-width' CSS property on the menu.
It ended up virtually identical to flyboy's (only better
)
Hope you don't mind me posting my attempt here: http://www.prixat.zxq.net/vicarioussite/vic-fluid3col.html
I kept it totally fluid CSS with percentages but used the 'min-width' CSS property on the menu.
It ended up virtually identical to flyboy's (only better
)
prixat - I kept it totally fluid CSS with percentages but used the 'min-width' CSS property on the menu.
It ended up virtually identical to flyboy's (only better )
Haha Yea thats true
It ended up virtually identical to flyboy's (only better
)Haha Yea thats true
sweet...
this css stuff is really intresting to me and i would love to learn more....
Since now ive been strictley html....
Anyone have any good css tutorial sites..
or good css reference guides for newbs...
I learn fast but css is fairly new to me =)
thanks for all of your help again....
Anyone else have anymore or any further suggestion please dont hold back.....
thanks again...
this css stuff is really intresting to me and i would love to learn more....
Since now ive been strictley html....
Anyone have any good css tutorial sites..
or good css reference guides for newbs...
I learn fast but css is fairly new to me =)
thanks for all of your help again....
Anyone else have anymore or any further suggestion please dont hold back.....
thanks again...
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.