| Autor | Zpráva | ||
|---|---|---|---|
| ferar720 Profil |
#1 · Zasláno: 20. 2. 2014, 11:58:31
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 |
#3 · Zasláno: 20. 2. 2014, 12:43:02
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 |
#4 · Zasláno: 20. 2. 2014, 13:12:29
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 |
#5 · Zasláno: 20. 2. 2014, 14:14:29
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 |
#7 · Zasláno: 20. 2. 2014, 16:12:14
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 |
#8 · Zasláno: 20. 2. 2014, 16:15:31
|
||
| 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 |
#10 · Zasláno: 20. 2. 2014, 17:09:42
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 |
#12 · Zasláno: 21. 2. 2014, 15:02:24
Dakujem za pomoc a rady. Použil som postup jsfiddle.
|
||
|
Časová prodleva: 10 let
|
|||
0