 [CSS][HTML]Pomocy! Strona się rozjeżdża :( |
  |
| [CSS][HTML]Pomocy! Strona się rozjeżdża :( |
 3.07.2017, 13:05:01
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 1 Pomógł: 0 Dołączył: 3.07.2017 Ostrzeżenie: (0%) 
 |
Kod : HTML
<!DOCTYPE HTML> <html lang="pl"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Karta FUT</title> <meta name="description" content="Zamów własną kartę fut!" /> <meta name="keywords" content="karta fut, twoja karta fut, twoja karta" /> <link rel="stylesheet" href="style.css" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Anton|Arvo" rel="stylesheet"> </head> <body> <div id="container"> <div id="rectangle"> <div class="tile1"><img class="zdj1" src="kartafut.png" width="300px" height="46px" /></div> <div class="tile2"><img class="zdj4" src="stronaglowna.png" width="230px" height="38px"/></div> <div class="tile2"><img class="zdj4" src="faq.png" width="230px" height="38px" /></div> <div class="tile2"><img class="zdj4" src="opinie.png" width="230px" height="38px" /></div> <div class="tile2"><img class="zdj4" src="kontakt.png" width="230px" height="38px" /></div> </div> <div id="tlo" style="clear: both"> <div class="pojemniki"><img " class="zdj2" src="kiedrzynek.png" width="280px" height="420px" /> <div class="przycisk"><img class="zdj3" src="twojakartafut.png" width="300px" height="46px" /></div> </div> <div class="pojemniki"><img " class="zdj2" src="hazard.png" width="280px" height="420px" /> <div class="przycisk"><img class="zdj3" src="gotowakartafut.png" width="300px" height="46px" /></div> </div> </div> </div> </div> </body> </html> Kod CSS: body { background-image: url(FIFA18_EASHomepage.jpg); background-repeat: no-repeat; background-size: cover; } #container { width: 100%; margin-left: auto; margin-right: auto; } #rectangle { width: 100%; height:66px; text-align: center; background-color: #404040; float: left; border-top: 3px solid #ffffff; border-bottom: 3px solid #ffffff; border-left: 3px solid #ffffff; border-right: 3px solid #ffffff; } #tlo { width:100%; text-align: center; float: left; } .tile1 { width: 300px; height: 45px; float:left; position: relative; left:10px; top:10px; right:10px; } .tile2 { width: 17.5%; height: 46px; float:left; font-family: 'Anton', sans-serif; padding:10px; position: relative; left:10px; margin-left:1%; } .tile2:hover { background-color: #4d4d4d } .pojemniki { width: 40%; height:530px; float: left; background-image: url(tlo.png); background-repeat: no-repeat; background-size: cover; margin:60px; margin-left:5%; margin-right:5%; } .przycisk { width:310px; height:56px; background-color: #ffcc00; margin-right:auto; margin-left:auto; margin-top:30px; border-top: 3px solid #cca300; border-bottom: 3px solid #cca300; border-left: 3px solid #cca300; border-right: 3px solid #cca300; } .przycisk:hover { background-color: #eebb00; } .zdj2 { position: relative; top:20px } .zdj3 { position: relative; top:5px } .zdj4 { position: relative; top:4px } Po powiększaniu się strona się rozjeżdża z wszystkimi kafelkami  POMOCY |
 |
 
|
|
13.07.2017, 19:44:00
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 1 374 Pomógł: 149 Dołączył: 1.03.2006 Ostrzeżenie: (0%)
|
Bardzo niesemantyczny kod. Warto wykorzystywać znaczniki wprowadzone w HTML5 a pakowanie img w div to dla mnie kuriozalny pomysł. A zamiast float zacznij wykorzystywać flex-box https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Ten post edytował JoShiMa 13.07.2017, 19:45:34 -------------------- |
|
|
|
|
|
Wersja Lo-Fi | Aktualny czas: 13.07.2025 - 12:12 |
