 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Flyinghorse
Threadersteller
Dabei seit: 17.07.2003
Ort: Neumarkt
Alter: 37
Geschlecht: 
|
Verfasst Di 13.10.2009 14:03
Titel Startseite "Template" |
  |
|
Erstmal vorweg, ich bin Printler, lasset Gnade walten, auch wenn wir hier im MGi sind 
So, nun zum eigentlichen Thema....
Ich plane derzeit, für meinen Webauftritt eine Art Startseite.
Mit HTML bin ich sagen wir, einigermaßen vertraut, auch wenn meine Kentnisse auf dem Stand von ~2000 sind  . Auch ein CMS/Blog usw. kann ich einrichten/pflegen bla bla.
Jedoch muss ich ja bei der Startseite quasi von null Anfangen, und da haben wir das Problem. 
Das ganze Ding soll am Ende so aussehen:
Hintergrund ist der, ich bin heute hierrüber gestolpert: KLICK und dachte mir, das will ich auch.
Nun, mein Problem: Wie stell ich das (nach heutigen Regeln am besten und schnellsten an?
Tagelanges einlesen, nur wegen einer Startseite ist jetzt nicht gerade mein Fall (ich bin NICHT lernresistent) 
Versucht hab ichs schon mit PS CS3 und etwas slicen, nur wenn ich meine Buttons dann verlinke, verschiebts mir die Grafiken... Weshalb?
Desweiteren möchte ich noch, dass das Hintergrundbild Fix ist, und der Name sowie die Logos fix in der mitte Sitzen.
Gibt es für so ein Vorhaben eine Art Template? Alles was ich finde ist nur für komplette Websites,das nützt mir eher weniger was. Oder besitzt jemand schon so ein Template?
Naja, ich freu mich schon mal auf die verbale Steinigung eurer Seits, und hoffe auf ein paar nützliche Beiträge.
|
|
| |
   |
 |
Nimroy
Community Manager
Dabei seit: 26.05.2004
Ort: zwischen Köln und D'dorf
Alter: 45
Geschlecht:
|
Verfasst Di 13.10.2009 14:07
Titel
|
|
|
Das ist doch popeliges XHTML. CMS wirst du da keins brauchen.
Das es dir verlinkte Grafiken verschiebt liegt wahrscheinlich an ner Border um verlinkte Grafiken. Die würde ich per CSS mal flugs auf 0 setzen.
Zuletzt bearbeitet von Nimroy am Di 13.10.2009 14:08, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
Flyinghorse
Threadersteller
Dabei seit: 17.07.2003
Ort: Neumarkt
Alter: 37
Geschlecht:
|
Verfasst Di 13.10.2009 14:12
Titel
|
|
|
| Nimroy hat geschrieben: | Das ist doch popeliges XHTML. CMS wirst du da keins brauchen.
Das es dir verlinkte Grafiken verschiebt liegt wahrscheinlich an ner Border um verlinkte Grafiken. Die würde ich per CSS mal flugs auf 0 setzen. |
Popeliges XHTML sagst du so einfach, wenn ich es könnte, würde ich nicht nach Hilfe rufen. 
Btw: Das mit dem CMS/Blog sollte nur verdeutlichen, das ich nicht ganz dumm bin, sondern ein klein wenig wissen vorhanden ist. 
Direkt in der HTML Datei die mir Photoshop ausspuckt krieg ich den Border nicht weg, oder? Wobei dann immer noch das Problem mit dem Fixen Hintergrund, sowie der Fixen mittigen Position der Buttons besteht.
|
|
| |
|
|
Nimroy
Community Manager
Dabei seit: 26.05.2004
Ort: zwischen Köln und D'dorf
Alter: 45
Geschlecht:
|
Verfasst Di 13.10.2009 14:17
Titel
|
|
|
Oh, okay.
Aber anstatt in dem von PS erzeugten HTML rumzupfuschen würde ich nur die Grafiken nehmen und das Ding von Hand aufbauen, inkl. CSS
Tja, und dann wirst du wohl nicht drumrum kommen, dich mit dem Thema auseinanderzusetzen. Entweder schraubst du dein Wissen hoch oder deinen Anspruch runter. Aber wer will schon letzteres? 
|
|
| |
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 13.10.2009 14:33
Titel
|
|
|
ich habe dir mal das grundgerüst gebastelt.
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>doorway test</title>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="..." />
<style type="text/css" media="all">
@charset "ISO-8859-1";
* {
margin: 0;
padding: 0;
}
html, body {
margin:0;
padding:0;
height:100%;
}
body {
font-family:arial,verdana,helvetica,tahoma,sans-serif;
font-size:1em;
font-weight:normal;
color:#000000;
line-height:1em;
background:#E3E3E3;
}
a {
outline:none;
border:none;
}
ul {
list-style-type:none;
}
img {
width:100%;
height:100%;
border:none;
}
div#horizontal {
display:block;
height:0.062em;
width:100%;
left:0em;
top:50%;
background:red;
overflow:visible;
position:absolute;
visibility:visible;
}
div#horizontal #wrapper {
background-color:#fff;
width:30em; /* breite des wrappers, beachten das container auch dementsprechend verschoben werden muß */
height:5em; /* höhe des wrappers, beachten das container auch dementsprechend verschoben werden muß */
top:-2.875em; /* dieser wert verschiebt den wrapper vertikal */
left:50%;
margin-left:-15.75em;/* dieser wert verschiebt den wrapper horizontal */
position:absolute;
overflow:visible;
padding:0.313em;
}
</style>
</head>
<body>
<div id="horizontal">
<div id="wrapper">
hier können deine Grafik sitzen.
</div>
</div>
</body>
</html> |
Zuletzt bearbeitet von Kash am Di 13.10.2009 14:43, insgesamt 2-mal bearbeitet
|
|
| |
|
|
Flyinghorse
Threadersteller
Dabei seit: 17.07.2003
Ort: Neumarkt
Alter: 37
Geschlecht:
|
Verfasst Di 13.10.2009 14:42
Titel
|
|
|
Ui, damit hab ich nicht gerechnet.
Vielen lieben Dank, ich glaube damit kann ich (erstmal ) was anfangen.
Ergebniss gibts später.
|
|
| |
|
|
Flyinghorse
Threadersteller
Dabei seit: 17.07.2003
Ort: Neumarkt
Alter: 37
Geschlecht:
|
Verfasst Di 13.10.2009 16:32
Titel
|
|
|
Sorry fürs Doppelposting
So, hier mal mein ergebniss (Hab grad leider keinen FTP Zugriff drum nur Screens)
Bin soweit auch ganz zufrieden damit:
Mein einziges Anliegen wäre jetzt noch, dieser mittlere Rote Strich, wie bekomm ich diesen weg?
Die Farbe im Dreamweaver auf "keine" ändern, bringt irgendwie nicht den gewünschten Erfolg, bzw. wird immer wieder Rot.
Hier mal mein Quellcode (Hoffe das ist jetzt nicht doof, das ich für jede Grafik nen Wrapper gemacht hab?)
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Stylefabrik</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="..." />
<style type="text/css" media="all">
@charset "ISO-8859-1";
* {
margin: 0;
padding: 0;
}
html, body {
margin:0;
padding:0;
height:100%;
}
body {
font-family:arial,verdana,helvetica,tahoma,sans-serif;
font-size:1em;
font-weight:normal;
color:#000000;
line-height:1em;
background-image:url(bg.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}
a {
outline:none;
}
ul {
list-style-type:none;
}
img {
width:100%;
height:100%;
}
div#horizontal {
display:block;
height:0.062em;
width:100%;
left:0em;
top:50%;
background:red;
overflow:visible;
position:absolute;
visibility:visible;
}
div#horizontal #wrapper {
width:64px; /* breite des wrappers, beachten das container auch dementsprechend verschoben werden muß */
height:64px; /* höhe des wrappers, beachten das container auch dementsprechend verschoben werden muß */
top:-41px; /* dieser wert verschiebt den wrapper vertikal */
left:804px;
margin-left:-15.75em;/* dieser wert verschiebt den wrapper horizontal */
position:absolute;
overflow:visible;
padding:0.313em;
}
div#horizontal #wrapper2 {
width:64px; /* breite des wrappers, beachten das container auch dementsprechend verschoben werden muß */
height:64px; /* höhe des wrappers, beachten das container auch dementsprechend verschoben werden muß */
top:-40px; /* dieser wert verschiebt den wrapper vertikal */
left:892px;
margin-left:-15.75em;/* dieser wert verschiebt den wrapper horizontal */
position:absolute;
overflow:visible;
padding:0.313em;
}
div#horizontal #wrapper3 {
width:64px; /* breite des wrappers, beachten das container auch dementsprechend verschoben werden muß */
height:64px; /* höhe des wrappers, beachten das container auch dementsprechend verschoben werden muß */
top:-40px; /* dieser wert verschiebt den wrapper vertikal */
left:985px;
margin-left:-15.75em;/* dieser wert verschiebt den wrapper horizontal */
position:absolute;
overflow:visible;
padding:0.313em;
}
div#horizontal #wrapper4 {
width:64px; /* breite des wrappers, beachten das container auch dementsprechend verschoben werden muß */
height:64px; /* höhe des wrappers, beachten das container auch dementsprechend verschoben werden muß */
top:-40px; /* dieser wert verschiebt den wrapper vertikal */
left:1077px;
margin-left:-15.75em;/* dieser wert verschiebt den wrapper horizontal */
position:absolute;
overflow:visible;
padding:0.313em;
}
div#horizontal #wrapper5 {
width:64px; /* breite des wrappers, beachten das container auch dementsprechend verschoben werden muß */
height:64px; /* höhe des wrappers, beachten das container auch dementsprechend verschoben werden muß */
top:-39px; /* dieser wert verschiebt den wrapper vertikal */
left:1168px;
margin-left:-15.75em;/* dieser wert verschiebt den wrapper horizontal */
position:absolute;
overflow:visible;
padding:0.313em;
}
div#horizontal #wrapper6 {
width:64px; /* breite des wrappers, beachten das container auch dementsprechend verschoben werden muß */
height:64px; /* höhe des wrappers, beachten das container auch dementsprechend verschoben werden muß */
top:-39px; /* dieser wert verschiebt den wrapper vertikal */
left:1262px;
margin-left:-15.75em;/* dieser wert verschiebt den wrapper horizontal */
position:absolute;
overflow:visible;
padding:0.313em;
}
div#horizontal #wrapper7 {
width:64px; /* breite des wrappers, beachten das container auch dementsprechend verschoben werden muß */
height:64px; /* höhe des wrappers, beachten das container auch dementsprechend verschoben werden muß */
top:-39px; /* dieser wert verschiebt den wrapper vertikal */
left:1351px;
margin-left:-15.75em;/* dieser wert verschiebt den wrapper horizontal */
position:absolute;
overflow:visible;
padding:0.313em;
}
div#horizontal #wrapper7 {
width:64px; /* breite des wrappers, beachten das container auch dementsprechend verschoben werden muß */
height:64px; /* höhe des wrappers, beachten das container auch dementsprechend verschoben werden muß */
top:-37px; /* dieser wert verschiebt den wrapper vertikal */
left:1353px;
margin-left:-15.75em;/* dieser wert verschiebt den wrapper horizontal */
position:absolute;
overflow:visible;
padding:0.313em;
}
div#horizontal #wrapper8 {
width:441px; /* breite des wrappers, beachten das container auch dementsprechend verschoben werden muß */
height:95px; /* höhe des wrappers, beachten das container auch dementsprechend verschoben werden muß */
top:-168px; /* dieser wert verschiebt den wrapper vertikal */
left:902px;
margin-left:-15.75em;/* dieser wert verschiebt den wrapper horizontal */
position:absolute;
overflow:visible;
padding:0.313em;
}
</style>
</head>
<body>
<div id="horizontal">
<div id="wrapper"><a href="http://stylefabrik.tk"><img src="wp.png" alt="Wordpress" width="64" height="64" border="0"/></a></div>
<div id="wrapper2"><a href="mailto:stylefabrik@googlemail.com"><img src="gmail.png" alt="Mail" width="64" height="64" border="0"/></a></div>
<div id="wrapper3"><a href=""><img src="rss.png" alt="RSS-Feed" width="64" height="64" border="0"/></a></div>
<div id="wrapper4"><a href="http://twitter.com/stylefabrik"><img src="twitter.png" alt="Twitter" width="64" height="64" border="0"/></a></div>
<div id="wrapper5"><a href="http://www.facebook.com/profile.php?id=100000104463240&ref=profile"><img src="fb.png" alt="Facebook" width="64" height="64" border="0"/></a></div>
<div id="wrapper6"><a href="http://myspace.com/stylefabrik"><img src="myspace.png" alt="MySpace" width="64" height="64" border="0"/></a></div>
<div id="wrapper7"><a href="http://lastfm.com/stylefabrik"><img src="lastfm.png" alt="Last.FM" width="64" height="64" border="0"/></a></div>
<div id="wrapper8"><img src="sf.png" alt="Last.FM" width="441" height="95" border="0"/></a></div>
</div>
</body>
</html>
|
Zur Not kann ichs dann auch mal Hochladen, denn bei verkleinerten Browserfenster befinden sich die Grafiken leider nicht mittig. 
Zuletzt bearbeitet von Flyinghorse am Di 13.10.2009 16:33, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 13.10.2009 16:35
Titel
|
|
|
naja auf deinem ersten Screenshot war eine Linie zu sehen.
Deswegen habe ich dem #horizontal (welcher wichtig für die positionierung von #wrapper ist) eine hintergrundfarbe gegeben.
ansonsten so
| Code: | div#horizontal {
display:block;
height:0.062em;
width:100%;
left:0em;
top:50%;
background:transparent;
overflow:visible;
position:absolute;
visibility:visible;
} |
// Ansonsten hatte ich gedacht du setzt die Icons in #wrapper.
Warum du jetzt soviele davon hast, und auch noch mit den selben Werten (zumindest Teilweise) verstehe ich nicht.
Kein tolles MarkUp mehr und sehr sehr unübersichtlich.
Zuletzt bearbeitet von Kash am Di 13.10.2009 16:37, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
joomla template in ein html/css template konvertieren?
C++: Template in Template-Funktion nutzen
[ie] startseite
logo auf der startseite
Zufallsgenerator auf Startseite
Linksammlung auf Startseite
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
