Farabne pozadie a floatovanie

maetoo

Zdravím Vás.

Mám časť html a css kódu. V CSS najskôr nastavím pre danu časť kódu, aby pozadie bolo napr. modré. Neskor dam tuto istu časť floatovať napríklad do lava. Upravim zmeny a uložím. Ta daná časť kódu je floatovana do lavej strany, ale zmizne modré pozadie, ktoré bolo predtým zadefinované a ktoré bolo aj zobrazene pred použitím floatovania. Zruším floatovanie a modré pozadie sa spať objaví. Toto som skúsil viackrát a vždy ten istý vysledok.

Viete mi poradiť kde robím chybu? Ako napísať kód tak, aby daná časť mala modré pozadie a aby sučastne mohla byť floatovana do lava?

Michaelo

Posli tu HTML a CSS, lebo toto co popisujes je blbost.

sharky-no

asi budes musiet pouzit clear:both na parent element v ktorom je ten float.

Michaelo

Alebo na neho dat overflow: auto; Funguje podobne ako clear both a mozes pouzivat :last-child

maetoo

Potrebujem naprogramovať stránku do takeho stavu, ako je napisane v prilohe v screeny.

Prikladam aj kody
html

Kód: Vybrať všetko

  <!DOCTYPE html>
  <html lang="sk">
  <head>
      <meta charset="windows-1250">
      <title>Skusam programovat straky</title>
      <link rel="stylesheet" href="css-PageDesign.css">
      <link rel="stylesheet" href="css-ProgrammingTool.css">
      <meta name="viewport" content="width=device-width, inicial-scale=1">  
  </head>
  <body>

      <header class="head">         
          <div class="logo">
              <a href="http://iteckaris.eu">Nazov</a>
              <p>popis</p>
          </div>
          
          <div class="navigacia">
              <nav>
                  <a class="tlacidko" href="#">Sluzby</a>
                  <a class="tlacidko" href="#">Kontakt</a>
                  <a class="tlacidko" href="#">Referencie</a>
                  <a class="tlacidko" href="#">O mne</a>
                  <a class="tlacidko" href="#">Vzdialene pripojenie</a>
              </nav>
          </div>
      </header>

  </body>
  </html>

css

Kód: Vybrať všetko

    html,
    body {
      margin: 0 auto;
  }
  
    .head {
     background: #3abde3;
    }
    
    .logo {
        background: #3abde3;
        float: left;
        font-family: Papyrus, fantasy; /*Papyrus*/
        min-width: 35%;
        text-align: center;
  
    }
  
    .logo a {
       text-decoration: none;
       font-size: 4.5em;     
    }
    
    .logo p {
       font-size: 1.5em;     
    }    
    
    .logo a,
    .logo p {
        margin: 0 auto;
    }
    
    .navigacia {
        background: #3abde3; 
        float: left;
        min-width: 65%;
        margin-top: 3.5%;
    }
    
    .tlacidko {
      background: #e70707;
      border: 1px solid #e70707;
      border-radius: 20%;
      color: #ffffff;
      cursor: pointer;
      margin-left: 2%;
      text-decoration: none; 
      font-size: 2em;
      padding: 1% 1%;  
    }
  
    .tlacidko:hover {
        color: black;
    }

Michaelo

Pred </header> daj

Kód: Vybrať všetko

<div style='clear: both;'></div>

Alebo v CSS daj na header overflow: auto;

Taktiez, nemusis davat to pozadie vsade, staci len na header a nemusis pouzivat class head, proste namiesto .head{} pouzi header{}.

Este ako pozeram, na .logo a, .logo p nepotrebujes ten margin, ten ti nerobi absolutne nic. margin: 0 auto; (ta cast auto) funguje len na blokovych elementoch.

Ps.: Skus si nastudovat spravanie floatov.

Farabne pozadie a floatovanie

Farabne pozadie a floatovanie

Re: Farabne pozadie a floatovanie

Re: Farabne pozadie a floatovanie

Re: Farabne pozadie a floatovanie

Re: Farabne pozadie a floatovanie

Re: Farabne pozadie a floatovanie