Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

3 kolumny - IE wygląda dobrze, FF prawa jest pod content'em

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

3 kolumny - IE wygląda dobrze, FF prawa jest pod content'em

Post 07.01.2008, 13:33:03

witam. oto kody, index.php i style.css

Na początku jednak chciałbym, zaznaczyć, że zależ mi na tym aby strona była na % a nie na px ponieważ chcę ją dostosować do każdej rozdzielczości (wiadomo, że teraz każdy ma większą rozdzielczość jednak pomyślałem, też o ludziach którzy mają małą rozdzielczość [np. słabowidzące osoby]).

index.php:

Kod: Zaznacz cały
<?php
echo '<?xml version="1.0" encoding="UTF-8"?>';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="Stylesheet" type="text/css" href="style.css" />
<title>Moja strona</title>
</head>
<body>
<div id="all">
   <div id="pasek_bialy">Góra</div>
   <div id="pasek_blekitny">Pasek błękitny</div>
<div id="lewy">lewy</div><div id="srodkowy"><div class="ciemny">Strona </div><div class="jasny">głowna</div><div class="odstep"></div>

Lorem ipsum dolor sit amet, lacus eu id aenean sem lorem pellentesque, massa accumsan nunc quis nec mauris. Vitae dui consequat, ante in eu, lobortis tortor commodo eget placerat nulla porta. Eum sapien, pellentesque sit nec libero feugiat, enim ridiculus sed. Tristique in nam, risus volutpat dolor ultrices, dolor quam hymenaeos pulvinar parturient ante, dui nec interdum. Et velit sed vel, eros a eleifend augue, dolor iaculis accumsan aenean, ullam commodo vel tellus pede eros. Est aut pretium, viverra tincidunt mauris facilisis, suspendisse egestas tellus mauris, nec netus tempor suscipit ac maecenas hendrerit. Pulvinar suscipit vel odio leo, tellus sed mi blandit magna egestas, ut elit, nulla varius veniam ac. Sed magnis, dignissim praesent quis velit quisque mauris potenti. Vehicula sagittis nulla, porta id urna eu, nascetur odio adipisci. Penatibus ut ut sagittis non amet. Nulla augue quis est ipsum eos tristique. Massa dictumst, dis quis scelerisque sodales amet, sit a nullam magna quis mauris, vitae a erat nullam feugiat, sapien tellus et donec.

Donec hymenaeos mattis elementum odio nulla conubia, egestas ante justo vehicula duis pellentesque, neque magna et varius elit blandit, vestibulum eu. Luctus magna. Metus vestibulum porttitor proin voluptatibus mauris potenti, lacinia consectetur commodo eros sit, amet imperdiet facilisi magna, nec venenatis laoreet. Litora bibendum viverra lacus metus tempor purus, pellentesque metus wisi. Accusantium curabitur lectus purus fringilla massa, felis ipsum dis. Ultrices elit maecenas cursus lectus enim, amet lobortis ligula morbi class, adipiscing maecenas cras sem proident quisque vehicula, eum pretium sed. Neque mollis, molestie orci euismod arcu, sed porta mauris id mi, proin pellentesque, sit volutpat laborum aliquam et maecenas suscipit. Mollis dui elit pellentesque ac mauris et.

Integer quis erat orci ut, id velit. Felis non, odio et parturient, ad vivamus a at, commodo nulla nunc neque architecto. Porttitor aliquet sed malesuada, sollicitudin aliquam, duis pharetra semper pharetra nascetur massa. Id minus sit egestas turpis. Etiam turpis malesuada bibendum. Metus tempor ut, nisl quis excepteur. Viverra vivamus nunc et in wisi, nec pretium arcu porta hendrerit, in dis. Vel commodo, diam elit in enim sit, duis iaculis, donec at penatibus in ut consectetuer, tortor nulla a. Litora tellus eget eu, dui tellus rhoncus libero et, sed dignissim ante at aut turpis et, convallis ipsum placerat sollicitudin magna duis ut. Lorem at hac, proin nostra turpis wisi ante, dis duis suspendisse massa nullam, lacinia neque magna erat aliquam sed, cursus semper. Mauris justo, mauris ante orci vitae vel, feugiat sociis id pellentesque mauris consectetuer ipsum, posuere cursus lacinia.

Lobortis ante felis dolor velit. Vel potenti, luctus omnis ut laoreet id duis, adipiscing necessitatibus eu laoreet velit vivamus. Est suscipit, suspendisse nunc ultrices hendrerit proin, suspendisse ligula quam magna euismod aliquid non. Volutpat a mattis odio excepturi, vestibulum et wisi lorem diam velit pede, accumsan pede, inceptos suspendisse magna at vestibulum tristique sed. Sunt eget mauris libero adipisicing, inceptos maecenas pede mi mi duis, justo dui.

</div>
   <div id="prawy">prawy</div>
   <div class="czysc"> </div>
   <div id="pasek_blekitny">asdasd</div>
</div>
</body>
</html>
<?
$koniec = microtime(); 
echo 'Strona wygenerowana w '.($koniec - $start).' sekundy';
?>


style.css
Kod: Zaznacz cały
body{
   margin:0;
   padding: 0;
   background-color:#373737;
   font-family:Verdana;
   color:#6c6c6c;
   font-size:10px;
}
#all{
   background-color:#EAEAEA;
   width:70%;
   margin: 0 auto;
   height: auto;
}
#pasek_blekitny{
   background-color:#15AFEF;
   clear:both;
}

#pasek_bialy{
   background-color:#FFFFFF;
}

#blok{
   background-color:#EAEAEA;
}

div#lewy { width:20%; text-align: left; background-color:#EAEAEA; float:left;}
div#srodkowy { width:60%; text-align: left; background-color:#FFFFFF;float:left;padding:8px 8px 8px 8px;}
div#prawy { width:20%; text-align: left; background-color:#EAEAEA;float:right;clear:both;}

.ciemny{
   color:#6C6C6C;
   font-size:12px;
   font-family:Veranda;
   float:left;
}

.jasny{
   color:#089AD6;
   font-size:12px;
   font-family:Veranda;
}

.odstep{
   border-top-style: dashed;
   border-top-width:1px;
   margin-top: 9px;
   margin-bottom: 9px;
}

.czysc{
   clear:both;
}
Na stronie niczym kwejk znajdziesz śmieszne zdjęcia, różne zdjęcia i obrazki które Cie z pewnością rozbawią :)
bl4ck_b0x
Posty: 90
Dołączył(a): 11.11.2006

Post 07.01.2008, 13:47:32

Sprobuj usunac paddingi boczne dla #srodkowy.
Avatar użytkownikavloq
Posty: 210
Dołączył(a): 15.09.2004
Lokalizacja: Kraków

Post 07.01.2008, 13:52:41

no wtedy działa normalnie ale właśnie chce żeby były te paddingi, chce żeby ten tekst nie był przy tych krawędziach tylko trochę oddalony od nich.
Na stronie niczym kwejk znajdziesz śmieszne zdjęcia, różne zdjęcia i obrazki które Cie z pewnością rozbawią :)
bl4ck_b0x
Posty: 90
Dołączył(a): 11.11.2006

Post 07.01.2008, 17:48:53

No to musisz zmniejszyć szerokość #srodkowy. Paddingi rozciągają divy czyli masz 60% + 16px.
vojtek
Posty: 180
Dołączył(a): 03.05.2005
Lokalizacja: Chrzanów


Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 2 gości

Hosting, Domeny, SSL
iCash

Subskrypcja

Mamy 50185 zarejestrowanych użytkowników.
Najnowszy użytkownik: sskijop


Nasi użytkownicy napisali:

  • 935022 wiadomości
  • w 246325 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)