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

Guter CSS Code?

Status
Für weitere Antworten geschlossen.
R

reDD

Neues Mitglied
Hi wollte mal Fragen wie ihr diesen Code findet?
Es soll links zwei Spalten geben und rechts daneben ein Content Bereich, alles soll noch von einem anderen div umschlossen werden.

Code: 
.content{
width:800px
border:1px;
}
.div{
position:absolute;
left:25px;
top:25px;
border:1px;
width:200px;
min-height:100px;
    }
.div2{
position:absolute;
left:25px;
top:25px;
border:1px;
width:200px;
min-height:100px;
     }
.center{
margin-left:250px;
margin-right:25px;
width:400px;
min-height:100px;
border:1px;
}
 
Sieht nett aus, aber was willst du nun von uns hören? Wir sehen ja nicht, wo du die einzelnen Klassen anwendest. Wenn er funktioniert ist es doch schoneinmal gut, wenn er nicht funktioniert, stimmt vermutlich etwas nicht. ;-) Wenn du usn dazu jetzt deinen HTML_Code oder deinen Hintergrundgedanken psotest, wäre das schoneinmal ein Anfang. :-)

Gruß Corvulus
 
Okay kommt gleich.


Ich habe vergessen wie ich die einzelnen Elemente zuordne?

Wann muss ich etwas nochmal zu class zu ordnen und wann muss ich etwas id zu ordnen??

Das weiß ich nicht mehr und ohne dieses "verknüpfen" geht es halt nicht.
 
HTML: 
<html>
  <head>
    <title>New Site</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
<div class="content">
<div class="div"> hiiiii</div>
<div class="div2">hiiiiii</div>
<div class="center">hiiiiii</div>
</div>    
  </body>
</html>

Irgendwie viel das nicht funktionieren, dabei müsste der CSS Code eigentlich funktionieren.
 
reDD schrieb:
Hi wollte mal Fragen wie ihr diesen Code findet?
Es soll links zwei Spalten geben und rechts daneben ein Content Bereich, alles soll noch von einem anderen div umschlossen werden.
Zum Vergrößern anklicken....

Wie Corvulus schon sagte. Der Code an sich sieht schonmal nicht schlecht aus. Aber was ich mich frage, warum definierst du das mit Klassen und nicht einfach mit Divs? Bzw. mit dem Code nachher <div id="so und so"></div>
 
sowas ist mir gelungen:


Code: 
/* CSS Document */
html , body {background-color:#CCFFFF; margin:0px; padding:0px;}
#header {background-color:#0033CC; width:100%; height:100px; padding:0px; margin:0px;}
#navigation {
 position:absolute;
 background-color:#0000FF;
 top:100px;
 left:0px;
 width:180px;
 margin:0px;
 padding:0px;
 height: 500px;
}
#features {
 position:absolute;
 background-color:#0000FF;
 top:100px;
 right:0px;
 width:180px;
 margin:0px;
 padding:0px;
 height: 500px;
}
#content {margin-top:0px; margin-left:180px; margin-right:180px;}
#logo {position:absolute; top:5px; left:12px; width:82px; height:87px}
#banner {position:absolute; top:5px; left:196px;}
#banner_pic {border:none; width:468px; height:60px;}
h1,h2,ul,ol,table {margin-left:16px; margin-right:16px; font-family:"Times New Roman", Times, serif;}
h1 {font-weight:bold; font-style:normal; font-size:130%; line-height:1.1em; color:#0000FF; border-left:#0000FF solid 20px; border-bottom:#0000FF solid 4px; padding-left:12px; margin-top:32px;}
h2 {font-weight:bold; font-style:normal; font-size:110%; line-height:1.1em; color:#0000FF; border-bottom:#0000FF solid 2px; margin-top:24px;}
p.intro {text-align:left; font-weight:normal; font-style:italic; font-size:100%; line-height:1.1em; margin-left:48px; color:#000000;}
p.text {text-align:justify; font-weight:normal; font-style:normal; font-size:100%; line-height:1.1em; color:#000000; margin-left:10px; margin-right:10px;}
div.box_content {margin-left:8px; margin-right:8px; margin-bottom:8px; background-color:#CCCCCC; border:rgb(130,130,130) solid 1px; color:#000000; font-family:"Times New Roman", Times, serif; font-size:80%; font-weight:normal; padding:3px;}
div.box_title {margin-top:16px; margin-left:8px; margin-right:8px; background-color:rgb(130,130,130) ; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; padding:1px;}
a.navi, a.navi_first, a.navi_self { width:150px; text-align:center; height:20px; display:block; white-space:nowrap; overflow:hidden; border-left:1px solid black; border-right:1px solid black; border-bottom:1px solid black; font-family:"Times New Roman", Times, serif; font-size:12px; font-weight:bold; text-decoration:none; letter-spacing:0.1em; padding:3px; text-align:center;}
a.navi_first {border-top:1px solid black;}
a.navi:link, a.navi_first:link, a.navi:visited, a.navi_first:visited {background-color:#00CCFF; color:#FFFFFF;}
a.navi_self:link, a.navi_self:visited {background-color:#00CCFF); color:white;}
a.navi:hover, a.navi_first:hover, a.navi_self:hover, a.navi:active, a.navi_first:active, a.navi_self:active {background-color:white; color:black;}
a.navi_first, a.navi, a.navi_self {margin-left:10px; margin-right:30px;}
a.navi_first {margin-top:10px;}
a.navi2,  a.navi_first2 { width:400px; text-align:center; height:30px; display:block; white-space:nowrap; overflow:hidden; border-left:1px solid black; border-right:1px solid black; border-bottom:1px solid black; font-family:"Times New Roman", Times, serif; font-size:18px; font-weight:bold; text-decoration:none; letter-spacing:0.1em; padding:3px; text-align:center; padding-top:6px; padding-bottom:6px;}
a.navi_first2 {border-top:1px solid black;}
a.navi2:hover, a.navi_first2:hover, a.navi2:active, a.navi_first2:active {background-color:white; color:black;}
 
/* Css Datei fr die Seite */
html dazu:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>malegi.de  Witze Seite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Eine geile Witzeseseite! SCHNEEEEELLL ich brauche WITZE!!! DU bist meine retunng! Sende mir Witze!!! DAS MUSST DU UNBEDINGT MACHEN!!!!">
<meta name="revisit-after" content="2 days">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="layout.js"></script>
</head>
<body onLoad="correct_layout()">
<div id="header">
 
  <a id="banner" href="http://www.malegi.de/witzeseite2/t.htm">
  </a>
  <object id="logo" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="82px" height="87px">
    <param name="movie" value="Smily.swf">
    <param name=quality value=high>
    <embed src="Smily.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="82px" height="87px"></embed>
  </object>
  <a href="http://www.malegi.de/witzeseite2/t2.htm">.
  <object id="banner" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="468px" height="87px">
    <param name="movie" value="HAHAHA.swf">
    <param name=quality value=high>
    <embed src="HAHAHA.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="468px" height="87px"></embed>
  </object>
  </a>
</div>
<div id="navigation">
<div>
 <a class="navi_self navi_first" href="feedback.htm">Witze einsenden</a>
 <br>
 <a class="navi_self navi_first" href="t.htm">Home</a>
    <a class="navi" href="thema/neu.htm">Neuste Witze</a>
 <a class="navi" href="thema/auto.htm">Autowitze</a>
    <a class="navi" href="thema/arzt.htm">Arztwitze</a>
    <a class="navi" href="thema/bier">Bierwitze</a>
    <a class="navi" href="thema/blond.htm">Blondinenwitze</a>
    <a class="navi" href="thema/Computer.htm">Computer</a>
    <a class="navi" href="thema/geschi.htm">Geschichten</a>
    <a class="navi" href="thema/mensch.htm">Mensch & CO</a>
    <a class="navi" href="thema/maerchen.htm">M&auml;rchen</a>
    <a class="navi" href="thema/existiertnicht.htm">Sonstige</a>
    <a class="navi" href="thema/tiere.htm">Tiere</a>
 
</div>
</div>
<div id="content">
<h1>Witzig Spritzig</h1>
<p class="intro">Createt by: Malegi</p>
<p class="text">Ohne Witze geht es nicht! Deshalb habe ich hier mal eine kleine Witzeseite gemacht, damit man sich daran erfreuen kann!<br>
Viel Spass beim lesen! :D</p>
<p class="text"><a href="feedback.htm">Hier</a> kannst du deine Witze einsenden!
</p>
</div>
<div id="features">
<div class="box_title">Boxtitle</div>
<div class="box_content">Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt</div>
</div>
</body>
</html>

Hier könnt ihr euchs anschauen;)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben