HP in Firefox optimal, im IE verschoben

HP in Firefox optimal, im IE verschoben

Beitragvon hasimaus » 29.06.2011, 19:38

Hallo liebe Forenmitglieder,

ich habe ein Problem, das mich auf die Palme bringt.
Ich habe mir meine Homepage erstellt und sie wird im Firefox so angezeigt, wie ich sie haben möchte.
Jetzt habe ich die Homepage im Internet Explorer geöffnet und alles ist verschoben.

Ich würde mich sehr über Hilfe freuen, da ich nicht weiß, wo mein Fehler liegt.
Falls irgendetwas grundlegen anders ist, ich freue mich über jede Art von Anregung!

Erstmal hier der Link zur HP:
http://one-glimpse.com/CINUX/kurt1.html
Wie gesagt, guckt es euch mal im Firefox an und dann in einem anderen Browser.

Ich gebe hier mal meine Codes raus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="script/style.css">

<title>.:..:.</title>

</head>

<body>

<div id="aussen">

<div id="oben">
<div id="menue">
<h1> home about services contact imprint</h1>
</div>
</div>




<div id="mitte">
<div id="text">
<h2>welcome to xxxxx</h2> <br>
Das hier wird die xxxxx Homepage
Das hier wird die xxxxx Homepage
Das hier wird die xxxxx Homepage
Das hier wird die xxxxx Homepage
Das hier wird die xxxxx Homepage
Das hier wird die xxxxx Homepage
Das hier wird die xxxxx Homepage
Das hier wird die xxxxx Homepage
</div>
<div id="kasten">
<img src="layout/1.jpg" alt="1">
<img src="layout/1.jpg" alt="1">
<img src="layout/1.jpg" alt="1">
<img src="layout/1.jpg" alt="1">
<img src="layout/1.jpg" alt="1">
<img src="layout/1.jpg" alt="1">
</div>
</div>


<div id="unten">
</div>

</div>

</body>
</html>



/* Standard-CSS für Alma Mater */

/*Wichtige Farben:
Higru: #c2c2c2
Schrift: #000000
Braun: #7c7562
*/



html,body,div,h1 {
font-family: "Arial narrow", "Verdana";
text-align:justify;
}


body {
width:100%;
height:100%;
background: #c2c2c2;
}




/*Einteilung*/


#aussen {
width: 1100px;
margin: 0px auto;
}


#oben {
background-image: url(../layout/1oben.jpg);
height: 193px;
margin: -10px 0 0 0;
}



#menue {
padding-top: 75px;
padding-left: 470px;
widht: 1100px;
}



#mitte {
background-image: url(../layout/mitte.jpg);
height: 434px;
margin: -15px 0 0 0;
}

#text {
padding-left: 300px;
padding-right: 200px;

}

#kasten {
position: absolute;
top:470px;
left:240px;
}


#unten {
background-image: url(../layout/1unten.jpg);
height: 119px;
}



/* Schriften*/


h1 {
color: #213081;
font-size:14px;
word-spacing:0.7em;
}

h2 {
color: #213081;
font-size:18px;
font:bold;
}




Was mich im IE stört:
- die Homepage ist nicht mehr mittig
- es ist oben und unten ein Rand entstanden, den ich nicht möchte
- in der blauen Leiste: die Rechtecke sollen rechts mit dem Kasten abschließen
- Menü: es soll knapp über der Linie stehen und ist jetzt genau darauf! Wahrscheinlich wegen dem Rand oben...

Über Hilfe freue ich mich sehr!!
hasimaus
hasimaus
neu hier
 
Beiträge: 13
Registriert: 01.12.2010, 20:14

Re: HP in Firefox optimal, im IE verschoben

Beitragvon sejuma » 29.06.2011, 20:43

Ersetze deinen bisherigen Doctype mit diesem, damit der IE das CSS-Boxmodell korrekt interpretieren kann:
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46

Re: HP in Firefox optimal, im IE verschoben

Beitragvon hasimaus » 30.06.2011, 18:20

Danke sehr! Ersetzt habe ich es jetzt. Ich glaube, es hat sich auch ein bisschen verändert. Dennoch ist es nicht optimal.... leider.

Gibt es eurerseits noch andere Ideen??

Liebe Grüße
hasimaus
hasimaus
neu hier
 
Beiträge: 13
Registriert: 01.12.2010, 20:14

Re: HP in Firefox optimal, im IE verschoben

Beitragvon sejuma » 30.06.2011, 18:51

Mir fallen auf den ersten Blick keine Unterschiede auf.
Bitte ggf. mal die Abweichungen näher beschreiben.

Behebe auch noch diese beiden CSS-Fehler:
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fone-glimpse.com%2FCINUX%2Fkurt1.html
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46

Re: HP in Firefox optimal, im IE verschoben

Beitragvon hasimaus » 04.07.2011, 21:02

Hallo!!

Die Fehler habe ich behoben.
Also im Internet Explorer ist oben ein Rand von ca. 1cm, weswegen alles nach unten verschoben ist. Aber der Rand ist auch unten zu sehen, dabei soll er gar nicht da sein.

Außerdem habe ich jetzt bemerkt, nachdem ich mir die Seite auf verschiedenen Monitoren angeguckt habe, dass die schwarzen Rechtecke nicht an der richtigen Stelle sind. Das letzte Rechteck sollte rechts am blauen Rand abschließen, nicht ganz genau, aber so 1 cm entfernt.
Mit einem großen Monitor schweben die Rechtecke ganz links im Bildschirm...

Hast du eine Idee, warum das so ist?

Liebe Grüße
hasimaus
hasimaus
neu hier
 
Beiträge: 13
Registriert: 01.12.2010, 20:14

Re: HP in Firefox optimal, im IE verschoben

Beitragvon hasimaus » 04.07.2011, 21:47

Hallo,

ich habe heute wieder ein bisschen rumgebastelt und habe die Homepage soweit stehen.
Was mich allerdings stört, dass die Homepage bei großen Bildschirmen in der Mitte aufhört, weil sie zu kurz ist. Wie kann ich den untersten div so hinbekommen, dass er individuell immer mindestens bis zum Ende der Seite geht??

Ich bedanke mich im Voraus für die Hilfe!
hasimaus
hasimaus
neu hier
 
Beiträge: 13
Registriert: 01.12.2010, 20:14

Re: HP in Firefox optimal, im IE verschoben

Beitragvon sejuma » 05.07.2011, 06:16

Ich hab mir jetzt mal deinen Aufbau etwas näher angesehen:
Dein Hauptfehler ist, dass du offensichtlich von der "Grafikseite" her kommst und das Layout basierend auf vorhandenen Grafiken aufgebaut hast.

Meine Empfehlung ist deshalb folgende:
Nimm aus der Grafik "mitte.jpg" den blauen Bereich raus. Es reicht, wenn du diese Grafik auf wenige px Höhe begrenzt.

Weise diese Grafik dann dem allumfassenden Div #aussen zu. Sie "wächst" dann mit dessen Gesamtinhalt wie hier beschrieben:
Code: Alles auswählen
http://www.ohne-css.gehts-gar.net/0005.php

Wenn du dann #aussen noch eine min-heigt von 100% gibst, sollte die Grafik vertikal immer boldschirmfüllend sein. Stelle dazu html und body auf height: 100%;

Für den Navibereich rechts oben brauchst du keine Grafik.
Verwende hierzu eine ul-Liste mit einem roten border-top.
Code: Alles auswählen
http://www.ohne-css.gehts-gar.net/0073.php


Anstelle der bisherigen blauen Grafik im Mittelteil verwende einen Div oder ebenfalls eine Liste mit entsprechender Höhe und blauem Background.

Fazit:
Weg vom "Grafikdenken", hin zur groben Bereichsgliederung.
HTML-Elemente entsprechend deren Zweck verwenden und ihr Layout soweit möglich mit CSS gestalten.
Bild
sejuma
Vielposter
 
Beiträge: 805
Registriert: 15.07.2009, 17:46

Re: HP in Firefox optimal, im IE verschoben

Beitragvon hasimaus » 09.07.2011, 10:27

Vielen Dank!
Ich werde mich dann heute mal hinsetzen und versuchen, deine Tipps zu verwirklichen!!
hasimaus
neu hier
 
Beiträge: 13
Registriert: 01.12.2010, 20:14

Re: HP in Firefox optimal, im IE verschoben

Beitragvon hasimaus » 11.07.2011, 20:45

So, es hat sich wieder einiges getan.
Und zwar habe ich deinen Tipp mit dem blauen div umgesetzt.

Code: Alles auswählen
/* Standard-CSS für Alma Mater */

/*Wichtige Farben:
Higru: #c2c2c2
Schrift: #000000
Braun: #7c7562
*/


* {
margin:0;
padding:0;
}

html,body,div,h1 {
font-family: "Arial narrow", "Verdana";
text-align:justify;
height:100%;
}


body {
width:100%;
height:100%;
background: #c2c2c2;
}




/*Einteilung*/


#aussen {
width: 1100px;
margin: 0px auto;
}


#oben {
background-image: url(../layout/1oben.jpg);
height: 193px;
}



#menue {
padding-top: 75px;
padding-left: 470px;
}



#mitte {
background-image: url(../layout/mitte.jpg);
min-height: 100%;
}

#text {
padding-left: 300px;
padding-right: 200px;

}

#kasten {
width: 1100px;
height: 110px;
word-spacing:0.5em;
background-image: url(../layout/blau.jpg);
padding-left:170px;
padding-top: 30px;
margin-top:-450px;
}


#unten {
background-image: url(../layout/1unten.jpg);
height: 119px;
}



/* Schriften*/


h1 {
color: #213081;
font-size:14px;
word-spacing:0.7em;
}

h2 {
color: #213081;
font-size:18px;
font-weight:bold;
}


Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="script/style.css">

<title>.:..:.</title>

</head>

<body>

<div id="aussen">

<div id="oben">
<div id="menue">
<h1> home about services contact imprint</h1>
</div>
</div>




<div id="mitte">
<div id="text">
<h2>welcome to xxxxx</h2> <br>
Das hier wird die xxxxx Homepage
Das hier wird die xxxxx Homepage
Das hier wird die xxxxx Homepage
Das hier wird die xxxxx Homepage
Das hier wird die xxxxx Homepage
Das hier wird die xxxxx Homepage
Das hier wird die xxxxx Homepage
Das hier wird die xxxxx Homepage
</div>
<div id="kasten">
<img src="layout/1.jpg" alt="1">
<img src="layout/1.jpg" alt="1">
<img src="layout/1.jpg" alt="1">
<img src="layout/1.jpg" alt="1">
<img src="layout/1.jpg" alt="1">
<img src="layout/1.jpg" alt="1">
<img src="layout/1.jpg" alt="1">
</div>
</div>


<div id="unten">
</div>

</div>



</body>
</html>



Es sieht auch ganz gut aus.
Allerdings entsteht ganz rechts noch ein kleines Fleckchen blau, was dort eigentlich nicht hingehört. Habe ich irgendetwas falsch gemacht?

Was mich auch wundert ist, dass der blaue div nicht automatisch nach dem Text kommt sondern von Natur aus ganz unten. Habe ihm jetzt padding- Anweisung gegeben, weshalb er bei mir jetzt oben ist. Bei dir auch?

Vielleicht könntest du mir nochmal helfen?

Liebe Grüße
hasimaus
hasimaus
neu hier
 
Beiträge: 13
Registriert: 01.12.2010, 20:14

Re: HP in Firefox optimal, im IE verschoben

Beitragvon hasimaus » 11.07.2011, 20:47

Habe gerade gemerkt, der blaue div bleibt immer im Abstand von den angegebenen pixeln stehen, ist aber abhängig von der bildschirmeinstellung immer wo anders...
Wie kann ich es eingeben, dass er direkt nach dem Text kommt??
hasimaus
neu hier
 
Beiträge: 13
Registriert: 01.12.2010, 20:14

Re: HP in Firefox optimal, im IE verschoben

Beitragvon hasimaus » 11.07.2011, 21:39

Okay, es hat sich wieder einiges verändert. Aktuell ist noch der Ort des blauen divs. Gelöst habe ich glaube ich das Problem mit dem blauen Fleckchen.

Wie findest du das Menü jetzt? Habe es mit dem Listen-Tool gemacht.

Es ist wahrscheinlich aktueller, wenn du dir die Codes über den Seitenquelltext anschaust.

Liebe Grüße und danke sehr!
Miriam
hasimaus
neu hier
 
Beiträge: 13
Registriert: 01.12.2010, 20:14


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "HP in Firefox optimal, im IE verschoben"

Zurück zu: Homepage-Check

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste