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

Problem nawigacji i grafiki

VPS Starter Arubacloud
0 głosów
411 wizyt
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ź

+1 głos
odpowiedź 26 września 2016 przez pablop76 VIP (123,240 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>

 

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,240 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,240 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,240 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!!!
komentarz 4 października 2016 przez Vromix Początkujący (410 p.)
Dzieki wielki za pomoc i rade :)

Podobne pytania

0 głosów
2 odpowiedzi 256 wizyt
pytanie zadane 26 listopada 2016 w HTML i CSS przez Dar3Q Obywatel (1,200 p.)
0 głosów
1 odpowiedź 84 wizyt
pytanie zadane 5 czerwca 2020 w HTML i CSS przez Antoni2422 Użytkownik (570 p.)
+2 głosów
6 odpowiedzi 595 wizyt
pytanie zadane 15 września 2016 w Systemy operacyjne, programy przez demontaczki Nowicjusz (140 p.)

92,832 zapytań

141,776 odpowiedzi

320,824 komentarzy

62,163 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

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!

...