• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Homepage einheitliche Größe und mittig, Und Hintergrundbild (bitte um Hilfe)

M

Marianne

Neues Mitglied
Hallo, ich habe eine Homepage erstellt und möchte diese egal mit welcher Auflösung und welchen Monitor das angesehen wird, daß die Größe immer gleich bleibt und daß sie immer mittig ist (also zentriert von oben und seitlich) Und ein Hintergrundbild einfügen, daß es halbwegs gut aussieht.
Also daß ich faktisch die Homepage auf das Bild "drauflege", wenn sich jemand die Site ansieht und eine größere Auflösung hat, damit er dann durch die entstandenen Ränder dieses Bild sieht.

Dadurch ich ein Anfänger bin, ist es nicht so leicht alles rauszulesen. Meine Idee dazu, das Ganze in eine Tabelle packen und die auf "Center" setzen. Habe das auch probiert, aber irgendwie ist das nicht gegangen. Habe mir dann einige Foren angesehen, aber als Laie ist das echt undurchsichtig, darum habe ich mich entschlossen selber zu schreiben.
Ich hoffe es gibt jemanden da draußen, der mir helfen kann und will. Ich bräucht da hald eher eine genaue Anleitung bzw. Hilfe. Was ich wo in meinem Quelltext einfügen kann, damit ich das gewünschte habe.
Vielen Dank für Eure Bemühungen!:D
Marianne
Hier mein Quelltext:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="description" content="Place your description here" />
<meta name="keywords" content="put, your, keyword, here" />
<meta name="author" content= />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link href="style_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>

<body id="page1">

<div class="tail-top-right"></div>
<div class="tail-top">
<div class="tail-bottom">
<div id="main">

<div id="header">

<ul class="site-nav">
<li><a href="index.html">Startseite</a></li>
<li><a href="about-us.html">Über uns</a></li>
<li><a href="services.html">Dienstleistung</a></li>
<li><a href="mailto:[email protected]?subject=Anfrage">Kontakt</a></li>
<li class="last"><a href="links.html">Links</a></li>
</ul>
<div class="logo">
</div>
<div class="slogan">
</div>
</div>

<div id="footer">
<div class="indent">
<div class="fleft">www.test.at</div>
<div class="fright"><div class="vlinks">Impressum</div>
</div>
</div>
</div>
</div>
</div>

</body>
</html>
 
Hallo Marianne,

hmm. Naja. Auf Tabellen würde ich verzichten. Macht man heutzutage nicht mehr. Barrierefrei sollte ne Webseite sein. Was Dir eigentlich noch fehlt ist das CSS. Ich bin mir nicht sicher, ob Du schon eine CSS File hast. Eingebunden sind zwar 2 Stück aber die hast Du hier noch nicht angehängt. Deshalb habe ich Deinen HTML-Code etwas gekürzt und eine kurze CSS dazu geschrieben. Mache also folgendes:

1.) Erstelle Dir mit dem Texteditor eine simple Text-File (TXT) und bennene diese als: z.b. "index.html"
2.) Kopiere in diese Datei folgenden HTML-Code hinein:

<html>
<head>
<title>Test Seite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>


<div id="main">

<div id="header">

<ul id="site-nav">
<li><a href="index.html">Startseite</a></li>
<li><a href="about-us.html">Über uns</a></li>
<li><a href="services.html">Dienstleistung</a></li>
<li><a href="mailto:[email protected]?subject=Anfrage">Kontakt </a></li>
<li class="last"><a href="links.html">Links</a></li>
</ul>


<div class="logo">
</div>

<div class="slogan">
</div>

</div>

<div id="footer">
<div class="indent">
<div class="fleft">www.test.at</div>
<div class="fright"><div class="vlinks">Impressum</div>
</div>
</div>
</div>

</body>
</html>

3.) Erstelle Dir eine zweite Text-File und benenne sie: "style.css". Beide Dateien müssen in ein und dem selben Verzeichnis liegen
4.) Kopiere den folgenden CSS-Text in die style.css

@charset "utf-8";


body{
/* Auf der ganzen Seite die schriftart und gr��e definieren */
font-family:arial;
font-size:12px;

}





/* ID schreibt man mit # */
#main{
/* Damit alles auch auf z.b. iPhone gleich dargestellt wird */
-webkit-appearance: none;
-webkit-border-radius:0px;

/* Die Breite deiner Seite definieren */
width:860px;

/* Seite mittig */
margin-left:auto;
margin-right:auto;

}




/* Ich habe deine Klasse site-nav in eine ID umgesetzt, da es nur einmal so vorkommt */
#site-nav{
/* Die Listenpunkte wegmachen */
list-style-type:none;

/* liste links anordnen */
float:left;

/* Die Liste ganz oben an der Seite ansetzen */
margin-top:0;

}




/* Schreibweise f�r listen: ul#ID-NAME li */
ul#site-nav li{
/* Linksb�ndig anordnen */
float:left;
/* 10px Abstand zwischen den Navigationspunkten */
margin-right:10px;

}






/* Klassen (class) schreibt man mit . */
.indent{
/* IT WORKS und Impressum rechts anordnen - Der rechte Rahmen ist bei 860px, der linke bei 0, alles ist mittig, siehe #main */
float:right;

}


5.) Vielleicht kannst Du nachvollziehen, was da passiert ist. Alles, was ich in /* ... */ geschrieben habe, sind Kommentare. Wenn Du aber wirklich eine Webseite bauen willst und etwas Zeit (ca. 40 Minuten) hast und etwas Englisch kannst, dann schau Dir doch mal den folgenden Link an:
: Creating the HTML framwork of the website

Für absolute Anfänger und sehr leicht erklärt. Vielleicht hilft Dir das. Dann hast Du am Ende des Tages Deine eigene Webseite ;)

Viele Grüße und viel Glück ;)
 
Hallo,

also
in eine Tabelle packen und die auf "Center" setzen
Zum Vergrößern anklicken....
bloss nicht. tabelle hat da nichts zu suchen.
du brauchst ein div um alles was noch nicht hast und dem gibst eine feste breite und ausrichtung machst mit margin:0 auto;

gleich hinter <body id="page1">
Code: 
<div id="wrapper">

genau vor </body>
Code: 
</div>
und css
Code: 
#wrapper{
width:990px;
margin:10px auto; /*die 10px steht für den abstand oben unten*/
}
Cheffchen
 
Vielen herzlichen Dank für die Antworten :) werde mir das morgen ansehen und mich darüber stürzen...
Gute Nacht
Marianne
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben