Inhalt

hume · 17. Juni 2010

Wie mache ich am besten den Inhalt, hab es schon mit DIV versucht, bin ich da schon richtig dran oder gibt es da noch eine andere Lösung?
Hab es mal mit DIV "linksoben" gemacht, folgendes Problem, es verschiebt sich alles. Das gleiche Problem wenn ich es nach der "Navigation" mache. Wie gehe ich da am besten vor?

Mein Code:

Index.html

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>
            BHKWPartner - das optimale BHKW von Ihrem Installateur!
          </title>
          <link href="./design.css" type="text/css" rel="stylesheet" />
      </head>
      <body>




          <div id="header">   
          </div>          

          <div id="linksoben">
          </div>



          <ul id="navigation">
            <li> <a href="index.html">Startseite</a> </li>       
            <li> <a href="simulation.html">Simulationsanfrage </a> </li>
            <li> <a href="planung.html">BHKW-Planung </a> </li> 
            <li> <a href="abrechnung.html">BHKW-Abrechnung </a> </li>
            <li> <a href="aktuelles.html">Aktuelles </a> </li> 
            <li> <a href="info.html">Info </a> </li> 
            <li> <a href="agb.html"> AGB </a> </li> 
            <li> <a href="impressum"> Impressum </a> </li> 
          </ul>

           <div id="linksunten">
           <p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px;padding-top:60%;padding-left:25%;"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="CSS ist valide!" />
    </a>
</p>
           </div>

          <div id="fusszeile">
          <p>&copy; Otto Huml W&auml;rme und Strom</p>
          </div>


      </body>





  </html>

Alles anzeigen

CSS Datei

Code

* { 
margin:0; 
padding:0; 
border:0; 
list-style:none; 
text-decoration:none; 
font-family: Arial, Helvetica, sans-serif; 
}




div#header {
background:url(images/header.gif);
visibility: visible;
height:110px;
padding-left: 100px;




}




  
div#linksoben {
background: #FFA500;
visibility: visible;
height:0px;
width:200px;




}




  
ul#navigation li {
margin: 0px;
width: 18%;

}
div#linksunten {
background:#FFA500;
visibility:visible;
height:140px;
width:184px;







}




ul#navigation li a {
display: block;
border: 1px outset #FFA500;
background: #616161;
padding: 10px;
color: #FFFFFF;
font-weight: bold;
border-style: outset;
}




ul#navigation li a:hover {
display: block;
border: 1px outset #FFA500;
background: #FFA500;
color: #FFFFFF;
border-style: outset;
}




div#fusszeile {




background: #FFA500;
height: 77px;
text-align: center;
line-height:2cm;
}

Alles anzeigen

Sarkkan · 17. Juni 2010

Wo soll den der Inhalt überhaupt hin?
Das ist mir gerade nicht ganz erkenntlich^^

Aber mal grundlegendes, was dir vielleicht helfen könnte:
Die Navigation am besten Floaten, oder aber den Inhalt mit einem margin-left:[Breite der Navigation] machen^^

PS: Geb der Navigation bitte einen Festen wert!
Hab es ausprobiert, 200px ist ein schöner Wert, da man kann alles lesen und es nicht all zu breit ist
weil von 800px sind 18% keine 160px.. da würde dann ein Teil abgeschnitten werden.. umgekehrt, wäre bei einem 1600x1200 Auflösung das ganze etwa 320px groß, was viel zu groß wäre!

lauras · 17. Juni 2010

Wobei auch eine Angabe in em nicht zu verdenken ist, sodass sich das ganze an der Schriftgröße orientiert..

hume · 17. Juni 2010

Zitat

Wo soll den der Inhalt überhaupt hin?
Das ist mir gerade nicht ganz erkenntlich^^

Den weißen Bereich rechts den du siehst

lauras · 17. Juni 2010

Dann musst du mit float arbeiten, um die divs nebeneinander zu kriegen.
Schau dir das hier mal an: http://thestyleworks.de/tut-art/layout_div_2.shtml

Weiterhin die Empfehlung, nur margin 0 und padding 0 in den Universalselektor reinzutun.. Den Rest bei html oder body.

hume · 17. Juni 2010

Zitat

Dann musst du mit float arbeiten, um die divs nebeneinander zu kriegen.
Schau dir das hier mal an: <a class="postlink" href="http://thestyleworks.de/tut-art/layout_div_2.shtml">http://thestyleworks.de/tut-art/layout_div_2.shtml</a>

Ok, aber ist dass normal dass das ganze Menü verschoben wird?

Hier mal mein Code:

Index.html

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>
            BHKWPartner - das optimale BHKW von Ihrem Installateur!
          </title>
          <link href="./design.css" type="text/css" rel="stylesheet" />
      </head>
      <body>




          <div id="header">   
          </div>          

          <div id="linksoben">
          </div>

          <div id="Inhalt">
         <p> <b> Jetzt 1.000 € Förderung für Mikro-BHKW(Bis 31.12.2010;Standortabhängig) </b> </p>
          </div>
          <div id="Inhalt2">
          <p> <b>Senden Sie uns Ihre Simulationsanfrage.</b>Schnell und einfach! Wir <b>erstellen</b> für Sie ein </p>
          </div>

          <ul id="navigation">
            <li> <a href="index.html">Startseite</a> </li>       
            <li> <a href="simulation.html">Simulationsanfrage </a> </li>
            <li> <a href="planung.html">BHKW-Planung </a> </li> 
            <li> <a href="abrechnung.html">BHKW-Abrechnung </a> </li>
            <li> <a href="aktuelles.html">Aktuelles </a> </li> 
            <li> <a href="info.html">Info </a> </li> 
            <li> <a href="agb.html"> AGB </a> </li> 
            <li> <a href="impressum"> Impressum </a> </li> 
          </ul>

           <div id="linksunten">
           <p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px;padding-top:60%;padding-left:25%;"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="CSS ist valide!" />
    </a>
</p>
           </div>

          <div id="fusszeile">
          <p>&copy; Otto Huml W&auml;rme und Strom</p>
          </div>


      </body>





  </html>

Alles anzeigen

CSS Datei

Code

* { 
margin:0; 
padding:0; 
border:0; 
list-style:none; 
text-decoration:none; 
font-family: Arial, Helvetica, sans-serif; 
}




div#header {
background:url(images/header.gif);
visibility: visible;
height:110px;
padding-left: 100px;




}




  
div#linksoben {
background: #FFA500;
visibility: visible;
height:0px;
width:200px;




}




div#Inhalt {
float:left;
color:black;
text-indent:9cm;
line-height:1cm;
}
div#Inhalt2 {
float:left;
color:black;
text-indent:5cm;
line-height:3cm;
font-size:12pt;
}

ul#navigation li {
margin: 0px;
width: 18%;

}
div#linksunten {
background:#FFA500;
visibility:visible;
height:113px;
width:184px;







}




ul#navigation li a {
display: block;
border: 1px outset #FFA500;
background: #616161;
padding: 10px;
color: #FFFFFF;
font-weight: bold;
border-style: outset;
}




ul#navigation li a:hover {
display: block;
border: 1px outset #FFA500;
background: #FFA500;
color: #FFFFFF;
border-style: outset;
}




div#fusszeile {




background: #FFA500;
height: 77px;
text-align: center;
line-height:2cm;
}

Alles anzeigen

Edit: Code nicht valide

lauras · 17. Juni 2010

Dann mach ihn valide und guck dann nochmal

Anonymous · 17. Juni 2010

Hier mal ein ganz einfaches Grundgerüst:

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>Testseite mit gefloateten Div's</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="css.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>




<body>
    <div id="head"></div>
    <div id="leftboard"></div>
    <div id="content">Inhalt</div>
    <div id="footer">
        <a href="http://validator.w3.org/check?uri=referer">(X)HTML</a>
        <a href="http://jigsaw.w3.org/css-validator/check/referer">Css</a>
    </div>
</body>
</html>

Alles anzeigen

Code

* {margin: 0; padding: 0;}




body {
width: 750px;
margin: 0 auto;
}




#head {
height: 150px;
background: #000;
}
#leftboard {
width: 150px;
height: 600px;
float: left; /* Navigation (#Leftboard) nach links rücken */
background: #ff0000;
}
#content {
width: 600px;
height: 600px;
float: left; /* Inhalt (#Content) nach links rücken */
background: #00ff11;
}
#footer {
width: 100%;
height: 30px;
clear: both; /* Wer floatet muss auch clearen */
background: #ddd;
}

Alles anzeigen

Anpassen musst ihn deinen Breiten/Höhen/Abständen etc... Aber oben hast ein valides HTML und Css Grundgerüst, was eigentlich bis auf IE3 überall gleich angezeigt werden sollte. Näheres hierzu müssen aber die Css Profis sagen, ich weiß es nicht genau.

hume · 18. Juni 2010

Zitat

Dann mach ihn valide und guck dann nochmal

Sorry, hab mich beim Edit verschieben, wollte eigentlich schreiben der Code war vorher nicht valide. Also beim Text verschiebt es mir dass Menü nach unten, kann man dass umgehen? Unter <a class="postlink" href="http://www.bhkwpartner.de/test">http://www.bhkwpartner.de/test</a> ist dass auch ersichtlich. Hab mal einen Screenshot gemacht.
[Blockierte Grafik: http://s1.directupload.net/images/user/100618/temp/uv5uo227.jpg]

Hier mal mein Code:

Index.html

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>
            BHKWPartner - das optimale BHKW von Ihrem Installateur!
          </title>
          <link href="./design.css" type="text/css" rel="stylesheet" />
      </head>
      <body>




          <div id="header">   
          </div>          

          <div id="linksoben">
          </div>

          <div id="Inhalt">
         <p> <b> Jetzt 1.000 € Förderung für Mikro-BHKW(Bis 31.12.2010;Standortabhängig) </b> </p>
          </div>
          <div id="Inhalt2">
          <p> <b>Senden Sie uns Ihre Simulationsanfrage.</b>Schnell und einfach! Wir <b>erstellen</b> für Sie <b>ein</b> <b>herstellerunabh&auml;ngiges</b> 
                    <br /> 
           <br /> <b>BHKW - Gutachten,</b> </p>
          </div>

          <ul id="navigation">
            <li> <a href="index.html">Startseite</a> </li>       
            <li> <a href="simulation.html">Simulationsanfrage </a> </li>
            <li> <a href="planung.html">BHKW-Planung </a> </li> 
            <li> <a href="abrechnung.html">BHKW-Abrechnung </a> </li>
            <li> <a href="aktuelles.html">Aktuelles </a> </li> 
            <li> <a href="info.html">Info </a> </li> 
            <li> <a href="agb.html"> AGB </a> </li> 
            <li> <a href="impressum"> Impressum </a> </li> 
          </ul>

           <div id="linksunten">
           <p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px;padding-top:60%;padding-left:25%;"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="CSS ist valide!" />
    </a>
</p>
           </div>

          <div id="fusszeile">
          <p>&copy; Otto Huml W&auml;rme und Strom</p>
          </div>


      </body>





  </html>

Alles anzeigen

CSS Datei

Code

* { 
margin:0; 
padding:0; 
border:0; 
list-style:none; 
text-decoration:none; 
font-family: Arial, Helvetica, sans-serif; 
}




div#header {
background:url(images/header.gif);
visibility: visible;
height:110px;
padding-left: 100px;




}




  
div#linksoben {
background: #FFA500;
visibility: visible;
height:0px;
width:200px;




}




div#Inhalt {
float:left;
color:black;
text-indent:9cm;
line-height:1cm;
}
div#Inhalt2 {
float:left;
color:black;
text-indent:5cm;
line-height:3cm;
font-size:12pt;
}

ul#navigation li {
margin: 0px;
width: 18%;

}
div#linksunten {
background:#FFA500;
visibility:visible;
height:113px;
width:184px;







}




ul#navigation li a {
display: block;
border: 1px outset #FFA500;
background: #616161;
padding: 10px;
color: #FFFFFF;
font-weight: bold;
border-style: outset;
}




ul#navigation li a:hover {
display: block;
border: 1px outset #FFA500;
background: #FFA500;
color: #FFFFFF;
border-style: outset;
}




div#fusszeile {




background: #FFA500;
height: 77px;
text-align: center;
line-height:2cm;
}

Alles anzeigen

PS: Ist der Aufbau eigentlich richtig? Oder hab ich da was falsch gemacht?

Sarkkan · 18. Juni 2010

Dann benutze Float: bei einigen Objekten, dass haben wir dir aber auch schon mal gesagt

hume · 18. Juni 2010

Code

Dann benutze Float: bei einigen Objekten, dass haben wir dir aber auch schon mal gesagt

Ja ich weiß, aber irgendwie komme ich mit dem "float" nicht ganz klar. Es werden trotzdem auch die Objekte von mir verschoben.

Zitat

clear: both; /* Wer floatet muss auch clearen */

Denn Begriff clear, was hat der eigentlich für einen Sinn?? Hab schon mal unter Google gesucht, aber nichts genaueres beschriebenes gefunden.

Sarkkan · 18. Juni 2010

Gib dem Header und der Naiv einfach ein Float: left;
Dann legt sich die Navi nicht vor den Header und alles andere sollte Rechts von der Navigation erscheinen.

Clear benutze ich eigentlich nie.. da komme ich auch ohne super zurecht

hume · 18. Juni 2010

Naja, sieht nicht gerade viel versprechend aus...
[Blockierte Grafik: http://s3.directupload.net/images/user/100618/temp/7zy48haj.jpg]

Sören · 18. Juni 2010

Du hast den Inhalt auch nach links gefloatet:

Code

div#Inhalt {
float:left;
[...]
}
div#Inhalt2 {
float:left;
[...]
}

lauras · 18. Juni 2010

Zitat von "Sarkkan"

Clear benutze ich eigentlich nie.. da komme ich auch ohne super zurecht

Dann mach mal ein komplexes Layout ohne zu clearen.. Man sollte sich immer das angewöhnen, was richtig ist, auch wenn es vielleicht in dem Moment unnötig ist.. Vor allem bitte nicht anderen Leuten nicht beibringen, nur weil man es selbst nicht macht -.-

Anonymous · 18. Juni 2010

Ich hab doch oben geschrieben wer floatet muss auch clearen

<a class="postlink" href="http://www.css4you.de/float.html/">http://www.css4you.de/float.html/</a>

<a class="postlink" href="http://www.css4you.de/clear.html/">http://www.css4you.de/clear.html/</a>

Hab dir doch oben ein Beispiel gepostet, ich empfehle dir dringend:

LERN GRUNDLAGEN:

<a class="postlink" href="http://www.html-seminar.de/design_per_css_-_float.htm/">http://www.html-seminar.de/design_per_css_-_float.htm/</a>

<a class="postlink" href="http://jendryschik.de/wsdev/einfuehrung/">http://jendryschik.de/wsdev/einfuehrung/</a>

hume · 22. Juni 2010

Zitat

Ich hab doch oben geschrieben wer floatet muss auch clearen

Ok, bei manchen Antworten kennt man sich am Schluss dann nicht mehr aus, erst clearen, dann wieder nicht

Zitat

Hab dir doch oben ein Beispiel gepostet, ich empfehle dir dringend:

LERN GRUNDLAGEN:

Ok, ich werde sie durchnehmen Was mir aufgefallen ist, clearen ist aber hier nicht aufgezeigt. <a class="postlink" href="http://www.html-seminar.de/design_per_css_-_float.htm">http://www.html-seminar.de/design_per_css_-_float.htm</a>

Sören · 22. Juni 2010

Doch, auf der Seite "Fusszeile integrieren" ist kurz erwähnt, dass man die Fusszeile durch "clear: both;" abgrenzen muss. (http://www.html-seminar.de/css…fusszeile-integrieren.htm)

hume · 22. Juni 2010

Zitat

Doch, auf der Seite "Fusszeile integrieren" ist kurz erwähnt, dass man die Fusszeile durch "clear: both;" abgrenzen muss. (<a class="postlink" href="http://www.html-seminar.de/css-design-fusszeile-integrieren.htm">http://www.html-seminar.de/css-design-f ... rieren.htm</a>)

Stimmt, hab ich wahrscheinlich übersehen :wink:

Jetzt bin ich schon weiter gekommen, aber ich hab noch ein kleines Problem und zwar die Navigation will nicht ganz richtig. Möchte dass die Navigation mit dem Header aufschließt, weiteres Problem obwohl ich einen erzwungenen Umbruch gemacht habe, geht dieser Text links weiter "BHKW - Gutachten,", warum? Hier nochmal die Url: <a class="postlink" href="http://www.bhkwpartner.de/test">http://www.bhkwpartner.de/test</a>

Mein Code:

index.html:

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>
            BHKWPartner - das optimale BHKW von Ihrem Installateur!
          </title>
          <link href="./design.css" type="text/css" rel="stylesheet" />
      </head>
      <body>




          <div id="header">   
          </div>          

          <div id="Inhalt">
         <p> <b> Jetzt 1.000 € Förderung für Mikro-BHKW(Bis 31.12.2010;Standortabhängig) </b> </p>
          </div>
          <div id="Inhalt2">
          <p> <b>Senden Sie uns Ihre Simulationsanfrage. </b>Schnell und einfach! Wir <b>erstellen</b> für Sie <b>ein</b> <b>herstellerunabh&auml;ngiges</b> <br /> 
          <b>BHKW - Gutachten,</b> </p>
          </div>

          <ul id="navigation">
            <li> <a href="index.html">Startseite</a> </li>       
            <li> <a href="simulation.html">Simulationsanfrage </a> </li>
            <li> <a href="planung.html">BHKW-Planung </a> </li> 
            <li> <a href="abrechnung.html">BHKW-Abrechnung </a> </li>
            <li> <a href="aktuelles.html">Aktuelles </a> </li> 
            <li> <a href="info.html">Info </a> </li> 
            <li> <a href="agb.html"> AGB </a> </li> 
            <li> <a href="impressum"> Impressum </a> </li> 
          </ul>

           <div id="linksunten">
           <p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px;padding-top:60%;padding-left:25%;"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="CSS ist valide!" />
    </a>
</p>
           </div>

          <div id="fusszeile">
          <p>&copy; Otto Huml W&auml;rme und Strom</p>
          </div>


      </body>





  </html>

Alles anzeigen

CSS Datei:

Code

* { 
margin:0; 
padding:0; 
border:0; 
list-style:none; 
text-decoration:none; 
font-family: Arial, Helvetica, sans-serif; 
}




div#header {
background:url(images/header.gif);
visibility: visible;
height:110px;
padding-left: 100px;
background-repeat:no-repeat;




}







div#Inhalt {
color:black;
text-indent:9cm;




}
div#Inhalt2 {
color:black;
text-indent:5cm;
font-size:12pt;
line-height:1cm;
}

ul#navigation li {
margin: 0px;
width: 18%;










        
}
div#linksunten {
background:#FFA500;
visibility:visible;
height:113px;
width:181px;
float:left;
clear:both;










}




ul#navigation li a {
display: block;
border: 1px outset #FFA500;
background: #616161;
padding: 10px;
color: #FFFFFF;
font-weight: bold;
border-style: outset;
}




ul#navigation li a:hover {
display: block;
border: 1px outset #FFA500;
background: #FFA500;
color: #FFFFFF;
border-style: outset;
}




div#fusszeile {




background: #FFA500;
height: 100px;
text-align: center;
line-height:2cm;
margin-top:3cm;
clear:both;




}

Alles anzeigen

PS: Bitte um kurze Schilderung ob meine Vorgehensweise richtig oder falsch ist, ich mach nämlich auch Fehler....

Sören · 22. Juni 2010

Jetzt hast du ja gar kein float mehr benutzt.

Code

[...]
#inhalt {
float:right;
[...]
}
#inhalt2 {
float:right;
[...]
}
#navigation {
float:left;
}
[...]

Alles anzeigen

Inhalt

Jetzt mitmachen!

Teilen