css pre operu?

neopagan · Napísal **neopagan**: 05.10.2008 12:10

Mam malicky problem - mam horizontalne menu vertikalne centrovane. Vo vsetkych browseroch je to vycentrovane /FF, IE6, IE7, Chrome, Safari,atd.../ okrem Opery. Tam je to menu posunute o par pixelov vyssie. Potrebujem zvlast padding pre Operu. Da sa to nejako zapisat v html?

Pre IE6 som zvykol takto:

Kód:

<!--[if lt IE 7.]>
<style>
.menu {padding-top:15px;}
</style>
<![endif]-->

Takto to pekne funguje, ale da sa taketo nieco aj pre Operu?

walther · Napísal **walther**: 05.10.2008 12:11

neopagan · Napísal autor témy **neopagan**: 05.10.2008 12:31

Hm, tak by ste mi vedeli poradit, ako vertikalne vycentrovat horizontalne menu bez toho, aby som pouzil padding-top?

CSS:

Kód:

.menu {text-align: center; margin-top: 0px;padding-top: 0px; background-color: #C0C0C0;height: 40px;vertical-align: middle;}

ul {margin: 0;list-style-type: none;}  
li {display: inline;margin: 0;padding: 0;}

.pad {padding-left: 2.6em;}

li a{font-size: 12px; text-decoration: none; color: white;font-weight: bold;  }
li a:hover{font-size: 12px; color: black;font-weight: bold; }
li span a{font-size: 12px; color: black;font-weight: bold; } </style>

ak pridam do ul {... padding-top:10px;}, tak to bude v strede, ale v Opere to je posunute vyssie.

HTML:

Kód:

<div class="menu">
      <ul>
        <li class="pad"><span><a href="">MENU</a></span></li>
        <li class="pad"><a href="">MENU</a></li>
        <li class="pad"><a href="">MENU</a></li>
        <li class="pad"><a href="">MENU</a></li>
        <li class="pad"><a href="">MENU</a></li>
        <li class="pad"><a href="">MENU</a></li>
        <li class="pad"><a href="">MENU</a></li>
        <li class="pad"><a href="">MENU</a></li>
      </ul>
      
    </div>

jablko05 · Napísal **jablko05**: 05.10.2008 12:34

ked neces pouzit padding tak pouzi margin.. preco to vlastne nechces pouzit?

neopagan · Napísal autor témy **neopagan**: 05.10.2008 13:05

ved pisem jasne preco to nechcem pouzit: ked pouzijem padding alebo margin top, tak vsade to pomoze, ale v OPERE to zostane posunute vyssie a NIE v strede! Od zaciatku temy to pisem, ved to je ten problem. Precitaj si lepsie prispevky.

Niekto by pripadne vedel pomoct?

exoomer · Napísal **exoomer**: 05.10.2008 13:16

ciastocne mas toto: http://www.pcforum.sk/lt-gt-vt47960.html

neopagan · Napísal autor témy **neopagan**: 05.10.2008 14:06

No ja som skusil toto: <link rel="stylesheet" type="text/opera" href="styleo.css" />

ale zda sa ze Opera to veselo ignoruje, takze to nepomaha.

Neviem preco, ale Opera sa mi nezdala uz od zaciatku. Este aj na IE6 viem lahsie optimalizovat web ako na Operu. Ked vsade vsetko sedi, tak v Opere nie. /cest vynimkam/.

don jebot · Napísal **don jebot**: 05.10.2008 14:58

skontroluj ci mas spravne zapisany doctype... preco miesas jednotky px a em a pri hodnotach zadavaj aj jednotky nie iba 0 ....skus posunut cely div a nie iba ul padding top nepouzivaj skor margin...a

walther · Napísal **walther**: 05.10.2008 15:02

don jebot, a také, že keď máš nulovú hodnotu, jednotky písať je totálna zbytočnosť, si ešte nepočul ?

stenley · Napísal **stenley**: 05.10.2008 19:39

>neopagan: cez absolutne pozicovanie si to skusal?

neopagan · Napísal autor témy **neopagan**: 06.10.2008 10:45

myslis ze .menu pridam relativnu a ul absolutnu poziciu? Ziadna zmena. V opere je to stale asi o 3-4 pixely vyssie

stenley · Napísal **stenley**: 06.10.2008 11:33

ano, presne tak som to myslel, skus tento kod:

CSS:

Kód:

* { margin:0; padding:0; border:0; }
#menu { position:relative; height:40px; background:#cecece; word-spacing:20px; }
#menu ul { position:absolute; height:20px; list-style:none; top:50%; margin-top:-10px; }
#menu ul li { display:inline; }

HTML:

Kód:

<div id="menu">
   <ul>
           <li><span><a href="">MENU</a></span></li>
           <li><a href="">MENU</a></li>
           <li><a href="">MENU</a></li>
           <li><a href="">MENU</a></li>
           <li><a href="">MENU</a></li>
           <li><a href="">MENU</a></li>
           <li><a href="">MENU</a></li>
           <li><a href="">MENU</a></li>
      </ul>
</div>

neopagan · Napísal autor témy **neopagan**: 06.10.2008 13:44

tento kod stenley funguje dobre, ked ho nahodim do prazdneho html. Ked ho pouzijem v mojom kode, je tam este stale rozdiel asi 2px. Takze to sposobuje asi nieco ine. Ked to nastavim v Opere dobre, vo FF je to posunute, a opacne. Ale nevadi, tie 2px nie je taky problem.

stenley · Napísal **stenley**: 06.10.2008 13:58

ked si s tym nebudes vediet rady, tak postni kod a pozrieme sa na to...

suchy · Napísal **suchy**: 06.10.2008 14:01

ten rozdiel bude sposobovat pravdepodobne margin ineho prvku. skus dat na zaciatok * {margin:0; padding:0;} ci ta 2px medzera zmizne. tak sa mi zda, ze rozne prehliadace maju pre niektore prvky defaultne nastavene ine odsadenie.

neopagan · Napísal autor témy **neopagan**: 06.10.2008 14:16

nepomohol ani ten margin. No tak nahodim tu povodnu cast mojho kodu.
stenley: word-spacing nemozem pouzit, kedze mam aj dvojslovne polozky menu... ale to je teraz jedno.

CSS:

Kód:

body {font-family: verdana, tahoma, arial, san-serif; background-image: url(images/bg.jpg);
background-repeat: repeat-x; background-position: top; padding: 0;margin: 0;}

img {border: 0;}

#container {width: 990px; margin-left: auto; margin-right: auto; }


div#header {
width:100%; height:150px;
text-align: left;
background-image: url(images/top.jpg);
background-repeat: no-repeat; background-position: top center; position: relative;}

.top {height: 91px; width: 100%;}
.reklama1{vertical-align: top; margin-top: 21px; margin-left: 17px;position: absolute;}

.menu {text-align: center; margin-top: 0px;padding-top: 0px;}

ul {margin: 0;padding-top:18px;list-style-type: none;}
li {display: inline;margin: 0;padding: 0;}

.pad {padding-left: 2.6em;}
.pad1 {margin-left: -2.5em;}

li a{font-size: 12px; text-decoration: none; color: white;font-weight: bold;  }
li a:hover{font-size: 12px; color: black;font-weight: bold; }
li span a{font-size: 12px; color: black;font-weight: bold; } 

HTML:

Kód:

<!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" xml:lang="cz" lang="cz" >
  <head>
    <title>Trh pudy
    </title>
    <meta http-equiv="content-type" content="text/html;charset=windows-1250" />
    <link rel="stylesheet" type="text/css" href="style2.css"  />
  </head>
  <!--[if lt IE 8.]>
  <style>
  .pad1 {margin-left: 0;}
  .pad {padding-left: 2.7em;}
  </style>
  <![endif]-->
  <body>
    <div id="container">
      <div id="header">
        <div class="top">
          <a href="#">
            <img src="images/logo.jpg" alt="logo" width="256" height="91" /></a>
          <a href="#">
            <img src="images/reklamatop.jpg" width="468" height="60" class="reklama1" alt="banner"/></a>
        </div>
        <div class="menu">      
          <ul>        
            <li class="pad1">
              <span>
                <a href="">DOMÁCÍ TRH</a>
              </span></li>        
            <li class="pad">
              <a href="">CENA PŮDY</a></li>        
            <li class="pad">
              <a href="">TRH EU</a></li>        
            <li class="pad">
              <a href="">NABÍDKA PŮDY</a></li>        
            <li class="pad">
              <a href="">POPTÁVKA PŮDY</a></li>        
            <li class="pad">
              <a href="">ČLÁNKY</a></li>        
            <li class="pad">
              <a href="">SVĚTOVÉ TRHY</a></li>        
            <li class="pad">
              <a href="">O NÁS</a></li>      
          </ul>           
        </div>
      </div>
      
      </div>

na zivo je to tu: www.inbazar.sk/skuska/index2.html

css pre operu?

Podobné témy