LinkBack URL
About LinkBacks
ZitierenDie Frage ist, ob du möchtest, dass dir geholfen wird es zu bewerkstelligen, oder ob andere es für dich komplett umsetzen sollen?
Sollte zweitens der Fall sein, so wäre das mehr etwas für das Job-Board ;-)
Hallo zusammen, ich habe mir ein Free Template runtergeladen, bei dem die einzelnen Buttons sich nach unten öffnen. Die Buttons konnte ich schon nach meinen Vorstellungen anpassen, aber jetzt möchte ich die ganze Farbe (zur Zeit schwarz) in beige ändern. Leider habe ich nicht viel Ahnung bin eher ein Laie. Arbeite zur Zeit mit NVU um das Template zu bearbeiten. Vielleicht könnt ihr mir weiterhelfen.
LG
tamhid
Die Frage ist, ob du möchtest, dass dir geholfen wird es zu bewerkstelligen, oder ob andere es für dich komplett umsetzen sollen?
Sollte zweitens der Fall sein, so wäre das mehr etwas für das Job-Board ;-)
Chaos ist nur eine andere Definition von Ordnung.
Und falls der erste Fall zutreffen sollte: um Hilfe zu erhalten, muss man meist den Quelltext oder den Link präsentieren - so kann man raten, ob es nur eine Farbangabe mit CSS ist, die geändert werden muss oder ob man mit Hilfe eines Grafikprogrammes die Farben ändern muss...
</andy>
Jetzt bauen wir´09 + ´10
Meine Frage ist, ob ihr mir helfen könnt es zu bewerkstelligenZitat von Zer0
@Rinaldo: hier mal der Link von dem Template: http://www.on-mouseover.de/templates/hp63/index.html und hier der Quelltext:
PHP-Code:<html><body>
{scrollbar-arrow-color: #0e0e0e; scrollbar-base-color: #f3f3f3;
scrollbar-highlight-color : #969696; scrollbar-shadow-color : #ffffff;
SCROLLBAR-TRACK-COLOR: #D6D6D6;}
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
.menu ul li a:hover ul li a.hide {
display:none;
}
,menu2 ul li a, .menu ul li a:visited{
float:left;
display:block;
width:152px;
font-family:verdana, sans-serif;
font-size: 86%;
padding-left: 0px;
padding-bottom: 0px;
padding-top:0px;
margin: 0 1px;
line-height:30px;
text-align:center;
text-decoration:none ;
color:#808080;
background-color:#000;
border:solid 1px #353535;
background-image:url(images/ob.jpg);
}
.menu ul li a:hover {
background-color:#282828;
color:#fff;
text-decoration:none ;
border:solid 1px #7C7C7C;
background-image: url(images/mover.jpg);
}
.menu ul li a:hover ul {
display:block;
position:absolute;
top:37px;
left:0;
width:153px;
}
.menu ul li a:hover ul li a {
display:block;
background:#282828;
color:#808080;
border:solid 1px #353535;
line-height:30px;
background-image:url(images/ob.jpg);
}
.menu ul li a:hover ul li a ul {
visibility:hidden;
}
.menu ul li a:hover ul li a:hover {
background-color:#282828;
color:#fff;
text-decoration:none ;
border:solid 1px #7C7C7C;
}
.menu ul li a:hover ul li a:hover ul {
visibility:visible;
position:absolute;
left:105px;
top:0;
color:#000;
}
.menu ul li a:hover ul li a:hover ul.left {
left:-105px;
}
[I][SIZE="3"]Ich kann allerdings nur mit NVU das Index aufrufen und erhalte diesen Quelltext: [/SIZE][/I]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords"
content="homepage,dokument,webpage,page,web,netz,homepage dokument webpage page web netz">
<meta name="description"
content="homepage, dokument, webpage, page, web, netz">
<title>homepage, dokument, webpage, page, web, netz, homepage
dokument webpage page web netz</title>
<!-- Der Copyright-Hinweis ist nicht zu löschen. Ein Entfernen des Copyright/Urheberrecht-Vermerks kann rechtliche Schritte nach sich ziehen --><!-- (c)Copyright by S.I.S.Papenburg / [url]www.on-mouseover.de/templates/[/url] --><!-- Hinweis:
Ein Verkauf der Vorlage oder das Anbieten dieser Vorlage ist untersagt.
Die Vorlage kann privat (kostenlos) und kommerziell (gegen Bezahlung) genutzt werden.
Je nach dem Inhalt, welcher eingefügt wird, kann auch für Privatpersonen eine kommerzielle Nutzung vorliegen.
Lesen Sie auf der Webseite [url]www.on-mouseover.de/templates/[/url]
bitte die Nutzungsbedingungen nach.
-->
<link rel="stylesheet" href="css/format.css"
type="text/css">
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/ie_format.css" />
<![endif]-->
</head>
<body>
<div id="all">
<!--<div id="li"></div> -->
<div id="mitte"><!-- Anfang Mittelteil -->
<div id="leistetop"><span class="leistetop">
<b>N</b>ame <b>d</b>er <b>H</b>omepage
</span>
</div>
<div class="menu">
<!--Menu ganz oben-->
<ul>
<li><a class="hide" href="index.html"
onfocus="this.blur()">Kontakt</a></li>
<!--[if lte IE 6]>
<a href="index.html">Kontakt</a>
<![endif]-->
<li><a class="hide" href="index.html"
onfocus="this.blur()">Impressum</a></li>
<!--[if lte IE 6]>
<a href="index.html">Impressum</a>
<![endif]-->
<li><a class="hide" href="index.html"
onfocus="this.blur()">Preise</a></li>
<!--[if lte IE 6]>
<a href="index.html">Preise</a>
<![endif]-->
<li><a class="hide" href="index.html"
onfocus="this.blur()">Gaestebuecher</a></li>
<!--[if lte IE 6]>
<a href="index.html">Gaestebuecher</a>
<![endif]-->
<li><a class="hide" href="index.html"
onfocus="this.blur()">Shop</a></li>
<!--[if lte IE 6]>
<a href="index.html">Shop</a>
<![endif]-->
</ul>
<!-- ende menü oben-->
</div>
<div id="top">
<!-- Logo --><img src="http://www.traum-projekt.com/forum/images/logo.gif" alt=""
style="border: 1px solid rgb(39, 39, 39); margin: 20px 0pt;"
border="0" height="60" width="468">
<!-- Ende Logo --></div>
<div class="menu">
<!-- unteres Menu -->
<ul>
<li><a class="hide" href="#">Gruppe1</a>
<!--[if lte IE 6]>
<a href="#">Gruppe1
<table><tr><td>
<![endif]-->
<ul>
<li><a href="index.html">Seite 11</a></li>
<li><a href="index.html">Seite 12</a></li>
<li><a href="index.html">Seite 13</a></li>
<li><a href="index.html">Seite 14</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">Gruppe2</a>
<!--[if lte IE 6]>
<a href="#">Gruppe2
<table><tr><td>
<![endif]-->
<ul>
<li><a href="index.html">Seite 21</a></li>
<li><a href="index.html">Seite 22</a></li>
<li><a href="index.html">Seite 23</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">Gruppe3</a>
<!--[if lte IE 6]>
<a href="#">Gruppe3
<table><tr><td>
<![endif]-->
<ul>
<li><a href="index.html">Seite 31</a></li>
<li><a href="index.html">Seite 32</a></li>
<li><a href="index.html">Seite 33</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">Gruppe4</a>
<!--[if lte IE 6]>
<a href="#">Gruppe4
<table><tr><td>
<![endif]-->
<ul>
<li><a href="index.html">Seite 41</a></li>
<li><a href="index.html">Seite 42</a></li>
<li><a href="index.html">Seite 43</a></li>
<li><a href="index.html">Seite 44</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">Gruppe5</a>
<!--[if lte IE 6]>
<a href="#">Gruppe5
<table><tr><td>
<![endif]-->
<ul>
<li><a href="index.html">Seite 51</a></li>
<li><a href="index.html">Seite 52</a></li>
<li><a href="index.html">Seite 53</a></li>
<li><a href="index.html">Seite 54</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<!-- ende unteres Menu-->
</div>
<div id="content">
<!-- Inhalt -->
<h2>Layout.</h2>
<span class="sp2">
Dieses Design heisst "Kamera". Hier mal mit einem Doppel-Menü,
beide obigen Menureihen sind aufklappbar. Vielleicht haben Sie es auch
schon festgestellt: Für einen Webdesigner sind dunke Layouts
komplizierter als helle Layouts. Viele scheitern daran, weil sie ein
rein schwarzes Design fertigen, um dann festzustellen dass es in
Verbindung mit Schrift sehr grell wirkt und auch eine Spannungsarmut
aufweist. Besser ist es mit verschiedenen ähnlich dunklen
Farben oder Farbverläufen zu arbeiten. Denn das menschliche
Auge ist dankbar für Kontraste, Farbabstufungen und Schatten,
um sich eine 3D-Welt aufzubauen.<br>
<br>
Dieser hier gewählte mittlere Grauton bezgl. der Schrift und
Überschrift ist auf dem sehr dunklen Gund relativ angenehm zu
lesen. Gerne können Sie aber auch Weiss oder ein helles Grau
oder auch eine andere Farbe wählen. Ändern Sie den
"color-Wert" wenn Sie mögen in der Datei "format.css" bei "h2"
(Überschrift) und "#sp2" (Schrift).
<br>
<br>
<br>
</span>
<h2>Technik.</h2>
<span class="sp2">
Die Seite kommt ohne Frames und ohne Tabellen aus und ist ein rein
CSS-basiertes Layout.<br>
<br>
Tauschen Sie das Beispiel-Logo durch Ihres aus. Falls Sie die selbe
Logo-Hintergrundfarbe wie im Beispiel-Logo verwenden möchten:<br>
RGB-Wert:14/14/14 bzw. Hex-Wert: #0e0e0e <br>
<br>
Die Schrift ist im Blocksatz, d.h. gleiche Ausrichtung der Schrift an
linker und rechter Kante. Das sieht schön aus, jedoch kann es
mitunter bei sehr langen Wörtern den Text auseinanderziehen.
Die Abhilfe ist einfach, entscheiden Sie je nach Bedarf oder Ihrem
Geschmack: Ersetzen Sie "text-align:justify" durch "text-align:left".
Und zwar ganz oben in der Datei format.css bei:
<br>
td {
text-align:justify;font-family: arial, helvetica, tahoma ,verdana,
sans-serif;
}
<br>
<br>
Wie üblich mit ausgelagerter CSS-Datei. Platz für <a
href="#">Fusszeile</a> unten sowie oben der <a
href="#">Homepagename</a> als einfacher Text
einzutragen.
<i>Anlegen von Links bzw. HTML-Seiten</i> wie folgt: Die
Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem
neuen Namen abzuspeichern.
<br>
<br>
<br>
</span>
<h2>Navigation.</h2>
<span class="sp2">
Textlinks.
<br>
Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen.
Das Menü links ist beliebig erweiterbar bzw.
natürlich auch verkürzbar durch Löschen
einiger Links. Die allgemeinen Links (Links im Text) sehen zur Zeit aus
wie nachstehend. Um den Mouseover-Effekt anzuschauen, fahren Sie mit
der Maus über den Link: <a href="#">Beispiel-Link</a>
</span>
<h2>Validierung.</h2>
<span class="sp2"> <a
href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401-blue"
alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
<a href="http://jigsaw.w3.org/css-validator/"> <img
style="border: 0pt none ; width: 88px; height: 31px;"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!"> </a>
</span><!-- ende inhalt-->
</div>
<div id="fussb">
<!-- Fusszeile -->[url]www.ihre-webseiten-url.de[/url]
<!-- Ende Fusszeile --></div>
</div>
<!--<div id="re"> </div>-->
</div>
</body>
</html>
Geändert von Thomas (06.09.2010 um 20:22 Uhr) Grund: codebox ;-)
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)