div container

se1811 · 24.08.2004, 12:40

habe ein kleines problem! der kleine container links unten soll immer an ieser unteren ecke hängen, wie kann ich das anstellen! denn wenn der inhalt des "main divs" größer wird hängt der kleine dann mittendrin! please help me

HotSpot · 24.08.2004, 12:43

Einfach nach der Tabelle schreiben, dass steht er auch untetn. Verstehe das Problem nicht ganz?

Irgendwie fehlt auf der ganzen seite die Struktur? :-/

se1811 · 24.08.2004, 12:45

da is ja ein formular ne, das is der main div! und wenn da der inhalt länger wird wird ja auch der div länger, ne?

somit würde der kleine div mitten im main div hängen! meine frage ist halt wie ich den kleinen div an der unteren ecke des main divs festnageln kann!

so besser?

paul123 · 24.08.2004, 12:51

Hallo se1811. Kuck mal hier hat terry das mit der Positionierung gut beschrieben: http://home.arcor.de/terrikay/tutori...ionierung.html Ansonsten ist vielleicht etwas code ganz gut.

se1811 · 24.08.2004, 12:54

das hilft mir leider nicht! mein problem is ein anderes! hier ist der code:

Code:

<?php
	if (!$value)
		$value="home";
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>

<script language="JavaScript" 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>
<script language="Javascript" src="contact/validation.js"></script>
</head>

<body bgcolor="#FF6600" onLoad="MM_preloadImages('images/button_home_o.gif','images/button_pics_o.gif','images/button_info_o.gif','images/button_trash_o.gif','images/button_contact_o.gif','images/button_links_o.gif')">

<div id="navigation" style="position:absolute; top:50px; width:650px; height:45px; background-color:#999999; border:2px solid #666666;">
	
<table width="450" height="45" border="0" cellspacing="10">
  <tr valign="middle">
    <td><a href="main.php?value=home" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','images/button_home_o.gif',1)"><img src="images/button_home_n.gif" name="home" width="80" height="25" border="0"></a></td>
    <td><a href="main.php?value=info" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('info','','images/button_info_o.gif',1)"><img src="images/button_info_n.gif" name="info" width="80" height="25" border="0"></a></td>
    <td><a href="main.php?value=pics" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('pics','','images/button_pics_o.gif',1)"><img src="images/button_pics_n.gif" name="pics" width="80" height="25" border="0"></a></td>
	<td><a href="main.php?value=links" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('links','','images/button_links_o.gif',1)"><img src="images/button_links_n.gif" name="links" width="80" height="25" border="0"></a></td>
    <td><a href="main.php?value=trash" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('trash','','images/button_trash_o.gif',1)"><img src="images/button_trash_n.gif" name="trash" width="80" height="25" border="0"></a></td>
    <td><a href="main.php?value=contact" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','images/button_contact_o.gif',1)"><img src="images/button_contact_n.gif" name="contact" width="80" height="25" border="0"></a></td>
  </tr>
</table>
</div>


<div id="bilder" style="position:absolute; left:570px; top:0px; width:210px; height:200px; background-color:#999999; border:2px solid #666666; z-index: 100;">

</div>


<div id="newsticker" style="position:absolute; left:20px; top:111px; width:514px; height:25px; background-color:#999999; border:2px solid #666666;">

<center>

</center>

</div>


<div id="main" style="position:absolute; left:8px; top:152px; width:722px; height:400px; background-color:#999999; border:2px solid #666666;">
<table width="100%" height="100%" border="1">
  <tr height="20">
    <td height="48"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td width="20"></td>
    <td valign="middle" align="center">
<!-- INHALT Anfang-->

<?php include ($value.".php");?>

<!-- INHALT Ende-->	
	<div align="center"></div></td>
    <td width="20"></td>
  </tr>
  <tr>
    <td height="16"></td>
    <td></td>
    <td></td>
  </tr>
</table>
</div>

<div id="newsticker" style="position:absolute; left:0px; top:535px; width:150px; height:25px; background-color:#999999; border:2px solid #666666;">

</div>

</body>
</html>

paul123 · 24.08.2004, 13:00

ich habs nur mal überflogen, weil leider keine Zeit. Aber wie Hotspot sagt, wird da wohl eher eine Tabellenzelle sinnvoll sein. Denn ein pos. div bleibt wo er ist...

steff11 · 24.08.2004, 14:17

Hi se,
grundsätzlich wär zu hinterfragen, ob Du weiter Tabellen- und css-Positionierung im Mix verwenden willst. Soweit ich das überblicke, ist dein ganzes Layout gut allein mit css-Containern zu machen. Mag aber auch die Grundsatzdebatte aufwärmen. Tabellen sind ja auch ok, aber für Dich wärs evtl übersichtlicher.

Zum eigentlichen Problem: Du hast ja alle divs soweit ich seh mit "position:absolute; toP...;left:..." Da darf dann eigentlich nix anderes bei passieren als das was Du schilderst. Probier doch mal "position:relative (oder doch absolute??); bottom: ...;left:...; float:left;" für die Positionierung deiner Box.

Stefan

Terry · 24.08.2004, 14:37

In vernünftigen Browsern könntest Du die Box mit position:fixed; left:...px; bottom:...px; dorhin bekommen und die würde auch dort bleiben. Aber der IE rafft das halt nicht -> es gibt da verschiedene Tricks, um auch dem sowas ähnliches beizubringen, teils mit Javascript, teils auch nur mit CSS (bitte mal nach CSS frames googlen).

Aber: Dein Quelltext sieht recht chaotisch aus und ich habe das Gefühl, dass Du noch nicht so wirklich weißt, was Du da eigentlich tust. Und wenn Du da jetzt mit CSS-Frame-Tricks arbeitest, kommst Du vermutlich ganz in Teufels Küche, kämpfst dann mit abgeschnittenen Texten und einigen Browser-Bugs.

Daher auch mein Rat: mach es ordentlich mit Tabellen und verstehe erst einmal die.

Wenn Du mit CSS-Layout anfängst, dann mit einem einfacheren und klaren Design, und dann bitte konsequent und nicht die Mischform (und komm nicht mit der Ausrede, die Tabellen kämen von einem CMS und Du könntest da nix machen -> dann such ein besseres CMS oder schreib die echo-Ausgabe um.

se1811 · 24.08.2004, 16:23

ich hab doch nix gesagt! aber der raue (rau ist irgendwie das falsche wort, aber irgendwie werd ich gerade als doof abgestempelt)ton scheint bei derr katzen dame normal zu sein!

an dem text ist übrigens nix chaotisch!

paul123 · 24.08.2004, 16:38

Zitat:

aber der raue ton scheint bei derr katzen dame normal zu sein!

aber hallo. Entspann dich mal und wähle einen netteren Ton. Sei mal ehrlich zu dir selbst - jemand der dir kostenfrei hilft (und das auch meist noch von jetzt auf sofort) den sollte man nicht vergraulen. Denn, was würdest du sagen, wenn einer dem du hilfst mit deiner Meinung kommt. Du würdest ihn auch links liegen lassen.. Und das ist sicher nicht der Sinn eines (insbesondere dieses) Forums...

Das ist meine Meinung, zumal ich persönlich terrys Meinung sehr schätze und auch ihr Fachwissen (was mir leider auch vielfach fehlt

).

se1811 · 24.08.2004, 16:41

hab doch oben geschriebn das ich mit rau ein falsche wort gewählt hab! schrieben ist nicht gleich sagen und somit wir der tonfall leide rnicht weiter gegeben! würd halt gerne wissen wiso es chaotisch ist?!?!

Terry · 24.08.2004, 16:58

Zitat:

Zitat von se1811

! würd halt gerne wissen wiso es chaotisch ist?!?!

- Warum mischst Du Tabellen und CSS-Design überhaupt?
- Warum die Navigation als Tabelle statt als Liste?
- Warum alles absolut positioniert?
- Warum nur inline-styles statt Extra-Stylesheet?
- Deine Tabelle im div id="main":

HTML-Code:

<table width="100%" height="100%" border="1">
  <tr height="20">
    <td height="48"></td>

1. height-Angaben waren im table-tag noch nie erlaubt.
2. height-Angaben waren auch im tr-tag noch nie erlaubt (nur im td-tag)
3. Logik: was denn nun? 20 oder 48px? - soll der Browser sich was aussuchen......

.....soll ich weitermachen?
Machs einfach valide und vernünftig, egal ob mit Tabellen oder CSS-Positionierung.

se1811 · 24.08.2004, 17:02

achso klar, das is weil ich im dw die tabelle gezogen hab! die sache mit css mach ich noch nur so ging es flott! is ja nur ein entwurf!

aber danke

renkert.net · 25.08.2004, 14:48

@Terry

Du scheinst ja ein absoluter List-Navigation Fetischist zu sein...das ist ein Hype und einfach mal ne Idee, das ist weder Standard noch irgendwie zwingend...das macht man einfach weils grad Hip ist...oder siehst Du einen Vorteil zwischen einer Navigationsstruktur mit Hilfe von Listen oder einer Navigationsstruktur mit Hilfe von DIV´s ???

mindstorms · 25.08.2004, 16:48

Zitat:

Zitat von renkert.net

...oder siehst Du einen Vorteil zwischen einer Navigationsstruktur mit Hilfe von Listen oder einer Navigationsstruktur mit Hilfe von DIV´s ???

der vorteil ist es ist semantisch korrekt
das menü ist ja ein auflistung von links