jetzt hat mich der ehrgeiz gepackt. Habe nun die regeln für npage seiten verstanden und bin auch jetzt in de Lage
selber diese einzubauen. Ist im prinzip auch total easy
.Weiter soll es bei oyla gehen. Wo bei npage css und html getrennt werden ist es bei oyla irgendwie alles in einem.
Nun die Frage, wie gehts bei oyla?
Welche reienfolge? Was kommt wo hin?
Das ich die images hochladen muss und die urls an den dafür vorgesehenen stellen einfügen muss,ist mir bewusst.
Hier mal die templatedateien. Würde mich freuen, wenn mich darüber einer aufklären könnte
. Ich hoffe natürlichjetzt, dass ich nicht zu sehr nerve weil es mich jetzt gepackt hat
.Wie kan man es am geschicktesten und auch am geordnetesten anstellen? kann der gesamte css teil einfach irgend-
wo im body zugesetzt werden und das wars? Oder ist da mehr erfordelich?
hier mal die Index-Datei
Code: Alles auswählen
<!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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Dog care template</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>DogCare</h1>
<div id="nav-top">
<ul>
<li id="tab-faq"><div><a href="http://www.freewebsitetemplates.com">faq</a></div></li>
<li id="tab-map"><div><a href="http://www.freewebsitetemplates.com">site maps</a></div></li>
</ul>
</div>
<div id="nav">
<ul>
<li class="home"><a href="http://www.freewebsitetemplates.com">Home</a></li>
<li><a href="http://www.freewebsitetemplates.com">About Us</a></li>
<li><a href="http://www.freewebsitetemplates.com">History</a></li>
<li><a href="http://www.freewebsitetemplates.com">Our Cost</a></li>
<li><a href="http://www.freewebsitetemplates.com">Services</a></li>
<li><a href="http://www.freewebsitetemplates.com">Training Tips</a></li>
<li><a href="http://www.freewebsitetemplates.com">Gallery</a></li>
<li><a href="http://www.freewebsitetemplates.com">Contact Us</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="left-col">
<div id="welcome">
<h2>Welcome</h2>
<p>Don't forget to check <a href="http://www.freewebsitetemplates.com">free website templates</a> every day, because we add a new free website template almost daily.</p>
<p>You can remove any link to our websites from this template you're free to use the template without linking back to us.</p>
<p>This is just a place holder so you can see how the site would look like.</p>
<p><a href="http://www.freewebsitetemplates.com">more...</a></p>
</div>
<h2>Our Dog Gallery...</h2>
<div id="gallery">
<div class="box">
<h3>01</h3>
<img src="images/pic_1.jpg" width="119" height="84" alt="Pic 1" />
<p>This is just a place holder so you can see how the site would look like.</p>
<p class="more"><a href="http://www.freewebsitetemplates.com">more</a></p>
</div>
<div class="box box-lit">
<h3>02</h3>
<img src="images/pic_2.jpg" width="119" height="84" alt="Pic 2" />
<p>This is just a place holder so you can see how the site would look like.</p>
<p class="more"><a href="http://www.freewebsitetemplates.com">more</a></p>
</div>
<div class="box">
<h3>03</h3>
<img src="images/pic_3.jpg" width="119" height="84" alt="Pic 3" />
<p>This is just a place holder so you can see how the site would look like.</p>
<p class="more"><a href="http://www.freewebsitetemplates.com">more</a></p>
</div>
</div>
</div>
<div class="right-col">
<h2>Breed...</h2>
<ul>
<li><a href="http://www.freewebsitetemplates.com">Beagle </a></li>
<li><a href="http://www.freewebsitetemplates.com">Boxer </a></li>
<li><a href="http://www.freewebsitetemplates.com">Bulldog </a></li>
<li><a href="http://www.freewebsitetemplates.com">Chihuahua </a></li>
<li><a href="http://www.freewebsitetemplates.com">Dachshund </a></li>
<li><a href="http://www.freewebsitetemplates.com">German Shepherd </a></li>
<li><a href="http://www.freewebsitetemplates.com">Golden Retriever </a></li>
<li><a href="http://www.freewebsitetemplates.com">Labrador Retriever</a></li>
<li><a href="http://www.freewebsitetemplates.com">Maltese </a></li>
<li><a href="http://www.freewebsitetemplates.com">Poodle </a></li>
<li><a href="http://www.freewebsitetemplates.com">Pomeranian </a></li>
<li><a href="http://www.freewebsitetemplates.com">Pitbull </a></li>
<li><a href="http://www.freewebsitetemplates.com">Pug </a></li>
<li><a href="http://www.freewebsitetemplates.com">Rottweiler </a></li>
<li><a href="http://www.freewebsitetemplates.com">Shih Tzu </a></li>
<li><a href="http://www.freewebsitetemplates.com">Yorkie </a></li>
</ul>
</div>
<div class="clear"> </div>
<div id="later">
<div class="left-col">
<div class="box" id="later-b1">
<img src="images/pic_4.jpg" width="92" height="175" alt="Pic 4" />
</div>
<div class="box" id="later-b2">
<h2>New Articles</h2>
<p>Even more websites all about website templates on <a href="http://www.justwebtemplates.com">Just Web Templates</a>.</p>
<p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>..</p>
<p class="more"><a href="http://www.freewebsitetemplates.com">more...</a></p>
</div>
<div class="box" id="later-b3">
<h2>Dog's Food</h2>
<p>This is a template designed by free website templates for you for free you can replace all the text by your own text.</p>
<p class="more"><a href="http://www.freewebsitetemplates.com">more...</a></p>
</div>
<div class="box" id="later-b4">
<img src="images/pic_5.jpg" width="137" height="166" alt="Pic 5" />
</div>
<div class="clear"> </div>
</div>
<div class="right-col">
<h2>Training Tips</h2>
<p>If you're having problems editing the template please don't hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forum/">forum</a>.</p>
<p class="more"><a href="http://www.freewebsitetemplates.com">more...</a></p>
</div>
<div class="clear"> </div>
</div>
</div>
<div class="clear" id="footc"> </div>
<div id="footer">
Copyright statement goes here. All rights reserved
</div>
</div>
</body>
</html>
und hier die css datei
Code: Alles auswählen
html, body, h1, h2, h3, h4 {
margin: 0;
padding: 0;
}
h1 img {
display: block;
}
img {
border: 0;
}
a {
color: #464544;
}
a:hover {
color: #FFA405;
}
.left {
float: left;
}
.right {
float: right;
}
.more {
text-align: right;
}
.clear {
clear: both;
}
body {
background: #C89C52 url(images/page_bg.jpg) repeat-x;
text-align: center;
font: 11px arial, sans-serif;
color: #E5D19C;
padding: 20px 0 0 0;
}
/** layout **/
#wrapper {
text-align: left;
margin: auto;
width: 678px;
position: relative;
}
/** header **/
#header {
padding-top: 1px;
}
#header h1 {
font: 32px "Times new roman", serif;
font-weight: normal;
position: absolute;
left: 0;
top: 35px;
color: #F2CD91;
padding: 0 0 0 0.7em;
margin: -1em 0 0 0;
line-height: 1;
}
#nav-top {
margin-left: 503px;
}
#nav-top ul {
margin: 1em 0 0 0;
padding: 0;
height: 31px;
}
#nav-top li {
float: left;
background: #C19855 url(images/tab_left.gif) no-repeat;
list-style: none;
text-align: center;
font: 18px "Times new roman", serif;
height: 31px;
line-height: 31px;
}
#nav-top li div {
background: top right url(images/tab_right.gif) no-repeat;
}
#nav-top li#tab-faq {
width: 59px;
}
#nav-top li#tab-map {
width: 99px;
margin-left: 3px;
}
#nav-top a {
color: #443816;
text-decoration: none;
}
#nav-top a:hover {
color: #241D0A;
}
#nav {
padding-top: 372px;
background: url(images/header.jpg) no-repeat;
}
#nav ul {
margin: 0;
padding: 0;
height: 36px;
line-height: 36px;
border-left: 2px solid #9E9479;
background: bottom left url(images/nav_lit.gif) repeat-x;
}
#nav li {
list-style: none;
float: left;
margin: 0;
padding: 0 10px;
}
#nav li.home {
background: bottom left url(images/nav_drk.gif) repeat-x;
padding-left: 25px;
}
#nav a {
font: 16px "Times new roman", serif;
color: #FFE5C3;
text-decoration: none;
}
#nav a:hover {
color: #F2E7D6;
}
/** content **/
#content {
padding-left: 20px;
}
#content h2 {
font: 24px "Times new roman", serif;
color: #513408;
font-weight: normal;
border-left: 3px solid #615331;
padding: 1px 1px 1px 8px;
margin-top: 22px;
}
#content p {
margin-left: 11px;
line-height: 1.4;
}
#content a {
color: #8D692D;
font-weight: bold;
text-decoration: none;
}
#content a:hover {
color: #5B431A;
}
#content .left-col {
float: left;
width: 522px;
}
#content .right-col {
float: right;
width: 136px;
}
#content #welcome {
margin-right: 40px;
font-size:13px;
color: #3E341E;
}
#content #welcome a{
color: #3E341E;
text-decoration:underline;
}
#content #welcome a:hover{
color: #DBBF77;
text-decoration:underline;
}
#gallery {
margin-top: 14px;
}
#gallery .box {
float: left;
width: 119px;
padding: 0 23px 2.3em 23px;
margin-right: 1px;
background: #615331;
position: relative;
}
#gallery .box h3 {
text-align: center;
line-height: 23px;
font: 23px "Times new roman", serif;
color: #fff;
height: 23px;
margin-bottom: 20px;
background: top center url(images/tab_drk.gif) no-repeat;
}
#gallery .box p {
margin: 1em 0;
padding: 0;
line-height: 1.4;
}
#gallery .box .more {
height: 18px;
line-height: 18px;
background: #978040 top left url(images/moretab_left_drk.gif) no-repeat;
position: absolute;
bottom: 0;
right: 0;
width: 3.2em;
padding-right: 4px;
margin-bottom: 0;
}
#gallery .box .more a {
color: #4C330D;
}
#gallery .box .more a:hover {
color: #291B06;
}
#gallery .box-lit {
background: #735220;
}
#gallery .box-lit h3 {
background: top center url(images/tab_lit.gif) no-repeat;
}
#gallery .box-lit .more {
background: #B4A26D top left url(images/moretab_left_lit.gif) no-repeat;
}
#content .right-col li, #content .right-col ul {
list-style: none;
margin: 0;
padding: 0;
}
#content .right-col li {
border-left: 1px solid #615331;
padding-left: 9px;
margin: 10px;
}
#content .right-col a {
font-size: 12px;
font-weight: normal;
color: #67450D;
}
#content .right-col a:hover {
color: #2C1D04;
}
/** later **/
#later {
color: #564929;
}
#later h2 {
font-size: 20px;
}
#later .right-col p {
font-size: 12px;
line-height: 1.7;
}
#later .box {
float: left;
width: 85px;
}
#later .box a{
text-decoration:underline;
}
#later #later-b1 {
padding-top: 67px;
margin-right: 4px;
}
#later #later-b2 {
width: 155px;
margin-right: 4px;
}
#later #later-b3 {
width: 114px;
margin-right: 6px;
}
#later #later-b4 {
padding-top: 67px;
width: 137px;
}
#footc {
height: 10px;
}
#footer {
background: #735220;
text-align: center;
color: #CFB472;
padding: 14px;
}
LG
. Ich gelange immer zur startseite.
