Generelle css-Frage

Liebe/-r Experte/-in,
ich habe mal eine generelle css-Frage:
Wiso werden einige Objeke in divs ignoriert und andere nicht.

Text

geht und

  • 1

  • 2

  • 3

geht nicht? Habe gerade versucht das suckerfish an zu passen. Testweise habe ich mir alle drei boxen mit der linie versehen. Und die liste / menü springt nur dann in die box, wenn ich hinter das enü einen Text packe. Oder ein height festlege.

Hallo,

Deine Frage ist mir nicht ganz klar, was meinst Du mit „geht bzw. geht nicht“? Da deine Frage sehr allgemein ist kann ich dir leider auch nur sehr allgemein antworten: Dein Problem ist, dass du die Divs richtig verschachteln und floaten bzw. „clearen“ muss.

Mehr dazu, wie du eine Website mit divs und css erstellst findest du unter folgendem Link:

http://www.mediengestalter.info/forum/4/website-layo…

Wie du ein funktionierendes Suckerfish-Menu realisiert und anpasst, findest du hier:

http://pfirsichmelba.de/artikel-scripts/suckerfish-b… = hier findest du alles zum suckerfish

Für das Suckerfish Menu kannst du ein eigenes Div definieren (z.B. {html-code suckerfish-menu} )

Aber warum realisierst du das nicht einfach mit einem sogenannten Content-Management-System wie joomla, wordpress oder contao und fertigen Themes/Templates? Dann brauchst du nicht mehr selbst ein Template aus divs zusammenzubauen sondern das Design nur noch über die vergebenen CSS-Klassen etc. im stylesheet anzupassen.

Nebenbei lernst du so auch den strukturellen Aufbau einer Website kennen!

http://www.colorplexstudios.com/articles/div_web_des…

Ich würde vielleicht nach

Hi ,
waow, das war superschnell. Danke erstmal.
Ok Was ich mit geht und nicht meine:

Ich habe einen haupt div. Darin header und main.
Im header habe ich ein header bild und halt das menu.
Nur ignoriert das Header div den content solange da kein text dinne steht.
Also

| | leerer header-div

|menu1|menu2|menu3|


| | nicht leerer header-div
|menu1|menu2|menu3|

IRGENd 1 TEXT

also 2 Divs (main und head) im Hauptdiv.
Der sucker ist komplett im header div, Ohne text im header wird das element ignoriert.
Nur wenn text im head drinne ist wirds automatisch erweitert.

Ein cms geht in dem Fall nicht, da da diverse Filter reinsollen.

Hallo Oliver,
das Thema von dir hat eigentlich nichts mit CSS zu tun, so wie du es ausgewiesen hast. Jedoch kann ich dir trotzdem helfen. Du solltest mal hinter deinem schließen!

Grüße

Gib den einzelnen Elementen (auch der Liste) die Eigenschaften:

display:block;
overflow:hidden;

Dann sollte es funzen.

Gruß webberry

Superschnell. Danke!
Hm das > ist nur beim paste verloren gegangen.
Der css code:
Ich habe halt 2 Bereiche: head + main.
//*****************************Menu***********/

ul {
padding: 0px;
margin: 0px;
list-style: none;

}
li {
float: left;
position: relative;
width: 10.5em;
font-size:0.8em;
list-style: none;
background-color:green;
}
/*********** The dropdown*/
li ul {
display: none;
position: absolute;
top: 10em;
left: 0px; background-color:red;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.hover ul{ display: block;
}
ul.hover li
{

}
/*****************************Menu***********/
.header
{
height:120px;
}
div
{
border:3px double green;
}

Superschnell. Danke!
Hm das > ist nur beim paste verloren gegangen.
Der css code:
Ich habe halt 2 Bereiche: head + main.
//*****************************Menu***********/

ul {
padding: 0px;
margin: 0px;
list-style: none;

}
li {
float: left;
position: relative;
width: 10.5em;
font-size:0.8em;
list-style: none;
background-color:green;
}
/*********** The dropdown*/
li ul {
display: none;
position: absolute;
top: 10em;
left: 0px; background-color:red;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.hover ul{ display: block;
}
ul.hover li
{

}
/*****************************Menu***********/
.header
{
height:120px;
}
div
{
border:3px double green;
}.

Ich glaub ich hab jetz verstanden was du meinst, du solltest dich aber in zukunft etwas genauer ausdrücken. Eine Liste in HTMl macht man nicht mit einem Auzählungspunkt im Quelltext sondern mit der Umgebung
.
Ich hab dir das mal in eine HTML Datei eingebaut:

http://pastebin.com/dRyEyLU7

Ich hoffe, ich konnte dir damit helfen.
Grüße

So einfach wars nicht. Danke für Deine superschnelle Hilfe!

Hi,
vieleicht wirds so klarer:

http://screencast.com/t/wsGhHtRZ2xh

Hi,
vieleicht wirds so klarer:

http://screencast.com/t/wsGhHtRZ2xh.

Hi,
vieleicht wirds so klarer:

http://screencast.com/t/wsGhHtRZ2xh

Hm,
der Aufzählungspunkt ist durch den pspad da irgendwie reingekommen.

Deinen Text habe ich mal kopiert. Das Problem bleibt aber.
http://screencast.com/t/eNAfQIrjld

Es sei denn ich setzte die height auf einen festen Wert.

Automatisch größer werden tut der div nicht.

Das liegt daran, weil du für die liste eine etwas komische positionierung definiert hast. float z.b. löst ein objekt aus seinem eigentlichen ort heraus und es „schwebt“ dann. hört sich etwas strange an. am besten du ließt dir dazu mal bisst was durch… http://www.css-technik.de/css-examples/219_9/

andererseits definierst du die ul wieder mit absoluter position, das heist also dass du die position fest auf dem bildschirm angibst, egal wie der div-container gerade aussieht.

ich bin mir nicht sicher, was du damit bezwecken willst, aber vielleicht solltest du beide optionen einfach mal rausnehmen und ohne versuchen…

Hi,
das Ganze hatte ich irgendwo aus einer skriptsammlung.
Ich selber kann php , css aber weniger.

Was ich möchte, ist einfach ein Dropdownmenü zT mit untermenüpunkten. Ohne javascript.
Und so wars irgendwo angegeben. Das tut auch. nur wenn ich es in ein div-packen will gehts nicht…

hm probiers mal damit: http://purecssmenu.com/

Hi!

Soweit ich weiß, sind - -elemente per Definition erstmal Block-Elemente und sollten im Div angezeigt werden. Ausnahme wäre, wenn du einen float da mit zu setzt, dann nicht mehr unbedingt, bzw. nur noch, wenn danach noch was zum floaten kommt - z.B. Text.

Ohne das CSS zu deinem Code kann ich mit der Frage aber sonst nicht so viel anfangen!

MfG

Kurz & Generell: Das liegt an der HTML Spezifikation - nicht jedes Element darf in jedes andere eingefügt werden.

Es ist am einfachen das fertige Dokument durch den W3C Validator überprüfen zu lassen (http://validator.w3.org/), welcher auch einen Hinweis darauf liefert welche Abwechungen von der Spezifikation vorliegen.

Hallo,

ich habe mal eine generelle css-Frage:
Wiso werden einige Objeke in divs ignoriert
und andere nicht.

Sorry, Deine Frage ist etwas ungenau - zum einen fehlt mir das CSS dazu, dann hat w-w-w hier den Code ziemlich zerhauen und: was bedeutet „geht nicht“? Was meinst Du mit „habe ich mir alle drei boxen mit der linie versehen“? Welche Linie?

Ein Schuss ins Blaue: Wenn im CSS li-Elemente floaten und keine Höhe und keinen Inhalt haben kann es sein, dass Du sie nicht siehst.

Greets
Christian