Problem mit Darstellung (CSS)

sub_hero92 · 22.01.2009

Ich habe mir mit Dreamweaver eine Berwerbungshomepage erstellt. Nun gibt noch ein paar Probleme mit der Darstellung der Links. *help*

PHP:

...
<body>
<div id="frame">
   <div id="over_navi">
      <p><a href="#">Kontakt</a></p>
   </div>
      <div id="main_navi">
         <div id="main_navi_akt"><a href="home.php">Allgemein</a></div>
         <div id="main_navi2"><a href="#">Firmen A-M</a></div>
      </div>
      <div id="sub_navi">
         <div id="sub_link"><a href="home.php">Startseite</a><div>
         <div id="sub_link"><a href="lebenslauf.php">Lebenslauf</a><div>
      </div>
 
   <div id="inhalt">bla...bla...</div>
      <a href="javascript:NachOben()">
      <div id="scroll_up" title="zum Seitenanfang"></div></a>
   <div id="short">bla...</div>
</body>

******CSS******

Code:

#over_navi  {
 background: url(../over_navi.gif);
 height: 25px;
 width: 95px;
 margin-left: auto;
 margin-right: 35px;
 text-align: center;
}
 
#over_navi:hover {
 background: url(../over_navi-hover.gif);
 }
 
#over_navi a:link, a:visited, a:hover.. {
 font-family: sans-serif;
 font-size: 12pt;
 color: #fff;
 text-decoration: none;
}
 
#main_navi {
 margin: 172px auto auto auto;
 heigth: 36px;
 width: 852px;
}
 
#main_navi2 {
 margin-left: 10px;
 height: 36px;
 width: 135px;
 float: left;
 text-align: center;
 padding-top: 5px;
}
 
#main_navi2 a:link, a:visited, a:hover... {
 font-family: sans-serif;
 font-size: 16pt;
 color: #fff;
 text-decoration: none;
}
 
#main_navi_akt {
 margin-left: 10px;
 heigth: 36px;
 width: 135px;
 float: left;
 text-align: center;
 padding-top: 5px;
}
 
#main_navi_akt a:link, a:visited, a:hover... {
 font-family: sans-serif;
 font-size: 16pt;
 color: #fff;
 text-decoration: none;
}
 
#sub_navi {
 margin: 5px auto auto auto;
 height: 29px;
 width: 852px;
}
 
#sub_link {
 padding-left: 7px;
 margin-left: 18px;
 float: left;
 height: 18px;
 width: auto;
 font-family: sans-serif;
 font-size: 11pt;
 color: #fff;
 border-left: 1px solid #757575;
}
 
#sub_link a:link, a:visited {
 font-family: sans-serif;
 font-size: 11pt;
 color: #fff;
 text-decoration: none;
}
 
#sub_link a:hover, a:active, a:focus {
 font-family: sans-serif;
 font-size: 11pt;
 color: #fff;
 text-decoration: none;
}
 
...unwichtig für mein Problem!...

alle link werden beim kluick in den drei verbreitesten Browser kleiner!!
z.B. main_navi wird auf 11pt gesetzt warum??

padalton · 22.01.2009

AW: Problem mit Darstellung (CSS)

installier dir das addon FireBug für Firefox und dann kannst du live sehen welche CSS-Regel er nimmt und kannst CSS auch live editieren bis du zu deinem gewünschten ergebnis kommt... ich würd mal probieren a:active bei #main_navi zu setzen, das hast du nur bei sub_navi gemacht!

sub_hero92 · 22.01.2009

AW: Problem mit Darstellung (CSS)

das mit active mache ich!
doch die bugs sind verschieden: ff läuft am besten. op und ie schlechter!!

padalton · 22.01.2009

AW: Problem mit Darstellung (CSS)

das ist glasklar wenn amn sich die aciid-tests der browser ansieht... am wichtigsten ist für mich immer das ergebnis der W3C-Validierung denn wenn ich da keine fehler habe kann man eindeutig sagen das der Browser den fehler macht und nicht mein code !

sub_hero92 · 22.01.2009

AW: Problem mit Darstellung (CSS)

das problem ist nur, dass ich an dem pc, wo ich programmiere kein inet habe gibt es den ne software zum validieren???

padalton · 22.01.2009

AW: Problem mit Darstellung (CSS)

jop: https://addons.mozilla.org/de/firefox/addon/249

sub_hero92 · 22.01.2009

AW: Problem mit Darstellung (CSS)

validiert dass nur html?? oder gibts sowas auch für css?

padalton · 22.01.2009

AW: Problem mit Darstellung (CSS)

und wie schon gesagt ist Firebug für Firefox ein absolutest muss für jeden WebDesigner.
Seitdem ich FireBug entdeckt habe fallen mir einige Fehler leichter zu finden und websites zu analysieren und zu zerlegen macht mit Firebug echt spaß.
Vorallem kannst du alles live verändern !

css.. hmmm.. ja :

ups... nö der ruft auch nur den online-validator auf ... sry

sokie · 22.01.2009

AW: Problem mit Darstellung (CSS)

Was alle drei Browser gemeinsam haben ist die Tatsache, dass sie für die Bildschirmausgabe gedacht sind. Hier wäre eine Schriftrössenangabe in px gut. (pt mm cm etc eigenen sich eigentlich eher für Printmedien)

Code:

#main_navi_akt {
 margin-left: 10px;
 heigth: 36px;/* sollte height sein!*/
 width: 135px;
 float: left;
 text-align: center;
 padding-top: 5px;
}

sub_hero92 · 22.01.2009

AW: Problem mit Darstellung (CSS)

heigth: 36px;/* sollte height sein!*/

Tipfehler
Mit Pixeln hab ich das selbe Prob!! *help*

dotpitch · 22.01.2009

AW: Problem mit Darstellung (CSS)

Ahoi, hab jetzt nur gesehen das du id´s mehrfach vergeben hast! Fehler, deswegen isses ja ne id und keine class. Warum gibst du die Fontsize in pt und nicht in px an?

Greetz

sub_hero92 · 22.01.2009

AW: Problem mit Darstellung (CSS)

selbt wenn ich es in ne class schreibe, denke ich, dass das pro dann immer noch bestehen wird.
pt, weil ich das in PS so layoutet habe. wie kann ich pt denn in pixel umrechnen?

sokie · 22.01.2009

AW: Problem mit Darstellung (CSS)

ich sehe keine mehrfachen IDs

pt, weil ich das in PS so layoutet habe. wie kann ich pt denn in pixel umrechnen?

genau da ist ja das Problem. das kann man nicht so einfach sagen, weil es theoretisch durch Grösse und Auflösung des Anzeigegeräts variiert. Leg doch einfach deine Grösse in px fest. wenn es zu klein ersheint machst du es einfach grösser.

sub_hero92 · 22.01.2009

AW: Problem mit Darstellung (CSS)

wenn ich das in px angebe möchte ich, dass des der text vertuikal zentriert ist. ---> vertical align: middle; doch da gibt es einige darstellungsprobs glub im ie - wie immer
die klasse verhällt sich dann genauso wie die id??

sokie · 22.01.2009

AW: Problem mit Darstellung (CSS)

Code:

[COLOR=#000000][COLOR=#007700]      <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"sub_navi"[/COLOR][COLOR=#007700]>
         <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"sub_link"[/COLOR][COLOR=#007700]><[/COLOR][COLOR=#0000bb]a href[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"home.php"[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]Startseite[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]a[/COLOR][COLOR=#007700]><[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
         <[/COLOR][COLOR=#0000bb]div id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"sub_link"[/COLOR][COLOR=#007700]><[/COLOR][COLOR=#0000bb]a href[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"lebenslauf.php"[/COLOR][COLOR=#007700]>[/COLOR][COLOR=#0000bb]Lebenslauf[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000bb]a[/COLOR][COLOR=#007700]><[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>
      </[/COLOR][COLOR=#0000bb]div[/COLOR][COLOR=#007700]>[/COLOR][/COLOR]

hier benutzt du zB eine ID "sub_link" zweimal. das geht so nicht.
du kannst stattdessen class="sub_link" notieren und im css mit dem selektor .sub_link formatieren.
ja, das geht genauso, lässt sich aber auf mehrere Elemente anwenden.
vertical-align ist etwa tricky in der Anwendung und bezieht sich eigentlich nur auf benachbarte inline-elemente zB bild<->text. Zum vertikalen Zentrieren der links würde ich mit padding arbeiten.

ps: der 'heigth - Vertipper' ist mehrmals in deinem css

sub_hero92 · 22.01.2009

AW: Problem mit Darstellung (CSS)

der tippfehler ist aber nicht im org. Quellcode!!
das mit dem padding it auch so ne sache!
nehmen wir an: font-size:12px -- die div ist 20px hoch -- padding:4px;
dann ist der text immer noch nicht vertikal zentriert warum?

padalton · 22.01.2009

AW: Problem mit Darstellung (CSS)

darum gibts ja

dotpitch · 22.01.2009

AW: Problem mit Darstellung (CSS)

Mach dich doch bitte mit den Basics vertraut dann klappt das auch

Greetz

sub_hero92 · 22.01.2009

AW: Problem mit Darstellung (CSS)

das sagt eiun Newbie? ich ´hab die basics drauf nur manche sachen halt noch nicht perfekt!!!

padalton · 22.01.2009

AW: Problem mit Darstellung (CSS)

es gibt verschiedene wege wie man eine darstellung erreichen kann... probier einfach eine andere... zum zentrieren zum beispiel kannst eine div machen und in der ein <p> mit position:absolute;top:50%;height:20px;margin-top:-10px;