Suche im Forum:
Suchen


Autor Nachricht
Beitrag12.12.2010 um 09:26 (UTC)    
Titel: Template (Hilfe)

Hallo,

ich habe mir ein Template gedownloadet,Links eingefügt,aber trotzdem sieht es irgendwie zerfetzt aus.Vielleicht hab ich ja die Codes vertauscht.Da es mein 1.Template ist,weiß ich noch nicht so viel darüber.

Hier habe ich es gedownloadet:

http://www.free-css.com/free-css-templates/page89/mork-horisont.php#bookmarks

Hier ist meine Seite:

http://il-testpage.de.tl/


Jetzt kommt der Code:



Text über Design:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<title>Mork Horisont</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body class="music">
<div id="wrapper">
  <div id="header">
    <h1 id="headimg"><a href="http://www.free-css.com/">Mork Horisont</a></h1>
    <div class="kit"><a href="http://www.free-css.com/">Free CSS Template</a></div>

    <div id="search">
      <form method="get" id="searchform" action="http://www.free-css.com/">
        <div class="keyword">
          <input type="text" value="Search..." name="s" id="s" onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" size="18" />
        </div>
      </form>
    </div>
    <div id="menu">
      <ul id="nav">

        <li><a href="about.html">About</a></li>
      </ul>
    </div>
  </div>
  <div id="container">
    <div id="header-img">
      <div class="gallery">
        <div class="headimg"> <img src="images/head-img.jpg" alt="" /> </div>

        <div class="ads"><a href="http://www.free-css.com/">Adsense go here</a></div>
      </div>
    </div>
    <div id="content">
      <div class="post">
        <h2 class="entry-title"><a href="http://www.free-css.com/">Mork Horisont Free CSS Template</a></h2>
        <div class="links">
          <div class="clock"> June 19th, 2008 </div>

          <div class="comment"> <a href="http://www.free-css.com/">12 Comments</a> </div>
          <div class="cat"> Filed under: <a href="http://www.free-css.com/">Content</a>, <a href="http://www.free-css.com/">Web Design</a>, <a href="http://www.free-css.com/">Templates</a> </div>
        </div>

        <div class="entry-content">
          <p>Vestaspellus sem augue pretra donec nullamcorper quis nibh turpis eget quisque. Ullatincidunt et nis lorem cursus consectetus sempus id eleifendrerit semper ac. Auctorvest sodalesuada vestibus orci enim quisque nam maurisque curabitae disse mattitor.</p>
          <blockquote>
            <p>Suspendimentumloreet congue pellentesque mauris id adipiscing portortis wisi urna pellentegestibus ut. Utmaecenatibulus eget ligula interdum non sed liberos ut adipiscing vitas lacinia.</p>
          </blockquote>
          <p>Tricesurna ligula famet phasellus quisque dolorem vel cursuspenatis convallis tincidunt vest. Velisiphasellentum ac sed</p>
          <p>1. <strong>Tricesdolorem quisque</strong> et tincidunt condimentesque <a href="http://www.free-css.com/">vivamus at quis</a> venean iacus congue. Erodapiente urna aliquam sus diculis nunc urna praesenec velit ut sed. Vestiesed nequam neque mus justo sentum tellus pede justo vel nam.</p>

          <p>2. Arcufermenterdum condimenterdum volutpat tellent antesquet wisi ut maurisque trisque id sociis. Diculumrisus aliquam males leo sagittitor et morbi justo sapienterdum ipsum tellus.</p>
          <p>3. <strong>Pretiumcurabitur a faucibus</strong> tur elis eget orci ligula <a href="http://www.free-css.com/">non justo at</a>. Elitsapienteger non interdum elisi amet pellus sit pellus iacus tincidunt rhoncus. Doloreetero tor temper metuer accumsan nibh rutrum nulla a fermentesque cras.</p>
          <p>4. Etlibero alique vitantegestibulum tor platea por ac id accumsan nulla nibh. Idelit mus anteget condisse pede leo pretium nunc sociis a elit. Maecenaspor sempus malesuada temper phasellus mauristibulum et malesuada tellus gravida nonummy</p>
          <p>5. Etconvallis porta sollis urna vel ipsum orna et phasellus pretium id. Velmattis id laorem cursuspendimentesque felit hac vitae enim enim et tor. Consectetuervivamus rhoncus laorem penatoque ut quis leo morbi convallis gravida neque. Interdumsapienterdum id neque condimentesquet id sus por molestie quisque et inte. Vivamussed convallicitudin in tellus sit enim ac justo dui nisl id.</p>

          <p>6. Trisaugue conseque id eros ut pellentesque id maecenatibulus euismod tellente at. Ornatris curabiturpiscipiscinia montes platea velisi orci quisque temper convallisis sed cursusce. Namjusto morbi ut integestibulum volutpat morbi portor cursus ut pretium aenean. Inconsecteturpiscingilla volutpat laoreet ridiculum estiquat in auctor non phare id lobortor. Sociishabitur nulla habiturpiscinia curabitanteget ut facinia nec laculis sus magnisse vestibulum.. <a href="http://www.free-css.com/" class="more-link">Read more…</a></p>
        </div>
      </div>
      <div class="ads-468x60">
        <!-- banner goes here -->
      </div>
      <div class="navigation"> </div>

    </div>
    <div class="sidebar">
      <ul>
        <li id="categories">
          <h3>Categories</h3>
          <ul>
            <li><a href="http://www.free-css.com/">Content</a> </li>

            <li><a href="http://www.free-css.com/">Uncategorized</a> </li>
            <li><a href="http://www.free-css.com/">Web Design</a> </li>
            <li><a href="http://www.free-css.com/">Templates</a> </li>
          </ul>
        </li>
        <li id="archives">

          <h3>Archives</h3>
          <ul>
            <li><a href="http://www.free-css.com/">June 2008</a></li>
          </ul>
        </li>
        <li id="linkcat-2" class="linkcat">
          <h3>Blogroll</h3>

          <ul>
            <li><a href="http://www.free-css.com/">Development Blog</a></li>
            <li><a href="http://www.free-css.com/">Documentation</a></li>
            <li><a href="http://www.free-css.com/">Plugins</a></li>
            <li><a href="http://www.free-css.com/">Suggest Ideas</a></li>
            <li><a href="http://www.free-css.com/">Support Forum</a></li>

            <li><a href="http://www.free-css.com/">Themes</a></li>
            <li><a href="http://www.free-css.com/">CSS Templates</a></li>
          </ul>
        </li>
        <li id="meta">
          <h3>Meta</h3>
          <ul>

            <li><a href="http://www.free-css.com/">Log in</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div id="footer">
      <p>© Your Site | Designed by: <a href="http://www.loreleiwebdesign.com/">Lorelei Web design</a></p>

    </div>
  </div>
</div>
</body>
</html>





CSS Code ohne Style Tags:


Code:
/*
Theme Name: MorkHorisont
Theme URI: http://www.toptut.com/
Description: 2-column Mork Horisont (dark horizon) WordPress theme. Download this theme for only $10 at www.toptut.com. Based on small potato.
Version: 1.00
Author: Lorelei
Author: http://www.loreleiwebdesign.com/
*/

#container {
float:left;
width:920px;
background:#293641;
display:inline;
margin:0 20px;
}

#content {
float:left;
width:620px;
display:inline;
margin:0 20px;
}

.post {
width:620px;
overflow:hidden;
font-family:"Lucida Sans", Tahoma;
font-size:12px;
}

.post h2 {
font:25px georgia, serif;
background:url(http://img.webme.com/pic/i/il-testpage/bg-post-title.gif) no-repeat 5px 18px;
padding:20px 20px 11px;
}

.entry-meta {
font-size:12px;
border-top:1px solid #181818;
background:#0f0f0f;
color:#666;
padding:17px 20px;
}

.entry-meta a {
color:#142634;
}


.entry-content {
border:1px solid #364351;
line-height:22px;
background:#19232e url(http://img.webme.com/pic/i/il-testpage/bg-entry.gif) repeat-x;
padding:3px 20px;
}

.entry-content h2 {
font-size:24px;
font-weight:700;
line-height:28px;
font-family:arial, helvetica, sans-serif;
background-image:none;
padding:0;
}

.entry-content h3 {
font-size:18px;
font-weight:700;
line-height:24px;
}

.entry-content h4 {
font-size:14px;
font-weight:700;
line-height:20px;
}

.entry-content h5 {
font-size:11px;
line-height:16px;
}

.entry-content h6 {
font-size:10px;
line-height:14px;
}

.ads-468x60 img {
margin:0 0 0 20px;
}

.navigation {
float:left;
width:620px;
line-height:24px;
margin:13px 0 0;
}

.navigation span.nav-previous {
background:url(http://img.webme.com/pic/i/il-testpage/bg-older-posts.gif) no-repeat 0 5px;
margin:0 0 0 20px;
padding:0 0 0 24px;
}

.navigation span.nav-next {
background:url(http://img.webme.com/pic/i/il-testpage/bg-newer-posts.gif) no-repeat right 5px;
margin:0 20px;
padding:0 24px;
}

#header-img {
float:left;
width:920px;
background:#222c36 url(http://img.webme.com/pic/i/il-testpage/bg-1.gif) no-repeat;
display:inline;
margin:0;
}

#header-img .gallery {
float:left;
width:880px;
border-bottom:1px solid #181818;
display:inline;
margin:0 20px;
padding:0 0 20px;
}

.headimg {
float:left;
width:840px;
height:205px;
display:inline;
position:relative;
margin:10px 0 0 20px;
}

.band .ads {
position:absolute;
top:156px;
left:20px;
font-size:12px;
font-weight:700;
text-transform:uppercase;
background:#000;
padding:7px 10px;
}

.band .ads a {
color:#ccc;
}

#footer {
float:left;
width:880px;
color:#bccd10;
border-top:1px solid #181818;
font-size:11px;
font-weight:700;
line-height:24px;
display:inline;
margin:12px 20px 0;
}

#footer p {
padding:13px 20px;
}

/* links at the post */
.links {
font-family:Verdana, sans-serif, Arial;
display:block;
width:100%;
height:45px;
line-height:160%;
background:#b4bcc7;
border-top:#fff 1px solid;
border-left:#fff 1px solid;
border-bottom:#7e8da2 1px solid;
border-right:#7e8da2 1px solid;
color:#000;
font-size:11px;
padding:5px 10px;
}

.links a {
text-decoration:none;
color:#666;
}

.links a:hover {
color:#666;
text-decoration:none;
}

.links .comment {
display:block;
float:left;
background:url(http://img.webme.com/pic/i/il-testpage/comment.gif) no-repeat left center;
padding-left:20px;
margin-right:35px;
}

.links .feed {
display:block;
float:left;
background:url(http://img.webme.com/pic/i/il-testpage/feed.gif) no-repeat left center;
padding-left:20px;
margin-right:35px;
}

.links .cat {
display:block;
float:left;
background:url(http://img.webme.com/pic/i/il-testpage/categories.gif) no-repeat left center;
padding-left:20px;
margin-right:35px;
}

.links .clock {
display:block;
float:left;
background:url(http://img.webme.com/pic/i/il-testpage/clock.png) no-repeat left center;
padding-left:20px;
margin-right:35px;
}

/*** basics and body styles ***/
blockquote,body,caption,dd,dl,form,h1,h2,h3,h4,h5,h6,input,p,pre,textarea,table,td,th {
margin:0;
padding:0;
}

body,form,h1,h2,h3,h4,h5,h6,input,textarea,table {
font:14px "Lucida Sans", Tahoma;
color:#aaa;
}

body {
text-align:center;
background:#0f1e27 url(http://img.webme.com/pic/i/il-testpage/bg-body.gif) repeat-x;
}

input,textarea {
color:#000;
}

a {
text-decoration:none;
color:#fff;
}

a:hover {
text-decoration:underline;
}

a img {
border:0;
}

blockquote {
background:#111;
margin:10px 0 0;
}

blockquote p {
padding:20px;
}

blockquote blockquote {
background:#000;
margin:0 20px;
}

img.alignleft {
margin:5px 10px 2px 0;
}

img.alignright {
margin:5px 0 2px 10px;
}

img.alignleft,img.alignright {
border:1px solid #222;
display:inline;
padding:4px;
}

img.centered {
display:block;
margin-left:auto;
margin-right:auto;
}

p img {
max-width:100%;
}

small {
font-size:12px;
}

.alignleft {
float:left;
}

.alignright {
float:right;
}

.clear {
clear:both;
margin:0;
padding:0;
}

#wrapper {
width:960px;
text-align:left;
margin:0 auto;
}

/*** Header, menu, search styles ***/
#header {
float:left;
width:960px;
height:183px;
background:#fff url(http://img.webme.com/pic/i/il-testpage/bg-header.jpg) no-repeat;
margin:10px 0 0;
}

h1#headimg {
float:left;
width:250px;
height:67px;
display:inline;
overflow:hidden;
background:url(http://img.webme.com/pic/i/il-testpage/logo.gif) no-repeat;
margin:23px 0 0 57px;
}

h1#headimg a {
display:block;
width:250px;
height:67px;
overflow:hidden;
text-indent:-10000px;
}

.feed {
float:left;
width:617px;
font-weight:700;
text-transform:uppercase;
display:inline;
margin:36px 0 0 15px;
}

.feed a {
background:url(http://img.webme.com/pic/i/il-testpage/feed.giff) no-repeat 5px 2px;
padding:0 0 0 22px;
}

.kit {
float:left;
width:617px;
font-weight:700;
text-transform:uppercase;
display:inline;
margin:36px 0 0 1px;
}

.kit a {
text-decoration:none;
padding:0 0 0 22px;
}

#search {
float:left;
width:617px;
height:24px;
background:url(http://img.webme.com/pic/i/il-testpage/bg-search.gif) no-repeat;
display:inline;
margin:8px 0 0 15px;
}

#search form#searchform {
margin:5px 0 0 23px;
}

#search form#searchform input {
border:0;
font-size:11px;
background:transparent;
color:#fff;
}

#menu {
float:left;
width:880px;
height:58px;
background:url(http://img.webme.com/pic/i/il-testpage/bg-menu.gif) no-repeat;
display:inline;
margin:15px 0 0 40px;
}

#menu ul {
list-style-type:none;
margin:0;
padding:0 10px;
}

#menu ul li {
float:left;
font:bold 15px "Lucida Sans", Tahoma;
display:inline;
margin:20px 10px 0;
}

/*** sidebar styles ***/
.sidebar {
float:left;
width:240px;

}

.sidebar ul {
list-style-type:none;
margin:0;
padding:0;
}

.sidebar ul li {
margin:20px 0 0;
}

.sidebar ul li h3 {
font:bold 18px georgia, serif;
text-transform:uppercase;
background:url(http://img.webme.com/pic/i/il-testpage/bg-sidebar-title.gif) no-repeat 9px -1px;
color:#ccc;
padding:6px 20px 16px;
}

.sidebar ul ul {
line-height:10px;
background:#222c36;
border:1px solid #1b2631;
padding:0 20px 16px;
}

.sidebar ul ul li {
background:url(http://img.webme.com/pic/i/il-testpage/bg-sidebar-item.gif) no-repeat 0 18px;
margin:0;
padding:19px 10px 10px 18px;
font-size:12px;
}
.sidebar ul ul li:hover{
background:url(http://img.webme.com/pic/i/il-testpage/bg-sidebar-item.gif) no-repeat 0 18px;
margin:0;
padding:19px 10px 10px 22px;
font-size:12px;


}

.sidebar ul ul ul {
padding:0;
}

.sidebar ul ul ul li {
border:0;
background-image:none;
padding:0 0 0 10px;
}

/*** comments ***/
#comments,#respond {
margin:17px 0 0;
}

#comments h3 {
border-bottom:1px solid #181818;
font:18px georgia, "trebuchet ms", serif;
text-transform:uppercase;
color:#d0dc14;
padding:13px 10px 17px;
}

#comments ol.commentlist {
list-style-type:none;
margin:0;
padding:0;
}

#comments ol.commentlist li {
border-bottom:1px solid #181818;
line-height:22px;
padding:4px 10px 3px;
}

#comments ol.commentlist li.highlighted {
background:#111;
}

#comments .required {
color:#a00;
}

#comments input {
border:1px solid #181818;
background:#111;
color:#fff;
padding:3px;
}

#comments textarea {
border:1px solid #181818;
width:75%;
background:#111;
color:#fff;
padding:3px;
}

#respond p {
padding:20px 0 0;
}

#comments p.nocomments,#respond form {
padding:0 10px;
}

#comments p#login-req {
padding:20px 10px 10px;
}

p.comment_license {
line-height:22px;
}

/*** paragraphs ***/
p.alert,p.download,p.info,p.note {
margin:10px 0 0;
padding:10px 10px 10px 36px;
}

p.alert {
border-top:2px solid #440b02;
border-bottom:2px solid #440b02;
background:#260601 url(http://img.webme.com/pic/i/il-testpage/alert.png) no-repeat 12px 16px;
padding:10px 10px 10px 36px;
}

p.download {
border-top:2px solid #234a01;
border-bottom:2px solid #234a01;
background:#142b00 url(http://img.webme.com/pic/i/il-testpage/download.png) no-repeat 10px 16px;
}

p.info {
border-top:2px solid #01254b;
border-bottom:2px solid #01254b;
background:#01162d url(http://img.webme.com/pic/i/il-testpage/info.png) no-repeat 12px 16px;
}

p.note {
border-top:2px solid #7a4706;
border-bottom:2px solid #7a4706;
background:#5b3403 url(http://img.webme.com/pic/i/il-testpage/note.png) no-repeat 14px 16px;
}

/*** widgets ***/
.sidebar ul li#search {
float:none;
width:auto;
background-image:none;
margin:12px 0 0;
padding:0;
}

.sidebar ul li#search form#searchform input {
border:1px solid #181818;
background:#181818;
margin:8px 0 0;
padding:3px;
}

.sidebar ul li.widget_rss h3 img {
width:9px;
height:9px;
}

.sidebar ul li.widget_tag_cloud h3 {
margin:0 0 10px;
}

.sidebar ul li.widget_tag_cloud a {
padding:0 0 0 10px;
}

#wp-calendar {
width:100%;
border-bottom:1px solid #181818;
padding:0 0 20px;
}

#wp-calendar caption {
padding:20px 20px 10px;
}

#wp-calendar th,#wp-calendar td {
text-align:center;
background:#181818;
padding:5px;
}

#wp-calendar td,table#wp-calendar th {
padding:3px 0;
}

.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6,p {
padding:10px 0;
}

.sidebar ul li#search form#searchform input#s,#wp-calendar td {
background:transparent;
}
#extraDiv1 {display: none;} #extraDiv2 {display: none;} #extraDiv3 {display: none;} #extraDiv4 {display: none;} #extraDiv5 {display: none;} #extraDiv6 {display: none;} #pre_header {display: none;} #post_header {display: none;} #pre_content {display: none;} #nav_heading{display: none;} #nav{display: none;} div.header{display: none;} h1#title{display: none;} h2#title span {display: none;}
#content { position: absolute; left: 50%; top:328px; margin-left:-599px; width: 660px; padding:10px; color: #000000; font-size:13px; font-family: Arial; background-color:#transparent; background-image:url(); border: 0px solid #5F5F5F; height : 344px; overflow:auto;}







Ich hoffe,es kann mir einer helfen.
Beitrag12.12.2010 um 12:48 (UTC)    
Titel:

Hey,

Ich glaube das ist der Falsche Bereich das kommt bei CSS - Fragen zum eigenen Design


Mfg
Kenan Wink
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de