Probleme mit dem Umbruch

Tream.

Hallo liebe Community,
ich arbeite an einer meiner Homepages, doch nun stellt sich mir ein Problem:
Ich habe die Website auf die Auflösung "1152x864" optimiert, so das die Seite bei anderen auflösungen falsch angezeigt wird.
Meine Seite ist wie folgt aufgebaut:

[Blockierte Grafik: http://www.kajakzone.de/homepage.jpg]

3 und 4 Ist die Seite selber, dieser Teil soll genau in der Mitte sein, jeweils rechts und links daneben sind die Nummern 1,2 // 5,6.
2 // 5 ist eine "Schattengrafik" und 1//6 ein einfacher Hintergrund.

Mein top-Zeil wäre es: Die Hauptseite ist immer in der Mitte (3,4), der Rest passt sich automatisch der Auflösung hin, bzw. wird nicht umgebrochen.

Ist das möglich? Wenn ja, wie?

Ich arbeite mit Dreamweaver 8.0.

Vielen Dank an Alle die mir Helfen

*Icq/msn np*

chris90night

Mach halt Prozentangaben, also statt width:800px; einfahc schrieben, width:50&; oder so. So automatische Anpassungen funktionieren nur mit Prozentangaben für die div´s.

Gruß

Also, hab in der Mitte jeweils 160+620px (780px). Das soll ja auch so bleiben, was soll dann in die tabellen jeweils "am rand"? 50% ?

danke

tream

sejuma

Du kannst die Seite jeweils bildschirmfüllend konstruieren, indem du den einzelnen Elementen einen prozentualen width-Wert zuordnest. Die Summe darf maximal 100% ergeben, besser etwas weniger.
Die zweite Alternative wäre, für die gesamte Seite (Teile 1-6) eine fixe Pixel-Breite zu definieren. Diese kannst du dann per CSS zentrieren

Tream.

Zitat von sejuma

Du kannst die Seite jeweils bildschirmfüllend konstruieren, indem du den einzelnen Elementen einen prozentualen width-Wert zuordnest. Die Summe darf maximal 100% ergeben, besser etwas weniger.
Die zweite Alternative wäre, für die gesamte Seite (Teile 1-6) eine fixe Pixel-Breite zu definieren. Diese kannst du dann per CSS zentrieren

Genauso habe ich mir das auch vorgestellt (möglichkeit 1).
Doch die Frage die für mich offen bleibt ist was ich für die Hauptteile (3,4) eingeben muss?!

anspiUCNapufn9

du könntest es so machen:

Code

<div style="width: ABCpx;
	height: DEFpx;
	position:absolute;
  	top:50%;
  	left:50%;
  	margin-left:-0,5ABCpx;
 	margin-top:-0,5CDEpx;
  	border: 0px;
         vertical-align: middle;"><div width="Breite von Nummer 3 " height="Höhe von Nummer 3 "style="float:left;"</div><div width="Breite von Nummer 4 " height="Höhe von Nummer 4 "style="float:right;"</div></div>

Für ABC gibst du die Breite deiner beiden Teile zusammen (3+4) und für CDEdie Höhe von 3 oder 4 (sind ja gleich hoch) ein. Bei 0,5ABC gibst du die hälfte von ABC und bei 0,5DEF die hälfte von DEF ein.

Hoffe das is verständlich

LG

Tream.

Erstmal vielen Dank für deine Hilfe.
Der Code müsste dann für mich so aussehen, oder hab ich was falsch gemacht? (Denk aber nicht, war super beschrieben xD) :

Code

<div style="width: 780px;
   height: 940px;
   position:absolute;
     top:50%;
     left:50%;
     margin-left:-390px;
    margin-top:-470px;
     border: 0px;
         vertical-align: middle;"><div width="160px" height="940px"style="float:left;"</div><div width="630px" height="940px"style="float:right;"</div></div>

Jetzt habe ich aber das Gefühl das ich den ganzen Code an der falschen Stelle eingesetzt habe,
Den der Umbruch findet immer noch Statt^^

Hier mal der wichtigste (erste) Teil des Quellencodes, hoffe du kannst mir sagen an welche Stelle der Code muss, bzw. obs so richtig ist.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Stil2 {
	font-family: Tahoma, Verdana, Arial;
	font-weight: bold;
	font-size: 10px;
	color: #000000;
}
-->
</style>
</head>


<body>
<table width="34" height="3%" border="0" align="left" cellpadding="0" cellspacing="0" id="1">
  <tr>
    <th width="30" height="950" align="center" valign="top" nowrap="nowrap" background="images/bg.gif" scope="row"><table width="160" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th width="50%" nowrap="nowrap" background="images/bg.gif" scope="row">


</p>



</p></th>
      </tr>
    </table></th>
    <th width="10" align="center" nowrap="nowrap" background="images/bg_left.gif">[img]images/bg_left.gif[/img]</th>
  </tr>
</table>
 <table width="200" border="0" align="left" cellpadding="0" cellspacing="0" id="2">
   <tr>
     <div style="width: 780px;
   height: 940px;
   position:absolute;
     top:50%;
     left:50%;
     margin-left:-390px;
    margin-top:-470px;
     border: 0px;
         vertical-align: middle;"><div width="160px" height="940px"style="float:left;"</div><div width="630px" height="940px"style="float:right;"</div></div> 

		 <th align="center" valign="top" nowrap="nowrap" scope="row">[img]images/box_1.jpg[/img]</th>
     <th align="center" valign="top" nowrap="nowrap">[img]images/box_2.jpg[/img]</th>
   </tr>

Alles anzeigen

Vielen Vielen Dank für die Hilfe!!

Tream.

Hilffeeeee^^

sejuma

Du kannst innerhalb des zentrierten Containers entweder nur mit Pixelbreiten oder nur mit Prozentbreiten arbeiten. Da der Container auflösungsunabhängig zentriert ist und eine feste Breite hat, spielt die innere Platzaufteilung keine Rolle im Hinblick auf die Auflösung.
Probier's mal nach folgendem Prinzip:

Code

<body style="margin:0; padding:0;width:100%; height:100%;">
<div style="width: 780px;
   height: 940px;
   position:absolute;
     top:50%;
     left:50%;
     margin-left:-390px;
    margin-top:-470px;">




<div style="float:left;width:100px;height:940px;background-color:#C1CDCD"></div>
<div style="float:left;width:25px;height:940px;background-color:#838B8B"></div>
<div style="float:left;width:150px;height:940px;background-color:#FF7F24"></div>
<div style="float:left;width:380px;height:940px;background-color:#CD661D"></div>
<div style="float:left;width:25px;height:940px;background-color:#838B8B"></div>
<div style="float:left;width:100px;height:940px;background-color:#C1CDCD"></div>


</div>


<div style="position:absolute;top:50%;left:50%;margin-top:-340px;margin-left:-265px;width:530px;height:100px;background-color:#f00;"></div>


</body>

Alles anzeigen

Bei der Bannerhöhe ist noch eine Differenz zwischen IE6 und FF. Die Ursache kann ich momentan aber leider nicht finden.

DeadEye

Wie wäre es denn damit? Einige Divs weniger, die Verläufe in den Bereichen 2 und 5 würden durch ein Hintergrundbild mit 840 Pixeln Breite und ca. 5 Pixeln Höhe fortlaufend an den Rändern angezeigt, pro Seite stehen für den Verlauf 30 Pixel zur Verfügung. Ist auch nicht dynamisch, aber auf Bildschirmen mit einer Auflösung von >800 px in der Breite akzeptabel

HTML

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


<html>
<head>
	<title>Untitled</title>
</head>


<body style="margin:0; padding:0; width:100%; height:100%;">


<div style="width:840px; height:940px; margin-left:auto; margin-right:auto; background-color:#CCC;">

	<div style="width:780px; height:100px; background-color:#f00; position:relative; margin-left:auto; margin-right:auto;">
		Header
	</div> 

	<div style="width:780px; position:relative; margin-left:auto; margin-right:auto;">

		<div style="float:left; width:160px; height:840px; background-color:#FF7F24">
			Men&uuml;
		</div> 

		<div style="float:left; width:620px; height:840px; background-color:#CD661D">
			Inhalt
		</div> 
	</div> 
</div>


</body>
</html>

Alles anzeigen

Für kleinere Auflösungen wäre eine Anpassung der Breite allerdings auch kinderleicht zu realisieren ...

Tream.

Also, die antwort über mir finde ich gut. Nur wie setzte ich das jetzt bitte um?
Hier mein normaler code für die seite:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Stil2 {
	font-family: Tahoma, Verdana, Arial;
	font-weight: bold;
	font-size: 10px;
	color: #000000;
}
-->
</style>
</head>


<body>
<table width="34" height="3%" border="0" align="left" cellpadding="0" cellspacing="0" id="1">
  <tr>
    <td width="30" height="950" align="center" background="images/bg.gif" scope="row"><table width="160" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th width="171" background="images/bg.gif" scope="row">


</p>



</p></th>
      </tr>
    </table></td>
    <td width="10" background="images/bg_left.gif">[img]images/bg_left.gif[/img]</td>
  </tr>
</table>
 <table width="200" border="0" align="left" cellpadding="0" cellspacing="0" id="2">
   <tr>
     <th align="center" scope="row">[img]images/box_1.jpg[/img]</th>
     <td align="center">[img]images/box_2.jpg[/img]</td>
   </tr>
   <tr>
     <th height="390" align="center" valign="top" background="images/box_3.jpg" scope="row">[url='index.php'][img]images/text_1.jpg[/img][/url]


       [url='kajaksport.php'][img]images/text_2.jpg[/img][/url]


       [url='kkm.php'][img]images/text_3.jpg[/img][/url]


       [url='archiv.php'][img]images/text_4.jpg[/img][/url]


       [url='sponsor.php'][img]images/text_5.jpg[/img][/url]


       [url='regatten.php'][img]images/text_6.jpg[/img][/url]


       [url='berichte.php'][img]images/text_7.jpg[/img][/url]


       [url='http://www.spreadshirt.net/shop.php?sid=242710'][img]images/text_8.jpg[/img][/url]


     [url='partner.php'][img]images/text_9.jpg[/img][/url]


     [url='buch.php'][img]images/text_10.jpg[/img][/url]


       [url='http://www.kajakzone.de/gallery/categories.php?cat_id=9'][img]images/text_11.jpg[/img][/url]


       [url='impressum.php'][img]images/text_12.jpg[/img][/url]


       
<script type="text/javascript" language="javascript" src="https://ssl4stats.de/de/counter?id=18788&cntr=hide"></script><noscript>[url='http://www.4stats.de/'][img]https://ssl4stats.de/de/stats?id=18788&cntr=hide[/img][/url]</noscript>




     
</th> 
     <td background="images/box_3.jpg"> 


</p>
     </td> 
   </tr>
   <tr>
     <th align="center" scope="row">[img]images/box_4.jpg[/img]</th>
     <td valign="bottom" background="images/box_5.jpg">  <script type="text/javascript"><!--
google_ad_client = "pub-8266642271819047";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
//2007-04-24: Kajakzone
google_ad_channel = "2364171825";
google_color_border = "F0B927";
google_color_bg = "F0B927";
google_color_link = "000000";
google_color_text = "000000";
google_color_url = "1B703A";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script> 
 


   [img]images/logo.png[/img][url='http://www.kajakzone.de/']  Kajakzone.de [/url]  [url='http://www.kajakzone.de/gallery']   Kajakzone.de - Gallery [/url]  [url='http://www.kajakzone.de/forum']Kajakzone.de - Forum[/url]   </tr>
   <tr>
     <th align="center" scope="row">[img]images/box_6.jpg[/img]</th>
     <td align="center">[img]images/box_7.jpg[/img]</td>
   </tr>
</table>
 <table width="160" border="0" align="left" cellpadding="0" cellspacing="0">
   <tr>
     <th width="15" align="center" background="images/bg_right.gif" scope="row"></th>
     <td width="158" height="950" align="center" background="images/bg.gif"></td>
   </tr>
</table>


<map name="Map" id="Map">
  <area shape="rect" coords="407,252,512,279" href="http://www.kajakzone.de/forum" target="_blank" />
  <area shape="rect" coords="244,252,349,279" href="http://www.kajakzone.de/gallery" target="_blank" />
  <area shape="rect" coords="69,252,174,279" href="http://www.kajakzone.de" />
</map>
</body>
</html>

Alles anzeigen

[/quote]

Wo muss ich den jetzt was einfügen??? Bitte um Hilfe!
Vielen Vielen dank!!!

Tream.

Kann mir den keiner helfen??

Tags