Potrzebuje pomocy mam do zrobienie w notepad+++ za pomocą div i css taka stronę na środku jest nazwa strony w jakimś kolorowym prostokącie. Po lewej stronie są linki, które po najechaniu myszka zmieniają kolor coś w tym stylu. Pod tymi linkami są aktualności i niusy 2 pary. A na środku jest np: 1 tekst jest opisane potem 2 i 3 Potrzebuje to jak najszybciej.
" Life is not a problem to be solved but a reality to be experienced! "
© Copyright 2013 - 2024 KUDO.TIPS - All rights reserved.
Zgodnie z życzeniem autora zrobilem coś na podstawie tego szablonu: http://php.miastko.net/25102012/
KOD:::
Plik index.html ( wklej to do notatnika i zapisz jako index.html )
<!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>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pl" />
</head>
<body>
<div class="kontener">
<div class="baner">
</div>
<div class="tresc">
<div class="left">
<div class="nawigacja">
<p style="font-weight:bold; font-size:17px;" class="menu_akapit">
<img src="przycisk.jpg" height="17px" width="12px" alt="przycisk" class="img" />
Nawigacja</p>
<p>
<ul style="list-style:none;" class="lista">
<li class="przycisk"><span><a href="#">Odnośnik 1</a></span></li>
<li class="przycisk"><span><a href="#">Odnośnik 2</a></span></li>
<li class="przycisk"><span><a href="#">Odnośnik 3</a></span></li>
<li class="przycisk"><span><a href="#">Odnośnik 4</a></span></li>
<li class="przycisk"><span><a href="#">Odnośnik 5</a></span></li>
<li class="przycisk"><span><a href="#">Odnośnik 6</a></span></li>
</ul>
</p>
<p style="font-weight:bold; font-size:17px;" class="menu_akapit">
<img src="przycisk.jpg" height="17px" width="12px" alt="przycisk" class="img" />
Nowości</p>
<p class="polecane">
<span class="tre">Treść Treść Treść </span>
</p>
</div>
</div>
<div class="right">
<p class="artykul"><span class="tyt">Tytuł</span>
<br>
<span class="tre">Treść Treść Treść </span></p>
<p class="artykul">
<span class="tyt">Tytuł</span>
<br>
<span class="tre">Treść Treść Treść </span>
</p>
</div>
</div>
<p style=" font-weight:bold; color:white; text-align:center; font-size:15px;">© 2011; Stronę wykonał<br /> Michał S (SAKUwBarakuSHOW) </p>
</div>
</body>
</html>
KOD:::
Plik style.css ( wklej to do notatnika i zapisz jako style.css )
.kontener { height:auto; width:849px; margin-left:auto; margin-right:auto; }
.baner { background:red; height:166px; width:849px; background:url("baner.jpg")no-repeat;}
.tresc { /*background:green;*/ height:auto; width:849px;}
.left { background:white; float:left; height:auto; width:260px; }
.nawigacja { height:auto; width:auto;}
.img { position:relative; top:2px; }
.menu_akapit { position:relative; left:5px; }
.przycisk { background:url("menu.jpg")no-repeat; height:31px; width:227px; text-decoration:none; }
.lista { position:relative; right:34px;}
.right { background:white; float:left; height:auto; width:589px;}
.artykul { background:url("ramka.jpg")no-repeat; height:183px; width:579px; }
span { position:relative; left:12px; top:4px;}
a { text-decoration:none; color:#262626; }
body { background: #626262;font-family:Tahoma,Arial; }
.tyt { font-weight:bold; font-size:20px; text-align:left; font-family:Tahoma;}
.tre { font-size:15px; text-align:left; font-family:Arial;}
.polecane { background:url("ramka.jpg")no-repeat; height:102px; width:230px; position:relative; left:5px; }
Pobierz poniższe zdjęcia i wrzuć do katalogu z plikami index.html i style.css - > nie zmianiaj ich nazw !!!
Uwaga !
Zrobiłem mały błąd, treść podzieliłem na dwa bloki : left , right i teraz dwa bloki mają height:auto; i jak blok right ma więcej to jest dłuższy niż left i to ładnie nie wygląda. Dlatego proponuję left ustawiać ręcznie aby był długości right .
I jeszcze jedno , plik ramka.jpg możliwe że brzydko mi się wycieło i skróciło rogi ramki bo się trochę zlewa z tym białym. Jak chcesz to sobie lepiej wytnij :) Banerek oczywiście możesz sobie zmienić, ja nie umiem robić grafiki, zastosowałem elemety tego szablonu - > z tymże musiałem sam wycinać ... nie miałem tutaj wyciętych elementów i nie wszyskto mi się ładnie wycięło - używalem MWS SNAP 3.
W razie pytań : PW .