TŘI SLOUPCE – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Vopata
~ Anonymní uživatel
1 příspěvek
8. 7. 2010   #1
-
0
-

/* 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.

Nahlásit jako SPAM
IP: 81.0.195.–
Reklama
Reklama
Bryant
~ Moderátor
0
Stálý člen
8. 7. 2010   #2
-
0
-

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

Nahlásit jako SPAM
IP: 94.138.99.–
„Bez činu zůstává i nejkrásnější myšlenka bezcennou.“
— Móhandás Karamčand Gándhí
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 10 hostů

Podobná vlákna

Z jednoho řetězce tři — založil SuperAdmin

Propojení tří programů — založil Kenvelo

Tri problemy v jednom — založil Fugii

Výpis dat do tří sloupců — založil cheeester

Tři divy vedle sebe — založil Chiquita_CZ

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý