Chciałam na wstępie się przywitać, jest to mój pierwszy post na tym forum
strona: http://zuka.0host.pl/
layout: http://zuka.0host.pl/layout.jpg
Jestem w trakcie nauki tworzenia stron www w html/css. Aktualnie zabrałam się za pocięcie gotowego darmowego layoutu i pisanie kodu.
Na razie mam zakodowaną górną część strony - nagłówek i menu. Chciałabym prosić o pomoc - co powinnam zmienić, żeby kod był bardziej profesjonalny. Dopiero się uczę, ale chcę robić to dobrze
Oprócz tego proszę o pomoc w następujących problemach:
1. w #logo używam line-height, niestety wygląda to inaczej w mozilli a inaczej w ie:/ Chciałabym w mozilli bardziej ścieśnić ze sobą <h1> z <p>, ale wtedy w ie napisy na siebie nachodzą,
2. w #menu w liście nadałam jednemu elementowi klasę .clicked, żeby oznaczyć ją jako "klikniętą" (jest biała z napisem "Dolor Sit"), ale w ie6 niestety nie jest biała? Nie mam już pomysłu jak sobie z tym poradzić
3. w #menu kolejne elementy są zaokrąglone za pomocą jquery.corner, oczywiście w ie ale i w operze jest problem:/ tam przyciski się zaokrąglają, ale pozostaje takie zielone jednolite tło, a chciałabym, żeby było widać obrazek lasu. Pewnie chodzi o to, że ie nie obsługuje przezroczystości?
Pewnie nie da się z tym nic zrobić, ale może ktoś z Was wie jak można to obejść? Albo ewentualnie macie jakiś pomysł, aby tak beznadziejnie to nie wyglądało
Proszę się czepiać o każdy szczegół
index.html :
style.css
strona: http://zuka.0host.pl/
layout: http://zuka.0host.pl/layout.jpg
Jestem w trakcie nauki tworzenia stron www w html/css. Aktualnie zabrałam się za pocięcie gotowego darmowego layoutu i pisanie kodu.
Na razie mam zakodowaną górną część strony - nagłówek i menu. Chciałabym prosić o pomoc - co powinnam zmienić, żeby kod był bardziej profesjonalny. Dopiero się uczę, ale chcę robić to dobrze
Oprócz tego proszę o pomoc w następujących problemach:
1. w #logo używam line-height, niestety wygląda to inaczej w mozilli a inaczej w ie:/ Chciałabym w mozilli bardziej ścieśnić ze sobą <h1> z <p>, ale wtedy w ie napisy na siebie nachodzą,
2. w #menu w liście nadałam jednemu elementowi klasę .clicked, żeby oznaczyć ją jako "klikniętą" (jest biała z napisem "Dolor Sit"), ale w ie6 niestety nie jest biała? Nie mam już pomysłu jak sobie z tym poradzić
3. w #menu kolejne elementy są zaokrąglone za pomocą jquery.corner, oczywiście w ie ale i w operze jest problem:/ tam przyciski się zaokrąglają, ale pozostaje takie zielone jednolite tło, a chciałabym, żeby było widać obrazek lasu. Pewnie chodzi o to, że ie nie obsługuje przezroczystości?
Pewnie nie da się z tym nic zrobić, ale może ktoś z Was wie jak można to obejść? Albo ewentualnie macie jakiś pomysł, aby tak beznadziejnie to nie wyglądało
Proszę się czepiać o każdy szczegół
index.html :
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="jquery.corner.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#menu li a').corner("top");
});
</script>
</head>
<body>
<div id="CONTAINER">
<div id="login">
<p class="inline left">Hello <b>Guest</b> enjoy your stay!</p>
<form class="inline right" action="">
<div>
<input type="text" name="username" value="username"/>
<input type="text" name="password" value="password"/>
<button type="submit">Go</button>
</div>
</form>
<p class="inline right">Please login or Sign up for new account</p>
</div><!--end #login-->
<div class="border"></div><!--end #border-->
<div id="logo">
<h1><span>Your</span>Site.<em>com</em></h1>
<p>your site idea slogan here</p>
</div><!--end #logo-->
<div id="menu">
<ul>
<li><a class="clicked" href="#">Dolor sit</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Amet ipsum</a></li>
<li><a href="#">Ipsum dolor</a></li>
<li><a href="#">Lorem</a></li>
<!--<li><a href="#">Sita amet</a></li>-->
</ul>
</div><!--end #menu-->
<div id="menu2">
<ul>
<li><a href="#">Dolor sit</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Amet ipsum</a></li>
<li><a href="#">Ipsum dolor</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Sita amet</a></li>
<li><a href="#">Lorem</a></li>
<li><a class="last" href="#">Sita amet</a></li>
</ul>
</div><!--end #menu2-->
<div class="border"></div><!--end #border-->
<div id="CONTENT">
<p>content</p>
</div>
</div><!--end #container-->
</body>
</html>style.css
Kod PHP:
* {
margin: 0;
padding: 0;
}
ul {
list-style:none;
}
html {
background: #368c63 url(images/background.png) repeat-x;/*gradient w tle*/
}
body {
font-family:Arial, sans-serif;
text-align:center;
}
.inline {
display: inline;
}
.right {
float:right;
}
.left{
float:left;
}
#CONTAINER {
background: url(images/header.jpg) no-repeat center top;/*#03201b obrazek duży las*/
width: 970px;
margin: 0 auto ;/*wysrodkowanie*/
position:relative;
text-align:left;
}
#login {
padding:10px 20px;
height:25px;
width:930px;
background:#e9ffec;
font-family:Arial, sans-serif;
font-size:.75em;
color:#005e5d;
}
#login form{
margin-left:20px;
}
#login p{
margin: 5px 0 0 0 ;
}
#login input{
margin:0 5px;
padding:4px;
border:none;
height:14px;
width:100px;
color:#ffffff;
background:#000000;
}
.border {
background:#ffffff url(images/loginBackground.gif) repeat-x;
height:5px;
border-bottom:1px solid #539d25;
padding:0;
font-size:0em;
}
#logo{
position:absolute;
left:100px;
top:120px;
line-height: 1.6em;
height:90px;
font-family:Times New Roman, serif;
}
#logo img{
}
#logo p{
margin:0 0 0 130px;
font-style:italic;
font-size:1.5em;
color:#ffffff;
}
h1 {
color:#ffffff;
font-size:3em;
margin:25px 0 0 70px;
}
h1 span {
font-weight:normal;
}
h1 em{
font-size:.4em;
}
#menu{
font-size:0.75em;
font-weight:bold;
position:relative;
}
#menu ul{
margin:230px 0 0 0;
height:25px;
}
#menu li{
float:left;
text-align:center;
width:20%;
}
#menu li a{
text-decoration:none;
color:#ffffff;
width:100%;
height:20px;
display:block;
padding:5px 0 0 0;
background:black;
}
#menu li a:link, #menu li a:visited{
color:#ffffff;
background:black;
}
#menu li a.clicked, #menu li a:hover, #menu li a:active{
color:#005e5d;
background:#e9ffec;
}
#menu2{
height:40px;
font-size:0.75em;
position:relative;
background:#e9ffec;
}
#menu2 li{
float:left;
width:12.5%;
height:30px;
text-align:center;
}
#menu2 li a{
display:block;
text-decoration:none;
color:#005e5d;
height:30px;
background:#e9ffec url(images/dot.gif) no-repeat right 20%;
margin:10px 0 0 0;
}
#menu2 li a.last{
background:#e9ffec;
}
#menu2 li a:hover, #menu2 li a:active{
text-decoration:underline;
}
#CONTENT{
}
