+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: margines dolny (/thread-margines-dolny)
margines dolny - wilq man - 09-08-2009
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;}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
?
RE: margines dolny - Labsta.com - 09-08-2009
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.
RE: margines dolny - wilq man - 10-08-2009
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>RE: margines dolny - Kostek - 10-08-2009
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>RE: margines dolny - Labsta.com - 10-08-2009
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>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;
}(Mogłem gdzieś się pomylić, bo piszę z "ręki")
P.S. Proszę formatuj kod w postach przy pomocy "code"
RE: margines dolny - wilq man - 10-08-2009
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
RE: margines dolny - Labsta.com - 10-08-2009
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;}RE: margines dolny - wilq man - 10-08-2009
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
RE: margines dolny - Labsta.com - 10-08-2009
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
RE: margines dolny - wilq man - 10-08-2009
udało się wpisując:
#logo {position: relative; margin-left: 6cm; margin-top: -22cm;}
zamiast
#logo {position: relative; left: 6cm; top: -22cm;}
dzięki