Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: Probleme mit dem Umbruch

  1. #1
    Tream.
    Gast

    Standard Probleme mit dem Umbruch

    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:



    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*
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in) Avatar von chris90night
    Registriert seit
    09.09.2006
    Ort
    <?php echo $_SERVER['PHP_SELF']; ?>
    Beiträge
    1.096
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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ß


    Denk immer daran: auch am anderen Ende der Leitung sitzt ein Mensch!

  3. #3
    Gast

    Standard

    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

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  5. #5
    Tream.
    Gast

    Standard

    Zitat 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?!

  6. #6
    Großmeister(in)
    Registriert seit
    29.04.2007
    Ort
    Minden
    Beiträge
    584
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    du könntest es so machen:
    Code:
    <div style="width&#58; ABCpx;
    	height&#58; DEFpx;
    	position&#58;absolute;
      	top&#58;50%;
      	left&#58;50%;
      	margin-left&#58;-0,5ABCpx;
     	margin-top&#58;-0,5CDEpx;
      	border&#58; 0px;
             vertical-align&#58; middle;"><div width="Breite von Nummer 3 " height="Höhe von Nummer 3 "style="float&#58;left;"</div><div width="Breite von Nummer 4 " height="Höhe von Nummer 4 "style="float&#58;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

  7. #7
    Tream.
    Gast

    Standard

    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&#58; 780px;
       height&#58; 940px;
       position&#58;absolute;
         top&#58;50%;
         left&#58;50%;
         margin-left&#58;-390px;
        margin-top&#58;-470px;
         border&#58; 0px;
             vertical-align&#58; middle;"><div width="160px" height="940px"style="float&#58;left;"</div><div width="630px" height="940px"style="float&#58;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.

    Code:
    <html xmlns="http&#58;//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 &#123;
    	font-family&#58; Tahoma, Verdana, Arial;
    	font-weight&#58; bold;
    	font-size&#58; 10px;
    	color&#58; #000000;
    &#125;
    -->
    </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&#58; 780px;
       height&#58; 940px;
       position&#58;absolute;
         top&#58;50%;
         left&#58;50%;
         margin-left&#58;-390px;
        margin-top&#58;-470px;
         border&#58; 0px;
             vertical-align&#58; middle;"><div width="160px" height="940px"style="float&#58;left;"</div><div width="630px" height="940px"style="float&#58;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>



    Vielen Vielen Dank für die Hilfe!!

  8. #8
    Tream.
    Gast

    Standard

    Hilffeeeee^^

  9. #9
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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&#58;0; padding&#58;0;width&#58;100%; height&#58;100%;">
    <div style="width&#58; 780px;
       height&#58; 940px;
       position&#58;absolute;
         top&#58;50%;
         left&#58;50%;
         margin-left&#58;-390px;
        margin-top&#58;-470px;">
    
    
    <div style="float&#58;left;width&#58;100px;height&#58;940px;background-color&#58;#C1CDCD"></div>
    <div style="float&#58;left;width&#58;25px;height&#58;940px;background-color&#58;#838B8B"></div>
    <div style="float&#58;left;width&#58;150px;height&#58;940px;background-color&#58;#FF7F24"></div>
    <div style="float&#58;left;width&#58;380px;height&#58;940px;background-color&#58;#CD661D"></div>
    <div style="float&#58;left;width&#58;25px;height&#58;940px;background-color&#58;#838B8B"></div>
    <div style="float&#58;left;width&#58;100px;height&#58;940px;background-color&#58;#C1CDCD"></div>
    
    </div>
    
    <div style="position&#58;absolute;top&#58;50%;left&#58;50%;margin-top&#58;-340px;margin-left&#58;-265px;width&#58;530px;height&#58;100px;background-color&#58;#f00;"></div>
    
    </body>
    Bei der Bannerhöhe ist noch eine Differenz zwischen IE6 und FF. Die Ursache kann ich momentan aber leider nicht finden.

  10. #10
    Interessierte/r
    Registriert seit
    20.02.2005
    Beiträge
    120
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http&#58;//www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    	<title>Untitled</title>
    </head>
    
    <body style="margin&#58;0; padding&#58;0; width&#58;100%; height&#58;100%;">
    
    <div style="width&#58;840px; height&#58;940px; margin-left&#58;auto; margin-right&#58;auto; background-color&#58;#CCC;">
    	
    	<div style="width&#58;780px; height&#58;100px; background-color&#58;#f00; position&#58;relative; margin-left&#58;auto; margin-right&#58;auto;">
    		Header
    	</div> 
    	
    	<div style="width&#58;780px; position&#58;relative; margin-left&#58;auto; margin-right&#58;auto;">
    		
    		<div style="float&#58;left; width&#58;160px; height&#58;840px; background-color&#58;#FF7F24">
    			Men&uuml;
    		</div> 
    		
    		<div style="float&#58;left; width&#58;620px; height&#58;840px; background-color&#58;#CD661D">
    			Inhalt
    		</div> 
    	</div> 
    </div>
    
    </body>
    </html>
    Für kleinere Auflösungen wäre eine Anpassung der Breite allerdings auch kinderleicht zu realisieren ...
    SELFHTML - Die Energie des Verstehens
    HTML-Validator
    CSS-Validator
    Links zu CSS-Lösungen für allerlei Probleme

Ähnliche Themen

  1. Antworten: 1
    Letzter Beitrag: 21.09.2006, 14:01
  2. Umbruch-Problem bei Textarea
    Von Gast im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 12.07.2006, 18:37
  3. Umbruch in CSS Liste
    Von mmaisch im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 04.03.2006, 20:07
  4. Textarea: Umbruch erzwingen
    Von im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 18.10.2005, 11:11
  5. Wie erzeugt man einen Umbruch nach zb. 100 Buchstaben?
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 16.07.2005, 09:30

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •