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

Kurs CSS - problem

VPS Starter Arubacloud
–1 głos
293 wizyt
pytanie zadane 31 sierpnia 2017 w Nasze poradniki przez Patryk01 Obywatel (1,270 p.)
edycja 31 sierpnia 2017 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

0 głosów
odpowiedź 31 sierpnia 2017 przez maciek061 Gaduła (4,490 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 2017 przez Patryk01 Obywatel (1,270 p.)
Już
komentarz 31 sierpnia 2017 przez maciek061 Gaduła (4,490 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 2017 przez Patryk01 Obywatel (1,270 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 2017 przez maciek061 Gaduła (4,490 p.)
Powodzenia w przyszłości :)
0 głosów
odpowiedź 31 sierpnia 2017 przez radek024 Szeryf (77,180 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 2017 przez Patryk01 Obywatel (1,270 p.)
Kod dodany
komentarz 31 sierpnia 2017 przez radek024 Szeryf (77,180 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 2017 przez Patryk01 Obywatel (1,270 p.)
As You wish ;)
komentarz 31 sierpnia 2017 przez radek024 Szeryf (77,180 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 2017 przez Patryk01 Obywatel (1,270 p.)
Dzięki, już wszystko pasuje :)

Podobne pytania

0 głosów
1 odpowiedź 604 wizyt
0 głosów
0 odpowiedzi 298 wizyt
pytanie zadane 20 marca 2022 w Nasze poradniki przez xVarmondx Początkujący (350 p.)
+2 głosów
1 odpowiedź 378 wizyt
pytanie zadane 13 marca 2022 w Nasze poradniki przez xVarmondx Początkujący (350 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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!

...