Diskuze: pozice

mat.masar

Člen

mat.masar:3.7.2015 11:43

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

Ondřej Langr (andysekcze)

Tvůrce

Ondřej Langr (andysekcze):3.7.2015 12:24

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

Nahoru Odpovědět

3.7.2015 12:24

I have a charger. I have Note 7. Umh I haven't Note7.

mat.masar

Člen

mat.masar:3.7.2015 12:27

Ne nic to nedělá

Nahoru Odpovědět

3.7.2015 12:27

Ondřej Langr (andysekcze)

Tvůrce

Ondřej Langr (andysekcze):3.7.2015 13:02

Kurfa ja nevim

Nahoru Odpovědět

3.7.2015 13:02

I have a charger. I have Note 7. Umh I haven't Note7.

Samuel Kodytek

Tvůrce

Samuel Kodytek:3.7.2015 13:12

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

There is more than one way to screw it

mat.masar

Člen

mat.masar:3.7.2015 13:14

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

Samuel Kodytek

Tvůrce

Samuel Kodytek:3.7.2015 13:19

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

3.7.2015 13:19

There is more than one way to screw it

mat.masar

Člen

mat.masar:3.7.2015 14:31

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

Člen

:3.7.2015 20:51

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

Nahoru Odpovědět

3.7.2015 20:51

Člen

:3.7.2015 20:55

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

3.7.2015 20:55

Člen

:3.7.2015 21:11

<!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
Spíše se zkus pořádně naučit základy apod...

Nahoru Odpovědět

3.7.2015 21:11

mat.masar

Člen

mat.masar:7.7.2015 14:22

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

Člen

:7.7.2015 14:35

A co ti na tom nejde?

Nahoru Odpovědět

7.7.2015 14:35

mat.masar

Člen

mat.masar:7.7.2015 15:47

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

Nahoru Odpovědět

7.7.2015 15:47