Frage zur.. ich nenn es jetzt mal Aufstellung

Basti

Hallo,
das mag mein erster Beitrag sein,
doch das zeugt finde ich davon das bis jetzt alles geklappt hat

Und zwar habe ich folgendes (naja es ist nicht direkt ein Problem):

Ich habe mir das hier zusammengebastelt:

http://letthton.blackapplehost.com/Hauptseite/index.html

Das Design ist, unschwer zu erkennen, ein Viereck, allerdings fehlt unten
rechts ein Stück, daran zu erkennen das dieses besagte Stück in der Hintergrundfarbe (hellgrau, #CCCCCC) gefärbt ist...

Nun wollte ich dort allerdings eine grüne Fläche erstellen, sodass es ein ausgefülltes Viereck ergibt, und ich dort einen 2. Inhalt erstellen kann,

ich hab mein Glück einfach mal irgendwie versucht, hmm, naja, ging nich^^
Das hier ist der Code:

Code

<head>
<style type="text/css">
body {
  font: 100.01% Verdana, Arial, Helvetica, sans-serif;
}




* {
  margin:0;
  padding:0;
}




#seite {
  width:1000;
  margin: 20 auto;
}




#kopfbereich {
  padding: 20px;
  background-color: #006600;
}




#inhalt {
  background-color: #006600;
  height: 1000px;
  margin-right: 250px;
  padding: 20px;
}




#steuerung {
  float: right;
  width: 250px;
  height: 375px;
  background:url(steuerung.jpg);
  font: 120% Verdana, Arial, Verdana, Helvetica, sans-serif;
}




#inhalt2 {
  background-color: #006600;
  float: right;
  width: 250px;
  height: 625px;
}




</style>




</head>
<body  text="#FFFFFF"  bgcolor="#CCCCCC"  link="#000000" 
alink="#000000"  vlink="#000000">
 <div id="seite">
  <div id="kopfbereich">
     <img  src="logo.jpg" border="0" width="950" />
  </div>




  <div id="steuerung">
  wudi wudi wuuu wo biste?
  </div>




  <div id="inhalt">
     Gestern war hier noch n Bild xD
  </div>







</div>
</body>
</html><div align="center"><br />
  <a href="http://www.blackapplehost.com" target="_blank">Free Web Hosting</a> by BlackAppleHost.com</div>

Alles anzeigen

Hinweise:
Bis jetzt ist das Design in einen Headbereich, einen Inhalt, und eine Steuerung geteilt.

Code

"wudi wudi wuuu wo biste?"

Hilft mir im Moment einfach das die Steuerung angezeigt wird.

Und das hier ist halt mein "Problemfall":

Code

#inhalt2 { 
  background-color: #006600; 
  float: right; 
  width: 250px; 
  height: 625px; 
}

Ich kann mir vorstellen das das auch komplett falsch ist^^

Dann korrigiert mich bitte

Noch ein Hinweis:
Jaja, ich weiss, CSS immer in ner einzelnen Datei...^^
Hab ich jez grad nunmal net, mach ich halt später, da ich im Moment eh nur experimentier,
und wie das in einer ausgelagerten (heisst doch so oder?) Datei funktioniert muss ich mir nochmal durchlesen.

Jetzt hoffe ich erst einmal auf schnelle, gezielte Hilfevorschläge,

Gruß

Basti

maulepan

sorry, aber ich kann in deiner datei einfach kein <div id="inhalt2"> finden. Wie soll es denn angezeigt werden?

YetiZwerg

warum hast du da so ein einsames "LOL?" stehen???

Das verschiebt dir alles...

Basti

Seid doch bitte mal so freundlich, und sagt mir nicht was falsch ist,

sondern auch wie ich es richtig machen kann

Mir jetzt sagen das ein "lol" alles verschiebt, hmmm,

das hilft mir jez nicht wirklich weiter. . .

Ich merk schon, ich probier es lieber selbst aus, irgendwann kriege ich es

schon hin

Trotzdem danke das ihr euch gemeldet habt!!!

Edit:

Habe es jetzt hinbekommen:

Code

<head>
<link  rel="shortcut  icon"  type="image/x-icon"  href="favicon.ico"  />
<style type="text/css">
body {
  font: 100.01% Verdana, Arial, Helvetica, sans-serif;
}




* {
  margin:0;
  padding:0;
}




#seite {
  width:1000;
  margin: 20 auto;
}




#kopfbereich {
  background-color: #006600;
  padding: 20px;
}




#inhalt {
  background-color: #006600;
  height: 800px;
  margin-right: 250px;
  padding: 20px;
}




#inhalt2 {
  background-color: #006600;
  margin-top:394px;
  width: 250px;
  height: 400px;
  font: 120% Verdana, Arial, Verdana, Helvetica, sans-serif;
}




#steuerung {
  background:url(steuerung.jpg);
  float: right;
  width: 250px;
  height: 400px;
  font: 120% Verdana, Arial, Verdana, Helvetica, sans-serif;
}




</style>




</head>
<body  text="#000000"  bgcolor="#CCCCCC"  link="#000000" 
alink="#000000"  vlink="#000000">




 <div id="seite">




  <div id="kopfbereich">
     <img  src="logo.jpg" border="0" width="950" />
  </div>




  <div id="steuerung">
  wudi wudi wuuu wo biste?
      <div id="inhalt2">
        <b>Test</b>
      </div>
  </div>




  <div id="inhalt">
<table  border="1"> 
   <tr> 
     <td>
       <td  bgcolor="#FFFFFF">     
<b>Besucherz&auml;hler:</b><br />
<script language="javascript">
var data, p;
var agt=navigator.userAgent.toLowerCase();
p='http';
if((location.href.substr(0,6)=='https:')||(location.href.substr(0,6)=='HTTPS:')) {p='https';} data = '&r=' + escape(document.referrer) + '&n=' + escape(navigator.userAgent) + '&p=' + escape(navigator.userAgent)
if(navigator.userAgent.substring(0,1)>'3') {data = data + '&sd=' + screen.colorDepth + '&sw=' + escape(screen.width+ 'x'+screen.height)};
document.write('<a href="" >');
document.write('<img border=0 hspace=0 '+'vspace=0 src="http://www.netzaehler.de/counter.php?i=6393' + data + '"> </a>');
</script><br><a href="http://www.netzaehler.de" target="_blank"><font face="tahoma" size="1" color="#dddddd"></font></a>
       </td>
     </td> 
   </tr> 
</table>




<br />
  <b>
Hallo, und ein herzliches Willkommen!
<br />
<br />
Diese Homepage hat kein wirkliches Oberthema,
<br />
<br />
es ist eine bunte Mischung aus allem was mir so einf&auml;llt!
  </b>




<a  href="http://www.youtube.com/watch?v=M61euZg5aSg"  target="_blank">
 <img  src="historymaker.jpg" align="middle" alt="History Maker" />
</a>
  </div>




</body>
</html>

Alles anzeigen

Ich habe einfach den "Inhalt2" in die "Steuerung" geschachtelt, und einen

Abstand zum "Header" gemacht,

das hat jetzt 2 coole Effekte,

1. Es sieht ganz nett aus

2. Ich weiss jez das ich CSS Schachteln kann

Jetzt versuche ich mal auf einer neuen Seite ein Design mit Tabellen zu

basteln

Hier nochmal der Link:

http://letthton.blackapplehost.com/Hauptseite/index.html

Gruß

Basti

Axel

Hallo Basti,

nicht aufgeben ist immer wichtig - immer weitermachen. Als nächstes wirst du über das Problem der Spalten bis unten stolpern (erfahrungsgemäß). Lösung läuft über unechte Spalten mit CSS:

Hilft dazu gibt es unter:
<a class="postlink" href="http://www.webmaster-crashkurs.de/2-spalten-layout-mit-unechten-spalten-in-css.htm">http://www.webmaster-crashkurs.de/2-spa ... in-css.htm</a>

herzliche Grüße
Axel

Talwin

Hallo, ich beziehe mich mal auf dei alte Version, in der neuen sind weitestgehend die gleichen Fehler gemacht worden:

Hier erst mal meine Anmerkungen zu Deinem alten Quelltext:

HTML

<!-- hier fehlt ein Doctype!!! -->
<!-- hier fehlt <html>!!! -->
  <head>
    <!-- hier fehlen meta tags, wie z.B. title, http-equiv usw. -->
    <style type="text/css">
      body {
        font: 100.01% Verdana, Arial, Helvetica, sans-serif;
      }

      * {
        margin:0;
        padding:0;
      }
      /* hier fehlen die Einheiten über all (bei width, margin usw.). Soll der Browser raten? */
      #seite {
        width:1000;
        margin: 20 auto;
      }

      #kopfbereich {
        padding: 20px;
        background-color: #006600;
      }
      /* feste height-Angaben sind mit Vorsicht zu genießen. Was
      wäre, wenn der Inhalt mehr Platz nach unten benötigt? */
      #inhalt {
        background-color: #006600;
        height: 1000px;
        margin-right: 250px;
        padding: 20px;
      }

      #steuerung {
        float: right;
        width: 250px;
        height: 375px;
        background:url(steuerung.jpg);
        /* einmal Verdana zu viel */
        font: 120% Verdana, Arial, Verdana, Helvetica, sans-serif;
      }

      #inhalt2 {
        background-color: #006600;
        float: right;
        width: 250px;
        height: 625px;
      }
    </style> 
  </head>
  <!-- diese Formatierungen im body tag sind hier fehl am Platz. Nutze CSS oben im style Bereich -->
  <body  text="#FFFFFF"  bgcolor="#CCCCCC"  link="#000000" alink="#000000"  vlink="#000000"> 
    <div id="seite">  
      <div id="kopfbereich">     
        <!-- das alt Attribut im Bild fehlt, Formatierungsangaben bitte mit CSS -->
        <img  src="logo.jpg" border="0" width="950" />  
      </div>  
      <div id="steuerung">
        wudi wudi wuuu wo biste?   
      </div>  
      <div id="inhalt">
        Gestern war hier noch n Bild xD   
      </div>
    </div>
  </body>
</html>
<!-- was soll das hier??? Außerhalb von <html></html> gehört kein HTML... -->
<!-- davon abgesehen, Zentrierung mit CSS machen -->
<div align="center"><br />  
  <a href="http://www.blackapplehost.com" target="_blank">Free Web Hosting</a> by BlackAppleHost.com
</div>

Alles anzeigen

Wie gesagt, einige Grundlagen von HTML scheinst Du noch nicht begriffen zu haben. Habe Dir nun mal was gecodet. Bitte versuche den Code zu verstehen. Natürlich musst Du ihn an Deine Bedürfnisse noch anpassen.

HTML

<!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" xml:lang="de" lang="de">

  <head>
    <title>
      Hier Dein sinnvoller Seitentitel
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="content-language" content="de" />
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
    		font-size: 100.1%;
    		background-color: #cccccc;
    		color: #ffffff;
      }
      /* Linkangaben, musst Du anpassen */
      a:link {
  			color: #0000ff;
  			text-decoration: underline;
      }
      a:visited {
  			color: #0000cc;
  			text-decoration: underline;
      }
      a:link:hover, a:visited:hover {
  			background-color: #0000ff;
  			color: #ffffff;
  			text-decoration: underline;
      }
      a:active {
  			color:#000000;
  			text-decoration: underline;
      }
      /* Container */
      #seite {
        background-color: #006600;
        width: 1000px;
        margin-top: 20px;
      }
      #kopfbereich {

      }
      #boxrechts {
        float: right;
        width: 250px;
      }
      #steuerung {
        background-image: url(steuerung.jpg);
        background-repeat:repeat-y;
        padding: 5px;
      }
      #steuerung ul {
        list-style: none;
      }
      #steuerung2 {
        padding: 5px;
      }
      #inhalt {
        margin-right: 250px;
        padding: 10px;
      }
      #footer {
        clear: both;
        color: #000000;
        background-color: #cccccc;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div id="seite">
      <div id="kopfbereich">
        <img src="logo.jpg" alt="Logo" />
      </div>
      <div id="boxrechts">
        <div id="steuerung">
          <h2>Navigation</h2>
          <ul>
            <li>Navipunkt 1</li>
            <li>Navipunkt 2</li>
            <li>Navipunkt 3</li>
            <li>...</li>
          </ul>
        </div>
        <div id="steuerung2">
          <h2>Box2</h2>
          <p>
            Text...
          </p>
        </div>
      </div>
      <div id="inhalt">
        <h1>Ueberschrift</h1>
        <p>
          Absatz1
        </p>
        <p>
          Absatz2
        </p>
      </div>
      <div id="footer">
        <a href="http://www.blackapplehost.com">Free Web Hosting</a> by BlackAppleHost.com
      </div>
    </div>
  </body>
</html>

Alles anzeigen

Dazu noch: Die Höhe der Seite ist nun flexibel und passt sich an den Inhalt an. Feste Höhen haben bei zu langem Inhalt Probleme, bei zu kleinem Browserfenster gibts unnötigerweise einen Scrollbalken, obwohl meistens kein Inhalt mehr da ist. Eine Überlegung als Kompromiss wären eine min-height Angabe für den Container #seite.

Bei Fragen stehe ich gerne bereit.

Gruß Talwin

Basti

Och Menno, konzentriert euch doch nurmal drauf was ich möchte^^

Das mit dem Doctype und dem ganzen Kram habe ich schon begriffen,

allerdings ist das im Moment ein Design Test und ich werd das eh noch

als eine CSS Datei basteln^^

Trotzdem vielen Dank für deine Hilfe.

Ausserdem bin ich auch erst seid 2 Tagen dabei

An Axel:

Genau, niemals aufgeben, ich bin ja schliesslich durch weitermachen jez

auch ans Ziel gekommen, nur muss ich sagen, ich hab den Anbieter

gewechselt, und jetzt ist alles hier zu finden was ich mache:

http://projectdestyny.kilu.de/seite1.html

Talwin

Zitat von "Basti"

Och Menno, konzentriert euch doch nurmal drauf was ich möchte^^

Das mit dem Doctype und dem ganzen Kram habe ich schon begriffen,

allerdings ist das im Moment ein Design Test und ich werd das eh noch

als eine CSS Datei basteln^^

? Warum wunderst Du Dich dann, dass dein Design nicht so aussieht, wie Du willst, wenn Du bekannte Fehler im Code einfach so lässt? Und damit meine ich nicht den Doctype, lies meine anderen Anmerkungen. Ohne HTML und CSS Fehler ist es viel einfacher das Design anzupassen und so hinzu bekommen, wie Du willst.

Mit Deinem neuen Quelltext hast Du nur Glück, dass der Browser, mit dem Du testest zufällig die HTML und CSS Fehler so anzeigt, dass Du denkst es wäre so richtig. Aber jeder Browser behandelt HTML Fehler anders und "rät" wie es gemeint sein könnte.

Gruß Talwin

Basti

Ich hab es doch aber in verschiedenen getestet...

Naja egal, du hast ja schon recht, und ich weiss auch garnich was ich

jez noch schreiben soll^^

Talwin

Zumindest mal ein <html> könntest Du ja mal an den Anfang schreiben. Ist doch kaum Aufwand (5 Minuten) mal kurz die groben Sachen zu verbessern. Oder etwa doch? Warum nicht gleich richtig anfangen? Spätere Verbesserungen sind immer viel aufwändiger. Außerdem baust Du was neues ein und wunderst Dich dann vielleicht, warum es komisch angezeigt wird. Dabei kann es durchaus an den alten Fehlern liegen.

Gruß Talwin

Basti

Da war eigendlich ein <html>, aber irgendwie habe ich das aus versehen

gelöscht, warscheinlich weil das son doofes bearbeitungsfenster war^^

Naja, eine Sache stört mich an deinem Quelltext aber enorm,

die Page klebt jez links am Rand des Browsers, und die soll ja mittig

sein

Aber ansonsten is des gut...

Talwin

Ändere mal die Styledefinition für #seite:

Code

#seite {
        background-color: #006600;
        width: 1000px;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
}

Basti

wow supi klappt^^ danke^^

ich glaub ich benutz jez wieder webocton scriptly ...

maulepan

ja... und schon mal gleich 2 anmerungen für später.

- Besucherzähler weglassen
- keine farbverläufe zu weiß

kanufrosch

naja den zähler zumindest weiter runter und farblich anpassen
falls nicht geht <a class="postlink" href="http://www.andyhoppe.com/">http://www.andyhoppe.com/</a>

Jetzt mitmachen!