Witam mam to schemat sciągnięty z ftp z heliona. i mam takie zadanie. Chciałbym przesunąć logo na srodek banera. Próbowałem z position: relative; ale nie wiem gdzie to trzeba włozyc. oto kody: indeks.html
i css
Bardzo prosze o pomoc
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="pl" xml:lang="pl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Red Lantern Design</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="stylesheets/screen.css" media="screen" />
<meta name="Authoring-tool" content="Pajaczek NxG PRO v5.9.8" />
</head>
<body>
<div id="masthead">
<h1><img style="WIDTH: 482px; HEIGHT: 100px; position: relative;
top 500px;" border="0" alt="logo Red Lantern Design" src="images/logo.jpg" width="482" height="75" /></h1>
<ul id="nav">
<li><a class="active" title="Strona główna Red Lantern Design" href="index.html">Strona główna</a></li>
<li><a title="Usługi projektowania stron internetowych" href="services.html">Usługi</a></li>
<li><a title="Nasze prace" href="portfolio.html">Portfolio</a></li>
<li><a title="Kontakt z Red Lantern Design" href="contact.html">Kontakt</a></li>
</ul>
</div>
<div id="wrap">
<div id="header">
<img alt="Panorama Tokio" src="images/tokyo.jpg" />
<h1>Red Lantern Design tworzy unikalne interfejsy i witryny internetowe</h1>
</div>
<div id="content">
<h2>Witamy na nowej stronie studia Red Lantern Design</h2>
<p>Red Lantern Design jest małą firmą zajmującą się projektowaniem witryn internetowych oraz consultingiem. Specjalizujemy się w projektowaniu i budowaniu stron opartych na standardach internetowych. Naszym celem jest tworzenie prostych i atrakcyjnych witryn internetowych, które pozwalają na łatwe odszukanie informacji i zaspokajają potrzeby użytkowników.</p>
<p>Jeśli Twoja firma chciałaby z nami współpracować, zachęcamy do zapoznania się z naszym portfolio i skontaktowania się z nami w celu omówienia szczegółów projektu. Z prawdziwą przyjemnością sprawimy, że Twoja obecność w Internecie będzie lepiej widoczna, a Twoja witryna łatwiejsza do odnalezienia i bardziej atrakcyjna.</p>
<ul id="link-list">
<li><a title="Zobacz nasze portfolio" href="#">Zobacz nasze portfolio</a></li>
<li><a title="Skontaktuj się z Red Lantern Design" href="#">Skontaktuj się z Red Lantern Design</a></li>
</ul>
</div>
<div id="sidebar">
<h2>Nasze prace</h2>
<ul id="port">
<li><img alt="comp3" src="images/markinjapan.jpg" /></li>
<li><img alt="comp1" src="images/a2g.jpg" /></li>
<li><img alt="comp2" src="images/foobar.jpg" /></li>
<li><img alt="comp3" src="images/rpm.jpg" /></li>
</ul>
</div>
<div id="footer">
<p>© Red Lantern Design, wszelkie prawa zastrzeżone.</p>
</div>
</div>
</body>
</html>i css
Kod:
/*
Projekt przebudowy strony Red Lantern Design
"Head First Web Design", rozdział 1.
http://headfirslabs.com/books/hfwd/ch01/stylesheets/screen.css
*/
/*
Wielkość czcionki ustawiona jest tutaj na 62.5%, by
1em = 10px. Dzięki temu ustawienie typografii będzie
nieco Ĺ‚atwiejsze.
*/
body {
margin: 0;
padding: 0;
background: #7a2122 url('../images/tlo.jpg') repeat-x top;
font-family: Helvetica, sans-serif;
font-size: 62.5%;
color: #333;
}
h1, h2, p, ul, li {
margin: 0;
padding: 0;
}
p {
font-size: 1.4em;
line-height: 1.4em;
}
ul {
list-style-type: none;
}
a:link, a:visited {
color: #333;
background: #eee;
}
/* Ta reguła dodaje ładny styl do znaków "&". */
span.amp {
font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
font-weight: normal;
font-style: italic;
}
/*
"margin: 0 auto" z jednoczesnym podaniem szerokości
spowoduje wyśrodkowanie układu strony w oknie
przeglÄ…darki.
*/
#masthead {
margin: 0 auto;
margin-top: 20px;
width: 800px;
color: #fff;
}
#masthead h1 {
top 500px;
float: left;
}
#nav {
float: right;
margin: 50px 10px 0 0;
font-size: 1.4em;
}
#nav li {
display: inline;
margin: 0 0 0 20px;
}
#nav li a {
color: #fff;
text-decoration: none;
background: none;
}
/*
Ponieważ zawartość nagłówka znajduje się poza elementem
<div> opakowującym treść strony, musimy skorzystać z tej
samej sztuczki z "margin: 0 auto", by wyśrodkować układ
strony.
*/
#wrap {
clear: both;
margin: 0 auto;
padding: 10px;
width: 780px;
background: #fff;
border: 10px solid #5c0505;
}
#header img {
border: 10px solid #ccc;
}
#header h1 {
font-size: 2em;
margin: 10px 0 0 0;
padding: 10px;
text-align: center;
background: url('../images/tagline_bg.gif') repeat-x;
}
#content, #sidebar {
width: 360px;
margin: 20px 0 20px 0;
padding: 10px;
}
#content {
float: right;
}
#content h2 {
font-size: 2.4em;
margin: 0 0 10px 0;
}
#content p {
margin: 0 0 10px 0;
}
#link-list {
margin: 20px 0 0 0;
font-size: 1.4em;
}
#link-list li {
margin: 0 0 10px 0;
}
#sidebar {
float: left;
background: #eee;
}
#sidebar h2 {
font-weight: bold;
border-bottom: 1px solid #ccc;
margin: 0 0 20px 0;
padding: 5px;
}
#port li {
margin: 0 10px 20px 0;
float: left;
border: 5px solid #ddd;
}
#footer {
clear: both;
background: #eee;
padding: 10px;
border-top: 2px solid #ddd;
text-align: center;
color: #777;
}Bardzo prosze o pomoc
