ugrás a tartalomhoz

Fejlec felepitese

zoliky · 2009. Okt. 13. (K), 14.34
Itt lathato a smink: http://dl.getdropbox.com/u/1924024/weblap.jpg
A fejlecet ugy vagtam ki, hogy vettem egy "1px" szeles csikot a felso reszbol (a felso resz alatt ertem a feketet es a sotet szurket).

Az 1px szeles csikot BODY hatternek raktam be.
  1. body {  
  2.   backgroung: url(../images/bodybg.gif) repeat-x;  
  3. }  
Most azt nem ertem, hogy tudnam felepiteni a fejlecet. Szuksegem van egy logo-ra es egy menure. A menu a sotet szurke csikba lesz belerakva. Szoval ket reszrol lenne szo.

A kovetkezo HTML kodra gondoltam.
  1. <div id="wrapper">  
  2.   <div id="header">  
  3.      <div id="header-inner">  
  4.       logo  
  5.      </div> <!-- /#header-inner -->  
  6.   
  7.      <div id="navbar">  
  8.       navbar  
  9.      </div> <!-- /#navbar -->  
  10.   </div> <!-- /#header -->  
  11. </div>  
A "header-inner" es a "navbar" DIV-eknek beallitok egy fix magasagot, peldaul igy
  1. #header-inner {  
  2.    height: 300px; /* a fekete resz */  
  3.   
  4. #navbar {  
  5.    height: 100px; /* a szurke resz */  
  6. }  
A megoldasom helyes lenne? Esetleg tudnatok jobbat mutatni ? Nagyon orulnek barmilyen tanacsnak! Koszonom!
‹ DIV-be töltés szövegmező események ›
 ■
1

Ezt nem így szokták

mgergo90 · 2009. Okt. 13. (K), 15.02
Ezt nem így szokták tudtommal, hanem feldarabolod a képet és a div hátterének az adott darabot teszed be, pl.:

<div id="header_"></div>

<style>
#header_{
backgroung: url(../images/header.gif);
}
</style>
2

Ok, szoval igy: <div

zoliky · 2009. Okt. 13. (K), 16.57
Ok, szoval igy:
  1. <div id="header">  
  2. logo  
  3. </div> <!-- /#header -->  
  4.   
  5. <div id="navbar">  
  6. navbar  
  7. </div> <!-- /#navbar -->  
  8.   
  9. <div id="wrapper">  
  10.   <div id="main">  
  11.      <div id="content">  
  12.      </div> <!-- /#content -->  
  13.   
  14.      <div id="sidebar">  
  15.      </div> <!-- /#sidebar -->  
  16. </div> <!-- /#wrapper -->  
Ha nincs body hatter akkor a "header" es a "navbar" nem lehet a befoglaloban (wrapper). A ket DIV olyan hosszu kell legyen mint a kepernyo, nincs fix szeleseg.

Csak egy dolgot nem ertek. Hogy tudom a menut egyvonalba hozni a tartalmi reszel, erre celzok (piros csikal bejeloltem): http://dl.getdropbox.com/u/1924024/weblap2.jpg

Azert kerdem, mert a navbar nincs wrapper-ben ezert nem fog ugy nyulni mint a tartalom :)
3

Vilagosabb leszek

zoliky · 2009. Okt. 13. (K), 17.25
Itt van egy demo: http://86.125.253.236/demo/
Hogy tudnam a "Navbar text"-et egyvonalba hozni a "lorem ipsum..." szovegel, es ugyanakkor ha kicsinyitem a browszer ablakat egyutt huzodjanak ossze.

Ok, tudom a navbar nincs befoglaloban (wrapper) eppen ez lenne a baj, es erre keresek megoldast.
4

Keress rá ezekre: float,

mgergo90 · 2009. Okt. 13. (K), 18.09
Keress rá ezekre: float, tableles design
5

nem ertem mi koze ide a

zoliky · 2009. Okt. 13. (K), 18.23
nem ertem mi koze a float-nak. Szerintem nem erted mit akarok csinalni. Van egy weblap amelynek a felso reszet nem tudom wrapper-be rakni, mert a szinek ki kell nyujanak az egesz kepernyore... Ugyanakkor szeretnem ha a felso resz egyvonalba lenne a tartalmi reszel, ugyanugy mintha wrapperbe lenne.

Itt van egy hasonlo oldal: http://www.cigionline.org/

Gondoltam ezert jobb a body hatternek berakni az egesz felso reszt, hogy aztan mindet wrapper-be rakjam, de ugy sem jo! Mindenki mast ir. Egyaltalan tudjatok mit is akarok csinalni? Bocs ha nem voltam elege vilagos.
6

Igy mukodne: <div

zoliky · 2009. Okt. 13. (K), 19.26
Igy mukodne:
  1. <div id="header">  
  2.    <div class="wrapper">  
  3.       <h2><?php print $site_name; ?></h2>  
  4.    </div>  
  5. </div>  
  6.       
  7. <div id="navbar">  
  8.    <div class="wrapper">  
  9.       <?php if (isset($primary_links)) { ?><?php print theme('links', $primary_links, array('class' => 'links', 'id' => 'navlist')) ?><?php } ?>  
  10.    </div>  
  11. </div>  
  12.   
  13. <div id="main">  
  14.   <div class="wrapper">  
  15.     <div id="content">  
  16.     </div>  
  17.   
  18.     <div id="sidebar">  
  19.     </div>  
  20.   </div>  
  21. </div>  
CSS:
  1. .wrapper {  
  2.    width: 760px;  
  3.    margin: 0 auto;  
  4. }  
Ennyi non-szemantikus DIV-et benyomni nem semmi, de jobb megoldast nem tudok.