 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
-gurugurke-
Threadersteller
Dabei seit: 07.04.2005
Ort: Berlin
Alter: 39
Geschlecht: 
|
Verfasst Do 23.07.2009 15:46
Titel Div Layer verschieben sich bei float:left |
  |
|
Ich brauche mal wieder eure Hilfe 
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>
|
|
| |
   |
 |
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 59
Geschlecht: 
|
Verfasst Do 23.07.2009 16:02
Titel
|
|
|
| Code: | <div#all {
positon:absolute;
margin-left: 130px ;
width:900px;
} |
steht so in deinem css?
|
|
| |
|
|
|
Anzeige
|
|
|
-gurugurke-
Threadersteller
Dabei seit: 07.04.2005
Ort: Berlin
Alter: 39
Geschlecht:
|
Verfasst Do 23.07.2009 16:10
Titel
|
|
|
stand vorher nicht, hab ich in meiner verzweiflung zwischengeworfen 
das ändert natürlich nichts.
|
|
| |
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 59
Geschlecht:
|
Verfasst Do 23.07.2009 16:33
Titel
|
|
|
scherzkeks
du hast auch
2x in deinem code - ids können nur einmal vergeben werden
und
gehört
Zuletzt bearbeitet von l3mon am Do 23.07.2009 16:37, insgesamt 3-mal bearbeitet
|
|
| |
|
|
nel
Dabei seit: 18.09.2004
Ort: Köln
Alter: -
Geschlecht:
|
Verfasst Do 23.07.2009 16:46
Titel
|
|
|
| l3mon hat geschrieben: | scherzkeks
du hast auch
2x in deinem code - ids können nur einmal vergeben werden
und
gehört
|
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
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 23.07.2009 16:59
Titel
|
|
|
| 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;
} |
|
|
| |
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 59
Geschlecht:
|
Verfasst Do 23.07.2009 17:05
Titel
|
|
|
äh... lest ihr nen anderen code?
| Code: | div#all {
positon:absolute;
margin-left: 130px ;
width:900px;
} |
das einzige, was fehlt ist die höhe 
|
|
| |
|
|
nel
Dabei seit: 18.09.2004
Ort: Köln
Alter: -
Geschlecht:
|
Verfasst Do 23.07.2009 17:12
Titel
|
|
|
| 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 |
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
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Div Float Left Problem
Listenaufzählungszeichen verschwinden bei float:left
Probleme CSS IE overflow und float:left
[Float: Left] Fetter Fehler
Frage zu float & clear:left
float:left höhe anpassen
|
|
|
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.
|
|
