✔ mehrere divs hintereinander

[SuReBuRn]

Hallo!

Will mehrere dvs hintereinander schalten, so, dass sie sich der auflösung anpassen. hier mal ein versuch: http://tl.ffworld.info/index3.html
geht zwar (ff,opera,solaris), sieht im IE aber etwas schäuslich aus... irgendeine idee ?

 

[Maik]

Du solltest dich zunächst mal mit dem Grundgerüst einer HTML-Datei beschäftigen

<link rel="stylesheet" type="text/css" href="style3.css">

<div id="main">
 <div id="header">
 
 
 
 
	<!-- LEFT -->
 	<div id="left">
	<img src="img/cnt/indexfinal3_02.jpg" width="11" height="171" alt="Final Fantasy" /><img src="img/cnt/head/0.jpg" alt="Final Fantasy" width="480" height="171" border="0" />
	</div>
	<!-- LEFT END -->
	
	
	<!-- RIGHT -->
 	<div id="right3">
	&nbsp;
	</div>
	<div id="right2">
	<img src="img/cnt/indexfinal3_06.jpg" width="17" height="171" alt="Final Fantasy" /><img src="img/cnt/indexfinal3_07.jpg" width="11" height="171" alt="Final Fantasy" />
	</div>
	<div id="right1">
	<img src="img/cnt/dummy/1.gif" width="116" height="169" alt="Final Fantasy" border="0" />
	</div>
	<!-- RIGHT END -->
	





 </div>
</div>

Außerdem kann ich keine Darstellungsunterschiede zwischen Firefox, IE und Opera feststellen.

Der Thread wandert in das CSS-Forum, da sich die Frage nicht mit der Auszeichnungssprache HTML beantworten lässt.

 

[SuReBuRn]

problem hab ich mittlerweile auch etwas lösen können. nun hab ich aber das problem, dass sich die gfx verschieben, wenn die fenstergrösse zu klein ist (800x600 z.b.) die grafiken sollen aber schon in einer "linie" bleiben.

Grundgerüst einer html datei ist mir schon bekannt, nur brauch ich für son test keine weiteren deklarationen oder ähnliches

 

[Maik]

Es ist normal, daß sich die Grafiken, respektive floatenden DIVs (nach unten) verschieben, wenn die Fensterbreite gegenüber der benötigten Breite unterschritten wird.

Um dies zu vermeiden, wäre eine fixe Breitenangabe erforderlich.

Anmerkung: ich möchte dich bitten, in deinen Beiträgen auf die Groß- und Kleinschreibung zu achten, siehe hierzu auch die Netiquette Nr.12.

 

[SuReBuRn]

Soviel zu "Barrierefrei" Das heisst, es besteht via DIVs keine Möglichkeit, das Fenster mit dem Design maximal auszunutzen, dabei aber die Seite der Auflösung anzupassen? So wie es mit Tabellen wunderbar funktioniert ?

Blöd wär's ja schon, irgendwie muss man das dch umgehen können ?

 

[Maik]

Die modernen Browsers, zu denen der IE nicht zählt, unterstützen die CSS-Eigenschaft min-width (= Mindestbreite).

 

[SuReBuRn]

Hm... Wie muss ich das denn bei mir anwenden, jeglicher Ansatz schlug soeben fehl
mit overflow will das wohl auch nciht so recht :/

 

[Maik]

Es ist ein Parent-DIV mit der CSS-Eigenschaft min-width erforderlich, in dem die floatenden DIVs eingebettet werden.

 

[SuReBuRn]

Auch wenn ich nicht weiss was ein Parent-DIV wirklich ist, und ich nach geringen Anstrengungen nichts darüber herausgefunden habe (ja ich bin quasi blutiger Anfänger in Sachen DIVs ^^), hab ich's auch so hinbekommen, einfach mit overflow.
das allerletzte Problem (hoffe ich) wäre nun, dass ich den content einpflegen will, siehe http://tl.ffworld.info/index3.html

Nun muss ich es aber irgendwie hinbekommen, dass der Content in der rotumstrichelten Box rechts nicht die Navigation nach unten schiebt. Mit einer Massangabe, width pxoder %passt das, wenn ichs für die jeweilige Auflösung einstelle ganz gut(momentan1280x1024), nur wenn das fenster kleiner wird, schwappt der Layer über und die Layer nebendran, also die Navigation rechts, wird unterbrochen.

Irgendwelche Ideen?

 

[Maik]

Bin gerade in der Mittagspause und habe deshalb nicht die erforderliche Zeit, um dir ein lauffähiges CSS-Modell zu stricken.

Aber zu dem Parent-DIV kann ich schon mal was sagen: parent kommt aus dem Englischen und heißt übersetzt Elternteil, Vorläufer.

Ein Parent-DIV ist also ein Eltern-Element, in dem Kind(er)-Elemente eingefügt werden:

<div id="parent">
  <div id="child1">...</div>
  <div id="child2">...</div>
  <div id="child3">...</div>
</div> <!-- end Parent-DIV -->