zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Browser-Problem bei Positionierung von DIVs

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.09.2004, 14:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.09.2004
Beiträge: 10
mickropixel befindet sich auf einem aufstrebenden Ast
Standard Browser-Problem bei Positionierung von DIVs

Hallo,

ich hab ein problem mit der positionierung von divs.
am besten einfach mal den unten stehenden code kopieren und testen.

problemstellung:

ich möchte gerne zwei divs (A und B) nebeneinander platzieren. die beiden betroffenen divs sind im beispiel gelb hinterlegt.
unterhalb dieser beiden divs befindet sich ein "footer"-div (C), im beispiel orange hinterlegt.

nun geht es darum, dass div C abhängig von der höhe von div A und div B variabel positioniert wird. hierbei kann mal die höhe von A größer sein, aber auch die höhe von B.

ich denke, soweit ist das verständlich...

die gängigen browser stellen dies auch korrekt dar. als negatives beispiel kann ich hier nur den mac ie 5.2 nennen, der die divs A und B vertikal versetzt darstellt. d.h. B liegt unterhalb von A und nicht auf der selben x-Position, wie es eigentlich sein sollte.
dass es nicht am browser liegen kann, zeigt mir www.mezzoblue.com, die von der positionierung der divs ähnlich aufgebaut und im mac ie 5.2 korrekt angezeigt wird.

vielleicht könnt ihr mir ja helfen, wäre auf jeden fall sehr dankbar für nützliche tipps...


mfg
michael


PS: hier der code-schnipsel

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="en">
<head>
  <title>Titel</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
  <style type="text/css">
  <!--
  
  html, body {
    margin: 0px;
    min-width: 780px;
    text-align: center;
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    background-color: #666;
  }

  a { text-decoration: none; }
  
  #container {
    width: 740px;
    margin: 0px auto;
    text-align: left;
    background-color: #fff;
  }
  
  #pageHeader {
    position: relative;
    margin: 0px 8px 0px 8px;
  }
  
  #pageBody {
    position: relative;
    margin: 0px 8px 0px 8px;
    clear: both;
  }
  
  #content {
    width: 511px;
    float: left;
    background-color: #ff0;
  }
  
  #sideBar {
    width: 190px;
    margin-left: 533px;
    background-color: #ff0;
  }
  
  #pageFooter {
    margin: 0px 8px 0px 8px;
    text-align: center;
    clear: both;
    background-color: #f90;
  }
  
  #pageHeader ul {
    margin: 0px;
    padding: 8px 0px 0px 0px;
  }
  
  #pageHeader ul li {
    margin: 0px 10px 0px 0px;
    font-weight: bold;
    display: inline;
  }
  
  #imageBar {
    margin: 0px;
    width: 724px;
    height: 120px;
    background-color: #999;
  }
  
  #pageFooter p {
    margin: 0px;
  }
  
  .subhead {
    text-align: right;
  }
  
  -->
  </style>  
</head>
<body>

<div id="container">
  
  
  
  <div id="pageHeader">
    <ul>[*]hier[*]kommt[*]dann[*]die[*]navigation[/list]    <div id="imageBar"></div>
  </div>   
  
  
  
  <div id="pageBody">
    <div id="content">
      <div>
        hier 

        kommt 

        dann 

        der 

        inhalt
      </div>
    </div>
    
    <div id="sideBar">
      <div>sidebar</div>
    </div>
  </div>   
  
  
  
  <div id="pageFooter">
    

Hier kommt der Footer</p>
  </div>
  
</div>   

</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.09.2004, 15:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.09.2004
Beiträge: 10
mickropixel befindet sich auf einem aufstrebenden Ast
Standard

Problem gelöst!!!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.09.2004, 15:57
Anonymous
Gast
 
Beiträge: n/a
Standard

Aha ...

Ähem, das Hellseherforum ist gleich um die Ecke Aber da ich dort nicht registriert bin wäre es nett, wenn du deine Lösung hier mal posten könntest.
Mit Zitat antworten
  #4 (permalink)  
Alt 20.09.2004, 17:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.09.2004
Beiträge: 10
mickropixel befindet sich auf einem aufstrebenden Ast
Standard

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="en">
<head>
  <title>Titel</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
   
  <style type="text/css">
  <!--
 
  html, body {
    margin: 0px;
    min-width: 780px;
    text-align: center;
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    background-color: #666;
  }

  a { text-decoration: none; }
 
  #container {
    width: 740px;
    margin: 0px auto;
    text-align: left;
    background-color: #fff;
  }
 
  #pageHeader {
    position: relative;
    margin: 0px 8px 0px 8px;
  }
 
  #content {
    width: 511px;
    float: left;
		margin-left: 8px;
    background-color: #ff0;
  }
 
  #sideBar {
    width: 190px;
    margin-left: 22px;
		float: left;
    background-color: #ff0;
  }
 
  #pageFooter {
    margin: 0px 8px 0px 8px;
    text-align: center;
    clear: both;
    background-color: #f90;
  }
 
  #pageHeader ul {
    margin: 0px;
    padding: 8px 0px 0px 0px;
  }
 
  #pageHeader ul li {
    margin: 0px 10px 0px 0px;
    font-weight: bold;
    display: inline;
  }
 
  #imageBar {
    margin: 0px;
    width: 724px;
    height: 120px;
    background-color: #999;
  }
 
  #pageFooter p {
    margin: 0px;
  }
 
  .subhead {
    text-align: right;
  }
 
  -->
  </style> 
</head>
<body>

<div id="container">
 
  
 
  <div id="pageHeader">
    <ul>[*]hier[*]kommt[*]dann[*]die[*]navigation[/list]    <div id="imageBar"></div>
  </div>  
 
  
 
  <div id="content">
    <div>
      hier 

      kommt 

      dann 

      der 

      inhalt
    </div>
  </div>
 
  <div id="sideBar">
    <div>sidebar</div>
  </div>
 
  
 
  <div id="pageFooter">
    

Hier kommt der Footer</p>
  </div>
 
</div>   

</body>
</html>
Lösung: einfach den #pageBody, das war das div, das #content und #sideBar eingeschlossen hatte, weglassen und dem #sideBar die eigenschaft float: left; geben.


mfg
michael
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
Problem mit Hintergrund + Positionierung deepy (X)HTML 2 27.07.2010 12:33
Problem mit relativer Positionierung wahn_nau CSS 2 19.03.2009 08:45
a:hover Problem über Browser Zurück-Schaltfläche ! un_titled CSS 3 15.09.2006 09:10
Problem mit Divs, Floating und Positionierung scavenger CSS 13 11.07.2006 21:15
Horizontales Listenmenü: problem bei positionierung von li toppo CSS 2 05.02.2006 19:55


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:34 Uhr.