zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden floating überlappt sich

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.09.2006, 18:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.08.2006
Beiträge: 14
Luke_Skyscraper befindet sich auf einem aufstrebenden Ast
Standard floating überlappt sich

Hi,

ich hab n problem mit floating. eigentlich müsste bei floating sich ja die Blöcke nebeneinander positionieren, aber bei mir tun sie das nicht sondern überlappen sich. Hier mein Beispiel:

Code:
<div id="sub">
  <div id="frei">Navigation</div>
  <div id="border">
    <ul id="liste">
      <!-- SUB-MENUE -->
        ##SUBS##
      <!-- SUBS-MENUE ENDE -->      
    </ul>
  </div>
</div>
<div id="nav">
      <!-- NAVIGATION -->
        ##NAV#
      <!-- NAVIGATION ENDE -->
</div>
<div id="content">
    <!-- INHALT -->
      ##INHALT#
    <!-- INHALT ENDE -->
</div>
CSS-Datei:
Code:
div#allgemein {
width: 100%;
position: absolute;
background-color: white;
}
div#rahmen {
position: relative;
width: 800px;
margin: 0px auto;
text-align: center;
}

div#banner {
width: 800px;
height: 80px;
background-image: url('../bilder/head.gif');
background-repeat: no-repeat;
margin: 0px auto;
text-align: center;
}

div#sub {
position: relative;
background-image: url('../bilder/sub.gif');
background-repeat: no-repeat;
width: 100%;
height: 30px;
margin: 0px auto;
}

div#frei {
width: 150px;
height: 100%;
font-weight: bold;
font-size: 12px;
color: #8098B2;
padding-top: 7px;
float: left;
}

div#border {
height: 100%;
padding-left: 20px;
border-bottom: 1px solid #013162;
}

ul#liste {
float: left;
padding-top: 7px;
}

ul#liste li {
display: inline;
}

div#sub ul#liste a {
font-weight: bold;
font-size: 12px;
color: #013162;
font-family: Verdana;
padding: 0px 5px 0px 5px;
text-decoration: none;
}

div#sub ul#liste a:hover {
color: #000000;
text-decoration: underline;
}
div#nav {
width: 150px;
height: 100%;
background-image: url('../bilder/nav2.gif'); 
background-repeat: repeat-y;
border: 1px solid black;
float: left;
}

div#content {
background-image: url('../bilder/main.gif');
background-repeat: no-repeat;
background-position: left top;
text-align: justify;
width: 650px;
border: 1px solid black;
}
kann mir da jemand weiter helfen?

gruß Luke
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.09.2006, 18:42
Benutzerbild von Lloyd Larkin
Don Quijote
XHTMLforum-Mitglied
 
Registriert seit: 19.11.2005
Ort: Wien
Beiträge: 733
Lloyd Larkin befindet sich auf einem aufstrebenden Ast
Standard

Überlappen sich wo/wie? Bereits gecleared?
Siehe FAQ Frage/Antwort 2.

Edit: Hast du ein Link zu deinem Problem?

Grüsse
lloyd
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde -
#me { position: absolute; }

Geändert von Lloyd Larkin (13.09.2006 um 18:46 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.09.2006, 18:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.08.2006
Beiträge: 14
Luke_Skyscraper befindet sich auf einem aufstrebenden Ast
Standard

ich kann die ganze Seite hier reinstellen...

Code:
<!-- KOPFTEIL BEGINN -->
<!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" xml:lang="de" lang="de">
      <head>
            <title>HI-FOG.de - Homepage Marioff.de | 13.09.2006 | </title>
            <link href="../../bilder/icon.ico" rel="SHORTCUT ICON" />
            <meta name="generator" content="Webweaver v1.6.3 [http://pr0g.net]" />
            <link rel="stylesheet" type="text/css" href="start.css" />
      </head>
<body>

  <div id="allgemein">
    <div id="rahmen">
      <div id="banner">
        <span class="hidden">Willkommen bei Marioff dem weltweit f&uuml;hrendem Anbieter f&uuml;r Wassernebel-Brandschutz-Systeme</span>
      </div>
<!-- KOPFTEIL ENDE --><div id="sub">
  <div id="frei">Navigation</div>

  <div id="border">
    <ul id="liste">
      <!-- SUB-MENUE -->
        
      <!-- SUBS-MENUE ENDE -->      
    </ul>
  </div>
</div>
<div id="nav">
      <!-- NAVIGATION -->
        ##NAV#
      <!-- NAVIGATION ENDE -->

</div>
<div id="content">
    <!-- INHALT -->
      ##INHALT#
    <!-- INHALT ENDE -->
</div>


<!-- FUSS BEGINN -->
  <table cellpadding="0" cellspacing="0" id="sub_bottom">
    <tr>
      <td>

        <div id="nav2">
          &nbsp;
        </div>      
      </td>
      <td>
        <div id="main2">
          &nbsp;
        </div>      
      </td>
    </tr>

  </table>
  <table cellpadding="0" cellspacing="0" id="bottom">
    <tr>
      <td style="width: 150px; border-top: 1px solid #6683A3;">&nbsp;</td>
      <td style="border-top: 1px solid #013162; text-align: right; padding: 3px;"><b>Erstellt am: </b>13.09.06 | 17:34 <br />Marioff.de by Florian Schulz 2004-06</td>
    </tr>
  </table>

</body>
</html>
<!-- FUSSTEIL ENDE -->
CSS:
Code:
body {
margin: 0px;
padding: 0px;
font-style: normal;
font-weight: light;
font-size: 15px;
font-family: Verdana;
text-align: center;
}

div#allgemein {
width: 100%;
position: absolute;
background-color: white;
}
div#rahmen {
position: relative;
width: 800px;
margin: 0px auto;
text-align: center;
}

div#banner {
width: 800px;
height: 80px;
background-image: url('../bilder/head.gif');
background-repeat: no-repeat;
margin: 0px auto;
text-align: center;
}

div#sub {
position: relative;
background-image: url('../bilder/sub.gif');
background-repeat: no-repeat;
width: 100%;
height: 30px;
margin: 0px auto;
}

div#frei {
width: 150px;
height: 100%;
font-weight: bold;
font-size: 12px;
color: #8098B2;
padding-top: 7px;
float: left;
}

div#border {
height: 100%;
padding-left: 20px;
border-bottom: 1px solid #013162;
}

ul#liste {
float: left;
padding-top: 7px;
}

ul#liste li {
display: inline;
}

div#sub ul#liste a {
font-weight: bold;
font-size: 12px;
color: #013162;
font-family: Verdana;
padding: 0px 5px 0px 5px;
text-decoration: none;
}

div#sub ul#liste a:hover {
color: #000000;
text-decoration: underline;
}

div#nav {
width: 150px;
height: 100%;
background-image: url('../bilder/nav2.gif'); 
background-repeat: repeat-y;
border: 1px solid black;
float: left;
}

div#content {
background-image: url('../bilder/main.gif');
background-repeat: no-repeat;
background-position: left top;
text-align: justify;
width: 650px;
border: 1px solid black;
}
Ich will ja nicht clearen, ich will floaten aber das div#content neben div#nav erscheint und nicht übereinander

Gruß Flow
Mit Zitat antworten
  #4 (permalink)  
Alt 13.09.2006, 19:07
Benutzerbild von Lloyd Larkin
Don Quijote
XHTMLforum-Mitglied
 
Registriert seit: 19.11.2005
Ort: Wien
Beiträge: 733
Lloyd Larkin befindet sich auf einem aufstrebenden Ast
Standard

Wenns dir irgendwie möglich ist bitte den Link posten.
Vielleicht erscheinen sie untereinander (trotz floaten), weil content neben nav keinen Platz mehr findet.

Edit: Nimm den HTML Kommertar am Beginn des Dokuments weg, ansonsten rendert der IE im Quirks Mode.
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde -
#me { position: absolute; }
Mit Zitat antworten
  #5 (permalink)  
Alt 13.09.2006, 19:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.08.2006
Beiträge: 14
Luke_Skyscraper befindet sich auf einem aufstrebenden Ast
Standard

eben sie erscheinen ja NICHT untereinander und nicht nebeneinander sondern übereinander und das ist ja das Problem.

tut mir leid ich hab leider kein Webspace wo ich das jetzt drauf laden kann

Gruß Flow
Mit Zitat antworten
  #6 (permalink)  
Alt 13.09.2006, 19:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Luke, auch mit deinem Codebeispiel ist mir nicht klar, was genau dein Problem ist. Reduzier den Code auf den Problembereich (was haben die Tabellen damit zu tun?) und beschreib es bitte genauer, vielleicht mit Screenshot.
Und validier deinen Code, bevor du ihn hier einstellst.

Ich vermute, dass du das Konzept von float noch nicht ganz verstanden hast.
Dein #nav hat ein float, #content nicht.
Es weichen somit *nur die Inhalte* von #content dem float aus, nicht jedoch die gesamte Box. (Was der IE macht, ist falsch).
Grundlagenlektüre:
http://www.andreas-kalt.de/webdesign.../float-theorie
Mit Zitat antworten
  #7 (permalink)  
Alt 13.09.2006, 19:43
Benutzerbild von Lloyd Larkin
Don Quijote
XHTMLforum-Mitglied
 
Registriert seit: 19.11.2005
Ort: Wien
Beiträge: 733
Lloyd Larkin befindet sich auf einem aufstrebenden Ast
Standard

Also in meinem Testcase liegt INHALT unter NAV und da du NAV links floatest, kann es durchaus sein, dass INHALT keinen Platz mehr hat und deshalb darunter (unter NAV!) dargestellt wird.
Falls dem bei dir nicht so ist, kannst du gerne den Ordner packen und mir als Mail schicken.
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde -
#me { position: absolute; }
Mit Zitat antworten
  #8 (permalink)  
Alt 14.09.2006, 08:05
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.07.2003
Beiträge: 179
Karlo wird schon bald berühmt werden
Standard

Hi,

kein Wunder das sich die beiden Container überlappen, ändere mal bitte wie folgt:

Code:
div#content {
width: 620px;
}
der Container ist einfach zu groß. Ferner wurd ich mir mal überlegen, was ich hier für einen Code poste. Nach deinen Bsp. Code sieht die Seite Grauenvoll aus. Schau dir mal diesen Code hier an und lerne draus.

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" xml:lang="de" lang="de">
<head>
<title>HI-FOG.de - Homepage Marioff.de</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}
.clear {
	clear: both;
}
body {
	font: .8em Verdana, Geneva, Arial, Helvetica, sans-serif;
	background-color: White;
	color: Black;
}
#seite {
	margin: 0 auto;
	width: 750px;
}
#banner {
	height: 80px;
	background-color: #FFDEAD;
	color: Black;
}
#banner span {
	visibility: hidden;
}
#navi {
	background-color: #CC6600;
	padding: 5px 10px;
	color: Black;
}
#navi ul {
	list-style-type: none;
	float: right;
}
#navi ul li {
	display: inline;
}
#sidebar {
	width: 180px;
	float: left;
	margin-right: 10px;
	background-color: #F4A460;
	margin-bottom: 10px;
	color: Black;
}
#sidebar ul {
	list-style-type: none;
}
#content {
	width: 550px;
	float: left;
	background-color: #FFE4C4;
	color: Black;
}
#footer {
	border-top: 1px solid #CC6600;
	text-align: center;
	padding: 5px 0;
	clear: both;
}

-->
</style>

</head>
<body>
<div id="seite">

<div id="banner">
<span>Willkommen bei Marioff dem weltweit f&uuml;hrendem Anbieter f&uuml;r 
Wassernebel-Brandschutz-Systeme</span>
</div>

<div id="navi">
<ul>
<li><a href="#">Listenpunkt</a> </li>
<li><a href="#">Listenpunkt</a> </li>
<li><a href="#">Listenpunkt</a> </li>
<li><a href="#">Listenpunkt</a> </li>
</ul>

<p><strong>Navigation</strong></p>
</div>

<div id="sidebar">
<ul>
<li><a href="#">Listenpunkt</a> </li>
<li><a href="#">Listenpunkt</a> </li>
<li><a href="#">Listenpunkt</a> </li>
<li><a href="#">Listenpunkt</a> </li>
</ul>
</div>

<div id="content">Seiteninhalt...</div>

<div id="footer">
<p><strong>Erstellt am: </strong>13.09.06 | 17:34 - Marioff.de by Florian Schulz 2004-06</p>
</div>

</div>
</body>
</html>
__________________
Gruss Karlo
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
Wiedermal floating mcdaniels CSS 7 16.05.2011 21:08
Floating Problem beim IE 6 eddy1968 CSS 5 12.04.2010 10:52
div am unteren Rand pos. => Bei kleineren Monitoren überlappt div nach oben! RollingStones CSS 3 30.05.2009 13:02
[IE] border überlappt an ecken psycho_dmr CSS 5 03.02.2006 16:05
floating Problematik bei verschachtelten div's bensen CSS 2 29.05.2005 17:36


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:27 Uhr.