PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : variable Divs?

robbitop
2005-03-03, 09:45:18
Da ich gerade an einer div basierten Homepage arbeite, stoße ich auch oft auf Probleme. Mit dem Befehl margin kann ich den Abstand des jeweiligen Div-frames zum Seitenrand des Browsers festlegen. Ich bräuchte für einige Sachen aber noch einen Befehl/eine Möglichkeit die Position meines Divs durch den Abstand zum nächstliegenden Div zu bestimmen und nicht durch den Rand meines Browsers.
Dies käme bsw bei einem div zum einsatz, das je nach inhalt wächst. Die darunterliegenden Divs sollen dann natürlich um einen festen Abstand nach unten rutschen. Anders gehts nicht.

Ich hoffe, ihr könnt mir helfen.

Danke!
astanoth
2005-03-03, 10:51:58
Poste mal eine URL mit einem Beispiel.
Du kannst z.B. beide <div>s in ein weiteres verschachteln und dann dürfte sich das automatisch anpassen.
Der Befehl margin bezieht sich nicht auf den Browserrand, sondern auf die "Hülle", den Außenabstand, eines Objektes.
Am Beispiel kann man aber besser sagen, was du ändern musst ;)
robbitop
2005-03-03, 11:35:29
<html>
<head>
<style type="text/css">
h1 {color:#5B5B5B; font-size:10px; font-family:times new roman;}
h3 {color:black; font-size:11px; font-family:times new roman; font-style:italic;}

/*div {border:1px solid white;}*/
body{<!--/*background-color:#003333;*/--> font-family:arial; font-size:12px; color:#5B5B5B;}

#logo {position:absolute;
margin:10px;
height:87px;
width:145px;
background-image: url(logo.gif);
background-color:orange;
}

div#titel {

position:absolute;
float:left;
width:145px;
height:25px;
background-color:#F5F5F5;
}

#navi
{ position:absolute;

margin-top:25px;
height:130px;
width:145px;
border:1px solid #989898;
background-color:white;

}


#naviglobal {
position:absolute;
margin-top:140px;
margin-left:10px;
float:left;

height:155px;
width:145px;

background-color:#aaaaaa;
}

#searchglobal {
position:absolute;
margin-top:320px;
margin-left:10px;
float:left;
height:115px;
width:145px;
background-color:#aaaaaa;

}
#search {

position:absolute;
margin-top:25px;
float:left;
height:90px;
width:145px;
background-color:white;
border:1px solid #989898;

}

#globaltwo
{ position:absolute;
margin-top:470px;
margin-left:10px;
float:left;
top:145px,
left:20px;
height:145px;
width:140px;

background-color:#aaaaaa;
}


#globalbanner
{position:absolute;
margin-top:25px;
margin-left:170px;
float:right;
height:800px;
width:800px;

border:1px solid #989898;
background-color:white;
}




#stammdaten {position:absolute;
margin-left:175px;
margin-top:5px;
background-color:white;
width:100;
height:20;
z-index:3;
border-top:1px solid #FFAC11;
border-left:1px solid #FFAC11;
border-right:1px solid #FFAC11;
}

#kommunikation {position:absolute;
margin-left: 280px;
margin-top:5px;
background-color:white;
width:100;
height:20;
border:1px solid #989898;
}

#verwaltung {position:absolute;
margin-left:385px;
margin-top:5px;
background-color:white;
width:100;
height:20;
border:1px solid #989898;

}

#auswertung {position:absolute;
margin-left:490px;
margin-top:5px;
background-color:white;
width:100;
height:20;
border:1px solid #989898;
}

#berichte {position:absolute;
margin-left:595px;
margin-top:5px;
background-color:white;
width:100;
height:20;
border:1px solid #989898;
}

#administration {position:absolute;
margin-left:700px;
margin-top:5px;
background-color:white;
width:100;
height:20;
border:1px solid #989898;
}

#hilfe {position:absolute;
margin-left:805px;
margin-top:5px;
background-color: white;
width:50;
height:20;
border:1px solid #989898;
}


#mega {
position: absolute;
border:1px solid #989898;
padding:5px;
float:left;
width:990px;
height:900px;
background-color:#F5F5F5;
}
#sbutton {position:absolute;
margin-top:20px;
margin-left:40px;
}

ul { line-height: 1.5em; list-style-type: square; list-style-image:
url(tmp/bullet.gif); margin: 0.3em 0 0 1.5em; padding: 0 }


a.menulink:link{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000; text-decoration:none;
font-size:8pt;
}
a.menulink:visited{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#493AA3; text-decoration:none;
font-size:8pt;

}
a.menulink:hover{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#0000FF;TEXT-DECORATION: underline;
font-size:8pt;

}
a.menulink:active{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000; text-decoration:none;
font-size:8pt;
background-color:#FFFF00;
}


</style>

</head>
<body>

<div id="mega">
<div id="logo">

<div id="naviglobal">
<div id="titel">
<p>&nbsp;&nbsp;Navigation</p>
</div>
<div id="navi">
<p><ul>
<a class="menulink" href="#"><li>Pachten</a></li>
<a class="menulink" href="#"><li>Erlöse</a></li>
<a class="menulink" href="#"><li>ToDo Liste</a></li>
<a class="menulink" href="#"><li>Statuscodes</a></li>
<a class="menulink" href="#"><li>Maschinenlogbuch</a></li>
<a class="menulink" href="#"><li>Logalarmierung</a></li>
</ul></p>
</div>
</div>
<div id="searchglobal">
<div id="titel">
<p>&nbsp;&nbsp;Suche</p>
</div>
<div id="search"><br><span>&nbsp;Suche:
</span><input name="search" size="10" id="filter" type="text">

<div colspan="2" align="center" id="sbutton"><input type="button" value="suche" onclick="search()"></div>
</div>
</div>
<div id="globaltwo">
<div id="titel">
<p>&nbsp;&nbsp;Adresse</p>
</div>
<div id="navi"><br>
&nbsp;&nbsp;softEnergy GmbH<br>
&nbsp;&nbsp;Platz der Freundschaft 1<br>
&nbsp;&nbsp;18059 Rostock<br>
<br>
&nbsp;&nbsp;fon 0381 40587535<br>
&nbsp;&nbsp;fax 0381 40587555<br>
&nbsp;&nbsp;e-mail info@softenergy.de<br>
</div>
</div>
<div id="stammdaten">&nbsp;&nbsp;Stammdaten</div>
<div id="kommunikation">&nbsp;&nbsp;Kommunikation</div>
<div id="verwaltung">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Verwaltung</div>
<div id="auswertung">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Auswertung</div>
<div id="berichte">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Berichte</div>
<div id="administration">&nbsp;&nbsp;&nbsp;Administration</div>
<div id="hilfe">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hilfe</div>
<div id="globalbanner"><!--
<div id="navigation1">

</div>
<div id="navigation2">
<h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; home Impressum</h3>
</div>-->
</div>
</div>
</body>
</html>


Hier möchte ich nur eine Klasse für alle Divs oben (Stammdaten, Verwaltung, Hilfe usw). Momentan muss ich für jedes eine eigene ID festlegen und einen festen Abstand durch Probieren festlegen. Das ist ineffizient und unelegant.
Hier wäre ein Befehl: Positionierung durch Abstand vom vorherigen linken element: XYZ pixel gut.

Ein anderes Beispiel ist ein Div, welches mittels Javascript einen dynamischen Inhalt hat:


<html>

<head>
<title>Baumtest</title>

<link rel="StyleSheet" href="dtree.css" type="text/css" />
<link rel="StyleSheet" href="styles.css" type="text/css" />
<SCRIPT src="dom-drag.js" type=text/javascript></SCRIPT>
<script type="text/javascript" src="dtree.js"></script>


<STYLE type=text/css>
#treeroot {
position:absolute;
width:150px;
height:250px;
background:#ffffff;
border:1px solid #333;
}

#treehandle {
width:150px;
height:28px;
color:black;
background: url(img/cell2.gif);
font-family:verdana, sans-serif;
font-size:12px;
text-align:center;
vertical-align:bottom;
font-weight:bold;

}
</STYLE>
</head>

<body style="background:#9f9f9f;">



<div id="treeroot" class="dtree">
<div id="treehandle" valign="middle">
<table width="100%" height="100%"><tr><td valign="middle">WEA-Menü</td></tr></table>
</div>
&nbsp;
<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'Wea Auswahl','');
d.add(1,0,'Testpark 1','','','','img/park_green.gif',"img/park_green.gif",'');
d.add(2,0,'Testpark 2','','','',"img/park_red.gif","img/park_red.gif");
d.add(3,1,'WEA 1',"javascript:alert('Aktionsmenue');",'','',"img/menu_green.gif");
d.add(4,1,'WEA 2',"javascript:alert('Aktionsmenue');",'','',"img/menu_green.gif");
d.add(5,2,'WEA 12',"javascript:alert('Aktionsmenue');",'','',"img/menu_green.gif");
d.add(6,2,'WEA 13',"javascript:alert('Aktionsmenue');",'','',"img/menu_red.gif");
d.add(7,2,'WEA 14',"javascript:alert('Aktionsmenue');",'','',"img/menu_yellow.gif");



document.write(d);

//-->
</script>

</div>

<script language="javascript">
var theHandle = document.getElementById("treehandle");
var theRoot = document.getElementById("treeroot");
Drag.init(theHandle, theRoot);
</script>

</body>

</html>


CSS und java dateien sind natürlich extern. (dies wird in den ersten code eingefügt)
Hier möchte ich, dass wenn das div "wächst" die nachfolgenden Divs nach unten verschoben werden.Dazu wäre auch hier ein befehl abstand zum vorherigen Div : xyz pixel die Lösung.

Nur wie?
astanoth
2005-03-03, 12:12:29
Ich hatte dir _diese_ Antwort schon einmal gegeben. Naja, ich versuche es noch einmal ;)
1. Ein korrektes Beispiel für eine horizontale Navigation: http://astanoth.as.funpic.de/index.php
2. Den Dateikarteneffekt sollte man am besten mittels PHP lösen.
robbitop
2005-03-03, 12:31:18
Ich hatte dir _diese_ Antwort schon einmal gegeben. Naja, ich versuche es noch einmal ;)
1. Ein korrektes Beispiel für eine horizontale Navigation: http://astanoth.as.funpic.de/index.php
2. Den Dateikarteneffekt sollte man am besten mittels PHP lösen.


geht das nicht auch ohne PHP? Denn von PHP habe ich keinen Schimmer :-(
MadMan2k
2005-03-03, 13:53:36
ja (http://httpd.apache.org/docs-2.0/howto/ssi.html#additionalexamples)
robbitop
2005-03-03, 14:06:30
ja (http://httpd.apache.org/docs-2.0/howto/ssi.html#additionalexamples)

hm, da steht was von footern...??
MadMan2k
2005-03-03, 15:47:41
hm, da steht was von footern...??
das wichtige ist der Teil mit dem include.
Dieser Befehl bindet die angegebene Datei an der Stelle ein.
Damit funktioniert astanoths Beispiel und Karteikarten lassen sich damit auch einfacher realisieren.

Wenn auf deinem Webspace allerdings PHP läuft, würde ich dieses nehmen, da du dort weniger konfigurieren musst.
Dazu einfach folgenden Befehl nehmen:

<?php include "deinpfad/deinedatei" ?>
robbitop
2005-03-03, 15:53:06
hm ich wollte es eigentlich komplett statisch mit reinem HTML machen (js und css)
MadMan2k
2005-03-03, 16:06:39
hm ich wollte es eigentlich komplett statisch mit reinem HTML machen (js und css)
js ist nicht statisch ;) es ist genauso eine scriptsprache wie PHP - bloß clientseitig.
Daher auch von den Einstellungen des Benutzers abhängig, was auf PHP nicht zutrifft und wesewegen man es dann auch so weit es geht stattdessen verwenden sollte.
Misda
2005-03-03, 17:37:55
Hier mal ein Lösungsansatz, die HTML sollte valide sein, CSS hab ich nicht getestet.

Bei Fragen, fragen :-)

Gruß,
Kai


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>robbitop</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="site">
<div id="logo">

</div>
<div id="navigation-left">
<div id="navigation-left_titel">
<p>Navigation</p>
</div>
<div id="navigation-left_content">
<ul>
<li><a class="menulink" href="#">Pachten</a></li>
<li><a class="menulink" href="#">Erlöse</a></li>
<li><a class="menulink" href="#">ToDo Liste</a></li>
<li><a class="menulink" href="#">Statuscodes</a></li>
<li><a class="menulink" href="#">Maschinenlogbuch</a></li>
<li><a class="menulink" href="#">Logalarmierung</a></li>
</ul>
</div>
</div>
<div id="searchglobal">
<div id="searchglobal_titel">
<p>Suche</p>
</div>
<div id="searchglobal_content">
<div>
Suche:
<input name="search" size="10" id="filter" type="text">
<div style="text-align:center" id="sbutton">
<input type="button" value="suche" onclick="search()">
</div>
</div>
</div>
</div>
<div id="impressum">
<div id="impressum_titel">
<p>Adresse</p>
</div>
<div id="impressum_content">
softEnergy GmbH<br>
Platz der Freundschaft 1<br>
18059 Rostock<br>
<br>
fon 0381 40587535<br>
fax 0381 40587555<br>
e-mail info@softenergy.de<br>
</div>
</div>
<div id="topmenu">
<ul>
<li class="active">Stammdaten</li>
<li class="notactive">Verwaltung</li>
<li class="notactive">Auswertung</li>
<li class="notactive">Berichte</li>
<li class="notactive">Administration</li>
<li class="notactive">Hilfe</li>
</ul>
</div>
<div id="main-content">
<!-- <div id="navigation1">
</div>
<div id="navigation2">
<h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; home Impressum</h3>
</div>-->
</div>
</div>
</body>
</html>



body {
font-family: arial;
font-size: 12px;
color: #5B5B5B;
}
h1 {
color:#5B5B5B;
font-size:10px;
font-family:times new roman;
}
h3 {
color:black;
font-size:11px;
font-family:times new roman;
font-style:italic;
}
#site {
position: absolute;
border: 1px solid #989898;
padding: 5px;
width: 990px;
height: 900px;
background-color: #F5F5F5;
}
#logo{
position:absolute;
top: 15px;
left: 15px;
height:87px;
width:145px;
background-image: url(logo.gif);
background-color: orange;
}
#navigation-left {
margin: 0px;
padding: 0px;
position:absolute;
top: 140px;
left: 15px;
height: auto;
width: 145px;
}
#navigation-left_titel {
margin: 0px;
padding: 0px;
position:relative;
width: 145px;
height: auto;
background-color: #F5F5F5;
}
#navigation-left_content {
margin: 0px;
padding: 0px;
position:relative;
height: 130px;
width: 145px;
border: 1px solid #989898;
background-color: white;
}
#searchglobal {
margin: 0px;
padding: 0px;
position:absolute;
top: 340px;
left: 15px;
height: auto;
width: 145px;
}
#searchglobal_titel {
margin: 0px;
padding: 0px;
position:relative;
width: 145px;
height: auto;
background-color: #F5F5F5;
}
#searchglobal_content {
margin: 0px;
position: relative;
height: 90px;
width: 145px;
background-color: white;
border: 1px solid #989898;
padding-top: 10px;
}
#impressum {
margin: 0px;
padding: 0px;
position: absolute;
top: 500px;
left: 15px;
height: auto;
width: 140px;
}
#impressum_titel {
margin: 0px;
padding: 0px;
position: relative;
height: auto;
width: 145px;
background-color: #F5F5F5;
}
#impressum_content {
margin: 0px;
position: relative;
height: auto;
width: 145px;
background-color: white;
border: 1px solid #989898;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 4px;
}
#topmenu {
position:absolute;
top: 20px;
left: 185px;
width: auto;
height: 20px;
white-space: nowrap;
}
#topmenu ul {
margin: 0px;
padding: 0px;
}
#topmenu li.active {
display: inline;
padding: 4px;
margin-left: 6px;
margin-right: 6px;
border-top: 1px solid #FFAC11;
border-left: 1px solid #FFAC11;
border-right: 1px solid #FFAC11;
background-color: white;
}
#topmenu li.notactive {
display: inline;
width: 100px;
padding: 4px;
margin-left: 6px;
margin-right: 6px;
border-top: 1px solid #989898;
border-left: 1px solid #989898;
border-right: 1px solid #989898;
background-color: white;
}
#main-content {
position: absolute;
top: 40px;
left: 180px;
height: 800px;
width: 790px;
border: 1px solid #989898;
background-color: white;
}

#sbutton {
position:absolute;
margin-top:20px;
margin-left:40px;
}
ul {
line-height: 1.5em;
list-style-type: square;
list-style-image: url(tmp/bullet.gif);
margin: 0.3em 0 0 1.5em;
padding: 0;
}

a.menulink:link {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
text-decoration:none;
font-size:8pt;
}
a.menulink:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#493AA3;
text-decoration:none;
font-size:8pt;
}
a.menulink:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#0000FF;
text-decoration: underline;
font-size:8pt;
}
a.menulink:active {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
text-decoration:none;
font-size:8pt;
background-color:#FFFF00;
}
Misda
2005-03-03, 20:20:11
Hab allerdings noch ein paar Änderungen an deinem Code gemacht, da der Stil ein wenig verwirrend war :)

Achja, natürlich kann man das ganze noch ausbauen, da ein paar Sachen immer noch Abhängig von Pixeln ist, aber das kannst ja du dann noch anpassen ;)
robbitop
2005-03-03, 20:48:47
dankeschön!!
ich probiers morgen auf Arbeit mal aus :up: