TŘI SLOUPCE – CSS – Fórum – Programujte.com

/* Container +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.CONBG { width: 100%; float: left; background: #F16937;}
.CON { width: 900px; position: relative; margin: 0 auto; padding: 0px; margin-top: 0px; background: #FFF;}

/* Side Central Single +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.SCS {margin-left: 300px;
margin-right: 300px;
height: 120px;
background-color: #dedede;}
.SCS h1 { font-size: 26px; font-weight: normal; letter-spacing: -1px; border-bottom: solid 1px #F0D83A; padding-bottom: 15px; padding-top: 20px; margin-top: 0px; color:#F0D83A}
.SCS h2 { font-size: 18px; font-weight: normal; }
.SCS h3 { font-size: 14px; font-weight: bold; }

.SCS { padding: 0px; font-size: 11px; line-height: 1.4em ; color:#F16937;}
.SCS p { font-size: 11px; line-height: 1.4em; color:#F16937;}
.SCS p strong {}
.SCS img {}
.SCS ul { padding: 10px 0px; margin: 0px; }
.SCS li { padding: 3px 0px 3px 15px; list-style-type: none; background: url(images/PostContentLiIco.png) no-repeat left top; font-size: 12px; line-height: 16px; color:#63565f; }
.SCS blockquote { padding: 5px 25px; margin: 0px; color:#993366; font-family: 'Georgia'; font-style: italic; border-top: dashed 1px #cc99cc; border-bottom: dashed 1px #cc99cc; }
.SCS blockquote p { font-size: 13px; padding: 5px 0px; margin: 5px 0px; line-height: 18px; color:#993366; }
.SCS blockquote li { padding: 3px 0px 3px 15px; list-style-type: none; background: url(images/PostContentBlockLiIco.png) no-repeat left top; font-size: 13px; line-height: 18px; color:#993366; }

/* Side Central +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.SC {margin-left: 300px;
margin-right: 300px;
height: 120px;
background-color: #dedede;}
.SC h2 { font-weight: normal;}
.pagetitle { font-size: 26px; font-weight: normal; letter-spacing: -1px; border-bottom: solid 1px #d0c1c1; padding-bottom: 15px; padding-top: 0px; margin-top: 0px; color:#FFF; float: left;}

/* Side LEFT +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.SR { width: 160px; float: left; position: relative; padding: 0px 0px 20px 0px;
}
.SR h2 { font-size: 14px; letter-spacing: -1px; font-weight: bold; color:#666; padding: 5px 0px 5px 0px; margin: 0px;}
.SR h3 { font-size: 14px; letter-spacing: -1px; font-weight: bold; color:#666; padding: 5px 0px 5px 20px; margin: 0px;}


.SR ul { margin: 0px; padding: 0px;}
.SR li { margin: 0px; padding: 2px 0px 3px 20px; list-style-type: none; font-size: 11px;}
.SR li a { color:#cc3366; }
.SR li a:visited { color:#cc3366; }
.SR li a:hover { color:#cc0066;}

/* Side LEFT +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SRL { width: 160px; float: left; padding: 25px; background: #FFF;}
/* Side RIGHT +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.SL { width: 160px; float: right; position: relative; padding: 0px 0px 20px 0px; }
.SL h2 { font-size: 14px; letter-spacing: -1px; font-weight: bold; color:#666; padding: 5px 0px 5px 0px; margin: 0px;}
.SL h3 { font-size: 14px; letter-spacing: -1px; font-weight: bold; color:#666; padding: 5px 0px 5px 20px; margin: 0px;}


.SL ul { margin: 0px; padding: 0px;}
.SL li { margin: 0px; padding: 2px 0px 3px 20px; list-style-type: none; font-size: 11px;}
.SL li a { color:#cc3366; }
.SL li a:visited { color:#cc3366; }
.SL li a:hover { color:#cc0066;}

/* Side RIGHT +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SLL { width: 160px; float: right; padding: 25px; background: #FFF;}

______________________________________________
Toto je CSS a html je takto.


<div class="CONBG">
<div class="CON">


<div class="SR">

<!-- Start Flickr Photostream -->
<!-- End Flickr Photostream -->

<div class="SRL">
<div class="Categ">
<div class="hslice" id="ngg-webslice" >
<h3> </h3>
<div class="ngg-widget entry-content">
<a href="http://localhost/word/wordpress/wp-content/gallery/msdomecek/zluty.jpg" title="" class="shutterset_ngg-images-5"><img src="http://localhost/word/wordpress/index.php?callback=image&pid=13&width=150&height=207" title="zluty" alt="zluty" /></a>
<a href="http://localhost/word/wordpress/wp-content/gallery/msdomecek/zeleny.jpg" title="" class="shutterset_ngg-images-5"><img src="http://localhost/word/wordpress/index.php?callback=image&pid=12&width=150&height=207" title="zeleny" alt="zeleny" /></a>
</div>
</div>
</div></div></div>

<div class="SR">

<!-- Start Flickr Photostream -->
<!-- End Flickr Photostream -->

<div class="SLL">

<div class="hslice" id="ngg-webslice" >
<h3> </h3>
<div class="ngg-widget entry-content">
<a href="http://localhost/word/wordpress/wp-content/gallery/msdomecek/zluty.jpg" title="" class="shutterset_ngg-images-6"><img src="http://localhost/word/wordpress/index.php?callback=image&pid=13&width=150&height=207" title="zluty" alt="zluty" /></a>
<a href="http://localhost/word/wordpress/wp-content/gallery/msdomecek/vyrobky_zoo.jpg" title="" class="shutterset_ngg-images-6"><img src="http://localhost/word/wordpress/index.php?callback=image&pid=11&width=150&height=207" title="vyrobky_zoo" alt="vyrobky_zoo" /></a>
</div>
</div>
</div></div>





<!-- Container -->

<!-- Start SC -->
<div class="SCS">


<h1>kontakt</a></h1>
<p>kontakt</p>
<p><a class="post-edit-link" href="http://localhost/word/wordpress/wp-admin/post.php?post=32&action=edit" title="Upravit stránku">Upravit</a></p></div>

<!-- End SC -->
</div></div>



Prosím o pomoc už si nevím rady. Snažím se pouze o tři sloupce a momentální situace je takováto.

Z prvního pohledu mi připadá position: relative; jako velká chyba , jinak ten layout není moc chytře napsaný :smile11: