| Autor | Zpráva | ||
|---|---|---|---|
| 7777 Profil |
Takže mám takýto problém,tvorím web a všetko sa mi už podarilo urobiť automaticky. Čiže jeden prvok posunie druhý naľavo a sám je napravo. A všetko ide dobre pomocou float:left Bohužiaľ ponuky pod menu sa nie a nie spravne napoziciovať? Poziciujú sa napravo miesto dolu. Jeden sa mi už podarilo dostať dolu ale blokuje ostatné?
position:relative; float:left; left:-20%; top:360px; position:relative; float:left; left:-40%; top:820px; Takto by som to chcel mať http://nekonecne.net/ ,ale aby sa to poziciovalo automaticky. Toto som napozicioval surovo tým že som to vyňal s toku textu ale chcem aby sa to poziciovalo automaticky. |
||
| user243 Profil |
#2 · Zasláno: 12. 2. 2013, 14:35:53
místo toho, jak by jsi to chtěl, ukaž, jak to máš;
takhle se mi na první pohled moc nelíbí záporná left hodnota v procentech; |
||
| 7777 Profil |
#3 · Zasláno: 12. 2. 2013, 14:44:31
Tento príklad je moja práca. Menu som nejako cez clear:both; dostal kam chcem teraz mám problém z obsahom,ktorý je až úplne dole pod menu. Vlastnosť clear:both mi ruší obtekanie. A pritom menu má nastavené float:left kým obsah má nastavené float:right. Potrebujem poradiť ako ich dostať vedľa seba.
body {
background:#000000;
font-style: normal;
}
#kontajner {
background:#ffffff;
position:absolute;
right:10%;
width:1024px;
height:auto;
min-height:800px;
text-align:center;
border-style: double;
border-color:red;
border-radius:15px;
}
#lista {
position: relative;
width:1004px;
height:200px;
margin:auto;
top:-10px;
border-radius:10px;
background-color:blue;
}
#menu {
position:relative;
width:210px;
height:auto;
min-height:350px;
height:auto;
right:auto;
float:left;
left:10px;
border-style: solid;
border-radius:10px;
background-color:red;
margin-bottom:10px;
}
#menu2 {
position:absolute;
width:190px;
height:auto;
min-height:250px;
height:auto;
top:50px;
right:5px;
left:8px;
border-style: solid;
border-radius:10px;
background-color:silver;
}
li {
position:relative;
list-style-type:square;
float: left;
font: italic bold 19px Arial;
left:5px;
top:5px;
}
ul {
position:relative;
list-style-type:square;
float: left;
font: italic bold 13px Arial;
left:-35px;
top:auto;
}
#navstevnost{
position:relative;
display: block;
width:210px;
height:auto;
min-height:350px;
height:auto;
float:left;
left:-20%;
top:360px;
border-style: solid;
border-radius:10px;
background-color:gold;
margin-bottom:10px;
}
#navstevnost2{
position:absolute;
width:190px;
height:auto;
min-height:250px;
height:auto;
top:50px;
right:5px;
left:8px;
border-style: solid;
border-radius:10px;
background-color:silver;
}
#kontakty{
position:relative;
width:210px;
height:auto;
min-height:350px;
height:auto;
float:left;
left:-41%;
top:720px;
display: block;
border-style: solid;
border-radius:10px;
background-color:blue;
margin-bottom:10px;
}
#kontakty2{
position:absolute;
width:190px;
height:auto;
min-height:250px;
height:auto;
top:50px;
right:5px;
left:8px;
border-style: solid;
border-radius:10px;
background-color:silver;
}
#odkazovac{
position:relative;
width:210px;
height:auto;
min-height:500px;
height:auto;
right:auto;
float:left;
left:-62%;
top:1080px;
display: block;
border-style: solid;
border-radius:10px;
background-color:green;
margin-bottom:10px;
}
#odkazovac2{
position:absolute;
width:190px;
height:auto;
min-height:350px;
height:auto;
top:50px;
right:5px;
left:8px;
border-style: solid;
border-radius:10px;
background-color:silver;
}
#obsah {
position:relative;
background-color:#000000;
color:#ffffff;
width:780px;
height:auto;
min-height:880px;
left:-10px;
margin-bottom:10px;
float:right;
border:10px;
top:-365px;
border-radius:10px;
}
#pozicia{
position:relative;
width:770px;
height:auto;
left:15px;
top:10px;
}
#paticka {
position:relative;
width:1004px;
right:0%;
height:50px;
margin:auto;
top:auto;
clear:right;
bottom:10px;
border-radius:10px;
background-color:blue;
}
.bloky {
float: left;
display: block;
width: 230px;
height: auto;
border-style: double;
text-align: center;
margin:0 20px 20px 0;}
.protektor {
float: left;
display: block;
width: 745px;
height: auto;
border-style: double;
text-align: center;
margin:0 20px 20px 0;}
img.odkazy {
border:solid #000000 2px;
}
.podtitul {
text-align: center;
font-weight: bold;
text-decoration: overline
}
a:link, a:visited {text-decoration: none} |
||
| _es Profil |
#4 · Zasláno: 12. 2. 2013, 14:46:28
7777:
„som to vyňal s toku textu“ Asi si si poriadne nenaštudoval, ako funguje position:relative: Position
|
||
| 7777 Profil |
Poradíte mi teda ako zariadiť aby sa všetko samo poziciovalo? Umelo som to napozicioval pomocou zápornej hodnoty top. Tak už som si to urobil i sám aby sa mi to automaticky poziciovalo.
|
||
|
Časová prodleva: 11 let
|
|||
0