Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
ahojecky.p
Člen
Avatar
ahojecky.p:2.2.2018 22:30

Ahoj,

mám otázku, potřebuji v tomto webu zarovnat všechny 4 obrázky vedle sebe na jeden řádek nechci, aby se jeden zobrazoval na samotném řádku. Díky

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Affordable and professional web design">
          <meta name="keywords" content="web design, affordable web design, professional web design">
        <meta name="author" content="Brad Traversy">
    <title>Welcome</title>
    <link rel="stylesheet" href="style.css">


        <!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>


        <!-- sekce -->
        <section id="showcase">
           <div class="container">
           <h1>Web</h1>

                    <p>bbbbbbbbbbbbbb</p>
           </div>
        </section>
        <!-- konec sekce -->

        <!-- box -->

        <section id="boxes">
            <div class="container">


                <div class="box">
                        <img src="logo_html.png">
                             <h3>HTML5 Markup</h3>
                  <p>ukázka</p>
                    </div>

                    <div class="box">
                          <img src="logo_css.png">
              <h3>CSS3 Styling</h3>
              <p>ukázka</p>
                    </div>

                        <div class="box">
              <img src="logo_brush.png">
              <h3>Graphic Design</h3>
              <p>ukázka</p>
            </div>

                        <div class="box">
              <img src="logo_brush.png">
              <h3>Graphic Design</h3>
              <p>ukázka</p>
            </div>

            </div>




        </section>



        <!-- konec boxu -->

<footer>



<a href="https://www.facebook.com/" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-at"></a>


</footer>

  </body>
</html>
body{
        font: 15px/1.5 Arial, Helvetica,sans-serif;
        padding:0;
    margin:0;
    background-color:#f4f4f4;
}

/* Global */

.container{
        width:80%;
        margin:auto;
        overflow:hidden;
}

ul{
        margin:0;
        padding:0;
}



/* sekce */

#showcase{
  min-height:400px;
  background:url('showcase.jpg') no-repeat 0 -400px;
  text-align:center;
  color:#ffffff;
}

#showcase h1{
  margin-top:100px;
  font-size:80px;
  margin-bottom:10px;
}


#showcase p{
  font-size:20px;
}

/* Boxes */
#boxes{
  margin-top:20px;
}

#boxes .box{
  float:left;
  text-align: center;
  width:30%;
  padding:10px;

}

#boxes .box img{
  width:90px;


}


footer  {
text-align:center;
border:#cccccc solid 1px;
}

.fa {
    padding: 5px;
    font-size: 15px;
    width: 20px;
    text-decoration: none;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
    color: red;
}

/* Twitter */
.fa-twitter {
    color: blue;
}


.fa-fa-at {
    color: blue;
}
 
Odpovědět
2.2.2018 22:30
Avatar
Lukáš
Tvůrce
Avatar
Lukáš:2.2.2018 22:39 
#boxes .box{
  float:left;
  text-align: center;
  width:22%;
  padding:10px;

}

Protože tam máš padding, tak se to nevejde na 25%, ale 22%. Jinak teď ti každý box zabírá 30% stránky a 30% * 4 = 120% takže proto se nevejdou všechny vedle sebe

Editováno
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
2.2.2018 22:39
Avatar
Petr Kubíček
Člen
Avatar
Petr Kubíček:2.2.2018 22:43

Používáš boxy, které zarovnáváš přes float vedle sebe, ale každému z nich dáváš šířku 30%, samotná stránka má 100%, 4 * 30% je 120%, proto se další box zarovná automaticky na další řádek. Plus, používáš neresponzivní hodnotu pro padding, takže ani při nastavení šířky na 25% se ti boxy neudrží na jednom řádku, jednoduše smaž padding a nastav šířku boxů na 25% a ony se přizpůsobí.

#boxes .box{
float:left;
text-align: center;
width:25%;
}

 
Nahoru Odpovědět
2.2.2018 22:43
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:2.2.2018 23:01

Hej, teď už máme ale i lepší nástroje, než je float: left;, což jsem nepoužil už strašně dlouho nikde, páč to není tak cool a funguje to většinou divně.

Lze to suprově zarovnat pomocí flexboxu, případně css gridu. :-)

Nahoru Odpovědět
2.2.2018 23:01
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
ahojecky.p
Člen
Avatar
Odpovídá na Honza Bittner
ahojecky.p:2.2.2018 23:27

A jak by to teda vypadalo ?

 
Nahoru Odpovědět
2.2.2018 23:27
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:2.2.2018 23:58

Např. pomocí CSS gridů rozložení na 4 sloupečky by bylo takto:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px; /* ještě např. nějaké mezery */
}

se

<div class="container">
  <div class="box">...</div>
  <div class="box">...</div>
  <div class="box">...</div>
  <div class="box">...</div>
</div>
Nahoru Odpovědět
2.2.2018 23:58
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
nickname01
Člen
Avatar
nickname01:3.2.2018 8:05

Tady je čtení o gridu:
https://css-tricks.com/…-guide-grid/

A flexbox:
https://css-tricks.com/…-to-flexbox/

 
Nahoru Odpovědět
3.2.2018 8:05
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:3.2.2018 13:26

Na CSS grid doporučuji i videa na https://cssgrid.io/

Každopádně CSS grid a flexbox vyřeší (téměř, samozřejmě) všechny problémy, zejména když se spojí jejich síly, takže se doporučuji naučit či mít alespoň povědomí o možnostech. :-)

Nahoru Odpovědět
3.2.2018 13:26
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Durik
Člen
Avatar
Odpovídá na Honza Bittner
Michal Durik:4.2.2018 12:05

Hej Flexbox je super Grid som ešte nepoužil ale aj pri Flexboxu je problém z IE-čkami a musí sa robiť celé CSS-sko na elementy buď cez display alebo Float. Ja používam Display.

 
Nahoru Odpovědět
4.2.2018 12:05
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Durik
Honza Bittner:4.2.2018 13:01

Upřímně, pokud někdo používá IE, musí očekávat, že mu věci fungovat nebudou. :D

Nahoru Odpovědět
4.2.2018 13:01
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Durik
Člen
Avatar
Odpovídá na Honza Bittner
Michal Durik:5.2.2018 4:38

Bohužial pravda je opakom. Klienty si niekde niečo prečítaju, alebo im niekdo od "Fachu" poradí že weby musia šlapať aj na IE 9.
A ešte kopec Korporácií používa IE9 - 10 ako predvolené Browsery.

 
Nahoru Odpovědět
5.2.2018 4:38
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 11 zpráv z 11.