css pre operu?

neopagan · Napísal **neopagan**: 05.10.2008 12:10 | css pre operu?

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 | css pre operu?

neopagan · Napísal autor témy **neopagan**: 05.10.2008 12:31 | css pre operu?

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 | css pre operu?

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

neopagan · Napísal autor témy **neopagan**: 05.10.2008 13:05 | css pre operu?

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 | css pre operu?

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

neopagan · Napísal autor témy **neopagan**: 05.10.2008 14:06 | css pre operu?

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 | css pre operu?

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 | css pre operu?

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 | css pre operu?

>neopagan: cez absolutne pozicovanie si to skusal?

neopagan · Napísal autor témy **neopagan**: 06.10.2008 10:45 | css pre operu?

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 | css pre operu?

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 | css pre operu?

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 | css pre operu?

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

suchy · Napísal **suchy**: 06.10.2008 14:01 | css pre operu?

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 | css pre operu?

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?

css pre operu?

Podobné témy

Optimalizácia pre FF a Operu

Optimalizácia pre operu a IE

vyhladavaci string heureka.sk pre Operu

CSS Pre IE, Pre Mozillu a pre Chrome

CSS pre iframe

loadovanie CSS pre IE

CSS Vlastna trieda pre anchor

CSS nastavenie vlastnosti pre nadradené

CSS pre IE a FF

hack pre IE v CSS

Optimalizacia CSS pre kazdy browser

css pre IE7 a IE6

Klavesnica pre poloprofesionalne hranie css

CSS iba pre mozillu firefox

Prieskum: preco nepouzivate operu?

[CSS] Zmenšenie písma pre IE7 a IE6