MozillaPL.org - polskie centrum Mozilli

Główne menu:

Problem z blokami (div)

Jak tworzyć strony WWW zgodnie ze standardami

Moderator: Pomocy?!

Problem z blokami (div)

Postautor: naruto128 » 13 lipca 2010, 17:24

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.10) Gecko/20100504 Firefox/3.5.10 ( .NET CLR 3.5.30729)

Mam pewien problem odnoście bloków.
Jestem dopiero początkujący i chciałem stworzyć na początek ogólny zarys strony (rozmieszczenie elementów) i napotkałem pewien irytujący problem... :).

W bloku "tresc" znajduja się luki (nad tytułem i tekstem poniżej) należace do "tresci", a powinny do blokow "title" i "text".
Trochę namieszałem :D. Najlepiej skopiujcie kod i sami zobaczcie.
Bardzo proszę Was o pomoc.

Kod: Zaznacz cały
html, body{
color: #FFFFFF;
background-color: #000000;
margin: 0;
padding: 0;     
}
#podstawa{
overflow: auto;
background-color: #000000;
margin: 10px 12% 20px 12%;
}
#header{
background-color: #815200;
overflow: hidden;
width: 100%;
}
#menu{
float: left;
background-color: #000000;
width: 24%;
overflow: hidden;
border-style: solid;
border-width: 2px;
border-color: #888888;
margin-top: 10px;
}
#tresc{
background-color: #000000;
float: left;
width: 49%;
overflow: hidden;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
}
#news{
border-style: solid;
border-width: 2px;
border-color: #888888;
overflow: hidden;
}
#news .title{
text-align: center;
padding: 0;
background-color: #444444;
}
#news .text{
padding: 5px 5px 5px 5px;
background-color: #333333;
}
#pseudomenu{
background-color: #000000;
float: right;
overflow: hidden;
width: 24%;
border-style: solid;
border-width: 2px;
border-color: #888888;
margin-top: 10px;
}
#stopka{
clear: both;
background-color: #444444;
overflow: hidden;
width: 100%;
margin-top: 10px;
}
h1{
font-family: arial, "New Times Roman", verdana;
font-size: 60px;
text-align: center;
margin-top: 6px;
margin-bottom: 6px;
}
h2{
font-family: arial, "New Times Roman", verdana;
font-size: 50px;
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
}
h3{
font-family: arial, "New Times Roman", verdana;
font-size: 40px;
text-align: center; 
margin-top: 5px;
margin-bottom: 5px;
}
h4{
font-family: arial, "New Times Roman", verdana;
font-size: 30px;   
margin-top: 5px;
margin-bottom: 5px;
}
h5{
font-family: arial, "New Times Roman", verdana;
font-size: 20px;   
margin-top: 4px;
margin-bottom: 4px;
}
h6{
font-family: arial, "New Times Roman", verdana;
font-size: 10px;   
margin-top: 2px;
margin-bottom: 2px;
}
p{
font-size: 15px;
font-family: arial, "New Times Roman", verdana;
}


Kod: Zaznacz cały
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="cs" lang="cs">
 <head><!--  ščřžýŠČŘŽÝ -->
  <meta name="generator" content="PSPad editor, www.pspad.com" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
  <link rel="Stylesheet" type="text/css" href="Ogolnie.css" />
 
  <title>Szablon Przykładowy</title>
 
 </head>
 <body>
 
 <div id = "podstawa">
 
 <div id = "header">
 <h1>Hej</h1>
 </div>
 <div id = "menu">
 <h1>Hejka</h1>
 </div>
 <div id = "tresc">
 
 <div id= "news">
 <div class = "title">
 <h2>Jak się masz? :)</h2>
 </div>
 <div class = "text">
 Przykładowy news.
 </div>
 </div>
 
 </div>
 <div id = "pseudomenu">
 <h1>:)</h1>
 </div>
 <div id ="stopka">
 <h1>Koniec</h1>
 </div>
 
 </div>
       
 </body>
</html>
naruto128
 
Posty: 5
Z nami od: 13 lipca 2010, 17:10

Odp: Problem z blokami (div)

Postautor: Mateusz SSJ8 » 14 lipca 2010, 09:26

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl-PL; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6

Rozumiem, że robiłeś to tak, że Wordem też to można edytować. Ale problem jest tym, że nie rozumiesz składni CSS. Dowodem jest to, że powiedziałeś "klasa", a użyłeś "id". Zamiast
Kod: Zaznacz cały
#tresc {
styl
}
powinieneś napisać
Kod: Zaznacz cały
.tresc
.

Znajdź zatem wszystkie "#costam" i zmień na ".costam". To powinno rozwiązać problem. A jeśli nie, to przez 10 minut kopię piłkę na dworze.
Mateusz SSJ8
 

Odp: Problem z blokami (div)

Postautor: Mateusz SSJ8 » 14 lipca 2010, 09:29

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl-PL; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6

Jeśli chcesz zachować ID, to musisz określić jeszcze margin-bottom, bo o tym marginesie zapomniałeś.
Mateusz SSJ8
 

Odp: Problem z blokami (div)

Postautor: naruto128 » 14 lipca 2010, 09:55

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.10) Gecko/20100504 Firefox/3.5.10 ( .NET CLR 3.5.30729)

Zmieniłem wszystkie # na . i wszystkie id na class, lecz nadal występuje ten sam problem :(. Nie wiem czy ja was źle zrozumiałem, czy jest inny problem.
naruto128
 
Posty: 5
Z nami od: 13 lipca 2010, 17:10

Odp: Problem z blokami (div)

Postautor: Tomek » 14 lipca 2010, 11:21

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6

@Mateusz - po jaką cholerę edytować coś wordem jeśli on używa pspad - jednego z ciekawszych edytorów.
Mateusz SSj8 pisze:problem jest tym, że nie rozumiesz składni CSS. Dowodem jest to, że powiedziałeś "klasa", a użyłeś "id".

A co to ma do problemu? Otóż absolutnie nic - idź kopać piłkę.
naruto128 użył prawidłowo zarówno klas jak i identyfikatorów. Twoja porada nie zmienia niczego, jemu zaś może utrudnić późniejszą wędrówkę po drzewie DOM dokumentu.
Rozwiązanie na szybko (coś jest imo z tymi float i overflow namieszane) - nadanie margin-top:-5px dla klas #news .title i #news .text
"Mym sojusznikiem jest Moc, i potężnym sojusznikiem ona jest." -- Mistrz Yoda
Tomek
Moderator
 
Posty: 9041
Z nami od: 19 sierpnia 2004, 06:52

Odp: Problem z blokami (div)

Postautor: naruto128 » 14 lipca 2010, 12:24

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.10) Gecko/20100504 Firefox/3.5.10 ( .NET CLR 3.5.30729)

Próbowałem dodać margin i padding różnego rodzaju, kombinowałem troche z overflow i nic :( Floaty są chyba dobre, ponieważ widziałem przed chwilą w kursie CSSa takie ułożenie. Ogólnie więc mówiąc nie am pojęcia co jest źle :D
naruto128
 
Posty: 5
Z nami od: 13 lipca 2010, 17:10

Odp: Problem z blokami (div)

Postautor: Tomek » 14 lipca 2010, 12:29

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6

Dostałeś już rozwiązanie. U mnie po zastosowaniu ujemnych marginesów te luki zniknęły. No chyba że chodzi o inne luki.
"Mym sojusznikiem jest Moc, i potężnym sojusznikiem ona jest." -- Mistrz Yoda
Tomek
Moderator
 
Posty: 9041
Z nami od: 19 sierpnia 2004, 06:52

Odp: Problem z blokami (div)

Postautor: naruto128 » 14 lipca 2010, 13:06

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.10) Gecko/20100504 Firefox/3.5.10 ( .NET CLR 3.5.30729)

Sory jestem idiotą ;>. Przeczytałem 5px zamiast -5. (łatwo minus przeoczyć)
PS. Nie wiedziałem, że mogą być ujemne marginesy :)
Dzięki wszystkim za pomoc, w szczególności tobie Tomek :D
naruto128
 
Posty: 5
Z nami od: 13 lipca 2010, 17:10

Odp: Problem z blokami (div)

Postautor: Tomek » 14 lipca 2010, 13:12

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6

Przy okazji - korzystanie z xhtml 1.1 nie jest dobrym rozwiązaniem - niektóre wersje IE nie dają sobie z nim rady i zaczniesz napotykać kolejne problemy. Xhtml 1.0 wystarczy w zupełności.
"Mym sojusznikiem jest Moc, i potężnym sojusznikiem ona jest." -- Mistrz Yoda
Tomek
Moderator
 
Posty: 9041
Z nami od: 19 sierpnia 2004, 06:52

Odp: Problem z blokami (div)

Postautor: naruto128 » 14 lipca 2010, 13:17

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.10) Gecko/20100504 Firefox/3.5.10 ( .NET CLR 3.5.30729)

Dzięki. :)
Przy okazji dodam, że odkryłem nagle powód tej pustej przestrzeni.
W h1..6 były ustawione margin-top i margin button wartość (od 3 do 7). Wystarczyło tylko napisać #news h1{margin-top: 0; margin-bottom: 0;} :D
naruto128
 
Posty: 5
Z nami od: 13 lipca 2010, 17:10

Odp: Problem z blokami (div)

Postautor: Tomek » 14 lipca 2010, 13:57

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6

Z tego co kojarzę to w rekomendacji marginesy mogą być ujemne, padding nie...
"Mym sojusznikiem jest Moc, i potężnym sojusznikiem ona jest." -- Mistrz Yoda
Tomek
Moderator
 
Posty: 9041
Z nami od: 19 sierpnia 2004, 06:52


Wróć do Tworzenie stron WWW

Kto jest online

Zarejestrowani użytkownicy: dexter

Przejdź do powiązanej strony

Nawigacja:

Stopka: