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

Kurs HTML odc 3, 5 kafelek nie chce się przenieść na 2 stronę

VPS Starter Arubacloud
0 głosów
543 wizyt
pytanie zadane 19 marca 2017 w Rozwój zawodowy, nauka, praca przez GalAnonim Nowicjusz (150 p.)
edycja 19 marca 2017 przez GalAnonim

Witam,

Podobny temat pojawił się już na forum, jednak zamieszczone tam rozwiązanie nie pomogło. Będę bardzo wdzięczna jeśli ktoś znajdzie błąd, strona internetowa jest na jutro :)

body
{
background-color:#303030;
color:#ffffff;
font-family:'Lato',sans-serif;
font-size:20px;
}
#container
{
width:1000px;
margin-left:auto;
margin-right:auto;
}
.rectangle
{
width:960px;
margin:20px;
}
.square
{
width:50%;
float:left;
}
#logo
{
float:left;
font-family:'Josefin Sans',sans-serif;
font-size:70px;
width:600px;
margin-top:10px;
margin-bottom:10px;
}
#zegar
{
float:left;
font-family:'Josefin Sans',sans-serif;
font-size:70px;
margin-top:10px;
margin-bottom:10px;
}
.tile1
{
width:230px;
height:142px;
background-color:#3095d3;
float:left;
margin:10px;
}
.tile2
{
width:230px;
height:142px;
background-color:#666666;
float:left;
margin:10px;
}
.tile3
{
width:230px;
height:142px;
background-color:#93c748;
float:left;
margin:10px;
}
.tile4
{
width:420px;
height:142px;
background-color:#ee5232;
margin:10px;
}
.tile5
{
margin:10px;
width:420px;
height:304px;
background-color:#666666;
}


<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lato|Josefin+Sans&subset=latin-ex' rel='stylesheet'type='text/css'>
</head>


<body>
<div id="container">

<div class="rectangle">
<div id="logo">Jan Kowalski</div>
<div id="zegar">12:00:00</div>
<div style="clear:both;"></div>
</div>
<div class="square">
<div class="tile1">1</div>
<div class="tile1">1</div>
<div style="clear:both;"</div>
<div class="tile2">2</div>
<div class="tile3">3</div>
<div style="clear:both;"</div>
<div class="tile4">4</div>
</div>
<div class="square">
<div class="tile5">5</div>
</div>
<div style="clear:both;"</div>
<div class="rectangle"></div>
</div>

</body>


</html>

komentarz 19 marca 2017 przez imklau Nałogowiec (42,090 p.)
kod wstawiamy w bloczki do tego przeznaczone ;)

1 odpowiedź

+1 głos
odpowiedź 19 marca 2017 przez imklau Nałogowiec (42,090 p.)
wybrane 19 marca 2017 przez GalAnonim
 
Najlepsza
.square{
    width: 50%;|
    float: left;
}

tu masz problem chyba

komentarz 19 marca 2017 przez GalAnonim Nowicjusz (150 p.)
Jeżeli chodzi o width: 50%; to obok jest postawiony kursor
komentarz 19 marca 2017 przez imklau Nałogowiec (42,090 p.)
a .tile4 i tile5 nie powinny mieć szerokości po 420px?
komentarz 19 marca 2017 przez imklau Nałogowiec (42,090 p.)
i właśnie dlatego wstawiamy kod w odpowiednie miejsca, a nie wstawiamy screeny bo później komuś trudniej znaleźć rozwiązanie problemu ;p
komentarz 19 marca 2017 przez imklau Nałogowiec (42,090 p.)
dobra nie było pytania, Ty tam nie masz paddingu :P
poczekam na normalny kod :D
komentarz 19 marca 2017 przez GalAnonim Nowicjusz (150 p.)
Dziękuję, będę wiedzieć na przyszłość :D Jestem tu "świeża" i jeszcze nie znam tutejszych zasad :) Mimo to dziękuję, że stara mi się Pani pomóc. Stronę robiłam na podstawie filmiku i w title4 i title5 była taka szerokość. Spróbowałam zmienić i nie pomogło ;/
komentarz 19 marca 2017 przez imklau Nałogowiec (42,090 p.)
noo i dzięki temu że wstawiłaś kod w bloczki łatwiej było znaleźć problem :P
nie masz zamkniętych divów z clear:both więc pozamykaj je i powinno działać ;)
komentarz 19 marca 2017 przez GalAnonim Nowicjusz (150 p.)
Dziękuję bardzo, że ja tego wcześniej nie zauważyłam. :D Godzinę się nad tym męczyłam :D

Podobne pytania

0 głosów
1 odpowiedź 116 wizyt
0 głosów
1 odpowiedź 1,309 wizyt
0 głosów
2 odpowiedzi 439 wizyt

92,452 zapytań

141,262 odpowiedzi

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

...