30-01-2011, 06:41
Witam, zazwyczaj wraz z wujkiem google sobie radzimy ze wszelkimi problemami związanymi z CSS i xHTML jednak tym razem brakuje mi już sił... Żeby było mi łatwiej wytłumaczyć na czym polega mój problem, przygotowałem specjalne ilustracje: (sorry za kiepską jakość)
![[Obrazek: ukladfreeesz.jpg]](http://img267.imageshack.us/img267/5305/ukladfreeesz.jpg)
wszystko byłoby piękne gdyby nie to że nadszedł czas kodowania... i moja strona wygląda tak:
http://freshmandesign.pl/zle/
a powinna tak:
http://freshmandesign.pl/zle/dobrze.jpg
^skompresowana, aby szybciej się pobierała.
Jak widać, kontener w tle (ciemnoszary) nie odzwierciedla prawidłowej zawartości jaką wykonałem w photoshopie.. Jest wyjście, ustawić tło dla body z obrazem kontenera i height 100% ale jednak będe potrzebował body dla innego tła, które zakrywać będzie ten nieszczęsny kontener. Drugie wyjście to brak wadliwego kontenera, jednak nic mnie do tego nie zmusi.. Bardzo proszę o pomoc, jestem początkującym koderem, zazwyczaj edytowałem inne szablony i w ten sposób przyuczyłem się trochę webmasteringu ale jak widać "na raty"..
teraz zaprezentuję kod html:
i CSS
Jestem pewien że dostrzegliście wieeele wiele więcej błędów, tak jak walidator w3c ale z nim nie umiem rozmawiać, więc nie obrażę się jeśli dopiszecie co tam trzeba poprawić
)
wszystko byłoby piękne gdyby nie to że nadszedł czas kodowania... i moja strona wygląda tak:
http://freshmandesign.pl/zle/
a powinna tak:
http://freshmandesign.pl/zle/dobrze.jpg
^skompresowana, aby szybciej się pobierała.
Jak widać, kontener w tle (ciemnoszary) nie odzwierciedla prawidłowej zawartości jaką wykonałem w photoshopie.. Jest wyjście, ustawić tło dla body z obrazem kontenera i height 100% ale jednak będe potrzebował body dla innego tła, które zakrywać będzie ten nieszczęsny kontener. Drugie wyjście to brak wadliwego kontenera, jednak nic mnie do tego nie zmusi.. Bardzo proszę o pomoc, jestem początkującym koderem, zazwyczaj edytowałem inne szablony i w ten sposób przyuczyłem się trochę webmasteringu ale jak widać "na raty"..
teraz zaprezentuję kod html:
Kod:
<!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>
<title>nowe portfolio</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="kontener">
<div id="header">
<div class="logo"><img src="images/logo.png"></div>
<div class="menu">
<ul>
<li><a href="index.php" class="home"></a></li>
<li><a href="obrazki.php" class="omnie"></a></li>
<li><a href="podrywanie.php" class="portfolio"></a></li>
<li><a href="cytaty.php" class="kontakt"></a></li>
</ul>
</div>
<div class="elipsy"></div>
</div>
<div id="slider-kontener"></div>
<div class="spacer"></div>
<div id="wpisy">
<div class="naglowek"><h1>Wpis 1</h1></div>
<div class="thumb"><img src="images/thumb.gif"></div>
<div class="tresc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. laboris nisi ut aliquip ex ea commodo con.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
<p class="czytaj-dalej"><a href="#"></a></p>
</div>
<div class="naglowek"><h1>Wpis 2</h1></div>
<div class="thumb"><img src="images/thumb.gif"></div>
<div class="tresc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. laboris nisi ut aliquip ex ea commodo con.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
<p class="czytaj-dalej"><a href="#"></a></p>
</div>
<div class="naglowek"><h1>Wpis 3</h1></div>
<div class="thumb"><img src="images/thumb.gif"></div>
<div class="tresc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. laboris nisi ut aliquip ex ea commodo con.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
<p class="czytaj-dalej"><a href="#"></a></p>
</div>
<div class="elipsy2"></div>
</div>
<div id="sidebar">
<div class="side-naglowek"><h1>Side 1</h1></div>
<div class="side-lista">
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Dolor sit amet</a></li>
<li><a href="#">consectetur elit</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Tutoriale</a></li>
</ul>
</div>
<div class="side-naglowek"><h1>Side 2</h1></div>
<div class="side-tresc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
</div>
</div>
</div>
</body>
</html>i CSS
Kod:
html {
height: 100%;
}
body {
text-align:center;
background: #171717;
margin: 0 auto;
padding: 0;
height: 100%;
}
#kontener {
height: 100%;
text-align:left;
padding: 0;
margin: 0 auto;
width: 960px;
background:url(images/bg.gif);
}
#header {
margin: 0;
position: absolute;
top: 0px;
width: 960px;
}
.logo { padding: 0; margin: 0; width: 240px; height: 58px; float: left;}
.menu { height:58px; width: 720px; float: right; background:url(images/bgmenu.png) right top no-repeat; padding: 0; margin: 0; }
.menu ul { float:left; padding:0; margin:0; list-style:none; border:0;}
.menu ul li { float:left; margin:0; padding:0; border:0;}
.menu ul li a.home { float:right; margin:0; padding: 29px 0 29px 180px; color:#fff; background:url(images/menuhome.gif) no-repeat top;}
.menu ul li a.omnie { float:right; margin:0; padding: 29px 0 29px 180px; color:#fff; background:url(images/menuomnie.gif) no-repeat top;}
.menu ul li a.portfolio { float:right; margin:0; padding: 29px 0 29px 180px; color:#fff; background:url(images/menuportfolio.gif) no-repeat top;}
.menu ul li a.kontakt { float:right; margin:0; padding: 29px 0 29px 180px; color:#fff; background:url(images/menukontakt.gif) no-repeat top;}
.menu ul li a.home:hover { color:#434343; background: url(images/menuhome-hover.gif) no-repeat right;}
.menu ul li a.omnie:hover { color:#434343; background: url(images/menuomnie-hover.gif) no-repeat right;}
.menu ul li a.portfolio:hover { color:#434343; background: url(images/menuportfolio-hover.gif) no-repeat right;}
.menu ul li a.kontakt:hover { color:#434343; background: url(images/menukontakt-hover.gif) no-repeat right;}
.elipsy { float: right; background: url(images/elipsy.gif) no-repeat top right; padding: 58px 0 0 0; margin: 0; width: 960px; height: 52px;}
#slider-kontener{
margin: 0 auto;
width: 840px;
height: 414px;
padding: 0px 0 120px 0;
background: url(images/slider.jpg) no-repeat bottom right;
float: bottom;
}
.spacer {background: #0a0a0a; width:960px; height:40px; padding: 0; margin:0;}
#wpisy {
background:url(images/bg.gif);
width: 650px;
padding: 0 0 0 60px;
margin:0;
float: left;
}
#wpisy .naglowek h1{ font: 20px Arial, Helvetica, sans-serif; color:#ffc051; padding: 0; margin: 0; position:absolute;background: url(images/naglowek.gif) no-repeat left; width: 650px;}
#wpisy .thumb { width: 650px; height: 198px; padding: 33px 0 5px 0; margin: 0; float:left; border: 0;}
#wpisy .tresc { padding: 0 0 30px 0; margin: 0; color:#ffdda1;font: 12px Arial, Helvetica, sans-serif; }
#wpisy .czytaj-dalej a { float:right; background: url(images/czytaj-dalej.gif) no-repeat right; width: 95px; height: 30px; padding: 0; margin: 0;}
#wpisy .czytaj-dalej a:hover { float:right; background: url(images/czytaj-dalej-hover.gif) no-repeat right; width: 95px; height: 30px; }
#wpisy .czytaj-dalej p { float:right; padding: 0; margin: 0; width: 95px; height: 30px;}
#wpisy .elipsy2 { background: url(images/elipsy2.gif); padding: 0; margin: 0; width: 650px; height: 62px; float:left;}
#sidebar {
background:url(images/bg.gif);
width: 220px;
padding: 0;
margin: 0;
float: right;
}
#sidebar .side-naglowek h1 { font: 20px Arial, Helvetica, sans-serif; color:#ffc051; padding: 0 0 7px 0; margin: 0; position:absolute; background: url(images/side-naglowek.gif) no-repeat left; width: 220px; }
#sidebar .side-lista ul { padding: 33px 0 0 0; margin: 0; color:#ffc051; font: 14px Arial, Helvetica, sans-serif; }
#sidebar .side-lista ul li{ list-style-image: none; background: url(images/list_arrow.png) no-repeat left 5px; list-style-type: none; float: none; padding: 0 0 9px 16px; margin: 0 0 4px; float: none;}
#sidebar .side-lista ul li a{
text-decoration: none;
color: #ffc051;
font-size: 14px;
text-shadow: #481d00 1px 1px 0;
}
#sidebar .side-lista ul li a:hover{
color: #b52841;
}
#sidebar .side-lista ul li ul{
}
#sidebar .side-lista ul li ul li{
margin-top: 12px;
margin-bottom: -10px;
margin-left: -7px;
}
#sidebar .side-tresc { float:left; padding: 33px 0 0 0; margin: 0 45px 0 0; color:#ffdda1; font: normal 12px Arial, Helvetica, sans-serif; line-height:1.4em; text-align: left; text-decoration: none;}Jestem pewien że dostrzegliście wieeele wiele więcej błędów, tak jak walidator w3c ale z nim nie umiem rozmawiać, więc nie obrażę się jeśli dopiszecie co tam trzeba poprawić
)
