✔ Hausarbeit

M

meistermo

Grünschnabel
Hallo liebe Leute,

ich bin gerade dabei eine Seite zu entwerfen. Es handelt sich dabei um eine Hausarbeit, für die Hochschule. Es soll um eine Reise gehen. Es sollen XHTML und CSS verwendet werden. Ich bin ein ziemlicher Anfänger, was das angeht. Als Browser soll es im IE 7 und im Firefox laufen. Ich habe jetzt was fertig. Sieht im IE7 auch genauso aus, wie ich es haben möchte. Nur der Firefox stellt es absolut verquer dar. Wobei das wahrscheinlich eher an meinem Code, denn am Firefox liegt.

Das Design habe ich in Photoshop erstellt und dann mit Hilfrseiten und Vorlagen in CSS bzw. HTML umgesetzt. Es handelt sich hierbei bisher natürlich nur um einen ersten Entwurf, aber es kommt leider schon ins Stocken. Irgendwie kann ich Firefox nicht mitteilen, dass das TopMenü unter dem Header sein soll.

Hier mal der Code, des Stylesheets:
Code: 
/* CSS Document */
body {
	color: #dfebf7;
	background-color: #504438;
	background-image: url(images/page_bg.jpg);
	margin: 0 0 0 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: center;
}
/* DIV */
.wrapper
{
	width: 966px;
	background-image: url(images/middle.jpg);
	background-repeat: repeat-y;
	margin: auto;
}
.header
{
	width: 966px;
	background-image: url(images/header.jpg);
	background-repeat: no-repeat;
}
.footer
{
	width: 966px;
	background-image: url(images/footer.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
}
.content
{
	width: 966px;
	padding: 20px 0 200px 0;
}
#left {
	float: left;
	width: 640px;
	padding-top: 70px;
	padding-left: 61px;
	padding-bottom: 35px;
	text-align: justify;
	padding-right: 27px;
}
#right {
	float: left;
	width: 174px;
	padding-top: 70px;
	text-align: left;
}
.rmenu_item {
	background-image: url(images/menu_bg.gif);
	background-repeat: repeat-x;
	padding-top: 9px;
	height: 8px;
	/*margin-left: 2px;*/
	padding-right: 2px;
}
.webdesign
{
	color: #ffffff;
	background-image: url(images/page_bg.jpg);
}

/* MENU */

#menu {
	width: 882px;
	height: 58px;
	margin-top: 225px;
	background-color: #000000;
	border: 6px #FFFFFF solid;
}

#menu ul {
	/*margin: 0;*/
	padding: 23px 0 0 20px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
	text-align: center;
}

#menu a {
	display: block;
	padding: 0 50px;
	background: url(images/img03.jpg) no-repeat right 50%;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 11px;
	color: #FFFFFF;
}

#menu a:hover { 
	color: #F8F210;
	background-color: inherit;
	text-decoration: none;
	/*font-weight: bold;*/
	/*text-transform: capitalize;*/
}

#menu .current_page_item a {
	color: #F8F210;
}

/* TEXT */
h1
{
	margin: 0 0 0 0;
	font-size: 14px;
}
h2
{
	margin: 0 0 0 0;
	font-size: 12px;
}
/* LINKS */
a.rmenu_link, a.rmenu_link:visited
{
	color:#f1f7fb;
	background-color: inherit;
	text-decoration:none;
	font-weight:bold;
	text-transform: capitalize;
}
a.rmenu_link:hover
{
	color: #F8F210;
	background-color: inherit;
	text-decoration: none;
	font-weight: bold;
	text-transform: capitalize;
}

Und hier der index.html
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="webdesign.css" type="text/css" />
<title>Las Vegas</title>

</head>
<body>
<div class="wrapper">
 <div class="footer">
    <div class="header">
    	<div id="menu">
		<ul>
			<li class="current_page_item"><a href="#">Homepage</a></li>
			<li><a href="#">Blogs</a></li>
			<li><a href="#">Photos</a></li>
			<li><a href="#">About</a></li>
			<li class="last"><a href="#">Contact</a></li>
		</ul>
		</div>
	  <div class="content">
<div id="left">
<h1>Lorem Ipsum Dolor</h1>
Lorem ipsumum lacinia eros felis et pede. Nulla facilisi. Nulla rhoncus pellentesque
dui. Maecenas enim mauris, accumsan at, eleifend non, viverra ac, arcu. Sed at
purus. Nullam dictum, urna et viverra venenatis, lectus leo euismod nibh, a auctor
tortor tellus ut justo. Morbi euismod. Ma, molestie in, mi. Nam tellus quam,
vestibulum in, hendrerit non, vehicula placerat, tellus.Donec condimentum, nibh
nec  turpis metus gravida nibh, pretium lacinia eros felis et pede.
Nulla facilisi. Nulla rhoncus pellentesque dui. Maecenas enim mauris, accumsan
at, eleifend non, viverra ac, arcu. Sed at purus. Nullam dictum, urna et viverra
venenatis, lectus leo euismod nibh, a auctor tortor tellus ut justo. Morbi euismod.
Maecenas lorem dui, pellentesque at, molestie id, cursus sit amet, odio.<br />
<br />
<h2>Ipsum</h2>
Lorem ipsumum lacinia eros felis et pede. Nulla facilisi. Nulla rhoncus pellentesque
dui. Maecenas enim mauris, accumsan at, eleifend non, viverra ac, arcu. Sed at
purus. Nullam dictum, urna et viverra venenatis, lectus leo euismod nibh, a auctor
tortor tellus ut justo. Morbi euismod. Ma, molestie in, mi. Nam tellus quam,
vestibulum in, hendrerit non, vehicula placerat, tellus.Donec condimentum, nibh
nec lacinia ornare, turpis metus gravida nibh, pretium lacinia eros felis et
pede.  Nulla rhoncus pellentesque dui. Maecenas enim mauris, accumsan
at, eleifend non, viverra ac, arcu. Sed at purus. Nullam dictum, urna et viverra
venenatis, lectus leo euismod nibh, a auctor tortor tellus ut justo. Morbi euismod.
Maecenas lorem dui, pellentesque at, molestie id, cursus sit amet, odio. <br />
<br />
<h2>Lorem</h2>
Lorem ipsumum lacinia eros felis et pede. Nulla facilisi. Nulla rhoncus pellentesque
dui. Maecenas enim mauris, accumsan at, eleifend non, viverra ac, arcu. Sed at
purus. Nullam dictum, urna et viverra venenatis, lectus leo euismod nibh, a auctor
tortor tellus ut justo. Morbi euismod. Ma, molestie in, mi. Nam tellus quam,
vestibulum in, hendrerit non, vehicula placerat, tellus.Donec condimentum, nibh
nec lacinia ornare, turpis metus gravida nibh, pretium lacinia eros felis et
pede. Nulla facilisi. Nulla rhoncus pellentesque dui. Maecenas enim mauris, accumsan
at, eleifend non, viverra ac, arcu. Sed at purus. Nullam dictum, urna et viverra
venenatis, lectus leo euismod nibh, a auctor tortor tellus ut justo.
</div>
<div id="right">
		<div class="rmenu_item"><a href="#" class="rmenu_link">vehicula placerat</a></div><br />
		<div class="rmenu_item"><a href="#" class="rmenu_link">nullam dictum</a></div><br />
		<div class="rmenu_item"><a href="#" class="rmenu_link">lacinia</a></div><br />
		<div class="rmenu_item"><a href="#" class="rmenu_link">molestie</a></div><br />
		<div class="rmenu_item"><a href="#" class="rmenu_link">lectus</a></div><br />
		<div class="rmenu_item"><a href="#" class="rmenu_link">maecenas</a></div><br />
		<div class="rmenu_item"><a href="#" class="rmenu_link">euismod</a></div><br />
		<div class="rmenu_item"></div><br />
</div><br clear="all" />
	  </div>
    </div>
 </div>
</div>
</body>
</html>

Und die Seite im Netz.
http://meistermo.kilu.de

Was muss ich ändern, damit es so wie im IE7 auch im Firefox angezeigt wird?

Vielen Dank schonmal!
 
Hi,
erstml eine kleine nebensächlichkeit. Mach mal typografisch richtige Anführungszeichen im Header. Also
„“ oder »«
Zum Vergrößern anklicken....
. Du hast das englische Anführungs- und Abführungszeichen verwendet. Zum Glück hast du kein Zollzeichen verwendet das wäre sozusagen die Todesstrafe gewessen ;).

Als erstes würde ich mal sagen das du das ganze nicht so verschachteln brauchst. Du solltest im Wuellcode erstmal alles auch so hintereinander schreiben wie es auf der webseite aufgebaut wird.
Also

-Header
-Menü
-Content
-Footer

Dann ist es auch später noch leichter zu verstehen wo sich was befindet. Danach sieht man dann auch ob du nun wirklich etwas verschachteln mußt.
Das hilft dir jett vielleicht nicht weiter hinsichtlich deines Problems aber du wirst leichter durchsteigen um den fehler zu finden.

Ich hab jetzt ehrlich gesagt auch keine Zeit auf Fehlersuche zu gehen. Bin grad im Prüfungsstress.


Gruß
 
Zuletzt bearbeitet:
Hi,

durch die margin-top:225px-Deklaration für #menu verschieben Firefox, Opera, Safari & Co. das Parent-DIV .wrapper um das Maß nach unten.

Lösung:
Code: 
.header
{
        width: 966px;
        background-image: url(images/header.jpg);
        background-repeat: no-repeat;
        background-position:left top;
        padding-top: 225px;
}

#menu {
	width: 882px;
	height: 58px;
	/*margin-top: 225px;*/ /* auskommentiert = deaktiviert */
	background-color: #000000;
	border: 6px #FFFFFF solid;
}


mfg Maik
 
Einen hab ich noch ;-)
Code: 
#menu {
	width: 882px;
	height: 58px;
	background-color: #000000;
	border: 6px #FFFFFF solid;
        margin:0 auto; /* für horizontale Zentrierung in o.g. Browsern */
}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück