|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
 |
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
|
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Display Modes |
Dev Articles Community Forums Sponsor:
|
|
|
|
#1
April 6th, 2005, 11:06 AM
|
|||
|
|||
|
Css site design problems
I'm a beginner to Css, actually this is my 1st site in CSS so i got some problems.
My CSS template is displayed in 3 different versions depending on the browser i use... Here is the CSS code : Code:
body { padding: 0pt;
background-image: url(bg.jpg);
text-align: center;
font-family: Verdana,Tahoma,Arial,Trebuchet MS,Sans-Serif,Georgia,Courier,Times New Roman,Serif;
}
.container { border: 1px solid rgb(0, 0, 0);
padding: 0px;
width: 801px;
text-align: center;
background-color: white;
margin-left: auto;
margin-right: auto;
top: 1%;
}
#header { padding: 0px;
width: 100%;
text-align: right;
height: 130px;
}
#logo { padding: 0px;
width: 216px;
height: 90px;
float: left;
margin-top: 20px;
margin-left: 0px;
}
#slogan { padding: 5px;
width: 60%;
text-align: right;
font-style: italic;
font-size: 22px;
color: rgb(240, 99, 10);
height: 30px;
position: relative;
float: right;
margin-top: 89px;
}
#frimituri { border-top: 1px solid rgb(0, 0, 0);
border-bottom: 1px solid rgb(0, 0, 0);
padding: 5px;
text-align: left;
color: rgb(255, 255, 255);
height: 20px;
font-size: 12px;
font-weight: bold;
background-color: rgb(234, 234, 234);
#frimituri { width: 811px;
voice-family: "\"}\"";
voice-family:inherit;
width:799px;
}
a:link, a:visited, a:active { text-decoration: none;
color: rgb(240, 99, 10);
background-color: transparent;
}
a:hover { text-decoration: none;
color: rgb(28, 49, 79);
background-color: transparent;
}
#container2 {padding:10px;
padding-bottom:0px;
padding-top:0px;
float:left;
width:99%;
height:600px;
}
#parte_st { border-right: 1px dotted rgb(0, 0, 0);
padding-top: 20px;
width: 20%;
height: 100%;
text-align: left;
color: rgb(255, 255, 255);
float: left;
font-size: 14px;
}
#footer { border-top: 1px solid rgb(0, 0, 0);
clear:both;
width: 100%;
text-align: center;
color: rgb(0, 0, 0);
height: 60px;
margin-bottom:0px;
background-color: rgb(234, 234, 234);
}
.clear { clear:both;
line-height:0;
}
Here is the html : Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>SENS</title> <link rel="stylesheet" type="text/css" media="screen" href="template.css"> </head> <body> <div class="container"> <div id="header"> <div id="logo"> <a href="http://ss.mymd.t-rh.com/index.php"><img src="sens_logo.gif" align="left" border="0"></a> </div> <div id="slogan"> <b>Sloganul intra aici</b> </div> </div> <div id="frimituri"> <a href="http://ss.mymd.t-rh.com/index.php">SENS</a> </div> <div id="container2">Text <div id="parte_st"> <li><img src="nav.gif" border="0"><a href="/index.html">Main</a></li> <li><img src="nav.gif" border="0"><a href="/html/proiecte.html">Proiecte</a></li> <li><img src="nav.gif" border="0"><a href="/html/membri.html">Membri</a></li> <li><img src="nav.gif" border="0"><a href="/forum/index.php">Forum</a></li> <li><img src="nav.gif" border="0"><a href="/html/desprenoi.html">Despre Noi</a></li> <li><img src="nav.gif" border="0"><a href="/html/linkuri.html">Linkuri</a></li> <li><img src="nav.gif" border="0"><a href="/html/contact.html">Contact</a></li> </div> </div> <div class="clear"> </div> <div id="footer">Footer</div> </div> </body> </html> Pictures of the 3 different results : http://www.afreeimagehost.com/upload/3436/layout_ie6.jpg http://www.afreeimagehost.com/upload/3436/layout_mozilla.jpg http://www.afreeimagehost.com/upload/3436/layout_opera.jpg I want the site to look like it is displayed in Opera. Can somebody please help me. I want to know where i went wrong. I hope the answer isn't something like "u'r css is sh*t" 
|
|
#2
April 6th, 2005, 11:26 AM
|
||||
|
||||
|
I advise against using three seperate CSS files for each browser.
What happens if someone in Konqueror or Safari accesses your site? Which styelsheet will they see? Chances are there's a LOT of duplication between stylesheets anyways. The common issues caused by different browsers usually surround the rendering of the Box Model. (Something to do with borders and padding and margins and layouts getting all shifted about)
|
|
#3
April 6th, 2005, 11:27 AM
|
||||
|
||||
|
Nevermind, sorry... I mis-read your post.
What I said is still valid, but it does look like you are using one CSS file... good =) One thing I noticed first, in CSS when the font name has many words, wrap it in quotes. Irrelevant, just something quick I noticed. font-family: Verdana,Tahoma,Arial,"Trebuchet MS",Sans-Serif,Georgia,Courier,Times New Roman,Serif; Otherwise, I'm currently testing your code to see what I can do.
|
|
#4
April 6th, 2005, 11:46 AM
|
||||
|
||||
|
I slightly fixed your code.
Your CSS isn't awful and I think it's great that you are trying to use it. Learning how to fine-tune it is the fun/difficult part. For my own testing, I combined the CSS and HTML. You don't need to do that. I also indented your code to match my personal style... =) Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SENS</title>
<!-- <link rel="stylesheet" type="text/css" media="screen" href="template.css">-->
<style type="text/css">
body {
padding: 0pt;
background-image: url(bg.jpg);
text-align: center;
font-family: Verdana,Tahoma,Arial,Trebuchet MS,Sans-Serif,Georgia,Courier,Times New Roman,Serif;
}
.container {
border: 1px solid rgb(0, 0, 0);
padding: 0px;
width: 801px;
text-align: center;
background-color: white;
margin-left: auto;
margin-right: auto;
top: 1%;
}
#header {
padding: 0px;
width: 100%;
text-align: right;
height: 130px;
}
#logo {
padding: 0px;
width: 216px;
height: 90px;
float: left;
margin-top: 20px;
margin-left: 0px;
}
#slogan {
padding: 5px;
width: 60%;
text-align: right;
font-style: italic;
font-size: 22px;
color: rgb(240, 99, 10);
height: 30px;
position: relative;
float: right;
margin-top: 89px;
}
#frimituri {
border-top: 1px solid rgb(0, 0, 0);
border-bottom: 1px solid rgb(0, 0, 0);
padding: 5px;
text-align: left;
color: rgb(255, 255, 255);
height: 20px;
font-size: 12px;
font-weight: bold;
background-color: rgb(234, 234, 234);
width: 811px;
voice-family: "\"}\"";
voice-family:inherit;
width:799px;
}
a:link, a:visited, a:active {
text-decoration: none;
color: rgb(240, 99, 10);
background-color: transparent;
}
a:hover {
text-decoration: none;
color: rgb(28, 49, 79);
background-color: transparent;
}
#container2 {
padding:10px;
padding-bottom:0px;
padding-top:0px;
float:left;
width:99%;
height:600px;
}
#parte_st {
border-right: 1px dotted rgb(0, 0, 0);
padding-top: 20px;
width: 20%;
height: 100%;
text-align: left;
color: rgb(255, 255, 255);
float: left;
font-size: 14px;
}
#footer {
border-top: 1px solid rgb(0, 0, 0);
clear:both;
width: 100%;
text-align: center;
color: rgb(0, 0, 0);
height: 60px;
margin-bottom:0px;
background-color: rgb(234, 234, 234);
}
.clear {
clear:both;
line-height:0;
}
</style>
</head>
<body>
<div class="container">
<div id="header">
<div id="logo">
<a href="http://ss.mymd.t-rh.com/index.php"><img src="sens_logo.gif" align="left" border="0"></a>
</div>
<div id="slogan">
<b>Sloganul intra aici</b>
</div>
</div>
<div id="frimituri">
<a href="http://ss.mymd.t-rh.com/index.php">SENS</a>
</div>
<div id="container2">
Text
<div id="parte_st">
<li><img src="nav.gif" border="0"><a href="/index.html">Main</a></li>
<li><img src="nav.gif" border="0"><a href="/html/proiecte.html">Proiecte</a></li>
<li><img src="nav.gif" border="0"><a href="/html/membri.html">Membri</a></li>
<li><img src="nav.gif" border="0"><a href="/forum/index.php">Forum</a></li>
<li><img src="nav.gif" border="0"><a href="/html/desprenoi.html">Despre Noi</a></li>
<li><img src="nav.gif" border="0"><a href="/html/linkuri.html">Linkuri</a></li>
<li><img src="nav.gif" border="0"><a href="/html/contact.html">Contact</a></li>
</div>
</div>
<div class="clear"> </div>
<div id="footer">Footer</div>
</div>
</body>
</html>
A part of your CSS looks like: Code:
#frimituri { border-top: 1px solid rgb(0, 0, 0);
border-bottom: 1px solid rgb(0, 0, 0);
padding: 5px;
text-align: left;
color: rgb(255, 255, 255);
height: 20px;
font-size: 12px;
font-weight: bold;
background-color: rgb(234, 234, 234);
#frimituri { width: 811px;
voice-family: "\"}\"";
voice-family:inherit;
width:799px;
}
You are missing a closing curly-bracket... better yet, I just took the second #frimituri { out. What i've done is a start. Your page is rendered a little cleaner in Firefox. Some tips... <img src="nav.gif" border="0"> Instead of using border="0" on all the images within that navigation list, change that attribute in the css. #parte_st li img { border: 0; } Better yet, if this is a list and those nav.gif images are to replace bullets, use CSS to style an unordered list. I also advise changing #parte_st from a DIV to an UL... you may want to set the margin and padding to zero. I noticed a lot of your measurements/units are different all over the place. Sometimes percent, sometimes pixel, sometimes pt... I would advise sticking to pixels and percents, pt's tend to get rendered differently on different operating systems.
|
|
#7
April 23rd, 2005, 10:43 PM
|
|||
|
|||
|
You may also want to use CSS hacks in order to use just one CSS. You may want to research on CSS hacks, but the way to do it is "html>body" without the quotes.
|
|
| Viewing: Dev Articles Community Forums > Web Design > Advanced Web Development > Css site design problems |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
