Witam, zrobiłem standardowy szablon gdzie u góry jest nagłówek po lewej menu, środek to treść u dołu stopka.
Mój problem:
Chciałbym podzielić nagłówek na dwie części, a mianowicie pierwsza część to miałoby by być miejsce na logo około 187 px szerokość i 151px wysokośći natomiast reszta nagłówka stanowiłoby tło graficzne z jakimś napisem. Nie wiem jak to zrobić, będę wdzięczny za wszelkie porady. Poniżej wklejam kod xhtml i css
kod css
Mój problem:
Chciałbym podzielić nagłówek na dwie części, a mianowicie pierwsza część to miałoby by być miejsce na logo około 187 px szerokość i 151px wysokośći natomiast reszta nagłówka stanowiłoby tło graficzne z jakimś napisem. Nie wiem jak to zrobić, będę wdzięczny za wszelkie porady. Poniżej wklejam kod xhtml i css
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
<link href="color.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_wrapper">
<div id="header">
<div id="header_inner">
<h1>Naglowek</h1>
</div>
</div>
<div id="nav">
<div id="nav_inner">
<ul>
<li><a href="index.html">Link 1</a></li>
<li><a href="index.html">Link 2</a></li>
<li><a href="index.html">Link 3</a></li>
<li><a href="index.html">Link 4</a></li>
<li><a href="index.html">Link 5</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content_inner">
<p>Opis</p>
</div>
</div>
<div id="footer">
<div id="footer_inner">
<p>Stopka</p>
</div>
</div>
</div>
</body>
</html>
Kod:
body {
text-align:center;
}
#main_wrapper {
max-width:960px;
min-width:720px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#header {
}
#nav {
width:140px;
float:left;
}
#content {margin-left:140px;
}
#footer {
clear:both;
background:#DDC;
}
#header_inner, #nav_inner, #content_inner {
overflow:hidden;
}
#header_inner {
padding:1em 2em;
}
#nav_inner {
padding:1em .5em;
border-right:3px solid #B33;
}
#content_inner {
padding:1em 1em 1em 1.5em;
}
#footer_inner {
padding:.5em 1em;
text-align:center;
}