Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Problem mit Navi“

mather

Noch nicht viel geschrieben

Hallo,
das ist mein Quellcoide:
Code:
<html>
<head>
<title>hp1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

body {
	font-family: arial, helvetica, serif;
	font-size: 80%;
	background: black url(iages/ddbg3.gif) no-repeat 6000px 6000px;
	padding-left: 10em; 
	padding-top: 4em;
	margin: 0;
}

#content {
	width: 34em;
	background-color: black;
	padding: 3em 0;
	border: 6px double white;
	margin: auto;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 32em;
}
html>body #content {
	width: 32em;
} 

a {
	text-decoration: none;
}

a:link {
	color: red;
}

a:visited {
	color: blue;
}

a:active {
	color: green;
}

a:hover {
	text-decoration: underline;
}

h1 {
	text-align: center;
	padding: 0 0 0.25em 0;
	margin: 0;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#nav a {
	font-weight: bold;
	color: green;
}

#nav a {
	text-decoration: none;
}

#nav li li a {
	display: block;
	font-weight: normal;
	color: red;
	padding: 0.2em 10px;
}

#nav li li a:hover {
	padding: 0.2em 5px;
	border: 5px solid red;
	border-width: 0 5px;
}

li {
	float: left;
	position: relative;
	width: 10em;
	text-align: center;
	cursor: default;
	background-color: black;
	
}

li#first {
	border-left-width: 3em;
}

li#last {
	border-right-width: 1em;
}

li ul {
	display: none;
	position: center;
	top: 100%;
	left: 50;

	font-weight: normal;
	background: url(images/ddbg3.gif) bottom left no-repeat;
	padding: 0.5em 0 1em 0;
	border-right: solid 1px green;
}

li>ul {
	top: auto;
	left: auto;
}

li li {
	display: block;
	float: none;
	background-color: transparent;
	border: 0;
}

li:hover ul, li.over ul {
	display: block;
}

hr {
	display: none;
}

p {
	clear: left;
	background: url(images/remora.gif) center left no-repeat;
	padding: 1em 1em 0 1em;
	margin: 1;
}

p.image {
	float: right;
	font-size: 0.8em;
	text-align: center;
	color: white;
	padding: 1.25em 1.25em 0.25em 0.25em;
}

p.image img {
	display: block;
	border: 1px solid white;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>


</head>
<body bgcolor="black" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (hp1.psd) -->
<div align="center" valign="middle">
<img src="Bilder/hp1.gif" width="900" height="444" alt="" align="center">
<!-- End ImageReady Slices -->
<br>
</div>

<table margin-left="600px">
<tr>
<td margin-left="600px">
<hr />

<ul id="nav">

<li>
		<div><a href=""><img src="Bilder/hp_10.gif"></a></div>
<ul>
			<li><a href="">News</a></li>
			<li><a href="">Termine</a></li>
			<li><a href="">Blog</a></li>
		
</ul>
</li>
<li >

		<div align="middle"><a href=""><img src="Bilder/hp_12.gif"></a></div>
<ul>
			<li><a href="">Ceylonese remora</a></li>
			<li><a href="">Remora remora</a></li>
			<li><a href="">Sharksucker</a></li>
			<li><a href="">Slender remora</a></li>
			<li><a href="">Spearfish remora</a></li>
			<li><a href="">Whitefin sharksucker</a></li>
</ul>
</li>
<li >
		<div><a href=""><img src="Bilder/hp_14.gif"></a></div>
<ul>
			<li><a href="http://www.nocomment-fanclub.de">1</a></li>
			<li><a href="http://www.nocomment-fanclub.de">2</a></li>
			<li><a href="http://www.nocomment-fanclub.de">3</a></li>
			<li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
			<li><a href="http://www.nocomment-fanclub.de">3</a></li>
			<li><a href="http://www.nocomment-fanclub.de"</a></li>

</ul>
</li>
<li >
		<div align="center"><a href=""><img src="Bilder/hp_16.gif"></a></div>
<ul>
			<li><a href="http://www.nocomment-fanclub.de">1</a></li>
			<li><a href="http://www.nocomment-fanclub.de">2</a></li>
			<li><a href="http://www.nocomment-fanclub.de">3</a></li>
			<li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
			<li><a href="http://www.nocomment-fanclub.de">3</a></li>
			<li><a href="http://www.nocomment-fanclub.de"</a></li>

</ul>
</li>
<li >
		<div align="center"><a href=""><img src="Bilder/hp_18.gif"></a></div>
		<ul>
			<li><a href="http://www.nocomment-fanclub.de">1</a></li>
			<li><a href="http://www.nocomment-fanclub.de">2</a></li>
			<li><a href="http://www.nocomment-fanclub.de">3</a></li>
			<li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
			<li><a href="http://www.nocomment-fanclub.de">3</a></li>
			<li><a href="http://www.nocomment-fanclub.de"</a></li>

		</ul>
</li>

<li>
		<div align="center"><a href=""><img src="Bilder/hp_20.gif"></a></div>
<ul>
			<li><a href="http://www.nocomment-fanclub.de">1</a></li>
			<li><a href="http://www.nocomment-fanclub.de">2</a></li>
			<li><a href="http://www.nocomment-fanclub.de">3</a></li>
			<li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
			<li><a href="http://www.nocomment-fanclub.de">3</a></li>
			<li><a href="http://www.nocomment-fanclub.de"</a></li>

</ul>
</li>
	
</td></tr></table>
<hr />

</body>
</html>

wo gebe ich jetzt bitte an, das die navi noch ein paar zentimeter nach rechts muss, so dass sie genau unter dem ersten bild wäre und wie bekomme ich die lücke zwiuschen Band und community weg?



Danke schonmal
 

sokie

Mod | Web

AW: Problem mit Navi

Das ist nun ganz schweirig.
Einerseits gibts eine Menge css, andererseits eine Tabellenkonstruktion, in der das gutgemeinte zu einer fragwürdigen Landung kommt.
Code:
<body bgcolor="black" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
schon reichlich überholt und hat in einer seite, wo der body schon mit css formatiert ist gar nichts zu suchen.
die Seite hat keinen Doctype. Ohne das lassen sich auch kaum Aussagen machen.

Vorschlag: auf veraltetes Markup verzeichten, rein mit (X)HTML/css schreiben, Doctype angeben!

dann kann man Aussagen machen, warum was wie aussieht (obwohl es dann vielleicht auch nicht mehr nötig ist, weil alles passt...)

die Lücke zwischen Band und Community??
 

mather

Noch nicht viel geschrieben

AW: Problem mit Navi

hmm...aber für das dropdown halt ein vorgefertiges benutzt, hatte hier ja nets gefunden und bei google auch net sanderes gutes
 

Top_Gun

Aktives Mitglied

AW: Problem mit Navi

Ich habe mal versucht deinen Quelltext general zu überholen:

  • unnötige Style-Definitionen rausgenommen
  • unnötige HTML-Tags rausgenommen
  • Tabelle entfernt
  • Fehlerhaften Link zum BG-Image
  • Doctype eingefügt

Ich hoffe jetzt kann man mit der Seite besser arbeiten:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>hp1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

body {
    font-family: arial, helvetica, serif;
    font-size: 80%;
    background: black;
    text-align: center;
}

#mittig {
    width: 900px;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    align: center;
}

a {
    text-decoration: none;
}

a:link {
    color: red;
}

a:visited {
    color: blue;
}

a:active {
    color: green;
}

a:hover {
    text-decoration: underline;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav {
    margin-left: 30px;
}

#nav a {
    font-weight: bold;
    color: green;
    text-decoration: none;
}

#nav li li a {
    display: block;
    font-weight: normal;
    color: red;
    padding: 0.2em 10px;
}

#nav li li a:hover {
    padding: 0.2em 5px;
    border: 5px solid red;
    border-width: 0 5px;
}

li {
    float: left;
    position: relative;
    width: 10em;
    text-align: center;
    cursor: default;
    background-color: black;
}

li#first {
    border-left-width: 3em;
}

li#last {
    border-right-width: 1em;
}

li ul {
    display: none;
    position: center;
    top: 100%;
    left: 50;
    font-weight: normal;
    background: url(images/ddbg3.gif) bottom left no-repeat;
    padding: 0.5em 0 1em 0;
    border-right: solid 1px green;
}

li>ul {
    top: auto;
    left: auto;
}

li li {
    display: block;
    float: none;
    background-color: transparent;
    border: 0;
}

li:hover ul, li.over ul {
    display: block;
}

</style>

<script type="text/javascript">
<![CDATA[//><!--

startList = function() {
    if (document.all&&document.getElementById) {
        navRoot = document.getElementById("nav");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    this.className+=" over";
                }
                node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                }
            }
        }
    }
}
window.onload=startList;

//--><!]]>
</script>

</head>
<body>
<div id="mittig">
    <img src="Bilder/hp1.gif" width="900" height="444" alt="">
    <ul id="nav">
        <li>
            <div><a href=""><img src="Bilder/hp_10.gif"></a></div>
            <ul>
                <li><a href="">News</a></li>
                <li><a href="">Termine</a></li>
                <li><a href="">Blog</a></li>
            </ul>
        </li>
        <li>
            <div><a href=""><img src="Bilder/hp_12.gif"></a></div>
            <ul>
                <li><a href="">Ceylonese remora</a></li>
                <li><a href="">Remora remora</a></li>
                <li><a href="">Sharksucker</a></li>
                <li><a href="">Slender remora</a></li>
                <li><a href="">Spearfish remora</a></li>
                <li><a href="">Whitefin sharksucker</a></li>
            </ul>
        </li>
        <li>
            <div><a href=""><img src="Bilder/hp_14.gif"></a></div>
            <ul>
                <li><a href="http://www.nocomment-fanclub.de">1</a></li>
                <li><a href="http://www.nocomment-fanclub.de">2</a></li>
                <li><a href="http://www.nocomment-fanclub.de">3</a></li>
                <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
                <li><a href="http://www.nocomment-fanclub.de">4</a></li>
                <li><a href="http://www.nocomment-fanclub.de">5</a></li>
            </ul>
        </li>
        <li>
            <div><a href=""><img src="Bilder/hp_16.gif"></a></div>
            <ul>
                <li><a href="http://www.nocomment-fanclub.de">1</a></li>
                <li><a href="http://www.nocomment-fanclub.de">2</a></li>
                <li><a href="http://www.nocomment-fanclub.de">3</a></li>
                <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
                <li><a href="http://www.nocomment-fanclub.de">4</a></li>
                <li><a href="http://www.nocomment-fanclub.de">5</a></li>
            </ul>
        </li>
        <li>
            <div><a href=""><img src="Bilder/hp_18.gif"></a></div>
            <ul>
                <li><a href="http://www.nocomment-fanclub.de">1</a></li>
                <li><a href="http://www.nocomment-fanclub.de">2</a></li>
                <li><a href="http://www.nocomment-fanclub.de">3</a></li>
                <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
                <li><a href="http://www.nocomment-fanclub.de">4</a></li>
                <li><a href="http://www.nocomment-fanclub.de">5</a></li>
            </ul>
        </li>
        <li>
            <div><a href=""><img src="Bilder/hp_20.gif"></a></div>
            <ul>
                <li><a href="http://www.nocomment-fanclub.de">1</a></li>
                <li><a href="http://www.nocomment-fanclub.de">2</a></li>
                <li><a href="http://www.nocomment-fanclub.de">3</a></li>
                <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
                <li><a href="http://www.nocomment-fanclub.de">4</a></li>
                <li><a href="http://www.nocomment-fanclub.de">5</a></li>
            </ul>
        </li>
    </ul>
</div>
</html>
Ein Problem gibt es aber noch, der FF 2 schneidet einige der Menubuttons ab... Der IE 6 stellt es korrekt dar... Hab noch keine Ahnung woran das liegt, habe mich aber auch noch nicht durch die Navigations-CSS-Definition gekämpft...

Und bitte, und damit möchte ich dich nicht beleidigen, arbeite dich erst tiefer in html und css bevor du weiter machts...
 
Zuletzt bearbeitet:
G

greg5891

Guest

AW: Problem mit Navi

dafür habe ich eine erklärung.
die unterschiedliche Darstellung Menüpunkte liegt an den list- elementen.
Da der IE, Oper und FF den Einzug der zugeordneten Texte unterschiedlich interpretieren.
Ich habe für so etwas einfach noch ein zweites CSS- sheet erstellt und dann eben mit einer Browserweiche die Homepage den jeweiligen Browsern zugeteilt.

mfg
greg
 

Top_Gun

Aktives Mitglied

AW: Problem mit Navi

dafür habe ich eine erklärung.
die unterschiedliche Darstellung Menüpunkte liegt an den list- elementen.
Da der IE, Oper und FF den Einzug der zugeordneten Texte unterschiedlich interpretieren.
Ich habe für so etwas einfach noch ein zweites CSS- sheet erstellt und dann eben mit einer Browserweiche die Homepage den jeweiligen Browsern zugeteilt.

mfg
greg
Würdest du uns denn mal mitteilen was genau anders interperetiert wird?
 

mather

Noch nicht viel geschrieben

AW: Problem mit Navi

danke schonmal,echt super von euch
aber wie bekomme ich es hin, dass mein text auf der rechteh seite der mauer (des Bildes hp1) erscheind?
 

Top_Gun

Aktives Mitglied

AW: Problem mit Navi

Indem du das Bild als Hintergrund eines <div> definierst und darin ein weiteres <div> mit fest definierter größe und dem gewünschten Inhalt anlegst...
 

mather

Noch nicht viel geschrieben

AW: Problem mit Navi

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>hp1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

body {
    font-family: arial, helvetica, serif;
    font-size: 80%;
    background: black;
    text-align: center;
}

#mittig {
    width: 900px;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    align: center;
}

a {
    text-decoration: none;
}

a:link {
    color: red;
}

a:visited {
    color: blue;
}

a:active {
    color: green;
}

a:hover {
    text-decoration: underline;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav {
    margin-left: 30px;
}

#nav a {
    font-weight: bold;
    color: green;
    text-decoration: none;
}

#nav li li a {
    display: block;
    font-weight: normal;
    color: red;
    padding: 0.2em 10px;
}

#nav li li a:hover {
    padding: 0.2em 5px;
    border: 5px solid red;
    border-width: 0 5px;
}

li {
    float: left;
    position: relative;
    width: 10em;
    text-align: center;
    cursor: default;
    background-color: black;
}

li#first {
    border-left-width: 3em;
}

li#last {
    border-right-width: 1em;
}

li ul {
    display: none;
    position: center;
    top: 100%;
    left: 50;
    font-weight: normal;
    background: url(images/ddbg3.gif) bottom left no-repeat;
    padding: 0.5em 0 1em 0;
    border-right: solid 1px green;
}

li>ul {
    top: auto;
    left: auto;
}

li li {
    display: block;
    float: none;
    background-color: transparent;
    border: 0;
}

li:hover ul, li.over ul {
    display: block;
}

div.bg {
background-image: url(Bilder/hp1.gif);
background-color:black;
height:420px;
border:0px solid black;
}

box{
position: relative; width: 100px
 padding-left: 120px;
}
</style>

<script type="text/javascript">
<![CDATA[//><!--

startList = function() {
    if (document.all&&document.getElementById) {
        navRoot = document.getElementById("nav");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    this.className+=" over";
                }
                node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                }
            }
        }
    }
}
window.onload=startList;

//--><!]]>
</script>

</head>
<body>
<div class="bg" id="mittig">
<br>
<br>
<div class="box">Hi du sau du</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
    <ul id="nav">
        <li>
            <div><a href=""><img src="Bilder/hp_10.gif"></a></div>
            <ul>
                <li><a href="">News</a></li>
                <li><a href="">Termine</a></li>
                <li><a href="">Blog</a></li>
            </ul>
        </li>
        <li>
            <div><a href=""><img src="Bilder/hp_12.gif"></a></div>
            <ul>
                <li><a href="">Ceylonese remora</a></li>
                <li><a href="">Remora remora</a></li>
                <li><a href="">Sharksucker</a></li>
                <li><a href="">Slender remora</a></li>
                <li><a href="">Spearfish remora</a></li>
                <li><a href="">Whitefin sharksucker</a></li>
            </ul>
        </li>
        <li>
            <div><a href=""><img src="Bilder/hp_14.gif"></a></div>
            <ul>
                <li><a href="http://www.nocomment-fanclub.de">1</a></li>
                <li><a href="http://www.nocomment-fanclub.de">2</a></li>
                <li><a href="http://www.nocomment-fanclub.de">3</a></li>
                <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
                <li><a href="http://www.nocomment-fanclub.de">4</a></li>
                <li><a href="http://www.nocomment-fanclub.de">5</a></li>
            </ul>
        </li>
        <li>
            <div><a href=""><img src="Bilder/hp_16.gif"></a></div>
            <ul>
                <li><a href="http://www.nocomment-fanclub.de">1</a></li>
                <li><a href="http://www.nocomment-fanclub.de">2</a></li>
                <li><a href="http://www.nocomment-fanclub.de">3</a></li>
                <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
                <li><a href="http://www.nocomment-fanclub.de">4</a></li>
                <li><a href="http://www.nocomment-fanclub.de">5</a></li>
            </ul>
        </li>
        <li>
            <div><a href=""><img src="Bilder/hp_18.gif"></a></div>
            <ul>
                <li><a href="http://www.nocomment-fanclub.de">1</a></li>
                <li><a href="http://www.nocomment-fanclub.de">2</a></li>
                <li><a href="http://www.nocomment-fanclub.de">3</a></li>
                <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
                <li><a href="http://www.nocomment-fanclub.de">4</a></li>
                <li><a href="http://www.nocomment-fanclub.de">5</a></li>
            </ul>
        </li>
        <li>
            <div><a href=""><img src="Bilder/hp_20.gif"></a></div>
            <ul>
                <li><a href="http://www.nocomment-fanclub.de">1</a></li>
                <li><a href="http://www.nocomment-fanclub.de">2</a></li>
                <li><a href="http://www.nocomment-fanclub.de">3</a></li>
                <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
                <li><a href="http://www.nocomment-fanclub.de">4</a></li>
                <li><a href="http://www.nocomment-fanclub.de">5</a></li>
            </ul>
        </li>
    </ul>
</div>
</html>

Wie bkomme ich hin, dass das Hallo du sau du*g* weiter rechts erscheint? Das Padding funktioniert nicht!
 
Zuletzt bearbeitet:

Top_Gun

Aktives Mitglied

AW: Problem mit Navi

Als erstes entferne bitte alle <br> die sind total unnötig...

Dann mache aus dem:
HTML:
box{
position: relative; width: 100px
 padding-left: 120px;
}
ein:
HTML:
.box{
margin-top: 50px;
margin-left: 300px;
}
Über diese beiden Werte definierst du dann die Position des Textes...

Edit: Ich hab gesehen, wenn du das so machst, müsstest du die Navigation noch anpassen... Mir scheint es, als stündest du noch am Anfang von HTML und div-Layout daher hab ich mal ne kleine Anleitung für dich zusammen geschrieben:

Schritt 0:
Wir fangen mit einer leeren Standard-Seite an. Im CSS definieren wir lediglich Schriftart und -farbe und die Hintergrundfarbe.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>hp1</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>
BODY {
        FONT-SIZE: 80%;
        BACKGROUND: black;
        FONT-FAMILY: arial, helvetica, serif;
        TEXT-ALIGN: center;
}
</STYLE>

</HEAD>
<BODY>

</BODY>
</HTML>
Schritt 1:
Nun überlegen wir uns, dass der Inhalt der Seite eine bestimmte Breite haben soll und immer zentriert dargestellt werden soll. Dies erreichen wir mit einem div-Container, dem wir im CSS eine feste Breite und den nach links und rechts einen automatischen Abstand zuweisen.
Die Überlegung:


Der Quelltext:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>hp1</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>
BODY {
        FONT-SIZE: 80%;
        BACKGROUND: black;
        FONT-FAMILY: arial, helvetica, serif;
        TEXT-ALIGN: center;
}
#mittig {
        WIDTH: 900px;
        MARGIN-LEFT: auto;
        MARGIN-RIGHT: auto;
        TEXT-ALIGN: center;
}

</STYLE>

</HEAD>
<BODY>
<DIV id=mittig>

</DIV>
</BODY>
</HTML>
Schritt 2:
Nun überlegen wir uns, dass in unserem zentriertem div-Container ein Hintergrundbild zu sehen sein soll. Da vor diesem Bild hinterher Text zu sehen sein soll, erstellen wir für dieses Bild ebenfalls ein div-Container mit der festen Höhe die der Höhe des Bildes entspricht.
Um diesen Container ein wenig mittig auszurichten, geben wir einen Außenabstand nach Oben an.
Die Überlegung:


Der Quelltext:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>hp1</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>
BODY {
        FONT-SIZE: 80%;
        BACKGROUND: black;
        FONT-FAMILY: arial, helvetica, serif;
        TEXT-ALIGN: center;
}
#mittig {
        WIDTH: 900px;
        MARGIN-LEFT: auto;
        MARGIN-RIGHT: auto;
        TEXT-ALIGN: center;
}

#hintergrund {
        margin-top: 50px;
        BORDER: 0px;
        BACKGROUND-IMAGE: url(hp1-Dateien/hp1.gif);
        HEIGHT: 444px;
}

</STYLE>

</HEAD>
<BODY>
<DIV id=mittig>
 <DIV id=hintergrund>

 </DIV>
</DIV>
</BODY>
</HTML>
Schritt 3:
Damit unter unserem Hintergrundbild die Navigationsleiste erscheint, fügen wir in unserem mittig-div unter dem hintergrund-div unsere Navigation hinzu.
Die Überlegung:


Der Quelltext: (mit CSS und Javascript)
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>hp1</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>
BODY {
        FONT-SIZE: 80%;
        BACKGROUND: black;
        FONT-FAMILY: arial, helvetica, serif;
        TEXT-ALIGN: center;
}
#mittig {
        WIDTH: 900px;
        MARGIN-LEFT: auto;
        MARGIN-RIGHT: auto;
        TEXT-ALIGN: center;
}

#hintergrund {
        margin-top: 50px;
        BORDER: 0px;
        BACKGROUND-IMAGE: url(hp1-Dateien/hp1.gif);
        HEIGHT: 444px;
}

UL {
        PADDING: 0px;
        MARGIN: 0px;
        LIST-STYLE-TYPE: none;
}
#nav {
        MARGIN-LEFT: 30px;
}
#nav A {
        FONT-WEIGHT: bold;
        COLOR: green;
        TEXT-DECORATION: none;
}
#nav LI LI A {
        PADDING-RIGHT: 10px;
        PADDING-LEFT: 10px;
        PADDING-BOTTOM: 0.2em;
        PADDING-TOP: 0.2em;
        DISPLAY: block;
        FONT-WEIGHT: normal;
        COLOR: red;
}
#nav LI LI A:hover {
        BORDER-RIGHT: red 5px solid;
        BORDER-LEFT: red 5px solid;
        BORDER-BOTTOM: 0px;
        BORDER-TOP: 0px;
        PADDING-LEFT: 5px;
        PADDING-RIGHT: 5px;
        PADDING-BOTTOM: 0.2em;
        PADDING-TOP: 0.2em;
}
LI {
        FLOAT: left;
        WIDTH: 10em;
        CURSOR: default;
        POSITION: relative;
        BACKGROUND-COLOR: black;
        TEXT-ALIGN: center;
}
LI#first {
        BORDER-LEFT-WIDTH: 3em;
}
LI#last {
        BORDER-RIGHT-WIDTH: 1em;
}
LI UL {
        BORDER-RIGHT: green 1px solid;
        DISPLAY: none;
        FONT-WEIGHT: normal;
        PADDING-BOTTOM: 1em;
        PADDING-TOP: 0.5em;
        PADDING-LEFT: 0px;
        PADDING-RIGHT: 0px;
        TOP: 100%;
}
UNKNOWN {
        LEFT: auto;
        TOP: auto;
}
LI LI {
        BORDER-TOP-WIDTH: 0px;
        DISPLAY: block;
        BORDER-LEFT-WIDTH: 0px;
        FLOAT: none;
        BORDER-BOTTOM-WIDTH: 0px;
        BACKGROUND-COLOR: transparent;
        BORDER-RIGHT-WIDTH: 0px;
}
LI:hover UL {
        DISPLAY: block;
}
LI.over UL {
        DISPLAY: block;
}

</STYLE>

<SCRIPT type=text/javascript>
<![CDATA[//><!--

startList = function() {
    if (document.all&&document.getElementById) {
        navRoot = document.getElementById("nav");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    this.className+=" over";
                }
                node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                }
            }
        }
    }
}
window.onload=startList;

//--><!]]>
</SCRIPT>

</HEAD>
<BODY>
<DIV id=mittig>
 <DIV id=hintergrund>

 </DIV>
 <UL id=nav>
   <LI>
    <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_10.gif"></A></DIV>
    <UL>
      <LI><A href="http://nacktestars.na.funpic.de/">News</A></LI>
      <LI><A href="http://nacktestars.na.funpic.de/">Termine</A></LI>
      <LI><A href="http://nacktestars.na.funpic.de/">Blog</A></LI>
    </UL>
   </LI>
   <LI>
    <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_12.gif"></A></DIV>
    <UL>
      <LI><A href="http://nacktestars.na.funpic.de/">Ceylonese remora</A></LI>
      <LI><A href="http://nacktestars.na.funpic.de/">Remora remora</A></LI>
      <LI><A href="http://nacktestars.na.funpic.de/">Sharksucker</A></LI>
      <LI><A href="http://nacktestars.na.funpic.de/">Slender remora</A></LI>
      <LI><A href="http://nacktestars.na.funpic.de/">Spearfish remora</A></LI>
      <LI><A href="http://nacktestars.na.funpic.de/">Whitefin sharksucker</A></LI>
    </UL>
   </LI>
   <LI>
    <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_14.gif"></A></DIV>
    <UL>
      <LI><A href="http://www.nocomment-fanclub.de/">1</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">2</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">3</A></LI>
      <LI><IMG height=35 alt=Remora src="hp1-Dateien/hp_20.gif" width=100></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">4</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">5</A></LI>
    </UL>
   </LI>
   <LI>
    <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_16.gif"></A></DIV>
    <UL>
      <LI><A href="http://www.nocomment-fanclub.de/">1</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">2</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">3</A></LI>
      <LI><IMG height=35 alt=Remora src="hp1-Dateien/hp_20.gif" width=100></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">4</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">5</A></LI>
    </UL>
   </LI>
   <LI>
    <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_18.gif"></A></DIV>
    <UL>
      <LI><A href="http://www.nocomment-fanclub.de/">1</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">2</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">3</A></LI>
      <LI><IMG height=35 alt=Remora src="hp1-Dateien/hp_20.gif" width=100></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">4</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">5</A></LI>
    </UL>
   </LI>
   <LI>
    <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_20.gif"></A></DIV>
    <UL>
      <LI><A href="http://www.nocomment-fanclub.de/">1</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">2</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">3</A></LI>
      <LI><IMG height=35 alt=Remora src="hp1-Dateien/hp_20.gif" width=100></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">4</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">5</A></LI>
    </UL>
   </LI>
 </UL>
</DIV>
</BODY>
</HTML>
Schritt 4:
Zuletzt müssen wir jetzt noch unseren Text vor unser Hintergrundbild an die richtige Stelle bekommen. Hierzu erstellen wir in unserem hintergrund-div ein weiteren div-Container. Dieser bekommt eine feste Breite, nach Oben und Rechts einen Außenabstand und mit dem float-Wert die Ausrichtung links zu stehen. So ausgerichtet, steht unser Inhalt genau an der richtigen Stelle. Damit allerdings bei einem zu langen Inhalt unser Hintergrundbild nicht gesprengt wird, müssen wir eine feste Höhe angeben und das div in vertikaler Ausrichtung scrollbar machen.
Die Überlegung:


Der Quelltext:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>hp1</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>
BODY {
        FONT-SIZE: 80%;
        BACKGROUND: black;
        FONT-FAMILY: arial, helvetica, serif;
        TEXT-ALIGN: center;
}
#mittig {
        WIDTH: 900px;
        MARGIN-LEFT: auto;
        MARGIN-RIGHT: auto;
        TEXT-ALIGN: center;
}

#hintergrund {
        margin-top: 50px;
        BORDER: 0px;
        BACKGROUND-IMAGE: url(hp1-Dateien/hp1.gif);
        HEIGHT: 444px;
}

#inhalt {
        width: 400px;
        height: 370px;
        overflow-y:scroll;
        margin-top: 30px;
        margin-right: 30px;
        float: right;
        color: #ffffff;
        text-align: left;
}

UL {
        PADDING: 0px;
        MARGIN: 0px;
        LIST-STYLE-TYPE: none;
}
#nav {
        MARGIN-LEFT: 30px;
}
#nav A {
        FONT-WEIGHT: bold;
        COLOR: green;
        TEXT-DECORATION: none;
}
#nav LI LI A {
        PADDING-RIGHT: 10px;
        PADDING-LEFT: 10px;
        PADDING-BOTTOM: 0.2em;
        PADDING-TOP: 0.2em;
        DISPLAY: block;
        FONT-WEIGHT: normal;
        COLOR: red;
}
#nav LI LI A:hover {
        BORDER-RIGHT: red 5px solid;
        BORDER-LEFT: red 5px solid;
        BORDER-BOTTOM: 0px;
        BORDER-TOP: 0px;
        PADDING-LEFT: 5px;
        PADDING-RIGHT: 5px;
        PADDING-BOTTOM: 0.2em;
        PADDING-TOP: 0.2em;
}
LI {
        FLOAT: left;
        WIDTH: 10em;
        CURSOR: default;
        POSITION: relative;
        BACKGROUND-COLOR: black;
        TEXT-ALIGN: center;
}
LI#first {
        BORDER-LEFT-WIDTH: 3em;
}
LI#last {
        BORDER-RIGHT-WIDTH: 1em;
}
LI UL {
        BORDER-RIGHT: green 1px solid;
        DISPLAY: none;
        FONT-WEIGHT: normal;
        PADDING-BOTTOM: 1em;
        PADDING-TOP: 0.5em;
        PADDING-LEFT: 0px;
        PADDING-RIGHT: 0px;
        TOP: 100%;
}
UNKNOWN {
        LEFT: auto;
        TOP: auto;
}
LI LI {
        BORDER-TOP-WIDTH: 0px;
        DISPLAY: block;
        BORDER-LEFT-WIDTH: 0px;
        FLOAT: none;
        BORDER-BOTTOM-WIDTH: 0px;
        BACKGROUND-COLOR: transparent;
        BORDER-RIGHT-WIDTH: 0px;
}
LI:hover UL {
        DISPLAY: block;
}
LI.over UL {
        DISPLAY: block;
}

</STYLE>

<SCRIPT type=text/javascript>
<![CDATA[//><!--

startList = function() {
    if (document.all&&document.getElementById) {
        navRoot = document.getElementById("nav");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    this.className+=" over";
                }
                node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                }
            }
        }
    }
}
window.onload=startList;

//--><!]]>
</SCRIPT>

</HEAD>
<BODY>
<DIV id=mittig>
 <DIV id=hintergrund>
  <DIV id=inhalt>
   Hi du sau du<br>
  </DIV>
 </DIV>
 <UL id=nav>
   <LI>
    <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_10.gif"></A></DIV>
    <UL>
      <LI><A href="http://nacktestars.na.funpic.de/">News</A></LI>
      <LI><A href="http://nacktestars.na.funpic.de/">Termine</A></LI>
      <LI><A href="http://nacktestars.na.funpic.de/">Blog</A></LI>
    </UL>
   </LI>
   <LI>
    <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_12.gif"></A></DIV>
    <UL>
      <LI><A href="http://nacktestars.na.funpic.de/">Ceylonese remora</A></LI>
      <LI><A href="http://nacktestars.na.funpic.de/">Remora remora</A></LI>
      <LI><A href="http://nacktestars.na.funpic.de/">Sharksucker</A></LI>
      <LI><A href="http://nacktestars.na.funpic.de/">Slender remora</A></LI>
      <LI><A href="http://nacktestars.na.funpic.de/">Spearfish remora</A></LI>
      <LI><A href="http://nacktestars.na.funpic.de/">Whitefin sharksucker</A></LI>
    </UL>
   </LI>
   <LI>
    <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_14.gif"></A></DIV>
    <UL>
      <LI><A href="http://www.nocomment-fanclub.de/">1</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">2</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">3</A></LI>
      <LI><IMG height=35 alt=Remora src="hp1-Dateien/hp_20.gif" width=100></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">4</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">5</A></LI>
    </UL>
   </LI>
   <LI>
    <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_16.gif"></A></DIV>
    <UL>
      <LI><A href="http://www.nocomment-fanclub.de/">1</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">2</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">3</A></LI>
      <LI><IMG height=35 alt=Remora src="hp1-Dateien/hp_20.gif" width=100></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">4</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">5</A></LI>
    </UL>
   </LI>
   <LI>
    <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_18.gif"></A></DIV>
    <UL>
      <LI><A href="http://www.nocomment-fanclub.de/">1</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">2</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">3</A></LI>
      <LI><IMG height=35 alt=Remora src="hp1-Dateien/hp_20.gif" width=100></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">4</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">5</A></LI>
    </UL>
   </LI>
   <LI>
    <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_20.gif"></A></DIV>
    <UL>
      <LI><A href="http://www.nocomment-fanclub.de/">1</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">2</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">3</A></LI>
      <LI><IMG height=35 alt=Remora src="hp1-Dateien/hp_20.gif" width=100></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">4</A></LI>
      <LI><A href="http://www.nocomment-fanclub.de/">5</A></LI>
    </UL>
   </LI>
 </UL>
</DIV>
</BODY>
</HTML>
Mit diesem letzten Schritt ist unsere Seite fertig. Ich hoffe dir bringt die Anleitung etwas und kopierst nicht einfach nur das Endergebnis...
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.854
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben