Antworten zum Thema „Hilfe bei erstem Div versuch“

captainthriller · 21.11.2006

Hallo zusammen
ich habe soeben mein erstes layout mit divs erstellt ...
dies ist leider nur für mozilla firefox optimiert .. und ich weiß nicht warum das im ie anders aussieht (navi buttons von der breite her kleiner) ... ich bitte euch (die CSS freaks

) mal nachzugucken, was ich am stylesheet falsch gemacht hab bzw was man besser machen muss ... wäre echt nett

hier der Link

ich habe mir das selbst beigebracht auf www.css4you.de ... also ist noch lange nicht perfekt

danke schon mal im vorraus!

katy1981dd · 21.11.2006

Browser interpretieren boxmodelle unterschiedlich.
das problem wirst du sicher noch häufiger haben.

sinnvoll - meiner meinung nach - wäre es eine browserweiche zu integrieren.
dies kannst du über php oder java machen.
findet man viele codeschnipsel über google.

wenn du browserweiche mit eingebracht hast kannst du verschiedene stylesheet-klassen aufrufen.

is ne hilfreiche sache und garantiert so das es in den browsern gleich ausschaut und man manche kompromisse übergehen kann

lg

katy

mammimonstA · 21.11.2006

Browserweiche mit PHP & Java? :eek:

Es wäre vielleicht doch besser die Standardweichen wie Conditional Comments oder die CSS Hacks zu benutzen...

Edit: Was seh ich denn da, eine hübsche Coderin bei uns im Forum? Und dann noch aus Sachsen? Ich sach mal nur Herzlich Willkommen! :lol:

captainthriller · 21.11.2006

hm .. aber muss doch auch anders gehen oder? ... weil ich habe mir mal irgendwann als ich meine erste hp entworfen habe nen freetemplate runter geladen ..... und eigentlich habe ich das nach dem gleichen muster gemacht ... (die rollover effekte) und bei dem freetemplate sieht das in allen browsern gleich aus ... wenn jemand helfen kann wär ich sehr dankbar

kleinerVampir · 21.11.2006

arbeite mal mit Klassen anstatt mit ID`s weil IE und FF die ID`s unterschiedlich interpretieren.

also anstatt zb:

div#unten { ... }

verwendest du

div.unten { ... }

und bei der Zuweißung anstatt von

<... ID="unten" ...>

dann eben

< ... CLASS="unten" ...>

captainthriller · 21.11.2006

ok werd ich morgen mal versuchen ....

Noch ne Frage:

wie kann ich das mit den divs so gestalten, dass das layout sich nach untenhin verlängert, falls man mehr text einfügt, als in den content bereich passt?

Das habe ich auf css4you.de nich gefunden ...

KillePille · 21.11.2006

1. Browserweich ich quatsch ! Alles kann auch im ie genauso aussehen wie imm ff !
Falls du morgen noch das Problem hats helf ich dir.
Die beiden interpretieren das padding oder das margin manchmal unterschiedlich.
Ich weiss jetzt gerade nicht was von beiden. Noch ein Tip validier mal deinen code
da kannste schon oft fehler sehen. Versuch mal damit beides gleich aussieht mit
display zu arbeiten entweder inline oder block

2. Das mit dem Textnach unten lässt sich lösen indem du den divs indem die/der Text
liegt keine höhe gibst.

Tim · 22.11.2006

kleinerVampir schrieb:
arbeite mal mit Klassen anstatt mit ID`s weil IE und FF die ID`s unterschiedlich interpretieren.

Und dafür würde ich gern mal ne Quelle sehen..

ID bezeichnet Elemente eindeutig, heißt, es darf nur einmal pro Dokument verwendet werden und Klassen sind keine eindeutigen Bezeichnungen sondern kann man eher als Zuordnung zu einer Gruppe betrachten.

mammimonstA · 22.11.2006

~ und genau deswegen "interpretieren" die beiden gen. Browser IDs sicher manchmal unterschiedlich: FF lamentiert gegen die mehrfache Verwendung einer ID und der IE wieder mal nicht...

Man sollte also wissen, wann setze ich ID, wann Klasse und wann auchmal was HTML-Konformes ein(es gibt auch noch <h1>,,uvm.)...

LG,
-Kevin

captainthriller · 22.11.2006

KillePille schrieb:
1. Browserweich ich quatsch ! Alles kann auch im ie genauso aussehen wie imm ff !
Falls du morgen noch das Problem hats helf ich dir.
Die beiden interpretieren das padding oder das margin manchmal unterschiedlich.
Ich weiss jetzt gerade nicht was von beiden. Noch ein Tip validier mal deinen code
da kannste schon oft fehler sehen. Versuch mal damit beides gleich aussieht mit
display zu arbeiten entweder inline oder block

2. Das mit dem Textnach unten lässt sich lösen indem du den divs indem die/der Text
liegt keine höhe gibst.

mit dem display bei den hover effekten habe ich ja schon gearbeitet ... soll ich dann einfach mal inline anstatt block nehmen?

zu 2. ...
ok ... weißt du auch zufällig wie man dann die navi genau so hoch gekommt wie den content? ... also das etwas heller graue unter den buttons ... das auch einfach ohne höhe und das verlängert sich dann auch soweit, wie der content bereich?!

danke für eure tipps

...

KillePille · 23.11.2006

1. Versuchs mal einfach. Ich hab ja gesagt erst versuchen dann helf ich.

2. Nein, das würde nicht gehen, aber da hab ich einen Trick.
Du hast ja eine feste breite für die Seite.
Mach ein Div mit der breite der seite. Dann gibste dem div ne class.
So nun entwierfst du ein Hintegrund bild das so lang ist wie der content+die
navi(sprich so lang wie die Seite). So das bild hat die Höhe von 1px.Der linke Teil
des Bildes hat den Hintergrund des Content und der rechte den hintergrund der
navi (sprich diese hellgraue Farbe). Dieses Bild wird nun das background-image
deines divs. Du kannst das div ja über die class anspreechen. das div bekommt
nun background-repeat: repeat-y (oder x) --> guckste bei css4you . In das di
packste nun das content div und das navi div und schon passt alles.

DJ Fotoart · 23.11.2006

KillePille schrieb:
1. Versuchs mal einfach. Ich hab ja gesagt erst versuchen dann helf ich.

2. Nein, das würde nicht gehen, aber da hab ich einen Trick.
Du hast ja eine feste breite für die Seite.
Mach ein Div mit der breite der seite. Dann gibste dem div ne class.
So nun entwierfst du ein Hintegrund bild das so lang ist wie der content+die
navi(sprich so lang wie die Seite). So das bild hat die Höhe von 1px.Der linke Teil
des Bildes hat den Hintergrund des Content und der rechte den hintergrund der
navi (sprich diese hellgraue Farbe). Dieses Bild wird nun das background-image
deines divs. Du kannst das div ja über die class anspreechen. das div bekommt
nun background-repeat: repeat-y (oder x) --> guckste bei css4you . In das di
packste nun das content div und das navi div und schon passt alles.

*E-R-R-O-R*

Ich glaub so sprachlos war ich seit der Entdeckung von CSS nicht mehr...

*shutdown -a*

captainthriller · 23.11.2006

@bahamut ... haste nen besseren vorschlag?^^

ich probiere einfach mal aus ... danke für die tipps

captainthriller · 23.11.2006

kleinerVampir schrieb:
arbeite mal mit Klassen anstatt mit ID`s weil IE und FF die ID`s unterschiedlich interpretieren.

also anstatt zb:

div#unten { ... }

verwendest du

div.unten { ... }

und bei der Zuweißung anstatt von

<... ID="unten" ...>

dann eben

< ... CLASS="unten" ...>

habe das mal ausprobert ... die buttons sind immer noch gleich ...
ich glaube nur das der IE das padding-left: 10px und das width: 105px nicht addiert ... weil wenn ich bei width: 115px eingebe, sieht es im ie normal aus und im mozilla ist der link zu groß ^^ HILFE

Code:

div.navi a:link, div.navi a:visited {
	display: block;
	text-decoration: none;
	background-image:url(images/button_d.jpg);
	font-size: 12px;
	color: #000000;
	padding-left: 10px;
	width: 105px;
	padding-top: 4px;
	padding-bottom: 4px;

das ändern von display: block; in display: inline; ändert die links so, das sie alle durcheinander sind ^^ ... in beiden browsern ...

ich versteh das nicht :-(

EDIT:

Also ich habe jetzt folgendes gemacht ....
das padding-left: 10px .. ganz entfernt ... dafür width: 115px

das hat natürlich den nachteil, das die links direkt rechts an der kante stehen ... sieht ja doof aus ... dann habe ich in html & (leerzeichen) eingefügt .. .sieht natürlich doof aus ... kann ich das noch anders lösen?

....

als nächstes kommt jetzt noch das problem mit der verlängerung nach unten ... teste ich auch aus....

captainthriller · 23.11.2006

sooo .... wieder eine frage ...

habe das layout jetzt soweit fertig ... fast alles paletti ...

das einzige problem ist, das das div, indem sich content und navi befinden, nicht "durchsichtig" ist ... das heißt die hintergrund grafik des großen divs hinter navi und content wird unterhalb der navi nicht angezeigt .... wie kann ich das ändern?^^ im IE ist alles perfekt ... nur nich im mozilla

((

Link:

hoffe das kann jemand feststellen^^

KillePille · 23.11.2006

Pack den text nicht in Tabellen formatier Ihn mit nem p. Hast ja leider nicht meine Lösung probiert. So hätts aussehen sollen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="test_style_2.css" />
<title>DIV Test</title>
</head>
<body>

<div id="alles">
<div id="banner"></div>
<div class="contenframe">
<div id="content">

BlindText BlindText

BlindText BlindText

BlindText BlindText

BlindText BlindText

BlindText BlindText

BlindText BlindText

</p>
</div>
<div class="navi">
»&Home
»&About
»&Bilder
»&Links
»&Kontakt
»&Impressum
</div>
</div>
<div id="footer"></div>
<div id="unten"></div>
</div>
</body>
</html>

Erstell mal das Image so wie ich gesagt hab, mach das auch immer. Und ich hab das von professionellen Leuten erfahren. Ist leichter und guter valider Weg.