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.

body {
  backgroung: url(../images/bodybg.gif) repeat-x;
}
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.

<div id="wrapper">
  <div id="header">
     <div id="header-inner">
      logo
     </div> <!-- /#header-inner -->

     <div id="navbar">
      navbar
     </div> <!-- /#navbar -->
  </div> <!-- /#header -->
</div>
A "header-inner" es a "navbar" DIV-eknek beallitok egy fix magasagot, peldaul igy

#header-inner {
   height: 300px; /* a fekete resz */

#navbar {
   height: 100px; /* a szurke resz */
}
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:

<div id="header">
logo
</div> <!-- /#header -->

<div id="navbar">
navbar
</div> <!-- /#navbar -->

<div id="wrapper">
  <div id="main">
     <div id="content">
     </div> <!-- /#content -->

     <div id="sidebar">
     </div> <!-- /#sidebar -->
</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:

<div id="header">
   <div class="wrapper">
      <h2><?php print $site_name; ?></h2>
   </div>
</div>
    
<div id="navbar">
   <div class="wrapper">
      <?php if (isset($primary_links)) { ?><?php print theme('links', $primary_links, array('class' => 'links', 'id' => 'navlist')) ?><?php } ?>
   </div>
</div>

<div id="main">
  <div class="wrapper">
    <div id="content">
    </div>

    <div id="sidebar">
    </div>
  </div>
</div>
CSS:

.wrapper {
   width: 760px;
   margin: 0 auto;
}
Ennyi non-szemantikus DIV-et benyomni nem semmi, de jobb megoldast nem tudok.