ďťż

[CSS] Div problemy - ułożenie :/

Podstrony

telcocafe

Witam
zacząłem robić ta stronę w div'ach ale coś nie mogę zrobić jednego momentu :/

http://img.org.pl/ob...cty5I8khbwa.jpg tak mam ale to logo musi być cale równe :/ i chce żeby strona nie zależała od rozdzielczości czyli ze jak ktoś śmiga na 800x600 to i tak będzie wszystko w takim samym położeniu

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <title><? echo PAGETITLE; ?></title> <link href="_stylesheet.css" rel="stylesheet" type="text/css"> <script src="js/bbcode.js" language="jscript" type="text/javascript"></script> </head> <body bgcolor="#1f1f1f" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <center> <div id="container"> <div id="pasek1"></div> <div id="pasek2"></div> <div id="logo1"></div> <div id="logo2"></div> <div id="logo3"></div> <div id="logo4"></div> </div> </center> </body> </html>

CSS
#container { border: 0px solid #333333; width: 958px; height: 350px; margin: 0px; } #pasek1 { width: 958px; height: 22px; background-image: url(img/pasek1.gif); } #pasek2 { width: 958px; height: 23px; background-image: url(img/pasek2.gif); } #logo1 { width: 692px; height: 200px; background-image: url(img/l1.gif); position: absolute; } #logo2 { top: 50px; left: 692px; width: 220px; height: 64px; background-image: url(img/3l.gif); display: inline; position: absolute; } #logo3 { float: right; top: 114px; left: 692px; width: 220px; height: 64px; background-image: url(img/5l.gif); display: inline; position: absolute; } #logo4 { float: right; clear: right; width: 46px; height: 200px; background-image: url(img/2l.gif); }

Witam ponownie pomoże mi ktoś trochę przynajmniej przy tym szablonie ? :(

Aby div#logo2 i div#logo3 były "ułożone" tak jak chcesz, powinny być umieszczone w elemencie nadrzędnym, który też jest pozycjonowany, tzn. że w stylach ma position:relative ; absolute lub static . U Ciebie elementem nadrzędnym dla div#logo2 i div#logo3 jest div#container, który nie ma w regule stylu ustawionego pozycjonowania. Oznacza to, że div#container nie jest blokiem obejmującym dla div#logo2 i div#logo3, dla których ustawiłeś position:absolute. Innymi słowy elementy div#logo2 i div#logo3 są pozycjonowane względem okna przeglądarki, a nie div#container.

Aby to wyglądało tak jak chcesz, ustaw w regule stylu dla div#container position:relative. :)

Wamper dzięki twojej odpowiedzi ruszyłem znacznie do przodu z moja strona dzięki.

ale teraz mam pytanie...

jak zrobić żeby ten pasek biały zaznaczony na czerwono przesuwał się w gore w zależności od wypełnienia zakładki "Sponsorzy" ,ale żeby znowu nie poleciał na sama gore

>> http://img.org.pl/img/cv08i06cUgo.jpg

bo mam tak napisane to >>

#space12 { background-color: #FFFFFF; left: 776px; top: 751px; width: 176px; height: 6px; position: absolute; }
Użytkownik IrQus edytował ten post 04 styczeń 2009, 17:54

Musi być relatywnie w stosunku do tego diva sponsorzy :) Dając absolute pozycjonujesz względem bloku obejmującego co skutkuje tym, że ten div#space12 jest niezależny od diva sponsorzy :) Na Twoim miejscu nie bawiłbym się tutaj w umieszczanie tam divów tylko nadanie własności margin-bottom , ew. margin-top divom sponsorzy bądź statystyki :)

Jednak jeśli chcesz tak jak sobie założyłeś to po prostu zrób to na ten wzór:
div#main{ background:#0F6; position:absolute; left:50px; width:500px; height:1000px;} div#menu{position:absolute; background:#000; right:10px; top:10px; width:150px; height:500px; } div#sponsorzy { background:#F00; height:120px; width:150px; } div#przerwa { background:#FFF; height:10px; width:150px; } div#statystyki { background:#009; height:320px; width:150px; }

Jak widzisz dla div sponsorzy, przerwa i statystyki nie ma żadnych absolute, relative ani nic innego oprócz wielkości i w tym wypadku koloru. Po prostu są one rozmieszczne w standardowym toku tak jak drzewo html :)

kurcze nie ogarniam tego :( bo nigdy nie robiłem strony w div'ach + CSS

Najlepiej sobie poczytaj trochę na http://www.kurshtml.boo.pl/ :)

Bardzo przystępnie i ciekawie :)

o chyba to zajarzyłem trochę mi to zajęło ale jest dobrze :] najgorsze jest to ze trochę muszę pozmieniać stronę ale cóż chce żeby było to zrobione dobrze i nie wracać do tego ;)

Wamper dzięki jeszcze raz !!! :)

---
proszę o nie zamykanie tego tematu bo w razie jakiś problemów to będę pisał.
---
Użytkownik IrQus edytował ten post 07 styczeń 2009, 15:37
ooo mam znowu problem :/

mam tak na razie zrobione >> http://img.org.pl/img/cvFcPlX65Tl.gif

a ma być tak >> http://img.org.pl/img/cvFc005wOrt.gif

kod:

<? include("_mysql.php"); include("_settings.php"); include("_functions.php"); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <title><? echo PAGETITLE; ?></title> <link href="_stylesheet.css" rel="stylesheet" type="text/css"> <script src="js/bbcode.js" language="jscript" type="text/javascript"></script> </head> <body bgcolor="#1f1f1f" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="container"> <div id="pasek1"></div> <div id="pasek2"></div> <div id="logo1"></div> <div id="logo2"></div> <div id="logo3"><? include("login.php"); ?></div> <div id="logo4"></div> <div id="logo5"></div> <div id="menu"> <table border="0" cellpadding="0" cellspacing="0"> <td><a href="index.php?site=news"><img src="img/news.gif" width="114" height="30" border="0"></a></td> <td><a href="index.php?site=articles"><img src="img/articles.gif" width="63" height="30" border="0"></a></td> <td><a href="index.php?site=demos"><img src="img/movie.gif" width="44" height="30" border="0"></a></td> <td><a href="index.php?site=gallery"><img src="img/gallery.gif" width="53" height="30" border="0"></a></td> <td><a href="index.php?site=squads"><img src="img/team.gif" width="57" height="30" border="0"></a></td> <td><a href="index.php?site=clanwars"><img src="img/wars.gif" width="46" height="30" border="0"></a></td> <td><a href="index.php?site=sponsors"><img src="img/sponsors.gif" width="68" height="30" border="0"></a></td> <td><a href="index.php?site=awards"><img src="img/awards.gif" width="77" height="30" border="0"></a></td> <td><a href="index.php?site=server"><img src="img/servers.gif" width="57" height="30" border="0"></a></td> <td><a href="index.php?site=files"><img src="img/files.gif" width="42" height="30" border="0"></a></td> <td><a href="index.php?site=registered_users"><img src="img/users.gif" width="78" height="30" border="0"></a></td> <td><a href="http://www.forum.nk-gaming.pl" target="_blank"><img src="img/board.gif" width="51" height="30" border="0"></a></td> <td><a href="index.php?site=contact"><img src="img/contact.gif" width="53" height="30" border="0"></a></td> <td><img src="img/blank.gif" width="155" height="30" border="0"></td> </table> </div> <div id="space1"></div> <div id="lewaspace1"></div> <div id="rottator"></div> <script type="text/javascript" src="core.js"></script> <script type="text/javascript"> var s1 = new SWFObject("core.swf","rotator","490","220","7"); s1.addVariable("file","core.xml"); s1.addVariable("width","490"); s1.addVariable("height","220"); s1.addVariable("backcolor","0x000000"); s1.addVariable("frontcolor","0xd3980c"); s1.addVariable("lightcolor","0xf6bd36"); s1.addVariable("screencolor","0xFFFFFF"); s1.addVariable("linkfromdisplay","true"); s1.write("rottator"); </script> <div id="space2"></div> <div id="ostatniemecze"> <table border="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" cellpadding="5" cellspacing="0"> <tr height="20"></tr><td><? include("sc_results.php"); ?></td> </table> </div> <div id="space3"></div> <div id="space4"></div> <div id="space5"></div> <div id="space6"></div> <div id="reklama"><a href="http://www.forum.nk-gaming.pl" target="_blank"><img src="img/reklama.gif" width="468" height="60" border="0"></a></div> <div id="space7"></div> <div id="space8"></div> <div id="space9"></div> <div id="space10"></div> <div id="news"> <? if(!isset($site)) $site="news"; $invalide = array('/','/\/',':','.'); $site = str_replace($invalide,' ',$site); if(!file_exists($site.".php")) $site = "news"; include($site.".php"); ?> </div> <div id="prawa_rama"> <div id="sponsorzy"> <table border="0" cellpadding="0" cellspacing="0" widht="176"> <td><img src="img/glowny_sponsor_title.gif" width="176" height="28" border="0"></td> <tr><td align="center"><a href="http://www.forum.nk-gaming.pl" target="_blank"><img src="img/sponsors_head.png" width="166" height="89" border="0"></a></td></tr> <tr><td align="center"><img src="img/sponsor_title.gif" width="176" height="36" border="0"></td></tr> <tr><td align="center"><a href="http://www.forum.nk-gaming.pl" target="_blank"><img src="img/sponsors_head.png" width="166" height="89" border="0"></a></td></tr> <tr><td height="6" border="0"></td></tr> <tr><td align="center"><a href="http://www.forum.nk-gaming.pl" target="_blank"><img src="img/sponsors_head.png" width="166" height="89" border="0"></a></td></tr> <tr><td align="center"><img src="img/sponsor_koniec.gif" width="176" height="5" border="0"></td></tr> </table> </div> <div id="space11"></div> <div id="partnerzy"> <table border="0" cellpadding="0" cellspacing="0" widht="176"> <td><img src="img/partnerzy_title.gif" width="176" height="28" border="0"></td> <tr><td align="center"><a href="http://www.forum.nk-gaming.pl" target="_blank"><img src="img/sponsors_head.png" width="166" height="89" border="0"></a></td></tr> <tr><td><img src="img/sponsor_koniec.gif" width="176" height="5" border="0"></td></tr> </table> </div> <div id="space12"></div> <div id="statystyki"> <table border="0" cellpadding="0" cellspacing="0" widht="176"> <td><img src="img/stats.gif" width="176" height="28" border="0"></td> <tr><td><? include("counter.php"); ?></td></tr> <tr><td align="center"><img src="img/sponsor_koniec.gif" width="176" height="5" border="0"></td></tr> </table> </div> <div id="space13"></div> </div> <div id="space14"></div> </div> </body> </html>

CSS:

body { font-family: Tahoma; font-size: 10px; scrollbar-base-color:#cccccc; scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#FFFFFF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#cccccc; scrollbar-highlight-color#cccccc; scrollbar-shadow-color:#cccccc; scrollbar-track-color:#cccccc; } table { font-family: Tahoma; font-size: 10px; color: #FFF; } h2 { font-family: Tahoma; font-size: 12px; color: #FFF; text-transform: uppercase; font-weight: bold; } .small { font-family: Tahoma; font-size: 9px; color: #FFF; } .title { font-family: Tahoma; font-size: 11px; color: #000000; font-weight: bold; background-image: url(images/title_bg.gif); background-repeat: repeat; background-position: left top; } .category_big { font-family: Tahoma; font-size: 12px; color: #FFF; font-weight: bold; } .category { font-family: Tahoma; font-size: 11px; color: #FFF; font-weight: normal; } .marked { background-color: #FFF; font-weight: bold; } a, a:visited, a:active { color: #009eff; text-decoration: none; font-weight: normal; } a:hover { color: #009eff; text-decoration: underline; font-weight: normal; } a.titlelink, a.titlelink:visited, a.titlelink:active { color: #000000; text-decoration: none; font-weight: bold; } a.titlelink:hover { color: #000000; text-decoration: underline; font-weight: bold; } a.category, a.category:visited, a.category:active { color: #FFFFFF; text-decoration: none; } a.category:hover { color: #FFF; text-decoration: underline; } option, textarea, input, select, file { font-family: Tahoma; font-size: 10px; color: #FFF; background-color: #000; border: 1px solid #FFFFFF; } .footer {color: #000 size: 10px } .form_off { color: #000000; background-color: #FFF; border: 1px solid #000; } .form_on { color: #000000; background-color: #FFF; border: 1px solid #000; } .form_username { font-family: Tahoma background-color: #000000; border: 1px solid #000000; background-repeat: no-repeat; background-position: left top; } .form_password { font-family: Tahoma background-color: #000; border: 1px solid #FFFFFF; background-repeat: no-repeat; background-position: left top; } .form_name { background-color: #000; border: 1px solid #FFFFFF; background-repeat: no-repeat; background-position: left top; } .form_text { background-color: #000; border: 1px solid #FFFFFF; background-repeat: no-repeat; background-position: left top; } .input { background-color: transparent; border: 1px none; margin-top: 0px; margin-bottom: 0px; } #container { border: 0px solid #333333; width: 958px; height: 100%; margin: auto; position: relative; } #pasek1 { width: 958px; height: 22px; background-image: url(img/pasek1.gif); } #pasek2 { width: 958px; height: 23px; background-image: url(img/pasek2.gif); } #logo1 { background-image: url(img/l1.gif); width: 692px; height: 200px; position: absolute; } #logo2 { background-image: url(img/3l.gif); float: right; top: 45px; left: 692px; width: 220px; height: 64px; display: inline; position: absolute; } #logo5 { background-image: url(img/4l.gif); float: right; top: 215px; left: 692px; width: 220px; height: 30px; display: inline; position: absolute; } #logo3 { background-image: url(img/5l.gif); float: right; top: 109px; left: 692px; width: 220px; height: 106px; display: inline; position: absolute; } #logo4 { background-image: url(img/2l.gif); float: right; clear: right; width: 46px; height: 200px; } #menu { float: right; top: 245px; width: 958px; height: 30px; position: absolute; } #lewaspace1 { background-color: #FFFFFF; top: 281px; width: 6px; height: 220px; position: absolute; } #rottator { background-color: #000000; left: 6px; top: 281px; width: 490px; height: 220px; position: absolute; } #space1 { background-color: #FFFFFF; top: 275px; width: 958px; height: 6px; position: absolute; } #space2 { background-color: #FFFFFF; left: 496px; top: 281px; width: 6px; height: 220px; position: absolute; } #space3 { background-color: #FFFFFF; left: 770px; top: 281px; width: 6px; height: 220px; position: absolute; } #space4 { background-color: #FFFFFF; left: 952px; top: 281px; width: 6px; height: 100%; position: absolute; } #space5 { background-color: #FFFFFF; left: 0px; top: 501px; width: 776px; height: 13px; position: absolute; } #space6 { background-color: #FFFFFF; left: 0px; top: 514px; width: 155px; height: 60px; position: absolute; } #space7 { background-color: #FFFFFF; left: 623px; top: 514px; width: 153px; height: 60px; position: absolute; } #space8 { background-color: #FFFFFF; left: 0px; top: 574px; width: 776px; height: 100%; position: absolute; } #space9 { background-color: #FFFFFF; left: 952px; top: 514px; width: 6px; height: auto; position: absolute; } #space10 { background-color: #FFFFFF; left: 0px; top: 574px; width: 6px; height: auto; position: absolute; } #ostatniemecze { background-image: url(img/ost_mecze.gif); left: 502px; top: 281px; width: 268px; height: 220px; position: absolute; } #reklama { background-color: #000; left: 155px; top: 514px; width: 468px; height: 60px; position: absolute; } #news { background-color: #FFF; left: 6px; top: 585px; width: 764px; height: auto; position: absolute; } #prawa_rama { position:absolute; top: 281px; left: 776px; width: 176px; height: auto; } #sponsorzy { background-image: url(img/tlo_sponsorzy.gif); width: 176px; } #partnerzy { background-image: url(img/tlo_sponsorzy.gif); width: 176px; } #statystyki { background-image: url(img/tlo_sponsorzy.gif); width: 176px; } #space11 { background-color: #FFFFFF; width: 176px; height: 6px; } #space12 { background-color: #FFFFFF; width: 176px; height: 6px; } #space13 { background-color: #FFFFFF; width: 176px; height: 6px; } #space14 { background-color: #000; position:absolute; display: inline; clear: left; width: 176px; height: 6px; }

ooo mam znowu problem :/

mam tak na razie zrobione >> http://img.org.pl/img/cvFcPlX65Tl.gif

a ma być tak >> http://img.org.pl/img/cvFc005wOrt.gif

1. Radzę kod walić w CODEBOX (Przewijanie strony dobija)
2. "mam tak a ma być tak" nie rozumiem o co Tobie chodzi (fotki całkowicie się różnią - nie bardzo wiem jak mam pomóc w takiej sytuacji)
Użytkownik bajeczny edytował ten post 09 styczeń 2009, 19:18
w sumie prawda trochę to źle napisałem :P

chodzi mi o to żeby na samym dole był pasek który tak jakby kończy stronę i ten biały pasek z prawej strony wąski żeby się kończył na tym pasku na dole, jasno jest czy jeszcze nie bardzO :( ?

w sumie prawda trochę to źle napisałem :P

chodzi mi o to żeby na samym dole był pasek który tak jakby kończy stronę i ten biały pasek z prawej strony wąski żeby się kończył na tym pasku na dole, jasno jest czy jeszcze nie bardzO :( ?

Według tego co napisałeś zrobiłem schemat

Oto chodziło? ;)

no tak o to chodzi ale tez o to żeby ta stopka była taka długa aż do prawej krawędzi statystyk i żeby tam było białe tło od końca statystyk do stopki
Użytkownik IrQus edytował ten post 10 styczeń 2009, 19:12

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL