Forum PHP.pl > divy - zostaje sporo miejsca

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: divy - zostaje sporo miejsca

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

krzyszbi

15.11.2005, 15:34:24

witam wszystkich

mam do zrobienia stronkę i chciałbym aby była stwożona na divach
szukałem na ten temat przez jakiś czas informacji i wyniki są następujące stronka

a teraz problem
otóż poniżej zdjęcia jest mnóstwo wolego miejsca co przerobić aby było wyświetlane z jak najmniejszym przewijaniem zapewne jes to spowodowane niewłaściwym użyciem pozycjonowanie przezemnie w divach
a teraz troszkę kodu
HTML

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
             <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	              <link rel="stylesheet" type="text/css" href="pic/salepsi.css" />
	       <title></title>
             </head>
<body class="bg_body">
<div id="podstawa">
<div id="top"><object type="application/x-shockwave-flash" data="pic/menu.swf" width="955" height="128">
                        <param name="movie" value="pic/menu.swf" />
                        <param name="menu" value="false" />
                        </object>
</div>
<div  id="lewa"></div><div id="srodek"></div><div id="prawa"></div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

CSS

Kod

.bg_body{
    background-image: url( "grafika/tlo.gif" );
}
.podstawa {
padding: 0;
background-image: url( "grafika/tlo.gif" );
margin: auto;
width: 719px;
text-align: left;
}
.top {
    height: 198px;
    width: 719px;
    margin: auto;
}
#lewa {
    position: relative;
    left: 0px;
    top: 0px;
    background-image: url("grafika/left_s1.jpg");
    background-repeat: no-repeat;
    height: 437px;
    width: 597px;
}
#srodek {
    position: relative;
    left: 597px;
    bottom: 437px;
    background-image: url("grafika/middle_s.jpg");
    background-repeat: no-repeat;
    height: 437px;
    width: 191px;
}
#prawa {
    position: relative;
    left: 788px;
    bottom: 874px;
    background-image: url("grafika/right_s.jpg");
    background-repeat: no-repeat;
    height: 437px;
    width: 191px;
}

z góry dzięki za podpowiedzi, linki itp..
PS a zdjęcie jest tak pogięte aby w przyszłości nie było problemo ze zmianą "kolesia" na jakąś inną tważ

bela

15.11.2005, 16:39:43

Czemu w CSS podstawa i top jest napisany jako klasa, a w rzeczywistości tj. XHTMLu jest jako id?

revyag

15.11.2005, 16:42:57

Ad 1. Poprawne użycie znaków przestankowych znacznie ułatwiłoby zrozumienie posta

Ad 2. Zły doctype. Tu masz szablony: webstandards
Ad 3. Dla body nie robi się klasy. Przecież w całym dokumencie masz jeden taki element

Ad 4. Masz przy flashu width=955 ? nie za dużo ?
Ad 5. Pozycjonowanie w Twoim wydaniu jest straszne

Wywal te position relative, top, left.
Przykład struktury trójkolumnowej:
http://css.maxdesign.com.au/floatutorial/tutorial0916.htm

krzyszbi

15.11.2005, 16:47:07

ok
dzięki za podpowiedzi
już zabieram się za poprawki
jak wynikną jakieś kłopoty to dam znać

Zajec

15.11.2005, 22:51:28

P.S.
Może jakieś menu dla no-flash? Nie każdy lubi, gdy guzik podświetla mu się na 10 różnych kolorów w ciągu sekundy i uniemożliwia wykonanie gestów.

krzyszbi

16.11.2005, 10:51:50

witam
zmieniłem arkusz css według rad od revyag-a ale przy czymś takim badzIEwiIE nie wyświetla mi obrazków jako tła i Oper też sobie nie radzi jest tylko flash
a w Mozilli i FF wszystko jest ok
i tło w body a z resztą sami zobaczcie i oceńcie >> tutaj <<
i jak racjonalnie zrobić tło całej strony w body
css

Kod

BODY.bg_body{
    background-image: url( "pic/grafika/tlo.gif" );
}
* {font-family: verdana, tahoma, arial, sans-serif;}
#container  {
width: 955;
margin: 10px auto;
background-image:  url( "pic/grafika/tlo.gif" );
color: #333;
line-height: 130%;
}
#top {
    width: 955px;
    height: 128px;
}

#top h1 {
padding: 0;
margin: 0;
}
#leftnav {
    float: left;
    background-image: url("pic/grafika/left_s1.jpg");
    background-repeat: no-repeat;
    height: 437px;
    width: 597px;
}
#rightnav {
    float: right;
    position: relative;
    left: -14px;
    background-image: url("pic/grafika/right_s.jpg");
    background-repeat: no-repeat;
    height: 437px;
    width: 191px;
}
#content
{
margin-left: 597px;
    background-image: url("pic/grafika/middle_s.jpg");
    background-repeat: no-repeat;
    height: 437px;
    width: 191px;
}

#footer {
    clear: both;
    background-image: url("pic/grafika/down_s.jpg");
    background-repeat: no-repeat;
    height: 35px;
    width: 961px;
}

#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

i html

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
             <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	              <link rel="stylesheet" type="text/css" href="salepsi.css" />
	       <title></title>
             </head>
<body class="bg_body">
 <div id="container">
     <div id="top">
         <object type="application/x-shockwave-flash" data="pic/menu.swf" width="955" height="128">
                        <param name="movie" value="pic/menu.swf" />
                        <param name="menu" value="false" />
         </div>
<div id="leftnav">
</div>
<div id="rightnav">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

jak zwykle konstruktywna krytyka i rady, linki mile widziane

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.