Mam mianowicie taki problem
Przedstawię jak wygląd to w dreamvawerze
http://img148.imageshack.us/img148/3356/beznazwy1bw.jpg
Chciałbym tak zaprogramować guziki takie jak strona główna kontakt itp aby otwierały stronę poniżej tam gdzie jest przykładowy tekst.
I nie wiem jak to zrobić proszę o pomoc bo dopiero uczę się stosować styl css.
Z góry dziekuję za pomoc i wskazówki
Oto kod jaki zastosowałem dla index HTML
Kod: Zaznacz cały
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta http-equiv="Reply-to" content="" />
<meta name="Description" content="opis strony" />
<meta name="keywords" content="słowa kluczowe" />
<meta name="Author" content="Lucas" />
<meta name="Robots" content="ALL" />
<meta name="revisit-after" content="10" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="pds">
<div><img src="images/t1.jpg" alt="" /></div>
<div><a href="#oferta"><img src="images/t2.jpg" alt="" border="0" /></a></div>
<div><img src="images/t3.jpg" alt="" border="0" usemap="#menu" />
<map name="menu" id="menu">
<area shape="rect" coords="23,2,164,33" href="#glowna" alt="" />
<area shape="rect" coords="171,3,315,33" href="#opis" alt="" />
<area shape="rect" coords="321,4,462,33" href="#oferta" alt="" />
<area shape="rect" coords="470,4,612,34" href="#referencje" alt="" />
<area shape="rect" coords="622,4,761,34" href="#kontakt" alt="" />
</map>
</div>
<div class="s">
<div class="right">
<div class="tekst">
<h1>Strona głowna</h1>
<p> Kilkunastoletnie doświadczenie na rynku budowlanym jest gwarancją bezpieczeństwa i satysfakcji Naszych Klientów. .................................................................. ....................................................................</p>
<p>historia..............................................................
.........................................................................
.........................................................................
.........................................................................</p>
<p>przykładowy tekst ..................................................
........................................................................
.......................................................................
.......................................................................</p>
<p>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="stopka"><img src="images/stopka.jpg" alt="" /></div>
</div>
</body>
</html>
Kod: Zaznacz cały
/* CSS Document */
body{
margin:0;
padding:0;
background:#3B4245;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.pds{
width:782px;
margin:0 auto;
position:relative;
}
.left{
float:left;
width:234px;
}
.l-tekst{
font-size:11px;
color:#CCCCCC;
padding:5px 20px 5px 40px;
}
h1{
font-size:14px;
font-weight:bold;
text-align:right;
padding-right:10px;
color:#FFCC00;
}
.right{
float:left;
width:782px;
background:url(images/s2.jpg) no-repeat;
}
.s{
background:url(images/tlo.jpg);
height:100%;
}
.tekst{
font-size:12px;
padding:25px 35px 10px 25px;
color:#999D9F;
}
a{
color:#fff;
}