Layout: Wie kann ich mir ein eigenes Profilayout machen?

Admin Anzahl der Beiträge : 27 Anmeldedatum : 04.08.08

Grundsätzlich sollte man dazu ein wenig HTML-Kenntnisse mitbringen, aber an sich ist es nicht so kompliziert. Bevor du dich aber an ein eigenes Layout wagst, suche dir lieber eines im Layoutdealer, das du deinen wünschen anpassen kannst.

Solltest du dich aber fit genug für ein eigenes LAyout fühlen, gibt es hier so etwas wie ein Formular, eine leere Vorlage:

Code:: <html>

<head>
<title>Leeres Layout<title>

{PLACE_POWEREDBY}

<style type="text/css">

div
{scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF}

body
{scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
background-image:
background-repeat: repeat}

td
{font-family: arial;
font-Size: 7pt;
Color: #FFFFFF}

INPUT {background-color: transparent; color: #FFFFFF; border: 1px #FFFFFF solid }
TEXTAREA {background-color: transparent; color: #FFFFFF; border: 1px #FFFFFF solid; width: 300px}

b{color: FFFFFF; font-size: 10pt;}
i{color: FFFFFF; font-size: 10pt;}
u{color: FFFFFF; font-size: 11pt;}

a{ CURSOR: default; COLOR: FFFFFF; TEXT-DECORATION: none; font-family: arial}

a.navi:link, a.navi:active, a.navi:visited
{cursor: default;
color: FFFFFF;
TEXT-DECORATION: none;
background-color: FFFFFF;
text-align: center;
width: 100%;
font-family: arial}

a.navi:hover
{cursor: default;
color: #FFFFFF;
TEXT-DECORATION: none;
background-color: FFFFFF;
text-align: center;
width: 100%;
border: 2px #000000 solid;
font-weight: bold;
font-family: arial}

a:hover {CURSOR: default; COLOR: #FFFFFF; TEXT-DECORATION: none; background-color: transparent; border-bottom: 2px #FFFFFF solid; font-family: arial}

.titlenavi {FONT-FAMILY: arial; FONT-SIZE: 11pt; COLOR: #FFFFFF; TEXT-DECORATION: none; margin-bottom: 20px; line-height: 15px; font-weight: normal; display: block; border: 2px #FFFFFF solid; font-weight: bold; text-align: center}

table{width: 100%;}

</style>

</head>

<body bgcolor="#000000">

<div id=head style="left: 0px; top: 0px; topmargin: 0; leftmargin: 0; position: absolute"><scrolling:no>
<img src="http://HINTERGRUNDBILD.jpg" border="0"></scrolling>

</div>

<div align="justify"
id=entry style="position: absolute; overflow: auto; left: 100%; top: 100%; width: 100%; height: 100%; font-family: arial; font-size: 12px; color: #FFFFFF; border=: 2px; overflow: auto; filter: alpha(opacity=100); scrolling:no><justify>

:CONTENT_HIER:

</justify></div>

<DIV id=navigation
style=" overflow:auto; LEFT: 100%; WIDTH:100%; POSITION: absolute; TOP:100%; HEIGHT: 100%">

<p style="text-align: absolute">
<font color= #FFFFFF face="arial" size="1"><center>

<font size="2"><b>Titel</b></font><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<br>
<hr><br>

<b>Titel</b><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<br>
<hr><br>

</div></p></font>
</center>

</body></html>

Du musst hier folgendes ersetzen und anpassen:

1. Im CSS-Bereich Farben, Schriftart und Schriftgröße

2. Hintergrundbild bzw. Backgroudcolor sowie die Links für das Menü

3. Die Ausrichtungen deines Contents (Textfeld), deines Menüs (Navgation) und ggf. auch deines Hintergrundes:
width (Breite)
heigth (Höhe)
top (Abstand vom oberen Bildschirmrand)
left (Abstand vom linken Bildschirmrand)
Momentan steht hier überall 100%, was aber wenig dienlich ist. Es ist zu empfehlen, anstatt Prozentangaben genaue Zahlen (z.B. 50pt) anzugeben.

Achtung: Dieses Leerlayout enthält alle gängigen angaben. Es darf kopiert und angepasst werden. Dennoch ist es nur eine von vielen Möglichkeiten. Daher gibt es sicherlich auch Layouts, die vom Aufbau her anders aussehen.

» Eigenes Layout
» Und doch nocheinmal Eigenes Layout
» Eigenes Layout aufsetzen
» Blog: Wie kann ich per E-Mail bloggen?