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

css vereinfachte darstellng? (tabelle)

T

trix0

Neues Mitglied
heyho,
ich bräuchte eure hilfe...
also ich erstelle gerade meine erste internetseite über css. habe mir auch ein paar tutorials durchgelesen. so jetzt habe ich meine webseite schon eig. fertig, aber ich würde lieber ein vereinfachten code hernehmen wie zum beispiel tabellen code (<th>)
also hier meine stylesheet.css:
Code: 
body {
          background-color: white;
          background-image: url("image\background.jpeg");
          margin-top: 50px;
          margin-right: 40px;
          margin-bottom: 10px;
          margin-left: 70px;
                 }
h1 {
          text-align: center;
          border-width: thin;
          border-style: solid;
          border-color: black;
           border: 1px solid black;
    }
navi {
          margin-top: 100px;
          margin-right: 25%;
          margin-left: 35%;
          margin-bottom:
           border: 1px solid black;
        }

login {
         margin: 5px 50px 5px 10px;
          border: 1px solid black;
         }
div.banner {
         margin-top: -11%;
         margin-left: 83%;
         margin-right: 17%;
         border: 1px solid black;
         width: 200px;
}
 div.ueber{
          margin-top: -78.5%;
          margin-left: -443%;
         margin-right: 100%;
         margin-bottom: 100%;
         border: 1px solid black;
         background-image: "image\teilueberschrift.jpeg";
}
div.unter{
         margin-top: -100%;
         margin-left: -443%;
         margin-right: 100%;
         margin-bottom: 100%;
         border: 1px solid black;
         background-image: "image\news.jpeg";
           }
div.box{
          margin-top: -78.5%;
          margin-left: -443%;
         margin-right: 100%;
         margin-bottom: 100%;
         border: 1px solid black;
}
h2{
         font-size: 20px;
         font-weight: bold;
         }

aber ich weiß net wie... bitte helft mir
 
Werbung:
Hallo,

und willkommen im Forum.

trix0 schrieb:
aber ich würde lieber ein vereinfachten code hernehmen wie zum beispiel tabellen code (<th>)
also hier meine stylesheet.css:
Zum Vergrößern anklicken....

Wäre hilfreich wenn du uns den Html-Code auch zur Verfügung stellen könntest.
Der CSS-Code allein reicht nicht zur Beurteilung.
 
okay hier:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>index.html</title>
<meta name="author" content="mmorpg-platin">
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<h1>Der Name eurer Internetseite</h1>
<navi>
<a href="index.html">Vergleich</a>
<a href="index.html">Anbieter</a>
<a href="index.html">Ranking</a>
<a href="index.html">News</a>
<a href="index.html">Forum</a>
<a href="index.html">Bewertung</a>
</navi>
<p></p>
<login>Kostenlos registrieren!</login>
    <p></p>
<login>Login</login>
<p></p>
usertextbox<p></p>
passwordbox <p></p>
<div class="banner">Hier<p></p>können<p></p>banner<p></p>eingeblendet<p></p>werden!</banner>
<div class="ueber"><h2>Teilüberschrift</h2></div>
<div class="unter">
Die news
</div>
</head>

</body>
</html>

hier ^^

und so sieht das ganze aus:
http://ts3-servers.net/
 
Zuletzt bearbeitet:
Werbung:
In CSS werden Klassen werden mit einem Punkt und Div's mit der Raute eingeleitet. Versuch mal: #unter, dann klappt es auch mit der Formatierung.
 
wie meinste das?
zum beispiel:
Code: 
div#banner {          
                    margin-top: -11%;
                    margin-left: 83%;
                    margin-right: 17%;
                    border: 1px solid black;
                   width: 200px; }

oder wie meintest du es?
 
Zuletzt bearbeitet:
Ich geh erst mal auf deinen Html-Code wenn es dir recht ist. Du erfindest neue Elemente die es in HTML4 nicht gibt. Zum Beispiel navi oder login. Das geht natürlich gar nicht, da der Browser nicht weiss was er damit machen soll. Es gibt zwar die Möglichkeit in Htm5 neue Elemente quasi zu erfinden, aber dein Doctype verbietet das, und es wäre auch kein guter Stil. Des weiteren hast du das Body-Tag vergessen. Du hast es am Schluss zwar geschlossen aber nicht geöffnet, somit fehlt es. Im Grunde hast du deinen gesamten Code in den Head-Bereich der Seite geschrieben. Das der Browser überhaupt etwas anzeigt ist da schon eher ein Wunder. Da dein HTML-Code absolut verboten ist, kann man auch nicht davon ausgehen, dass der Browser die Referenzen im CSS zu den HTML-Elementen richtig zuordnet. Was du noch lernen musst ist zum Einen die verfügbaren Elemente in HTML und der Aufbau einer Webseite. Bei CSS solltest du dir ansehen wie man margin und padding richtig eingesetzt werden und wie man positioniert, sowie float. Ich gebe dir zu Anfang und zum Lernen mal deinen HTML-Code in valider Form wieder und dazu die CSS als Beispiel.
HTML: 
<!DOCTYPE html>
<html>    
  <head>        
      <meta charset="utf-8">        
      <title>CSS - Layout         
      </title>        
      <link rel="stylesheet" type="text/css" href="225760.css">    
  </head>    
  <body>             
      <div id="wrapper">                      
          <div id="header">                                          
              <h1>Der Name eurer Internetseite</h1>                                                
          </div>                      
          <div id="navigation">                                          
              <a href="index.html">Vergleich</a>                
              <a href="index.html">Anbieter</a>                
              <a href="index.html">Ranking</a>                
              <a href="index.html">News</a>                
              <a href="index.html">Forum</a>                
              <a href="index.html">Bewertung</a>                                                
          </div>                      
          <div id="leftcolumn">                                          
              <h4> Kostenlos registrieren!</h4>                
              <p>Login
              </p>                
              <p>usertextbox
              </p>                
              <p>passwordbox 
              </p>                                
          </div>                      
          <div id="content">                                              
              <h2>Teilüberschrift</h2>                              
              <p>Die News                 
              </p>                                                                                                                                             
          </div>                      
          <div id="rightcolumn">                                          
              <p>Hier können Banner eingeblendet werden                 
              </p>                                
          </div>                      
          <div id="footer">                                                
              <p>Fussbereich                 
              </p>                                                
          </div>            
      </div>         
  </body>
</html>
CSS:
HTML: 
* {
    padding: 0;
    margin: 0;
}
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
}
p, h1, h2, h3, h4, h5, h6 {
    padding: 10px;
}
#wrapper {
    margin: 0 auto;
    width: 1024px;
}
#content {
    float: left;
    color: #333;
    background: #FFFFFF;
    height: 450px;
    width: 624px;
    display: inline;
}
#header {
    color: #333;
    width: 1024px;
    float: left;
    height: 100px;
    background: #CCCCFF;
}
#footer {
    width: 1024px;
    height: 30px;
    clear: both;
    color: #333;
    background: #CCCCFF;
}
#navigation {
    float: left;
    width: 1024px;
    height: 25px;
    color: #333;
    background: #8AA1B6;
    text-align:center;
}
#leftcolumn {
    color: #333;
    background: #CC9966;
    height: 450px;
    width: 200px;
    float: left;
}
#rightcolumn {
    color: #333;
    background: #CC9966;
    height: 450px;
    width: 200px;
    float: left;
}

EDIT: Codedarstellung repariert
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
okay habe jetzt noch <body> hinzugefügt...
achja bräuchte immer noch ein hinweiß wie ich das in tabellen bekomme ^^
 
trix0 schrieb:
achja bräuchte immer noch ein hinweiß wie ich das in tabellen bekomme ^^
Zum Vergrößern anklicken....
Lass bloß die Finger von Tabellen. ;)

Was dein Vorhaben angeht: Deine Seite sieht mir sehr nach einer TS3-Serverliste oder sowas aus.
Wenn das schnell gehen muss würde ich zu Joomla greifen, ein CMS das recht einfach zu bedienen ist.
Da kannste dann auch nach und nach mit eigenem HTML erweitern etc.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben