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

Problem ze stroną ( prawdopodobnie pokręciłem coś z flout: left; ale nie wiem gdzie )

VPS Starter Arubacloud
0 głosów
285 wizyt
pytanie zadane 2 lipca 2016 w HTML i CSS przez TheFunny Gaduła (3,420 p.)
edycja 2 lipca 2016 przez TheFunny

W ramach ćwiczeń postanowiłem zaprojektować prostą stronkę w CSS z darmowymi ebook'ami. Jednak musiałem w którymś momencie coś pokręcić bo div "content" wyświetla mi się pod div'em "menu", mimo uzytego flout: left;

Tutaj HTML:
 

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <title>Ebook4You</title>
    <meta name="description" content="Tysiące darmowych ebooków specjalnie dla Ciebie !" />
    <meta name="keywords" content="ebbok, free, książk, czytnik" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="ebook.css" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Titillium+Web:700,400&subset=latin-ext,latin' rel='stylesheet' type='text/css'>
</head>
<body>
    <div id="box">
        <div id="logo">
            Ebook4You
        </div>
        <div id="topbar">
            Tysiące darmowych ebook'ów specjalnie dla Ciebie !
        </div>
        <div id="menu">
            <div class="option">Strona główna</div>
            <div class="option">Encyklopedia</div>
            <div class="option">Pisarze</div>
            <div class="option">Gatunki</div>
            <div class="option">TOP 10 ebook'ów</div>
            <div class="option">Autorzy</div>
            <div style="clear: both;"></div>
        </div>
        <div id="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo dolor, rhoncus sit amet neque dictum, varius volutpat sapien. Donec pharetra, sapien vitae mattis vehicula, ipsum dolor pulvinar ligula, sed semper mi lacus eu dui. Mauris consequat aliquam est a bibendum. Fusce mattis, velit a suscipit congue, ante massa gravida nulla, id venenatis dui ligula sit amet sem. In felis ligula, egestas vel tristique a, ornare porttitor diam. Fusce ac augue nisl. Duis lacus nulla, tristique et efficitur ac, luctus ac ligula. Aliquam mattis mattis enim, sed lobortis sem interdum vel. Sed ornare varius ex, feugiat placerat neque malesuada non. Cras ut est est. Curabitur vitae est lorem. Quisque non condimentum velit, eget tempor justo. Proin quis feugiat est. Duis urna arcu, congue a dui eu, iaculis tincidunt turpis. Mauris euismod, dui a pulvinar maximus, quam elit convallis sem, sed maximus quam augue ac libero. In vitae massa mollis, egestas justo ut, vulputate nisi.</br>

        Aliquam dictum tempus metus a placerat. Aliquam pulvinar porta lacinia. Donec rutrum felis quis dapibus cursus. Nam accumsan a sem ut rhoncus. Donec vitae porta augue. Ut mollis risus ut libero pellentesque, nec mollis magna viverra. In vestibulum risus at venenatis pulvinar. Sed nec dapibus ligula. Quisque pulvinar turpis risus, in dictum nisl malesuada non. Vestibulum aliquet, mauris quis fermentum sollicitudin, nibh lacus cursus diam, sit amet mattis ante lectus eget mauris. Duis sed ipsum in ex efficitur sodales. Vivamus eleifend a velit a semper. Aenean id tempus ante, id egestas metus. Duis sit amet magna id neque rhoncus tempor consectetur eget augue.</br>

        Suspendisse eget tristique lacus. Pellentesque tincidunt, lectus ac pharetra vehicula, neque felis eleifend magna, a tempor erat neque a est. Suspendisse potenti. Sed sagittis suscipit euismod. Nam fringilla nunc orci, id viverra mauris mollis vel. Ut volutpat ex a efficitur porttitor. In euismod sed ex sed semper. Donec semper, magna mattis interdum fermentum, nisi magna dictum dui, eget dapibus felis dolor sed nibh. Mauris eu ipsum non risus faucibus eleifend at sed ex. Morbi gravida mauris at quam tincidunt vehicula. Etiam convallis lacus at sagittis vulputate.</br>
        </div>
        <div id="footer">
            Darmowe ebooki &copy Wszelkie prawa zastrzeżone.
        
        
    </div>

</body>
</html>


 

A tu CSS:

 

body
{
    background-color: white;
    font-family: 'Titillium Web', sans-serif;
}

#box
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#logo
{
    color: #3AAD34;
    font-size: 45px;
    font-weight: 700;
    letter-spacing: 1px;
}

#topbar
{
    background-color: #245E21;
    color: white;
    padding: 20px;
    font-size: 20px;
}

#menu
{
    float: left;
    background-color: #AFC9AD;
    width: 158px;
    min-height: 700px;
    padding: 10px;
    text-align: center;
    border-right: 2px dotted black;
}

#content
{

    width: 820px;
    background-color: #A9D9A9;
    min-height: 700px;
    text-align: justify;
    padding: 20px;
    float: left;
}
#footer
{
    clean: both;
}

 

3 odpowiedzi

0 głosów
odpowiedź 2 lipca 2016 przez Arkadiusz Waluk Ekspert (287,550 p.)
wybrane 2 lipca 2016 przez TheFunny
 
Najlepsza
Jak na moje oko to trochę źle wyliczyłeś szerokości.

#menu = 158px szerokości + 10px lewy padding + 10px prawy padding + prawe obramowanie 2px = 180px

#content = szerokość 820px + 10px lewy padding + 10px prawy padding = 840px

180px + 840px = 1020 czyli więcej od szerokości całej strony, która wynosi 1000.

Rozwiązanie to albo poprawne wyliczenie albo użycie box-sizing.

I do tego float: left powinno być także nadane dla elementu #content, clear: both możesz użyć później.
1
komentarz 2 lipca 2016 przez TheFunny Gaduła (3,420 p.)
Dziękuje :D
0 głosów
odpowiedź 2 lipca 2016 przez R.orlinski Mądrala (5,490 p.)
#content też musi mieć float:left. Dopiero po nim dajesz clear:both.
komentarz 2 lipca 2016 przez TheFunny Gaduła (3,420 p.)
Nadal ten sam problem :/
0 głosów
odpowiedź 4 lipca 2016 przez Carcass Nowicjusz (200 p.)
Mi się wydaje że na końcu powinno być clear: both;      , a Ty masz clean.
komentarz 8 lipca 2016 przez pablop76 VIP (123,060 p.)
Żle wyliczyłeś width jak wspomniał Arek. Usuń pading: 20px w #content i zobaczysz. Możesz dodać box-sizing: border-box; i pozbędziesz sie problemu lodejmowania padingów i borderów, albo dobrze licz szerokość.

Podobne pytania

0 głosów
1 odpowiedź 530 wizyt
pytanie zadane 30 listopada 2017 w HTML i CSS przez Zozol Początkujący (270 p.)
0 głosów
1 odpowiedź 169 wizyt
pytanie zadane 29 marca 2017 w HTML i CSS przez BleBlock Użytkownik (600 p.)
0 głosów
1 odpowiedź 268 wizyt
pytanie zadane 7 lipca 2019 w Rozwój zawodowy, nauka, praca przez rice Początkujący (440 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...