CSS layout + vertical menu

dafo · Napísal **dafo**: 26.10.2008 21:58

Neviem snoril som tu dosť ale nenašiel som nič čo by mi mohlo pomoct.

No moj príspevok spočíva v tom ze neviem napasovať obsah(stred) vedľa menu. Vlastne je do 2 layout .....

CSS

Kód:

#obal {
width:790px;
margin:auto;
}

#hlavicka {
height:200px;
width:600px;
float:right;
text-align:center;
font-size:20px;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-weight:600;
background-image:url(images/logo.jpg);
}

#menu {
width:150px;
float:left;
margin-top:230px;
}

#stred {
width:600px;
float:right;
}

#peticka {
width:600px;
margin-left:190px;
background-image:url(images/menu_bigs.gif);
text-align:center;
color:#FFFFFF;
clear:both;
}

HTML

Kód:

<div id="obal">             
      <div id="hlavicka"></div>               
      <div id="menu">menu</div>  
      <div id="stred">Tu bude obsah</div>    
      <div id="peticka">peta</div>         
</div> 

lámem nad tým hlavu uz skoro druhý den a nič .... už som asi totálny sklerotik ....

Blackshadow · Napísal **Blackshadow**: 26.10.2008 22:10

ako myslis, ze vedla? ved je to vedla, nie??
alebo to chces tak, aby menu bolo v jednom pase aj so stredom pod hlavickou ?

dafo · Napísal autor témy **dafo**: 26.10.2008 22:18

nie práve chcem aby bolo menu zarovno "so stredom" a hlavička nad "stredom" lenže ten"stred" mi uteká až pod koniec menu a nechcem to robit position:absolute ..... lepšie bude ked sa kukneš čo to robi

LINK

Blackshadow · Napísal **Blackshadow**: 26.10.2008 22:36

http://www.bs-design.sk/weby/dafo/
ohradil som si to cervenymi ciarami, nech viem co robim....
takze tie daj prec a frci to..

dafo · Napísal autor témy **dafo**: 26.10.2008 22:43

profik sa nezapre a teraz mozem do rana studovat ako si to spravil

diki ti moc

Blackshadow · Napísal **Blackshadow**: 26.10.2008 22:49

prva vec, div obal si nemal ukonceny
druha vec, koniec divu menu si mal na konci, daj ho nad toto: <div id="stred">

css si porovnaj.. len nejake floaty som doplnil

dafo · Napísal autor témy **dafo**: 27.10.2008 21:47

tahk sedel som nad tym do pol tretej ale nakoniec som prišiel na to kde je pes zakopaný ..... teraz mam vsak problem s menu v Opere,FF,Google Chrome funguje tak ako ma ale v IE to robi ako keby odseky

CSS layout + vertical menu

css

Kód:

/* menu */

#hlavne_menu {
width:150px;
background-color:#333333;
margin-top:15px;
}

.nadstavba {
background-image:url(images/menu.gif);
background-repeat:no-repeat;
text-align:center;
background-color:#333333;
width:150px;
}

.nadstavbas {
background-image:url(images/menux.gif);
background-repeat:no-repeat;
text-align:center;
background-color:#333333;
width:150px;
}

#ponuka_1 {
width:100%;
background-color:#FFFFF1;
}

#ponuka_2 {
width:100%;
padding-top:15px;
}

#ponuka_3 {
width:100%;
margin-top:15px;
}

.text {
color:#ffffff;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

#hlmenu ul {
list-style: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

#hlmenu {
width: 150px;
}

#hlmenu li a {
text-decoration: none;
border-bottom-color: #FF0000;
}

#hlmenu li a:link, #hlmenu li a:visited {
color: #000000;
display: block;
background-color: #fffff1;
}

#hlmenu li a:hover {
color: #ffffff;
background:  #333333;
}

html

Kód:

<div id="hlavne_menu">
<div id="hlmenu">
<div class="nadstavba text">Menu</div>
      <ul>
         <li><a href="index.php?page=skola" title="O Našej škole"> O škole</a></li>
         <li><a href="index.php?page=trieda" title="Ako vyzerala Naša trieda">Naša trieda</a></li>
         <li><a href="index.php?page=my" title="My ...">O nás</a></li>
         <li><a href="index.php?page=vyucujuci" title="Vyučujúci praktického a teoretického vyučovania">Profesori a majstri</a></li>
         <li><a href="index.php?page=odkazovac" title="Zanechajte odkaz">Odkazovač</a></li>
         <li><a href="index.php?page=news" title="Diane okolo webu a komunity 4.D">Novinky</a></li>
         <li><a href="index.php?page=private" title="Vstup len pre členov triedy">Private</a></li>
         <li><a href="index.php?page=home" title="Späť na ÚVOD">Úvod</a></li>
      </ul>
      <div class="nadstavbas">&nbsp;</div>
      </div>
<div id="ponuka_2">
<div class="nadstavba text">Anketa</div>
<?php $id_ank = 2; include("./anketa/index.php"); ?></div>
<div class="nadstavbas">&nbsp;</div>
</div>
<div id="ponuka_3">
<div class="nadstavba text">Počítadlo</div>
<?php include("./poc/poc.php"); ?>
<div class="nadstavbas">&nbsp;</div>
</div>

Tominator · Napísal **Tominator**: 27.10.2008 21:58

no skúsil by som napr:
li{margin: 0px; padding: 0px}
ul {margin: 0px; padding: 0px}

(osobne si myslím, že to záleží na li, nie na ul ale skús

)

dafo · Napísal autor témy **dafo**: 27.10.2008 22:10

Tominator píše:

no skúsil by som napr:
li{margin: 0px; padding: 0px}
ul {margin: 0px; padding: 0px}

(osobne si myslím, že to záleží na li, nie na ul ale skús

)

nefunguje

už ma asi porazi pol dna sa piplem aby to zobazovalo v Opere a ked sa to podari tak to nezobrazuje v IE :jaw:

Blackshadow · Napísal **Blackshadow**: 27.10.2008 22:17

dopln:
#hlmenu li {
_margin-bottom: -15px;
}

Tominator · Napísal **Tominator**: 27.10.2008 22:21

no ako tak pozerám tak s ul nie je problém skús:

Kód:

#hlmenu li { 
margin: 0px;padding:0px
} 

Blackshadow · Napísal **Blackshadow**: 27.10.2008 22:31

tominator, co tu pises odbrucha?? ved si to skus ! na zaciatok si pridaj * {margin:0;padding:0;} a zistis, ze v marginoch a v paddingoch (ze niesu nulove) to nie je.... takze treba hladat dalej.. a navyse moj sposob funguje,takze problem vyrieseny....

dafo · Napísal autor témy **dafo**: 27.10.2008 22:42

Blackshadow píše:

tominator, co tu pises odbrucha?? ved si to skus ! na zaciatok si pridaj * {margin:0;padding:0;} a zistis, ze v marginoch a v paddingoch (ze niesu nulove) to nie je.... takze treba hladat dalej.. a navyse moj sposob funguje,takze problem vyrieseny....

jj funguje diki .... citim sa uz otravny za take chobotiny ktore keby som asi lepšie kukol tak by som nasiel aj ja ale ked na to clovek hladi 2 hodiny ak sa mu zda byt asi vsetko dobre a pritom je to len takato blbost

Blackshadow · Napísal **Blackshadow**: 27.10.2008 22:48

ja si trochu oddychnem pri takomto..
momentalne riesim ja dropdown menu cez CSS, ktore sa zobrazuje v IE5.5, IE6, IE7, IE8, Firefox 2, Firefox 3, Opera 9.27
ale v novsej Opere 9.6 to menu nezobrazi vobec... a teraz bud mudry

CSS layout + vertical menu

Podobné témy