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

Kurs CSS - problem

–1 głos
88 wizyt
pytanie zadane 31 sierpnia w Nasze poradniki przez Patryk01 Nowicjusz (210 p.)
edycja 31 sierpnia przez Patryk01

Witam, kiedy skończyłem 2 odcinek kursu CSS napotkałem problem. Mianowicie po dokładnym zrobieniu strony (w tym przypadku o Linuxie) efekt końcowy wyszedł trochę inny (może dlatego, że mam 1920x1080). Tak czy inaczej wygląda to tak jak poniżej (wszystko po lewej stronie, stopka strasznie wysoka). Czy następnym razem muszę coś dopisać do kodu? Co w tym momencie zrobić? (kod taki sam jak Pana Mirosława). Z góry dziękuję :)

 

<!DOCTYPE HTML>
<html lang="pl"> 
<head>
<meta charset="utf-8"/>
<title>Poznaj Linuxa :) </title>   
<meta name="description" content="Serwis poświęcony systemowi Linux. Naucz się wszystkiego, co chcesz wiedzieć o Linuxie!"     />
<meta name="keywords" content="Linux, Kurs, nauka, co to jest linux," />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,900&amp;subset=latin-ext" rel="stylesheet">


</head>
<body>
<div id="container">
        
        <div id="logo">Poznaj Linuxa :) 
        </div>
        
        <div id="menu"><div class="option">Strona główna </div>
        <div class="option">Dystrybucja </div>
        <div class="option">Instalacja </div>
        <div class="option">Polecenia </div>
        <div class="option">Linus Torvalds </div>
        <div class="option">O projekcie </div>
        <div style="clear:both"> </div>
        
        </div>        
        
        <div id="topbar">
        <div id="topbarL">
        <img src="linux.png" />
        </div>
        <div id="topbarR"> 
         <span class="bigtitle"> O projekcie słów kilka </span>
        <div style="height:15px"> </div>
        Kiedy mówisz „Napisałem program, który wywalił Windows”, ludzie gapią się na ciebie głupkowato i mówią „Hej, dostałem je wraz z systemem, *za darmo* - Linus Torvalds, twórca Linuxa
        </div>
        <div style="clear:both"> </div>
        </div>
         
         <div id="sidebar"> 
        <div class="optionL">Strona główna </div>
        <div class="optionL">Dystrybucja </div>
        <div class="optionL">Instalacja </div>
        <div class="optionL">Polecenia </div>
        <div class="optionL">Linus Torvalds </div>
        <div class="optionL">O projekcie </div>
         </div>
        
        <div id="content"> 
        
          <span class="bigtitle">Dlaczego Linux?  </span>
        <div class="dottedline"> </div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consequat urna purus, eu viverra justo ullamcorper ac. Nam eget lacinia ipsum, id aliquam ex. Curabitur eu enim justo. Etiam porttitor ante ac erat pharetra ultrices. Pellentesque quis scelerisque ligula, ac dapibus urna. Cras et eleifend orci, ullamcorper facilisis tellus. Aliquam posuere vel dui quis iaculis. Mauris quis eros lorem. Etiam ligula magna, ornare vitae lobortis nec, placerat sed risus. Donec et ultricies neque, at tristique mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        <br /><br />
        Donec lectus est, luctus sed urna id, porttitor rutrum elit. Quisque tempus id dolor in fringilla. Aenean vel nisl facilisis, hendrerit nunc sed, volutpat sapien. Suspendisse nec efficitur libero. Duis cursus fringilla erat ultrices blandit. Pellentesque a enim in mauris blandit placerat. Aliquam erat volutpat. Aliquam erat volutpat. Nam rhoncus dui ipsum, ut fringilla enim sollicitudin eu. Mauris rutrum, velit et cursus rhoncus, libero tortor semper velit, eget posuere ligula justo eget nisi. Mauris tincidunt, diam eu dignissim efficitur, risus enim rutrum tellus, et hendrerit orci dui in turpis. Aliquam sed fringilla tortor. Morbi aliquet feugiat ex, at sodales sapien aliquet eu.
        <br /><br />
        Suspendisse potenti. Fusce laoreet sapien sed posuere viverra. Vivamus ornare malesuada pharetra. Sed enim odio, egestas sed sapien vel, porta faucibus justo. Cras porttitor lacinia nisl eu sodales. Nulla nec pretium metus, nec consequat risus. Fusce blandit eleifend felis. Ut ligula felis, tristique eu interdum vel, eleifend eu felis. Cras ut sem tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque dictum dapibus lacinia. Cras sapien purus, porta vel auctor eget, ullamcorper eget mi.
        </div>
<div id="footer">Poznaj Linuxa - najlepszy darmowy system operacyjny. Strona w sieci od 2014r. &copy; Wszelkie prawa zastrzeżone </div>


</div>

</body>
</html>
body
{
	background-color:#404040;
	font-family: 'Lato', sans-serif;
	}
#Container
{
	width: 1000px;
	margin-left:auto;
	margin-right:auto;
}
#logo
{
	color:white;
	margin-top:20px;
	font-size:44px;
	letter-spacing:3px;
	font-weight:900;
	}
#menu
{
	background-color:#303030;
	color:#ffffff;
	padding:10px;
	margin-top:20px;
	}
#topbar
{
	background-color:#128870;
	color:white;
	padding:10px;
	margin-top:20px;
	margin-bottom:25px;
	height:170px;
}
#topbarL
{
	float:left;
	padding:20px;
	width:138px;
	text-align:center;
	border-right: 2px dotted #cccccc;
}
#topbarR
{
	float:left;
	padding:20px;
	width:760px;
	font-size:16px;
	text-align:justify;
}
#sidebar
{
	float:left;
	width:148px;
	min-height:620px;
	padding:20px;
	background-color: lightgray;
	text-align:center;
	font-size:18px;
	border-right: 2px dotted #666666;
}
#content 
{
	float:left;
	padding:40px;
	width: 730px;
	background-color:#dedede;
	min-height:580px;
	text-align:justify;
}
#footer 
{
	clear:both;
	color:white;
	text-align:center;
	padding:20px;
	font-size:18px;
}
.option 
{
	float:left;
	min-width:50px;
	font-size:18px;
	height:25px;
	padding:10px;
	border-right: 2px dotted #444444;
	opacity:0.8;
	}
.option:hover 
{
	background-color:#000000;
	cursor:pointer;
}
.optionL
{
	font-size:18px;
	height:25px;
	padding:10px;
	border-bottom: 2px dotted #444444;
}
.optionL:hover
{
	background-color:#f36742;
	color:white;
	cursor:pointer;
	
} 
.bigtitle
{
	font-size:32px;
	font-weight:900;
	letter-spacing:2px;
}
.dottedline
{
	height:5px;
	margin-top:15px;
	margin-bottom:20px;
	border-bottom:2px dotted #444444;
	
}

 

2 odpowiedzi

+1 głos
odpowiedź 31 sierpnia przez maciek061 Gaduła (4,370 p.)
W tytule pytania dokładniej opisz sprawę, "kurs css - problem" to trochę za ogólnie.

Podeślij kod, może popełniłeś jakiś błąd.
komentarz 31 sierpnia przez Patryk01 Nowicjusz (210 p.)
Już
komentarz 31 sierpnia przez maciek061 Gaduła (4,370 p.)

Znowu się przyczepię, ale przeczytaj regulamin tej strony. Do wstawiania kodu używaj bloków kodu (ostatnia ikonka w polu edycyjnym) albo serwisów typu wklej.org

Co do kodu, to masz zwykłą literówkę. W szóstej linijce pliku css masz #Container, a powinno być z małej #container, tak jak w pliku html. Po tej zmianie u mnie wszystko wraca na środek. 

komentarz 31 sierpnia przez Patryk01 Nowicjusz (210 p.)
Kurde dzięki wielkie, siedziałem nad tym dosyć długo i nie zauważyłem jednej źle wpisanej literki :D
komentarz 31 sierpnia przez maciek061 Gaduła (4,370 p.)
Powodzenia w przyszłości :)
0 głosów
odpowiedź 31 sierpnia przez radek024 Maniak (55,390 p.)

Najwyższa pora, abyś założył codepena :D. Moja szklana kula przepowiada błąd przy klasie .wrapper lub .container (okalającej resztę bloków strony) margin: 0 auto, ale nie jestem tego pewny w 100%. Warto, abyś podał kod - wtedy problem rozwiążemy na 100%.

1
komentarz 31 sierpnia przez Patryk01 Nowicjusz (210 p.)
Kod dodany
komentarz 31 sierpnia przez radek024 Maniak (55,390 p.)

Gdybym miał możliwość liczenia w nieskończoność przypadków gdzie pytający wkleja kod bezpośrednio do wpisu, to prawdopodobnie oparłbym się na poczciwym awaluku i jego prośbach o umieszczanie kodu w bloczkach do tego przeznaczonych.

Przeczytaj proszę artykuł który podałem i zrób to prawidłowo :D

komentarz 31 sierpnia przez Patryk01 Nowicjusz (210 p.)
As You wish ;)
komentarz 31 sierpnia przez radek024 Maniak (55,390 p.)

Zobacz na nazwę ID w HTMLu i w CSS. Są różne. Dobra praktyka mówi o tym, aby klasy oraz ID pisać małymi literami. Więcej piszę o tym tutaj: [KLIK].

komentarz 31 sierpnia przez Patryk01 Nowicjusz (210 p.)
Dzięki, już wszystko pasuje :)

Podobne pytania

0 głosów
1 odpowiedź 132 wizyt
–1 głos
1 odpowiedź 99 wizyt
pytanie zadane 24 sierpnia w Nasze poradniki przez Patryk01 Nowicjusz (210 p.)
0 głosów
1 odpowiedź 64 wizyt
pytanie zadane 28 grudnia 2016 w HTML i CSS przez kubekzone Użytkownik (530 p.)

42,445 zapytań

81,748 odpowiedzi

162,269 komentarzy

20,387 pasjonatów

Przeglądających: 114
Pasjonatów: 1 Gości: 113

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...