• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z divami w CSS

Aruba Cloud - Virtual Private Server VPS
0 głosów
215 wizyt
pytanie zadane 2 września 2015 w HTML i CSS przez Loogik Nowicjusz (120 p.)
przywrócone 2 września 2015 przez efiku

Witam jestem nowy na forum jak i w całym tym tworzeniu stron. Zainspirował mnie kurs Mirosława Zelenta i postanowiłem liznąć troche wiedzy i stworzyć coś swojego. Otóż problem jest prosty utknąłem na kursie 2 HTML. W trakcie tworzenia pan Zelent zamieścił w kodzie CSS komende float: left; która dopasowała mu 3 divy obok siebie. U mnie pomimo zastosowania tego nie ułożyły się w taki sposób. Zresztą zamieszczam tutaj kod który zdążyłem opisać i zdjęcie z tego jak to wygląda. 

http://pastebin.com/rDG0qt6v

 

 

 

Nie wiem co zrobilem źle w miare możliwości prosiłbym o odpowiedź bez zbędnych komentarzy.

Dziękuje i pozdrawiam Loogik.

2 odpowiedzi

0 głosów
odpowiedź 2 września 2015 przez gnx Dyskutant (7,720 p.)
edycja 2 września 2015 przez gnx

1. Dałeś dwukropki zamiast średników po float:left i clear:both

2. Musisz im nadać jakąś szerokość, aby ustawiły się obok siebie, na przykład:

 

#nav
    {
      float: left;    
      width:33%;
       
    }  
    #content
    {
      float: left;  
       width:33%;
    }
    #ad
    {
        float: left;
         width:33%;
    }

http://pastebin.com/MFK0aLQA

komentarz 2 września 2015 przez Schizohatter Nałogowiec (39,600 p.)
Ad 1.
Zamiast clear: both zrobił w ogóle clear; both: - na odwrót znaki :P

Ad 2.
To dlatego, że divy to elementy blokowe, a elementy blokowe zajmują domyślnie 100% szerokości (w domyśle - szerokości rodzica).

A w meta description brakuje zakończenia tagu.
0 głosów
odpowiedź 3 września 2015 przez Mieszko I Stary wyjadacz (10,980 p.)

Powinno być tak:

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />  
    <title>Test</title>
    <meta name="description" content="test"
   <meta name="keywords" content="test" />  
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <style>
    #container
    {
      width: 1000px;  
     margin-left: auto;
    margin-right: auto;
    }
    #logo
    {
    background-color: black;  
    color: white;  
    text-align: center;
    padding: 15px;
    }
    #nav
    {
      float: left; 
       
    }  
    #content
    {
      float: left;
    }
    #ad
    {
        float: left;
    }
    #footer
    {
       clear: both;  
    }
   
    </style>
     
    </head>
     
    <body>
    <div id="container">
    <div id="logo">
    <h1> test</h1></div>
 
    <div id="nav">  
        test1 <br/>
        test2 <br/>  
        test3 <br/>
        test4 <br/>
        </div>
         
    <div id="content">  
      <h2>Bakuman</h2>  
        (jap. バクマン。 Bakuman。?) – manga napisana przez Tsugumi Ohba (Tsugumi Ōba) i  
        zilustrowana przez Takeshiego Obatę. Opowiada historię dwóch chłopców: rysownika
        Moritaka. <br></br>
        Mashiro i początkującego pisarza Akito Takagi, kolegów z dziewiątej klasy, którzy  
        pragną zostać profesjonalnymi mangakami.
    </div>
    <div id="ad">
    <img src="1436597622.jpg"/>    
    </div>          
         <div id="footer">
        Najlepsze obrazki &copy;  
        </div>  
         
         
         
         
         </div>
     
    </body>
 
</html>

Pozdrawiam.

Podobne pytania

0 głosów
2 odpowiedzi 243 wizyt
pytanie zadane 21 lipca 2022 w HTML i CSS przez NetSavage Nowicjusz (120 p.)
0 głosów
2 odpowiedzi 1,177 wizyt
pytanie zadane 5 maja 2020 w HTML i CSS przez ptomeccc Użytkownik (800 p.)
0 głosów
1 odpowiedź 534 wizyt
pytanie zadane 22 października 2017 w HTML i CSS przez Ziuziek Mądrala (5,140 p.)

93,335 zapytań

142,331 odpowiedzi

322,415 komentarzy

62,670 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...