[div/css]

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
Fajta
Posty: 2
Rejestracja: wt mar 13, 2007 12:10 pm

[div/css]

Post autor: Fajta »

Witam!
Uczę się css'a i jak zwykle przyszwędałem się po jakąś radę. Otóż, chcę zrobić narazie szkielet za pomocą div'ów, w które potem wstawię obrazki jako tło i będzie gut. Tu macie link do schematu tego:
http://preview.tinyurl.com/3bt625
Tak to niby ma wyglądać robione warstwowo, ale jak sprawdzałem z z-index to niestety nie działa na divy (doctype xhtml 1.1), więc odrzuciłem warstwowość strony i pomyślałem o po prostu boxach...
I sukces! Niby wszystko działa, ale jednak, np. patrzać na box po prawej, który to ma być gradientem albo nawet grafiką, jest między nim a krawędzią ekranu/przeglądarki sporo miejsca (na oko może z 10px). Próbowałem cellspacing, margin,cellpadding i nic, dalej jest ten niby margines.
http://preview.tinyurl.com/29ypsn
Tak to mniej więcej wygląda z kolorowymi divami żeby było widać ich dokładne granice.
Tu macie kod:

Kod: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html><head><title>xhtml & css test2</title>
<style type="text/css">
#idzero{
width:800px; 
height:100%; 
background-color:#EEEEEE; 
cellpadding:10px; 

margin:0px;}

#idone{
  background-color:#DDDDDD; 
  width:300px; 
  height: 250px; 

  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin:auto;}

#idtwo{
background-color:#000000; 
width:200px; height: 220px; 
color:#FFFFFF; }

#idthree{
background-color:#CCCCCC; 
height:300px; 
width:100px; 
float:right;}

#idfour{
background-color:#CCCCCC; 
height:500px; width:100px; 
float:left; 
margin:0; 

cellspacing:0}
</style>
</head>
<body>
<div id="idthree"> </div>

<div id="idone">Na na na na na na
	<div id="idtwo">Ha ha ha ha ha ha</div>
</div>
<div id="idfour"> </div>
</body></html>
Dzięki!
koziolek
Przelotem
Przelotem
Posty: 387
Rejestracja: sob paź 21, 2006 10:07 pm
Kontakt:

Re: [div/css]

Post autor: koziolek »

Zacznij od wrzucenia na samym początku arkusza stylów :

Kod: Zaznacz cały

body{font-size:62.5%}
html,body,form,ul,ol,dl,h1,h2,h3,h4,h5,h6,p,pre,blockquote{margin:0;padding:0}
th,td{font-size:1em}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:1em}
p{margin-bottom:1ex}
ul{list-style-type:none}
.lar ul,.bar ul,ul.comment,ul.forum{margin-left:25px;list-style-type:disc}
address{font-style:normal} 
.clearfix:after{content:".";display:block;height:0;line-height:0;clear:both;visibility:hidden}
.clearfix{display:inline-table}
/* Hides from IE-mac \*/
* html .clearfix{height:1%}
.clearfix{display:block}
/* End hide from IE-mac */
label{cursor:pointer;cursor:hand}
Powinno pomóc na wiele problemów :)
Fajta
Posty: 2
Rejestracja: wt mar 13, 2007 12:10 pm

Re: [div/css]

Post autor: Fajta »

Dzięki! Tylko teraz muszę wyizolować ten magic, który właśnie mi tak ładnie i dobrze robi, reszta w sumie to już się zobaczy w przyszłości.

ta! To:

Kod: Zaznacz cały

body{margin:0;padding:0}
Jak ja mogłem takie coś pominąć? No, tak czy siak dzięki wielkie, teraz już nie mam żadnych przeszkód do stworzenia layout'u.
koziolek
Przelotem
Przelotem
Posty: 387
Rejestracja: sob paź 21, 2006 10:07 pm
Kontakt:

Re: [div/css]

Post autor: koziolek »

Reszta też jest dość ważna ponieważ pozwala "wyzerować" przeglądarkę.
ODPOWIEDZ