untere navigation und content probs :/

elroberto1337

guten morgen liebe gemeindschaft
ich habe ein problem mit der unteren navigation meiner homepage. folgendes: habe einfach den quellcode der oberen navigation genommen und nur die bilder ausgetauscht, wodurch es egtl. gehen müsste
zweites problem: der "content " bereich ist nicht an der richtigen stelle. vorallem bei den unterschiedlichen ie versionen wird die anschrift in der mitte dargestellt ...
bitte um hilfe
vielen dank im vorraus
gruss robert

link zur seite:
http://home.arcor.de/robertfuhrmann/eco/index.html
so soll es egtl. aussehen : (
http://img40.imageshack.us/img40/2379/cronenberg.jpg

HTML

<!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=utf-8" />
<title>Physiotherapeut Robin Cronenberg - Berlin</title>
<style type="text/css">
-->
@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/*reset styles end*/
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: #666666;/* background-image:url(bg.jpg);*//* background-repeat:repeat; */
}
#container {
    margin: 0 auto;
    width: 716px;
    height: 800px;
    border: 1px solid black;
    background-color: #fff;
}
#header {
    background: url(header/header_impressum.jpg) no-repeat;
    width: 710px;
    height: 138px;
    margin: 0 auto;
}
.line {
    width: 710px;
    height: 3px; font-size:0;
    background: url(line/firstline.gif) no-repeat 0 0;
    margin: 1px auto;
}
a {
    display: block;
    padding: 0px;
    height: 20px;
    width: 130px;
}
.unsichtbar {
    display: none;
}
#navi {
    width: 710px;
    height: 20px;
    margin: 0 auto;
    list-style: none;
    font-size:0;
}
#navi li {
        width: 120px auto;
    height: 20px;
    display:block;
    float: left;
}
#navi li:hover ul, #navi li.hover ul {
    display: block;
}
#navlinks {
    background:url(navitop/navilinks.gif) no-repeat;
    width: 87px;
    display: block;
    height: 20px;
}
#navi li a.therapien:link, li a.therapien:visited, li a.therapien:focus, li a.therapien:active {
    width: 101px;
    height: 20px;
    display: block;
    border: none;
    background: url(navitop/therapien.gif) no-repeat;
}
#navi li a.therapien:hover {
    background: url(hover_top/therapien.gif) no-repeat;
    border: none;
    width: 101px;
    display: block;
    height: 20px;
}
#navi li a.preise:link, li a.preise:visited, li a.preise:focus, li a.preise:active {
    width: 101px;
    height: 20px;
    display: block;
    background: url(navitop/preise.gif) no-repeat;
}
#navi li a.preise:hover {
    background: url(hover_top/preise.gif) no-repeat;
    display: block;
    width: 101px;
    height: 20px;
}
#navi li a.guestbook:link, li a.guestbook:visited, li a.guestbook:focus, li a.guestbook:active {
    width: 101px;
    height: 20px;
    display: block;
    background: url(navitop/guestbook.gif) no-repeat;
}
#navi li a.guestbook:hover {
    background: url(hover_top/guestbook.gif) no-repeat;
    display: block;
    width: 101px;
    height: 20px;
}
#navi li a.lebenslauf:link, li a.lebenslauf:visited, li a.lebenslauf:focus, li alebenslauf:active {
    width: 120px;
    height: 20px;
    display: block;
    background: url(navitop/lebenslauf.gif) no-repeat;
}
#navi li a.lebenslauf:hover {
    background: url(hover_top/lebenslauf.gif) no-repeat;
    display: block;
    width: 120px;
    height: 20px;
}
#navi li a.impressum:link, li a.impressum:visited, li a.impressum:focus, li a.impressum:active {
    width: 117px;
    height: 20px;
    display: block;
    background: url(navitop/impressum.gif) no-repeat;
}
#navi li a.impressum:hover {
    background: url(hover_top/impressum.gif) no-repeat;
    display: block;
    width: 117px;
    height: 20px;
}
#navrechts {
    background:url(navitop/navirechts.gif) no-repeat;
    display: block;
    width: 83px;
    height: 20px;
}
#secondline {
    width: 710px;
    height: 10px;
    background: url(line/secoundline.gif) no-repeat 0 0;
    margin: 0 auto;
    margin-top: 1px;
}


.thirdline {
width: 710px;
height: 20px;
background: url(line/thirdline.gif) no-repeat 0 0;
margin: 0 auto;
margin-top: 2px;
/*border: 1px solid black;*/
}


/*  NEU NEU   */




#h1_impressum {
    background: url(fonts/impressum.gif) no-repeat;
    width: 202px;
    height: 67px;
    border: 1px solid black;
    padding-top:10px;
    float:left;
    margin-top: 40px;
    margin-left: 40px;
}


.physiotherapie_anschrift {
border: 1px solid black;
width: 180px;
height:370px;
font:Verdana, Arial, Helvetica, sans-serif;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#0099cc;
border:1px solid black;
clear:left;
margin-left:60px;
}


.physiotherapie_anschrift ul {
float:left;
list-style:none;
}


.physiotherapie_anschrift li {
display:block;
}


#robincronenberg {
width:230px;
height:60px;
border: 1px solid black;
background: url(footer/cronenberg.gif) no-repeat;
}






.invisible {
display:none;
}


#naviunten {
    width: 716px;
    height: 20px;
    margin: 0 auto;
    list-style: none;
    font-size:0;
    border:1px solid black;
    float:right;

}
#naviunten li {
        width: 140px auto;
    height: 20px;
    display:block;
    float: left;
}
#naviunten li:hover ul, #naviunten li.hover ul {
    display: block;
}




}
#naviiil {
    background:url(naviunten/navil.gif) no-repeat;
    width: 88px;
    display: block;
    height: 20px;
}
#naviunten li a.thera:link, li a.thera:visited, li a.thera:focus, li a.thera:active, li a.thera:hover {
    width: 86px;
    height: 20px;
    display: block;
    border: none;
    background: url(naviunten/therapien.gif) no-repeat;
}
#naviunten li a.preis:link, li a.preis:visited, li a.preis:focus, li a.preis:active, li a.preis:hover {
    width: 99px;
    height: 20px;
    display: block;
    background: url(naviunten/preise.gif) no-repeat;
}


#naviunten li a.guest:link, li a.guest:visited, li a.guest:focus, li a.guest:active, li a.guest:hover {
    width: 111px;
    height: 20px;
    display: block;
    background: url(naviunten/guestbook.gif) no-repeat;
}
#naviunten li a.leben:link, li a.leben:visited, li a.leben:focus, li a.leben:active, li a.leben:hover {
    width: 127px;
    height: 20px;
    display: block;
    background: url(naviunten/lebenslauf.gif) no-repeat;
}


#naviunten li a.imp:link, li a.imp:visited, li a.imp:focus, li a.imp:active, li a.imp:hover {
    width: 110px;
    height: 20px;
    display: block;
    background: url(naviunten/impressum.gif) no-repeat;
}


#navr {
    background:url(naviunten/navir.gif) no-repeat;
    display: block;
    width: 84px;
    height: 20px;
}


-->
</style>


<!--[if lte IE 6]>
<style type="text/css">
.thirdline {
width: 710px;
height: 20px;
background: url(line/thirdline.gif) no-repeat 0 0;
margin: 0 auto;
margin-top: -7px;
</style>
<![endif]-->






</head>
<body>
<div id="container">
  <div id="header">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div id="navi">
    <ul>
      <li id="navlinks"></li>
      <li><a href="#2" class="therapien" title="Therapien"><span class="unsichtbar">therapienweg</span></a></li>
      <li><a href="#3" class="preise" title="Preise"><span class="unsichtbar">preiseweg</span></a></li>
      <li><a href="#4" class="guestbook" title="Guestbook"><span class="unsichtbar">guestbookweg</span></a></li>
      <li><a href="#5" class="lebenslauf" title="Lebenslauf"><span class="unsichtbar">lebenslaufweg</span></a></li>
      <li><a href="#6" class="impressum" title="Impressum"><span class="unsichtbar">impressumweg</span></a></li>
      <li id="navrechts"></li>
    </ul>
  </div>
      <div id="secondline">&nbsp;</div>
      <div class="thirdline">&nbsp;</div>    
        <div id="h1_impressum"></div>
        <div class="physiotherapie_anschrift">
            <ul>
                <li><img src="icons/cronenberg_telefon.gif" width="173" height="41" title="telefon" alt="telefon" /></li>
                <li><img src="icons/cronenberg_fax.gif" width="173" height="41" title="fax" alt="fax" /></li>
                <li><img src="icons/cronenberg_mobil.gif" width="173" height="41" title="mobil" alt="mobil" /></li>
                <li><img src="icons/cronenberg_email.gif" width="173" height="41" title="email" alt="email" /></li>
                <li><img src="icons/cronenberg_anschrift.gif" width="173" height="52" title="anschrift" alt="anschrift" /></li>
            </ul>
        </div>

 <center><div id="robincronenberg"></div></center>  
    <div id="naviunten">
      <ul>
      <li id="naviiil"></li>
      <li><a href="#2" class="thera" title="Therapien"><span class="invisible">therapienweg</span></a></li>
      <li><a href="#3" class="preis" title="Preise"><span class="invisible">preiseweg</span></a></li>
      <li><a href="#4" class="guest" title="Guestbook"><span class="invisible">guestbookweg</span></a></li>
      <li><a href="#5" class="leben" title="Lebenslauf"><span class="invisible">lebenslaufweg</span></a></li>
      <li><a href="#6" class="imp" title="Impressum"><span class="invisible">impressumweg</span></a></li>
      <li id="navr"></li>
      </ul>

    </div>

</div>
</body>
</html>

Alles anzeigen

sejuma

Das sieht alles recht konfus aus.
Du gibst den Elementen oft die volle Breite und zentrierst sie.
Somit haben sie ja keinen Platz, um sich nebeneinander anordnen zu können.
Das solltest du vorrangig bereinigen.
Es sind allerdings wohl auch noch andere Ungereimtheiten drin.
Auch der veraltete <center> - Tag ist bei deinem Doctype nicht zulässig.

yeti66

Naja alles gut und schön, aber wenn Du es so umsetzen möchtest ist es besser Deine Datei mit Grafik usw. hochzuladen dann kann man auch helfen.

HTML

<!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=utf-8" />
<title>Physiotherapeut Robin Cronenberg - Berlin</title>
<style type="text/css">
-->
@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
img{ border:0;}
/*reset styles end*/
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	background-color: #666666;/* background-image:url(bg.jpg);*//* background-repeat:repeat; */
}
#container {
	margin: 0 auto;
	width: 716px;
	height: 800px;
	border: 1px solid black;
	background-color: #fff;
}
#header {
	background: url(header/header_impressum.jpg) no-repeat;
	width: 710px;
	height: 138px;
	margin: 0 auto;
}
.line {
	width: 710px;
	height: 3px;
	font-size:0;
	background: url(line/firstline.gif) no-repeat 0 0;
	margin: 1px auto;
}
a {
	display: block;
	padding: 0px;
	height: 20px;
	width: 130px;
}
.unsichtbar {
	display: none;
}
#navi {
	width: 710px;
	height: 20px;
	margin: 0 auto;
	list-style: none;
	font-size:0;
}
#navi li {
	width: 120px auto;
	height: 20px;
	display:block;
	float: left;
}
#navi li:hover ul, #navi li.hover ul {
	display: block;
}
#navlinks {
	background:url(navitop/navilinks.gif) no-repeat;
	width: 87px;
	display: block;
	height: 20px;
}
#navi li a.therapien:link, li a.therapien:visited, li a.therapien:focus, li a.therapien:active {
	width: 101px;
	height: 20px;
	display: block;
	border: none;
	background: url(navitop/therapien.gif) no-repeat;
}
#navi li a.therapien:hover {
	background: url(hover_top/therapien.gif) no-repeat;
	border: none;
	width: 101px;
	display: block;
	height: 20px;
}
#navi li a.preise:link, li a.preise:visited, li a.preise:focus, li a.preise:active {
	width: 101px;
	height: 20px;
	display: block;
	background: url(navitop/preise.gif) no-repeat;
}
#navi li a.preise:hover {
	background: url(hover_top/preise.gif) no-repeat;
	display: block;
	width: 101px;
	height: 20px;
}
#navi li a.guestbook:link, li a.guestbook:visited, li a.guestbook:focus, li a.guestbook:active {
	width: 101px;
	height: 20px;
	display: block;
	background: url(navitop/guestbook.gif) no-repeat;
}
#navi li a.guestbook:hover {
	background: url(hover_top/guestbook.gif) no-repeat;
	display: block;
	width: 101px;
	height: 20px;
}
#navi li a.lebenslauf:link, li a.lebenslauf:visited, li a.lebenslauf:focus, li alebenslauf:active {
	width: 120px;
	height: 20px;
	display: block;
	background: url(navitop/lebenslauf.gif) no-repeat;
}
#navi li a.lebenslauf:hover {
	background: url(hover_top/lebenslauf.gif) no-repeat;
	display: block;
	width: 120px;
	height: 20px;
}
#navi li a.impressum:link, li a.impressum:visited, li a.impressum:focus, li a.impressum:active {
	width: 117px;
	height: 20px;
	display: block;
	background: url(navitop/impressum.gif) no-repeat;
}
#navi li a.impressum:hover {
	background: url(hover_top/impressum.gif) no-repeat;
	display: block;
	width: 117px;
	height: 20px;
}
#navrechts {
	background:url(navitop/navirechts.gif) no-repeat;
	display: block;
	width: 83px;
	height: 20px;
}
#secondline {
	width: 710px;
	height: 10px;
	background: url(line/secoundline.gif) no-repeat 0 0;
	margin: 0 auto;
	margin-top: 1px;
}
.thirdline {
	width: 710px;
	height: 20px;
	background: url(line/thirdline.gif) no-repeat 0 0;
	margin: 0 auto;
	margin-top: 2px;/*border: 1px solid black;*/
}
/*  NEU NEU   */








#physiotherapie_anschrift {
	width: 202px;
	text-align:right;
	margin-left:60px;
}
#physiotherapie_anschrift ul {
	float:left;
	list-style:none;
}
#physiotherapie_anschrift li {
	display:block;
}
#robincronenberg {
	width:230px;
	height:60px;
	background: url(footer/cronenberg.gif) no-repeat;
}
.invisible {
	display:none;
}
#naviunten {
	width: 716px;
	height: 20px;
	margin: 0 auto;
	list-style: none;
	font-size:0;
	border:1px solid black;
	float:right;
}
#naviunten li {
	width: 140px auto;
	height: 20px;
	display:block;
	float: left;
}
#naviunten li:hover ul, #naviunten li.hover ul {
	display: block;
}


#naviiil {
	background:url(naviunten/navil.gif) no-repeat;
	width: 88px;
	display: block;
	height: 20px; margin-bottom:0;
}
#naviunten li a.thera:link, li a.thera:visited, li a.thera:focus, li a.thera:active, li a.thera:hover {
	width: 86px;
	height: 20px;
	display: block;
	border: none;
	background: url(naviunten/therapien.gif) no-repeat;
}
#naviunten li a.preis:link, li a.preis:visited, li a.preis:focus, li a.preis:active, li a.preis:hover {
	width: 99px;
	height: 20px;
	display: block;
	background: url(naviunten/preise.gif) no-repeat;
}
#naviunten li a.guest:link, li a.guest:visited, li a.guest:focus, li a.guest:active, li a.guest:hover {
	width: 111px;
	height: 20px;
	display: block;
	background: url(naviunten/guestbook.gif) no-repeat;
}
#naviunten li a.leben:link, li a.leben:visited, li a.leben:focus, li a.leben:active, li a.leben:hover {
	width: 127px;
	height: 20px;
	display: block;
	background: url(naviunten/lebenslauf.gif) no-repeat;
}
#naviunten li a.imp:link, li a.imp:visited, li a.imp:focus, li a.imp:active, li a.imp:hover {
	width: 110px;
	height: 20px;
	display: block;
	background: url(naviunten/impressum.gif) no-repeat;
}
#navr {
	background:url(naviunten/navir.gif) no-repeat;
	display: block;
	width: 84px;
	height: 20px;
}
#content {
}
-->
</style>
<!--[if lte IE 6]>
<style type="text/css">
.thirdline {
width: 710px;
height: 20px;
background: url(line/thirdline.gif) no-repeat 0 0;
margin: 0 auto;
margin-top: -7px;
</style>
<![endif]-->
</head>
<body>
<div id="container">
  <div id="header">&nbsp;</div>
  <div class="line">&nbsp;</div>
  <div id="navi">
    <ul>
      <li id="navlinks"></li>
      <li><a href="#2" class="therapien" title="Therapien"><span class="unsichtbar">therapienweg</span></a></li>
      <li><a href="#3" class="preise" title="Preise"><span class="unsichtbar">preiseweg</span></a></li>
      <li><a href="#4" class="guestbook" title="Guestbook"><span class="unsichtbar">guestbookweg</span></a></li>
      <li><a href="#5" class="lebenslauf" title="Lebenslauf"><span class="unsichtbar">lebenslaufweg</span></a></li>
      <li><a href="#6" class="impressum" title="Impressum"><span class="unsichtbar">impressumweg</span></a></li>
      <li id="navrechts"></li>
    </ul>
  </div>
  <div id="secondline">&nbsp;</div>
  <div class="thirdline">&nbsp;</div>
  <div id="content">

  <div id="physiotherapie_anschrift">
    <ul>
      <li><img src="http://home.arcor.de/robertfuhrmann/eco/fonts/impressum.gif" width="202" height="67" title="telefon" alt="telefon" /></li>
      <li><img src="http://home.arcor.de/robertfuhrmann/eco/icons/cronenberg_telefon.gif" width="173" height="41" title="telefon" alt="telefon" /></li>
      <li><img src="http://home.arcor.de/robertfuhrmann/eco/icons/cronenberg_fax.gif" width="173" height="41" title="fax" alt="fax" /></li>
      <li><img src="http://home.arcor.de/robertfuhrmann/eco/icons/cronenberg_mobil.gif" width="173" height="41" title="mobil" alt="mobil" /></li>
      <li><img src="http://home.arcor.de/robertfuhrmann/eco/icons/cronenberg_email.gif" width="173" height="41" title="email" alt="email" /></li>
      <li><img src="http://home.arcor.de/robertfuhrmann/eco/icons/cronenberg_anschrift.gif" width="173" height="52" title="anschrift" alt="anschrift" /></li>
    </ul>
  </div>
  <div id="robincronenberg"></div>
  </div>
  <div id="naviunten">
    <ul>
      <li id="naviiil"></li>
      <li><a href="#2" class="thera" title="Therapien"><span class="invisible">therapienweg</span></a></li>
      <li><a href="#3" class="preis" title="Preise"><span class="invisible">preiseweg</span></a></li>
      <li><a href="#4" class="guest" title="Guestbook"><span class="invisible">guestbookweg</span></a></li>
      <li><a href="#5" class="leben" title="Lebenslauf"><span class="invisible">lebenslaufweg</span></a></li>
      <li><a href="#6" class="imp" title="Impressum"><span class="invisible">impressumweg</span></a></li>
      <li id="navr"></li>
    </ul>
  </div>
</div>
</body>
</html>

Alles anzeigen

Das ist jetzt nur die Optik für IE8/FF/Opera. Für IE5.5/IE6/IE7 brauche ich das ganze Paket, damit ich etwas sehe.

elroberto1337

hier die gewünschte datei. hoffe du kannst mir helfen und sagen was du verändert hast, damit ich dazulernen kann. wäre echt super nett
vielen dank

http://home.arcor.de/robertfuhrmann/cronenberg.zip

naja bin schon fast am überlegen den "content" mit tabellen zu machen......... aber das will ich egtl. nicht

yeti66

OK. Wieviel Zeit bekomme ich? Sagen wir mal morgen Abend 20:00Uhr. Ob ich heute noch fertig werde kann ich nicht sagen.

elroberto1337

thx vielen dank :>

kann mir jemand inet-seiten bzw. bücher über div-elemente und csss styles empfehlen

yeti66

Sry, ich kann mein Versprechen leider nicht ganz erfüllen für heute. Ich habe meinen Vater heute ins Krankenhaus gebracht und bin erst zur Hälfte fertig. Ich muss die Seite fast neu umsetzen.
Ach ja hast Du für den Hintergrund (Schleiergrafik) ein .psd- Vorbild?

elroberto1337

nabend
ist ja kein problem bzw. verständlich
du meinst für die linien im hintergrund ?

hier die komplette .psd datei
http://home.arcor.de/robertfuhrmann/cronenberg.zip

yeti66

So, ganz fertig ist es noch nicht. Aber ich wollte schon mal was zur Ansicht schicken. Ab Montag habe ich dann mehr Zeit und kann nochmal die Feinarbeit (Anpassung für IE5.5 usw. und Kommentare schreiben). Deine Navi habe ich neu gemacht, da die sehr grob wirkte. Mit dem Hintergrund das ist jetzt nur eine Spieleri von mir, damit die Seite nicht so düster wirkt.

elroberto1337

guten morgen
vielen dank schonmal
kennst du nicht ein paar gute bücher bzw. internetforen etc. wo man viel über div-elemente etc. nachlesen kann. habe nämlich immer seiten mit div-layouts kombiniert mit tabellen angefertigt oder sogarnur tabellenlayouts, was ja heute keiner mehr so wirklich macht

yeti66

Ja kann ich. Wenn Du mir eine email schreibst (unter http://www.harz-achat.de/impressum.html#design), dann kann ich Dir in paar Werke zuschicken, die ich bei mir aussortiere. Das dürfte für den Einstieg zum "nachblättern" reichen.;)

yeti66

Die Seite hat mich ja ganz schön zur Verzweiflung gebracht. Wenn ich auch noch nicht richtig glücklich damit bin, so kann ich erst einmal sagen das ich die Seite erfolgreich im IE8/FF/Safari/GoogleChrome und Opera getestet habe. Also läuft es in allen modernen Browsern. Im IE(5,5-7) sieht es allerdings mau aus. Der Grund ist der Footer, der zur Darstellung der Seite ja immer am unteren Rand kleben sollte (auch bei mageren Content). Deshalb setze ich den "Stand der Dinge" mal online zur Ansicht. Viele Augen sehen ja mehr.8)
Einen Verweis nebst Link zum W3C ist wenn auch gut gemeint nicht nötig. 2Fehler (2id-Wiederholungen) sind vorhanden das ist mir klar. Der Knackpunkt ist aber den Footer auch unter IE5.5-7 zum laufen zu bringen.

elroberto1337

nabend vielen dank erstmal.
habe dir eine mail geschickt

Tags