5
« Įrašytas: 2011-07-28 11:18:45 am »
Iškilo problema, kad kuo daugiau kūriau dizaino tuo labiau pradėjo platėti bg į dešine puse.
(susigadino bg kokybė darant foto).
Ir kai yra visas dizaina, galima slenkti dizaina į dešinę pusę kaip yra foto.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>cLife @ 2011</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="#">
<Div id="header"></Div>
</a>
<div id="meniu">
<ul>
<li><a href="#">Naujienos</a></li>
<li><a href="#">Paslaugos</a></li>
<li><a href="#">Diskusijos</a></li>
<li><a href="#">Kontaktai</a></li>
<li><a href="#">Serverio informacija</a></li>
</ul>
</div>
<div id="informacija">
<a href="skype:crime-life.lt?chat" target="_self"><img src="images/skype.png" />
</div>
<div id="you"><a href="http://www.youtube.com/crimelifevideo" target="_blank"><img src="images/youtube.png" /></div>
<div id="face"><a href="http://www.facebook.com/pages/Crime-Lifelt/224092477623741?sk=wall" target="_blank"><img src="images/facebook.png" /></div>
</body>
</html>
CSS:
/* CSS Document */
body {
background-image: url(images/bg.png);
background-repeat: repeat-x;
}
#header {
position:relative;
width:100%;
margin:-8px;
padding:25px;
height:154px;
background-image: url(images/header.png);
background-repeat: no-repeat;
}
a { text-decoration:none; }
#meniu {
background-image: url(images/meniu_dalis.png);
background-repeat: repeat-x;
widht:100%;
position:relative;
top:-46px;
margin:-8px;
padding:25px;
height:29px;
}
#meniu li {
display:inline;
color:#ffffff;
}
#meniu li a {
display:block;
float:left;
color:#ffffff;
font-family:times;
font-size:17px;
padding: 58px 44px 0 10px;
position:relative;
top:-92px;
left:-30px;
}
#meniu li a:hover {
color:#e3e3e3;
}
#informacija {
background-image: url(images/informacijos_langas.png);
widht:350px;
height:150px;
background-repeat:no-repeat;
position:relative;
left:685px;
top:-170px;
}
#informacija img {
widht:62px;
position:relative;
left:-710px;
top:30px;
height:82px;
background-repeat:no-repeat;
position:relative;
}
#face {
widht:62px;
height:82px;
position:relative;
top:-370px;
left:815px;
}
#you {
widht:62px;
height:82px;
position:relative;
top:-288px;
left:915px;
}