Layoutanpassung

Thema wurde von Dampfmann erstellt. Bitte erstelle für dein Problem zukünftig ein eigenes Thema!

Hallo,

nachdem ich das html-Seminar durchgearbeitet habe ist die neue Website fertig und online.Erstellt mit Brackets auf einem iMac.Alle Seiten sind validiert, fehlerfrei.

Auf dem Mac mit Safari sieht alles gut aus, d.h.alle Bilder und Texte an ihrem Platz.Allerdings ist auf einem Windows PC mit Google und Firefox alles anders und durcheinander. Die Website : http://www.fdm-hanau.de Kann da jemand weiterhelfen.

Vielen Dank

Beitrag von basti1012 :

Da hast du dich wohl mit den Thema vertan? Aber zu dein Problem, ich kann das nicht bestätigen,bei mir sieht es in allen Browsern ok aus,ohne Fehler .

Aber zu deiner Css muß ich sagen das die große Sch.... ist. Du hast ja wirklich zu 99% alles mit position:absolute versehen .

EDIT: jetzt sehe ich die Fehler auch die du meintest. Mußte erst rum zappen. Das liegt an deiner Css und den positions Mist. Kuck dir mal das Thema Flexboxen an ,damit wirst du keine Probleme mehr haben und sparst in deinen Fall nee menge Css.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Sieht am anfang vieleicht erst etwas Kompliziert aus, aber das lernt man doch schneller als man denkt und es lohnt sich auch,wenn du das erst einmal verstanden hast kannst du das auch immer wieder gebrauchen.

Schau dir das mal an und bei Fragen ist das Forum auch noch für dich da

Beitrag von Axel :

Hi,

das absolut platzieren ist schwierig - dadurch kommt sehr schnell das Designchaos bei schmäleren Fensterbreiten rein.

Pack einfach deinen Inhalt in einen Bereich (beispiel mit dem Namen "bereichinhalt")

<div id="bereichinhalt">    <div id="walze">     <img src="Bilder/dampfwalze.jpg" width="480" height="360" alt="Dampfwalze von Ohl">    </div>    <div id="lokschuppen">    <img src="Bilder/lokschuppen.jpg" width="480" height="360" alt="Lokschuppen">    </div>    <div id="stammtisch">       Die Website leidet noch an kleinen Kinderkrankheiten, es wird daran gearbeitet.Bitte etwas Geduld    </div>    <div id="text1">                 <p>"Wat is' 'ne Dampfmaschine?"</p>        <p>Eine Dampfmaschine ist eine Wärmekraftmaschine, die Wärmeenergie teilweise in mechanische Arbeit umwandelt.</p>        <p>Die heute industriell verbreitete Bauform ist die Dampfturbine.</p>        <p>Unter einer „Dampfmaschine" wird aber im Deutschen vor allem die Kolbendampfmaschine, eine dampfgetriebene Kolbenmaschine, verstanden. Die Dampfmaschine war die erste Kraftmaschine, die mit fossilen Brennstoffen in Form von Steinkohle betrieben wurde.</p>        <p>Die Entwicklung brachte weit gefächerte Anwendungen mit sich wie z.B. Dampflokomotiven, Dampftraktoren, Dampfpflüge, Lokomobile und Dampfloks. Und dieser Technik schenken wir in unserem Dampfmuseum die Aufmerksamkeit, die sie noch nach so vielen Jahren verdient.</p>       </div>
</div>

Und in CSS auf jeden Fall deine position: absolute; rauswerfen - alle - überall

#nav { /* position: absolute; */

Und keine festen Breiten vergeben - das macht nur Stress bei kleineren Fensterbreiten!

#text1 {    /* position: absolute; */    background-color: antiquewhite;    border: 2px solid black;    /* width: 1000px; */

Deine Steuerung lässt du umfließen:

#nav {    /* position: absolute; */    float: left;    width: 250px;    text-align: left;    margin-top: 10px;    margin-bottom: 100px;    margin-right: 25px;
}

Und jetzt gibst du dem neuen Bereich #bereichinhalt noch einen Außenabstand margin-left mit

#bereichinhalt {    margin-left: 300px;    border: 2px solid red;
}

Dann tut das

Ich habe um deinem Inhaltsbereich einen roten Rahmen gezeichnet, dass du siehst, was da Sache ist.

Die Lok und Walzenbilder habe ich dir noch im "Chaos" gelassen, dass du was zum üben hast

Es sind also nur folgende Änderungen:

- /* position: absolute; */ über raus:

- Steuerung floaten

- neuen Bereich für allen Inhalt

- diesen neuen Bereich mit Außenabstand nach links (größer als Steuerung).

Man kann ja Flexboxen einsetzen - aber genauso gut ist die alte Technik mit float (die man immer mal wieder braucht - z.B. auch für deine Bilder, damit die Sauber im Inhalt dann kommen. Daher ist es wichtig, die Technik verstanden zu haben. Daher "steuer" ich ein wenig gegen basti.

Wenn deine bisherige Form funktioniert, kannst du auch mit Flexboxen herumspielen - eine Anleitung dazu findest du auch im HTML-Seminar unter https://www.html-seminar.de/css-flexbox.htm

Viel Erfolg

Beitrag von Arne Drews :

Nö, float macht für Layouting keinen Sinn und ich finde es eigentlich auch sünde, dass man das vorschlägt, nachdem schon der Hinweis auf das Flex-Modell gekommen ist. float zum Layouten wird nur von denen genutzt, die flex noch nicht wirklich verstanden haben.

Beitrag von basti1012 :

Mir ist auch noch aufgefallen das du immer wieder die gleichen Angaben machst.

Ich meine du hast ja #text1,#text2 ,#text3 ...usw. Da sind überall die gleichen Angaben drinne bis auf deine Positionsangaben.Da die bei Flexbox und auch beim Floaten wegfallen ,könntest du dann eine Klasse raus machen.

<style>
.texte{    color:red;    border:1px solid green;    background:orange;
}
</style>

und überall ,wo die Angaben greifen sollen schreibst du dann die Klasse dazu

<p class="texte">Lorem ipsum is wieder da</p>

dadurch ersparst du dir eine menge Css und es wird für dich und deine helfer übersichtlicher. Es hat auch noch ein Vorteil.Wenn du mal zb eine andere Schriftgröße oder so ändern möchtest,brauchst du nur eine Angabe ändern und nicht 100 oder so.

PS: In deiner Galerie hast du ja alle Bilder untereinander. Vieleicht solltest du mal nach einen Slider oder irgendwelche anderen Scripten kucken die Bilder anzeigen. Dann sieht das besser aus und man könnte das dann auch so machen das immer nur das Bild geladen wird was gerade angezeigt werden soll. Das spart ladezeit und es sieht Ordentlicher aus und man muß nicht ewig scrollen.

Aber das muß jeder selber wissen wie er das macht