Wstawianie Tekstu i rozmieszczenie innych elementów

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

Witam Mam takie pytanie odnośnie pocięcia gotowego wygladu strony i rozmieszczenia go na stronie do zakodowania. I pytanie jest nastepujące jesli potne sobie moj layout - duze jednolite tło 1920px a w nim kolejny plik graficzny tylko juz o szerokosci 960px mający sluzyc jako tło contentu i w jaki sposob potem umiescic na tym pliku graficznym np: teksty i inne elementy graficzne ? jak to zapisac? Ponizen przykład mam nadzieje ze pomocny

3 odpowiedzi

odpowiedź 28 września 2016 przez Alwox Gaduła (4,840 p.)

odpowiedź 29 września 2016 przez lateM Pasjonat (17,660 p.)

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

chodzi mi dokladnie o takie cos

<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>

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

i tutaj sa grafiki uzyte gdyby byly potrzebne https://uploadfiles.io/96a

I chodzi mi o to zeby ten tekst i reszta zawartosci ztrony miesciła sie juz w srodku tego bg o szerokosci 1024 px

a nie tak jak wyglada to tutaj