Antworten auf deine Fragen:
Neues Thema erstellen

Webseite mittig ausrichten

heuschnie

heuschnie

Noch nicht viel geschrieben

Hallo ich habe mir eine neue Webseite gemacht.
Aber ich bekomme es nicht hin das sich die gesamte Webseite central ausrichtet.
Wenn ich den Background central ausrichte dann verschieben sich die buttons und alles andere weg :(
Ich hoffe ihr könnt mir helfen.
 

wr-graphics

wr-graphics

Macher, Pixelschubser

AW: Webseite mittig ausrichten

Schonmal mit "algin=center" versucht? Des weiteren: Das was du als Referenzen hochgeladen hast ist eher schlecht als recht… Aber musst du wissen…
 
GoMeZ

GoMeZ

Allrounddilettant

AW: Webseite mittig ausrichten

Ein Blick in Herr_D's Signatur verräts:

Durch CSS können alle Block-Elemente mittels margin:auto; horizontal zentriert werden. In Block-Elementen enthaltene Elemente und Inline-Elemente können über text-align: center; horizontal zentriert werden.
Zum Vergrößern anklicken....

EDIT: das lässt sich aber auch über jede beliebige Suchmaschine innerhalb weniger Skunden in Erfahrung bringen ...
 
Zuletzt bearbeitet:
sokie

sokie

Mod | Web

AW: Webseite mittig ausrichten

das mit dem margin:auto lässt sich allerdings bei der Seite nicht anwenden, weil alle Elemente absolut positioniert sind.
 
GoMeZ

GoMeZ

Allrounddilettant

AW: Webseite mittig ausrichten

sokie schrieb:
das mit dem margin:auto lässt sich allerdings bei der Seite nicht anwenden, weil alle Elemente absolut positioniert sind.
Zum Vergrößern anklicken....

... na dann sollte er das als angehender Mediendesigner mal flugs ändern ...

Ich analysiere auf so allgemeine Fragen hin nicht automatisch den Quellcode und die CSS ...
 
ergo

ergo

shadowfighter

AW: Webseite mittig ausrichten

Lieber heuschnie: da Du auf Deiner Website darum bittest, dass gefundene Fehler zu melden seien: bitte, bitte überarbeite Deine Rechtschreibung. Augsburg liegt doch noch im deutschen Sprachraum? :)

Danke Dir ...
 
A

ArtiHl

Nicht mehr ganz neu hier

AW: Webseite mittig ausrichten

Pack mal um das ganze nen div(da wo ich in deinem code rumgefuscht habe):

HTML: 
<body>
<div id="Wrapper"><--hinzufügen
<div id="Home_Button">
<a href="Index.html" >
<img src="Button_Home.png"></a></div>
HTML: 
</script> 
</div>

</div><--hinzufügen
</body>
Danach gehste in dein Stylesheet und fügst folgendes ein:
HTML: 
<style type="text/css">

img{
    border: none;
}

iframe{
    border: none;
}

body
{
(background-image:url(Background.png);)<-- machst du weg
background-attachment: scroll;
background-repeat:no-repeat;
background-position: top 0px;
background-color:#a8a8a8;
}

hinzufügen:
#Wrapper{
width:904px;<--falls dann links oder rechts nen paar pixel fehlen musst du den wert erhöhen.
margin:0 auto;
background-image:url(Background.png);
}
Wäre nett wenn du ne Rückmeldung gibst obs geklappt hat.
Die Tips meiner Vorredner solltest allerdings beherzigen(aber nicht böse nehmen*G*).

achso meine kommentare nimmst du bitte aus den quelltext raus :).
 
Zuletzt bearbeitet:
wupperphotos

wupperphotos

Holger Reich - Wupperfotografie

AW: Webseite mittig ausrichten

ergo schrieb:
Lieber heuschnie: da Du auf Deiner Website darum bittest, dass gefundene Fehler zu melden seien: bitte, bitte überarbeite Deine Rechtschreibung. Augsburg liegt doch noch im deutschen Sprachraum? :)

Danke Dir ...
Zum Vergrößern anklicken....

Zum Thema Rechtschreibung: Es steht ja nicht viel drin, doch die Reverenzen schon in der Menüführung falsch zu schreiben, ist sehr nachlässig ...

Referenz (von lat.: referre; frz.: référence = „auf etwas zurückführen“, „sich auf etwas beziehen“, „berichten“)

Ansonsten ist die Webseite für meinen Geschmack eher keine Referenz für dich als Mediengestalterazubi:-( Weniger ist manchmal mehr. Die Seite paß eher zum Anstreicher und Lackierer ...

Und die Mittigkeit ist ja schon geklärt.
 
B

base1985

Guest

AW: Webseite mittig ausrichten

Hallo heuschnie,

Versuch mal beim Style #seite (od. #page je nachdem wie du dieses style benannt hast) die Aussenabstände (margins) Links und Rechts auf Auto zu stellen. So zentriet sich deine Seite automatisch ;-)

Hatte das Problem auch vor kurzem.

LG

base1985
 
heuschnie

heuschnie

Noch nicht viel geschrieben

AW: Webseite mittig ausrichten

Hallo
Danke an alle, aber ich wusse schon das Referenzen falsch geschrieben ist.
Nur ich habe die Buttons und die anderen Grafiken Daheim am PC gemacht und die Seite programmiert hab ich bei meinem Dad Daheim. Da konnt ich die Button Beschriftung leider nicht mehr ändern.
@ArtiHl Danke aber irgendwie wird dann der Background nicht mehr angezeigt und die Seite richtet sich auch nicht mittig aus :(
 
owieortho

owieortho

Aktives Mitglied

AW: Webseite mittig ausrichten

Es sind zwar nur wenige Fehler, aber die Seite ist nicht valides XHTML und beim CSS klappt die Validierung auch noch nicht. Ich hoffe, Dein Ausbildungsbetrieb wird auf so was auch achten.
 
ans316

ans316

Nicht mehr ganz neu hier

AW: Webseite mittig ausrichten

Hallo,

wie meine Vorgänger schon sagten:
1. ein div als hauptcontainer setzen und den dann mit
margin: 0 auto;
width: 780px;
versehen. Die Breite 780px ist nur ein Beispiel.

Da gibt es aber noch jede Menge weiter zu verändern was den Code betrifft, aber das lernst Du schon noch.
 
heuschnie

heuschnie

Noch nicht viel geschrieben

AW: Webseite mittig ausrichten

Ja des hab ich auch gemacht,
aber die Seite richtet sich nicht mittig aus und der Hintergrund verschwindet.
 
Zuletzt bearbeitet:
Ladyan

Ladyan

Nicht ganz neu hier

AW: Webseite mittig ausrichten

also wenn du alle Punkte in einen #wrapper-div packst und diesen über css mit margin: 0 auto; ausrichtest MUSS die Seite mittig ausgerichtet sein.
dann sind da doch noch irgendwelche Überbleibsel.
Zeig uns doch mal die aktuelle Seite oder poste den Code.

lg
 
heuschnie

heuschnie

Noch nicht viel geschrieben

AW: Webseite mittig ausrichten

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Max-Heuschneider.de</title>

<style type="text/css">

img{
	border: none;
}

iframe{
	border: none;
}

body
{
background-color:#a8a8a8;
}

#Wrapper {
width:904px;
margin:0 auto;
background-image:url(Background.png);	
}

#Home_Button
{
	position: fixed;
	width: 73px;
	height: 29px;
	z-index: 2;
	left: 207px;
	top: 60px;
	 }
	 
#Ich_Button
{
	position: fixed;
	width: 48px;
	height: 29px;
	z-index: 3;
	left: 311px;
	top: 60px;
	}
	
#Referenzen_Button
{
	position: fixed;
	width: 149px;
	height: 29px;
	z-index: 4;
	left: 388px;
	top: 60px;
	}
	
#Gaestebuch_Button
{
	position: fixed;
	width: 117px;
	height: 29px;
	z-index: 5;
	left: 571px;
	top: 60px;
	}

#Textfeld
{
	font-size:19px;
	position: fixed;
	width: 481px;
	height: 257px;
	z-index: 10;
	top: 362px;
	left: 205px;
}

#Twitter
{
	position: fixed;
	width: 215px;
	height: 456px;
	z-index: 11;
	top: 419px;
	left: 709px;
}
 

#Twitter_Body
{
	background:url(Twitter.png);
	position: fixed;
	width: 294px;
	height: 590px;
	z-index: 10;
	top: 340px;
	left: 669px;
}
</style>

</head>
<body>
<div id="Wrapper">
<div id="Home_Button">
<a href="Index.html" >
<img src="Button_Home.png"></a></div>

<div id="Ich_Button">
<a href="Ich.html" >
<img src="Button_Ich.png" /></a></div>

<div id="Referenzen_Button">
<a href="Referenzen.html">
<img src="Button_Referenzen.png" ></a></div>

<div id="Gaestebuch_Button">
<a href="Gaestebuch.html" >
<img src="Button_Gaestebuch.png" /></a></div>

<div id="Textfeld" >
 <P />Das ist nun meine neue Webseite.<br />
  <p>Eigentlich hatte ich gar nicht vor, eine Neue zu machen, aber mein Vater hat aus Versehen meine Alte gelöscht.</p>
  <p>Naja die neue ist ja auch nicht so schlecht. :D</p>
  <p>Ich hoffe sie gefällt euch und wenn ihr noch Fehler entdeckt bitte melden. </p>
</div>
<div id="Twitter_Body">

</div>

<div id="Twitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 10,
  interval: 6000,
  width: 'auto',
  height: 366,
  theme: {
    shell: {
      background: '#ffffff',
      color: '#000000'
    },
    tweets: {
      background: '#ffffff',
      color: '#000000',
      links: '#0e086b'
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: false,
    hashtags: false,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('heuschnie').start();
</script> 
</div>
</div>
</body>
</html>
 
A

ArtiHl

Nicht mehr ganz neu hier

AW: Webseite mittig ausrichten

Ok nochmal diesmal getestet:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Max-Heuschneider.de</title>

<style type="text/css">

img{
    border: none;
}

iframe{
    border: none;
}

body
{
margin-top:0/*damit oben kein rand ist*/
margin-bottom:0;/* damit unten kein rand ist*/
background-color:#a8a8a8;
}

#Wrapper{
width:904px;/*wird für die zentrierung benötigt*/
min-height:1000px;
margin:0px auto;/*oben+unten 0px rand an den seiten wirds aufgeteilt*/
background-image:url(Background.png);
background-repeat:no-repeat;
/*damit sich die folgenden absoluten elemente an diesem ausrichten*/
position:relative;
}

#Home_Button
{
    position: absolute;
    width: 73px;
    height: 29px;
    z-index: 2;
    left: 207px;
    top: 60px;
     }
     
#Ich_Button
{
    position: absolute;
    width: 48px;
    height: 29px;
    z-index: 3;
    left: 311px;
    top: 60px;
    }
    
#Referenzen_Button
{
    position: absolute;
    width: 149px;
    height: 29px;
    z-index: 4;
    left: 388px;
    top: 60px;
    }
    
#Gaestebuch_Button
{
    position: absolute;
    width: 117px;
    height: 29px;
    z-index: 5;
    left: 571px;
    top: 60px;
    }

#Textfeld
{
    font-size:19px;
    position: absolute;
    width: 481px;
    height: 257px;
    z-index: 10;
    top: 362px;
    left: 205px;
}

#Twitter
{
    position: absolute;
    width: 215px;
    height: 456px;
    z-index: 11;
    top: 419px;
    left: 709px;
}
 

#Twitter_Body
{
    background:url(Twitter.png);
    position: absolute;
    width: 294px;
    height: 590px;
    z-index: 10;
    top: 340px;
    left: 669px;
}
</style>
</head>
<body>
<div id="Wrapper">
<div id="Home_Button">
<a href="Index.html" >

<img src="Button_Home.png"></a></div>

<div id="Ich_Button">
<a href="Ich.html" >
<img src="Button_Ich.png" /></a></div>

<div id="Referenzen_Button">
<a href="Referenzen.html">
<img src="Button_Referenzen.png" ></a></div>

<div id="Gaestebuch_Button">
<a href="Gaestebuch.html" >
<img src="Button_Gaestebuch.png" /></a></div>

<div id="Textfeld" >
 <P />Das ist nun meine neue Webseite.<br />

  <p>Eigentlich hatte ich gar nicht vor, eine Neue zu machen, aber mein Vater hat aus Versehen meine Alte gelöscht.</p>
  <p>Naja die neue ist ja auch nicht so schlecht. :D</p>
  <p>Ich hoffe sie gefällt euch und wenn ihr noch Fehler entdeckt bitte melden. </p>
</div>
<div id="Twitter_Body">

</div>

<div id="Twitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 10,
  interval: 6000,
  width: 'auto',
  height: 366,
  theme: {
    shell: {
      background: '#ffffff',
      color: '#000000'
    },
    tweets: {
      background: '#ffffff',
      color: '#000000',
      links: '#0e086b'
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: false,
    hashtags: false,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('heuschnie').start();
</script> 
</div>

</div>
</body>
</html>
 
M

MrAzrael

Nicht mehr ganz neu hier

AW: Webseite mittig ausrichten

Bei dem ganzen HickHack hier wäre es meiner Meinung nach am sinnvollsten erstmal anzugeben mit welchem Browser du arbeitest um dir deinen Entwurf anzusehen ... gibt genug Dinge im Bereich CrossSiteScripting im Bereich CSS die jeder Browser anderes interpretiert

gut nun war ich zu spät mit absenden, aber für die Zukunft CSS wird nicht in allen Browsern gleich dargestellt, die größten Probleme gibt's immernoch mit dem IE
 
Zuletzt bearbeitet:
A

ArtiHl

Nicht mehr ganz neu hier

AW: Webseite mittig ausrichten

Büdde,
im welchem Ausbildungsjahr bist du eigendtlich?
Wenn du später mit Webseiten arbeiten möchtest empfehle ich dir dich mit den Grundlagen von HTML und CSS auseinadner zusetzten.
Als ich angefangen habe habe ich mir einfach fertige Webseiten genommen und hinterher die mir unbekannten HTML und CSS-Tags bei SELFHTML 8.1.2 (HTML-Dateien selbst erstellen) rausgesucht.
So lernt man sehr schnell mit HTML und CSS umzugehen.

Viel Erfolg dir noch.

Edit: Fast vergessen, ich habs nur im Firefox getestet, die anderen Browser musst du testen, wenn irgendwas nicht richtig läuft schaue bei selfhtml nach und schaue dir die interpretation der browser an.
 
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
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 256 (Mitglieder: 10, Gäste: 246)
Robots: 1.056

Statistik des Forums

Themen
118.611
Beiträge
1.538.342
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben