|
Ocena wątku:
- 0 głosów - średnia: 0
- 1
- 2
- 3
- 4
- 5
|
margines dolny
|
Liczba postów: 16
Liczba wątków: 8
Dołączył: 06-07-2009
Reputacja:
0
09-08-2009, 20:57
(Ten post był ostatnio modyfikowany: 09-08-2009, 21:16 przez Labsta.com.)
witam,
napotkałem na następujący problem: umieściłem treść strony w <div id>
jak polecił rodi:
http://www.webmastertalk.pl/uklad-strony-t-1905.html
tło jest dodane jako obraz. Przy dodaniu każdego kolejnego elementu na stronę, zwiększa się dolny margines:
http://fotografia.neteasy.pl/indexx.html
a po dodaniu linii tekstu:
http://fotografia.neteasy.pl/
kolejne <div> powiększają ten margines i ostatecznie jest większy niż strona.
CSS
Kod: body {
margin:0px;
padding:0px;
text-align:center;
}
#kontener {
margin:0px auto;
padding:0px;
width:900px;
text-align:left;
}
#k {position: relative; left: -5.7cm; top: -17.85cm;}
HTML
Kod: </head>
<body>
<div id="kontener">
<img src="images/meble5.jpg">
<div id="k"><b>
<span class="glatzer">
GLATZER<br>
</span>
Nowoczesne wzornictwo w aranżacji wnętrz.
</b>
</div>
i czemu to tak jest  ?
Liczba postów: 682
Liczba wątków: 9
Dołączył: 03-03-2009
Reputacja:
18
Użyj walidatora popraw 70 błędów m.in. pozamykaj divy.
Dlaczego pozycję podajesz w cm?
Myślę, że nie potrzeba tu pozycjonowania absolutnego. Position relative oznacza element rodzica, a nie dziecka.
Ogólnie posprzątaj to poprawimy.
Liczba postów: 16
Liczba wątków: 8
Dołączył: 06-07-2009
Reputacja:
0
10-08-2009, 01:31
(Ten post był ostatnio modyfikowany: 10-08-2009, 02:06 przez Labsta.com.)
nie bardzo wiem co poprawić, uruchomiłem walidator ale pokazuje błedy których trudno się doszukać. kodu nie ma wiele, konkretnie tyle:
Kod: <?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="reply-to" content="Adres_e-mail" />
<meta name="generator" content="WebSite PRO 4.3" />
<meta name="author" content="Autor_dokumentu" />
<meta name="description" content="Opis" />
<link rel="stylesheet" href="images/glace.css" type="text/css" />
</head>
<body>
<div id="kontener" >
<img src="images/meble5.jpg">
</div>
<div id="k"><b>
<span class="glatzer">
GLATZER<br>
</span>
Nowoczesne wzornictwo w aranżacji wnętrz.
</b>
</div>
</body>
</html>
a w css jest relative. Ogólnie nie upieram się przy takiej konstrukcji kodu. Pasuje mi każdy który spowoduje ze strona wypośrodkuje się poprawnie, z tłem i resztą bez względu na boczny pasek. jesli jest lepsza opcja, tj z zastosowaniem innych tagów to chętnie poznam
Liczba postów: 9
Liczba wątków: 2
Dołączył: 09-07-2009
Reputacja:
0
10-08-2009, 01:49
(Ten post był ostatnio modyfikowany: 10-08-2009, 02:07 przez Labsta.com.)
poprawilem kod
Kod: <?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="reply-to" content="Adres_e-mail" />
<meta name="generator" content="WebSite PRO 4.3" />
<meta name="author" content="Autor_dokumentu" />
<meta name="description" content="Opis" />
<link rel="stylesheet" href="images/glace.css" type="text/css" />
<title>EDYTUJ</title>
</head>
<body>
<div id="kontener">
<img src="images/meble5.jpg" alt="#" />
</div>
<div id="k">
<b>
<span class="glatzer">
GLATZER<br />
</span>
Nowoczesne wzornictwo w aranżacji wnętrz.
</b>
</div>
</body>
</html>
</head>
<body>
<div id="kontener">
<img src="images/meble5.jpg" alt="#" />
</div>
<div id="k"><b>
<span class="glatzer">
GLATZER<br />
</span>
Nowoczesne wzornictwo w aranżacji wnętrz.
</b>
</div>
</body>
</html>
edytuj title
Liczba postów: 682
Liczba wątków: 9
Dołączył: 03-03-2009
Reputacja:
18
10-08-2009, 02:04
(Ten post był ostatnio modyfikowany: 10-08-2009, 02:16 przez Labsta.com.)
Więc tak:
-walidator pokazuje Ci linie w której jest błąd. Przykład nie:<img src="images/meble5.jpg"> tylko <img src="images/meble5.jpg" alt="opis obrazka" />
-źle masz pozamykane divy
-wklejasz kod, którego nie dotyczy problem
Pisz swój kod starannie, bo zginiesz. Nie używaj pozycjonowania absolutnego, jesli nie musisz. Poczytaj ten kurs http://kurs.browsehappy.pl/ gdyż popełniasz podstawowe błędy.
Zrób coś takiego:
Kod: <body>
<div id="kontener">
<div id="top"><h1>GLATZER<span>Nowoczesne wzornictwo w aranżacji wnętrz.</span></h1></div>
<div id="content"></div>
<div id="foot"></div>
</div>
</body>
css
Kod: body {
margin:0px;
padding:0px;
text-align:center;
}
#kontener {
background: url(images/meble5.jpg) no-repeat;
margin: 0px auto;
padding:0px;
width:900px;
text-align:left;
}
#top {
nadaj mu tu height
}
#top h1{
margin-top: wysokość topu/2;
}
#top h1 span {
display: block;
}
itd....
(Mogłem gdzieś się pomylić, bo piszę z "ręki")
P.S. Proszę formatuj kod w postach przy pomocy "code"
Liczba postów: 16
Liczba wątków: 8
Dołączył: 06-07-2009
Reputacja:
0
o co chodzi z tym pozycjonowaniem absolutnym? nigdzie go nie użyłem bo w przypadku kiedy kontener zmienia położenie względem przeglądarki reszta zostaje i wszystko się rozjeżdża. Czy może użyłem i o tym nie wiem?
zrobiłem już kilka stron ale bez auto marginesów
Liczba postów: 682
Liczba wątków: 9
Dołączył: 03-03-2009
Reputacja:
18
Pozycjonowanie absolutne jest złe, bo usuwa element z biegu dokumentu, czyli jak treść rozszerzy element tak pozycjonowany, to rodzić się nie rozciągnie. Poczytaj ten kurs co dałem link wyżej tam jest trochę na ten temat.
A absolutnego używałeś, co prawda nie wiem czemu jako relative (co nic nie daje, bo tylko oznacza pkt odniesienia dla absolute)
Przykład:
Kod: #k {position: relative; left: -5.7cm; top: -17.85cm;}
#b1 {position: relative; left: -8cm; top: -17.1cm;}
#b2 {position: relative; left: -5cm; top: -17.64cm;}
#klaw {position: relative; left: -8.5cm; top: -15cm;}
#klaw1 {position: relative; left: -8.5cm; top: -14.5cm;}
#klaw2 {position: relative; left: -8.5cm; top: -14cm;}
#mapa {position: relative; left: 8cm; top: -27.6cm;}
#menu {position: relative; left: -5cm; top: -26cm;}
#teksty {position: relative; left: 4cm; top: -25cm;}
#footer {position: relative; left: 5cm; top: 2cm;}
Liczba postów: 16
Liczba wątków: 8
Dołączył: 06-07-2009
Reputacja:
0
to jak byś polecał to zrobić? ja planowałem tak: body i konteiner z automatycznym marginesem do okna przeglądarki a wszystkie elementy ułozone względem konteinera, czyli relative ale każdy osobno i bez powiązań miedzy sobą.
i wyszło co wyszło
Liczba postów: 682
Liczba wątków: 9
Dołączył: 03-03-2009
Reputacja:
18
10-08-2009, 03:04
(Ten post był ostatnio modyfikowany: 10-08-2009, 03:15 przez Labsta.com.)
No napisałem Ci roziwązanie html i css 4 posty wyżej, wystarczy je rozbudować 
Ogólnie pozycje aboslutne, zamieniasz na float, margin, padding, line-height, bo ogólnie cała filozofia polega właśnie na tym że elementy zależą od siebie (jeden roziciąga drugi, przesuwa ten poniżej itd). Może to się wydawać uciążliwe na początku, jednak przy odpowiedniej wprawie jest całkiem sensowne i tak zostało wymyślone. Strona internetowa jest rodzajem dokumentu tekstowego (tak jak w wordzie), a nie rodzajem grafiki (tak jak we flashu), czyli ciągiem zależnych elementów, a nie porozrzucanych boksów.
Edit:
Sprawdź tan art, choć dość stary może trochę rozjaśni mroki http://www.fox.com.pl/articles/web/layout.php
Liczba postów: 16
Liczba wątków: 8
Dołączył: 06-07-2009
Reputacja:
0
10-08-2009, 20:34
(Ten post był ostatnio modyfikowany: 10-08-2009, 21:28 przez wilq man.)
udało się wpisując:
#logo {position: relative; margin-left: 6cm; margin-top: -22cm;}
zamiast
#logo {position: relative; left: 6cm; top: -22cm;}
dzięki
|
Użytkownicy przeglądający ten wątek:
|
|
|
Sponsorzy i przyjaciele
|
|
|
