Autor Zpráva
ferar720
Profil
Dobrý deň,
mám problém s menu padding v Internet Explorer 11, je posunuté nahor o 1px ale v FF a Opera je menu ok prilepené na border. A dalšia vec, potrebujem div obsah urobiť fluid rozťahujúci sa podľa obsahu. Dakujem za rady

http://jsfiddle.net/ferar720/hRy32/

<!doctype html>
<head>
<meta charset="utf-8">
<title>ferar</title>
<style type="text/css">
body {
    background-image: url(../images/pozadie.png);
    background-size: 100%;
}
#center {
    position: relative;
    margin: auto;
    height: 900px;
    width: 900px;
    border: #000;
}
#hlavicka {
    position: absolute;
    height: 141px;
    width: 900px;
    color: #000;
    background-image: url(../images/hlavicka.png);
}
#menu {
    position: absolute;
    height: 20px;
    width: 625px;
    top: 121px;
    background-color: #FFF;
    z-index: 1;
}
#obsah {
    position: absolute;
    height: 735px;
    width: 900px;
    top: 142px;
    background-color: #FFF;
    border-style: solid;
    border-width: 1px;
    border-color: #F00;
    z-index: 0;
}
#paticka {
    position: absolute;
    height: 20px;
    width: 900px;
    top: 878px;
    background-color: #FFFFFF;
    border-top: solid;
    border-width: 1px;
    border-color: #F00;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}
ul {
    font-family: Arial, Verdana;
    font-size: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 3px 24px 3px 24px;
    background: #E4272C;
    white-space: nowrap;
}
ul li a:hover {
    background: #F00;
}
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 10px;
}
li:hover a {
    background: #FF1A1F;
}
li:hover li a:hover {
    background: #FF4A4F;
}
</style>
</head>
<body>
<div id="center">
  <div id="hlavicka"></div>
  <div id="menu">
    <ul>
      <li><a href='index.html'><span>Úvod</span></a></li>
      <li><a href='#'><span>Celá kolekcia</span></a>
        <ul>
          <li><a href='#'><span>Moderné sedacie súpravy</span></a></li>
          <li><a href='#'><span>Kaviarenské kreslá a sedenie</span></a></li>
          <li><a href='#'><span>Taburetky</span></a></li>
          <li><a href='#'><span>Stoličky</span></a></li>
          <li><a href='#'><span>Stolíky a DJ Pulty</span></a></li>
          <li><a href='#'><span>Logá</span></a> </li>
        </ul>
      </li>
      <li><a href='#'><span>Poťahy a materiál</span></a>
        <ul>
          <li><a href='vkzn.html'><span>Vzorkovník koženky</span></a></li>
          <li><a href='vk.html'><span>Vzorkovník kože</span></a></li>
          <li><a href='#'><span>Poťahové látky</span></a></li>
          <li><a href='#'><span>Lamino</span></a></li>
        </ul>
      </li>
      <li><a href='#'><span>Výroba</span></a></li>
      <li><a href='#'><span>Referencie</span></a></li>
      <li><a href='#'><span>Kontakt</span></a></li>
    </ul>
  </div>
  <div id="obsah"></div>
  <div id="paticka">Copyright ferar, 2014</div>
</div>
</body>
</html>
Tomáš123
Profil
ferar720:
#menu {
position: absolute;
height: 20px;
width: 625px;
top: 121px;
background-color: #FFF;
z-index: 1;
}
#obsah {
position: absolute;
height: 735px;
width: 900px;
top: 142px;
background-color: #FFF;
border-style: solid;
border-width: 1px;
border-color: #F00;
z-index: 0;
}

Máš tam 121px a 142px a výšku 20px - tam je ten rozdiel 1px, keď zmeníš 121 na 122 alebo 142 na 141 tak sa medzera stratí.
ferar720
Profil
Dakujem, že mi to nenapadlo, taká drobnosť a upravil som v Menu top 122px.
Ešte keby bol niekto taký dobrý a poradil, čo mám upraviť v divoch aby som mal fluid obsah.
Vdaka
Tomáš123
Profil
ferar720:
ináč IE asi dava border zvnútra preto ti to robí problémy, v ostatných je ten border z vonkajšej strany a tak máš:
121px+1px border+20px=142px;
a IE ti zmenší obsah o veľkosť toho borderu:
120px+1px=142px+medzera

A ten obsah: keď tam máš uvedenú šírku tak bude stále rovnako široký rámček; a naopak keď ju vymažeš tak sa rámček roztiahne podľa toho čo tam napíšeš-ale to by si musel dávať stále na konci riadka "<br>" lebo by bol nekonečný; bohužial neviem o inom spôsobe ale určite existuje aj niečo sofistikovanejšie-možno by si mohol nastaviť šírku na stránkach kde ju chceš meniť osobitne..
ferar720
Profil
Potrebujem premenlivú výšku divu obsah ale výška menu a pätička je stála. A šírka je taktiež napevno nastavená.
Chamurappi
Profil
Reaguji na ferara720:
Jak může být výška menu stálá, když je v něm text? Velikost textu závisí na uživatelském nastavení. (I když ty měnění velikosti písma v Exploreru zamezuješ použitím jednotky px.)
ferar720
Profil
podstatná je pre mňa minimálna výška divu obsah a ked bude textu viac, tak sa zmení výška divu obsah a divu center
Bubák
Profil
ferar720:
podstatná je pre mňa minimálna výška divu obsah
Ha, na to je Min-height.
ferar720
Profil
Ja viem, že existuje min-height ale ako môžem svoj kod upraviť, aby div id obsah bol na výšku roztiahnuteľný ale mal nejaku minimálnu výšku a div id center nemal problem.

Dakujem za rady ale asi to urobím len zmenou tagu height pri každom html súbore.
Bubák
Profil
V prvé řadě vyházej všechno pozicování, absolutní i relativní, pozicování ponechej jenom v menu.
Pro menu nedeklaruj šířku.
Pak dej bloky tak, jak jdou přirozeně za sebou a výšku deklaruj jen pro hlavičku.
Obsahu dej minimální výšku, nebo si najdi "patička vždy dole".
Tomáš123
Profil
http://jsfiddle.net/hRy32/4/
Tu máš premenlivú výšku aj šírku. Ak chceš zväčšiť minimálnu šírku tak zmeň v CSS v dive obsah min-width.
ferar720
Profil
Dakujem za pomoc a rady. Použil som postup jsfiddle.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: