PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr (https://www.php-resource.de/forum/)
-   HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/)
-   -   Extrahierte Sclices aus PS mit DIVs horizontal mittig anordnen (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/100278-extrahierte-sclices-aus-ps-mit-divs-horizontal-mittig-anordnen.html)

kerbstone 16-09-2010 01:46

Extrahierte Sclices aus PS mit DIVs horizontal mittig anordnen
 
Einleitung:
Ich habe in Photoshop eine Webseite erstellt,
die ich mittels Slices in Fragmente unterteilt habe.
Im Anschluss daran habe ich die Sclices aus
Imageready als JPEGs extrahiert und in DIVs einfügen lassen.
HTML-Code:

<div id="container">
<div id="slice_1"><img ...></div>
<div id="slcie_n"><img ...></div>
</div>

Problem:
Die komplette Webseite wird nicht horizontal zentriert dargestellt.
Ich habe es beim Container mit dem Wert auto bei margin left und right
ausprobiert, dies brachte jedoch leider nicht den gewünschten Erfolg :(

Hier mein original Code:
HTML-Code:

<style type="text/css">
<!--
#Container {
        position:absolute;
        left:0px;
        top:0px;
        width:954px;
        height:688px;
}

#idelement-01_ {
        position:absolute;
        left:0px;
        top:0px;
        width:3px;
        height:688px;
}

#idelement-02_ {
        position:absolute;
        left:3px;
        top:0px;
        width:948px;
        height:35px;
}

#idelement-03_ {
        position:absolute;
        left:951px;
        top:0px;
        width:3px;
        height:688px;
}

#idelement-04_ {
        position:absolute;
        left:3px;
        top:35px;
        width:20px;
        height:29px;
}

(...)
-->

</style>

<div id="Container">
        <div id="idelement-01_">
                <img id="idelement_01" src="images/20100915_01.jpg" width="3" height="688" alt="" />
        </div>
        <div id="idelement-02_">
                <img id="idelement_02" src="images/20100915_02.jpg" width="948" height="35" alt="" />
        </div>
          <div id="idelement-03_">
                <img id="idelement_03" src="images/20100915_03.jpg" width="3" height="688" alt="" />
        </div>
        <div id="idelement-04_">
                <img id="idelement_04" src="images/20100915_04.jpg" width="20" height="29" alt="" />
        </div>

(...)
</div>

Könnt ihr mir bitte sagen, wie ich die Webseite zentriert bekomme?

Vielen Dank im voraus!!!

AmicaNoctis 16-09-2010 09:33

Hallo,

warum packst du das Stylesheet in einen Kommentar? Wenn die Browser nicht zufällig tolerant damit umgingen, würdest du es damit deaktivieren.

Du schreibst margin left und right, aber wie hattest du es wirklich geschrieben als du es versucht hast? Mit Bindestrich?

Gruß,

Amica

Wyveres 16-09-2010 10:00

Code:

#Container {
        position:absolute;
        left:0px;
        top:0px;
        width:954px;
        height:688px;
}

Absolut positionierte Elemente Ignorieren in der Regel margin-left und right.

wenn du die Styles dem entsprechend zum Container relativ setzt und den Container Selbst ohne Position und mit margrin left und right auto austattest sollte das eigentlich gehen.

AmicaNoctis 16-09-2010 10:01

Zitat:

Zitat von Wyveres (Beitrag 645380)
Absolut positionierte Elemente Ignorieren in der Regel margin-left und right.

Seit wann?

Wyveres 16-09-2010 10:07

Zitat:

Zitat von AmicaNoctis (Beitrag 645382)
Seit wann?

Seit immer ;D und ich hätte da noch Auto hin schreiben sollen. Wenn man ... auf absolut positionierte Elemente margin-left:auto; und marign-right:auto; versucht.

Wenn man explizit pixelwerte angibt oder prozent dann nicht.

zentiert da left:0; hier durch marin-left:auto; aufgehoben wird.
Code:

#Container {
        position:relative;
        left:0px;
        top:0px;
        width:954px;
        height:688px;
        margin-left:auto;
        margin-right:auto;
        border:1px solid black;
}

pappt am linken rand ...
Code:

#Container {
        position:absolute;
        left:0px;
        top:0px;
        width:954px;
        height:688px;
        margin-left:auto;
        margin-right:auto;
        border:1px solid black;
}

sitzt 100px von links entfernt.
Code:

#Container {
        position:absolute;
        left:0px;
        top:0px;
        width:954px;
        height:688px;
        margin-left:100px;
        margin-right:auto;
        border:1px solid black;
}


AmicaNoctis 16-09-2010 10:13

Ok, das mit auto stimmt, ich dachte, du meinst, dass es generell nicht geht.

Jedenfalls:
Code:

position: absolute;
top: 0;
left: 50%;
width: /*die Breite, z. B.*/ 200px;
margin-left: /*die halbe negative Breite, z. B.*/ -100px;

funktioniert.

kerbstone 16-09-2010 10:55

Danke für die schnelle Hilfe.

@Wyveres: Dein Code wirkt Wunder :) Es funktioniert!!! Das muss ich jetzt erstmal verstehen.

Kropff 16-09-2010 11:38

Mensch Kinners, lasst diesen position-Kram. Der ist hier überflüssig wie ein Kropf(f).

Peter

AmicaNoctis 16-09-2010 11:54

Zitat:

Zitat von Kropff (Beitrag 645405)
Mensch Kinners, lasst diesen position-Kram.

Was hast du denn gegen position? Es lässt sich jedenfalls besser damit arbeiten als mit floats und irgendwelchen zusätzlichen div-Suppen. :dontknow:

Kropff 16-09-2010 12:01

Zitat:

Zitat von AmicaNoctis (Beitrag 645408)
Was hast du denn gegen position?

Ist imho viel zu unflexibel.
Zitat:

Zitat von AmicaNoctis (Beitrag 645408)
Es lässt sich jedenfalls besser damit arbeiten als mit floats7

Nö. Spätestens wenn du anfängst, relative und absolute zu kombinieren, bekommst du teilweise riesengroße Probleme mit dem iE 6 und 7. Außerdem sind die float-Probleme im IE 6 und 7 wohlbekannt und es gibt die entsprechenden Fixes.
Zitat:

Zitat von AmicaNoctis (Beitrag 645408)
und irgendwelchen zusätzlichen div-Suppen. :dontknow:

Wenn die Leute alles in divs klatschen, so ist das ihr Problem. Das geht imho auch sehr häufig viel eleganter. Ist allerdings auch immer vom Design anhängig.

Peter

AmicaNoctis 16-09-2010 12:05

Zitat:

Zitat von Kropff (Beitrag 645409)
Ist imho viel zu unflexibel.

Nö. Spätestens wenn du anfängst, relative und absolute zu kombinieren, bekommst du teilweise riesengroße Probleme mit dem iE 6 und 7.

Da habe ich (zu beiden Punkten) gegenteilige Erfahrungen gemacht. Aber egal, ich hör mal auf, das hier zu sehr in den OT-Bereich zu ziehen.

kerbstone 16-09-2010 15:13

@Kropff:

Jetzt bin ich aber neugierig geworden.

Was für elegantere Lösungen bestehen denn zur Umsetzung?
Imageready lässt entweder Tabellen oder DIVs zu.

Sprichst Du nun XSL an, das eine weitere Möglichkeit darstellt?
In Form von http://symphony-cms.com ?

AmicaNoctis 16-09-2010 15:33

Ich denke, Kropff will auf seine geliebten floats hinaus ;)

Mit XSL hat das erstmal nichts zu tun, XSL-FO ist im Webumfeld untypisch und eher (aber nicht ausschließlich) zum Generieren von PDFs genutzt. XSL-T nutze ich zwar auch sehr oft, aber das kommt auch nicht ohne CSS aus, weil man damit nur Dokumente transformiert (in diesem Falle zu HTML).

Kropff 16-09-2010 15:37

Zitat:

Zitat von kerbstone (Beitrag 645448)
Was für elegantere Lösungen bestehen denn zur Umsetzung? Imageready lässt entweder Tabellen oder DIVs zu.

Ohne Klickibunti arbeiten. Sondern HTML und CSS lernen. :)

Peter

kerbstone 23-09-2010 20:55

Liste der Anhänge anzeigen (Anzahl: 1)
Nun habe ich das Problem, dass ich nicht weiß, wie ich zwei
absolut getrennte DIVs relativ zueinander positionieren kann.
Anbei ein Screenshot. Folgend der CSS Code, ich habe wirklich keine Ahnung:

HTML-Code:

/* div configurations */
#Tabelle_01 {
        position:relative; /* Main Frame */
        left:0px;
        top:-8px;
        width:954px;
        margin-left:auto;
        margin-right:auto;
}

#id20100923-01_ {
        position:absolute;
        left:0px;
        top:0px;
        width:3px;
        height:688px;
}

#id20100923-02_ {
        position:absolute;
        left:3px;
        top:0px;
        width:948px;
        height:56px;
}

#id20100923-03_ {
        position:absolute;
        left:951px;
        top:0px;
        width:3px;
        height:688px;
}

#id20100923-04_ {
        position:absolute;
        left:3px;
        top:56px;
        width:511px;
        height:45px;
}

#id20100923-05_ { /* Logo */
        position:absolute;
        left:514px;
        top:56px;
        width:409px;
        height:45px;
}

#id20100923-06_ {
        position:absolute;
        left:923px;
        top:56px;
        width:28px;
        height:271px;
}

#id20100923-07_ {
        position:absolute;
        left:3px;
        top:101px;
        width:20px;
        height:226px;
}

#id20100923-08_ { /* Banner */
        position:absolute;
        left:23px;
        top:101px;
        width:601px;
        height:182px;
}

#id20100923-09_ { /* 2. Logo */
        position:absolute;
        left:624px;
        top:101px;
        width:299px;
        height:54px;
}

#id20100923-10_ {
        position:absolute;
        left:624px;
        top:155px;
        width:299px;
        height:142px;
}

#id20100923-11_ {
        position:absolute;
        left:23px;
        top:283px;
        width:601px;
        height:14px;
}

#id20100923-12_ { /* Horizontal Header Menu */
        position:absolute;
        left:23px;
        top:297px;
        width:900px;
        height:30px;
        background-image: url(images/20100923_12.jpg);
        color:#5A5A5A;
        text-align:center;
        font-size:24px;
}

#id20100923-13_ {
        position:absolute;
        left:3px;
        top:327px;
        width:948px;
        height:5px;
}

#id20100923-14_ { /* Content Container */
        position:absolute;
        left:3px;
        top:332px;
        width:948px;
        background-image:url(images/20100923_13.jpg);
        background-repeat:y;
}

#contentalignment {
        padding:0px /*top*/ 0px /*right*/ 0px /*bottom*/ 16px /*left*/;       
}

#id20100923-15_ {
        position:absolute;
        left:3px;
        top:628px;
        width:20px;
        height:60px;
}

#id20100923-16_ { /* Horizontal Footer Menu Container */
        position:absolute;
        left:23px;
        top:628px;
        width:900px;
        height:31px;
        background-image: url(images/20100923_16.jpg);
}

#id20100923-17_ {
        position:absolute;
        left:923px;
        top:628px;
        width:28px;
        height:60px;
}

#id20100923-18_ {
        position:absolute;
        left:23px;
        top:659px;
        width:900px;
        height:29px;
}

#idElement-19 { /* Content Headline */
        margin-bottom:20px;
        font-family: Arial Narrow;
        font-size: 24px;
        color:#A6A6A6;
}

#idElement-20 { /* Content Left */
        float: left;
        width: 430px;
        font-family: Arial Narrow;
        font-size: 21px;
        color:#5A5A5A;
        margin-right: 20px;
}

#idElement-21 { /* Content Right */
        font-family: Arial Narrow;
        font-size: 21px;
        color:#5A5A5A;
        margin-right: 20px;
}

#idElement-22 { /* another element */
        float:left;
        margin-top:8px;
        margin-left:12px;
        text-align:left;
}

#idElement-23 { /* Impressum Link */
        margin-top: 0px;
        margin-right:52px;
        color:#5A5A5A;
        text-align:center;
        font-size:24px;
}



Alle Zeitangaben in WEZ +2. Es ist jetzt 03:22 Uhr.

Powered by vBulletin® Version 3.8.2 (Deutsch)
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.3.0
[c] ebiz-consult GmbH & Co. KG