| Autor | Zpráva | ||
|---|---|---|---|
| Camo Profil |
#1 · Zasláno: 23. 12. 2011, 22:13:59 · Upravil/a: Camo
Zdravím,
môže mi prosím vás niekto poradiť s dvojstĺpcovým layoutom a clearovaním? Mám dva stĺpce z ktorých jeden je float:left(menu). A potrebujem v hlavnom stĺpci dávať obrázkom clear:both. No a to spôsobí, že sa taký obrázok vykreslí až pod menu. Pozeral som ten Plaváčkov kód, ale neviem to tam implentovať. Týka sa to divu s id=obsah Kód vyzerá takto: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title><?php //echo $title; ?></title>
<meta name="description" content="<?php //echo $metaDescription ?>">
<style type="text/css">
html, body, div, form, p, img, menu, ul, ol, li, a, h1, h2, h3, table, tr, td{margin:0px; padding:0px}
p{padding-bottom:7px;}
html,body{height:100%}
body, table, form, h1, h2, h3, h4{font-family:verdana}
img{display:block}
.content img{display:inline-block;}
body{background:url('./pictures/giankaBG1.jpg') center top; overflow:scroll}
#obal{Nborder:1px solid green; min-height:100%; min-width:950px; position:relative; padding-bottom:100px; background:url('./pictures/giankaBG2.png') center top repeat-y; }
#vrch{margin:0px auto}
#header{Nborder:1px solid red; margin:0px auto 0px; Nheight:417px; width:976px; position:relative; /*z-index:100koli hover menu //netreba*/}
#header #headIMG1{position:relative; width:942px; height:267px; margin:0px auto;}
#header h1{position:absolute; bottom:0px; left:17px; width:912px /*+padding*/; padding:11px 15px; color:#552222; font-size:1.5em; background-image:url('./pictures/giankaBGh1.png');}
#header #logo{position:absolute; top:25px; left:17px}
#oblucik{margin:0px auto}
#obsah{Nborder:1px solid red; position:relative; margin:0px auto; width:942px; /*min-height:650px;*/}
#obsah h2{Nborder:1px solid red; color:#552222; background-color:#df9755 /*treba zmenit aj #topH2 /toto su aj nadpisy v side bloku*/}
#mainH2{Nborder:1px solid red; margin-left:205px; padding:0px 15px 4px; font-size:1.40em; overflow:visible}
#mainH2 span{position:relative; top:-8px; left:20px; /*font-size:1.2em*/}
#leftSide{Nborder:1px solid red; float:left; width:205px; overflow:hidden}
#leftSide #topH2{/*tj. "Menu"*/Nborder:1px solid red; padding:0px 15px 8px; font-size:1.1em; background:#df9755 url('./pictures/giankaBGh2.png') right top repeat-y;}
#leftSide h2{padding:10px 15px; font-size:1.1em;}
#menu{padding:10px 0px 25px; font-size:0.98em; letter-spacing:1px; font-weight:bold; /*font-family:tahoma*/}
#menu a{display:block; color:#502222 /*#653030*/; text-decoration:none}
#menu ul{Nborder:1px solid red; margin:0px; padding:0px}
#menu li{margin:0px; list-style-type:none}
#menu ul li a{ padding:5px 10px 3px 15px;}
#menu ul li ul li a{padding:5px 10px 3px 30px;}
#menu li a:hover{background-color:#fff0e0}
.content{Nborder:1px solid red; position:relative; margin-left:205px; padding:20px 30px;}
#obsah .content h2, #obsah .content h3, #obsah .content h1{clear:both; padding-bottom:15px; color:#e09000; background-color:transparent; font-size:1.3em}
#obsah img{ -moz-box-shadow: -3px 3px 3px #555; -webkit-box-shadow: -3px 3px 3px #555; box-shadow: -3px 3px 3px #777;}
.dodatok{font-size:0.7em}
.left{float:left; margin:15px 20px 15px 0px; -moz-box-shadow: -3px 3px 3px #bbb; -webkit-box-shadow: -3px 3px 3px #bbb; box-shadow: -3px 3px 3px #bbb;}
.right{float:right; margin:15px 0px 15px 20px; -moz-box-shadow: -3px 3px 3px #bbb; -webkit-box-shadow: -3px 3px 3px #bbb; box-shadow: -3px 3px 3px #bbb;}
.clearovac{clear:both}
#pataBG{Nborder:1px solid red; position:absolute; bottom:0px; left:0px; background:url('./pictures/giankaPata.jpg')center bottom no-repeat; width:100%; height:80px; color:#4d2222}
#pata{Norder:1px solid red; position:absolute; bottom:40px; left:50%; width:910px; margin-left:-450px; 0px ; text-align:right}
#pata a{color:#4d2222; text-decoration:none}
#fotoBox{display:none; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:300; background:url('./pictures/darkScreen.png')}
#fotoBox table{position:absolute; top:0px; left:0px; width:100%; height:100%; valign:center; text-align:center}
#fBG{filter:alpha(opacity=100); opacity:1; margin:0px auto}
#fFG{filter:alpha(opacity=100); opacity:1; margin:0px auto}
#tdfBG{filter:alpha(opacity=0); opacity:0;}
#tdfFG{filter:alpha(opacity=1); opacity:100;}
#fotoBox span{color:#676767; cursor:pointer; font-weight:bold}
#fotoBox span:hover{color:#ccc;}
</style>
<!--[if lt IE 7]>
<style type="text/css">
#obal{height:100%; }
</style>
<![endif]-->
<?php
echo '<script type="text/javascript">
var banerArr=['.$banery.'];
</script>
';
?>
<script src="http://localhost/cukrarengianka.sk/frontend/EventFotogBaner.js"></script>
<script type="text/javascript">
function onloadka(){
banerStart();
onloadGalery();
}
</script>
</head>
<body id="bodyId" onload="onloadka();">
<div id="obal">
<img src="./pictures/giankaBG3.jpg" id="vrch">
<div id="header">
<div id="headIMG1">
<img src="./pictures/giankaBaner.jpg" id="headIMG2">
</div>
<h1>
<?php echo $h1; ?>
</h1>
<img src="./pictures/giankaLogo.png" id="logo">
</div>
<img src="./pictures/giankaBG4.png" id="oblucik">
<div id="obsah">
<div id="leftSide">
<h2 id="topH2">Menu</h2>
<div id="menu">
<?php echo $menu; ?>
</div>
<h2>Náhodná fotka</h2>
<p>Pede libero Vivamus felis dui auctor nulla at convallis hendrerit eu. Morbi ultrices odio massa eros consectetuer tempor eros tellus dictumst volutpat. Non volutpat tristique Morbi Fusce euismod magna.</p>
<p>Mattis pretium ullamcorper metus nascetur Cras porta condimentum purus et ac. Enim faucibus vel Aliquam elit faucibus sapien Lorem eu ac.</p>
</div>
<div id="content">
<?php echo $obsah; ?>
</div>
<div class="clearovac"></div>
</div>
<div id="pataBG">
<div id="pata" class="dodatok">
<a href="./backend/loginAdmin.php">Admin</a><br>
<a href="http://camo.tym.sk">Written by Camo 2011</a>
</div>
</div>
</div>
</body>
</html>Trochu som to zjednodušil: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style type="text/css">
html, body, div, form, p, img, menu, ul, ol, li, a, h1, h2, h3{margin:0px; padding:0px}
#obsah{margin:0px auto; width:800px; background-color:pink}
#side{float:left; width:200px; background-color:yellow}
#content{margin-left:205px; }
#content h2{clear:both}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="obsah" style="">
<div id="side">
Toto je side toto je side toto je side Toto je side toto je side toto je side
</div>
<div id="content">
Toto je content Toto je content Toto je content Toto je content Toto je content
<h2>Toto je h2 s clear:both</h2>
</div>
</div>
</body>
</html> |
||
| Davex Profil |
#2 · Zasláno: 23. 12. 2011, 22:43:16
Když rozplaveš i blok s obsahem
#content, tak bude clear působit jen uvnitř a nebude brát v úvahu vnější plaváčky.
|
||
| Camo Profil |
#3 · Zasláno: 23. 12. 2011, 23:01:27 · Upravil/a: Camo
Skúšal som teraz obidva tie spôsoby. Aj pridať contentin, aj dať float contentu. Obidva fungujú. Ale mi vŕta v hlave, prečo to Plaváček tiež neriešil cez float. Rozmýšľam či je za tým nejaká vyššia logika. Už neviem nájsť to vlákno kde som to našiel...
EDIT: Oprava. Ten prvý spôsob, keď sa pridá len float, mi funguje len v tej zjednodušenie podobe. V tej šablone sa to celé posunie pod bočný panel. To by sa malo diať, keď je tam kolízia šírok, ale šírku tam nezadávam(aspoň o tom neviem). |
||
| Davex Profil |
#4 · Zasláno: 23. 12. 2011, 23:28:54 · Upravil/a: Davex
Camo:
„Ale mi vŕta v hlave, prečo to Plaváček tiež neriešil cez float.“ Vidím-li dobře, tak na to šel také přes float u .mainin.
Aby to fungovalo pouze s float u #content, tak nesmí být vlevo margin a musí být nastavená pevná šířka. Když to bude dvěma vnořenými elementy jako u Plaváčka, tak se tomu vyhneš.
|
||
| Plaváček Profil |
#5 · Zasláno: 24. 12. 2011, 07:54:30
Camo:
To vlákno je tady 2 sloupcovy layout (Levy sloupec fixni, pravy fluidni) a příklad byl vytvořen pro onen konkrétní dotaz. |
||
|
Časová prodleva: 14 let
|
|||
0