Problem nawigacji i grafiki

pytanie zadane 25 września 2016 w HTML i CSS przez Vromix Początkujący (410 p.)

Witam mam problem umieszczenia pliku graficznego z nawigacja tak aby przylegala do lewej strony ekranu a nie zaczynała sie od szerokosci podanej w container a koniecznie musi być pod logiem.

</head>
<body>
<div id="bg">
	<div id="container">
		<div class="logo"><img src="img/logo1.png"></div>
			<div id="nav_bar"><img src="img/nav_bar.png">
				
			</div>
				
			</div>

	</div>
</div>
	
	

</body>

i jeszcze css

*
{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;

	
}

body
{
	color: #333;
	font-size: 19px;
	background-image: url("img/bg.png");

}

.logo
{
	text-align: center;
	padding: 10px;
}

#container
{
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
}

.nav_bar
{
	padding: 10px;
	

}

Aktualnie wyglada to tak.

komentarz 26 września 2016 przez Vento Pasjonat (17,120 p.)

Stylizuj po klasie a nie po ID, bo ID jest zarezerwowane dla JS..

Po drugie poczytaj o znacznikach html5 taki jak np. nav, main etc.

1 odpowiedź

odpowiedź 26 września 2016 przez pablop76 VIP (123,180 p.)

nav_bar nadaleś id a stylizujesz jako klase. Za dużo zamykających </div>

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


<style>
*
{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
 
     
}
 
body
{
    color: #333;
    font-size: 19px;
    background-color: grey;
 
}
 
#container
{
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
}
 .logo
{
width: 200px;
height: 200px;
margin-bottom: 10px;
background-color: red;
    padding: 10px;
}
.nav_bar
{
    padding: 10px;
	width: 200px;
    height: 300px;
    background-color: red;
}
</style>
</head>
<body>

</head>
<body>
<div id="bg">
    <div id="container">
        <div class="logo"><img src="img/logo1.png"></div>
            <div class="nav_bar"><img src="img/nav_bar.png">
                 
            </div>
                 
            </div>
 
    </div>
</body>
</body>
</html>

Pokaż 15 poprzednich komentarzy

komentarz 4 października 2016 przez Vromix Początkujący (410 p.)

Działa Działa. Pytanie jeszcze pozostaje w innej wersji kodu z 2 grafikami tła. Tak jak to było pierwotnie zapisane.

<body>
<div id="banner">
                <div class="logo"><img src="img/logo.png"></div>
</div>
	
<nav class="nav_bar">
<ul>
		<li><a href="#">Strona główna</li>
		<li><a href="#">Strona główna</li>
		<li><a href="#">Strona główna</li>
		<li><a href="#">Strona główna</li>
		<li><a href="#">Strona główna</li>
	</ul>
</nav>
<div id="bg">
	<div class="zawartosc">
		<p>Tekst przykładowy</p>
	</div>
</div>	

</body>



</html>

i css

*
{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;

	
}

body
{
	color: #333;
	font-size: 19px;
	background-image: url("img/bg.png");
	min-height: 100%;
	font-family: 'Lato', sans-serif;
}


.logo
{
	text-align: center;
	padding: 10px;
}

.nav_bar
{
	background-image: url(img/nav_bar.png);
	width: 100%;
	height: 70px;
    
}

.nav_bar ul
{
	max-width: 1024px;
	margin-right: auto;
	margin-left: auto;
	display: flex;
	justify-content: space-between;
	list-style: none;

}
.nav_bar li
{
	width: 100%;
	padding: 20px;
	font-family: 'PT Sans Caption', sans-serif;
}

.nav_bar a
{
	text-decoration: none;
	color: white;
	display: block;
}

.nav_bar a:hover
{
	background-color: black;
}

#banner
{
	width: 100%;
	height: 300px;
	position: relative;
	
}

#bg
{
	width: 1920px;
	min-height: 3000px;
	margin-left: auto;
	margin-right: auto;
	background: url(img/1.png) center no-repeat;
	margin-top: -105px;
}

.zawartosc
{
	width: 1024px;
	height: 100%;
	text-align: center;
	padding: 20px;
	font-size: 50px;
	color: red;
}

Grafiki link

https://uploadfiles.io/f372

I jak zapisac to aby cala zawartosc juz po nawigacji znajdowala sie wewnatrz srodka strony na grafice z #bg czyli juz ten sam przykladowy napis zaczynał sie od lewego gornego rogu .

PS.

Jestem i tak bardzo wdzieczny za dotychczasową pomoc i poświęcony czas dla mnie.

komentarz 4 października 2016 przez pablop76 VIP (123,180 p.)

position: relative; urzywa się do połączenia elementów w obiegu z pozycjonowanymi absolutnie; relativ jeżeli doda się zmianę pozycji (left,top,right,bottom) przesuwa obiekt o ofset (domiar) ale miejsce po nim zostaje. Więc zaleca się go nie przesuwać. Nadanie obiektowi position: relative; daje możliwość obiektom wewnątrz nich nadanie position: absolute; i dzieki temu przesuwanie ich względem relative; Bo domyślnie bez nadania rodzicom position: relative; rodzicom bedą pozycjonowanie względem body(domyślnie)

komentarz 4 października 2016 przez pablop76 VIP (123,180 p.)

Dodatkowo daje możliwość tworzenia warstw, czyli nakładanie jednego obiektu na drugi. z-index

komentarz 4 października 2016 przez pablop76 VIP (123,180 p.)

Moim zdaniem nie rozplanowałeś układu strony. Radzę się nad tym zastanowić. Wziąć kartkę papieru i narysować gdzie co ma być. Dawanie tła jako cala strona to nie jest dobra metoda ponieważ ogranicza jej interakcję. Dałbym standartowo baner, menu, content i footer. Na banerze dał logo itd. Chcesz standartową stronę więc nie wymyślaj koła :) To jest super w nauce programowania, że nie musisz być ponad,masz czerpac satysfakcję, że wstapiłeś w szeregi "zadowolonych" z tego co robią.TAK MI SIĘ WYDAJE. POWODZENIA!!!