Problem ze strona internetowa

pytanie zadane 9 grudnia 2015 w HTML i CSS przez gab123 Mądrala (5,230 p.)
edycja 9 grudnia 2015 przez gab123

Witam, tworze prosta strone internetową :

css :

body {
	background-color :  #778899 ;
	font-family: 'Roboto', sans-serif;
}
#container {
	width : 1000px ;
	margin-left: auto;
	margin-right: auto;
}
h1 {
	font-weight : 900 ;
	text-align : center ;
	color : white ;
	font-size : 32 ;
	letter-spacing: 3px; 
	padding : 5px ;
	margin : center ;
	margin-top : 15px ;
}
#MenuGlowne {
	background-color: #303030; 
	margin-top : 30 px ;
	padding : 10px ;
	margin-top : 20px ;
	min-height : 40 px ;
	color : black ;
}
#MenuBoczne {
	background-color: #dedede; 
	padding : 3px ;
	margin-top : 20px ;
	width : 250px ;
	color : black ;
	min-height : 620 px ;
	float : left ;
}
#Content {
	background-color: white;
	margin-left : 20px ;
	padding	: 20px ;
	color : black ;
	width : 700px ;
	min-height : 620 px ;
	float : right ;
}
#oToMojBlog {
	margin-top : 20px ;
	background-color : #128870 ;
	min-height : 400 px ;
	color: white;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 25px;
	height: 170px;
}
#stopka {
	padding : 15px ;
	text-align : center ;
	color : white ;
	clear : both ;
	font-size : 16;
}
.OpcjeGlowne {
	float : left ;
	min-width: 50px;
	height: 25px;
	font-size: 18px;
	padding: 10px;
	border-right: 2px dotted #444444;
	opacity: 0.8;
}
.OpcjeGlowne : hover{
	background-color : #f36742;
	color : white ;
}
.OpcjeBoczne {
	float : bottom ;
	min-width: 50px;
	height: 60px;
	font-size: 18px;
	padding: 10px;
	border-bottom: 2px dotted #444444;
	opacity: 0.8;
}
.OpcjeBoczne : hover{
	background-color : #f36742;
	color : white ;
}

html :

<html>
<head>

<meta charset = "utf-8" />
<title> Kurs Java - Programowanie jest Cool </title>
<meta name = "description" content = "Zacznij cudna przygode jaka jest programowanie tu z nami. Nie pozalujesz"/>
<meta name = "keywords" content = "przygoda, programowanie, java, "/>
<meta http-equiv = "X-UA-Compatible" content = IE=edge,chrome=1" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href = "style.css" >

</head>

<body>

<h1> Java - jezyk przyszlosci (: </h1>

<div id = "container">

<div id = "MenuGlowne" >
<div class = "OpcjeGlowne" >  // </div>
<div class = "OpcjeGlowne" >  // </div>
<div class = "OpcjeGlowne" >  // </div>
<div class = "OpcjeGlowne" > //</div>
<div class = "OpcjeGlowne" >  // </div>
<div class = "OpcjeGlowne" >//</div>
<div class = "OpcjeGlowne" >  // </div>
<div style="clear:both;"></div>


</div>

<div id = "MenuBoczne">

<div class = "OpcjeBoczne" >  <a href = "kursJavaDlaczegoJava.html" >Dlaczego Java </div>
<div class = "OpcjeBoczne" >  <a href = "kursJavaInstalacja.html" >Instalacja Eclipse i JAR </div>

<div id ="stopka">

Poznaj Jave. Czeka cie masa swietnej zabawy &copy; Wszelkie prawa zastrzeżone.

</div>
</body>

</html>
<div/>

Niestety nie dziala. Container i MenuBoczne zamiast byc obok siebie sa na ukos od siebie.

Z gory dziekuje za pomoc

Fajnie, że umieściłaś kod CSS w bloku, ale HTML też wyp

1 odpowiedź

odpowiedź 9 grudnia 2015 przez zirael [PL] Mądrala (5,200 p.)

Po zerowe: kod umieszczamy w przeznaczonych ku temu tagach [code]!

Po pierwsze div'y zamykasz używając składni </div> a nie <div/>.

Po drugie wszystkie div'y zamykasz przed tagami </body> i </html>.

Po trzecie tworząc menu zrób jednego diva w którym umieścisz listy ol, ul, li.

Do reszty rozwiązania dojdziesz sam, wystarczy trochę popróbować. Pozdrawiam.

komentarz 9 grudnia 2015 przez szmq Pasjonat (22,770 p.)
edycja 9 grudnia 2015 przez szmq

Po czwarte Container zawiera Menu boczne, więc jak może być obok niego. (Pisz zrozumiale).

Po piąte skoro widzisz, że dany znacznik domykasz na różne sposoby i w sumie to nie wiesz jak ma wyglądać jego składnia i do czego on w ogóle służy to popatrz do dokumentacji: http://www.w3schools.com/tags/tag_div.asp

Po szóste warto stosować html5: https://msdn.microsoft.com/pl-pl/library/struktura-dokumentu-i-nowe-elementy-html5.aspx

komentarz 9 grudnia 2015 przez zirael [PL] Mądrala (5,200 p.)

Tak, bo <div> kończący diva id=container jest nad <div id="menuBoczne">, zamiast na samym końcu kodu jako zamykający. Myślę że to nie sposób nie zauważyć :)

komentarz 9 grudnia 2015 przez szmq Pasjonat (22,770 p.)

Nie. Ten div o którym mówisz zamyka Menu główne, a container miał zamknąć

</html>
<div/>

komentarz 9 grudnia 2015 przez zirael [PL] Mądrala (5,200 p.)

Masz rację, wrzuciłem to na szybko do Notepada++ i podejrzałem u siebie. W każdym razie kolejność znaczników i przede wszystkim wcięć jest niezmiernie ważna w utrzymaniu czystego kodu :)

komentarz 9 grudnia 2015 przez szmq Pasjonat (22,770 p.)

Yea, na pierwszy rzut oka też mysłałem, że zamyka container :) Większego spaghetti w tak małej ilości kodu html jeszcze nie widziałem.

komentarz 9 grudnia 2015 przez zirael [PL] Mądrala (5,200 p.)

Ostatnio zauważyłem, że większość problemów jakie trafiają na forum są albo absurdalnie śmieszne (napisz mi to i to), albo wynikają poprzez niechlujstwo i z czystego lenistwa niż z niemożliwości rozwiązania go samemu.

Dlatego nie ma co się dziwić że jakie pytanie, taka odpowiedź. Ale jeśli to forum ma trzymać poziom, to użytkownicy powinni dbać o Netykietę i schludność swoich wypowiedzi. Meh niestety to nie takie proste :/