Image Ready CS -CSS ausgabe zentrieren

Superwilly · 08.02.2010

Hallo,

ich möchte aus ImageReady CS mein in Slices zerschnittenes Layout so ausgeben, dass die HTML-Datei nachr zentriert ist, also in der Mitte der html-Seite angezeigt wird. Mit Tabellen-Ausgabe füge ich sonst immer hinterher einfach oben und unten ein "<center>" ein, aber bei CSS-Ausgabe klappt das natürlich nicht.

Weiß einer, wie ich das Layout nun zentrieren kann, also in den AUsgabe-EInstellungen oder hinterher im html-Editor oder so??

Vielen Dank!!

leveler · 08.02.2010

AW: Image Ready CS -CSS ausgabe zentrieren

hi Superwilly, versuchs mal mit

margin: 0px auto;

für das Element, das Du zentrieren willst

Superwilly · 08.02.2010

AW: Image Ready CS -CSS ausgabe zentrieren

Hi, danke erstmal dafür. Ich möchte aber nicht nur ein element zentrieren, sondern die ganze Seite komplett!

So dass ich quasi rechts und links auf der Website immer den gleich großen Abstand zum Browserrand habe!

Norbert Schumann · 08.02.2010

AW: Image Ready CS -CSS ausgabe zentrieren

dann änder doch die css. self html ist dein freund und ist online- sowie offline verfügbar.

zome · 08.02.2010

AW: Image Ready CS -CSS ausgabe zentrieren

Hallo Superwilly,
wie leveler schon gexchrieben hatte: öffne dein css file mit einem editor und schreibe folgendes:

* /* selektierung von allen elemten */
{
margin:auto;
margin-top:0px;
text-align:center; /* für ie Zentrierung */
}

aber auf selfhtml.org findest du sicherlich noch viele Tipps

Good luck

Superwilly · 09.02.2010

AW: Image Ready CS -CSS ausgabe zentrieren

Hi, danke erstmal, leider funzelt das iregndwie nicht. Ich kenne natürlich selfhtml, aber finde da irgendwie nicht dass was ich suche.

Ich hab nun den Code, den Du gepostet hast mal eingefügt, denke aber wohl falsch!:-(

Hier mal mein Code, vielleicht kannst Du mir mal zeigen wo ich dann deinen Code einfügen muss! THX!

Code:

<style type="text/css">
<!--
 
#Tabelle_01 {
position:absolute;
left:0px;
top:0px;
width:980px;
height:829px;
}
#index6-01 {
position:absolute;
left:0px;
top:0px;
width:980px;
height:154px;
}
#index6-02 {
position:absolute;
left:0px;
top:154px;
width:755px;
height:45px;
background-color:#8AC482;
text-align:left;
vertical-align:top;
}
#index6-03 {
position:absolute;
left:755px;
top:154px;
width:225px;
height:45px;
background-color:#8AC482;
text-align:right;
vertical-align:middle;
}
#index6-04 {
position:absolute;
left:0px;
top:199px;
width:980px;
height:1px;
background-color:#FFFFFF;
}
#index6-Ebene-17-Kopie {
position:absolute;
left:0px;
top:200px;
width:346px;
height:92px;
background-color:#389B2A;
}
#index6-06 {
position:absolute;
left:346px;
top:200px;
width:634px;
height:372px;
}
#index6-07 {
position:absolute;
left:0px;
top:292px;
width:346px;
height:1px;
}
#index6-Ebene-17-Kopie-6 {
position:absolute;
left:0px;
top:293px;
width:346px;
height:93px;
background-color:#389B2A;
}
#index6-09 {
position:absolute;
left:0px;
top:386px;
width:346px;
height:1px;
}
#index6-Ebene-17-Kopie-7 {
position:absolute;
left:0px;
top:387px;
width:346px;
height:93px;
background-color:#389B2A;
}
#index6-11 {
position:absolute;
left:0px;
top:480px;
width:346px;
height:1px;
}
#index6-Ebene-17-Kopie-8 {
position:absolute;
left:0px;
top:481px;
width:346px;
height:91px;
background-color:#389B2A;
}
#index6-13 {
position:absolute;
left:0px;
top:572px;
width:980px;
height:1px;
background-color:#FFFFFF;
}
#index6-14 {
position:absolute;
left:0px;
top:573px;
width:980px;
height:44px;
background-color:#8AC482;
text-align:left;
vertical-align:middle;
}
#index6-15 {
position:absolute;
left:0px;
top:617px;
width:980px;
height:1px;
background-color:#FFFFFF;
}
#index6-16 {
position:absolute;
left:0px;
top:618px;
width:326px;
height:47px;
background-color:#CCCCCC;
text-align:left;
vertical-align:top;
}
#index6-17 {
position:absolute;
left:326px;
top:618px;
width:1px;
height:47px;
background-color:#FFFFFF;
}
#index6-18 {
position:absolute;
left:327px;
top:618px;
width:326px;
height:47px;
background-color:#CCCCCC;
text-align:left;
vertical-align:top;
}
#index6-19 {
position:absolute;
left:653px;
top:618px;
width:1px;
height:47px;
background-color:#FFFFFF;
}
#index6-20 {
position:absolute;
left:654px;
top:618px;
width:326px;
height:47px;
background-color:#CCCCCC;
text-align:left;
vertical-align:top;
}
#index6-21 {
position:absolute;
left:0px;
top:665px;
width:980px;
height:1px;
background-color:#FFFFFF;
}
#index6-22 {
position:absolute;
left:0px;
top:666px;
width:653px;
height:28px;
background-color:#FFFFFF;
text-align:left;
vertical-align:top;
}
#index6-23 {
position:absolute;
left:653px;
top:666px;
width:1px;
height:28px;
background-color:#CCCCCC;
}
#index6-24 {
position:absolute;
left:654px;
top:666px;
width:326px;
height:28px;
background-color:#FFFFFF;
text-align:left;
vertical-align:top;
}
#index6-25 {
position:absolute;
left:0px;
top:694px;
width:980px;
height:30px;
}
#index6-26 {
position:absolute;
left:0px;
top:724px;
width:653px;
height:52px;
background-color:#8AC482;
text-align:left;
vertical-align:middle;
}
#index6-27 {
position:absolute;
left:653px;
top:724px;
width:327px;
height:104px;
}
#index6-28 {
position:absolute;
left:0px;
top:776px;
width:653px;
height:52px;
}
#index6-29 {
position:absolute;
left:0px;
top:828px;
width:980px;
height:1px;
}
 
 
-->
</style>

edit by medienfux

zome · 09.02.2010

AW: Image Ready CS -CSS ausgabe zentrieren

Hey - sag warum arbeitest Du mit "position:absolute"?

Das wusste ich natürlich nicht da funzt meine Formatierung nicht. wie ich in deinem css gesehen habe sind die meisten Elemente so formatiert das sie ganz links "kleben" (left:0px;top:0px

- da hilft nur Tipp A oder B, oder das nächste....

Wenn es nicht unbedingt notwendig ist, würde ich Dir empfehlen das nur bei den Layern einzusetzen bei denen es gebraucht wird - z.B. popup (ein und ausgeblendet), und stattdessen mit floats zu arbeiten.
Hier ein Bsp.:
*
{

margin:0px;
padding:0px;

}

body
{

background-color:#000000;
background-image:url(../images/bg_01.jpg);
background-repeat:repeat-x;
background-position:top center;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
}
#all_in
{
width:940px;
height:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#all
{
width:940px;
height:auto;
float:left;
text-align:center;
}

.clear
{
clear:both;
height:0px;
font-size:0px;
width:0px;
}

"#all_in" ist ein div container der mittig ausgerichtet wird, innerhalb davon ist wiederum ein div "#all" dessen Höhe sich nach seinem Inhalt anpasst...

Bei Deiner Formatierungsweise habe ich noch folgenden Tipp:
A: Bau dir um alles einen Div, dem gibst Du folgende Formatierung

#aussen
{
height: 800px;
width: 900px;
margin-right:auto;
margin-left:auto;
position: relative;
}

Gib auch dem body ein "text-align:center;" mit auf dem Weg

B: probier folgendes

Anstelle von
#Tabelle_01 {
position:absolute;
left:0px;
top:0px;
width:980px;
height:829px;
}

schreibe

#Tabelle_01
{
position: absolute;
width:980px;
height:829px;
top:0px;
left: 50%;
margin-left: -490px; /* negative Hälfte von width:980px */
}

Probier eben beide (A und B) einmal aus: B ist ist in deinem Fall
natürlich etwas aufwändiger

Und auf selfhtml -> position:relative und absolute einmal studieren, ebenso das "box model"

Grüße und viel Glück