Antworten auf deine Fragen:
Neues Thema erstellen

Image Ready CS -CSS ausgabe zentrieren

S

Superwilly

Guest

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

00110100 00110010

AW: Image Ready CS -CSS ausgabe zentrieren

hi Superwilly, versuchs mal mit

margin: 0px auto;

für das Element, das Du zentrieren willst
 
S

Superwilly

Guest

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!
 

zome

Multimedia-Artist

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

 
S

Superwilly

Guest

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
 
Zuletzt bearbeitet von einem Moderator:

zome

Multimedia-Artist

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
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.476
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben