Antworten auf deine Fragen:
Neues Thema erstellen

Webseite zentrieren..

BlackBoSs

BlackBoSs

Aktives Mitglied

Kreativ-Flatrate-User
Hallo,

Habe eine Web seite erstellt, da ich leider nicht so gut noch gar nicht gut bin in css-codes hab ich eine einfach erstelle webseite mit html kreiert.

nur hab ich grad das problem das die seite eher rechtsbündig ist als zentriert...

zumindest wenn ich mim laptop online komme ist die seite rechtsbündig.

es geht um die folgende seite :

wie kann ich diese seite ganz einfach und simple zentrieren ?

lg
 

Christoph_Ac

Christoph_Ac

Fühlt sich wohl hier!

AW: Webseite zentrieren..

Du schreibst in dein CSS Stylesheet einfach:

div#container{ width 960px; margin 0 auto;}

So kannst du durch den margin einen globalen container mittig auf der seite zentrieren der in meinem Fall die Breite von 960px hat.

lg Chris

*Eine Website komplett in html zu genrieren ist nicht mehr zeitgemäß. ein einfaches css tutorial findest du auf css4you.de! Alternativ würde ich die Tutorials von Pixelmetrie, hier im VideoTut-Bereich empfehlen. Beim 2. Tutorial über ein Portfolio wird das Coden sehr gut erklärt.
 
Zuletzt bearbeitet:
AlexanderBo

AlexanderBo

Gesperrt

AW: Webseite zentrieren..

wie Christoph_Ac schon sagte bzgl zentrieren.
du arbeitest offensichtlich mit DW insofern erklärt sich auch dein tabellenlayout
jedoch sollte man ein layout nicht mit tabellen machen.
kümmer dich um html und css.
 
C

Chriko

Aktives Mitglied

AW: Webseite zentrieren..

CMS muß nicht sein für so eine Seite.
Mit "wrap" kann er wohl wahrscheinlich nichts anfange. Aber es ist ja nichts anderes als das was Christoph bereits erwähnt hat mit dem container.

Dein Hauptproblem fängt eigentlich damit an, dass du die Seite mit Photoshop erstellt und als html gespeichert hast. Somit hast du ein Tabellenlayout und unschönen Code.

Schau dir am besten mal einfach Tutorials zum Thema Layout mit CSS an, sonst wirst du so nur schwer dein Wunschergebnis erreichen.
 
M

MainAngler

Excel (SVERWEIS...)

AW: Webseite zentrieren..

Man kann aus PS auch die Seite als HTML mit CSS exportieren, besser ist allerdings man erstellt nur die Grafiken in PS und erstellt den Code dann manuell mit einem entsprechenden HTML-Editor, per Hand.;)
 
BlackBoSs

BlackBoSs

Aktives Mitglied

Kreativ-Flatrate-User
AW: Webseite zentrieren..

muss ja dann wohl einiges noch lernen .. :)

habe mir eh schon workshop dvds gekauft von psd-tutorials.de

würd aber jetzt das problem lösen ...

reicht dieser code normalerweise nicht um die seite zu zentrieren ?

<table id="Tabelle_01" width="1276" height="908" border="0" align="center" cellpadding="0" cellspacing="0">
 
Sinane

Sinane

Puttmacherin

AW: Webseite zentrieren..

BlackBoSs schrieb:
reicht dieser code normalerweise nicht um die seite zu zentrieren ?

<table id="Tabelle_01" width="1276" height="908" border="0" align="center" cellpadding="0" cellspacing="0">
Zum Vergrößern anklicken....

Theoretisch, ja, aber es ist nicht zu empfehlen, die Seite als Tabelle aufzubauen, da Tabellen einfach nicht zum Designen gedacht sind. Benutze lieber divs, siehe:

Christoph_Ac schrieb:
div#container{ width 960px; margin 0 auto;}
Zum Vergrößern anklicken....

HTML-Code dafür wäre dann:
HTML: 
<div id="container">Lorem ipsum....</div>
 
Sinane

Sinane

Puttmacherin

AW: Webseite zentrieren..

Musst du nicht, du kannst die Styles auch im head definieren (natürlich auch per style="" - Attribut, aber bääh). style.css ist aber übersichtlicher ;)
 
BlackBoSs

BlackBoSs

Aktives Mitglied

Kreativ-Flatrate-User
AW: Webseite zentrieren..

Verstehe,

Ich würd aber gerne bei der kommenden Seite komplett mit Style.css arbeiten.

Bei dieser will ich nicht von Anfang an beginnen.

Will nur wissen wohin ich welchen Code im einfügen muss damit diese Seite zentriert wird.
 
Tattoomaus78

Tattoomaus78

nemesis-artgroup.de

AW: Webseite zentrieren..

im head-bereich

<style>
#wrap {width: 900px; margin: 0 auto; }

</style>

im body

<div id="wrap">

hier dein ganzes html-gerüst

</div>
 
cebito

cebito

undefined

AW: Webseite zentrieren..

BlackBoSs schrieb:
was soll ich unter "hier dein ganzes html-gerüst" einfügen ?
Zum Vergrößern anklicken....

Im head-Bereich den Teil, der als "im head-bereich" ausgezeichnet ist, allerdings solltest du statt nur "<style>" "<style type="text/css">" verwenden, den Teil der als "im body" gekennzeichnet ist fügst du in den body ein und dort wo "hier dein ganzes html-gerüst" steht packst du alles rein, was bisher in deinem body stand.
 
BlackBoSs

BlackBoSs

Aktives Mitglied

Kreativ-Flatrate-User
AW: Webseite zentrieren..

hab ich ...

aber die seite ist jetzt nur noch rechtsbündig ?

Code :

HTML: 
<html>
<head>
<title>*** STYLE - IO ESPRESSO ***</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#wrap {width: 900px; margin: 0 auto; }
body {
    background-image: url(http://www.style-io.at/Bilder/hintergrund2.jpg);
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('http://www.style-io.at/Bilder/rollover_buttons/location_rollover.jpg','http://www.style-io.at/Bilder/rollover_buttons/events_rollover.jpg','http://www.style-io.at/Bilder/rollover_buttons/gallery_rollover.jpg','http://www.style-io.at/Bilder/rollover_buttons/gastebuch_rollover.jpg','http://www.style-io.at/Bilder/rollover_buttons/kontakt_rollover.jpg')">
<!-- Save for Web Slices (hauptseite.psd) -->
<div id="wrap">
<table id="Tabelle_01" width="1276" height="908" border="0"  align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="4">
            <img src="http://www.style-io.at/Bilder_index/hauptseite_01.jpg" width="458" height="6" alt=""></td>
        <td rowspan="2"><img src="http://www.style-io.at/Bilder/rollover_buttons/home_rollover.jpg" alt="Hauptseite" width="98" height="100"></td>
        <td rowspan="2"><a href="STYLE IO - WEBSITE/location.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Location','','http://www.style-io.at/Bilder/rollover_buttons/location_rollover.jpg',1)"><img src="http://www.style-io.at/Bilder/rollover_buttons/location.jpg" alt="Location" name="Location" width="104" height="100" border="0"></a></td>
        <td colspan="3" rowspan="2"><a href="STYLE IO - WEBSITE/events.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Events','','http://www.style-io.at/Bilder/rollover_buttons/events_rollover.jpg',1)"><img src="http://www.style-io.at/Bilder/rollover_buttons/events.jpg" alt="Events" name="Events" width="96" height="100" border="0"></a></td>
        <td rowspan="2"><a href="STYLE IO - WEBSITE/gallery.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Gallery','','http://www.style-io.at/Bilder/rollover_buttons/gallery_rollover.jpg',1)"><img src="http://www.style-io.at/Bilder/rollover_buttons/gallery.jpg" alt="Gallery" name="Gallery" width="103" height="100" border="0"></a></td>
        <td rowspan="2"><a href="STYLE IO - WEBSITE/gastebuch.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Gästebuch','','http://www.style-io.at/Bilder/rollover_buttons/gastebuch_rollover.jpg',1)"><img src="http://www.style-io.at/Bilder/rollover_buttons/gastebuch.jpg" alt="Gästebuch" name="Gästebuch" width="127" height="100" border="0"></a></td>
        <td colspan="2" rowspan="2"><a href="STYLE IO - WEBSITE/kontakt.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Kontakt','','http://www.style-io.at/Bilder/rollover_buttons/kontakt_rollover.jpg',1)"><img src="http://www.style-io.at/Bilder/rollover_buttons/kontakt.jpg" alt="Kontakt" name="Kontakt" width="112" height="100" border="0"></a></td>
        <td colspan="2" rowspan="3">
            <img src="http://www.style-io.at/Bilder_index/hauptseite_08.jpg" width="178" height="113" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="http://www.style-io.at/Bilder_index/hauptseite_09.jpg" width="194" height="107" alt=""></td>
        <td>
            <img src="http://www.style-io.at/Bilder_index/hauptseite_10.jpg" width="156" height="94" alt=""></td>
        <td rowspan="2">
            <img src="http://www.style-io.at/Bilder_index/hauptseite_11.jpg" width="108" height="107" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.style-io.at/Bilder_index/hauptseite_12.jpg" width="156" height="13" alt=""></td>
        <td colspan="9">
            <img src="http://www.style-io.at/Bilder_index/hauptseite_13.jpg" width="640" height="13" alt=""></td>
    </tr>
    <tr>
        <td rowspan="6">
            <img src="http://www.style-io.at/Bilder_index/hauptseite_14.jpg" width="178" height="794" alt=""></td>
        <td colspan="13">
            <img src="http://www.style-io.at/Bilder_index/hauptseite_15.jpg" width="929" height="337" alt=""></td>
        <td rowspan="6">
            <img src="http://www.style-io.at/Bilder_index/hauptseite_16.jpg" width="169" height="794" alt=""></td>
    </tr>
    <tr>
        <td colspan="13">
            <img src="http://www.style-io.at/Bilder_index/hauptseite_17.jpg" width="929" height="73" alt=""></td>
    </tr>
    <tr>
        <td colspan="6" rowspan="4">
            <img src="http://www.style-io.at/Bilder_index/hauptseite_18.jpg" width="501" height="384" alt=""></td>
        <td colspan="5">
            <img src="http://www.style-io.at/Bilder_index/hauptseite_19.jpg" width="395" height="260" alt=""></td>
        <td colspan="2" rowspan="2">
            <img src="http://www.style-io.at/Bilder_index/hauptseite_20.jpg" width="33" height="334" alt=""></td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="http://www.style-io.at/Bilder_index/hauptseite_21.jpg" width="395" height="74" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="http://www.style-io.at/Bilder_index/hauptseite_22.jpg" width="46" height="50" alt=""></td>
        <td colspan="5">
            <img src="http://www.style-io.at/Bilder_index/hauptseite_23.jpg" width="373" height="26" alt=""></td>
        <td rowspan="2">
            <img src="http://www.style-io.at/Bilder_index/hauptseite_24.jpg" width="9" height="50" alt=""></td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="http://www.style-io.at/Bilder_index/hauptseite_25.jpg" width="373" height="24" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.style-io.at/Bilder_index/Abstandhalter.gif" width="178" height="1" alt=""></td>
        <td>
            <img src="http://www.style-io.at/Bilder_index/Abstandhalter.gif" width="16" height="1" alt=""></td>
        <td>
            <img src="http://www.style-io.at/Bilder_index/Abstandhalter.gif" width="156" height="1" alt=""></td>
        <td>
            <img src="http://www.style-io.at/Bilder_index/Abstandhalter.gif" width="108" height="1" alt=""></td>
        <td>
            <img src="http://www.style-io.at/Bilder_index/Abstandhalter.gif" width="98" height="1" alt=""></td>
        <td>
            <img src="http://www.style-io.at/Bilder_index/Abstandhalter.gif" width="104" height="1" alt=""></td>
        <td>
            <img src="http://www.style-io.at/Bilder_index/Abstandhalter.gif" width="19" height="1" alt=""></td>
        <td>
            <img src="http://www.style-io.at/Bilder_index/Abstandhalter.gif" width="46" height="1" alt=""></td>
        <td>
            <img src="http://www.style-io.at/Bilder_index/Abstandhalter.gif" width="31" height="1" alt=""></td>
        <td>
            <img src="http://www.style-io.at/Bilder_index/Abstandhalter.gif" width="103" height="1" alt=""></td>
        <td>
            <img src="http://www.style-io.at/Bilder_index/Abstandhalter.gif" width="127" height="1" alt=""></td>
        <td>
            <img src="http://www.style-io.at/Bilder_index/Abstandhalter.gif" width="88" height="1" alt=""></td>
        <td>
            <img src="http://www.style-io.at/Bilder_index/Abstandhalter.gif" width="24" height="1" alt=""></td>
        <td>
            <img src="http://www.style-io.at/Bilder_index/Bilder/Abstandhalter.gif" width="9" height="1" alt=""></td>
        <td>
            <img src="http://www.style-io.at/Bilder_index/Abstandhalter.gif" width="169" height="1" alt=""></td>
    </tr>
</table><br>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
B

bibo03

Guest

AW: Webseite zentrieren..

fand den Beitrag aus dem Forum ganz interessant ist mal ein anderer Lösungsansatz dazu....
 
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
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 140 (Mitglieder: 3, Gäste: 137)
Robots: 795

Statistik des Forums

Themen
118.616
Beiträge
1.538.358
Mitglieder
67.536
Neuestes Mitglied
QuestionMark
Oben