div problem mit IE7

Dragooni

Salüü zusammen, ich bins wieder mal

ehm ich habe ein kleines problemchen, und zwar habe ich ein div über ein anderes div gelegt, im FireFox siehts gut aus, aber IE (7) schmeisst es mir irgendwo nach rechts xD

Das 2. div (das über dem anderen) ist absolut platziert, aber das untere nicht.
Hat da IE ein problem damit?
Denn das untere div kann ich ned absolut ausrichten da ich es zentriert haben will, oder kennt einer so einen befehl?

Hier mal der CSS Ausschnitt:

Code

body{
margin:
  0px;
padding:
  0px;
background-color:
  #a7a7af;
color:  
  #000055;
font-family:
  verdana, sans-serif;
background-image:
  url(media/images/shadow.png);
background-repeat:
  repeat-y;
background-position:	center;
}


#frame{
width:
  1000px;
height:
  880px;
margin-left:
  auto;
margin-right:
  auto;
}


#title{
top:
  10px;
width:
  1000px;
height:
  30px;
position:
  absolute;
z-index:
  10;
background-color:
  red;	
}


#logo{
float:
  left;	
background-color:
  #555588;
width:
  180px;
height:	
  140px;
background-image:
  url(media/images/Logo-hp.jpg);
}


#head{
float:
  left;
background-color:
  #333355;
width:
  820px;
height:
  140px;
background-image:
  url(media/images/header-logo.jpg);
}


#navi{
float:
  left;
background-color:
  #222233;
width:
  1000px;
height:
  35px;
background-image:
  url(media/images/Menu_bg.jpg);
background-repeat:
  repeat-x;
}

Alles anzeigen

Der html abschnitt sieht so aus:

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="de" xml:lang="de">
<head>
         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
         <meta http-equiv="content-language" content="de" />
         <meta http-equiv="expires" content="0" />
         <link rel="stylesheet" href="design.css" type="text/css" />
</head>
<body>
         <div id="frame">
		<div id="title">
		</div>


		<div id="logo">
		</div>

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


		<div id="navi">
		</div>
         </div>
</body>

Alles anzeigen

Wie immer bin ich für jede Antwort dankbar

-->Wenn man den Fall mit diesem Code nachstellt (copy paste) sieht man den roten balken der verrückt spielt im IE xD

//edit: 22:56

Heavygerch

also wenn du divs übereinander legen willst, mach das im css file mit dem befehl z-index:

Die zahl 1 ist dann sozusagen das unterste div, die zahl 2 im anderen div legt sich das div drüber, und mit der zahl 3 kannst dann eines über alle beide legen, und im Prinzip mit ebenen arbeiten... kannst so oft übereinander legen wie du willst

Dragooni

ehm steht ja oben schon *gg*
problem ist nicht dass, sondern dass der IE mein z-index div einfach mal so schön zur seite schiebt

K.Y.L.T.

Wieso richtiest du das untere nicht auch absolute aus, dann würde es doch in beiden Browsern funktionieren....

sejuma

Probier's mal so:

Code

#title{ 
margin-top: 
  10px; 
width: 
  1000px; 
height: 
  30px; 
background-color: 
  red;    
}

synaptic

es gibt da noch nen workaround mit javascript....
einfach die verfügbare breite ermitteln, die durch 2 teilen, dann die halbe breite des DIV ermitteln und dann die sache subtrahieren
also: halbe screenbreite - halbe divbreite und dieser wert ist dann die style.left-angabe...

sollte am ende so aussehen:

HTML

<html>


<head>
  <title>divs mittig positionieren</title>
  <script type="text/javascript">


function positionieren(){ 


var verfbreite = screen.availWidth;


var target1 = document.getElementById("DIV1");
var target2 = document.getElementById("DIV2");


var meinebreite =(verfbreite/2);


var halbtargetbreite1 = parseInt(target1.style.width) /2;
var halbtargetbreite2 = parseInt(target2.style.width) /2;


target1.style.left = (meinebreite-halbtargetbreite1);
target2.style.left = (meinebreite-halbtargetbreite2)  
}
</script>
</head>
<body onLoad="positionieren();">
<div id="DIV1" style="position:absolute; height:200px; width:200px; z-index:2; background:#000000"></div>


<div id="DIV2" style="position:absolute; height:300px; width:300px; z-index:1; background:#CCCCCC"></div>


</body>
</html>

Alles anzeigen

funzt auf jeden fall im IE6 und im FF2.0...
musste halt nur noch angeben in welcher höhe die DIV sein sollen, hab dafür grad nix angegeben. sollte das imIE7 klappen (oder auch nicht) schreib es kurz hier rein!

Dragooni

Zitat von sejuma

Probier's mal so:

Code

#title{ 
margin-top: 
  10px; 
width: 
  1000px; 
height: 
  30px; 
background-color: 
  red;    
}

geht leider nicht, es machen einfach alle den abstand zum oberen rand.

auch wenn ich z-index noch anhänge, geht immer noch ned (beide browser)

Code

z-index:
  2

wenn ichs dann aber absolut ausrichte, gehts wenigstens unter firefox.
Aber IE ned,

synaptic
Danke, das ist schon eine lösung, aber ich möchte es wenn es geht ohne scripts lösen, muss doch auch irgendwie gehen
(haben ja ned alle Java aktiviert, zB mit NoScript von FF)
aber es wäre sicher eine notlösung

Kann mir einer sagen, wie ich die div's absolut ausrichten kann, aber trotzdem zentrieren?
Ich dachte habe mal was von nem koordinationssystem gehört, also nach x- und y- achse ausrichten also dass ich dann irgendwie den x-wert 0 mitgeben könnte um es zu zentrieren.
Weiss einer obs das wirklich gibt, oder ob ich mich da mal verhört habe
danke

synaptic

joa, das mit dem nicht aktivierten Scripten hab ich auch schon gehört... nur find ich des doof^^ wofür gibbet denn sowas wie ne scriptsprache?
problem wird sein, daß man ja beim bauen einer website nicht nur auf kompatibilität der verschiedenen browser achten muss, sondern auch auf verschiedene auflösungen.
Ich weiß also nicht, ob du komplett scriptfrei arbeiten kannst, wüsste so also auch nicht wirklich, wie man dir helfen könnte.
von dem koordinatensystem hab ich noch nichts gehört/gelesen.
ps: JAVA ist NICHT JavaScript

edit: hab grad mal nach koordinations bzw koordinatensystem gegoogled, aber nicht wirklich was brauchbares gefunden.

sejuma

Dragooni:
Wenn du keinen oberen Abstand haben willst, dann müsste so gehen:

Code

#title{
width:
  1000px;
height:
  30px;
background-color:
  red;
}

Muss der title unbedingt "über" den anderen liegen? Wäre doch einfacher, die Höhe der anderen zu kürzen.

Dragooni

einfacher schon, aber ned schöner
das rote div soll eben halbtransparent werden, sprich ich lege ein png drüber und entferne die rote hintergrundfarbe

nur muss ich das ding drüber kriegen im IE xD

Dragooni

Yeah, ich habs teilweise geschafft
Habe einfach noch ein div um das logo und denn banner und den roten streifen gelegt, dann die drei "absolute" im div ausgerichtet!

Jetzt siehts fast perfekt aus, ich hebe nur noch -jetzt im FireFox- einen streifen, welcher einfach da ist und den ich noch wegbringen muss

Also muss man einfach nochmal ein div legen, und die anderen divs drinnen absolute platzieren und es klappt

Habe ich freude *gg*

//edit:
och, habe den rest des css wieder aus dem kommentar genommen, im FF siehts jetzt geil aus, dafür im IW wieder kacke xD
hp-header rechts neben der navigation xD
och menno

Nemesis

Hey Dragooni,

ich hatte letztens ein ähnliches problem, ich habe es dadurch gelöst das ich die einzelnen Div's mir prozentangaben in der CSS positioniert habe.

Z.B.:

Code

.text {
position: absolute;
left: 35%;
width: 500px;
height: 500px;
top: 143px;
padding-right: 10px;
text-align: center;
overflow: auto;
}

Die Pixelanzahl "Top" gibt dann den Abstand zum oberen Bildrand an, wenn du damit ein wenig spielst, solltest du eigentlich keine Probleme mehr haben.

Und mit "left" steuerst du den Abstand zum linken Bildrand. Damit ist eigentlich eine nahezu perfekte ausrichtung der Div's garantiert. Und valide ist es noch dazu

Gruß Nemesis.

Dragooni

jo, aber mit left "zerstöre" ich die zentrierte ausrichtung
habe wie kurz angedeutet ein neues div um de vorherigen geschlossen und diese dort mit margin-left etc und dem befehl "position: absolute" diese im neuen div ausgerichtet und das hat dann prima geklappt

Aber deine Idee muss auch gehen, aber eben nur, wenn man den inhalt der seite nicht zentriert hat

Aber danke an dich und alle, welche mit geholfen haben
Wirklich immer wieder geiles Forum hier

(PS die kleinen fehler die ich mit dem letzten post angesprochen habe, sind nun auch weg *freu*)

Tags