mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mi 10.08.2022 04:24 Benutzername: Passwort: Auto-Login

Thema: Div Layer verschieben sich bei float:left vom 23.07.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Div Layer verschieben sich bei float:left
Seite: 1, 2  Weiter
Autor Nachricht
-gurugurke-
Threadersteller

Dabei seit: 07.04.2005
Ort: Berlin
Alter: 37
Geschlecht: Weiblich
Verfasst Do 23.07.2009 15:46
Titel

Div Layer verschieben sich bei float:left

Antworten mit Zitat Zum Seitenanfang

Ich brauche mal wieder eure Hilfe Lächel
Ich lese also Tabellen sind out und versuch mich in css einzufuchsen, da viele Vorzüge nun einfach nicht mehr zu ignorieren sind.

Mein Problem ist nun:
im Browser auf normaler Größe sieht alles super aus, aber wenn ich die GRöße des Browserfensters ändere verschieben sich die Layer selbstverständlich nach unten.
Wie vermeidet man das?
Position absolute relative auf das div#all setzen?


Vielen lieben Dank im Voraus.







stylesheet
*************************** */
body {
background-color: #333;
font-family: Georgia, "Palatino Linotype", Palatino, serif;
font-size: 15px;
font-color:white;
line-height: 1.5em;
}


<div#all {

positon:absolute;
margin-left: 130px ;
width:900px;

}



div#header {
margin-top:20px;
margin-left: 130px ;
background-color:#000000;
width:900px;
height:170px;


}

div#navi {

background-color:#000000;
width:900px;
height:30px;
margin-left:130px;


}

div#leftcol {

margin-top:5px;
margin-left: 130px ;
background-color:#000000;
width:300px;
height:230px;
float:left;


}

div#content {
margin-left:5px;
margin-top:5px;
background-color:#000000;
width:595px;
height:230px;
float:left;


}

div#footer {


margin-left: 130px ;
width:900px;



}

------------------------

HTML FILE


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>haknam</title>
<link rel="stylesheet" href="style.css" />
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('prevroll.jpg','nextroll.jpg')">

<div id="all"><div id="header">
<img src="img/header3.gif" width="900" height="100" /></div>
<div id=navi><a href="rel01.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('prev','','img/prevroll.jpg',1)">
<img src="img/prev.jpg" name="prev" border="0" id="prev" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('next','','img/nextroll.jpg',1)"></a><a href="rel02.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('next','','img/nextroll.jpg',1)"><img src="img/next.jpg" name="next" width="115" height="25"border="0" id="next" /></a></div>
<div id="leftcol"><center>
<br />
<img src="img/testbildcover.jpg"/>
</center></div>
<div id="content"></div>
<div id="leftcol"></div>
<div id="content"></div>

<div id="footer"><img src="img/footer.jpg" /></div>
</div>
</body>
</html>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 57
Geschlecht: Männlich
Verfasst Do 23.07.2009 16:02
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
<div#all {

positon:absolute;
margin-left: 130px ;
width:900px;

}

steht so in deinem css?
  View user's profile Private Nachricht senden
Anzeige
Anzeige
-gurugurke-
Threadersteller

Dabei seit: 07.04.2005
Ort: Berlin
Alter: 37
Geschlecht: Weiblich
Verfasst Do 23.07.2009 16:10
Titel

Antworten mit Zitat Zum Seitenanfang

stand vorher nicht, hab ich in meiner verzweiflung zwischengeworfen *ha ha*
das ändert natürlich nichts.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 57
Geschlecht: Männlich
Verfasst Do 23.07.2009 16:33
Titel

Antworten mit Zitat Zum Seitenanfang

scherzkeks

du hast auch
Code:
<div id="leftcol">

2x in deinem code - ids können nur einmal vergeben werden

und
Code:
<div id=navi>

gehört
Code:
<div id="navi">


Zuletzt bearbeitet von l3mon am Do 23.07.2009 16:37, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden
nel

Dabei seit: 18.09.2004
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Do 23.07.2009 16:46
Titel

Antworten mit Zitat Zum Seitenanfang

l3mon hat geschrieben:
scherzkeks

du hast auch
Code:
<div id="leftcol">

2x in deinem code - ids können nur einmal vergeben werden

und
Code:
<div id=navi>

gehört
Code:
<div id="navi">


die sachen sind zwar nicht valide, aber ein moderner browser wird es trotzdem richtig anziegen, also das auf jeden fall ändern - wird sein problem aber nicht lösen

das die floatenden divs umbrechen, wenn das äußere element(dein browser) kleiner wird als der inhalt, ist ja logisch - deshalb musst du einfach dem äußeren element noch eine feste breite geben

also einen wrapper oder ein umschließendes div, um die floatenden (und die dadrinnen müssen natürlich alle auch da reinpassen, also in deinem fall die 900pixel inklusive margin/padding nicht überschreiten)


Zuletzt bearbeitet von nel am Do 23.07.2009 16:48, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 23.07.2009 16:59
Titel

Antworten mit Zitat Zum Seitenanfang

Sleeper hat geschrieben:
also einen wrapper oder ein umschließendes div, um die floatenden (und die dadrinnen müssen natürlich alle auch da reinpassen, also in deinem fall die 900pixel inklusive margin/padding nicht überschreiten)


Richtig. Zum Beispiel:

Code:
body {
   width: n px;
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 57
Geschlecht: Männlich
Verfasst Do 23.07.2009 17:05
Titel

Antworten mit Zitat Zum Seitenanfang

äh... lest ihr nen anderen code?
Code:
div#all {

positon:absolute;
margin-left: 130px ;
width:900px;

}

das einzige, was fehlt ist die höhe * Keine Ahnung... *
  View user's profile Private Nachricht senden
nel

Dabei seit: 18.09.2004
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Do 23.07.2009 17:12
Titel

Antworten mit Zitat Zum Seitenanfang

l3mon hat geschrieben:
äh... lest ihr nen anderen code?
Code:
div#all {

positon:absolute;
margin-left: 130px ;
width:900px;

}

das einzige, was fehlt ist die höhe * Keine Ahnung... *


er hat doch gesagt das er das nur so schnell reingeschrieben hat

das div#all ist pflicht, muss drum, hat er gut gmeacht - allerdings is es halt 900pixel breit

ein inneres element z.b. hat 900px breite PLUS 130pixel margin nach links,

das meinte ich mit "gucken, das alles rein passt"



naja, hier halt der code - ich hoffe er versteht das problem trotdem von alleine


Code:
body {
background-color: #333;
font-family: Georgia, "Palatino Linotype", Palatino, serif;
font-size: 15px;
font-color:#ffffff;
line-height: 1.5em;
}

div#all{
   width:900px;
   margin: 0px auto;
}
div#header {
margin-top:20px;
background-color:#000000;
height:170px;
}

div#navi {
background-color:#000000;
width:900px;
height:30px;
}

div#leftcol {
margin-top:5px;
background-color:#000000;
width:300px;
height:230px;
float:left;
}

div#content {
margin-left:5px;
margin-top:5px;
background-color:#000000;
width:595px;
height:230px;
float:left;
}



html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>haknam</title>
<link rel="stylesheet" href="style.css" />
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('prevroll.jpg','nextroll.jpg')">

<div id="all"><div id="header">
<img src="img/header3.gif" width="900" height="100" /></div>
<div id=navi><a href="rel01.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('prev','','img/prevroll.jpg',1)">
<img src="img/prev.jpg" name="prev" border="0" id="prev" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('next','','img/nextroll.jpg',1)"></a><a href="rel02.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('next','','img/nextroll.jpg',1)"><img src="img/next.jpg" name="next" width="115" height="25"border="0" id="next" /></a></div>
<div id="leftcol"><center>
<br />
<img src="img/testbildcover.jpg"/>
</center></div>
<div id="content"></div>
<div id="leftcol"></div>
<div id="content"></div>

<div id="footer"><img src="img/footer.jpg" /></div>
</div>
</body>
</html>


Zuletzt bearbeitet von nel am Do 23.07.2009 17:14, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen Div Float Left Problem
Listenaufzählungszeichen verschwinden bei float:left
[Float: Left] Fetter Fehler
5 divboxen mit float left nebeneinander?
float:left höhe anpassen
Hilfe: div float / width:100% - CSS float Box Model
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.