zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bild unter dynamischer Navigationsleiste floatet nicht nach? - Lücke

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.07.2008, 13:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.07.2008
Beiträge: 3
Schnatterinchen befindet sich auf einem aufstrebenden Ast
Standard Bild unter dynamischer Navigationsleiste floatet nicht nach? - Lücke

Hallo, Hab auf meiner Webseite ne dynamische Navileiste eingebaut. Diese klappt natürlich auch auf. Direkt darunter befindet sich ein Bild ---> dieses schließ komischerweise genau mit der Aufklappboxen ab.Sollte aber eigentlich direkt unter der Leiste erscheinen...und die Aufklappboxen über dem Bild aufklappen.


Alle div sind float:left.

Code:
<!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>Homepage Michael Pauka</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript"> var DOM = document.getElementById;

function menu(obj) {
  if (DOM) {
    if(obj.getElementsByTagName("div")[0].style.visibility=='visible') {
      obj.getElementsByTagName("div")[0].style.visibility='hidden';
	  } else {
      obj.getElementsByTagName("div")[0].style.visibility='visible';  
	  }
  }
}

function attach_event() {
	if(document.getElementById("navi")) {
		var sub,i;
		sub = document.getElementById("navi").getElementsByTagName("div");
		for(i=0;i<sub.length;i++) {
			sub[i].parentNode.onmouseover = function() {menu(this)};
			sub[i].parentNode.onmouseout = function() {menu(this)};
			sub[i].parentNode.onfocus  = function() {menu(this)};
		}
	}
}

if(DOM) {
	window.onload = function() {
		attach_event();
	}
}</script>



<div id="header">
	<h1>Michael Pauka</h1>
	<h2>official Homepage</h2>
</div>

<div id="go">
<table class="navigation" id="navi" cellpadding="0" cellspacing="0"
 border="0" summary="Navigationsleiste">
 <tr valign="top">
 <td><a class="navi" href="#" id="home">HOME</a></td>
 <td>
 <a class="navi" href="#">Über mich</a>
 <div>
   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>
   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>
   <a class="menu" href="#">Hyperlink 5</a>
</div>
 </td>
 <td>
 <a class="navi" href="#">Bilder</a>
 <div>
   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>
   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>
   <a class="menu" href="#">Hyperlink 5</a></div>
 </td>
 <td>
 <a class="navi" href="#">Material</a>
 <div>
   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>
   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>
   <a class="menu" href="#">Hyperlink 5</a></div>
 </td>
 <td>
 <a class="navi" href="#" id="rand">Kontakt</a>
 <div>
   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>
   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>
   <a class="menu" href="#">Hyperlink 5</a></div>
 </td>
 </tr>
 </table>
</div>
</div>
<div id="clear"></div>
<div id="splash"><img src="huhu1.jpg" alt="" width="590" height="227" /></div>
<div id="content">
	<h2 class="title">Welcome to my homepage!</h2>
	<div class="story">
		<p>Servus, schön das Du auf meiner Homepage gelandet bist. Nachdem der aufregende Zivildienst im St. Josefsheim Berlin im Mai 2008 zu Ende gegangen ist, wird nun diese Seite eröffnet erneuert, sodass man wieder auf dem aktuellen Stan der Dinge sein kann. </p>

<p>Diese Website soll einen kurzen Überblick üblllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll
lllllllllllllllllllll
llllllllllllllllllllllllllllllllllllllllmmmmmmm
mmmmmmmmmmmmmmmmmmmmmmmmmmmmm
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
mmmmmmmmm
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmer Ausbildungtätigkeiten, Projekte, Praktikas und andere Engagements geben, an denen ich in den letzten Jahren mitgewirkt habe. </p>

<p>fffffffffffffffffffffffffffffffffffffffffflllllllllllllllllllllllllllllll
lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllfffffffffffffffffffffffffff
fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p>

<p>dddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddd
weddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddd</p>

<p>Zudem werden auf dieser Seite in Zukunft aktuelle Bilder von verschiedenen Events und Reisen zu finden sein.</p> 

<p>Außerdem werden natürlich weiterhin nützliche Dokumente für Auszubildende der allgemeinen Krankenversicherung bereitgestellt, die sich in den Jahren ansammeln werden.</p>

	</div>
</div>
<div id="footer">
	<p>Copyright by Michael Pauka webdesign 2008</p>
</div>
</body>
</html>
default1.CSS

Code:
/* 1.1 Body-Bereich */

body {
	margin: 50px;
	padding: 0;
	background: #FFFFFF url(images/img1.gif);
	font: normal small Arial, Helvetica, sans-serif;
	color: black;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	color: black;
}

h1, h2, h3 {
}

h4, h5, h6 {
}

p, ul, ol, blockquote {
	margin-top: 0;
}

a {
	color: black;
}

a:hover {
	text-decoration: none;
}

img {
	border: none;
}
/*-----------------------------------------------------------------------------*/

/* 1.2 Header */

#header {
	width: 590px;
	height: 110px;
	margin: 0 auto;
	padding: 35px 0 0 0;
	background: #FFEE8F url(images/img2.gif) repeat-x;
	border: 5px solid #FFFFFF;
	border-bottom: none;
	float: left;
}

#header h1 {
	text-align: center;
	font-size: 3em;
}

#header h2 {
	text-align: center;
	font-size: 1.4em;
}

/*------------------------------------------------------------------------------*/

/* 1.3 Menu */


/* Navigation Links (TOP-Level)*/

a.navi {
 border:1px solid #666;
 border-left:0;
}
a.navi#home {
 border-left:1px solid #666;
}

a.navi:link, a.navi:visited {
 display:block;
 padding:3px;
 width:113px;
 text-align:center;
 color:#000;
 vertical-align: middle;
 background-color: #e5e5e5;
}
 
 a.navi:active, a.navi:hover { 
 text-decoration:none;
 color:#737994;
 background-color:#ffffff;
}

/* Menü Links (SUB-Level)*/

a.menu:link, a.menu:visited { 
 color:#340065;
 text-decoration:none;
}

a.menu:active, a.menu:hover {
	text-decoration: none;
	background-color: Black;
	color: White;
	background-image: url(../../../../img/portfolio/musterseiten/dynamisch/bullet_aktiv.GIF);
	background-repeat: no-repeat;
}

a.menu { 
 display:block;
 padding:1px 1px 1px 15px;
 background-image:url(../../../../img/portfolio/musterseiten/dynamisch/bullet_nicht_aktiv.GIF);
 background-repeat:no-repeat;
}

/*Aufklappbare Menüboxen, relative Positionierung,
 Sichtbarkeit: zuerst versteckt... */


#navi td div { 
 position:relative;
 left:20px;
 top:-2px;
 visibility:hidden;
 width:100px;
 padding:2px 2px 5px 3px; 
 display:block;
 background-color:#fff;
 border:1px solid #000;
 border-top-color:#fff;
 z-index:1;
}

/* ...nur für gute Browser - Submenüs sichtbar machen per CSS: */
#navi td:hover div {
 visibility:visible;
}

#go {
float: left;
}
/*------------------------------------------------------------------------------*/

/* 1.4 Splash */

#splash {
	width: 590px;
	margin: 0 auto;
	background: #FFFFFF;
	border-left: 5px solid #FFFFFF;
	border-right: 5px solid #FFFFFF;
	float: left;
}
/*----------------------------------------------------------------------------*/

/* 1.5 Content */

#content {
	width: 590px;
	margin: 0 auto;
	background: #FFFFFF;
	border: 5px solid #FFFFFF;
	float: left;

}


/* Hoverbox integrieren */

.clearfix:after {
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */



#content .title {
	padding: 10px 20px;
	background: #FFEE8E url(images/img4.gif) repeat-x;
	font-size: 1em;
}

#content .story {
	padding: 20px;
	border: 2px solid #FFEE8E;
}
/*----------------------------------------------------------------------*/

/*1.6 Footer */

#footer {
	width: 550px;
	margin: 0 auto;
	padding: 10px 20px;
	background: #4E4E4E;
	border: 5px solid #FFFFFF;
	border-top: none;
	float: left;

}

#footer p {
	margin: 20px;
	padding: 0 0 0 250px;
	text-align: center;
	font-size: x-small;
	color: #CCCCCC;
}
Hoffe ihr könnt helfen. Bin eigentlich am umgestalten meiner Webseite, weil ich net wusste, dass die Browser alles so unterscheidlich anzeigen. Arbeite jetzt mit firefox und IE parallel.

Grüße

Geändert von Schnatterinchen (06.07.2008 um 13:59 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.07.2008, 22:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.07.2008
Beiträge: 3
Schnatterinchen befindet sich auf einem aufstrebenden Ast
Standard

huhu, hat sich jemand schon am mein problem durchgelesen; scheint sehr schwer zu sein...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.07.2008, 23:41
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Vielleicht, vielleicht auch nicht.

Ein Link wäre hilfreich- Dir soll doch geholfen werden?

Mit dem Code und dem Teil-CSS läßt sich wirklich nichts anfangen - wenn man nicht einige Zeit mit einem Nachbau der Seite verbringen will um dein Problem erst einmal zu sehen.
Stells online -irgendwo- in einem später nicht mehr existierenden Unterordner ( /test/ bietet sich an) und dann kann man mal sehen.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #4 (permalink)  
Alt 08.07.2008, 02:02
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
Zitat von Schnatterinchen Beitrag anzeigen
hat sich jemand schon am mein problem durchgelesen; scheint sehr schwer zu sein...
Nein, das Problem ist ganz und gar nicht schwer. Aber statt eine Lösung zu bieten, möchte ich einmal klar zum Ausdruck bringen, dass ich persönlich nicht mehr dazu bereit bin, Hilfestellungen für die Seiten von Webdesignern zu leisten, die die Grundprinzipien der Webstandards völlig unbeachtet lassen.

Zu diesen Prinzipien gehört u. a.
- auf den Einsatz von Tabellen zu Layoutzwecken zu verzichten
- Semantik, d. h. der Einsatz von Elementen entsprechend ihrer Zweckbestimmung
- Accessibility, d. h. die bestmögliche Zugänglichkeit für alle Nutzerkreise.

Von der Erfüllung dieser Prinzipien ist deine Seite leider meilenweit entfernt.
Mit Zitat antworten
  #5 (permalink)  
Alt 08.07.2008, 11:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Sehe ich ähnlich. Du baust mit einer Tabelle eine Navigation auf und verschachtelst in dieser Tabelle noch DIVs? Auch solltest du dir mal im Klaren sein, was du da verwendest, allein vom CSS her. Du benutzt visibility: Unsichtbare Elemente: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets vielleicht solltest du mal nachlesen, was visibility überhaupt macht und dann eventuell auf eine andere Lösung zurück greifen? Schau dir den Unterschied zwischen visibility und display an usw. Und dann schmeiß die Tabelle da raus und und und.
Mit Zitat antworten
  #6 (permalink)  
Alt 08.07.2008, 14:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.07.2008
Beiträge: 3
Schnatterinchen befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zu diesen Prinzipien gehört u. a.
- auf den Einsatz von Tabellen zu Layoutzwecken zu verzichten
- Semantik, d. h. der Einsatz von Elementen entsprechend ihrer Zweckbestimmung
- Accessibility, d. h. die bestmögliche Zugänglichkeit für alle Nutzerkreise.
Versteh nicht so recht, was ich jetzt verändern sollte, um Accessibility und Semantik zu korrregieren. Mein Seite ist, bis auf die Tabelle, nach den Standarts aufgebaut...hab eine layoutorientierte Gliederung gewählt.

Wie dem auch sei. Die Tabelle hau ich also ma raus. Was empfhelt ihr mir anstatt der Tabelle als dynamische Navigationsleiste?

Zitat:
Mit dem Code und dem Teil-CSS läßt sich wirklich nichts anfangen
Is doch die vollständige CCS, mehr hab ich net? Wie kann man die Seite online stellen, braucht man dazu Webspace, muss ich die fotografieren?

Ich dache die CSS und die Html reicht, die Seite ist ja noch nicht so groß und kompliziert.

Zitat:
visibility=Setzt ein Element auf sichtbar oder unsichtbar. Unsichtbar bedeutet in diesem Fall vollständig transparent. Das Element ist zwar nicht zu sehen, nimmt aber den Platz ein, der mit den Positionsangaben und Abmessungen festgelegt ist.
Das bedeutet doch, dass ich nie ein ein Element hinter dem Visibility Element positionieren kann, weil es eine feste Postion hat. Aber genau das benöitge ich, damit die Aufklapptafeln auf dem Bild funktionieren...gibts da keene Möglichkeit?...Das Problem tritt doch dann wieder auf, ob ich die Tabelle entferne oder net? Welche dynamische Funktionleiste funktioniert nicht mit dem visbility Effekt.

Geändert von Schnatterinchen (08.07.2008 um 14:15 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 08.07.2008, 16:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Schnatterinchen Beitrag anzeigen
Das bedeutet doch, dass ich nie ein ein Element hinter dem Visibility Element positionieren kann, weil es eine feste Postion hat. Aber genau das benöitge ich, damit die Aufklapptafeln auf dem Bild funktionieren...gibts da keene Möglichkeit?...Das Problem tritt doch dann wieder auf, ob ich die Tabelle entferne oder net? Welche dynamische Funktionleiste funktioniert nicht mit dem visbility Effekt.
Das machen eigentlich so ziemlich alle Menüs. Ich kenne zumindest keine, die visibility benutzen? Immer nur display.

A List Apart: Articles: Suckerfish Dropdowns
Mit Zitat antworten
  #8 (permalink)  
Alt 08.07.2008, 16:52
Benutzerbild von Peter Klein
CSS-Fetischist
XHTMLforum-Mitglied
 
Registriert seit: 27.02.2006
Ort: Berlin
Beiträge: 375
Peter Klein befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Schnatterinchen Beitrag anzeigen

Wie dem auch sei. Die Tabelle hau ich also ma raus. Was empfhelt ihr mir anstatt der Tabelle als dynamische Navigationsleiste?
Tabelle rauswerfen ist schonmal sehr gut.

Also als Navigationselement nimmt man eine Liste, ich mache es immer mit einer undeordneten Liste.

Heiko hat doch in der FAQ eine gute Anleitung geschrieben, lies dir diese mal durch.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bild durch Bild ersetzten! (a:hover) Prof. Awesome CSS 11 16.03.2011 15:33
Bild über Bild rafa CSS 2 24.01.2010 19:46
Bild in der Navigationsleiste zentrieren sumica CSS 8 19.06.2009 12:53
Navigationsleiste + kleines Bild im IE verschoben iVx CSS 7 09.09.2007 00:52
DIV Cont. und 1 Bild - Lücke unten - Bitte um Hilfe Yukonman CSS 2 05.09.2005 01:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:54 Uhr.