Blbe zarovnavanie

Svolo · Napísal **Svolo**: 22.09.2008 19:04

Zdarec. Mam taky problem, ktory sa vyskytuje len v najnovsej Opere. Mam stranku http://www.edasalon.sk/design/ a CSS http://www.edasalon.sk/design/style.css . Kodujem design a len v Opere mi robi, ze ked si to nacitate prvy krat, tak je ta stranka tak divne zarovnana naspodok a az ked date refresh tak sa zarovna odhora normalne. A tiez my logo poziciuje inak ako v Mozzile. Btw. v Mozzile mi zas nefunguju buttony, resp. funguju ale len na vrchnej hranici obrazkov. Co sa tyka IE, tak najprv musim mat na 100% Operu a Mozzilu a potom urobim aj styl pre IE. Poradite?

Upozornujem, ze uz sa sice venujem webom a html a CSS asi rok, ale prakticke skusenosti su zatial skoro ziadne, kedze toto je moja prva zakazka, kedze doteraz som mal poriadne stary pocitac.

stenley · Napísal **stenley**: 22.09.2008 19:32

mno neviem, mne sa to v opere zobrazuje normalne...

asi to nepomoze, ale skus si vymazat cache...

Svolo · Napísal autor témy **Svolo**: 22.09.2008 19:42

No mne to vzdy pri prvom nacitani v najnovsej Opere zobrazuje takto :
http://images.grafika4u.sk/obrazky/edasalon.PNG
A az ked dam refresh sa to hodi normalne.

Tominator · Napísal **Tominator**: 22.09.2008 20:05

si to pozri pod IE 7, potom bude nasledovať jedno dlhe "ahááá"

dedko45 · Napísal **dedko45**: 22.09.2008 20:26

je tam blby fix...to sa da lahko vyriesit.

Blackshadow · Napísal **Blackshadow**: 22.09.2008 22:02

nechcem ta strasit, ale:

IE5.5

IE6

IE7

neutronmind · Napísal **neutronmind**: 22.09.2008 23:04

Hm, zaujimave s tou Operou, podla mna tam nemusis ani pouzivat position: relative;, potom by to imho islo...

Svolo · Napísal autor témy **Svolo**: 23.09.2008 17:06

No oka skusim bez position:relative.

Btw & omg co sa tyka toho IE, najprv potrebujem tu Operu a Mozzilu. Ale dost ma zaujima, preco v tej Mozzile nefunguju te buttony.

don jebot · Napísal **don jebot**: 23.09.2008 17:10

mozo ich mas prekrite inym divom mne to robilo na jednej stranke tiez potom som musel ist na to cez z-index .. ale neviem ci je aj tvoj problem...

Svolo · Napísal autor témy **Svolo**: 23.09.2008 17:45

No tak to zarovnavanie odhora bez position:relative a ani s margin-top:0px nefunguje a fakt ma to stve neviete v com to je?

don jebot · Napísal **don jebot**: 23.09.2008 18:35

ak ti to nepojde posli mi SS a zajtra v noci sa ti na to pozrem..

don jebot · Napísal **don jebot**: 24.09.2008 23:21

no nech sa paci :

Kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<!-- Mirrored from www.edasalon.sk//design/ by HTTrack Website Copier/3.x [XR&CO'2007], Wed, 24 Sep 2008 19:47:57 GMT -->
<head>

  <link href="style.css" rel="stylesheet" type="text/css" >
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" >
  <meta name="keywords" content="edasalon" >
  <meta name="description" content="EDA Salon Edita Urbanova kadernictvo, kozmetika" >
  <meta name="author" content="Švolo - Martin Švolík; dedko45" >
  <meta name="robots" content="all, follow" >
  <meta content="sk" http-equiv="content-language" >
  <meta http-equiv="Content-Script-Type" content="text/javascript" >
  <meta http-equiv="Content-Style-Type" content="text/css" >
    <meta http-equiv="refresh" content="3">
  <link rel="shortcut icon" href="http://www.edasalon.sk//design/favicon.ico">
  <title>EDA Salón - Edita Urbanová | Vitajte</title>

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<!--[if IE]>
  <link rel="stylesheet" href="fix.css" type="text/css" />
  <![endif]-->
</head>
<body>
<div id="center">
<div id="header">


<ul id="menu">
    <li><a class="home" href="index9ba3.html?page=home"></a> </li>
    <li><a class="galery" href="index9ba3.html?page=home"></a> </li>
    <li><a class="hair" href="index9ba3.html?page=home"></a> </li>
    <li><a class="cennik" href="index9ba3.html?page=home"></a> </li>
    <li><a class="mapa" href="index9ba3.html?page=home"></a> </li>
    <li><a class="kontakt" href="index9ba3.html?page=home"></a> </li>
</ul>



<a href="#" id="logo"><img src="./logo.png" /></a>
</div>
<div id="wrap">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean et est a dui semper facilisis. Pellentesque       placerat elit a nunc. Nullam tortor odio, rutrum quis, egestas ut, posuere sed, felis. Vestibulum placerat feugiat nisl. Suspendisse lacinia, odio non feugiat vestibulum, sem erat blandit metus, ac nonummy magna odio pharetra felis. Vivamus vehicula velit non metus faucibus auctor. Nam sed augue. Donec orci. Cras eget diam et dolor dapibus llicitudin. In lacinia, tellus vitae laoreet ultrices, lectus ligula dictum dui, eget condimentum velit dui vitae ante. Nulla nonummy augue nec pede. Pellentesque ut nulla. Donec at libero. Pellentesque at nisl ac nisi fermentum viverra. Praesent odio. Phasellus tincidunt diam ut ipsum. Donec eget est.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean et est a dui semper facilisis. Pellentesque       placerat elit a nunc. Nullam tortor odio, rutrum quis, egestas ut, posuere sed, felis. Vestibulum placerat feugiat nisl. Suspendisse lacinia, odio non feugiat vestibulum, sem erat blandit metus, ac nonummy magna odio pharetra felis. Vivamus vehicula velit non metus faucibus auctor. Nam sed augue. Donec orci. Cras eget diam et dolor dapibus llicitudin. In lacinia, tellus vitae laoreet ultrices, lectus ligula dictum dui, eget condimentum velit dui vitae ante. Nulla nonummy augue nec pede. Pellentesque ut nulla. Donec at libero. Pellentesque at nisl ac nisi fermentum viverra. Praesent odio. Phasellus tincidunt diam ut ipsum. Donec eget est.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean et est a dui semper facilisis. Pellentesque       placerat elit a nunc. Nullam tortor odio, rutrum quis, egestas ut, posuere sed, felis. Vestibulum placerat feugiat nisl. Suspendisse lacinia, odio non feugiat vestibulum, sem erat blandit metus, ac nonummy magna odio pharetra felis. Vivamus vehicula velit non metus faucibus auctor. Nam sed augue. Donec orci. Cras eget diam et dolor dapibus llicitudin. In lacinia, tellus vitae laoreet ultrices, lectus ligula dictum dui, eget condimentum velit dui vitae ante. Nulla nonummy augue nec pede. Pellentesque ut nulla. Donec at libero. Pellentesque at nisl ac nisi fermentum viverra. Praesent odio. Phasellus tincidunt diam ut ipsum. Donec eget est.
</p>   
</div>
<div id="footer">
</div>
</div>




</html>

CSS :

Kód:

html{margin:0px;padding:0px;}
body{background: #ff9833 url(./img/pas.png) repeat-x;text-align:center;margin:0 auto;}
img{border:none;margin:0px;padding:0px;}
div#center{position:relative;text-align:center;margin:0 auto;width:830px;height:100%;}
div#header{background: transparent url(./img/head.png) no-repeat;width:830px;height:276px;margin-top:70px;}
div#wrap{background: transparent url(./img/obsah.png) repeat-y;width:830px;height:auto;text-align:left;}
p{margin:0px;padding:10px;}
div#footer{background:transparent url(./img/pata.png) no-repeat;width:830px;height:96px;}
a#logo{float:left;margin:0px;margin-left:10px;}
a#logo img{margin:0px;padding:0px;}

ul#menu {position:relative; width:782px;margin:0px;padding:0px;padding-left:19px; list-style-type:none;padding-top:30px;}
ul#menu   a:hover 
  {opacity: 0.7; -moz-opacity: 0,7; }

.home    {width:149px; height:51px; background: url('img/home.png') no-repeat; display:block; float:left }
.galery  {width:119px; height:51px; background: url('img/galery.png') no-repeat; display:block; float:left }
.hair    {width:118px; height:51px; background: url('img/hair.png') no-repeat; display:block; float:left }
.cennik  {width:119px; height:51px; background: url('img/cennik.png') no-repeat; display:block; float:left }
.mapa    {width:126px; height:51px; background: url('img/mapa.png') no-repeat; display:block; float:left }
.kontakt {width:151px; height:51px; background: url('img/kontakt.png') no-repeat; display:block; float:left }

fix

Kód:

/*FIX PRE IE7*/
#header a img {margin-top:-50px;position:relative;}
#header ul{margin-left:0px;margin-top:0px;width:810px;height:51px;float:left;}
#header ul a.home    {width:149px; height:51px; background: url('img/home.png') no-repeat; display:block;margin-top:0px; }
#header ul a.galery  {width:119px; height:51px; background: url('img/galery.png') no-repeat; display:block;margin-top:-19px;}
#header ul a.hair    {width:118px; height:51px; background: url('img/hair.png') no-repeat; display:block;margin-top:-38px; }
#header ul a.cennik  {width:119px; height:51px; background: url('img/cennik.png') no-repeat; display:block;margin-top:-57px;margin-left:385px;}
#header ul a.mapa    {width:126px; height:51px; background: url('img/mapa.png') no-repeat; display:block;float:right;margin-top:-76px;margin-right: 160px;}
#header ul a.kontakt {width:151px; height:51px; background: url('img/kontakt.png') no-repeat; display:block;float:right;margin-top:-95px;margin-right: 10px;}

V IE 6 som to nepozeral bude to tam urcite rozhadzana na 100% tam si to uprav, pretoze ten fix na IE nie je dobre rieseny a aj menu by sa malo inak riesit kazdopadne v FF, OPERE, IE 7 ide ako ma... :combat:

(ja som cerveny zlty je IE)

Svolo · Napísal autor témy **Svolo**: 25.09.2008 7:24

Och no diki mariachi

Svolo · Napísal autor témy **Svolo**: 26.09.2008 7:24

Sorry don jebot....ja som si az teraz vsimol ze som podakoval dakomu inemu

Blbe zarovnavanie

Podobné témy