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

Neues Layout, ein paar Anfängerfragen... ;)

Status
Für weitere Antworten geschlossen.
G

gaedingar

Neues Mitglied
Hallo,

hab den absoluten "Prototyp" meines neuen Layouts soweit fertig. Jedenfalls was die reine Aufteilung der Seite anbelangt, Farben etc. werden später noch angepasst.

Hier klicken

Denkt ihr, das ist für den ersten Versuch okay so? Gibt es grundlegende Fehler oder würdet ihr Dinge auf jeden Fall ändern/korrigieren?

Die Abstände nach links bzw. rechts sind gleich (760px, zentriert ausgerichtet) - die Abstände von "oben" und "unten" aber nicht. Was muss ich tun, damit sie jeweils den gleichen Abstand nach "außen" haben? (Das Problem tritt aber scheinbar nur im IE auf... dafür ist im Firefox die Überschrift seltsam "verrückt", also das padding scheint jedenfalls nach unten nicht nicht zu funktionieren...).

Die Titelzeile (jetzt noch "h1") würde ich später gerne durch einen header (Grafik) ersetzen, wie kann ich diese einbinden?

Bin dankbar für jede Hilfe!!

LG und ein frohes Fest ;)
 
Zuletzt bearbeitet:
Werbung:
Ok es ist relativ schlicht, ab hier meine Anmerkungen:

- NIEMALS weiße Schrift auf schwarzem Grund. Der Kontrast is dermaßen extrem, dass man nach ner Weile Lesen Kopfschmerzen bekommt. Nimm lieber Garben, die harmonieren und sich nicht gegenseitig "ausstechen"!

- Wenn die Navigation die Farbe wie der Hintergrund bekommt, würde ich den Border links und rechts entfernen und diesen stattdessen komplett um den Header und den Inhalt jeweils ziehen.

- Der Hover-Effekt sollte nicht diese dunkle Schrift bekommen. Das ist ZU dunkel auf nem dunklen Hintergrund...
 
ich würde die Navigation ganz anders machen. So, dass sich bei Hoover der Hintergrund ändert und die Schrift dunkler wird.

Den Kontrast zwischen Hintergrund und Schriftfarbe im Inhaltsbereich finde ich auch etwas zu stark.
 
Werbung:
Danke für die bisherigen Antworten :)

Den Vorschlag mit dem border jeweils um header und content div hab ich bereits übernommen. Wie gesagt, die Farben werd ich später noch aufeinander abstimmen - trotzdem danke für die Tipps ;) Werd drauf achten^^

Hab jetzt mal versucht, nen header in das Ganze einzubauen (aber irgendwie glaub ich, dass das nicht die eleganteste Lösung war...)

Hab hier auch wieder das Problem, dass es in Opera und Firefox richtig angezeigt wird, im IE/AOL ist unten zwischen der Grafik und der unteren border-Linie aber ein ca. 2px großer "Freiraum".

Hat jmand ne Idee, wie man den schließen könnte?? Sieht echt mal dumm aus...

Test II

Danke + LG
 
Okay, hätte nochmal 'ne Frage an die CSS-Profis *g*

Das Layout sieht mittlerweile so aus:

Aktuelle Version des Layouts

> Der content-Bereich wurde durch ein iframe ersetzt und mit Hilfe eines table-tags "ausgerichtet":

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="Author" content="Nina Peters" />
<meta name="description" content="Herzlich Willkommen auf hestamyndir.de, der Fotoseite von Nina Peters" />
<meta name="keywords" content="Islandpferd, Islandpferde, Tölt, Tölter, Rennpass, Ovalbahn, Pferdefoto, Pferdefotos, Pferdebild, Pferdebilder, Islandpferdefoto, Islandpferdefotos, Horsepictures, Hestamyndir, DIM, DJIM, Pferd, Pferde" />
<style type="text/css"><!--
body
{
 font-family:Verdana;
 font-size:14px;
 background-color:#444444;
 text-align:center;
}
a:link, a:visited, a:active, a:hover
{
  text-decoration:underline;
  font-weight:bold;
  color:#DFDFDF;
  font-size:14px;
}
a:active, a:hover
{
  color:#FFFFFF;
}
/* Die Hyperlinks im Menü */
a.menu:link, a.menu:visited
{
  color:#DFDFDF;
  text-decoration:none;
}
a.menu:active, a.menu:hover
{
  color:#FF6600;
}
/* Die Hyperlinks im Footer */
a.footer:link, a.footer:visited
{
  color:#DFDFDF;
  text-decoration:none;
}
a.footer:active, a.footer:hover
{
  color:#FF6600;
}
/* Die Headzeile */
#head {
}
/* Das Menü */
#menu {
color:#FFFFFF;
background-color:#444444;
text-align:center;
padding:10px 0px;
}
/* Der Inhalt */
#content {
background-color:#333333;
border:solid 1px #000000;
padding:15px;
color:#DFDFDF;
}
/* Formdaten */
#footer {
color:#FFFFFF;
background-color:#444444;
text-align:center;
padding:10px 0px;
}
//-->
</style>
</head>
<body>
<!--  Gesamter Inhalt  -->
<div style="width:760px;margin:35px auto;text-align:center">
<!--  Header  -->
<div id="head">
<img src="banner/headerneu.jpg";width="760";height="160">
</div>
<!--  Menü  -->
<div id="menu">
<a class="menu" href="#">Startseite</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Über Mich</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Islandpferde</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Fotografie</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Galerie</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Linkliste</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Gästebuch</a>
</div>
<!-- Inhalt -->
<div align="center">
<table width="760" hight="*" border="0" cellspacing="0" cellpadding="0" style="border: 1px solid #000000">
<tr>
<td>
<iframe name=main width="760" height="380"src="main.html" frameBorder="0">
</iframe>
</td>
</tr>
</table>
</div>
<!--  Footer  -->
<div id="footer">
<a class="footer" href="#">Neuerungen</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="footer" href="#">Kontakt</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="footer" href="#">Impressum</a>
</div>
<!-- Inhalt -->
<div id="content">
<b><font color="#FF6600">[</font></b> Zuletzt aktualisiert am: 25. Dezember 2006, © hestamyndir.de <b><font color="#FF6600">]</font></b><br>
<br><script language="JavaScript" src="<A href="http://www.onlinewebservice3.de/onlinecount.php?id=c88493&offset=5&style=2"></script">http://www.onlinewebservice3.de/onlinecount.php?id=c88493&offset=5&style=2"></script>
</div>
</div>
</body>
</html>

Hab jetzt mal ein bisschen was am "main"-Dokument ausprobiert + den Text mit Hilfe von HTML formatiert, hochgeladen... war soweit auch alles okay, nur im Opera waren die Abstände etwas "ungleich", fiel aber auch kaum auf...

Der code des in HTML formatierten Texts sah so aus:

Code: 
<html>
<head>
<title>main</title>
<meta name="author" content="Fam. Peters">
</head>
<body text="#DFDFDF" bgcolor="#333333" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<table cellpadding="30">
<tr>
<td>
<div align="center"><font size="-1"><font face="VERDANA"><b><font color="#FF6600">...</font> Herzlich Willkommen auf meiner Website<font color="#FF6600"> ...</font><br>
Ich freue mich, dass Sie hierher gefunden haben!</b><br>
<br>
<p align="justify">Auf diesen Seiten erwartet Sie neben einigen Infos rund um's Islandpferd noch eine kleine Auswahl meiner Fotos aus den vergangenen Jahren. Bitte schauen Sie sich um und entdecken Sie fotografisch eingefrorene Momente aus dem Leben wundervoller Pferde, sowie Impressionen aus unserer alltäglichen Umwelt.<br>
Häufig zeigt sich die Schönheit unserer Welt in den kleinen Details oder in Formen und Farben - auch durch eine leicht veränderte Perspektive offenbart sich dem Betrachter immer wieder eine neue, interessante Sichtweise. Ich hoffe, Sie finden hier das eine oder andere Foto, welches Ihnen Freude bereitet.<br>
Bitte zögern Sie nicht, mich zu kontaktieren, sofern Sie eine meiner Aufnahme als großformatigen Print wünschen - oder falls Sie ein Foto gern anderweitig verwenden möchten. Ohne mein schriftliches Einverständnis ist die Nutzung von Inhalten dieser Webseite allerdings nicht gestattet. Viel Spaß bei'm Stöbern!</p>
<b><font color="#FF6600">-</font> Nina Peters <font color="#FF6600">-</font></b></font></font></div>
</td>
</tr>
</table>
</body>
</html>

Dann hab ich versucht, den gleichen Text mit Hilfe von CSS zu formatieren, code:

Code: 
<html>
<head>
<style type="text/css">
body
{
 font-family:Verdana;
 font-size:10px;
 color:#DFDFDF;
 background-color:#333333;
 text-align:center;
}
a:link, a:visited, a:active, a:hover
{
  text-decoration:underline;
  font-weight:bold;
  color:#DFDFDF;
  font-size:10px;
}
a:active, a:hover
{
  color:#FFFFFF;
}
</style>
</head>
<body>
<table cellpadding="30">
<tr>
<td>
<div align="center">
<b><font color="#FF6600">...</font> Herzlich Willkommen auf meiner Website <font color="#FF6600">...</font><br>
Ich freue mich, dass Sie hierher gefunden haben!</b><br>
<br>
<p align="justify">Auf diesen Seiten erwartet Sie neben einigen Infos rund um's Islandpferd noch eine kleine Auswahl meiner Fotos aus den vergangenen Jahren. Bitte schauen Sie sich um und entdecken Sie fotografisch eingefrorene Momente aus dem Leben wundervoller Pferde, sowie Impressionen aus unserer alltäglichen Umwelt.<br>
Häufig zeigt sich die Schönheit unserer Welt in den kleinen Details oder in Formen und Farben - auch durch eine leicht veränderte Perspektive offenbart sich dem Betrachter immer wieder eine neue, interessante Sichtweise. Ich hoffe, Sie finden hier das eine oder andere Foto, welches Ihnen Freude bereitet.<br>
Bitte zögern Sie nicht, mich zu kontaktieren, sofern Sie eine meiner Aufnahme als großformatigen Print wünschen - oder falls Sie ein Foto gern anderweitig verwenden möchten. Ohne mein schriftliches Einverständnis ist die Nutzung von Inhalten dieser Webseite allerdings nicht gestattet. Viel Spaß bei'm Stöbern!<br></p>
<b><font color="#FF6600">-</font> Nina Peters <font color="#FF6600">-</font></b>
</div>
</td>
</tr>
</table>
</body>
</html>

Ergebnis: Der Text macht, was er will *g* Ist insgesamt viel zu groß geraten (sicher keine 10px, wie angegeben), im Firefox kann die Seite gar nicht aufgerufen werden (IE/Opera kein Problem!)

Also, hab leider keine Idee, was ich da falsch gemacht hab!? :(
Wieso werden die CSS"Befehle" nicht umgesetzt...?

Meine "CSS-Version" *g* sieht so aus! :lol:

Kann mir vllt. jemand mit meinem Problem weiterhelfen? :D
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben