Elemente verschieben sich ?

[wolf360]

Hey hab folgendes problem...

ich prog grad a bisl an einer neuen Homepage:

http://burningdeath.bu.ohost.de/

so mein problem ist das wenn ich das Browserfenster kleiner mach, verschieben sich die Elemente untereinander... kann ich das irgendwie machn, das da sein scrollbalken kommt?

gruß wolf360

 

[Efchen]

Bei mir ist auf der Seite nur ein Element, das Menü, und das verschiebt sich natürlich nicht.

Je nachdem, was Du zum Positionieren benutzt, und was für Elemente Du darzustellen versuchst, muss sich das ja verschieben, wenn das Fenster kleiner wird. Horizontale Scrollbalken sind auf jeden Fall nicht ratsam, die stören ungemein beim Lesen.

 

[wolf360]

nehem wir den banner bereich das sind bei mir 2 grafiken... sobald ich das fenster kleiner mach, rutscht das eine unter das andere... und verschiebt somit das design...

aber mit einem Horizonalen Scrollbalken bleibt mein design erhalten.

 

[Efchen]

Also bei mir sind auf der von Dir verlinkten Seite zwar zwei Images oben, aber verschieben tut sich da nichts.

Wenn Du aber argumentierst, dass ein horizontaler Scrollbalken Dein Design schützt, dann solltest Du Dein Design überdenken. Im Web gelten nämlich andere Gesetze als z.B. im Print-Design. Ein ideales Web-Layout passt sich an die Einstellungen im Browser der Nutzer an und sieht somit u.U. bei jedem Nutzer anders aus. Pixelgenaue Layouts sind nicht wirklich WWW-geeignet.

Die Benutzer können unterschiedlich große Browserfenster haben, sie können unterschiedliche Einstellungen für die Schriftgröße haben, usw. Und trotzdem erwarten sie von einer Website immer, dass sie sie mit ihren Einstellungen angenehm nutzen können. Dazu gehört auch, dass sie keinen horizontalen Scrollbalken bekommen, weil das das Lesen einer Website enorm beeinträchtigt und dann alles keinen Spaß mehr macht.

Interessant zum Thema Usability ist u.a. diese Site: Best Viewed with / Optimiert für ... Webdesign und Usability

Mir erschließt sich allerdings auch nicht ganz, warum Du jedes der beiden Images in ein div packst und die beiden dann floatest. <img> ist ein Inline-Element. Wenn Du zwei Images nebeneinander stellst, dann werden sie auch nebeneinander angezeigt. Du packst ein Image aber nun in ein allgemeines Block-Element und erreichst damit, dass sich das Element über die volle Breite erstreckt, also noch ein Image gar nicht daneben passt. Dann benutzt Du float, um wieder den Zustand herzustellen, den Du ohne die ganzen divs nicht hättest, nämlich dass beide Block-Elemente nebeneinander stehen.
Ich weiß zwar nicht, warum sich die Images bei mir nicht untereinander darstellen, aber wenn Du zwei Elemente (ob float oder Inline) nebeneinander stellst, und für das zweite kein Platz mehr ist, dann rutscht es nunmal in die nächste Zeile. Ach so, ja, Du packst das dann nochmal in ein div und gibst dem div eine feste Breite. Deswegen rutscht da nichts zusammen und Du hast den Effekt, den Du eigentlich willst: horizontale Scrollbalken.

Auf die div#ecke_oben und div#banner kannst Du in jedem Fall verzichten.

Und Du solltest etwas mehr auf Deine Semantik achten, Du bist auf dem besten Wege, div-Suppe zu kochen, aber das nur so am Rande.

Gruß,
-Efchen

 

[SimonRue]

aber mit einem Horizonalen Scrollbalken bleibt mein design erhalten.

Und was stört dich daran?
Es gibt zwei Möglichkeiten den kompletten Inhalt einer Seite lesen zu können, wenn der Browser nicht breit genug ist.

1. Man scrollt
2. Die komplette Seite wird zusammengequetscht und untereinander dargestellt.

Ich finde da 1. angenehmer..

 

[Efchen]

Dann gehörst Du eben zu einer Minderheit, sowas gibts zu Hauf! :-)

 

[wolf360]

okey, danke für die hilfe.

dann werd ich mich mal an die Arbeit machn.

gruß wolf360

 

[wolf360]

ich wollte etz kein neues Thema eröffnen deswegn stell ich meine Frage lieber hier rein:

ich habe immernohc ein problem mit der seite,

oben beim Banner bekomme ich die lücke zwischen den Bilder nicht raus? Ich habe border, margin und padding auf 0 trotzdem is da eine kleine Lücke....

gruß wolf360

 

[neuroleptika]

Das ist das inline-Verhalten von img.
Zeilenubrüche werden als Leerzeichen ausgegeben.
Entweder du schreibst beide <img> ohne Leerzeichen in eine Zeile oder du nimmst einem der Elemente diese inline-Eigenschaft weg.
hier mit float:

<img src="bilder/olinks.gif" style="border-color: blue; margin: 0px; [COLOR=DarkRed]float: left;[/COLOR]"/>
<img class="banner" border="0" src="../bilder/banner.gif"/>

Allerdings würde ich das nicht so machen.
Zumindest das erste Bild gehört eigentlich nicht ins html. Es ist ein reines Zierbild für das Layout und sollte mit css als background-image eingefügt werden.
Ich würde sogar für beide css-background-image verwenden.

In den img-tags fehlen die alt-texte

 

[wolf360]

danke für die hilfe, und gleich ein neues problem:

ich will das das hintergrundbil automatisch verlängert wenn der inhalt zu groß wird...

deswegn die angaben mal so gmacht:

background-image:        url(../bilder/inhalt.gif);
width:                   800px;
height:                  auto;
background-repeat:       repeat;
overflow:                visible;
display:                 block;

aber das Hintergrundbild wird nicht angezeigt, aber warum, das Bild wird nur angezeigt, wenn ich dem "Kasten" eine feste Höhe gebe... aber dann funktioniert das mit dem overflow irgendwie nicht??

gruß wolf360

 

[neuroleptika]

...
ich will das das hintergrundbil automatisch verlängert wenn der inhalt zu groß wird...

#gesamt hat keine Höhe. Normalerweise nimmt ein Blockelement ohne height-Angabe die Höhe der darin enthaltenen Inhalte an. Deine Box enthält aber nur gefloatete Elemente. Sie geben ihrem Elternelement keine Höhe.
Um das zu ändern mußt du clearen.
Entweder mit einem weiteren Element vor dem schließen von #gesamt oder du fügst über css ein Inhalt ein der die Eigenschaft clear: both; bekommt.

Hier mal komplett über css:

#gesamt{
background-image: url(../bilder/inhalt.gif);
width: 850px;
background-repeat: repeat;
background-color: blue;
}

[COLOR=DarkRed]#gesamt:after {
display: block;
content: "clearer";
clear: both;
height: 0;
visibility: hidden;
}[/COLOR]

In den meisten Browser reicht das schon.

Internet Explorer kennen bis heute kein :after.
Dafür clearen sie automatisch wenn das Element eine Höhenangabe hat:

/*für IE6:*/
* html #gesamt {
height: 1px;
}
/*für IE7*/
* +html #gesamt {
min-height: 1px;
}

IE5 und IE6 kennen min-height nicht, stellen height aber wie min-height da.
Der IE7 würde height wörtlich nehmen. Darum bekommt er min-height.

Damit dürfte es in allen wichtigen Browsern funktionieren. Zumindest ab ff1.0 und IE5(win).