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

gaedingar

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

chris90night

Also, die Grautöne sind gut aufeinander abgestimmt und die Schrift ist auch gut lesbar ...
Aber ich würde noch einen richtig guten Banner machen und ein paar Stellen mit kleineren grafischen, aber nicht zu aufdringlichen Effekte versehen.
Den Banner bindest du dann ein mit:

Code

background-image:url(PfadzudeinerGrafik/grafik.jpg);

Diesen Code natürlich bei dem entsprechenden <div> einfügen ...
Eine komplette Auflistung der CSS-Befehle/Eigenschaften findest du auf http://www.css4you.de[url]<br>...<br>Wegen der Positinoierung ... <br>Du kannst Prozentangaben verwenden, die Größen der Abstände sehen dann aber bei verschiedener Auflösung auch verschieden groß aus, naja Prozent halt ... relativ zur Fenstergröße<br>Oder du machst feste Angaben des Abstandes nach links und nach oben ...<br><woltlab-metacode-marker data-name="code" data-uuid="438135d7-4273-4030-ba15-ccf4afea64d7" data-source="W2NvZGVd" /><br>/* Die Titelzeile */<br>#title {<br>height:30px;<br>padding:20px;<br>text-align:center;<br>background-color:#333333;<br>}<br><woltlab-metacode-marker data-uuid="438135d7-4273-4030-ba15-ccf4afea64d7" data-source="Wy9jb2RlXQ==" /><br>Das Padding kann so auch gar nicht klappen. Einfach nur Padding zu schreiben, bedeutet man will Innenabstand von rechts,links,oben und unten... Schau dir am besten die Grafik auf css4you.de an die verdeutlicht wie die verschiedenen Maße gehandhabt werden ... und rechne nochmal alles nach, ob auch alles passt. >>> [url]http://www.css4you.de/wsboxmodell/index.html

Gruß, chris90night

gaedingar

Danke!

Hab jetzt mal versucht, nen header in das Ganze einzubauen (aber irgendwie glaub ich, dass das nicht die eleganteste Lösung war... das mit dem background-image hat iwie nicht so recht geklappt beim ausprobieren grad...)

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

chris90night

Also, bei mir ist mit dem IE kein "Freiraum" zu sehen ... Aber wenn es in Firefox richtig angezeigt wird, dann hast nix falsch gemacht.
Die Hauptaufagbe besteht oft darin, die IE-Bugs zu beseitigen

Pascha92

Ich hab auch mal Firefox und IE verglichen ich sehe keinen Freiraum, es ist alles identisch, wenn du einen Freiraum siehst setz mal einen screenshot rein, wo du den entsprechend makiert hast

Tikonteroga

Hallo,

ich bin zwar auch ein anfänger, aber mir sind zwei Sachen aufgefallen, die ich zumindest persönlich anders machen würde.

Versuche Paragraphen, also

Elemente nicht durch
zu trennen, sondern versuche es mit CSS, also mit margin-top und/oder margin-bottom. HTML mit CSS zu formatieren verhält sich analog zu Word mit Formatvorlagen zu formatieren. Alternativ kannst du auch ein Inline-Element, wie z.B. <center>...</center> benutzen.
Häufig setzt du in HTML Tags Atribute um HTML zu formatieren z. B. <div align="center"> oder <p align="justify">. Verwende hier lieber CSS. Viele dieser Atribute sind als Deprecated gekennzeichnet und verschwinden bald aus dem HTML-Standard.

Gruß

Tikonteroga

gaedingar

Danke für eure Kritiken! Werde mich demnächst mal etwas weiter in die Materie einarbeiten und versuchen, eure Vorschläge irgendwie in die Praxis umzusetzen... im Moment hab ich allerdings noch keinen Plan, wie man zB. den "Effekt", den ein "
" erzielt, mit Hilfe von CSS umgesetzt werden kann und so... naja, wird mit Sicherheit auf irgendeiner Seite erklärt sein... und nachträgliche Änderungen sind ja auch nicht das Problem

Zitat von chris90night

Aber ich würde noch einen richtig guten Banner machen und ein paar Stellen mit kleineren grafischen, aber nicht zu aufdringlichen Effekte versehen.

Naja, hab jetzt erstmal nen Platzhalter gebastelt. Das "Problem" mit dem Pixelfreiraum hab ich übrigens gelöst, indem ich nen Rahmen um die Grafik (also den header) gemacht hab... *hust* ...weil in Opera und Firefox war alles okay, nur im IE eben nicht Und so sieht's wenigstens ordentlich aus...

Und welche "Effekte" könntest du empfehlen? Hab da leider noch nicht so die Ahnung von!

... Eins wüsst ich dann noch gern, vllt. kann mir ja jmd helfen...

Wie verlinke ich denn jetzt die Seiten am besten?

Muss ich die CSS-"Befehle" aus dem headteil in jede neue Seite übernehmen, oder kann man die irgendwie auslagern in ne externe CSS-Datei? Was muss ich dabei beachten?? (Falls sich das hier überhaupt anbietet, weiss ja nicht...)

Oder wie verlinkt man die Seiten sonst idR? Die Inhalte sollen ja nur im "content"-Teil meiner Seite angezeigt werden!

Sag' schonmal danke im Voraus für eure Antworten!

LG

gaedingar

*schieb*

Hey, hab doch keine Ahnung... *g*

chris90night

Mit Effekte meine ich "Grafische Effekte.
Mach statt nur graues Feld, ne graue Grafik mit Muster oder so, was halt das Grafikprogramm hergibt(bissle Kreativität gehört au dazu ) und füge es dann als Hintergrundbild im <div> ein.
Die Beste Möglichkeit Seiten zu verlinken ist einfach nur den Inhalt auszutauschen und nur den <div> Teil mit dem Inhalt neu zu laden, dass erreicht man mit PHP ... mit der include()-Funktion ... Wie das geht, ist ziemlich schwer zu erklären für einen Laien ...
Zu Hause habe ich es in einem Dokument verfasst, bin aber gerade nicht @ home ...
Gruß

gaedingar

jaah, klingt kompliziert...

hab's jetzt auch erstmal mit nem einfachen iframe versucht. denkt ihr, das ist okay so!?

aktuelle version des seitenlayouts

lg

gaedingar

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":

HTML

<!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>


<div style="width:760px;margin:35px auto;text-align:center">


<div id="head">
[img]banner/headerneu.jpg[/img]
</div>


<div id="menu">
[url='#']Startseite[/url]|
[url='#']Über Mich[/url]|
[url='#']Islandpferde[/url]|
[url='#']Fotografie[/url]|
[url='#']Galerie[/url]|
[url='#']Linkliste[/url]|
[url='#']Gästebuch[/url]
</div>


<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>


<div id="footer">
[url='#']Neuerungen[/url]|
[url='#']Kontakt[/url]|
[url='#']Impressum[/url]
</div>


<div id="content">
[b]<font color="#FF6600">[</font>[/b] Zuletzt aktualisiert am: 25. Dezember 2006, © hestamyndir.de [b]<font color="#FF6600">]</font>[/b]




<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>

Alles anzeigen

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:

HTML

<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>


Ich freue mich, dass Sie hierher gefunden haben![/b]






<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.


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.


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>

Alles anzeigen

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>


Ich freue mich, dass Sie hierher gefunden haben![/b]






<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.


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.


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]
</div>
</td>
</tr>
</table>
</body>
</html>

Alles anzeigen

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!

Kann mir vllt. jemand mit meinem Problem weiterhelfen?

LG

Ich will nur kurz was reinwerfen (kann dir leider sonst nicht helfen, sorry):
Schreib die Umlaute doch bitte mit entsprechendem Html-Code (zB. "ä" für "ä").

Das wars auch schon...

LG Keast

Tags

Benutzer online in diesem Thema