[Norat]

Hi Leutz,

habe folgendes Problem...
ich möchte ne seite komplett in css gestalten... also ohne tabellen und so...
nun möchte ich ein menü basteln, die menüpunkte sollen alle nebeneinander angeordnet sein... also hintergund haben sie eine 1px breite grafik... je nach dem was gewählt ist, wird eine andere grafik ausgewählt... die menüpunkte werden dynamisch gestaltet, d.h. da ist schrift drinne(die kann unterschiedlich breit sein)...
ich bekomme es einfach nicht hin, die menüpunkte nebeneinander anzuordnen...

wie bekomme ich das mit css hin?

[Slayer]

Ich hoffe mal, dass ich dich da richtig verstanden habe...
Wenn du nun 3 Container nebeneinander haben willst, dann funktioniert das so:

HTML:

<div id="left">

</div>


<div id="right">

</div>

<div id="content">

</div>

CSS:

#left
{
	float:left;
	width:18%;
	text-align:left;
	padding:5px;
	border:1px solid #000;
}

#right
{
	float:right;
	width:18%;
	text-align:right;
	padding:5px;
	border:1px solid #000;
}

#content
{
	margin:0% 20%;
	padding:10px;
	text-align:center;
	border:1px solid #000;
}

So sind die drei Container nebeneinander angeordnet und passen sich an die Fenstergröße automatisch an, du kannst das nun beliebig ändern.

Dieser Beitrag wurde von Slayer bearbeitet: 20. Juli 2005 - 16:22

[Norat]

nebeneinander sind sie...
nur, geht das so nicht wie ich möchte...
ich stelle mir das so vor, dass ich 2 stile habe, einen mit dem hintergrund für "menüpunkt nicht gewählt" und einen für "Menüpunkt gewählt", diese möchte ich nebeneinander haben... was drinne steht(breite), wieviel menüpunkte und welcher der beiden stile weis ich bei der stil definition nicht...

[Slayer]

Ich verstehe nicht ganz, was du jetzt erklärt haben willst?
Wie man die Schrift/den Hintergrund etc. in mit CSS formatiert, oder was denn genau?
Du solltest das etwas genauer erklären vieleicht.

[Norat]

ich habe die zwei stile... welche die formatierungen beinhalten(hintergund, schrift, etc...)
wenn die normal in nen div machen, werden diese untereinander gepackt...
ich möchte die aber nebeneinander haben...
also wie eine zeile mit mehreren spalten in einer tabelle...

[Slayer]

Das macht man mit margins, so wie ich es dir oben beschrieben habe.
Also so:

#spalte_1
{
   width:10%;
}

#spalte_2
{
   width:10%;
   margin-left:10%;
}

#spalte_3
{
   width:10%;
   margin-left:20%;
}

usw.

[Floele]

Du meinst wahrscheinlich sowas:

a)

li {
display:inline;
margin/padding/border/usw....
}

<ul>
 <li>Menüpunkt 1</li>
 <li>Menüpunkt 2</li>
</ul>

b)

li {
display:block;
float:left;
margin/padding/border/usw....
}

<ul>
 <li>Menüpunkt 1</li>
 <li>Menüpunkt 2</li>
</ul>

[Norat]

ja, das oben hatte ja schon verstanden... das problem ist nur, das menü ist dynamisch.... d.h. das kann 4, aber auch 8 menüpunkte enthalten...
und die inhalte der menüpunkte sind von der breite auch dynamisch, also veränderlich...

da das ganze in einem cms-system kommt, habe ich keinen "dynamischen" einfluss auf die css...
also kann ich das so wie du es oben geschrieben hast, nicht lösen...

[Floele]

Zitat (Norat: 20.07.2005, 20:15)

ja, das oben hatte ja schon verstanden... das problem ist nur, das menü ist dynamisch.... d.h. das kann 4, aber auch 8 menüpunkte enthalten...
und die inhalte der menüpunkte sind von der breite auch dynamisch, also veränderlich...

da das ganze in einem cms-system kommt, habe ich keinen "dynamischen" einfluss auf die css...
also kann ich das so wie du es oben geschrieben hast, nicht lösen...
<{POST_SNAPBACK}>

Also mein Vorschlag ist was die Anzahl der Menüpunkte anbetrifft 100%ig dynamisch. Wenn du die Breiten dynamisch verändern möchtest ohne dabei das CSS zu verändern, dann hast du etwas relativ unmögliches vor. Wenn du wenigstens den HTML Code ändern kannst, dann kannst du Inline-Styles benutzen (auch wenn das nicht grade so toll ist) oder dynamische Klassen/IDs benutzen.

Dieser Beitrag wurde von Floele bearbeitet: 20. Juli 2005 - 19:19

[Norat]

hey... so gehts... du hast recht!

ich habe das <ul> weggenommen, weil er vorher immer noch nen zeilenumbruch gemacht hat...

das ganze habe ich in einen div gepackt, welches die breite und höhe des ganzen vorgibt...
nun kann ich leider nicht das ganze zentrieren, oder die li auf meine gewünschte höhe bringen! woran kann das liegen?

Dieser Beitrag wurde von Norat bearbeitet: 20. Juli 2005 - 21:20

[Floele]

Eigentlich mit genau dem Code den ich dir gegeben habe...sonst könnten die Menüpunkte auch nie nebeneinander stehen.

[Norat]

habe oben nochmal editiert..

[Floele]

Zitat (Norat: 20.07.2005, 22:00)

ich habe das <ul> weggenommen, weil er vorher immer noch nen zeilenumbruch gemacht hat...

das ganze habe ich in einen div gepackt, welches die breite und höhe des ganzen vorgibt...

<li>s ohne <ul> geht nicht*. Du musst das <ul> schon benutzen. Eventuell mit

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

nachbessern.

Zitat

nun kann ich leider nicht das ganze zentrieren, oder die li auf meine gewünschte höhe bringen! woran kann das liegen?
<{POST_SNAPBACK}>

Wenn du display:inline benutzt dann kannst du width oder height nicht ändern. Da hilft die float-variante. Zentrieren kannst du höchstens das <ul>, aber da müsstest du dann schon die Breite der Liste festlegen.

*abgesehen von <ol>

Dieser Beitrag wurde von Floele bearbeitet: 20. Juli 2005 - 22:01

[Norat]

ok, das mit dem ul hat geklappt...

nur das zentrieren habe ich nicht hinbekommen...
jetzt habe ich um den text noch nen div mit nen marging top gebastelt, so dass das ungefähr die mitte ist...

ich danke dir ! hast mir wirklich dolle geholfen!

[Floele]

Zentrieren geht in etwa so:

ul {
width:x;
margin:0 auto;
}