Antworten zum Thema „Verschiedene CSS Probleme“

Yazaa · 28.03.2009

Hi,

also Ich habe eine Homepage in bearbeitung, die ich erst in Photoshop erstellt und jetzt Stück für Stück übernommen hab. Hier gibts die . Generell bin ich fertig damit, habe nur verschiedene Probleme:

Browserübergreifende Probleme:
1. Ich bekomm in den Divs vertikal nichts ausgerichtet. 'vertical-align' wird einfach ignoriert, egal ob ich 'middle' oder 'bottom' benutze, es wird immer als top angezeigt.
2. Wenn das Browserfenster maximiert ist, ist alles super, aber mach Ich es kleiner, schneidet er mir oben was vom Logo ab...

IE Probleme:
3. Der Menueffekt funktioniert nicht richtig, erst wird der Hintergrund in grau dargestellt, man geht rüber und er wird gelb, wird aber nicht wieder grau wenn man rausgeht...
4. Der Abschluss vom Menu auf der rechten Seite wird mit falsch angezeigt, da ist aus irgendeinem Grund nen abstand drin, obwohl ich margin und padding generell für alle objekte auf 0 gestellt hab.

Habt gnade mit mir, Ich arbeite noch nicht solang mit Photoshop ;-)

Schonmal vielen dank für die Mühe!

Yazaa

quasibodo · 28.03.2009

AW: Verschiedene CSS Probleme

Also wenn PS diesen Code geliefert hat, dann weiß ich jetzt, warum ich das per Hand mache...

Versuch's mal mit der css:

Code:

img, body, div, table {
    border: 0px;
    padding: 0px;
    margin: 0px;
}

/*

Div Einstellungen und platzierung der Elemente

*/

.main {
    margin: -290px 0 0 -450px; 
    padding: 0px;
    position:absolute;
    top: 50%;
    left: 50%;
    height: 600px;
    width: 900px;
    background-color: #ffffff;
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
}

.logo {
    position: relative;
    top: 0px;
    left: 0px;
    width: 900px;
    height: 101px;
    padding: 0px;
    margin: 0px;
    vertical-align: bottom;
    background-color: #304b04;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: black;
}

.content {
    position: relative;
    width: 900px;
    height: 452px;
    top: 200px;
    left: 0px;
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: black;
    
    text-align: center;
    
}

.footer {
    position: relative;
    width: 900px;
    height: 20px;
    top: 0px;
    left: 0px;
    padding: 0px;
    margin: 0px;
    
    background-color: #304b04;
    text-align: right;
    vertical-align: middle;
    font-size: 11px;
    color: #ffffff;    
}

.menu {
    position: relative;
    top: 0px;
    left: 0px;
    width: 900px;
    height: 25px;
    padding: 0px;
    margin: 0px;
    background-image: url('./img/menu_bg.jpg');
}

/* 

Hover Menu

*/


.menu ul{
        margin: 0;
        margin-left: 150px;
        padding: 0;
        float: left;}

.menu ul li{
        display: inline;}

.menu ul li a.normal{
        width: 100px;
        height: 24px;
        float: left;
        background-image: url('./img/menu_inactive.jpg');
        text-decoration: none;
        text-align: center;
        vertical-align: middle;
        font-size: 14px;
        
        color: white; 
}

.menu ul li a.normal:hover{
        background-image: url('./img/menu_hover.jpg');
}

.menu ul li a.selected, .menu ul li a.selected:hover{        
        width: 100px;
        height: 24px;
        float: left;
        background-image: url('./img/menu_selected.jpg');
        text-decoration: none;
        text-align: center;
        vertical-align: middle;
        font-size: 14px;
        
        color: white;
}

sokie · 28.03.2009

AW: Verschiedene CSS Probleme

Code:

.main {
    margin: 20px auto 0 auto; 
    padding: 0px;
    height: 600px;
    width: 900px;
    background-color: #ffffff;
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
}

so steht das ding in der mitte, und läuft nicht oben aus dem fenster, wenn man den browser kleiner macht.

wenn man Bereiche hat, die eindeutig nur einmal in einer Seite vorkommen (dürfen) ist die ID statt der Klasse erste wahl

Yazaa · 28.03.2009

AW: Verschiedene CSS Probleme

@quasibodo: Also denn Quelltext hab Ich selber geschrieben, ich hab früher meine Seiten immer mit ner Tabelle gemacht, wollte es mal mit Divs versuchen.. Ich weiß nicht ganz genau was du alles geändert hast, auf jedenfall hat es die Seite nur nen bisschen verschoben ^^

@sokie: naja, das ist auflösungsabhängig, Ich hab 1440x900 und in der vertikal stehts nicht in der Mitte.

quasibodo · 28.03.2009

AW: Verschiedene CSS Probleme

nun ja, im Prinzip bist Du ja auf dem richtigen Weg.

Wenn Du die Formatierung bzw. die Positionierung ausschließlich über css vornehmen willst, dann kannst Du auch glauch xhtml nehmen. Denn xhtml ist eine stark abgespeckte Version von html, welche Formatierungen gar nicht mehr zuläßt.

css-Angaben hardgecodet (also im html-Quelltext) sind auch nicht so wirklich brauchbar, denn sie überschreiben css in separaten Dateien.

Außerdem solltest Du zunächst einmal so eine Art Browser-Reset über css machen (das hat nichts mit resetten oder cache leeren zu tun).

Und die div-Container sollten in vorher fest definierten Bereichen liegen, damit sie nur innerhalb dieses Bereiches positioniert werden können.

Damit schaffst Du Dir die Grundlage für css-Positionierung. Schau Dich mal um nach diversen Layouts, Templates usw.

Eine schöne Seite ist auch
css Zen Garden: The Beauty in CSS Design

Was ich geändert habe?

.main {
margin: -290px 0 0 -450px;

und

.content {
top: 200px;

Das wars schon.

knispel · 28.03.2009

AW: Verschiedene CSS Probleme

quasibodo schrieb:
...
Wenn Du die Formatierung bzw. die Positionierung ausschließlich über css vornehmen willst, dann kannst Du auch glauch xhtml nehmen. Denn xhtml ist eine stark abgespeckte Version von html, welche Formatierungen gar nicht mehr zuläßt.
...

Solche Äußerungen lassen darauf schließen, dass der Autor nicht wirklich weiß, worum es eigentlich geht.

quasibodo · 28.03.2009

AW: Verschiedene CSS Probleme

nanana, knispel...

wie würdest Du es denn für einen Anfänger formulieren, wenn bei xhtml weder Schriftgröße oder Farbe noch sonstwas eingestellt werden sollen, außer über css?
Anfänger interessieren sich auch nicht für MIME-Typen oder dafür, was passiert, wenn "das XHTML-Dokument nach den Regeln von XML verarbeitet wird".

Deine Verlinkung stiftet bei Anfängern eher Verwirrung, als das sie nützt. Nützlich dagegen sind dann eher Erläuterungen wie diese:

Wenn ich eine Seite in XHTML schreibe, dann kann ich sie auch als HTML deklarieren, umgekehrt geht das nicht.

Auf den Gegenbeweis bin ich gespannt.

Yazaa · 28.03.2009

AW: Verschiedene CSS Probleme

Wie auch immer ^^
Problem 1, 2 und 4 hab Ich gelöst. Bleibt noch Problem Nr. 3:

IE Probleme:
3. Der Menueffekt funktioniert nicht richtig, erst wird der Hintergrund in grau dargestellt, man geht rüber und er wird gelb, wird aber nicht wieder grau wenn man rausgeht...

Ich hab das Gefühl, das is nen Bug im IE8?! Der scheint bei :hover Grafiken im Hintergrund nicht neu zu rendern...

lonelyhawk · 28.03.2009

AW: Verschiedene CSS Probleme

bei mir funktioniert das menü im ie7 und im ie8 so wie es soll, also die menüpunkte werden wieder grau wenn man mit der maus nicht mehr darüber ist.

p.s. bevor du die seite jemanden zeigst (auftraggeber) solltest du sie dir nochmal im ie6 anschauen!

Yazaa · 28.03.2009

AW: Verschiedene CSS Probleme

Ja, ich hab nen bisschen recherchiert, und bin derauf gestoßen, dass das Problem wohl mit IE8 RC1 gelöst sein soll. Ich hab nur Windows7 und Kubuntu drauf und für Win7 gibts bissher nur die IE8 Beta. ^^

Aber in IE6 schau ich mir das nicht an.. da fang ich an zu weinen. PNG Bug, :hover effekte, etc pp :'(

lonelyhawk · 28.03.2009

AW: Verschiedene CSS Probleme

Yazaa schrieb:
Aber in IE6 schau ich mir das nicht an.. da fang ich an zu weinen. PNG Bug, :hover effekte, etc pp :'(

dann hoffe ich, dass du kein gewerblicher anbieter bist und/oder geld für das erstellen verlangst. man sollte sich der tatsache bewußt sein, dass noch sehr viele nutzer mit ie6 unterwegs sind! und so schwer ist es nun auch wieder nicht, die seite so zu erstellen, dass sie auch im ie6 ordentlich aussieht.

das menü funktioniert übrigens auch im ie6. und das problem mit den nicht transparenten pngs lässt sich ebenfalls auf mindestens zwei wegen lösen...

Yazaa · 29.03.2009

AW: Verschiedene CSS Probleme

andere frage:
geben wysiwyg editoren wie der fck xhtml aus?