Autor Zpráva
gniede
Profil
Zdravím,

Vytvořil jsem si jednoduchý web, a potýkám se s problémem, že po přidaní dalšího hlavního "contentu" mi sjiždí pravý panel ("sidebar") níž.
Nevíte jak nastavit, aby mi ten panel nesjížděl?
Pro lepší pochopení přikládám screen, a CSS.

Předem díky.



#content {
    float: left;
    width: 635px;
}

#content_galerie {
    float: left;
    width: 950px;
}

.box { 
    margin: 0;
    padding: 10px;
    background-color: #fff;
}

.sidebar {
    width: 280px;
    padding: 0;
    float: right;
}


.sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar ul li {
    margin-bottom: 20px;
    line-height: 1.9em;
}

.sidebar li ul {
    padding: 10px;
    background-color: #fff;
}

.sidebar li ul li {
    display: block;
    border-top: none;
    padding: 6px 2px;
    margin: 0;
    line-height: 1.5em;
    font-size: 13px;
    border: none;
}

.sidebar li ul li a {
    font-weight: normal;
    color: #222;
}

.sidebar li ul li a:hover {
    color: #000;
}

.sidebar li ul.blocklist li {
    padding: 0;
    display: inline;
}

.sidebar li ul.blocklist li a {
    display: block;
    border-bottom:1px solid #e0e0e0;
    padding: 6px 5px;
    text-decoration: none;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
}



.sidebar h4, #content h1 {
    color: #fff;
    font-family: Lucida, "Lucida Sans", Geneva, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: -0.5px;
    border-bottom: 1px solid #366E30;
    text-transform:uppercase;
    margin: 0;
    line-height: 1.9em;
    padding: 5px;
    font-weight: bold;
    background: #50A145 url('images/header_kolonka.jpg') repeat-x center;
}

.sidebar h4, #content_galerie h1 {
    color: #fff;
    font-family: Lucida, "Lucida Sans", Geneva, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: -0.5px;
    border-bottom: 1px solid #366E30;
    text-transform:uppercase;
    margin: 0;
    line-height: 1.9em;
    padding: 5px;
    font-weight: bold;
    background: #50A145 url('images/header_kolonka.jpg') repeat-x center;
}


.clear {
    clear: both;
}
Taps
Profil
gniede:
chceš vytvořit fixovaný banner? Jak vytvořit fixovaný banner?
Chamurappi
Profil
Reaguji na Tapse:
Nechce, nelíbí se mu, že plovoucí blok odpluje kus níž.


Reaguji na gniede:
Což takhle dát odkaz na živou ukázku? Uvedený kus CSS s problémem moc nesouvisí…

Zkoušíš vedle sebe dát dva <div id="content"> a vedle nich doprava <div class="sidebar">. Druhý #content se vedle prvního nevejde, proto odskočí pod něj… a .sidebar se dá napravo od toho druhého.
Proč máš dva <div id="content">? Nebylo by rozumnější mít jeden sloupec celý v jednom <div>u a druhý v druhém? Momentálně stavíš třísloupcový layout, který necháváš rozpadnout.
gniede
Profil
Jednotlivý <div id="content"> se generuje automatický po přidání článku prostřednictvím RS. <div class="sidebar"> je napsaný přímo v indexu a nelze ho pomocí RS editovat. Nechci mít celý sloupec v jednom <div> jelikož mi to takto příjde přehlednější. Přikládám kód stránky.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MKI - Studio bydlení Karviná</title>
<link rel="stylesheet" href="styles.css" type="text/css" />

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/cs_CZ/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</head>

<body>
<div id="container">
    <div id="header">
        
        <div class="clear"></div>
    </div>
    <div id="nav">
        <ul>
            <li class="selected"><a href="index.php">ÚVOD</a></li>
            <li><a href="prodejna.php">PRODEJNA</a></li>
            <li><a href="sluzby.php">SLUŽBY</a></li>
            <li><a href="reference.php">REFERENCE</a></li>
            <li><a href="galerie.php">GALERIE</a></li>
            <li><a href="kontakt.php">KONTAKT</a></li>
        </ul>
    </div>
    <div id="body">
    
             
<?php
  $mn_count = 10;
  $mn_cat = '1';
  include 'C:\xampp\htdocs\1\admin_mki/mn-show.php';
?>
         
        <div class="sidebar">
            <ul>    
               <li>
                    <h4><center><span>Kde nás najdete?</span></center></h4>
                    <ul>
                    <p><b>MKI Studio bydlení Karviná<br>
                    Bělidlo 100/7<br>
                    73301 Karviná - Fryštát</b> </p>
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2572.4882097231516!2d18.528786015807334!3d49.85207323817952!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47115560394174bd%3A0xc107914ee416f1ed!2zQsSbbGlkbG8gMTAwLzcsIDczMyAwMSBLYXJ2aW7DoQ!5e0!3m2!1scs!2scz!4v1447469158313" width="250" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>  
                    </ul>
                </li>
                <li>
                    <h4><center><span>Facebook</span></center></h4>
                    <ul>
                    <div class="fb-page" data-href="https://www.facebook.com/MKI-Studio-bydlen%C3%AD-642880189186797/" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"></div> 
                    </ul>
                </li>
                
                
            </ul> 
        </div>
          
        <div class="clear"></div>
    </div>
    <div id="footer">
        <div class="footer-content">
    
              <p>© 2015 MKI STUDIO BYDLENÍ. Všechna práva vyhrazená</p> <p>Realizace<a href="http://www.pcs-karvina.cz">PCS KARVINÁ</a></p>
              
        </div>
       
    
    </div>
</div>
</body>
</html>



body {
    background: #CECECE;
    margin:0;
    padding:0;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    color: #666;
}

* {
    margin:0;
    padding:0;
}

/** element defaults **/
table {
    width: 100%;
    text-align: left;
}

th, td {
    padding: 10px 10px;
}

th {
    color: #fff;
    background: #E66000 none repeat-x scroll left top;
}

td {
    border-bottom: 1px solid #ccc;
}

code, blockquote {
    display: block;
    border-left: 5px solid #222;
    padding: 10px;
    margin-bottom: 20px;
}
code {
    background-color: #222;
    color:#ccc;
    border: none;
}
blockquote {
    border-left: 5px solid #222;
}

blockquote p {
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin: 0;
    color: #333;
    height: 1%;
}

p {
    line-height: 1.9em;
    margin-bottom: 20px;
    font-size: 12px;
}

a {
    color: #55A649;
}

a:hover {
    color: #A74956;
}

a:focus {
    outline: none;
}

fieldset {
    display: block;
    border: none;
    border-top: 1px solid #ccc;
}

fieldset legend {
    font-weight: bold;
    font-size: 13px;
    padding-right: 10px;
    color: #333;
}

fieldset form {
    padding-top: 15px;
}

fieldset p label {
    float: left;
    width: 150px;
}

form input, form select, form textarea {
    padding: 5px;
    color: #CECECE;
    border: 1px solid #ddd;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    background-color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

form input.formbutton {
    border: none;
    background: #333;
    color: #ffffff;
    font-weight: bold;
    padding: 5px 10px;
    font-size: 12px;
    font-family: Tahoma, Geneva, sans-serif;
    letter-spacing: 1px;
    width: auto;
    overflow: visible;
}

form.searchform p {
    margin: 5px 0;
}


span.required {
    color: #ff0000;
}

h1, #content .box h1 {
    color: #000;
    font-size: 35px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0;
    background: none;
    border-bottom: none;
    text-transform: none;
    line-height: 1.0em;
    padding: 0 0 5px;
}

h1, #content_galerie .box h1 {
    color: #000;
    font-size: 35px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0;
    background: none;
    border-bottom: none;
    text-transform: none;
    line-height: 1.0em;
    padding: 0 0 5px;
}

h2 {
    color: #000;
    font-family: 'Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif;
    font-size: 22px;
    letter-spacing: 0px;
    font-weight: normal;
    padding: 0 0 5px;
    margin: 0;
}

h3 {
    color: #555;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    font-family: Arial, Helvetica, sans-serif;
}

h4 {
    padding-bottom: 10px;
    font-size: 15px;
    color: #999;
}

h5 {
    padding-bottom: 10px;
    font-size: 13px;
    color: #999;
}

ul, ol {
    margin: 0 0 35px 35px;
}

li {
    padding-bottom: 5px;
}

li ol, li ul {
    font-size: 1.0em;
    margin-bottom: 0;
    padding-top: 5px;
}


#container {
    width: 1000px;
    margin: 0 auto;
    padding: 0;
    background-color: #ddd;
    
}

#header_kolonka {
    padding: 0px 15px;
    background: #4C9B43 url('images/header_kolonka.jpg') repeat-x scroll top left;
    margin: 0 auto;
    height: 125px;
}

#header {
    padding: 167px 15px;
    background: #4C9B43 url('images/header.jpg');
    margin: 0 auto;
    height: 125px;
}
#header h1 a {
    color: #fff;
    padding-top: 40px;
    font-size: 40px;
    font-weight: normal;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: -3px;
    float: left;
}

#header h2 {
    color: #366E30;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin-left: 20px;
    margin-top: 48px;
    padding-left: 4px;
    letter-spacing: 0;
}

#nav {
    height: 37px;
    width: 1000px;
    background: #111 url('images/nav-bg.jpg') repeat-x scroll;
}

#nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 37px;
}

#nav ul li {
    float: left;
    display: block;
}

#nav ul li a {
    display: block;
    color: #ddd;
    display: block;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: Lucida, "Lucida Sans", Geneva, Arial, sans-serif;
    padding: 13px 15px 11px;
    text-decoration: none;
}

#nav ul li.selected {
    position: relative;
    top: -5px;
}

#nav ul li.selected a, #nav ul li.selected a:hover {
    background:#ddd url('images/nav-selected.jpg') repeat-x scroll;
    color: #333;
    padding: 17px 15px 13px;
}

#nav ul li a:hover {
    color: #fff;
    background-color: #333;
}

#body {
    background: none;
    margin:0 auto;
    padding: 20px 12px;
    width: 936px;
    background-color: #ddd;
}

#content {
    float: left;
    width: 635px;
}

#content_galerie {
    float: left;
    width: 950px;
}

.box { 
    margin: 0;
    padding: 10px;
    background-color: #fff;
}

.sidebar {
    width: 280px;
    padding: 0;
    float: right;
}


.sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar ul li {
    margin-bottom: 20px;
    line-height: 1.9em;
}

.sidebar li ul {
    padding: 10px;
    background-color: #fff;
}

.sidebar li ul li {
    display: block;
    border-top: none;
    padding: 6px 2px;
    margin: 0;
    line-height: 1.5em;
    font-size: 13px;
    border: none;
}

.sidebar li ul li a {
    font-weight: normal;
    color: #222;
}

.sidebar li ul li a:hover {
    color: #000;
}

.sidebar li ul.blocklist li {
    padding: 0;
    display: inline;
}

.sidebar li ul.blocklist li a {
    display: block;
    border-bottom:1px solid #e0e0e0;
    padding: 6px 5px;
    text-decoration: none;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
}



.sidebar h4, #content h1 {
    color: #fff;
    font-family: Lucida, "Lucida Sans", Geneva, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: -0.5px;
    border-bottom: 1px solid #366E30;
    text-transform:uppercase;
    margin: 0;
    line-height: 1.9em;
    padding: 5px;
    font-weight: bold;
    background: #50A145 url('images/header_kolonka.jpg') repeat-x center;
}

.sidebar h4, #content_galerie h1 {
    color: #fff;
    font-family: Lucida, "Lucida Sans", Geneva, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: -0.5px;
    border-bottom: 1px solid #366E30;
    text-transform:uppercase;
    margin: 0;
    line-height: 1.9em;
    padding: 5px;
    font-weight: bold;
    background: #50A145 url('images/header_kolonka.jpg') repeat-x center;
}


.clear {
    clear: both;
}

#footer {
    margin-top: 30px;
}

#footer p {
    text-align: left;
    color: #999;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

.footer-content {
    padding: 2px 15px 60px;
    background: #CECECE url('images/footer.gif') repeat-x scroll center;
}

#footer .footer-content p {
    color: #333;
    position: relative;
    top: 32px;
    margin-left: 15px;
}

#footer .footer-content p a {
    color: #fff;
    font-family: "Lucida Grande", "lucida sans unicode", Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: none;
    margin: 0 10px;
    padding-bottom: 2px;
    position: relative;
    top: 0px;
}

#footer .footer-content p a:hover {
    color: #fff;
    border-bottom: 2px solid #489140;
}

#footer .footer-content p a.backtotop {
    float: right;
    font-size: 13px;
    top: 3px;
}

#footer .footer-content span.sitename {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
    font-weight: normal;
    letter-spacing: -2px;
    color: #fff;
    float: left;
}

#footer .footer-bottom {
    padding: 7px 15px 0;
    height: 30px;
    color: #666;
    background: #111 url('images/nav-bg.jpg') repeat-x scroll;
}

#footer .footer-bottom p {
    color: #999;
}

#footer .footer-bottom p a {
    color: #fff;
    font-weight: bold;
}
Chamurappi
Profil
Reaguji na gniede:
Uf, narval jsi sem zbytečně příšerně dlouhý kód stránky, čímž jsi docela vyčerpal moji ochotu ti odpovídat. Ale zkusím dělat, jako že jsem ho neviděl…

Nechci mít celý sloupec v jednom <div> jelikož mi to takto příjde přehlednější.
Máš zvláštní vkus, když ti připadá přehledné mít ve společném rodičovi obnažené kusy obsahu a zároveň pravý panel.
Nevím, jak vypadá tvé HTML, ale nabízí se možnost dát pravý sloupec do kódu jako první nebo jako druhý. Sice to pak bude docela nesystematické, když vedlejší obsah bude v kódu před tím hlavním, ale víc možností při zachování obnaženého plavání mě nenapadá.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0