Avatar
mat.masar
Člen
Avatar
mat.masar:

Ahoj, chtěl jsem se naučit responsivní web design a tak jsem si udělal takový načrt jak by web mohl vypadat ale nedaří se mi umístit okno pro reklamu(sidebar). Poradíte mi někdo kde mám chybu prosím? Ta reklama by měla být vedle obsahu(Lorem ipsum)

css

body {
margin: 0 auto;
}
#wrapper {
width: 900px;
}
#header {
width: 900px;
        background: white;
        border: 2px solid #006797;
        padding: 20px;
        margin: 10px 0 0 10px;
}
#menu {
text-align: center;
}
#menu ul {
list-style-type: none;
}
#menu li {
float: left; padding-right: 20px;
}
#obsah_wrapper {
width: 900px;
}
#obsah {
width: 680px; float: left;
        background: white;
        border: 2px solid #006797;
        padding: 20px;
        margin: 10px 0 0 10px;
}
#sidebar{
        width: 200px; margin-left: 20px; float: right;
        background: white;
        border: 2px solid #006797;
        padding: 20px;
}
footer {
clear: both; width: 900px;
        background: white;
        border: 2px solid #006797;
        padding: 20px;
        margin: 300px 0 0 10px;
}

html

<!DOCTYPE html>
<html lang="cs-cz">

 <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css.css" type="text/css" />
        </head>

 <div id="wrapper">
 <body>
  <header id="header">
        <nav>
                                <ul>
                                <li> <a href="onas.html">O nás</a>
                <li> <a href="franchiza.html">Franchiza</a>
                <li class="focus"> <a href="zamestnanci.html">Zaměstnanci</a>
                                <li> <a href="fotoalbum.html">Fotoalbum</a>
                                <li> <a href="kontakt.php">Kontakt</a>
                                </ul>
                        </nav>
  </header>


   <div id="obsah">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec iaculis sem. Aliquam erat volutpat. Aliquam erat volutpat.
  Donec interdum ante dui, nec hendrerit eros fringilla vel. Praesent eleifend nisl porttitor ultricies bibendum.
  Fusce blandit quam in tincidunt lacinia. Nam a diam consectetur, consectetur odio nec, porta massa.Maecenas
  eget vulputate libero, vitae egestas ex. Integer non quam odio. Maecenas consequat vulputate auctor. Praesent
  ut augue eleifend, luctus dui sed, accumsan nunc. Vivamus rutrum porta nisl, nec maximus lacus dignissim nec. Fusce
 </div>

   <div id="sidebar">
Reklama!Reklama!Reklama!
</div>
</body>
<footer> Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!</footer>
</div>
<html>
 
Odpovědět 3.7.2015 11:43
Avatar
Ondřej Langr (andysekcze):

Asi blbost,ale zkus margin-right a schválně co to udělá :D (Já to fakt nevím, nezkoušel jsem to)

Nahoru Odpovědět  -2 3.7.2015 12:24
I have a charger. I have Note 7. Umh I haven't Note7.
Avatar
Ondřej Langr (andysekcze):

Kurfa :D ja nevim :D

Nahoru Odpovědět  -5 3.7.2015 13:02
I have a charger. I have Note 7. Umh I haven't Note7.
Avatar
Monarezio
Redaktor
Avatar
Monarezio:

Začněme tím že si opravíme chyby... máš tam špatně daný elemnty v divu nesmí být body, footer musí být v body atd... hoď si to do nějakého IDE, třeba netbeans a ukáže ti kde máš všude chyby :)

Nahoru Odpovědět 3.7.2015 13:12
First, solve the problem. Then, write the code.
Avatar
mat.masar
Člen
Avatar
mat.masar:

Ok takhle je to dobře?

 <body id="wrapper">
  <header id="header">
        <nav>
                                <ul>
                                <li> <a href="onas.html">O nás</a>
                <li> <a href="franchiza.html">Franchiza</a>
                <li class="focus"> <a href="zamestnanci.html">Zaměstnanci</a>
                                <li> <a href="fotoalbum.html">Fotoalbum</a>
                                <li> <a href="kontakt.php">Kontakt</a>
                                </ul>
                        </nav>
  </header>


   <div id="obsah">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec iaculis sem. Aliquam erat volutpat. Aliquam erat volutpat.
  Donec interdum ante dui, nec hendrerit eros fringilla vel. Praesent eleifend nisl porttitor ultricies bibendum.
  Fusce blandit quam in tincidunt lacinia. Nam a diam consectetur, consectetur odio nec, porta massa.Maecenas
  eget vulputate libero, vitae egestas ex. Integer non quam odio. Maecenas consequat vulputate auctor. Praesent
  ut augue eleifend, luctus dui sed, accumsan nunc. Vivamus rutrum porta nisl, nec maximus lacus dignissim nec. Fusce
 </div>

<div id="sidebar">
Reklama!Reklama!Reklama!
</div>
<footer> Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!Footer!</footer>
</body>
 
Nahoru Odpovědět 3.7.2015 13:14
Avatar
Monarezio
Redaktor
Avatar
Monarezio:

Ano, bezva :), ten problém který řešíš je kvůli tomu, že se elementy nevejdou vedle sebe tak se odřádkují, skus zmenšit tu reklamu nebo ten obsah, nebo můžeš zvětšit body width.

Nahoru Odpovědět  ±0 3.7.2015 13:19
First, solve the problem. Then, write the code.
Avatar
mat.masar
Člen
Avatar
mat.masar:

Díky pomohlo to, ale mám tam nějakou divnou mezeru ale margin tam žádný není. Nevíš co to způsobuje?

 
Nahoru Odpovědět 3.7.2015 14:31
Avatar
Tomáš Messing:

Koukni se jak máš nastavený padding a margin, přesahuje ti to přes element

 
Nahoru Odpovědět 3.7.2015 20:51
Avatar
Tomáš Messing:

Ber to tak, že margin ti dá 20px z každé strany.. takže když dáš
width: 200px;
margin: 20px;

Tak to celkem bude 240px... protože z každé strany ti to dá margin 20px.

 
Nahoru Odpovědět  +2 3.7.2015 20:55
Avatar
Tomáš Messing:
<!DOCTYPE html>
 <html lang="cs-cz">

  <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css" type="text/css" />
        </head>
  <body>
  <body>
    <div class="wrapper">
      <header>
        <h1>John Doe website</h1>
      </header>
      <div class="container">
        <div class="row1">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis lacinia arcu, sed suscipit ante. Nullam porttitor nibh nec bibendum scelerisque. Vivamus cursus sem ornare magna gravida, sed iaculis augue cursus. Fusce euismod viverra eros, eu tincidunt nulla ullamcorper eu. Phasellus ac dictum felis. Etiam imperdiet orci mauris, quis commodo odio rhoncus et. Fusce malesuada fermentum ex, non euismod sapien ultricies et. Etiam eleifend placerat convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc elementum in eros sit amet feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
          </p>
        </div>
        <div class="row2">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis lacinia arcu, sed suscipit ante. Nullam porttitor nibh nec bibendum scelerisque. Vivamus cursus sem ornare magna gravida, sed iaculis augue cursus. Fusce euismod viverra eros, eu tincidunt nulla ullamcorper eu. Phasellus ac dictum felis. Etiam imperdiet orci mauris, quis commodo odio rhoncus et. Fusce malesuada fermentum ex, non euismod sapien ultricies et. Etiam eleifend placerat convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc elementum in eros sit amet feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
          </p>
        </div>
      </div>
      <footer>
        Created by John Doe
      </footer>
    </div>
  </body>
 <html>
* {
        padding: 0;
        margin: 0;
}
header {
        padding: 25px 25px;
        background: lightblue;
}
.wrapper {
        background: #e5e5e5;
        width: 960px;
        margin: 0 auto;
}
.container {
        display: inline-block;
}
.row1 {
        width: 70%;
        float: left;
}
.row2 {
        width: 30%;
        float: left;
}
.row1 p, .row2 p {
        padding: 25px;
}
footer {
        width: 100%;
        text-align: center;
        padding: 20px 0;
        background: lightgreen;
}

Jsem napsal jenom takovou jednoduchou blbost :D
Spíše se zkus pořádně naučit základy apod...

 
Nahoru Odpovědět 3.7.2015 21:11
Avatar
mat.masar
Člen
Avatar
Odpovídá na Tomáš Messing
mat.masar:

Jo ale já tam mám:

#sidebar{
        width: 180px;  float: right;
        background: white;
        border: 2px solid #006797;
        padding: 20px;
        margin: 10px 0 0 0;

#obsah {
width: 680px; float: left;
        background: white;
        border: 2px solid #006797;
        padding: 20px;
        margin: 10px 0 0 10px;
}

   <div id="obsah">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec iaculis sem. Aliquam erat volutpat. Aliquam erat volutpat.
  Donec interdum ante dui, nec hendrerit eros fringilla vel. Praesent eleifend nisl porttitor ultricies bibendum.
  Fusce blandit quam in tincidunt lacinia. Nam a diam consectetur, consectetur odio nec, porta massa.Maecenas
  eget vulputate libero, vitae egestas ex. Integer non quam odio. Maecenas consequat vulputate auctor. Praesent
  ut augue eleifend, luctus dui sed, accumsan nunc. Vivamus rutrum porta nisl, nec maximus lacus dignissim nec. Fusce
 </div>

<div id="sidebar">
Reklama!Reklama!Reklama!
</div>

takže to nechápu...nikde mi nic nevylízá

Editováno 7.7.2015 14:23
 
Nahoru Odpovědět 7.7.2015 14:22
Avatar
Tomáš Messing:

A co ti na tom nejde?

 
Nahoru Odpovědět 7.7.2015 14:35
Avatar
mat.masar
Člen
Avatar
mat.masar:

Ta reklama má být 10 px od obsahu. Né 30 či kolik to je..

 
Nahoru Odpovědět 7.7.2015 15:47
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 14 zpráv z 14.