Pomoc s kodem, kod prilozen – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

Pomoc s kodem, kod prilozen – CSS – Fórum – Programujte.comPomoc s kodem, kod prilozen – CSS – Fórum – Programujte.com

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

Robbie
~ Anonymní uživatel
16 příspěvků
9. 4. 2019   #1
-
0
-

Ahoj, potřeboval bych pomoci s css kodem, nevim za prvé a moc nechápu, proč autor dal např. id="boxes", pak třídu .container a pak třídu box. To je jedna věc, jaký to má význam, když boxes mají šířku 100%, .container:width 80% a trida class=box by mela mit take sirku pres celou stranku, tedy 100% ,ale takhle ma jen 80%.  

Prikladam kod: jedna se o html<!-- boxes --> 


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
   
    <style>
            *{
            box-sizing:border-box;
}
        body {font-family: Arial, Arial, Helvetica, sans-serif;
              font-size:16px;
              line-height:1.5;
              margin:0;
              padding:0;
        }
.container{
           
            margin:0 auto;
            width:80%;
          
            }
           
.container h3{color:azure;
              font-size:22px;
              text-align:center;
}
header{background-color: darkgrey;
                color: floralwhite;
                min-height:100px;
                padding-top:30px;
                border-bottom:3px solid brown;
                margin-bottom:0px;
        }
header a {text-decoration:none;
           text-transform:uppercase;
           font-size:16px;
           color:white;
        }
ul {margin: 0;
    padding:0;
        }
header li {float:left;
            display:inline;
            padding:0 20px 0 20px;
        }
header .branding {float:left;
        }
header .branding h1 {margin-top:5px;
                    
        }
header nav {float:right;
             margin-top:30px;
        }
header  .highlight, header .current a{
color:brown;
                                        font-weight:bold;
        }
  header a:hover { color:brown;
                   font-weight:bold;
        }
#showcase {margin:0px;
            min-height: 400px;
            background-image: linear-gradient(90deg,black, brown);
            padding:0px;
            margin-bottom:0px;
            border-bottom:3px solid brown;
            }
       
       
#showcase h1{font-size:55px;
            color:white;
            margin-top:0px;
            margin-bottom:0px;
            padding-top:130px;
            text-align:center;            
             }           
      


#showcase p {margin-top:5px;
              font-size:19px;
              color:white;
              text-align:center;
                }
     
#newsletter {marging-top:0px;
         padding:15px;
         color: black;
         background-color:white;
         min-height:110px;      
            }
#newsletter h1{float:left;
                color:black;
           }
        
        
#newsletter form {float:right;
          margin-top:15px;       
        }
#newsletter input[type="email"]{
                padding:14px;
                height:25px;
                }
                
.button1{height:38px;
        background:black;
        border:none;
        color:white;
        }
#boxes{
       text-align: center;
       }
      
       
#boxes .box { float:left;           
              width:     
              background-color: darkgrey;
              }
              
              
      
.box h3 {color:azure;      
        }
.box img { width:110px;
            padding-top:10px;        
            }
footer {  clear:both;
           background-color:black;
           color:brown;
           text-align:center;
           height: 110px;
           padding-top: 15px;
          
        }
    </style>
</head>
<body>
    <!-- header -->
    <header>
        <div class="container">
            <div class="branding">
                <h1><span class="highlight">Label</span> Web Design</h1>
            </div>
            <nav>
                <ul>
                    <li class="current"><a rel="nofollow" href="home.html">Home</a></li>
                    <li><a rel="nofollow" href="about.html">About</a></li>
                    <li><a rel="nofollow" href="services.html">Services</a></li>
                </ul>
            </nav>
        </div>
    </header>
<!-- showcase -->
   <section id="showcase">
        <div class="container">
            <h1>Sample of H1 </h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <h3>Where does it come from? </h3>
        </div>
    </section>
    <!-- e-mail -->
    <section id="newsletter">
        <div class="container">
            <h1>Subscribe our e-mail:</h1>
            <form>
                <input type="email" placeholder="Enter valid e-mail.." />
                <button class="button1" type="submit" value="Submit">Subscribe</button>


            </form>
        </div>
    </section>
   
   
    <!-- boxes -->
    <section id="boxes">
        <div class="container">
            <div class="box">
                <img src="square.jpg" alt="create img folder and paste your .jpg .png,change img name" />
                <h3>Article one</h3>
                <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..</p>
               
            </div>
            <div class="box">
                <img src="square.jpg" alt="create img folder and paste your .jpg .png ,change img name" />
                <h3>Article two</h3>
                <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..</p>
            </div>
            <div class="box">
                <img src="square.jpg" alt="create img folder and paste your .jpg .png ,change img name" />
                <h3>Article three</h3>
                <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..</p>
            </div>
        </div>
    </section>
    <!-- footer -->
    <footer>
        <p>Label Web desing, copyright @, 2019</p>
    </footer>
</body>
</html>
 

Nahlásit jako SPAM
IP: 212.4.155.–
weroro0
Návštěvník
10. 4. 2019   #2
-
0
-

V tom CSS máš syntaktickú chybu:

width:     
              background-color: darkgrey;

id=boxes je len označenie danej sekcie iná taká už nemôže existovať (možno kvôli neskoršiemu JS - ako napr. scroll to element), 
šírku nemá 100% ale automatickú, čo je v danom prípade 100% ale nemusí to tak byť vždy.

class=container má šírku 80% kvôli tomu aby ho bolo možné centrovať na stred a jeho obsah nebol na celú šírku stránky. je pre každú sekciu rovnaký, tak preto class
BTW: pridal by som do CSS ešte toto lebo containter nie je clearovaný

.container::after {
            content: "";
            display: block;
            clear: both;
        }

class=box nemá šírku 100% ale automatickú. Keďže je to floatovaný prvok, tak sa jeho šírka mení na základe jeho obsahu, čiže môže byť rôzna.

Nahlásit jako SPAM
IP: 195.98.7.–
Front-end senior web developer at Azet, a.s. & Ringier Axel Springer Slovakia.
JavaScript (ECMA5, ECMA6+), TypeScript, HTML, CSS specialist
Zjistit počet nových příspěvků

Přidej příspěvek

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 15 hostů

Podobná vlákna

Pomoc s kodem — založil Shockwave

Pomoc s kodem — založil ask@t

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032019 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý