Anzeige

Ein div Element wir nicht angezeigt

Ein div Element wir nicht angezeigt | PSD-Tutorials.de

Erstellt von TS7, 06.11.2008.

  1. TS7

    TS7 Noch nicht viel geschrieben

    Dabei seit:
    22.07.2007
    Beiträge:
    35
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    PS, DW,AF Photo
    Ein div Element wir nicht angezeigt
    Hallo,
    Ich hoffe jemand ist bereit mir zu helfen.

    Der "<div id "content"></div>" wird leider nicht angezeigt.

    Normalerweise sollte es zwischen "unterer_content_1" und "unterer_content_2", die Hintergrundfarbe #ffffff ausfüllen.

    Dannach wollte ich noch ein div erstellen was oben und unten über "unterer_content_1" und "unterer_content_2" gehen soll, wo dan die navi und content rein kommt.

    Hier die Website

    Der HTML-code
    HTML:
    1.  
    2. <div id="header_1"></div>
    3. <div id="page">
    4.   <div id="header">
    5.     <div id="oben_top_2"></div>
    6.             <div id="oben_top_3"></div>
    7.             <div id="oben_top_3_1">
    8.                 <a href="#" target="_blank"></a>
    9.             </div>
    10.             <div id="oben_top_3_2"></div>
    11.             <div id="oben_top_4"></div>
    12.             <div id="oben_top_5"></div>
    13.             <div id="oben_top_5_1">
    14.                 <a class="HOME" href="#" target="_blank"></a>
    15.             </div>
    16.             <div id="oben_top_5_2"></div>
    17.             <div id="oben_top_5_3">
    18.                 <a class="NEWS" href="#" target="_blank"></a>
    19.             </div>
    20.             <div id="oben_top_5_4"></div>
    21.             <div id="oben_top_5_5"></div>
    22.             <div id="oben_top_5_6"></div>
    23.             <div id="oben_top_5_7">
    24.                 <a class="FAQ" href="#" target="_blank"></a>
    25.                </div>
    26.             <div id="oben_top_5_8"></div>
    27.             <div id="oben_top_6"></div>
    28.             <div id="oben_top_6_1"></div>
    29.             <div id="oben_top_6_2"></div>
    30.                 <form name="Inhalt" action="">
    31.                   .........
    32.                 </form>
    33.     <div id="oben_top_6_4"></div>
    34.     </div>
    35.  
    36. -----Anfang-----
    37.  
    38.   <div id="unterer_content1"></div>
    39. <div id="content"></div>
    40. </div>
    41. <div id="unten">
    42.     <div id="schatten">
    43.         <div id="unterer_content2"></div>
    44.  
    45. -----Ende------
    46.  
    47.     </div>
    48.     <div id="footer"></div>
    49. </div>
    50.  
    Die erste CSS:
    Code (Text):
    1.  
    2. #page
    3. {
    4.     top: 64px;
    5.     background-image: url(../pic/schatten/schatten.png);
    6.     background-repeat: repeat-y;
    7.     position: relative;
    8.     left: 45px;
    9.     width: 912px;
    10.     min-height: 100%;
    11.     height:auto !important;/* moderne Browser */
    12.     margin-bottom: 64px;
    13. }
    14.  
    15. * html #page /* Für IE */
    16. {
    17.     height: 100%;
    18. }
    19.  
    20. #unterer_content1
    21. {
    22.     position:absolute;
    23.     left:19px;
    24.     top:241px;
    25.     width:874px;
    26.     height:89px;
    27.     background-repeat: repeat-x;
    28.     background-image: url(../pic/background/background_oben.jpg);
    29.     z-index: 1;
    30. }
    31.  
    32. #content
    33. {
    34.     position: relative;
    35.     left: 19px;
    36.     width: 874px;
    37.     background-color: ffffff;
    38.     top: 324px;
    39. }
    40.  
    Die zweite CSS
    Code (Text):
    1.  
    2. #unten
    3. {
    4.     position:relative;
    5.     left:45px;
    6.     width:912px;
    7.     height:128px;
    8. }
    9.  
    10. #schatten
    11. {
    12.     background-image: url(../pic/schatten/schatten.png);
    13.     background-repeat: repeat-y;
    14. }
    15.  
    16. #unterer_content2
    17. {
    18.     position:relative;
    19.     left:19px;
    20.     width:874px;
    21.     height:58px;
    22.     background-repeat: repeat-x;
    23.     background-image: url(../pic/background/background_unten.png);
    24.     bottom: 0px;
    25. }
    26.  
    27. #footer
    28. {
    29.     bottom: 0px;
    30.     background-image: url(../pic/footer/unten_ende.png);
    31.     height: 70px;
    32.     width: 912px;
    33.     position: relative;
    34.     left: 0px;
    35. }
    36.  
    Freue mich über jede hilfe :)
     
    #1      
  2. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Ein div Element wir nicht angezeigt
    AW: Ein div Element wir nicht angezeigt

    Der Container hat keine Höhe... spontan würde ich sagen es liegt daran...
     
    #2      
  3. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Ein div Element wir nicht angezeigt
    AW: Ein div Element wir nicht angezeigt

    Der content ist leer ... und wie schon richtig gesagt
    wurde hat er keine Höhe.
    Er nimmt er den Platz den er benötigt ... keinen.

    Sicher das der Aufbau (die Struktur) so optimal sind ...
    kann man eventuell mal nen screenshot sehen bzw.
    nen Verweis auf die Seite?

    Weil wenn ich das ganze "position" sehe, vor allem
    mit "absolute" denk ich mir schon wieder meinen Teil. ^_^
     
    #3      
  4. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Ein div Element wir nicht angezeigt
    AW: Ein div Element wir nicht angezeigt

    Der Link steht doch im ersten Post...

    Und ja optimal ist das so nicht... Opera und IE6 machen Probleme bei der Darstllung... FF2 sieht gut aus, bis auf den fehlenden Contenhintergrund...
     
    #4      
  5. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Ein div Element wir nicht angezeigt
    AW: Ein div Element wir nicht angezeigt

    oh ... das hab ich übersehen

    Was die Darstellung angeht, das ist auch im FF nicht optimal.
    Und wenn ich mir die Seite so anseh sehe ich auch eigentlich keine
    Grund für eine absolute Positionierung.
     
    #5      
  6. TS7

    TS7 Noch nicht viel geschrieben

    Dabei seit:
    22.07.2007
    Beiträge:
    35
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    PS, DW,AF Photo
    Ein div Element wir nicht angezeigt
    AW: Ein div Element wir nicht angezeigt

    ich habe jetzt dem content eine höhe von 100% gegeben, leider schiesst er über den footer hinaus.
    Wie kann ich das machen das er nur bis zum footer geht.

    Link steht im ersten Post.

    P.s. Wie kann ich am bessten die Website mit css umsetzen, versuche das zum ersten mal.
     
    #6      
  7. vanilladragon

    vanilladragon Pixelmonster

    2
    Dabei seit:
    11.12.2007
    Beiträge:
    745
    Geschlecht:
    weiblich
    Software:
    Photoshop, Illustrator, Flash, InDesign, Premiere Pro
    Kameratyp:
    Canon EOS 60D
    Ein div Element wir nicht angezeigt
    AW: Ein div Element wir nicht angezeigt

    Am besten dir CSS mal aneignen bzw. dir die Infos mal raussuchen was CSS kann, wofür es da ist und warum es dir nützt :)

    Da gibts n Thema was jetzt auch neu ist. Hieß glaub ich "CSS und xHTML lernen". Musste da mal rein schaun ;)

    vanilla
     
    #7      
  8. dage

    dage Noch nicht viel geschrieben

    Dabei seit:
    10.04.2008
    Beiträge:
    21
    Geschlecht:
    männlich
    Ein div Element wir nicht angezeigt
    AW: Ein div Element wir nicht angezeigt

    Ich bin zwar auch kein Profi aber das sieht mir schon nach etwas vielen div Bereichen aus^^ Mir erschließt sich der Grund für die vielen Bereiche auch nicht darum geb ich dir mal nur den Vorschlag für den content/footer.
    Ich nehme mal stark an, dass der content später noch gefüllt wird darum ist eine Höhenangabe eigentlich unnötig. Bei dem footer würde ich die ganzen Positonssachen rausnehmen und dann sollte der sich unter dem content in den normalen Textfluss setzen.
    ...hab grad gesehen das du ja so ziemlich alles positioniert hast dann weiß ich nicht ob mein Vorschlag funktioniert. Freunde dich mal mit dem Positionierung "static" an ;)
     
    Zuletzt bearbeitet: 06.11.2008
    #8      
  9. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Ein div Element wir nicht angezeigt
    Ich würde erstmal den groben Aufbau umstellen

    HTML:
    1.  
    2.  <div id="page">
    3.   <div id="header">
    4.    dein Header Inhalt
    5.   </div>
    6.   <div id="center">
    7.    <div id="left">
    8.     linker inhalt
    9.    </div>
    10.    <div id="middle">
    11.     der eigentlich Inhalt
    12.    </div>
    13.    <div id="right">
    14.     wenn es rechts noch eine Spalte geben soll.
    15.    </div>
    16.   <span class="clearspan">&nbsp;</span>
    17.   </div>
    18.   <div id="footer">
    19.     Dein Fuß
    20.   </div>
    21.  </div>
    22. </body>
    23.  
    HTML:
    1.  
    2.  body, html {
    3.   margin: 0;
    4.   padding: 0;
    5.  }
    6. body {
    7.  text-align:center;
    8. }
    9. #page {
    10.  width: 912px;
    11. }
    12. #header {
    13.   /* box für alles was den Kopf angeht
    14.   als Hintergrundbild kannst du hier z.B.
    15.   den ganzen Bereich des Kopfes nehmen,
    16.   einzig eben die wolekn weglassen*/
    17.   width: 100%;
    18.   height: 420px;
    19. }
    20. #center {
    21.  /* hier kann z.B. das hintergrundbild für die seitlichen schatten hin*/
    22. }
    23. #left {
    24.  /* breite etc. des linken Bereichs wenn benötigt*/
    25. float:left;
    26. width: 180px;
    27. }
    28. #middle {
    29. float:left;
    30. width: 550px; /* 912 - 2x 180 (für die seiten)
    31. }
    32. #right {
    33.  /* breite etc. des rechten Bereichs wenn benötigt*/
    34. float:left;
    35. width: 180px;
    36. }
    37. .clearspan {
    38.  display: block;
    39.  width: 100%;
    40.  height: 1px; /* kann man auch vergrößern um den abstand zum footer zu vergrößern */
    41.  clear:both; /*stellt den normalen Dokumentenfluß wieder her , sorgt unter anderem dafür das
    42. die umrandende Box auch bis zum ende geht*/
    43. }
    44. #footer {
    45.  /* die css infos für den footer */
    46. }
    47.  
    Mit dem aufbau und eben den anpassungen an dein layout ...
    bekommst du deine seite zentriert, mit 5 wichtigen Bereichen
    (kopf, links, mitte{eigentlicher inhalt}, rechts und fuß}.

    Dabei hast du grundästzlich eigentlich genug ebenen um
    Schatten etc. zu verwirklichen. Das ganze funktioniert ohne
    absolute positionierung (würde sicher auch für die Kopf Elemente
    machbar sein).

    Wie du deinen Footer vernünftig positionierst kann du z.B.
    auf CSS sticky Footer - jack prince / jackprince ~ Blog
    nachsehen. Damit hast du auch bei kurzem Inhalt am unteren Ende
    den Footer.

    Noch einen Tipp ... ich würde darauf acht geben das du
    für Bilder auch Ersatz Elemente hast. Und so oft es geht
    statt png gif zu nutzen.

    Ersteres ist gut für Google (also auch für dich) sowie
    Nutzer die z.B. mal über das Handy auf deine Seite schauen

    machbar z.B. nach folgendem Prinzip

    HTML:
    1.  
    2. <div id="footer">
    3.  <div class="print">
    4.   <span class="left">
    5.     Copyright by
    6.    <a href="deine adresse">deine adresse</a>
    7.   </span>
    8.   <span class="right">
    9.    <a href="kontakt.php">Kontakt</a>
    10.    |
    11.    <a href="impressum.php">Impressum</a>
    12.   </span>
    13. </div>
    14. </div>
    15.  
    Dem footer gibst du dein hintergrundbild wie gewohnt
    im css fügst du dann einfach noch folgendes hinzu.

    HTML:
    1.  
    2. .print {
    3.  display: none;
    4. }
    5.  
    Solltest du ein CSS auch für Druckansicht etc. erstellen,
    kannst du alle Elemente die nur in der normalen Browseransicht
    zu sehen sind(bzw. ein hintergrundbild haben) z.B. mit
    der Klasse "screen" erweitern.

    Diese Klasse blendest du dann im CSS für Drucker, Handy, etc.
    einfach aus bzw. entfernst das Hintergrundbild.

    Durch derartige Arbeit optimierst du die Barrierefreiheit (und
    die Seite wird kompatibler) und steigerst die Benutzerfreundlichkeit.

    Der zweite obige Punt (gif statt png) resultiert aus daraus das
    der IE leider bis ink. IE6 arge Probleme mit PNGs hat.

    ********

    das wars erstmal soweit

    um nicht zu verwirren ... diese angabe bruach im css nicht gemacht werden,
    sie ist obsolet da sie Standard ist.

    In meinem obigen Post ist zu erkennen wie schön strukturiert sich das mit
    "float" basiertem Layout umsetzen lässt.
     
    Zuletzt von einem Moderator bearbeitet: 06.11.2008
    #9      
  10. TS7

    TS7 Noch nicht viel geschrieben

    Dabei seit:
    22.07.2007
    Beiträge:
    35
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    PS, DW,AF Photo
    Ein div Element wir nicht angezeigt
    AW: Ein div Element wir nicht angezeigt

    Vielen Lieben Dank an alle.
    besonderen Dank an jackprince für deine Beispiele, dann fange ich bald mal damit an.

    Eine frage habe ich dennoch.
    Wie meinst du das mit dem Header und den Wolken, wie ich das am bessten mit css realisiere? Wolken Aussparungen (transparent) im Header, oder wie meinst du das?
     
    #10      
  11. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Ein div Element wir nicht angezeigt
    AW: Ein div Element wir nicht angezeigt

    das du im ps oder wo auch immer du das layout gesetzt hast
    den kopf ohne wolken abspeicherst. Das ganze für den Kopf
    als Hintergrund nimmst und im header selbst dann die Wolken
    welche funktionen haben als extra gifs/pngs abspeicherst bzw.
    positionierst.

    Überlege einfach welche der Wolken nur layout sind und
    keine funktion haben/interaktion bieten, diese kannst
    eventl. im Hintergrund belassen, die anderen einfach als
    extra bilder speichern.

    Versuch dich erst einmal am groben aufbau, wenn der steht
    kann man dann sich um das obere Menü kümmern.
     
    #11      
  12. TS7

    TS7 Noch nicht viel geschrieben

    Dabei seit:
    22.07.2007
    Beiträge:
    35
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    PS, DW,AF Photo
    Ein div Element wir nicht angezeigt
    AW: Ein div Element wir nicht angezeigt

    Gut Danke nochmal
     
    #12      
x
×
×
teststefan