Forum Debian Users Gang

Rumi · 2007-11-01 23:08:14

nie wiem czy to pasuje do tematyki pokoju ... najwyżej mnie ochrzanią ;)

na errorze mi BiExi azhag i myliges nawrzucali że już się nei robi stron w oparciu o tabelki ... nei to nie więc zabrałem sie za divy a tu zonk na początku a mianowicie:

http://rumi.dug.net.pl/nowa/

interesuja tu nas ... mnie przynajmniej 3 kolory: zielony(menu), żółty(główna), i niebieski(stopka). wszystko jest ok do momentu gdy treść w polu zielonym jest dłuższa niż w żółtym, wtedy to zielony zasłania kolorek niebieski(stopke). co zrobić by kolor żółty podążał za zielonym.

css:

Kod:

body
{
}

#logo
{
margin: 0 auto;
background-color: #444;
width: 700px;
height: 50px;
}


#kontener
{
margin: 0 auto;
padding: 0;
background-color: orange;
position:relative;
width: 700px;
}

#menu
{
width: 200px;
position:absolute;
left: 0;
top: 0;
background-color: green;
}

#glowna
{
width: 500px;
border-left: 200px solid #6495ED;
background-color: yellow;
}

#stopka
{
margin: 0 auto;
background-color: blue;
width: 700px;
height: 40px;
}

php

Kod:

...
<body>
<div id="logo">Logo</div>
<div id="kontener">
<div id="menu">menu<br/><br/><br/><br/><br/><br/><br/>i dupa :]</div>
<div id="glowna">główna<br/><br/><br/></div>
</div>
<div id="stopka">stopka</div>
</body>
...

chyl-o · 2007-11-02 03:41:44

Kod powinien działać pod firefoxem i Operą bez problemu, na IE jak zwykle się rozpieprza, a hacki to nie o tej godzinie ;)

Do rzeczy:

css:

Kod:

body
{
}

#logo
{
margin: 0 auto;
background-color: #444;
width: 700px;
height: 50px;
}


#kontener
{
margin: 0 auto;
padding: 0;
background-color: gray;
width: 700px;
overflow:hidden;
}

#menu
{
width: 200px;
margin: 0;
background-color: green;
}

#glowna
{
background-color: yellow;
margin: 0;
width: 500px;
}

#stopka
{
margin: 0 auto;
background-color: blue;
height: 40px;
width: 700px;
overflow: hidden;
}

#lewa
{
    width: 200px;
}

#prawa
{
    float: right;
    width: 100%;
    margin-right: -200px;
}

html:

Kod:

<div style=" text-align: center; width: 100%; top: 0px;">
            <div id="logo">Logo</div>
            <div id="kontener">
                <div id="prawa">
                    <div id="glowna">Glowna<br /><br /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>i dupa :]</div>
                </div>
                <div id="lewa">
                    <div id="menu">Menu<br/><br/><br/><br/><br/><br/><br/>i dupa :]Menu<br/><br/><br/><br/><br/><br/><br/>i dupa :]Menu<br/><br/><br/><br/><br/><br/><br/>i dupa :]</div>
                </div>
            </div>
            <div id="stopka">Stopka</div>
        
        </div>

Na samym początku div udający tabelkę, rozciągający się na całą szerokość strony i dający wyśrodkowanie. Potem Twoja struktura loga i stopki, a w kontrolerze, tfu kontenerze, dodatkowe dwa elementy: prawy i lewy, gdzie ustalone szerokości mają z tym że prawy lezy po prawej stronie. Jeśli dam szerokość głównej na 100% to się całość nie wyświetli. Prawy element ma prawy margines na szerokość odpowiednią( w tym wypadku taką jaką ma menu ).

Trochę jebania było z tym żeby pod firefoxem stopka się dobrze wyświetlała jak "glowna" jest wyższa od menu, ale

Kod:

overflow:hidden;

w kontenerze dało radę na liska ;)

Semerchet · 2007-11-02 05:37:17

http://www.kurshtml.boo.pl/css/css.html

Fajna strona o CSS

BiExi · 2007-11-02 08:43:34

Kod:

<!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="pl">
<head>
   <link rel="stylesheet" type="text/css" href="db.css"/>
</head>
<body>

<div id='main'>

 <div id='top'>
  11111111111
 </div>

 <div id='zawartosc'>
   aaaaaaa
 </div>

 <div id="stopka">
  bbbbbb
 </div>

</div>

</body>
</html>

oraz

Kod:

#main 
{
  background: #ffffff;
  color: #303030;
  margin: 0 auto;
  width: 800px;
}

#top 
{
  background: #ffffff;
  color: #303030;
  margin: 0 auto;
  width: 800px;
}

#menu 
{
  clear: left;
  float: left;
  width: 150px;
  margin: 0 0 10px 0;
  padding: 0;
  font-size: 0.9em;
  text-align: left;
}

#zawartosc 
{
  margin: 0 10px 20px 160px;
  border-left: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
  padding: 0 10px 0 10px;
  line-height: 1.6em;
  text-align: center;
}


#stopka
{
  clear: both;
}

Rumi · 2007-11-02 12:02:11

thx BiExi, chyl-o teraz wygląda to tak jak ma być zarówno w ff jak i ie :)

http://rumi.dug.net.pl/nowa/test.php

chyl-o · 2007-11-03 00:50:34

Tak dla ciekawostki sprawdziłem jak faktycznie wygląda teraz Twoja strona pod różnymi wersjami ie:

* IE > 5.5 wygląda ok
* IE = 5.5 : http://chyl.pl/pub/images/ie/ie5.5.jpg
* IE = 4.01: http://chyl.pl/pub/images/ie/ie4.jpg
I na koniec hardcore, ie 3 ;) http://chyl.pl/pub/images/ie/ie3.jpg

a tak wygląda strona ms w ie4: http://chyl.pl/pub/images/ie/ie4ms.jpg

Wniosek z tego taki: chcąc zachować wygląd strony przynajmniej do ie 5 pół czasu poświęconego na tworzenie trzeba przeznaczyć na obchodzenie luk w starszych wersjach, ale jesli nawet sam producent o to nie dba to... przyroda! :)

PS. Ktoś może powiedzieć, że teraz nikt nie używa ie 5.. otóż tak nie do końca. Nie tak dawno dzwoni do nas klientka że nie może wejść do panelu cms'a, pytanie jakiej przeglądarki używa, ona na to ie, w jakiej wersji... 5 :)

qbsiu · 2007-11-03 08:42:45

Są ludzie... U nas nauczyciel informatyki (młody - niedawno studia ukończył), twierdzi, że IE jest najlepszą przeglądarką... Na moje pytanie:
"To dlaczego, nie potrafi poprawnie czytać CSS'a?" - powiedział, że IE8 ma wspierać CSS3 :D Żal.
Napisałem stronkę w xhtmlu 1.1, strona przeszła validację, jedna sugestia, żeby zmienić rozszerzenie z .html, na .xhtml. Zrobiłem to.... U mnie na Operze i FF wszystko cieka bardzo ładnie, idę do kumpla, odpalam IE (bo tylko to miał). A tu przeglądarka się pyta gdzie chcę zapisać plik :| - żal!
Na stronie głównej zamieściłem informację, że tę stronę poprawnie interpretuje Firefox oraz Opera.... :/

Żal... Z tego wniosek: Muszę zainstalować IE!! ]:->

http://www.kurshtml.boo.pl/css/css.html

Fajna strona o CSS

Z tego poradnika uczyłem się pisać strony w css'ie - nauczyłem się w 3-4h...... Napisałem sobie szkielety. ;) Polecam kurs!
Polecę jeszcze: http://kurs.browsehappy.pl/

Rumi · 2007-11-03 09:00:22

...

dlatego myślę czy by nei dać dla osób wchodzących z ie i konqerora przekierowanie do czarnej strony z małym napisem na biało "spieprzaj dziadu" :]

co gorsza czytałem o tym ze powstaje jednocześnie xhtml 2 i html 5! to dopiero będą problemy z xhtml2 jakoż ze za prace nad html5 zamieszane są producenty przeglądarek jak np opera(o ile dobże pamiętam ob nie hcce mi sie szukać)

azhag · 2007-11-03 10:04:37

dlatego myślę czy by nei dać dla osób wchodzących z ie i konqerora przekierowanie do czarnej strony z małym napisem na biało "spieprzaj dziadu" :]

http://browsehappy.pl/infobarwebmaster

qbsiu · 2007-11-03 10:24:49

http://browsehappy.pl/infobarwebmaster

O widzisz :D Już to zastosowałem na swoich stronach.
Dzięki wielkie! :) ]:->

Semerchet · 2007-11-10 22:16:24

http://developer.mozilla.org/pl/docs/CSS:-moz-border-radius

Nie wiem czy było. Opera powinna sobie z tym poradzić (z liskiem nie ma problemów) :) IE echhhhh.. :)

Forum Debian Users Gang

Ogłoszenie

#1 2007-11-01 23:08:14

Rumi - prawiczek erotoman

beztabelkowy layout

Kod:

Kod:

#2 2007-11-02 03:41:44

chyl-o - Członek DUG

Re: beztabelkowy layout

Kod:

Kod:

Kod:

#3 2007-11-02 05:37:17

Semerchet - Amator

Re: beztabelkowy layout

#4 2007-11-02 08:43:34

BiExi - matka przelozona

Re: beztabelkowy layout

Kod:

Kod:

#5 2007-11-02 12:02:11

Rumi - prawiczek erotoman

Re: beztabelkowy layout

#6 2007-11-03 00:50:34

chyl-o - Członek DUG

Re: beztabelkowy layout

#7 2007-11-03 08:42:45

qbsiu - Członek DUG

Re: beztabelkowy layout

#8 2007-11-03 09:00:22

Rumi - prawiczek erotoman

Re: beztabelkowy layout

#9 2007-11-03 10:04:37

azhag - Admin łajza

Re: beztabelkowy layout

#10 2007-11-03 10:24:49

qbsiu - Członek DUG

Re: beztabelkowy layout

#11 2007-11-10 22:16:24

Semerchet - Amator

Re: beztabelkowy layout

Stopka forum