Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: 3 kolumny - IE wygląda dobrze, FF prawa jest pod content'em
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
bl4ck_b0x
7.01.2008, 12:32:20
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
<?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.

Dodał: Mateusz
</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
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;
}
batman
7.01.2008, 16:27:21
Pisałem z palca i nie testowałem. Z doświadczenia wiem, że IE źle interpretuje dopełnienia (padding), dlatego też najpierw projektuj stronę na FF, a dopiero potem naprawiał błedy IE winksmiley.jpg Poza tym znalazłem powtórzenie id. Zmieniłem na class.

[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  6. <link rel="Stylesheet" type="text/css" href="style.css" />
  7. <title>Moja strona</title>
  8. </head>
  9. <body>
  10. <div id="all">
  11.     <div id="pasek_bialy">Góra</div>
  12.     <div class="pasek_blekitny">Pasek błękitny</div>
  13. 	<div id="lewy">lewy</div>
  14. 	<div id="srodkowy">
  15. 		<div id="wrapper">
  16. 			<div class="ciemny">Strona </div>
  17. 			<div class="jasny">głowna</div>
  18. 			<div class="odstep"></div>
  19. 			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.Dodał: Mateusz
  20. 		</div>
  21. 	</div>
  22.     <div id="prawy">prawy</div>
  23.     <div class="czysc"> </div>
  24.     <div class="pasek_blekitny">asdasd</div>
  25. </div>
  26. </body>
  27. </html>
[HTML] pobierz, plaintext


Kod
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;
}

div#srodkowy div#wrapper {
    padding:8px 8px 8px 8px;
}

div#prawy {
    width:20%;
    text-align: left;
    background-color:#EAEAEA;
    float:right;
}

.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;
}
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.