• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Html in CSS

A

alex141097

Neues Mitglied
Hey Leute,
Ich habe mal eine Frage. Ich habe einen HTML Code und einen CSS Code.
Diese würde ich gerne zu einem zusammenhängenden Css Code haben, und so das kein HTML da ist.

CSS:
Code: 
* {
        margin: 0;
        padding: 0;
}

body {
background: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 17px;
color: #333;
}

a {
text-decoration: none;
color: #362e19;
}
a:hover {
text-decoration: underline;
color: #4a3c19;
}

#wrap {
margin: 20px auto;
width: 1000px;
}


#header1 {
background: #666666 url(http://img.webme.com/pic/g/germanistan/header.jpg) no-repeat;
height: 200px;
}
#header h1 {
font-size: 38px;
letter-spacing: -1px;
padding: 70px 0 0 40px;
color: #fff;
}
#header h1 a {
color: #fff;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
}
#header h1 a:hover {
color: #000;
}
#header h2 {
font-size: 19px;
color: #EFECE0;
padding: 20px 0 0 40px;
letter-spacing: -1px;
font-weight: 100;
}

#menu {
height: 40px;
line-height: 40px;
background: #666666 url(http://img.webme.com/pic/g/germanistan/menu.jpg) no-repeat;
}
#menu ul {
list-style-type: none;
padding-left: 40px;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
padding: 0 20px 0 0;
text-decoration: none;
font-weight: 100;
font-size: 18px;
color: #aaa;
}
#menu ul li a:hover {
color: #fff;
text-decoration: none;
}

#content {
background: #666666 url(http://img.webme.com/pic/g/germanistan/content.jpg) repeat-y;
padding: 10px;
}

.left {
float: left;
width: 730px;
text-align: justify;
padding: 10px;
font-size: 14px;
background: #fff;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;

}
.left h2 {
font-size: 20px;
font-weight: 100;
padding: 15px 0 7px 0;
}
.left h2 a {
text-decoration: none;
}
.left h2 a:hover {
text-decoration: underline;

#content {
min-height:800px;
width:700px;
background-image:url(URL);
background-color:#ffffff;
margin-left:-6px;
margin-top:2px;
padding-left:5px;
padding-bottom:8px;
padding-right:8px;
text-align:justify;
}

#sidebar_container { position:absolute;
left:-214px;
top:328px;
padding:5px;
width:189px;
height:139px;
background-color:#cccccc;
font-color:#ffffff;
background-image:url(http://img.webme.com/pic/a/allyouneed/rechteboxpero.png);
}

#sidebar_heading {
margin:0;
padding:0;
overflow:auto;
}


.right {
float: right;
width: 180px;
background: #fff;
padding: 10px;
border-left: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.right h2 {
height: 24px;
line-height: 24px;
color: #000;
font-size: 17px;
padding-left: 10px;

}
.right ul {
padding: 10px 0 15px 30px;
list-style-type: square;
}
.right ul li a {
font-weight: 100;
font-size: 12px;
}
.right ul li a:hover {

}

#bottom {
background: #d4ccae url(http://img.webme.com/pic/g/germanistan/bottom.jpg) no-repeat;
padding: 10px 0;
}

#footer {
text-align: center;
font-size: 11px;
}
HTML:
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">
<head>
<title>Red</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>

<div id="wrap">

<div id="header">
<h1><a href="#">Red Template</a></h1>
<h2>Subheader, website description H2</h2>
</div>

<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Free Stuff</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">SiteMap</a></li>
</ul>
</div>

<div id="content">
<div class="left"> 

<h2><a href="#">License and terms of use</a></h2>
Red is a CSS template that is free and fully standards compliant. <a href="http://www.free-css-templates.com/">Free CSS templates</a> designed this template.
This template is allowed for all uses, including commercial use, as it is released under the <strong>Creative Commons Attributions 2.5</strong> license. The only stipulation to the use of this free template is that the links appearing in the footer remain intact. Beyond that, simply enjoy and have fun with it!     
<br /><br />
<img src="images/pic.jpg" alt="Example pic" style="border: 3px solid #ccc;" />
<br /><br />
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada 
et, nulla. Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed, 
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae 
congue nulla diam non urna.

<h2><a href="#">Title with a link - Example of heading 2</a></h2>
Donec nulla. Aenean eu augue ac nisl tincidunt rutrum. Proin erat justo, pharetra eget, posuere at, malesuada 
et, nulla. Donec pretium nibh sed est faucibus suscipit. Nunc nisi. Nullam vehicula. In ipsum lorem, bibendum sed, 
consectetuer et, gravida id, erat. Ut imperdiet, leo vel condimentum faucibus, risus justo feugiat purus, vitae 
congue nulla diam non urna.
</div>

<div class="right"> 

<h2>Categories :</h2>
<ul>
<li><a href="#">World Politics</a></li> 
<li><a href="#">Europe Sport</a></li> 
<li><a href="#">Networking</a></li> 
<li><a href="#">Nature - Africa</a></li>
<li><a href="#">SuperCool</a></li> 
<li><a href="#">Last Category</a></li>
</ul>

<h2>Archives</h2>
<ul>
<li><a href="#">January 2007</a></li> 
<li><a href="#">February 2007</a></li> 
<li><a href="#">March 2007</a></li> 
<li><a href="#">April 2007</a></li>
<li><a href="#">May 2007</a></li> 
<li><a href="#">June 2007</a></li> 
<li><a href="#">July 2007</a></li> 
<li><a href="#">August 2007</a></li> 
<li><a href="#">September 2007</a></li>
<li><a href="#">October 2007</a></li>
<li><a href="#">November 2007</a></li>
<li><a href="#">December 2007</a></li>
</ul>

</div>

<div style="clear: both;"> </div>

</div>

<div id="bottom"> </div>


</div>

</body>
</html>

Wäre Lieb wenn ihr mir helfen koenntet,
MFG ALex141097
 
Werbung:
Du kannst in CSS keinen HTML-Code einbetten da beide Sprachen strickt getrennt werden. Hintergrund ist ja, dass HTML zur Auszeichnung von Inhalten dient, CSS zur Gestaltung. Folglich kann man beide nicht vermischen.
 
Aber es muss sein, weil ich habe eine hp bei homepage-baukasten.de und da kann man wenn man ein eigenes design haben will nur css benutzen
 
Werbung:
Da kann man .. ? Versuchs mal mit Satzzeichen. Und erläutere mal genauer was Du willst. Sowas wie:

Code: 
div { <a href="link">Link</a> }

geht nicht.
 
alex141097 schrieb:
...und da kann man wenn man ein eigenes design haben will nur css benutzen
Zum Vergrößern anklicken....
Du zäumst das Pferd nur von der falschen Seite auf. Nicht html in css, sondern css in html. Hier steht, wie´s geht: selfhtml.org / zentrale Formate definieren.
Dass baukastendingsbums keine stylesheets zulässt (dem ist offenbar tatsächlich so, wenn man sich die Beispieldesigns auf der Site ansieht), ist schon schwach...

Grüsse
low
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben