Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Layout - cięcie
Forum PHP.pl > Forum > Przedszkole
kamil_lk
Witam.
Mam pewien problem. Stworzyłem sobie layout w photoshopie. pociąłem sobie logo, zacząłem składać na divach za pomocą css, ale niezbyt mi to wychodzi.
Mógłby mi ktoś pociąć samo logo tak aby napisy były linkami, a napis MUAY THAI odprowadzał do strony głównej?
Poniżej zamieszczam całego laya, proszę jedynie o logo, aby było wykonane na divach z CSS.

Lion_87
eee to może pokaż kod jak Ty to próbowałeś zrobić.
kamil_lk
index.html
  1. <div id="top">
  2. <div id="ODSTEP1"><img src="grafika/odstep1.jpg" width="9" height="16" border="0" /></div>
  3. <div id="GLOWNA"><img src="grafika/glowna.jpg" alt="główna" width="41" height="16" border="0" /></div>
  4. <div id="ODSTEP2"><img src="grafika/odstep.jpg" width="8" height="16" border="0" /></div>
  5. <div id="FORUM"><img src="grafika/forum.jpg" alt="forum" width="35" height="16" border="0" /></div>
  6. <div id="ODSTEP3"><img src="grafika/odstep3.jpg" width="9" height="16" border="0" /></div>
  7. <div id="FAQ"><img src="grafika/faq.jpg" alt="faq" width="20" height="16" border="0" /></div>
  8. <div id="ODSTEP4"><img src="grafika/odstep.jpg" width="8" height="16" border="0" /></div>
  9. <div id="KONTAKT"><img src="grafika/kontakt.jpg" alt="kontakt" width="47" height="16" border="0" /></div>
  10. <div id="ODSTEP5"><img src="grafika/odstep2.jpg" width="818" height="16" border="0" /></div>
  11. <div id="ODSTEP6"><img src="grafika/1.jpg" width="84" height="164" border="0" /></div>
  12. <div id="MUAYTHAI"><img src="grafika/muaythai.jpg" width="451" height="164" border="0" /></div>
  13. <div id="KLATKA"><img src="grafika/klatka.jpg" width="460" height="164" border="0" /></div>
  14. </div>


style.css
  1. body {
  2. background-color: #000000;
  3. color: #000;
  4. margin-left: 50;
  5. padding: 0;
  6. }
  7.  
  8. #ODSTEP1, #ODSTEP2, #ODSTEP3, #ODSTEP4, #GLOWNA, #FORUM, #FAQ, #KONTAKT {
  9. float: left;
  10. overflow: hidden;
  11. margin: 0;
  12. padding: 0;
  13. }
  14.  
  15.  
  16. #ODSTEP6, #MUAYTHAI, #KLATKA {
  17. float: left;
  18. overflow: hidden;
  19. margin: 0;
  20. padding: 0;
  21. }
Lion_87
A to Twój kod czy wygenerowany z programu? o.O

No prosciej bylo by
  1. <div id="top">
  2. <div id="linki">GLOWNA FORUM FAQ KONTAKT</div>
  3. </div>

dla #top dajesz width , height i background-image

lub dzieląc topa na 2 cześci
  1. <div id="top1">GLOWNA FORUM FAQ KONTAKT</div>
  2. <div id="top2"></div>
kamil_lk
mój winksmiley.jpg Dopiero się uczę i wzorowałem się na gotowym szablonie i dlatego nie zabardzo wiem o co Ci chodzi..
Lion_87
Cytat
<div id="top">
<div id="linki">GLOWNA FORUM FAQ KONTAKT</div>
</div>


Tu masz DIV #TOP czyli cały ten top(nie wiem ile on tam ma powiedzmy 750px x 100px) i w tym divie jest drugi DIV #LINKI z tymi linkami

  1. #TOP {
  2. margin: 0px auto;
  3. width:750px;
  4. height;100px;
  5. background:url(top.jpg);
  6. }


Cytat
<div id="top1">GLOWNA FORUM FAQ KONTAKT</div>
<div id="top2"></div>


LUB dzielisz tego TOPa na 2 częsci
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.