Forum PHP.pl > [CSS][HTML] html5 podstawy

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML] html5 podstawy

mrk9109

22.03.2016, 22:04:32

Witam po długiej przerwie z stronami postanowiłem troche znów cos porobić i przy nauce html 5 wyszukałem kilka poradników odnośnie budowy strony i mam pytanko prosty kod i nie wiem dlaczego nie srodkuje mi tresci chociaz mam ustawione margin: 0 auto;

[HTML] pobierz, plaintext 
<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title Strony</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/media.css">
</head>
<body>
<div id="container">
        <header>
		          <img src="images/header.png" alt="ZZRG Chwalowice" />
		</header>
		<nav>
		          
		</nav>
</div>  
</body>
</html>
[HTML] pobierz, plaintext

css3

[CSS] pobierz, plaintext 
* {padding:0;margin:0;}
 
html {width:100%;height:100%;}
body {font-family:Arial, Helvetica, Sans-serif;font-size:14px;line-height:1.5;font-weight:400;color:#00000;background:#dadada;}
 
.container {width:800px;margin:0 auto;overflow: hidden;}
 
header {background:#000000;width:100%;height:400px;}
header img {margin:0 auto;}
[CSS] pobierz, plaintext

Comandeer

22.03.2016, 22:40:49

Bo próbujesz stylować klasę .container a nie id #container. Po prostu zamień w HTML id na class i powinno działać. Co prawda można zmienić selektor w CSS, ale stylowanie po id od bardzo dawna uważane jest za bardzo złą praktykę.

mrk9109

22.03.2016, 22:48:06

Nie zauważyłem masz racje , mam jeszcze inne pytanie strona wyswietla mi sie prawidlowo na pc ale juz na telefonie sie rozwala dlaczego ? albo gdy uzyje fontface to wielkosc liter itp na tel mi rozwala strone

herWALDI

23.03.2016, 07:49:11

Zapewne problem leży po stronie obrazka. Korzystasz z jakiegoś framework'a css? Jeżeli tak to sprawa prosta, jeżeli nie to dodaj do CSS

[CSS] pobierz, plaintext 
img {max-width:100%;height:auto;}
[CSS] pobierz, plaintext

Dodatkowo wpadłem na to, że pewnie masz klasę container na stałe ustawioną, spróbuj tego:

[CSS] pobierz, plaintext 
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
[CSS] pobierz, plaintext

mrk9109

23.03.2016, 18:21:41

dzięki

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.