Ich versuch noch schon länger das Problem alleine zu lösen, schaff es aber irgendwie doch nicht, sodass ich jetzt einfach hier nachfrage :S
Ich hab zur Zeit auf meiner HP ein Design, dessen Code ich von einem Freund erhalten habe und durch rumbasteln so hinbekommen habe, wie ich ihn gerne hätte. Allerdings ist der Inhalt (also die Textseiten) nicht zwischen Neuigkeiten & Navigation, sondern unter dem ganzen Design?
Was ist da nur falsch dran? Unter anderem, hätte ich auch gerne, dass sich das Design von alleine nach unten erweitert, je nach Inhalt der Textseite? Oder ist das gar nicht möglich?
& was ich auch nicht ganz versteh, wieso ist in meiner Navi alles blau obwohl ich im CSS definiert habe, das es doch weiß sein soll? :S
Ich komm wirklich nicht mehr weiter, und wäre froh wenn mir wer bei meinem Problem helfen könnte :S
Geändert von prepotencia (25.07.2012 um 20:23 Uhr)
Ich hab mir ein Design heruntergeladen welches man natürlich auch benutzen darf, allerdings hab ich einfach keine Ahnung was den in den header und was in den footer gehört, da der Inhalt immer falsch angezeigt wird. Entweder vor der Spalte oder in der Spalte, aber nie neben der Spalte. Im HTML-Editor wird alles Richtig angezeigt :/
Ich weiß echt nicht wo sich bei dem Design der Inhalt befindet, bzw. eben was in Header und Footer gehört :S
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><meta content="text/html; charset=iso-8859-1"
http-equiv="Content-Type"><meta content="INDEX,FOLLOW" name="robots"><meta
content="homepage,dokument,webpage,page,web,netz,homepage dokument webpage page web netz"
name="keywords"><meta content="homepage, dokument, webpage, page, web, netz"
name="description"><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 / www.on-mouseover.de/templates/ --><!-- Hinweis: Das Anbieten dieser Vorlage auf einer Webseite, CD, DVD oder anderen Bild/Tonträgern ist untersagt. Nutzen dürfen Sie diese Vorlage aber auf einer Webseite wie folgt: Die Vorlage kann privat (kostenlos) und kommerziell/gewerblich (gegen Bezahlung) für Sie selbst oder eine dritte Person (andere Person oder Firma) genutzt werden. Je nach dem Inhalt, welcher eingefügt wird, kann auch für Privatpersonen eine kommerzielle Nutzung vorliegen. Lesen Sie auf der Webseite www.on-mouseover.de/templates/ bitte die Nutzungsbedingungen nach. --><style type="text/css"><!--
body
{margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px; background-color: #e6e6e6;
font-size: 14px;line-height: 18px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
background-image:url(images/back.gif);
background-repeat:repeat-x;
background-position: 50% 110px}
h2{ color:#46688e;
margin-bottom:20px;letter-spacing:2px;
font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif;font-size: 20px;
}
ul.liste1 {list-style-image:url(images/kugel.gif)}
/* hauptgerüst */
.li {
vertical-align:top;
background-image:url(images/ra1.jpg);
}
.re {vertical-align:top;
background-image:url(images/ra2.jpg);
}
.haupt {background-color:#fff;border-left:solid 10px #fff;border-right:solid 10px #fff;}
#top1 {height:0px;
background-color:#fff;
height:120px;
letter-spacing:0px;
color:#56686D;
text-align:right;
vertical-align:bottom;
font-family: georgia,arial, helvetica, tahoma ,verdana, sans-serif;
padding-left:10px;
padding-bottom:1px;}
#top2 {background-image:url(images/logo.jpg);
background-repeat:no-repeat;
vertical-align:top;
text-align:left;
height:253px;
background-color:#4d81b1;
background-position: 50% 0%;
padding-top:14px;
}
#name {height:0px;
letter-spacing:10px;
color:#fff;
font-variant:small-caps;
padding-left:20px;
font-family: georgia,arial, helvetica, tahoma ,verdana, sans-serif;
font-size:16px
}
#sp1 {height:1100px;
color:#000;
padding-top: 40px; padding-bottom: 40px;
padding-left: 20px;padding-right:30px;
background-color:#fff;
letter-spacing:0px;
width:100%;
vertical-align:top;
text-align:justify;
font-size: 14px;line-height: 18px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
}
h3.boxheader {color:#46688e;
font-size: 15px;line-height: 18px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
border-bottom:solid 1px #04537d}
.box2{
font-size: 11px;line-height: 15px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
background-color:#;
padding:10px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
vertical-align:top;
color:#000;
border-bottom:dashed 0px #506a13;
border-right:solid 0px #fff;
border-left:solid 0px #fff;
}
.box1{
font-size: 14px;line-height: 15px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
background-color:#;
padding:10px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
vertical-align:top;
color:#000;
}
.box3{
font-size: 13px;line-height: 15px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
background-color:#;
padding:10px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
vertical-align:top;
color:#000;
}
.box4{
font-size: 12px;line-height: 15px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
background-color:#;
padding:10px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
vertical-align:top;
color:#000;
}
#sp2 {
height:1100px;color:#000;font-size: 14px;line-height: 18px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif; padding-left: 10px;
padding-right:0px;
padding-top: 30px;
background-color:#fff;
}
#fuss {font: normal 11px verdana, sans-serif; color: #fff;
height:100px;
text-align:center;
border-bottom: solid 10px white;
background-color:#9ab8d3;width:100%;
background-image:url(images/fuss.jpg);
background-repeat:repeat-x;
background-position: center top
}
/* scrolleiste internet explorer ab vers.5.5 */
body
{scrollbar-arrow-color: #535353; scrollbar-base-color: #2d2d2d;
scrollbar-highlight-color : #535353; scrollbar-shadow-color : #535353;
SCROLLBAR-TRACK-COLOR: #202020;}
/* menue oben */
#menu1 a, #menu1 a:visited , #menu1 a:active {display: block;
color:#46688E;
text-decoration:none ;font-family:verdana, sans-serif; font-size: 12px;
padding-left: 10px;padding-right: 10px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px;
border-left:solid 0px #AAAAAA;
height:40px;
line-height:40px;
text-align:center;
border-bottom:solid 0px #fff;
background-color:#fff;
}
#menu1 a:hover {background-color:#;color:#4d81b1; text-decoration:none ;
background-color:#fff;
background-image:url(images/cube.gif);
background-repeat:no-repeat;
background-position:50% 100%;
border-bottom:solid 0px #4d81b1;
}
.trenn {width:1px;background-color:#fff;color:#C0CB67}
/* menue rechts */
#menu2 {
border: dashed 0px #fff;
background-color:#;
text-align: left;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
padding-bottom:0px;
padding-top:0px;
}
#menu2 ul, #menu2 li {
list-style-type: none;
margin-left:4px;
padding: 0px;
color:#04537D
}
#menu2 li a:link, #menu2 li a:visited, #menu2 li a:active {display:block;
border-bottom: dashed 0px #C2631D;
width:200px;
color:#000;text-decoration:none;
font-size: 13px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
height: 16px;
line-height: 16px;
background-image:url(images/cube.gif);
background-repeat:no-repeat;
background-position:4px 50%;
padding-left:28px;
}
#menu2 li a:hover { background:TRANSPARENT;
color:#04537D;
text-decoration:underline;;
background-image:url(images/cube2.gif);
background-repeat:no-repeat;
background-position:4px 50%;
padding-left:28px;
}
/* menue in box1 */
#menubox a , #menubox a:visited , #menubox a:active {display:inline;
background-color:#;
color:#000;
font-size: 11px;line-height: 15px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
text-decoration:underline;
text-align:left;
font-style:italic;
}
#menubox a:hover{
background:transparent;
color:#04537D;
text-decoration:underline ;
}
/* allgemeine links im text */
a:link, a:visited, a:active{ font-size: 14px;line-height: 18px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;
text-decoration:underline;color:#000;}
a:hover{ text-decoration:none;background-color:#fff;
color:#04537D;text-decoration:none;}
--></style></head><body><table align="center" border="0" cellpadding="0"
cellspacing="0" width="80%"><tbody><tr><td class="li"><img src="images/ra1ob.gif"
alt="" border="0" height="383" width="12"></td><!--ende aussentab--><td class="haupt"><!--kopf--><table border="0" cellpadding="0" cellspacing="0"
width="100%"><tbody><tr><td id="top1"><table id="menu1" align="left" border="0"
cellpadding="0" cellspacing="0"><tbody><tr><td><a href="index.html">Home</a></td><td class="trenn">|</td><td><a href="index.html">Kontakt</a></td><td class="trenn">|</td><td><a href="index.html">Anfahrt</a></td><td class="trenn">|</td><td><a href="index.html">Impressum</a></td><td class="trenn">|</td><td><a href="index.html">AGB</a></td><td class="trenn">|</td><td><a href="index.html">Service</a></td></tr></tbody></table><!-- ende menü oben--></td></tr><tr><td id="top2"><span id="name">Name der Homepage</span></td></tr></tbody></table><!--ende oben--><table align="center" border="0" cellpadding="0"
cellspacing="0" width="96%"><tbody><tr><td id="sp1" valign="top"><h2>layout </h2>
Dieses Design heisst: <i>"JUNE"</i>. <br><br>
Schäfchenwolken im Juni, das ist doch sehr angenehm. Die Boxen
1 bis 4 in der rechten Spalte könnten Sie für
kleineren Inhalt wie Bilder, Text, Links o.ä. nutzen. Jede Box
verlängert sich nach unten automatisch. Wenn nicht
benötigt, so lassen sich diese Boxen auch leicht entfernen.
Dazu brauchen Sie einfach nur die "div-Bereiche", welche mit "box"
klassifiziert sind, im Quelltext zu löschen. Sie
könnten aber auch entsprechend weitere Boxen
hinzufügen, also darunter kopieren.
<br><br><br><h2>technik</h2>
Seite ohne Frames. Der Homepagename ist leicht als Text einzutragen und
kommt richtig gut auf dem blauen Himmel liegend zur Geltung.
<br><br><br><div align="center"><div
style="border: 1px solid rgb(0, 0, 0); padding: 20px; background-color: rgb(115, 156, 193); background-image: url(images/zitat.jpg); background-repeat: repeat-x; background-position: center top; font-size: 20px; line-height: 20px; font-family: tahoma,trebuchet ms,verdana,monospace; font-style: italic; color: rgb(255, 255, 255); text-align: center; width: 300px; letter-spacing: 0px;"><b
style="color: rgb(199, 198, 113);">«</b>
Zitat-Text eingerückt und anders formatiert. Duis placerat,
ligula nec porta fringilla diam massa laoreet diam. <b
style="color: rgb(199, 198, 113);">»</b><br><br><div
style="font-size: 14px; font-family: arial,tahoma,trebuchet ms,verdana,monospace; color: rgb(255, 255, 255); letter-spacing: 2px;"
align="right">Julius Cäsar</div></div></div><br><br><h2>navigation</h2>
Textlinks. Ein Menü oben, ein Menü rechts. Die
Beispiel-Textlinks sind durch Ihre Links zu ersetzen. Das rechte
Menü ist beliebig erweiterbar. Es sind dort also auch mehr
oder natürlich auch weniger als diese 10 Links
möglich.
<br><br>
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><br><br><br><h2> dead text</h2>
Beispiel Füll Text. Fusce bibendum pretium ante. Pellentesque
sed enim nec odio laoreet congue. Nullam aliquam rhoncus libero. Morbi
vitae sem. Sed quis lorem. Curabitur suscipit vehicula est. Donec
venenatis.
Nachfolgend sehen Sie zwei Beispiele für Listen. Listen sind
textliche Aufzählungen.
<br><br><blockquote>Liste mit eigenem
Aufzählungszeichen, verlinkt:
<ul class="liste1"><li><a href="index.html">Curabitur</a>.</li><li><a href="index.html">Ullamcorper</a>.</li><li><a href="index.html">Magna</a>.
</li><li><a href="index.html">Aenean</a>.</li></ul></blockquote><br>
Praesent nisl mi, condimentum sed, bibendum semper, fringilla a, felis.
Phasellus tincidunt odio vel nulla. Morbi vitae urna quis nulla
imperdiet rhoncus. Aliquam feugiat, nulla non semper mollis, sapien
velit rutrum urna, eu vehicula erat risus et leo.
<br><br><blockquote>Numerische Liste, Ziffern fortlaufend,
nicht verlinkt:
<ol><li>Sed .</li><li>Condimentum</li><li>Bibendum. </li><li>Semper.</li></ol></blockquote><br>
Maecenas a nulla. Maecenas nisl. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Mauris eu massa. In
semper. Morbi vitae nisl at felis placerat porttitor. Morbi molestie.
Cras ligula sapien, consequat sed, scelerisque ut, pulvinar vel, sem.
In vulputate gravida orci.
</td><!-- ende inhalt--><td id="sp2" valign="top"><img
src="images/pixelspace.gif" alt="" border="0"
height="1" width="260"><!--BOX 1--><br><div class="box1"><h3 class="boxheader">Slogan. Welcome </h3><img src="images/apo.gif" alt="" border="0"
height="28" width="35">Ut accumsan scelerisque felis.
Proin at mauris vel tortor lacinia volutpat. Quisque vehicula metus a
massa. Curabitur ut dolor nec nunc tempus sagittis.
<br><br></div><!--ende BOX 1--><!--BOX 2--><div class="box2"><div id="menu2"><h3 class="boxheader">Navigation </h3><ul><li><a href="index.html">Partner 1</a></li><li><a href="index.html">Partner 2</a></li><li><a href="index.html">Sponsor</a></li><li><a href="index.html">Weitere Links</a></li><li><a href="index.html">Weitere Links</a></li><li><a href="index.html">Weitere Links</a></li><li><a href="index.html">Weitere Links</a></li><li><a href="index.html">Weitere Links</a></li><li><a href="index.html">Weitere Links</a></li><li><a href="index.html">Weitere Links</a></li></ul></div></div><!--ende BOX 2--><br><!-- BOX 3--><div class="box3"><h3 class="boxheader">News </h3><b style="color: rgb(0, 0, 0);">Yesterday.</b><br>
Vestibulum velit nunc, hendrerit ac, semper id, lobortis sit amet,
velit. In a nunc. <span id="menubox"><img
src="images/arrow.gif" alt="" border="0"
height="9" width="8"><a href="#"> Weiter</a></span><br><br><b style="color: rgb(0, 0, 0);">Today.</b><br>
Vivamus varius justo. Nunc pretium congue massa. In placerat. <span
id="menubox"><img src="images/arrow.gif" alt=""
border="0" height="9" width="8"><a href="#"> Weiter</a></span><br><br><b style="color: rgb(0, 0, 0);">Next Day.</b><br>
Nam eros sem, fermentum in, tincidunt sit amet, fringilla vitae, risus.
<span id="menubox"><img
src="images/arrow.gif" alt="" border="0"
height="9" width="8"><a href="#"> Weiter</a></span><br><br></div><!--ende BOX 3--><br><!--BOX 4--><div class="box4"><h3 class="boxheader">Example </h3><img src="images/junekl.jpg" alt=""
style="border: 1px solid rgb(0, 0, 0);" border="0"
height="97" width="140"><br><br>
Das Original-Foto. <br>
Dieses hatte eine Grösse von 700x486 Pixel.
<br><br></div><!--ende BOX 4--></td><!-- ende inhalt--></tr><tr><td colspan="2" id="fuss">www.ihre-beispiel-webseiten-url.de<br></td></tr></tbody></table></td><!-- aussentab--><td class="re"><img src="images/ra2ob.gif"
alt="" border="0" height="383" width="12"></td></tr></tbody></table></body></html>
nahja so hatte ich es auch schon, jetzt ist nämlich der Inhalt der Textseite wieder oberhalb der rechten Naviagtion.
Aber der Inhalt soll links sein und die Navigation in der selben "Reihe" wie der Inhalt. So sieht das ganze im HTML Editor aus und da wo "Layout Dieses Design heißt June" steht, solln der Inhalt aus den Textseiten stehen :s
Gibts dafür auch irgendwie eine erklärung bzw. was ich wohl falsch gemacht habe? :s (ich bins jetzt nur schnell überfolgen und habs mir noch nicht genau angesehen.)
Inhalt nicht im richtigen Frame?
jetzt gehts, tausend Dank.
Linear-Darstellung
