CSS Probleme

[Popeye1979]

Hi!

Also bald is meine Geduld zu Ende!

Folgendes Problem:

Ich stelle Links durch CSS formatiert als Button dar. Diese nehmen aber im Firefox 1.0, Opera 7.23, Mozilla 1.5 nicht die festgelegte Breite von 120px an!

Wenn man min-width, max-width und width auf 120px setzt sollte das doch funktionieren oder??

Ein weiteres Problem ist im Opera das die divs alle untereinander dargestellt werden! Warum? In den anderen funktioniert es!

#navigation{

width:222px;

height:600px;

float:left;

max-width:222px;

position:static;

padding:10px;

}


#anwendung{

max-width:72,25%;

min-width:72.25%;

width:72,25%;

overflow:scroll;

height:600px;

max-height:100%;

position:relative;

float:left;

display:inline;


}


#header{

width:100%;

height:110px;

position:static;

}


#fortschrittsleiste{


width:100%;

position:static;

}

[/PHP]

Das sind die 4 Divs! Der Aufbau ist Header, darunter Fortschrittsleiste, darunter links Navigation und daneben Anwendung!

Irgendwer hier CSS-Vollprofi der mir helfen kann??

Vielen Dank im Vorraus!

Gruss

Jo

[kills]

max-width/height u. min-width/height unterstützt nur der NS

http://netmirror.org/mirror/selfhtml/css/eigenschaften/positionierung.htm#min_height

[Popeye1979]

max-width/height u. min-width/height unterstützt nur der NS

http://netmirror.org/mirror/selfhtml/css/eigenschaften/positionierung.htm#min_height

Witzig!

Nur im IE hab ich es so wie ich es will! :confused:

[FMG]

Mh, arbeitest du nur mit div's? Für das Menü, was anscheinend listenartig aufgebaut ist, empfiehlt sich z. B. eine formatierte UL-Liste. Schau mal hier.

[Crash2001]

[...]Ein weiteres Problem ist im Opera das die divs alle untereinander dargestellt werden! Warum? In den anderen funktioniert es![...]

Dann probiere mal wie das ist wenn du statt div einfach span benutzt, falls die Buttons (wenn cih das richtig verstanden habe) alle nebeneinander dargestellt werden sollen. Nach div wird laut Standard nämlich umgebrochen...

[Popeye1979]

Mh, arbeitest du nur mit div's? Für das Menü, was anscheinend listenartig aufgebaut ist, empfiehlt sich z. B. eine formatierte UL-Liste. Schau mal hier.

Die 4 Teilbereiche (Header, Fortschrittsleiste, Navigation, Anwendung) sind 4 Divs! Mit dem Menü das werd ich mir auf jeden Fall noch genauer anschauen!

@crash:

Nein die "Buttons" in der Navigation sollen schon alle untereinander dargestellt werden, das Problem ist, das das Anwendungs-DIV, welches rechts neben dem Navigations-DIV liegen soll teilweise darunter liegt!

Wenn ich das jetzt mal skizzieren soll:

-------------- Header

--------------

--------------Fortschrittleiste

||| |||||||||

||| |||||||||

||| |||||||||Anwendung

||| |||||||||

||| |||||||||

Navi

Boah bin ich ein Zeichenkünstler! :uli

[Popeye1979]

So das Problem mit den "Buttons" und der gleichen Größe ist behoben!

Ich musste dem Link nur display:block; mitgeben!

[Popeye1979]

*heul*

Das gibts alles nicht!! :eek:

Jetzt hab ich es im IE 5.5 und im Opera 7.23 in Ordnung, jetzt kann ich im Firefox 1.0 nicht mehr meine Navigation bedienen.

Es scheint irgendwie(fragt nicht wie und warum) das das Anwendungs-DIV das Navi-DIV überlagert!

Mit z-index bringt auch nix! Ich raff es net!

Vorschläge?? :confused:

EDIT:

Als Alternative könnt ich jetzt anbieten:

Es funzt im Firefox!

Dafür im Opera nicht mehr weil dann der Anwendungs-DIV total verhunzt ist!

:beagolisc :beagolisc :beagolisc

[FMG]

Kein Wunder, wenn du bei beiden div's float: left; angibst...

[Popeye1979]

Kein Wunder, wenn du bei beiden div's float: left; angibst...

Aktuelle CSS:

#navigation{

width:222px;

height:600px;

float:left;

max-width:222px;

position:static;

padding:10px;

overflow:visible;

z-index:2;

background:green;

}


#anwendung{

max-width:72,25%;

min-width:72.25%;

width:72,25%;

overflow:scroll;

height:600px;

max-height:100%;

position:relative;

display:inline;

z-index:5;

}


#header{

width:100%;

height:110px;

position:static;

}


#fortschrittsleiste{


width:100%;

position:static;

}[/PHP]

Problem von Post vorher(vor EDIT)!

[FMG]

Dafür im Opera nicht mehr weil dann der Anwendungs-DIV total verhunzt ist!

Allerdings...

#navigation{

width:222px;

height:600px;

float:left;

padding:10px;

background:green;

}


#anwendung{

height:600px;

}[/PHP]

... reicht vollkommen!

Für den Header, der vermutlich ein Logo sein wird, bzw. die Fortschrittsanzeige brauchst du nicht wirklich ein div.

Das ganze sehe dann z. B. so aus:

[code]<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>...</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> body { background: white; color: black; font-family: Arial, Helvetica, sans serif; margin: 5px; padding:5px; } #rahmen { width: 100%; } #navigation{ width:222px; height:600px; float:left; padding: 10px; background:green; } #anwendung{ height:600px; } #menue li { display: block; list-style-type: none; line-height: 15px; background-color: blue; width: 100%; } </style> </head> <body> <div id="rahmen"> <img src="header.jpg" alt="Header" /><br /> <p>||||||||||||</p> <div id="navigation"> <ul id="menue"> <li>Menuepunkt 1</li> <li>Menuepunkt 2</li> </ul> </div> <div id="anwendung"> Text<br>Text> </div> </div> </body> </html>[/code]

[Popeye1979]

Danke Leute!

2 Tage Try&Error bringen doch was!

Alle DIVS sind da wo sie hingehören und alles sieht so aus und ist so breit wie es soll!

[Popeye1979]

So Thread nochmal hervorkram!!!

Der Internet Explorer 6 verhunzt alles!

Es kann doch nicht sein das Firefox, Opera, IE5.5 es jetzt darstellen und IE6 alles komplett verhunzt!

Jemand Erfahrungen damit??

Aktueller CSS:

#navigation{

width:222px;

height:600px;

float:left;

max-width:222px;

position:static;

padding:10px;

overflow:visible;

z-index:2;


}


#anwendung{

max-width:100%;

min-width:100%;

width:100%;

overflow:visible;

height:600px;

max-height:100%;

position:static;

z-index:5;


}


#header{

width:100%;

height:110px;

position:static;


}


#fortschrittsleiste{


width:100%;

position:static;


}[/PHP]