Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów › Technologie internetowe - tworzenie stron WWW › Początkujący webmaster v
szkielet

Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Tryb drzewa
szkielet
_mlody_ Offline
Member
***
Liczba postów: 53
Liczba wątków: 11
Dołączył: 21-10-2010
Reputacja: 0
#1
25-10-2010, 19:26 (Ten post był ostatnio modyfikowany: 25-10-2010, 19:27 przez _mlody_.)
Witam,
podzielilem sobie szkielet stronki na 3 czesci.. naglowek, tresc i stopka.
Problem w tym, ze tresc jako <div id="tresc"> ma w sobie kilka innych divow, ktorych nie chce jak by wziac w srodek siebie. Musi byc cos z wysokoscia bo div tresc widnieje tylko jako cienki poziomy paseczek. Nie chce ustawiac sztywnej wysokosci diva poniewaz bedzie to uciazliwe podczas moderowania strony.. Chcialbym zeby wysokosc diva dopasowywala sie do jej tresci.. Pomozecie?
Szukaj
Odpowiedz
ixtab Offline
Senior Member
****
Liczba postów: 272
Liczba wątków: 0
Dołączył: 27-09-2010
Reputacja: 8
#2
25-10-2010, 19:33
Musisz pokazać kod, bo wysokość diva automatycznie dopasowuje się do ilości treści jeśli nie ma podanego parametru height, więc coś skopałeś
Szukaj
Odpowiedz
_mlody_ Offline
Member
***
Liczba postów: 53
Liczba wątków: 11
Dołączył: 21-10-2010
Reputacja: 0
#3
25-10-2010, 19:51
html:

Kod:
<div id="tresc">      
<div id="lewaKolumna">
  <div class="lista">"    
   <ul>
   <li><h2><a class="jeden" href="jeden.html">jeden</h2></a></li>
   <li><h2><a class="dwa" href="dwa.html">dwa</a></li></h2>
   <li><h2><a class="trzy" href="trzy.html">trzy</a></li></h2>
   </ul>    
  </div> <!-- end lista div -->
</div> <!-- end lewaKolumna div -->
<div id="zawartosc">    
  <h3>zawartosc</h3>    
</div> <!-- end zawartosc div -->
</div> <!-- end tresc div -->

css:

Kod:
#tresc {
        background-image: url('bg-body-container.png');    
}
#tresc {
        background: url('bg-body-container.png') repeat-x scroll left bottom #FFFFFF;    
}
#lewaKolumna {
        border: 1px solid black;
        margin-top: 0px;    
        margin-bottom: 0px;    
        margin-right: 5px;    
        width: 240px;    
        float: left;
        background-color: #F3F3F3;    
}
.lista {
        width: 240px;        
}
.lista ul {
        list-style: none;
          margin: 10px;;    
        padding: 10px;    
}
.lista ul li {
        font-size: 16px;
        font-family: verdana, geneva, sans-serif;  
                            
}
.lista ul li a.jeden {
        background-image: url('gif2/jeden.gif');
        background-repeat: no-repeat;
        background-position: center left;
        padding-left: 50px;  
          padding-top: 10px;
          padding-bottom: 10px;        
        text-decoration: none;                        
}
.lista ul li a.dwa {
        background-image: url('gif2/dwa.gif');
        background-repeat: no-repeat;
        background-position: center left;
        padding-left: 50px;  
          padding-top: 10px;
          padding-bottom: 10px;        
         text-decoration: none;    
                              
}
.lista ul li a.trzy {
        background-image: url('gif2/trzy.gif');
        background-repeat: no-repeat;
        background-position: center left;
        padding-left: 50px;  
          padding-top: 10px;
          padding-bottom: 10px;        
        text-decoration: none;  
}
#zawartosc {
        border: 1px solid black;
        margin-top: 10px;    
        margin-bottom: 10px;
        margin-left: 5px;    
        width: 700px;
        float: left;              
}
Szukaj
Odpowiedz
ixtab Offline
Senior Member
****
Liczba postów: 272
Liczba wątków: 0
Dołączył: 27-09-2010
Reputacja: 8
#4
25-10-2010, 20:53
masz dwa razy zadeklarowany background dla #tresc. Wyrzuć jeden i dopisz do tego, który zostawiasz: overflow:hidden;
Szukaj
Odpowiedz
_mlody_ Offline
Member
***
Liczba postów: 53
Liczba wątków: 11
Dołączył: 21-10-2010
Reputacja: 0
#5
25-10-2010, 21:09
a czy moglby mi ktos napisac taki prosty szkielet?
Bo tu tkwi sedno.. zapominam o jakims szczegole i przez to rozsypuje mi sie div nr 2 i nie trzyma diva 3 i 4. kolory nie maja znaczenia chodzi o sam uklad.

tutaj schemat:
http://zapodaj.net/8ab64c8ae929.jpg.html

najlepiej html i css bo nie wiem gdzie robie blad.
Szukaj
Odpowiedz
ixtab Offline
Senior Member
****
Liczba postów: 272
Liczba wątków: 0
Dołączył: 27-09-2010
Reputacja: 8
#6
25-10-2010, 21:16
wrzuć pod body div i przed końcem body go zamknij, bo póki co masz trzy divy kształtujące szkielet, a piszesz o czterech...
Szukaj
Odpowiedz
_mlody_ Offline
Member
***
Liczba postów: 53
Liczba wątków: 11
Dołączył: 21-10-2010
Reputacja: 0
#7
25-10-2010, 21:21
moze inaczej.. probowalem zrobic to co jest w powyzszym linku..

html:

Kod:
<body>
            
<div id="czesc-druga">
<div id="srodek">
rrrr
  <div id="lewaKolumna">
   <div class="lista">
     <ul>
      <li><a class="jeden" href="jeden.html">jeden</a></li>
      <li><a class="dwa" href="jeden.html">dwa</a></li>
      <li><a class="trzy" href="jeden.html">trzy</a></li>
      <li><a class="cztery" href="jeden.html">cztery</a></li>
     </ul>    
    </div> <!-- end lista div -->
  </div> <!-- end lewaKolumna div -->
  <div id="tresc">
   siemano    
  </div> <!-- end tresc div -->
</div> <!-- end srodek div -->
</div> <!-- end czesc-druga div -->            

</body>

css:

Kod:
div {
}
#czesc-druga {
        background-color: #FFF;
}
#srodek {
        background-color: grey;
          border: 1px solid black;
          width: 970px;
}
#lewaKolumna {
        background-color: white;
          border: 1px solid black;
          width: 240px;
          float: left;
}
.lista {
        width: 240px;
}
.lista ul {
        list-style: none;
          margin: 10px;
}
.lista ul li {
        font-size: 16px;
          font-family: verdana, geneva, sans-serif;    
}
.lista ul li a.jeden {
        padding-left: 20px;
          text-decoration: none;
}
.lista ul li a.dwa {
        padding-left: 20px;
          text-decoration: none;
}
.lista ul li a.trzy {
        padding-left: 20px;
          text-decoration: none;
}
.lista ul li a.cztery {
        padding-left: 20px;
          text-decoration: none;
}
#tresc {
        background-color: red;
          border: 1px solid black;
          width: 720px;
          float: right;
}

niestety nie wyszlo tak jak na schemacie.. Poprawisz?
Szukaj
Odpowiedz
ixtab Offline
Senior Member
****
Liczba postów: 272
Liczba wątków: 0
Dołączył: 27-09-2010
Reputacja: 8
#8
25-10-2010, 21:27
Kod:
div {
}
#czesc-druga {
        background-color: #FFF;
        overflow:hidden;
        margin:0 auto;
}
#srodek {
        background-color: grey;
          border: 1px solid black;
          width: 970px;
          margin:0 auto;
}
#lewaKolumna {
        background-color: white;
          border: 1px solid black;
          width: 240px;
          float: left;
}
.lista {
        width: 240px;
}
.lista ul {
        list-style: none;
          margin: 10px;
}
.lista ul li {
        font-size: 16px;
          font-family: verdana, geneva, sans-serif;    
}
.lista ul li a.jeden {
        padding-left: 20px;
          text-decoration: none;
}
.lista ul li a.dwa {
        padding-left: 20px;
          text-decoration: none;
}
.lista ul li a.trzy {
        padding-left: 20px;
          text-decoration: none;
}
.lista ul li a.cztery {
        padding-left: 20px;
          text-decoration: none;
}
#tresc {
        background-color: red;
          border: 1px solid black;
          width: 720px;
          float: right;
}
Szukaj
Odpowiedz
_mlody_ Offline
Member
***
Liczba postów: 53
Liczba wątków: 11
Dołączył: 21-10-2010
Reputacja: 0
#9
25-10-2010, 21:41
wszystko spoko tylko zobacz jak to wyglada:
http://zapodaj.net/342eeb31da78.jpg.html

a chodzi o to zeby szary div "srodek" trzymal w sobie czeronego diva "tresc" i bialego "lewaKolumna" .
Szukaj
Odpowiedz
ixtab Offline
Senior Member
****
Liczba postów: 272
Liczba wątków: 0
Dołączył: 27-09-2010
Reputacja: 8
#10
25-10-2010, 21:43
no to dorzuć jeszcze w css do #srodek overflow:hidden;
Szukaj
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  szkielet kodu Emilka 2 2,534 05-08-2010, 23:11
Ostatni post: Kartofelek
  [POMOC] Przy wdrążeniu newsów w nowy szkielet KoZZZak 5 3,653 28-03-2010, 14:37
Ostatni post: KowR

Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości
Sponsorzy i przyjaciele
SeoHost.pl