div Kisten und meine Problemchen

[mangani84]

Hallo zusammen,
ein CSS Anfänger braucht mal wieder eure Hilfe, weil er sonst verzweifelt :-?.
Habe 3 Anliegen.

1. wie kann ich z.B. 2 div Kisten nebeneinander bringen
2. wenn eine div Kiste z.B. 100px lang ist und ich z.B. einen Text schreibe, dann vergrößert er sich irgendwann automatisch, ich meine die Kiste wird dann länger als 100px. Gibt es einen Befehl, der das Vergrößern verhindert? Soll ja alles schön einheitlich sein.
3. ich möchte in einer div Kist z.B. weitere Kisten einbauen. Z.B. 3 nebeneinander und 2 untereinander. In jeder dieser Kisten soll ein Foto rein und oben drüber ein Text. Oder soll ich da mit Tabellen arbeiten?:roll:

Ich freue mich schon auf eure Antwort.

Gruß
mangani84

 

[piXXLdealer]

Hai!

1. wie kann ich z.B. 2 div Kisten nebeneinander bringen

z.B. mit float:left;

2. wenn eine div Kiste z.B. 100px lang ist und ich z.B. einen Text schreibe, dann vergrößert er sich irgendwann automatisch, ich meine die Kiste wird dann länger als 100px. Gibt es einen Befehl, der das Vergrößern verhindert? Soll ja alles schön einheitlich sein.

hm - eigentlich nicht! Zeilen können allerdings nur bei Leerzeichen umgebrochen werden. Ansonsten gib deiner div-Kiste mal white-space:normal; mit

3. ich möchte in einer div Kist z.B. weitere Kisten einbauen. Z.B. 3 nebeneinander und 2 untereinander. In jeder dieser Kisten soll ein Foto rein und oben drüber ein Text. Oder soll ich da mit Tabellen arbeiten?

klingt für mich so, als würde eine Tabelle an dieser Stelle durchaus Sinn machen. (auch wenn´s da bestimmt gleich wieder nen Aufschrei geben wird ;) ) Schließlich nutzt du sie an dieser Stelle nicht fürs Layout, sondern um deinen Content zu strukturieren...

LG
pxxldlr

 

[neuroleptika]

2. wenn eine div Kiste z.B. 100px lang ist und ich z.B. einen Text schreibe, dann vergrößert er sich irgendwann automatisch, ich meine die Kiste wird dann länger als 100px. Gibt es einen Befehl, der das Vergrößern verhindert? Soll ja alles schön einheitlich sein.

Eigentlich verlängern nur ältere Internet Explorer Block-Boxen mit height-Angabe.
Was soll den mit dem Inhalt passieren der da nicht reinpasst?
es gibt:
[SIZE=-1]overflow: hidden; (versteckt das überstehende)
overflow: scroll; (die Box wird scrollbar)
[/SIZE] overflow: auto; (die Box bekommt ein Scrollbar wenn der Inhalt zu groß ist)

 

[mangani84]

Danke für die schnellen Antworten. Werde ich gleich mal ausprobieren.

Ich glaube mit der 2ten Problematik wurde ich falsch verstanden oder ich habe es falsch erklärt.

Mein Problem ist halt, wenn ich z.B. eine div Kiste erstelle und diese auf 800px Länge festsetze, dann z.B. anfange irgendein Text in dieser Box zu tippen und der Text sich dem Ende der 800px überschreitet, ohne dass ich einen Zeilenumbruch mache, dann wächst die Box mit den Wörtern in die Länge mit. Ich möchte die Box einfach festsetzen, so dass es einen automatischen Zeilenumbruch gäbe.

Wenn ich schonmal dabei bin, vielleicht könnt ihr mir auch noch bei diesem neuen Thema helfen. Ich habe ein Logo in einer div Box als Hintergrund und unten stehen dann die Hyperlinks. Ich möchte die so gestalten, dass diese beim mousover etwas dunkler werden, aber man dass Foto noch darunter erkennen kann. Wisst ihr was ich meine?

Gruß
mangani84

 

[piXXLdealer]

wegen des Menüs:

Erstelle zwei Versionen des Hintergrundbildes deiner Menüpunkte. Ein helles und ein dunkleres. Diese tauschst du dann per hover (also beim darüberfahren mit der Maus) aus.

also z.B. so:

<a href="..." class="menue">Text</a>

.menue{
  display:block;
  float:left;
  width:??px;
  height:??px;
  background-image:url(hg_dunkel.gif);
  text-align:center;
  color:#000000;
}

.menue a:hover {
  background-image:url(hg_hell.gif);
  color:#000000;
}

Muss dazu sagen, dass ich es nicht probiert habe - sollte aber eigentlich funktionieren...

LG
pxxldlr

 

[mangani84]

@piXXLdealer, danke dir. So einen Effekt bekomme ich schon hin. Aber ich meinte etwas anderes. Schaut mal hier: homepage, dokument, webpage, page, web, netz, homepage dokument webpage page web netz
Dort ist ein großes Logo und die Hyperlinks stehen schön unten. Wenn man mit der Maus drüberfährt, wird diese Stelle etwas dunkler, aber das Bild scheint immer noch durch.

1. Ich weiß generell nicht, wie ich diesen Effekt mit den Farben so hinbekomme, dass das Bild noch durchscheint. Wenn ich dies wüsste, währe der Rest kein Problem.

Doch, ein kleines habe ich noch.

2. Ich kenne den Befehl nicht, um die Links unten anzureihen. Bei mir sind die immer oben. :? :? :?

 

[piXXLdealer]

das ist genau der Effekt, wie ich ihn oben beschrieben habe. Zwei Hintergrundbilder werden gegeneinander ausgetauscht. Es sieht nur so aus, als ob der Hintergrund "durchscheint" weil sie geschickt ausgeschnitten und angeordnet sind. D.h. die halbtransparente Farbänderung ist KEIN HTML/CSS-Effekt. Stattdessen benötigst du ein Bildbearbeitungsprogramm, mit dem du dein Bild zerschneidest und die Helligkeiten und/oder Farbwerte änderst.

Du kannst diesen "Durchscheinen" auch mit halbtransarenten PNG´s erreichen. Das hat aber den Nachteil, dass sie auf´m IE6 nur über Umwege richtig dargestellt werden können. Außerdem bleibts dabei, dass zwei PNG´s gegeneinander ausgetauscht werden müssen.

Dein Problem mit der Ausrichtung ist ohne den Code nur schwer nachvollziehbar. Poste doch mal bitte den Code oder nen Link. Dann bekommen wir das schon hin...

LG
pxxldlr

 

[neuroleptika]

D.h. die halbtransparente Farbänderung ist kein HTML/CSS-Effekt.

Doch, in dem Beispiel ist das mit opacity gemacht:

-moz-opacity: 0.70;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
opacity: 0.70;

Opacity ist css3 und wird nicht von allen Browsern gleich unterstüzt.
Opera, Safari3 und neuere Mozilla unterstützen opacity.
Für ältere Mozilla gibt es -moz-opacity und für Internetexplorer 5-7 den Alpha-Filter. Es gibt noch -khtml-opacity,womit man auch älteren Safaris beikommen kann. Im Netzt finden sich viele Artikel wonach es damit auch im Konquerror gehen soll. Das stimmt bis heute (Vers.3.5.5) aber nicht.
Man sollte also schon mit einer menge Browsern ausprobieren.

Das css kommt mit sowas nicht durch den Validator.
Würde mich aber nicht abhalten es trotzdem zu nutzen.

@mangani84
Ich habe dich falsch verstanden. Ich dachte du meinst mit Länge die Höhe.
Ich würde an deiner Stelle vorerst auf diesen Glas-Effekt verzichten und mich um die Boxen kümmern.
Aber wie piXXLdealer schon sagte, ohne code.........

 

[piXXLdealer]

oha - gut zu wissen! Danke für die Infos neroleptika! Man(n) lernt eben nie aus... ;)

LG