Autor Zpráva
Majkelju
Profil
#1 · Zasláno: 25. 5. 2013, 18:07:35 · Upravil/a: Majkelju o minutu později
Odpovědět Citovat
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
#2 · Zasláno: 26. 5. 2013, 13:20:33
Odpovědět Citovat
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;
}
Časová prodleva: 11 let

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:

0