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

Kurs 3 HTML Porblem z float left

VPS Starter Arubacloud
0 głosów
261 wizyt
pytanie zadane 28 października 2017 w HTML i CSS przez PrzyszłyProgramista Nowicjusz (240 p.)
edycja 28 października 2017 przez PrzyszłyProgramista

Witam :) Ktoś wie dlaczego mój 5 div(tile5) sie nie chce ustawić po prawej stronie strony tylko przeskakuje na dół, użyłem float left dla square i potem clearboth.Jestem w trakcie przerabiania 3 kursu Html Zelenta i robie to troche inaczej niż od ale myśle żę powinno działać, to jest link do google drive z folderem: https://drive.google.com/open?id=0B-cAAn5MuY-CMm1DWXRPM3l4cjA  Dziekuje z góry za wszelką pomoc.


<html>
<head>
<title>Portfolio</title>

<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="css/fontello.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

</head>

<body>

<div id="container">

<div class="rectangle">
<div id="logo">Jan Kowalski</div>
<div id="zegar"></div>
</div>

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

<div class="square">
<div class="tile1">Kim jestem</div>
<div class="tile1"> co oferuje</div>
<div style="clear:both;"></div>
<div class="tile2">curriculum vitae</div>
<div class="tile3">Kontakt ze mna</div>
<div style="clear:both;"></div>
<div class="tile4">Live life to the fullest, and focus on the positive.</div>
<div>

<div class="square">
<div class="tile5">5<div>
<div class="yt"><a href="http://youtube.com" target="_blank" class="sociallink">YT</a></div>
<div class="fb"><a href="http://facebook.com" target="_blank" class="sociallink">FB</a></div>
<div class="gplus"><a href="http://plus.google.com" target="_blank" class="sociallink">GPLUS</a></div>
<div class="tw"><a href="http://twitter.com" target="_blank" class="sociallink">TW</a></div>
</div>
<div style="clear:both;"></div>

</body>

</body>
</html>
body
{
    
    background-color: #1f1f14;
    font-size:20px;
    color:white;
    font-family: 'Lobster', cursive;
    
}

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

.rectangle
{
    width: 960px;
    margin: 20px;
    text-align: center;
    
    
}

.square
{
    
    float:left;
    width:50%
    
}

#logo
{
    
    color: white;
    font-size: 70px;
    text-decoration: italic;
    text-align: left;
    width:450px;
    float:left;
    
    }

#zegar
{

  float:left;
 
  
  }

.tile1
{
    height:142px;
    width:230px;
    margin:10px;
    background-color: #3095d3;
    float: left;
    text-align: center;
    
}

.tile2
{
    height:142px;
    width:230px;
    margin:10px;
    background-color: #ff6600;
    float:left;
    text-align: center;
}

.tile3
{
    height:142px;
    width:230px;
    margin:10px;
    background-color: #00cc00;
    float:left;
    text-align: center;
}

.tile4
{
    height:112px;
    width:480px;
    margin:10px;
    background-color: #00cc00;
    float:left;
    text-align: center;
    font-size: 26px;
    padding-top: 50px;
    line-height: 150%;
}

.tile5
{
    height:244px;
    width:420px;
    margin:10px;
    background-color: #666666;
    text-align: justify;
    padding: 30px;
    
}

.yt
{
    
    width:70px;
    height:70px;
    background-color: #f44b42;
    float:left;
    margin:10px;
    
    
}

.fb
{
    
    width:70px;
    height:70px;
    background-color: #f44b42;
    float:left;
    margin:10px;
    
    
}

.gplus
{
    
    width:70px;
    height:70px;
    background-color: #f44b42;
    float:left;
    margin:10px;
    
    
}

.tw
{
    
    width:70px;
    height:70px;
    background-color: #f44b42;
    float:left;
    margin:10px;
    
    
}


 

komentarz 28 października 2017 przez ScriptyChris Mędrzec (190,190 p.)

Wrzuć proszę kod w odpowiednie bloczki - łatwiej będzie sprawdzić kod i znaleźć problem.

komentarz 28 października 2017 przez PrzyszłyProgramista Nowicjusz (240 p.)
OK tak zrobiłem
komentarz 28 października 2017 przez ScriptyChris Mędrzec (190,190 p.)
Jeszcze CSS wstaw w bloczek :)
1
komentarz 28 października 2017 przez Eryk Andrzejewski Mędrzec (164,260 p.)

Przy wstawianiu kodu w bloczek proszę też uważać na to, żeby inny tekst nie wpadł do bloczku (jak w twoim przypadku) - wtedy pytanie jest strasznie nieczytelne. sad

1 odpowiedź

0 głosów
odpowiedź 28 października 2017 przez PrzyszłyProgramista Nowicjusz (240 p.)
Ok udało mi sie ;)

Podobne pytania

0 głosów
1 odpowiedź 190 wizyt
0 głosów
2 odpowiedzi 582 wizyt
pytanie zadane 27 kwietnia 2017 w HTML i CSS przez Eliro Stary wyjadacz (12,160 p.)
0 głosów
1 odpowiedź 524 wizyt

92,455 zapytań

141,263 odpowiedzi

319,100 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!

...