Autor Zpráva
Majkelju
Profil
Zdravím,
můžete mi někdo říct, co dělám špatně v kódu na této stránce? http://clickclack.cz/?djs&id=1 Nebo bude lepší, když kód nakopíruju sem? Jak jde vidět, div s infem se umisťuje pod předcházejícími. Chtěl bych ho umístit kousek pod jméno DJ. Různě jsem si hrál s float a position, divy jsem různě přehazoval, ale prostě se mi to vedle sebe nezobrazí. A pokud ano, (tzn. pokud nastavím float nebo position:absolute) tak zase žlutý pruh zápatí, co je dole, mi leze do toho textu, místo aby se zobrazil až pod ním.
MyShare
Profil
Nazdar Majkelju dúfam, že to ti pomôže.
Taký bordel v kóde som nevidel ani nepamätám :) veď je tu predsa Css súbor pomocou ktorého oddelíš Html od Css aby si to mal prehľadnejšie.

Prikladám sem kód tvojej stránky samozrejme prerob podľa seba

HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/htmk" charset="UTf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Click Clack</title>
</head>
<body>
<div id="container">

<div id="head">
 <div class="logo">
  <img src="http://clickclack.cz/img/header.png" />
 </div>
 <div class="top-menu">
  <ul>
   <li><a href="">HOME</a></li>
   <li><a href="">NOVINKY</a></li>
   <li><a href="">DJS</a></li>
   <li><a href="">PODCASTY</a></li>
   <li><a href="">AKCE</a></li>
   <li class="last"><a href="">KONTAKT</a></li>
  </ul>
 </div>
</div><!-- End div head -->

<div class="login-user-section">
 <span class="link-back"><a href="">Zpět</a></span>
 <div class="form">
 <form action="index.php" method="post">
  <input type="text" name="user" placeholder="Uživatel" />
  <input type="password" name="passwd" placeholder="Heslo" />
  <button type="submit" name="loginsubmit" class="btn-login">Přihlásit</button>
 </form>
</div>
</div><!-- End div login-user-section -->

<div id="page">
<div class="user-left-panel">
<div class="user-phtoto"><img src="http://clickclack.cz/img/djs/skaph.jpg"/></div>
<div class="sub-info">
<h6>Naplánované Akcie</h6>
<ul>
<li>
  <span class="sub-info-date">25.05.</span>
  <span class="sub-info-txt">We love techno vol. 2</span>
</li>
<li>
  <span class="sub-info-date">25.05.</span>
  <span class="sub-info-txt">We love techno vol. 2</span>
</li>
<li>
  <span class="sub-info-date">25.05.</span>
  <span class="sub-info-txt">We love techno vol. 2</span>
</li>
<li>
  <span class="sub-info-date">25.05.</span>
  <span class="sub-info-txt">We love techno vol. 2</span>
</li>
</ul>
</div>
</div><!-- End div user-left-panel -->

<div class="bio">
 <h3>Skaph</h3>
<div class="bio-txt">
   <p>
    Bývalý člen kapely Distinct the Rest a nynější člen CBS crew začal rokem 2006 obrážet větší taneční akce i kluby a z kytarového hardcoru postupně přesedlal do elektronických vod. Taneční hudbu poslouchal vedle kytarovek už jako malý, ale teprve na začátku roku 2008 mu to nedalo a začal s djingem, původně pod jménem Sirdaman. Takže pořídil párek starých ošuntělých Omnitroniců, začal trénovat a o rok později zakoupil Technics MK1210, na které hraje dodnes.
   </p>
   <p>
    Jeho sety se nesou především ve stylu temného minimalu a techna, baví ho ale i techhouse. V klubu Experiment jednou do měsíce společně se Segmentem (Come In) a Jorgem Hartnerem (CBS crew) pořádá akci Click Clack ve stylech minimal, techhouse a techno. Na jaře roku 2013 zakládá web clickclack.cz.
   </p>
   <p>
  <h6>OBLÍBENÉ LABELY:</h6>
    Minus, Mobilee, Drumcode, CLR, Cocoon, Nachtstrom Schallplatten, Concepto Hipnotico, Soma, Italo Business, MindTrip a další...
   </p>
   <p>
  <h6>SETY:</h6>
   <a href="">mixcloud.com</a>
   </p>
   <p>
  <h6>PRODUKCE:</h6>
  <a href="">soundcloud.com</a>
   </p>
</div>
</div><!-- End div bio -->

</div><!-- End div page -->

</div><!-- End div container -->
</body>
</html>

A ešte CSS
* {
    margin: 0;
    padding: 0;
}
body, html {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
    font-size: 14px;
    font-family: verdana;
}
h1 { font-size: 24px; }
h2 { font-size: 22px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
#container {
    width: 960px;
    margin: 0 auto;
    margin-top: 50px;
    /*border: 1px solid red;*/
}
#head {
    width: 960px;
    height: 75px;
    margin: 0 auto;
    border-bottom: 2px solid #d7c500;
}
.logo {
    left: 0;
    height: 50px;
}

.top-menu {
    float: right;
}
.top-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-type: none;
}
.top-menu ul li {
    display: inline-block;
    padding: 0 15px 0 15px;
}
.top-menu ul li a {
    text-decoration: none;
    color: #e3e3e3;
    font-size: 14px;
    font-style: normal;
    font-family: Tahoma, Helvetica, sans-serif;
}
.top-menu ul li a:hover {
    color:#d9c200;
    text-decoration: none;
}
.last { border: none; }
span.link-back {
    padding: 5px;
}
span.link-back a {
    color: #e3e3e3;
    font-size: 14px;
    font-style: normal;
    font-family: Tahoma, Helvetica, sans-serif;
    font-weight: bold;
}
.login-user-section {
    width: 100%;
    height: 50px;
    border-bottom: 2px solid #d7c500;
}
.form {
    text-align: center;
}
.login-user-section .form input[type=text], input[type=password] {
    width: 240px;
    height: 22px;
    border: none;
    text-align: center;
    color: #393938;
    font-size: 12px;
    font-style: normal;
    font-family: Tahoma, Helvetica, sans-serif;
    font-weight: bold;
}
.btn-login {
    width: 120px;
    height: 24px;
    border: none;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #0c8400;
    color: #e6e6e6;
    font-size: 12px;
    font-style: normal;
    font-family: Tahoma, Helvetica, sans-serif;
    font-weight: bold;
    cursor: pointer;
}
.btn-login:hover {
    background: #12ab03;
}
#page {
    float: left;
    margin-top: 20px;
    width: 100%;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    background:#000 url(http://clickclack.cz/img/pozadi.png) top left no-repeat;
}
#page .user-left-panel {
    width: 200px;float: left;
    padding: 15px 0 0 15px;
}
#page .user-left-panel .user-photo {
    float: left;
    padding: 0 0 0 40px;
    width: 200px;
    height: 200px;
}
#page .user-left-panel .user-photo, img {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
.sub-info {
    border-right: 1px solid #fff;
    width: 195px;
    text-align: center;
    margin-top: 15px;
    padding: 0 5px 0 0;
    color: #e6e6e6;
    font-size: 12px;
    font-style: normal;
    font-family: Tahoma, Helvetica, sans-serif;
    font-weight: normal;
}
.sub-info ul {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.sub-info ul li {
    padding: 10px 0 0 0;
    display: inline-block;
    border-bottom: 1px solid #fff;
}
.sub-info span.sub-info-date {
    color: #e6e6e6;
    font-size: 11px;
    font-style: normal;
    font-family: Tahoma, Helvetica, sans-serif;
    font-weight: normal;
}
.sub-info span.sub-info-txt {
    color: #e6e6e6;
    font-size: 12px;
    font-style: normal;
    font-family: Tahoma, Helvetica, sans-serif;
    font-weight: normal;
}
.bio {
    width: 640px;
    margin-top: 15px;
    margin-left: 230px;
}
.bio-txt {
    padding: 30px 0 0 0;
    color: #e6e6e6;
    font-size: 12px;
    font-style: normal;
    font-family: Tahoma, Helvetica, sans-serif;
    font-weight: normal
}
.bio .bio-txt p {
    padding: 5px 1px 1px 0;
}
.bio .bio-txt a {
    text-decoration: none;
    color: #ddd;
    font-size: 12px;
    font-style: normal;
    font-family: Tahoma, Helvetica, sans-serif;
    font-weight: normal
}
.bio .bio-txt a:hover {
    color:#d9c200;
    text-decoration: none;
}

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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