gdzie się potknęłam - strona działała, po dodaniu tła rozsypała się

pytanie zadane 30 marca 2017 w HTML i CSS przez agus0090 Nowicjusz (150 p.)

#container
{

	background-image: url(tlo.jpg);
	height:2000px;
	width:1340px;
	padding:0px;
	margin:0px;
	
}

#goratlo
{
	

    height: 500px;
    margin-left: 0px;
   


.gora1 
{
	
    background-image: url(logo.jpg);
    height: 200px;
    width: 250px;
    z-index: 1;
    float: left;
    margin-left: 100px;
    margin-top: 60px;
    padding-right: 15px;
}




.gora2 
{
    width: 500px;
    float: left;
    font-family: 'Exo 2', sans-serif;
  	border-radius:20px;
    color:black;
    border-style: solid;
    border-color: black;
    margin-top: 70px;
    z-index: 1;

}

#nav
{
	width: 500px;
	padding:0px;
	margin:0px;
	border: 0px;
	float: left;
	z-index: 1;
}

ul.parent 
{
    list-style: none;
    text-align: center;
    padding: 0;
    font-size: 30px;
}

ul.parent > li 
{
    font-weight: 800;
    list-style: none;
}

ul.child 
{
    list-style: none;
    padding: 0px;
}

ul.child > li
{
	font-weight: 200;
	padding-top: 10px;
}

.gora3
{
	background-image: url(logo2.jpg);
    height: 200px;
    width: 250px;
    z-index: 1;
    float:left;
    margin-right: 60px;
    margin-top: 60px;
}

.fi
{clear:both}

.foto
{
	width: 1000px;
	height: 300px;
	padding:0px;
	margin:0px;
	border:0px;
	margin-left:200px;
}

.jeden 
{
	width:250px;
	height: 300px;
	background-image: url(fryzjer.gif);
	float: left;
	margin-left:50px;
	border-style:solid;
	border-radius:20px;
	border-color:black;
}

.dwa
{
	width:250px;
	height: 300px;
	background-image: url(fryzjer.gif);
	float:left;
	margin-left:50px;
	border-style:solid;
	border-radius:20px;
	border-color:black;
}

.trzy
{
	width:250px;
	height: 300px;
	background-image: url(fryzjer.gif);
	float:left;
	margin-left:50px;
	border-style:solid;
	border-radius:20px;
	border-color:black;
}

.fi2
{clear:both;}

.misja
{
	width:500px;
	height: 300px;
	border-style: solid;
	border-color:black;
	border-radius:20px;
	margin-left:430px;
	margin-top:50px;
	text-align: center;

}

<!DOCTYPE HTML>
<html lang="pl">

<head>
<meta charset="utf-8"/>
<title>Czesanka - strona kreatywnego fryzjera</title>
<meta name="description" content="Przed tobą przechwałki najlepszego fryzjera w okolicy. Wpadnij i przekonaj się!"/>
<meta name="keywords" content="fryzjer,czesanie, najlepszy fryzjer, najlepszy salon fryzjerski"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
<link rel="stylesheet" type="text/css" href="plik.css"/>
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">

</head>
<body>

<div id="container">
 <div id="goratlo">

	<div class="gora1"></div>

	<div class="gora2">
		<nav id="navigation">
			<ul class="parent">
				<li>MENU
				 <ul class="child">
					<li>WYCZESANA MISJA</li>
					<li>TWORZYMY UCZESANKI</li>
					<li>WYCZESANE SOCIAL MEDIA</li>
					<li>WYCZESANA WSPÓŁPRACA</li>
					<li>HALO TO MY!</li>
				 </ul>
				</li>
			</ul>
		</nav>
	</div>
	<div class="gora3"></div>
	 <div class="fi"></div>
 </div>

 <div class="foto">
	<div class="jeden"></div>
	<div class="dwa"></div>
	<div class="trzy"></div>
	<div class="fi2"></div>
</div>

<div class="misja">historia, kim jesteśmy, jak zaczynaliśmy, dyplomy, gdzie praktykowaliśmy, co umiemy, jeszcze więcej przechwałek, kochamy fryzjerstwo, ciagle się szkolimy</div>


</div>



	




</body>

gdzie popełniłam błąd?????

mimo, że usunęłam to co spowodowało rozsypanie to nie naprawiło się, hmmmmmm :/

2 odpowiedzi

odpowiedź 30 marca 2017 przez niezalogowany

Masz niedomknięty element #goratlo w CSS.

komentarz 30 marca 2017 przez agus0090 Nowicjusz (150 p.)

już zupełnie usunęłam ten element bo to był w sumie div zbierający, jego usunięcie nie powinno niczego zmienić, ale stworzę go od nowa i sprawdzę

dzięki :)

komentarz 30 marca 2017 przez agus0090 Nowicjusz (150 p.)

mistrz, zadziałało !!!!

dzięki śliczne -> mój dzień uratowany :D:D

odpowiedź 30 marca 2017 przez MałyAleWariat Bywalec (2,830 p.)

Zmień to:

background-image: url(tlo.jpg);

Na to:

background: url("tlo.jpg");

komentarz 30 marca 2017 przez agus0090 Nowicjusz (150 p.)

nic się nie zmieniło :/

właśnie to mnie wkurza, bo jak do przeglądarki z sublima przekopiowałam div po divie właściwości to wszystko niby działa a tak po zapisaniu na divach wyskakuje display:block i koniec

komentarz 30 marca 2017 przez Pietrak Pasjonat (18,850 p.)

wygląda na złą ścieżkę do obrazka. Użyj development tools w przeglądarce.

komentarz 30 marca 2017 przez agus0090 Nowicjusz (150 p.)

już używałam:(

wszystko działało dopóki nie dodałam tego tła

dodałam tło w identyczny sposób jak tło w container, określiłam mu z-index= -1 a goratlo z-index=2 i pozostałym divom, które miały być na wierzchu

mimo to się rozsypało i nawet jak wykasowałam zmiany nie wróciło do poprzedniego formatu