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,120 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 26 września 2016 przez Vromix Początkujący (410 p.)

Nie nie mi nie chodzi o to zeby zaczynałą sie moja nawigacja od tego containera czyli szerokosci 1024 tylko zeby byl rozłozony na calą szerokosc. A koknretniej zeby wyglądalo to tak :

komentarz 26 września 2016 przez pablop76 VIP (123,120 p.)
edycja 26 września 2016 przez pablop76

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

<style>
*
{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
 
     
}
html{
height: 100%;
}
 
body
{
    color: #333;
    font-size: 19px;
    background-color: grey;
    min-height: 100%;
    color: white;
    font-size: 30px;
    text-align: center;
}
#bg{
position: relative;
width: 100%;
height: 100%;
background-color: green;
}
#banner{
width: 100%;
height: 500px;
background-color: #4285F4;
}
 .logo
{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: #FBBC05;
}
.nav_bar
{
    padding: 10px;
    width: 100%;
    height: 50px;
    background-color: #34A853;
}
#container
{
    width: 80%;
    height: 110%;
    margin-top: -10%;
    margin-left:auto;
    margin-right: auto;
    background-color: #EA4335;
    margin-bottom: -5%;
    z-index: 2;
    position: relative;
}
#footer{
width: 100%;
background-color: black;
padding: 5%;
}
</style>
</head>
<body>

</head>
<body>
    <div id="bg">
        <div id="banner">
                <div class="logo">logo</div>
                <div class="nav_bar">nawigacja</div>
        </div>
            <div id="container">container
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>koniec
            </div>
        <div id="footer">footer</div>    
    </div>
</body>
</body>
</html>

komentarz 26 września 2016 przez Vromix Początkujący (410 p.)

Wysmienicie dzieki za pomoc. Lecz z postepem natrafiam na kolejne problemy 1.logo mi ucina literki g nie wiem czemu 2. tekst na nawigacji chce zeby dzialal jako display: block; i dziala tylko nie tak jak chce, podswietla mi sie jedynie tekst a nie calosc z wysokoscia do spodu. i 3. nie wiem jak zrobic zeby wszystko zawarte w div bg zaczynalo sie od rogu gornego na kafelku a nie tak jak jest tutaj zaznaczone.

html

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>aaaaaa</title>
	<meta name="viewport" content="width=device-width"> 
	<meta name="description" content="Programista, grafik" />
	<meta name="keywords" content="programista, grafik, html, css" />
	<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,700|PT+Sans+Caption:400,700" rel="stylesheet">
	
	
</head>
<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;
}

komentarz 27 września 2016 przez pablop76 VIP (123,120 p.)
edycja 27 września 2016 przez pablop76

zamknij tagi <a> bg się całkiem rozjerzdza na mniejszej rozdzielczości niż 1920 więć daj max-width: 1920 i wycentuj margin: 0 auto; Logo jest zdjęciem więc text-align: center; padding: 10px; nie potrzebne, raczej wymiary zdjęcia(logo) i wycentrowanie. Nawigacja się nie podświetla bo jaki ma być efekt jak się zmienia z czarnego na czarny :). Zawartość nie jest wycentrowana. bg ma margin top: -105px; więc zawartośc dziedziczy tą cechę, a więc daj .zawartośc margin-top: 105px;

Dalem Ci inną koncepcje rozmieszczenia elementów więc nie wnikam już dlaczego tak to robisz. Ale dobrze, że robisz po swojemu. Najwazniejsze żebyś wyciągnął wnioski.

komentarz 27 września 2016 przez Vromix Początkujący (410 p.)

tak te tagi <a> sam zaowazylem ze byly nie domkniete pozniej wzorowalem sie na twoim sposobie bardzo mi sie przydal ale jakos ten zapis co sam umiescilem wydawal mi sie wygodniejszy dla mnie. Co do bg zmienilem dalem ze tło jest cale nie pociete na 2 elementy. Mam nadzieję ze teraz jest lepiej.

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>aaaaaa</title>
	<meta name="viewport" content="width=device-width"> 
	<meta name="description" content="Programista, grafik" />
	<meta name="keywords" content="programista, grafik, html, css" />
	<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,700|PT+Sans+Caption:400,700" rel="stylesheet">
	
	
</head>
<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</a></li>
		<li><a href="#">Strona główna</a></li>
		<li><a href="#">Strona główna</a></li>
		<li><a href="#">Strona główna</a></li>
		<li><a href="#">Strona główna</a></li>
	</ul>
</nav>
<div id="container">
	
		teskt

</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;
}

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

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


#container
{
	width: 1024px;
	height: 3000px;
	padding: 20px;
	font-size: 50px;
	color: red;
	margin-left: auto;
	margin-right: auto;
	text-decoration: none;
}

Jedynie co do tej nawigacji to chodzi mi o to ze po najechaniu Blok caly z napisem "Strona głowna" nie podswietlał mi się tak :
tylko zeby calość do gory i do dolu byla czarna a nie czarna z opacity z 30% chyba jest ale to jest plik png ta nav.

komentarz 28 września 2016 przez pablop76 VIP (123,120 p.)

dodaj

.nav_bar a
{
...
padding: 20px;
}

komentarz 28 września 2016 przez Vromix Początkujący (410 p.)

jak dam padding 20px rozwala mi tekst calkiem

komentarz 29 września 2016 przez pablop76 VIP (123,120 p.)
edycja 29 września 2016 przez pablop76

to daj padding: 10px;

komentarz 29 września 2016 przez Vromix Początkujący (410 p.)

dodawalem i 15 i 10 px i na 10px kryje polowe tego co ma zakryc

komentarz 30 września 2016 przez pablop76 VIP (123,120 p.)

A czy ten kod jest aktualny ? Dobrze by było mieć dostęp do stronki.

Spróbuj tak:

.nav_bar, .nav_bar ul, .nav_bar li, .nav_bar a - daj taką samą wysokość np:height: 70px;

dodatkowo dla .nav_bar a - display: block; dla .nav_bar ul - text-align: center;
line-height: 350%; żeby wyśrodkować tekst.

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

Calkowicie sie teraz rozjechało. Dodaje jeszcze raz aktualny kod + grafiki.

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>aaaaaa</title>
	<meta name="viewport" content="width=device-width"> 
	<meta name="description" content="Programista, grafik" />
	<meta name="keywords" content="programista, grafik, html, css" />
	<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,700|PT+Sans+Caption:400,700" rel="stylesheet">
	
	
</head>
<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</a></li>
		<li><a href="#">Strona główna</a></li>
		<li><a href="#">Strona główna</a></li>
		<li><a href="#">Strona główna</a></li>
		<li><a href="#">Strona główna</a></li>
	</ul>
</nav>
<div id="container">
	
		teskt

</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;
	height: 70px;
	text-align: center;
	line-height: 350%;

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

.nav_bar a
{
	text-decoration: none;
	color: white;
	padding: 10px;
	height: 70px;
	display: block;
}

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

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


#container
{
	width: 1024px;
	height: 3000px;
	padding: 20px;
	font-size: 50px;
	color: red;
	margin-left: auto;
	margin-right: auto;
	text-decoration: none;
}

+ Link do pobrania z grafikami

https://uploadfiles.io/b032

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

Problem jest w tym,że dałeś padding dla .nav_bar li co powoduje odsunięcie .nav_bar a od krawędzi .nav_bar li. Usuń. Dodatkowo padding .nav_bar a powoduje odsunięcie tekstu od krawędzi. Usuń aby tekst powrócił na swoje miejsce.

Co do obrazka w tle strony to brakuje mu wypozycjonowania.

body{

background-position: center;}

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

To wypozycjonowanie tla do czego ma sluzyc ? bo nie bardzo rozumiem skoro i tak bylo dobrze raczej... z mojego punktu widzenia. Jak dalem position center to mi cala nawigacja najechala na dolna czesc z logiem. Po dopisaniu do nab_bar margin-top: -100px; i zmiejszenia wysokosci logo nie nachodzi mi na dolna część ale teraz mi sie nie podswietla tekst po najechaiu na nawigacje.

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

Ok juz naprawione w #banner position : relative skasowalem i działa. Nie bardzo rozumiem znaczenie tego position :relative gdbys mogl mi w prostych slowach jeszcze to wyjaśnic co sie zmienilo po skasowaniu tego.. ? "określenie relatywnego pozycjonowania dla elementu malo mi mowi "

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

Kolego mam wrażenie ,że co bym Ci nie podpowiedział to nie działa. W kodzie który dałeś tło jest przyklejone do prawej strony a menu jest pod główną belką. background-positon: center; ustawia tło na środku a pozbycie się padding ustawia menu na tle belki.

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,120 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,120 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,120 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!!!