Zaloguj się

Leon1991 · 19-02-2011, 08:08

Witam,chciałem was prosić o pomoc dotyczącą cssa a dokładnie strony budowanej na divach.Otóż od kilku dni ucze sie css i do tej pory nie moge rozgryźć co robie nie tak,że elementy które dodaje do strony przy zmniejszeniu wielkości oglądanego okna przeglądarki(NIE ROZDZIELCZOŚCI!) zachowują sie dziwnie,wygląda to tak jakby sie nie skalowały.kwadrat,który jest wycentrowany(taka idea strony-tło główne jest dookoła ale właściwa strona jest wyświetlana w mniejszym oknie i o tym mówie) zachowuje sie normalnie,natomiast reszta ...ciężko mi to opisać.Po prostu pozostałe elementy nie zmiejszają sie proporcjonalnie wraz z oknem przeglądarki i nie przemieszczają sie tak jak ww. kwadrat.

Kod:
<html>

<head>

  <style type="text/css">

body {

background-image: url("tla/podklad.gif");

font-size:18px;

font-style:oblique;

}

.prostokat {

position: absolute;

text-align:center;

top:1%

}

.menu {

position: absolute;

left:17%;

top:20%;

}

.Home {

position: absolute;

left:17%;

top:25%;

}

.onas {

position:absolute;

left:17%;

top:30%;

}

.kontakt {

position:absolute;

left:17%;

top:35%;

}

.dojazd {

position:absolute;

left:17%;

top:40%;

}

.pole {

position:absolute;

left:28%;

top:22%;

}

.numer {

position:absolute;

left:39%;

top:23%;

}

  </style>

  <meta content="text/html; charset=ISO-8859-2" http-equiv="content-type">

  <title>index.html</title>

</head>

<body>

<!--prostok±t,menu-->

<div class="prostokat"><img style="width: 70%; height: 80%;" alt="" src="tla/tlo.jpg"></div>

<!--Button1-->

<div class="menu"><img style="width: 100%; height: 100%;" alt="" src="Buttony/menu.png"></div>

<!-- przycisk home-->

<div class="home"><a href="index.html" onmouseover='rollover1.src="buttony/home2.png"' onmouseout='rollover1.src="buttony/home.png"'><img src="buttony/home.png" name="rollover1" border="0" height="100%" width="100%"></a></div>

<!--przycisk o nas-->

<div class="onas"><a href="Onas.html" onmouseover='rollover2.src="buttony/onas2.png" ' onmouseout='rollover2.src="buttony/onas.png"'><img src="buttony/onas.png" name="rollover2" border="0" height="100%" width="100%"></a></div>

<!--przycisk Kontakt-->

<div class="kontakt"><a href="Kontakt.html" onmouseover='rollover3.src="buttony/kontakt2.png" ' onmouseout='rollover3.src="buttony/kontakt.png"'><img src="buttony/kontakt.png" name="rollover3" border="0" height="100%" width="100%"></a></div>

<!--przycisk dojazd-->

<div class="dojazd"><a href="Dojazd.html" onmouseover='rollover4.src="buttony/dojazd2.png" ' onmouseout='rollover4.src="buttony/dojazd.png"'><img src="buttony/dojazd.png" name="rollover4" border="0" height="100%" width="100%"></a></div>

<!--tło tekstowe-->

<div class="pole"><img style="width: 100%; height: 100%;" alt="" src="tla/textowe.png"></div>

**Kartofelek** · 19-02-2011, 15:37

Bo strona jest totalnie zle pocięta. Zastosuj metodę: element nadrzędy = relatywna; jego dziecko = absolutna

<body>
<div class="container">
pieru pierdu
</div>
</body>

.container {width:.....px; margin:0 auto; position:relative;}
.xxxxx {position:absolute; .......}

ale to też nie najelpsza metoda, by tak pozycjonować całe wnętrze containera. Poczytaj o float. Jeszcze dużo nauki przed tobą.

Leon1991 · 19-02-2011, 21:32

hmm..staram sie uczyć z kurshtml.boo.pl i z webmade.org. Chciałbym jednak ,żebyś wytłumaczył mi o co chodzi z tym,że strona jest źle pocięta? i nie chce tu oczywiście żadnego kodu czy coś,tylko żebyś mi powiedział co robie źle.

**Kartofelek** · (Ten post był ostatnio modyfikowany: 19-02-2011, 22:06 przez Kartofelek.)

Wszystko masz position:absolute. A absolute działa na zasadzie "masz być w tej pozycji nie ważne co się stanie". Wszystko pasuje jeżeli takie pozycjonowanie jest względem jakiegoś diva w którym się znajduje, a który ustawia się "płynnie" na stronie. Ale jeżeli jest względem body, to już nie jest dobrze.
Kilka razy już podawałem główny laj, który warto sobie zapamiętać,a na którym zrobisz 99% stron:

Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title> ... </title>

    <link rel="shortcut icon" href="/favicon.ico" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

    <link rel="stylesheet" type="text/css" href="css/style.css?v=01" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <script type="text/javascript">!window.jQuery && document.write('<script src="js/jquery-1.4.4.min.js"><\/script>')</script>

    <!--[if IE]>

        <link rel="stylesheet" href="css/style_ie.css?v=01" />

    <![endif]-->

    <!--[if lt IE 7 ]>

        <link rel="stylesheet" href="css/style_ie6.css?v=01" />

        <script type="text/javascript" src="js/dd_belatedpng.js?v=01"></script>

    <![endif]-->

    <script type="text/javascript" src="js/scripts.js?v=01"></script>    

</head>

<body>

    <div class="page_container">

        <div class="page_head">

        </div>

        <div class="page_navigation">

            <ul>

                <li class="active"><a href="">...</a></li>                

            </ul>

        </div>

        <div class="page_main">

            <div class="page_content">

                <p>

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

                </p>

            </div><!-- e: content -->

        </div><!-- e: main -->

        <div class="page_footer">

            <ul>

                <li><a href="">...</a></li>

            </ul>

        </div><!-- e: footer -->

    </div>

</body>

Może zgrzeszę w oczach wielu, ale uważam że kurs browsehappy wcale taki dobry nie jest. Niby dużo jest, ale mam wrażenie chaotyczności. Osobiście używałem kiedyś kursu html helionu (Pawła Wimmera) i go bardziej polecam.

Co do pozycjonowania:
Wyobraź sobie że strona to zbiór pudełek. Każde takie pudełko może znajdować się jedno pod drugim, leżeć obok siebie (float), wyłączać takie leżenie (clear) itp.
Każde pudełko może mieć marginesy (także ujemne), może mieć paddingi itp. Możliwości jest "milion pińset", a jak to leci w telewizji to 2x tyle.

Każde pudełko może też mieć pozycjonowanie relatywne, które właściwie nic w nim nie zmienia, ale daje bardzo dużo. Bo gdy pudełko ma takie pozycjonowanie, to jest ono początkiem współrzędnych dla pozycjonowania absolutnego swoich dzieci.

Najlepiej budować laj jakbyś schodził od większego do mniejszego. Czyli dzielisz swoją stronę na główne bloki (header, main, conten, footer itp), a potem każdy taki blok traktujesz jakby oddzielną część i dzielisz na jeszcze mniejsze. Tak jak w przyapdku folderów. Container to twój główny folder, potem masz podfoldery header, main i footer. Gdy wchodzisz do main - masz content i może sidebar itp. I tak w kolo macieju.
W praktyce pozycjonowanie absolutne przydaje się do pozycjonowania jakiś małych pierdół w kolejnych "podkatalogach". Właściwie podkatalogi to złe określenie bo to przecież gałęzie drzewa. Drzewa DOM.

WSZYSTKO TO ZALEŻY OD SYTUACJI :]

Leon1991 · 19-02-2011, 23:20

Wielkie dzięki,na pewno sprawdze i popróbuje zrobić coś od nowa z pomocą twojego kodu,prosiłbym narazie nie zamykać tematu.Jeszcze raz dzięki i pozdrawiam.

DoGeR · 20-02-2011, 02:10

Tu jest fajnie opisane: http://www.fox.com.pl/articles/web/layout.php

Leon1991 · (Ten post był ostatnio modyfikowany: 20-02-2011, 18:38 przez Leon1991.)

Dobra dobra rozumiem,że najpierw ustalam page_container a potem dopiero w nim tworze następne elementy strony(header,middle,left,right,footer itd) i te poszczególne elementy odnoszą sie do page_container'a ,a potem jeżeli w którymś z nich tworze jeszcze np menu,to menu odwołuje już sie do któregoś z nich.Ale mógłby mi ktoś powiedzieć czy w head'zie strony gdy ustalam np #left
float:left
width:
(...)
to jak zapisuje page_container jako ten główny element?

EDIT Tongue

oprzedni problem rozwiązany.Wielkie dzięki za pomoc i adres strony.Stworzyłem sobie na podstawe niej własny plan strony www,jednak mam mały problem z którym nie umiem sobie poradzić,może Wy zauważycie ocb?

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

  <style type="text/css">

#header {

width:100%;

height: 70px;

}

#right {

float:right;

width: 160px;

height: auto !important;

height: 300px;

min-height: 300px;

display: inline;

}

#left {

float:left;

width;200px;

height: auto !important;

height:370px;

min-height:370px;

display: inline;

}

#middle {

float:left;

width: 450px;

height: auto !important;

height: 350px;

min-height:350px;

display:inline;

}

#footer {

clear:both;

width:100%;

height: 60px;

}

  </style>

  <meta content="text/html; charset=ISO-8859-2" http-equiv="content-type">

  <title>1</title>

</head>

<body>

 <div style="background-color: gray" id="header">#header</div>

<div style="background-color: blue" id="left">#left</div>

  <div style="background-color: purple" id="middle">#middle</div>

  <div style="background-color: olive" id="right">#right</div>

  <div style="background-color: yellow" id="footer">#footer</div>

</body>

</html>

Left jest jakieś wąskie i nie pomaga zmiana szerokości.Zaistniała przez to ogromna przerwa miedzy Middle a right..

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie