Ergebnis 1 bis 5 von 5

Thema: Problem beim Zentrieren [css/html]

  1. #1
    HTML Newbie
    Registriert seit
    05.12.2013
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Problem beim Zentrieren [css/html]

    Hallo Leute,

    ich habe ein kleines Problem mit meinem Design. Da es kein typisches Layout ist, habe ich Probleme es zu zentrieren.
    Wie kann ich das Problem lösen?

    Code:
    <html><head>
    <title>Homepage</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body style="background-color:#FFFFFF;">
    <!-- Save for Web Slices (homepage_mark_sliced.psd) -->
    <div style="position:absolute; algin:center; left:0px; top:0px; width:960px; height:685px;">
        <div style="position:absolute; left:0px; top:0px; width:85px; height:600px;">
            <img src="images/homepage_mark_sliced_01.jpg" width="85" height="600" alt="" />
        </div>
        <div style="position:absolute; left:85px; top:0px; width:875px; height:74px;">
            <img src="images/homepage_mark_sliced_02.jpg" width="875" height="74" alt="" />
        </div>
        <div style="position:absolute; left:85px; top:74px; width:788px; height:446px;">
            <img src="images/homepage_mark_sliced_03.jpg" width="788" height="446" alt="" />
        </div>
        <div style="position:absolute; left:873px; top:74px; width:87px; height:446px;">
            <img src="images/homepage_mark_sliced_04.jpg" width="87" height="446" alt="" />
        </div>
        <div style="position:absolute; left:85px; top:520px; width:1px; height:80px;">
            <img src="images/homepage_mark_sliced_05.jpg" width="1" height="80" alt="" />
        </div>
        <div style="position:absolute; left:86px; top:520px; width:788px; height:80px;">
            <img src="images/homepage_mark_sliced_06.jpg" width="788" height="80" alt="" />
        </div>
        <div style="position:absolute; left:874px; top:520px; width:86px; height:80px;">
            <img src="images/homepage_mark_sliced_07.jpg" width="86" height="80" alt="" />
        </div>
        <div style="position:absolute; left:0px; top:600px; width:43px; height:85px;">
            <img src="images/homepage_mark_sliced_08.jpg" width="43" height="85" alt="" />
        </div>
        <div style="position:absolute; left:43px; top:600px; width:125px; height:85px;">
            <img src="images/homepage_mark_sliced_09.jpg" width="125" height="85" alt="" />
        </div>
        <div style="position:absolute; left:168px; top:600px; width:123px; height:85px;">
            <img src="images/homepage_mark_sliced_10.jpg" width="123" height="85" alt="" />
        </div>
        <div style="position:absolute; left:291px; top:600px; width:127px; height:85px;">
            <img src="images/homepage_mark_sliced_11.jpg" width="127" height="85" alt="" />
        </div>
        <div style="position:absolute; left:418px; top:600px; width:126px; height:85px;">
            <img src="images/homepage_mark_sliced_12.jpg" width="126" height="85" alt="" />
        </div>
        <div style="position:absolute; left:544px; top:600px; width:124px; height:85px;">
            <img src="images/homepage_mark_sliced_13.jpg" width="124" height="85" alt="" />
        </div>
        <div style="position:absolute; left:668px; top:600px; width:124px; height:85px;">
            <img src="images/homepage_mark_sliced_14.jpg" width="124" height="85" alt="" />
        </div>
        <div style="position:absolute; left:792px; top:600px; width:128px; height:85px;">
            <img src="images/homepage_mark_sliced_15.jpg" width="128" height="85" alt="" />
        </div>
        <div style="position:absolute; left:920px; top:600px; width:40px; height:85px;">
            <img src="images/homepage_mark_sliced_16.jpg" width="40" height="85" alt="" />
        </div>
    </div>
    <!-- End Save for Web Slices -->
    </body>
    </html>

    Unbenannt-1.jpg

    Gruß Path
    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
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Problem beim Zentrieren [css/html]

    Solange du absolute Positionsangaben verwendest, wird du es nie zentriert bekommen.
    Lass alle absoluten Positionsangaben weg und schau dir mal an wie sich das mit dem Fluss von Elementen verhält.
    Zudem solltest du auf Inlinestyles besser verzichten und eine CSS-Datei verwenden.

    http://www.mediaevent.de/css/position.html
    http://little-boxes.de/lb1/12.2-der-...der-boxen.html


    Zur Zentrierung:
    http://www.ich-lerne-css.de/Style/Ex...07/center.html

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    05.12.2013
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem beim Zentrieren [css/html]

    Hallo explanator,

    ich habe es jetzt mit allen erdenklichen Position Attributen versucht. Das ganze Design zerhaut es mir.

    Code:
    <html><head>
    <title>homepage_mark2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body style="background-color:#FFFFFF;">
    
    
    <!-- ImageReady Slices (homepage_mark2.psd) -->
    <div align="" style=" eft:0px; top:0px; width:960px; height:685px;">
    	<div style=" left:0px; top:0px; width:85px; height:600px;">
    		<img src="images/homepage_mark2_01.jpg" width="85" height="600" alt="" />
    	</div>
    	<div style="left:85px; top:0px; width:875px; height:74px;">
    		<img src="images/homepage_mark2_02.jpg" width="875" height="74" alt="" />
    	</div>
    	<div style="left:85px; top:74px; width:788px; height:446px;">
    		<img src="images/homepage_mark2_03.jpg" width="788" height="446" alt="" />
    	</div>
    	<div style="left:873px; top:74px; width:87px; height:446px;">
    		<img src="images/homepage_mark2_04.jpg" width="87" height="446" alt="" />
    	</div>
    	<div style="left:85px; top:520px; width:1px; height:80px;">
    		<img src="images/homepage_mark2_05.jpg" width="1" height="80" alt="" />
    	</div>
    	<div style="position:relativ; left:86px; top:520px; width:788px; height:80px;">
    		<img src="images/homepage_mark2_06.jpg" width="788" height="80" alt="" />
    	</div>
    	<div style="left:874px; top:520px; width:86px; height:80px;">
    		<img src="images/homepage_mark2_07.jpg" width="86" height="80" alt="" />
    	</div>
    	<div style="left:0px; top:600px; width:43px; height:85px;">
    		<img src="images/homepage_mark2_08.jpg" width="43" height="85" alt="" />
    	</div>
    	<div style="left:43px; top:600px; width:125px; height:85px;">
    		<img src="images/homepage_mark2_09.jpg" width="125" height="85" alt="" />
    	</div>
    	<div style="left:168px; top:600px; width:123px; height:85px;">
    		<img src="images/homepage_mark2_10.jpg" width="123" height="85" alt="" />
    	</div>
    	<div style="left:291px; top:600px; width:127px; height:85px;">
    		<img src="images/homepage_mark2_11.jpg" width="127" height="85" alt="" />
    	</div>
    	<div style="left:418px; top:600px; width:126px; height:85px;">
    		<img src="images/homepage_mark2_12.jpg" width="126" height="85" alt="" />
    	</div>
    	<div style="left:544px; top:600px; width:124px; height:85px;">
    		<img src="images/homepage_mark2_13.jpg" width="124" height="85" alt="" />
    	</div>
    	<div style="left:668px; top:600px; width:124px; height:85px;">
    		<img src="images/homepage_mark2_14.jpg" width="124" height="85" alt="" />
    	</div>
    	<div style="left:792px; top:600px; width:128px; height:85px;">
    		<img src="images/homepage_mark2_15.jpg" width="128" height="85" alt="" />
    	</div>
    	<div style="left:920px; top:600px; width:40px; height:85px;">
    		<img src="images/homepage_mark2_16.jpg" width="40" height="85" alt="" />
    	</div>
    </div>
    
    
    <!-- End ImageReady Slices -->
    </body>
    </html>

    Unbenannt.jpg

    so sieht es aus. Was mache ich falsch? Ich weiß, dass ich es auch mit Tabellen machen kann, aber ich möchte es mit DIVs machen.

    Gruß Path

  4. #4
    Bandit
    Gast

    Standard AW: Problem beim Zentrieren [css/html]

    Die ganzen Positionieren sind unnötig.
    Vielleicht hilft dir dies: http://www.css4you.de/wslayout1/ex0003.html

  5. #5
    Großmeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: Problem beim Zentrieren [css/html]

    Du kannst dem äußersten Div position:relative; geben, dann kannst du alle Elemente innerhalb von diesem Div absolut positionieren und das äußerste Div mit margin:0 auto; zentrieren.

    Also dein äußeres div:
    HTML-Code:
    <div style="position:relative;margin:0 auto;width:960px;height:685px;">
    <!-- die restlichen Elemente absolut positioniert -->
    </div>

    Edit: Wie clever es ist beim gesamten Layout auf einer Breite von 960px die Elemente absolut zu positionieren, gerade auch im Hinblick auf Responsiveness, steht natürlich auf einem anderen Blatt.
    Geändert von SinnlosS (06.12.2013 um 17:16 Uhr)
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

Ähnliche Themen

  1. HTML <hr> Problem beim ausrichten
    Von menetekel im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 19.09.2013, 14:45
  2. HTML Seite mit CSS zentrieren
    Von chamo im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 18.09.2009, 15:28
  3. Problem beim ZENTRIEREN
    Von vrime im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 15.12.2006, 16:46
  4. Problem beim zentrieren des Menüs
    Von CA2k im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 25.03.2006, 19:06
  5. bild zentrieren beim Laden in einem iframe
    Von patr im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 22.12.2005, 22:40

Stichworte

Berechtigungen

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