Div-Positionierung

Commodore · 1 Oktober 2007

Hi,

Folgenden Effekt moechte ich erzielen:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/html1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>test</title>
<style type="text/css">
div{
  float: left;
  margin: 1px;
  padding: 5px;
}
.red{
  background-color: red;
  opacity: 0.5;
  width: 50px;
  text-align: center;
}
.green{
  background-color: green;
  opacity: 0.5;
}
</style>
</head>
<body onload="los()">
<div class="red">abc</div>
<div class="green">123</div><br style="clear:both;"/>
<div class="red">abcdef</div>
<div class="green">123</div>
</body>
</html>

(ich entschuldige mich fuer die Farben, soll nur alles deutlich zeigen ;ugl)

Mein Problem ist aber, dass die divs der klasse "red" alle gleichbreit sein sollen, ich jedoch keine feste Breite dafuer benutzen kann. Wenn der Text naemlich zu lang wird erkennt man garnichts:

Code:

<div class="red">abcdefghijklmno</div>

(in den obigen Code einfuegen).

Nun kann man das Problem so loesen:

Code:

<div style="background-color: red; padding: 10px;">abc</div>
<div style="background-color: red; padding: 10px;">abcdefghijklmnop</div>

Und die Gruenen divs dann durch float daneben setzen, aber da ist wieder ein Problem. Das ganze soll naemlich eine CSS-Navigation werden und die gruenen Boxen sollen zunaechst unsichtbar sein. Beim hovern sollen sie sichtbar werden, aber wenn ich mittels CSS darauf zugreifen will, dann muss die gruene Box entweder direkt nach oder in der entsprechenden roten sein. Dann habe ich aber wiederrum das Problem, dass ich die gruene Box irgendwie neben die rote Positionieren muss, ohne die Breite der roten zu kennen.

Wie kann ich das Problem loesen?

Falls meine Fragestellung zu verwirrend ist, dann einfach nachfragen ^^

ingoS · 1 Oktober 2007

Wenn du doch aber sowieso die Boxen so breit wie den breitesten Text in der Navigation haben willst, wieso weist du ihnen dann nicht einfach diese Breite zu (also die Breite, die selbst abcdefghijklmno "aushält")?

Commodore · 1 Oktober 2007

ingoS schrieb:
Wenn du doch aber sowieso die Boxen so breit wie den breitesten Text in der Navigation haben willst, wieso weist du ihnen dann nicht einfach diese Breite zu (also die Breite, die selbst abcdefghijklmno "aushält")?

Weil der Text dynamisch da reinkommen soll ;)

Und eine Loesung, bei der ich fuer jede einzelne Box ein hover machen muss find ich auch nicht optimal ;)

</apoclypse> · 1 Oktober 2007

ich hätte ne idee aber die klappt nur wenn die red-blöcke nicht auchnoch dynamisch hoch sein müssen

Commodore · 1 Oktober 2007

</apoclypse> schrieb:
ich hätte ne idee aber die klappt nur wenn die red-blöcke nicht auchnoch dynamisch hoch sein müssen

Also bisher haben die eine Hoehe von Texthoehe + 20px, aber das kann ich dann wohl auf 2.5 em oder so veraendern, ist also sozusagen statisch.

Poste mal deine Loesung, vllt. ist es ja das was ich suche ^^

</apoclypse> · 1 Oktober 2007

also du hast einen container "red".
der ist so hoch wie deine 2 redblöcke zusammen sein sollen

jetzt malst du mit einem grafikprogramm einen vertikalen streifen mit beispielsweise 5px mal 200px. diesen färbst du dann rot ein (möglichst gleichmäßig) und setzt einen weißen trennstreifen horizontal rein der dem abstand zwischen den beiden "red"-blöcken entspricht.

jetz setzt du in den container background-repeat:repeat-x und in der html datei kannst du in diesen container deine zwei redblöcke ohne farbe und hintergrund reinsetzen untereinander versteht sich
und sie sollten von der größe und der position auf den hintergrund passen.

Commodore · 1 Oktober 2007

</apoclypse> schrieb:
also du hast einen container "red" der is so hoch wie deine 2 redblöcke zusammen sein sollen

jetzt malst du mit einem grafikprogramm einenvertikalen streifen mit beispielsweise 5px mal 200px. diesen färbst du dann rot ein (möglichst gleichmäßig) und setzt einen weißen trennstreifen horizontal rein der dem abstand zwischen den beiden "red"-blöcken entspricht.

jetz setzt du in den container background-repeat:repeat-x und in der html datei kannst du in diesen container deine zwei redblöcke ohne farbe und hintergrund reinsetzen untereinander versteht sich
und sie sollten von der größe und der position auf den hintergrund passen.

Also sowas wie Faux Columns, nur in horizontaler Richtung?

Leider suche ich nicht nach sowas, der Text soll ja mittig sein und die gesamte Box "hoverbar".

Ausserdem hab ich ja kein Problem mit der Breite (siehe dritter Code), sondern mit der positionierung der gruenen Box ;)

</apoclypse> · 1 Oktober 2007

jo faux columns genau so hieß das

hmm sorry aber dein genaues vorhaben is dann wohl an mir vorbei gegangen.
aber ich denke es gibt eine halbwegs valide lösung

wenn es dir nicht zu viel mühe mach könntest du mir nochma erklären um was es geht

Commodore · 1 Oktober 2007

Sowas:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/html1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de" style="height:100%;">
<head>
<title>test</title>
<script type="text/javascript">
function rollout(obj){
    obj.firstChild.nextSibling.style.display = "block";
    obj.firstChild.nextSibling.nextSibling.nextSibling.style.display = "block";
    obj.style.borderWidth = "2px";
    obj.style.height = "38px";
    obj.style.borderRightWidth = "0px";
    obj.style.width = "105px";
    obj.style.fontWeight = "bold";
}
function rollin(obj){
    obj.firstChild.nextSibling.style.display = "none";
    obj.firstChild.nextSibling.nextSibling.nextSibling.style.display = "none";
    obj.style.borderWidth = "1px";
    obj.style.height = "40px";
    obj.style.width = "100px";
    obj.style.fontWeight = "normal";
}
</script>
<style type="text/css">
.menu{
  background-color: orange;
  height: 40px;
  width: 100px;
  text-align: center;
  vertical-align: middle;
  cursor: default;
  position: relative;
  border: 1px solid black;
  margin: 1px;
}
.rollout{
  background-color: orange;
  border: 2px solid black;
  width: 95px;
  text-align: left;
  padding-left: 5px;
  cursor: auto;
  display: none;
  position: absolute;
  top: -2px;
  left: 105px;
  font-weight: normal;
}
.rollout a{
  text-decoration: none;
  color: black;
  line-height: 1.5em;
}
.rollout a:hover{
  color: grey;
}
.rand{
  width: 2px;
  position: absolute;
  left: 105px;
  top: 0px;
  bottom: 0px;
  background-color: orange;
  display: none;
}
</style>
</head>
<body>
<div style="position:absolute; left:0px; top:10px;">

  <div class="menu" onmouseover="rollout(this)" onmouseout="rollin(this)">Allgemein
    <div class="rollout">
      Link1<br />
      Link2<br />
      Link3<br />
      Link4
    </div>
    <div class="rand"> </div>
  </div>


  <div class="menu" onmouseover="rollout(this)" onmouseout="rollin(this)">Programmieren
    <div class="rollout">
      Link1<br />
      Link2<br />
      Link3
    </div>
    <div class="rand"> </div>
  </div>

</div>
</body>
</html>

Aber:
1. JS ist immer sub-optimal, CSS ist da besser.
2. Muesste ich ne Menge an Werten veraendern, wenn ich dabei die Breite Variabel machen wuerde (In dem Beispiel ist sie statisch).
3. Funktionierts im IE nicht richtig.

ingoS · 1 Oktober 2007

Commodore schrieb:
Weil der Text dynamisch da reinkommen soll ;)

Wenn es dynamisch sein soll (PHP, nehme ich an?), kannst du ja auch die Anzahl der Buchstaben des Links im gleichen Zug auslesen und diese Zahl in em plus ein wenig mehr (oder padding verwenden) zur Breite der Box machen.

Commodore · 1 Oktober 2007

ingoS schrieb:
Wenn es dynamisch sein soll (PHP, nehme ich an?), kannst du ja auch die Anzahl der Buchstaben des Links im gleichen Zug auslesen und diese Zahl in em plus ein wenig mehr (oder padding verwenden) zur Breite der Box machen.

Auch eher sub-optimal, die Boxen koennen da leicht zu breit werden.
Anzahl an buchstaben + 1 em:

Code:

<div style="background-color: red; width:5em; text-align:center;">home</div>
<div style="background-color: red; width:14em; text-align:center;">Programmieren</div>

</apoclypse> · 1 Oktober 2007

sorry aber ich klinke mich dann mal aus. is ne gute idee aber mit css seh ich da keinen weg und wenn es evtl einen gibt streikt bestimmt einer der browser

ich hab mal neben bei ne frage. ich hab mir nämlich mal n teil php angelesen aber ich bringe ihn nicht zur anwendung ich wär dankbar für eine einfache ech funktion, die man mal auf nem apache server laufen lässt

ingoS · 1 Oktober 2007

Wenn ich ehrlich bin, ist mir auch nicht klar, inwiefern der dritte Code in deinem ersten Beitrag eine Teillösung darstellen soll. Wo genau soll der denn hin (und inwiefern soll er dafür sorgen, dass die Boxen gleich breit sind)?

Commodore · 1 Oktober 2007

ingoS schrieb:
Wenn ich ehrlich bin, ist mir auch nicht klar, inwiefern der dritte Code in deinem ersten Beitrag eine Teillösung darstellen soll. Wo genau soll der denn hin (und inwiefern soll er dafür sorgen, dass die Boxen gleich breit sind)?

Naja, in dem Code sind die Boxen halt gleichbreit ^^

Ich glaub ich hab dann keine andere Wahl als die Buchstaben zu gruppieren und mit PHP eine entsprechende Breite zu errechnen.

ingoS · 1 Oktober 2007

Commodore schrieb:
Naja, in dem Code sind die Boxen halt gleichbreit ^^

Ich glaub ich hab dann keine andere Wahl als die Buchstaben zu gruppieren und mit PHP eine entsprechende Breite zu errechnen.

Nicht so schnell aufgeben, bitte, ich denke noch drüber nach.:mrgreen:

Commodore · 1 Oktober 2007

ingoS schrieb:
Nicht so schnell aufgeben, bitte, ich denke noch drüber nach.:mrgreen:

Ich arbeite heute schon seit 10 Uhr daran und hab immernoch keine optimale Loesung gefunden.

Aber falls du was finden solltest, dann lass es mich wissen :)

btw: Das wonach ich hier suche ist eigentlich auch nur ein Kompromiss :mrgreen:

ingoS · 1 Oktober 2007

Wieso sorgt folgender Code dafür, dass die Boxen gleich breit sind?

Code:

<div style="background-color: red; padding: 10px;">abc</div>
<div style="background-color: red; padding: 10px;">abcdefghijklmnop</div>

Bei mir sorgt er nicht dafür.
:?::?::?:

Commodore · 1 Oktober 2007

ingoS schrieb:
Wieso sorgt folgender Code dafür, dass die Boxen gleich breit sind?

Code:

<div style="background-color: red; padding: 10px;">abc</div> <div style="background-color: red; padding: 10px;">abcdefghijklmnop</div>

Bei mir sorgt er nicht dafür.
:?::?::?:

Oh, hab ich wohl falsch kopiert :lol:

Code:

<div style="float: left;">
<div style="background-color: red; padding: 10px; margin-bottom: 2px;">abc</div>
<div style="background-color: red; padding: 10px;">abcdefghijklmnop</div>
</div>

/E: Ich schau jetzt ein bisschen Fernsehen, morgen bin ich wieder da.

ingoS · 2 Oktober 2007

Wenn ich den zuletzt von dir revidierten Code nehme, dann sind die erst recht nicht gleich breit, sondern nur etwas breiter und nebeneinander.
:?::?::?:

Commodore · 2 Oktober 2007

Welchen Browser benutzt du?

Bei mir funktionierts im FF, Opera und IE [highlight]6[/highlight]

Div-Positionierung

Commodore

Guest

Aktives Mitglied

Commodore

Guest

Neues Mitglied

Commodore

Guest

Neues Mitglied

Commodore

Guest

Neues Mitglied

Commodore

Guest

Aktives Mitglied

Commodore

Guest

Neues Mitglied

Aktives Mitglied

Commodore

Guest

Aktives Mitglied

Commodore

Guest

Aktives Mitglied

Commodore

Guest

Aktives Mitglied

Commodore

Guest