| Autor | Zpráva | ||
|---|---|---|---|
| smrad Profil * |
#1 · Zasláno: 27. 5. 2011, 15:57:13
Hraju si se sloupcovým layoutem. První řádek obsahuje jednen "sloupec", druhý řádek 3 sloupce a třetí řádek opět jeden sloupec. Ovšem, nemohu docílit třetího sloupce. CSS vypadá takto
body
{
margin: 0; padding:0;
background: #ffffff;
text-align: center;
}
#hlavicka
{
height: 150px;
padding: 10px;
border: 1px solid blue;
background: #dddddd;
}
#obsah
{
width: 900px;
margin: 1em auto;
border: 1px solid blue;
text-align: left;
}
#levypanel
{
float: left;
width: 200px;
margin: 0; padding:0;
}
#levypanel-obsah
{
margin: 0;
padding: 0.5em 1em;
}
#hlavnipanel
{
margin: 0 0 0 200px;
padding: 0;
}
#hlavnipanel-obsah
{
margin: 0;
padding: 0.5em 1em;
}
#pravypanel
{
float: right;
width: 200px;
margin: 0; padding:0;
}
#pravypanel-obsah
{
margin: 0;
padding: 0.5em 1em;
}
#paticka
{
padding: 10px;
border-top: 1px solid blue;
background: #dddddd;
}
hr.cleaner
{
clear:both;
display: none
}<body>
<div id="obsah">
<div id="hlavicka">
<h1>Hlavička</h1>
</div>
<hr class="cleaner" />
<div id="levypanel">
<div id="levypanel-obsah">
<h4>Menu s pevnou šířkou</h4>
<ul>
<li><a href="index.html">Odkaz 1</a></li>
<li><a href="index.html">Odkaz 2</a></li>
<li><a href="index.html">Odkaz 3</a></li>
<li><a href="index.html">Odkaz 4</a></li>
<li><a href="index.html">Odkaz 5</a></li>
</ul>
</div>
</div>
<div id="hlavnipanel">
<div id="hlavnipanel-obsah">
<h1>Obsah s pevnou šířkou</h1>
<p>Text</p>
</div>
</div>
<div id="pravypanel">
<div id="pravypanel-obsah">
<h4>Menu s pevnou šířkou</h4>
<ul>
<li><a href="index.html">Odkaz 1</a></li>
<li><a href="index.html">Odkaz 2</a></li>
<li><a href="index.html">Odkaz 3</a></li>
<li><a href="index.html">Odkaz 4</a></li>
<li><a href="index.html">Odkaz 5</a></li>
</ul>
</div>
</div>
<hr class="cleaner" />
<div id="paticka">
Patička
</div>
</div>
</body> |
||
| habendorf Profil |
#2 · Zasláno: 27. 5. 2011, 16:01:43
Prostřední sloupec floatni doleva a dej mu šířku 500px.
|
||
| smrad Profil * |
#3 · Zasláno: 27. 5. 2011, 16:53:41
Bohužel nepomohlo.
|
||
| Liennie Profil |
#4 · Zasláno: 27. 5. 2011, 20:01:43
Posuň v kódu pravý sloupec před hlavní.
<div id="levypanel"></div> <div id="pravypanel"></div> <div id="hlavnipanel"></div> |
||
| smrad Profil * |
#5 · Zasláno: 27. 5. 2011, 21:39:16
Pořád to není ono. Ještě bych potřeboval, aby se levý a pravý panel natahoval na celou výšku stránky. Koukněte sem, pokud nerozumíte. Jinak CSS je
/*Layout*/
body
{
height: 100%;
margin: 0;
padding: 0;
background: #ffffff;
text-align: center;
}
#logo
{
height: 150px;
padding: 10px;
border: 0px solid blue;
background: #dddddd;
-moz-border-radius: 70px 70px 0px 0px;
-webkit-border-radius: 70px 70px 0px 0px;
border-radius: 70px 70px 0px 0px;
}
#obsah
{
width: 900px;
margin: 1em auto;
border: 1px solid blue;
text-align: left;
overflow: hidden
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
#levy
{
float: left;
width: 200px;
margin: 0;
padding:0;
}
#pravy
{
float: right;
width: 200px;
margin: 0;
padding:0;
}
#stred
{
text-align: justify;
width: 500px
/*float: left;*/
margin: 0 0 0 200px;
padding: 0;
}
.text
{
margin: 0;
padding: 0.5em 1em;
}
#paticka
{
width: 500px;
height: 10px;
}
#paticka-obsah
{
width: 100%;
height: 10px;
padding: 10px;
border-top: 1px solid blue;
background: #dddddd;
}
hr.cleaner
{
clear:both;
display: none
}
/*Text*/a index.html
<body>
<div id="obsah">
<div id="logo">
<h1>Logo</h1>
</div>
<!-- Levý sloupec -->
<div id="levy">
<div class="text">
Levý sloupec
</div>
</div>
<!-- Pravý sloupec-->
<div id="pravy">
<div class="text">
Pravý sloupec
</div>
</div>
<!-- Text -->
<div id="stred">
<div class="text">
Text
</div>
</div>
</div>
</body>
</html> |
||
| Liennie Profil |
#6 · Zasláno: 27. 5. 2011, 23:44:22
Ve stylu ti za šířkou #stred chybí středník a prohlížeč (testováno v Mozille Firefox 3.6) to kvůli tomu zobrazuje špatně.
Mimochodem, cleaner ti s display: none; nebude fungovat. Použij visibility: hidden; a na odstranění vzniklé mezery vynuluj height, margin a border. |
||
|
Časová prodleva: 13 let
|
|||
0