Anzeige

CSS Problem(e)

CSS Problem(e) | PSD-Tutorials.de

Erstellt von aka_Robin, 06.04.2010.

  1. aka_Robin

    aka_Robin Noch nicht viel geschrieben

    Dabei seit:
    29.03.2010
    Beiträge:
    16
    Geschlecht:
    männlich
    Software:
    Adobe Creative Suite 5.5 Design Premium
    Kameratyp:
    Nikon D3100
    CSS Problem(e)
    Hallo,

    gleichmal vorweg, das mein erster Post in diesem Forum. Zudem bin ich Anfänger in Sachen HTML und CSS, verwende Dreamweaver.

    Ich bin gerade dabei einen "simplen" Seitenaufbau zu gestalten, allerdings bekomme ich die verschiedenen Div Container nicht an den Ort an dem ich sie gerne hätte.

    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    4. <title>Layout</title>
    5. <link href="layout.css" rel="stylesheet" type="text/css" />
    6. </head>
    7.  
    8. <div id="wrapper">
    9.   <div id="header">
    10.     <h1>&nbsp;</h1>
    11.   </div>
    12.   <div id="navigation">
    13.     <ul>
    14.       <li><a href="1">Link One</a></li>
    15.       <li><a href="2">Link Two</a></li>
    16.       <li><a href="3">Link Three</a></li>
    17.     </ul>
    18. </div>
    19.   <div id="thumbnails">
    20.     <p>Raum für den Inhalt von  id "thumbnails</p></div>
    21.   <div id="viewer">Raum für den Inhalt von  id "viewer"</div>
    22. </div>
    23. </body>
    24. </html>
    HTML:
    1. @charset "UTF-8";
    2. body {
    3.     margin: 0px;
    4.     padding: 0px;
    5.     font-family: Arial, Helvetica, sans-serif;
    6.     font-size: 0.8em;
    7.     background-color: #FFF;
    8. }
    9. #wrapper {
    10.     padding: 0px;
    11.     width: 100%;
    12.     background-color: #FFF;
    13.     margin-top: 0px;
    14.     margin-right: auto;
    15.     margin-bottom: 0px;
    16.     margin-left: auto;
    17. }
    18. #wrapper #header {
    19.     background-image: url(images/Header.jpg);
    20.     background-repeat: repeat;
    21.     height: 80px;
    22.     margin: 0px;
    23.     padding: 0px;
    24. }
    25. #wrapper #header h1 {
    26.     background-repeat: no-repeat;
    27.     height: 100%;
    28.     width: 100%;
    29.     padding: 0px;
    30. }
    31. #wrapper #navigation {
    32.     width: 20%;
    33.     padding: 0px;
    34.     float: left;
    35.     background-color: #CCC;
    36. }
    37. #wrapper #thumbnails {
    38.     background-color: #0FF;
    39.     padding: 0px;
    40.     margin-left: 20px;
    41.     height: auto;
    42.     width: 30%;
    43. }
    44. #wrapper #viewer {
    45.     background-color: #CCC;
    46.     padding: 0px;
    47.     margin-left: 50%;
    48.     height: auto;
    49.     width: 50%;
    50. }
    51.  
     
    #1      
  2. mephista

    mephista Pixelschubserin

    Dabei seit:
    29.07.2008
    Beiträge:
    166
    Geschlecht:
    weiblich
    Ort:
    Österreich
    Software:
    CS4
    Kameratyp:
    SRL Olympus
    CSS Problem(e)
    AW: CSS Problem(e)

    Hallo...

    versuche mal bei deinen inneren Div-Containern (nicht der Wrapper), auf float left zu stellen.... Im CSS unter Box!
    Dann sollte es eigentlich gehen...
    Sind deine Container auch korrekt berechnet?
    Wenn nur ein pixel zu viel, dann verschiebt sich alles!
    Wenn du Padding einstellt, musst du es zusätzlich von Höhe und Breite abziehen!
    Gruß Mephista
     
    #2      
  3. aka_Robin

    aka_Robin Noch nicht viel geschrieben

    Dabei seit:
    29.03.2010
    Beiträge:
    16
    Geschlecht:
    männlich
    Software:
    Adobe Creative Suite 5.5 Design Premium
    Kameratyp:
    Nikon D3100
    CSS Problem(e)
    AW: CSS Problem(e)

    Vielen Dank ich komme dem ganzen näher.
    Allerdings arbeite ich in Prozent und nicht in px. Leider passt auch der Header nicht, abstand oben, warum auch immer. Hintergrundbilder wollen sich im Firefox auch nicht so darstellen.
    Aber wie gesagt ich komme Schritt für Schritt zum Ziel.
     
    #3      
  4. aliasltb

    aliasltb LTB

    Dabei seit:
    23.03.2009
    Beiträge:
    189
    Geschlecht:
    männlich
    Software:
    Eclipse, Photoshop, Indesign, Illustrator, Flash, Flash Builder
    Kameratyp:
    HTC Desire HD
    CSS Problem(e)
    AW: CSS Problem(e)

    Nur so als Tipp:
    Du musst bei jeder ID, die sich innerhalb der Wrapper-ID befindet im Stylesheet nicht immer #wrapper davor schreiben.
    Das heißt anstelle von #wrapper #header reicht auch #header allein aus.


    EDIT:
    Und wie ich das daraus erkenne verwendest du gar keine Positionierungen oder?
    Ich sehe nämlich nirgends position:absolute, position:relative etc.

    Versuche mal deine IDs damit zu erweitern, dann müsste es eigentlich funktionieren.
     
    Zuletzt bearbeitet: 06.04.2010
    #4      
  5. Gackoo_duz

    Gackoo_duz Gackoo

    Dabei seit:
    03.09.2008
    Beiträge:
    285
    Geschlecht:
    männlich
    Software:
    CS6 Masterkollection, C4d, u.a
    Kameratyp:
    Nikon D5000, D90
    CSS Problem(e)
    AW: CSS Problem(e)

    leider bschreibst du nicht wie du es gerne hättest! (screenshot)
     
    #5      
  6. CSS Problem(e)
    AW: CSS Problem(e)

    Du arbeitest im CSS überall mit"%", bei #thumbnails steht dort aber auf einmal
    HTML:
    1.  
    2. margin-left: 20px;
    ?
    Ist mir nur so aufgefallen, ergänzend zu den Sachen, die von den Vorschreibern schon aufgezählt wurden.
     
    #6      
  7. KCX

    KCX Pixelterrorist

    Dabei seit:
    08.03.2010
    Beiträge:
    12
    Geschlecht:
    männlich
    Software:
    Adobe, Aptana & Typo3
    CSS Problem(e)
    AW: CSS Problem(e)

    Außerdem hat mephista vergessen dir zu schreiben, dass wenn du ein "Float" setzt, du auch z.B. "clear:both;" an entsprechender Stelle setzen musst ;)

    Falls dir diese Dinge noch nichts sagen, dann rate ich dir, lerne es aus einem Buch oder einer qualifizierten Seite und vor allem nicht mit dem Dreamweaver ;)
    Schreib es selbst mir nem Editor und du hast HTML und CSS in 1-3 Monaten halbwegs gut drauf!

    Bevor du es falsch lernst weil du irgendwo halbe oder gar falsche Infos ohne das hintergrundwissen beziehst.
     
    #7      
  8. aka_Robin

    aka_Robin Noch nicht viel geschrieben

    Dabei seit:
    29.03.2010
    Beiträge:
    16
    Geschlecht:
    männlich
    Software:
    Adobe Creative Suite 5.5 Design Premium
    Kameratyp:
    Nikon D3100
    CSS Problem(e)
    AW: CSS Problem(e)

    Vielen Dank für eure Hilfe. Tatsächlich habe ich vergessen wie es aussehen soll.
    Derzeit habe ich das Problem das ich nach links scrollen muss um den Viewer zu sehen (Firefox)

    Header: feste position 100% des Bildschirms, 80px hoch
    Naviagtion: 20% (200px) hight 100%
    Thumbs: 30% (300px) soll sich flexibel den thumbs anpassen
    Viewer: 50% hier wird ein image aus den thumbs angezeigt

    Wird schon ;-)

    HTML:
    1. @charset "UTF-8";
    2. body {
    3.     margin: 0px;
    4.     padding: 0px;
    5.     font-family: Arial, Helvetica, sans-serif;
    6.     font-size: 0.8em;
    7.     background-color: #FFF;
    8. }
    9. #wrapper {
    10.     padding: 0px;
    11.     width: 100%;
    12.     background-color: #FFF;
    13.     margin-top: 0px;
    14.     margin-right: auto;
    15.     margin-bottom: 0px;
    16.     margin-left: auto;
    17. }
    18. #wrapper #header {
    19.     background-color: #CCC;
    20.     left: 0px;
    21.     top: 0px;
    22.     height: 80px;
    23.     width: 100%;
    24.     position: fixed;
    25. }
    26. #wrapper #navigation {
    27.     width: 200px;
    28.     padding: 0px;
    29.     background-color: #CCC;
    30.     height: 100%;
    31.     float: left;
    32.     left: 0px;
    33.     margin: 0px;
    34.     position: absolute;
    35.     top: 80px;
    36. }
    37. #wrapper #thumbnails {
    38.     background-color: #0FF;
    39.     padding: 0px;
    40.     height: 100%;
    41.     width: 300px;
    42.     margin-left: 200px;
    43.     position: absolute;
    44.     top: 80px;
    45. }
    46. #wrapper #viewer {
    47.     background-color: #FF0;
    48.     padding: 0px;
    49.     height: 100%;
    50.     width: 100%;
    51.     margin-left: 500px;
    52.     position: absolute;
    53.     top: 80px;
    54. }
    55.  
     
    Zuletzt bearbeitet: 07.04.2010
    #8      
  9. aliasltb

    aliasltb LTB

    Dabei seit:
    23.03.2009
    Beiträge:
    189
    Geschlecht:
    männlich
    Software:
    Eclipse, Photoshop, Indesign, Illustrator, Flash, Flash Builder
    Kameratyp:
    HTC Desire HD
    CSS Problem(e)
    AW: CSS Problem(e)

    Mach doch mal die unnötigen #wrapper weg. :eek:

    Ich vermute mal, dass deine Seite so in etwa aussehen soll:

    ____________________________________
    1
    ____________________________________
    | | | |
    | 2 | 3 | 4 |
    | | | |
    | | | |
    | | | |
    | | | |


    1 - Header | 2 - Navigation | 3 - Thumbnails | 4 - Viewer


    Was ich mich zudem frage: Wieso hast du bei der Navi einen float gesetzt?



    Das du nach links scrollen musst liegt daran, dass du dem Wrapper eine Breite von 100% gegeben hast, also die Breite des Bildschirms.
    Die Navi und die Thumbnails haben zwar zusammen eine Breite von 500 Pixel und den Viewer hast du auch mit margin-left: 500px nach rechts verschoben, allerdings hat der Viewer auch eine Breite von 100%. Also erbt der Viewer die Breite von dem Wrapper (100%) und in diesem Fall sind ja die 100% die Breite des gesamten Bildschirms. Also werden zusätzlich an die 500 Pixel der Navi und der Thumbnails nochmal die volle Bildschirmbreite angefügt. Deshalb musst du scrollen.
     
    #9      
  10. aka_Robin

    aka_Robin Noch nicht viel geschrieben

    Dabei seit:
    29.03.2010
    Beiträge:
    16
    Geschlecht:
    männlich
    Software:
    Adobe Creative Suite 5.5 Design Premium
    Kameratyp:
    Nikon D3100
    CSS Problem(e)
    AW: CSS Problem(e)

    Nochmlas vielen Dank für eure Hilfe, jetzt passt alles, zumindest fast!

    Ich hätte gerne eine Art PopupFenster, das wenn z.B etwas gedruckt wird sich unter dem Header hervorschiebt. Ich hoffe man kann sich darunter etwas vorstellen. Lightboxen und normale Popups bringen mich da glaube nicht weiter?!?

    Grüße
    Robin
     
    Zuletzt bearbeitet: 09.04.2010
    #10      
  11. hubspe

    hubspe display:schwarzgelb;

    Dabei seit:
    09.08.2007
    Beiträge:
    209
    Geschlecht:
    männlich
    Ort:
    Passau
    Software:
    PS CS5
    Kameratyp:
    Linhof Technika 4
    CSS Problem(e)
    AW: CSS Problem(e)

    alles mit position:absolute in den Viewport zu nageln zeitigt vielleicht auf einem bestimmten Bildschirm das gewünschte Ergebnis ist aber im Grunde ein typischer Anfängerfehler.

    Dadurch wird das Layout ungefähr so flexibel wie eine Eisenbahnschiene. ;)

    Floats sind für solchen Layouts deutlich besser geeignet, auch wenn sie etwas schwerer zu verstehen sind.
     
    #11      
  12. aka_Robin

    aka_Robin Noch nicht viel geschrieben

    Dabei seit:
    29.03.2010
    Beiträge:
    16
    Geschlecht:
    männlich
    Software:
    Adobe Creative Suite 5.5 Design Premium
    Kameratyp:
    Nikon D3100
    CSS Problem(e)
    AW: CSS Problem(e)

    Hallo wollte nochmal nachhacken ob mir jemand bei der Realisierung von diesen Popups weiterhelfen kann?
     
    #12      
  13. leohh

    leohh CSS verliebt

    Dabei seit:
    19.06.2008
    Beiträge:
    244
    CSS Problem(e)
    AW: CSS Problem(e)

    Ich geh mal davon aus, dass JavaScript, wenn du schon so eine Frage stellst, nicht in deinem Repertoire ist.

    Liess dir das mal durch und sieh zu dass du es nach deinen Beduerfnissen umgestaltest.
    .slideDown() – jQuery API
     
    #13      
  14. aliasltb

    aliasltb LTB

    Dabei seit:
    23.03.2009
    Beiträge:
    189
    Geschlecht:
    männlich
    Software:
    Eclipse, Photoshop, Indesign, Illustrator, Flash, Flash Builder
    Kameratyp:
    HTC Desire HD
    CSS Problem(e)
    AW: CSS Problem(e)


    Ich habe ja nicht geschrieben, dass er alles und ausschließlich mit positioin:absolute versehen soll, aber an manchen Stellen kommt er auch nicht drum rum.
     
    #14      
  15. hubspe

    hubspe display:schwarzgelb;

    Dabei seit:
    09.08.2007
    Beiträge:
    209
    Geschlecht:
    männlich
    Ort:
    Passau
    Software:
    PS CS5
    Kameratyp:
    Linhof Technika 4
    CSS Problem(e)
    AW: CSS Problem(e)

    Das hast du geschrieben:
    Da entsteht für den Fragesteller (und mich) der Eindruck seine mit id's versehenen Elemente absolut zu positionieren, was er dann ja in seinem zweiten Codebeispiel überflüssigerweise getan hat. ;)

    Ausgehend von seinem Anfangsposting ist position:absolute; überhaupt nicht notwendig, um das gewünschte Layout zu bekommen.

    Selbst für seine Popups nicht. Sowas geht auch mit normaler Verlinkung.
    Die Popups können natürlich auch mit Position:absolute; verwirklicht werden. Stu Nicolls hat da mal einige Galerievarianten durchgespielt. (linke Seite).

    Ein Teil der Probleme des Fragestellers sind auch darauf zurückzuführen, das es ihm deutlich an Grundlagenkenntnissen mangelt (z.B. das er keinen CSS-Prolog definiert und sich über Abstände wundert).
     
    #15      
  16. AlexanderBo

    AlexanderBo Gesperrt

    Dabei seit:
    09.04.2009
    Beiträge:
    425
    Geschlecht:
    männlich
    Ort:
    im Tor zur Welt ;-)
    Software:
    Notepad++ / CS4
    CSS Problem(e)
    AW: CSS Problem(e)

    was bitte soll die angabe in % ?¿?
    mach die ganze seite auf <=1000px breite.
    dann setzte die einzelnen divs in eine breite die du innerhalb haben möchtest.

    wie hubspe schon geschrieben hat scheint es wirklich am grundwissen zu mangeln.

    allein die nennung eines "popup" für die navi zeigt es.

    mach dich vertraut mit: xhtml+ css+ (php)

    selfhtml
    little boxes
     
    #16      
  17. aliasltb

    aliasltb LTB

    Dabei seit:
    23.03.2009
    Beiträge:
    189
    Geschlecht:
    männlich
    Software:
    Eclipse, Photoshop, Indesign, Illustrator, Flash, Flash Builder
    Kameratyp:
    HTC Desire HD
    CSS Problem(e)
    AW: CSS Problem(e)

    Wie du aber lesen kannst habe ich nicht ausschließlich absolute Positionierung erwähnt, sonder auch relative etc.
    Demnach habe ich ihm frei gestellt welche Positionierungen er wählen und ob er dies tun sollte. Frage mich wieso du dich dauernd an diesem absolute festbeißt. ^^

    Das mit den Popups habe ich gar nicht gelesen. Aber ganz ehrlich verstehe ich noch nicht mal was er mit diesen Popups meint oder erreichen will.. o_O

    Da stimme ich dir zu. ^^
     
    #17      
  18. hubspe

    hubspe display:schwarzgelb;

    Dabei seit:
    09.08.2007
    Beiträge:
    209
    Geschlecht:
    männlich
    Ort:
    Passau
    Software:
    PS CS5
    Kameratyp:
    Linhof Technika 4
    CSS Problem(e)
    AW: CSS Problem(e)

    ich hab mich da nicht festgebissen, aber du hast ja gesehen das der Fragesteller prompt in die falsche Richtung galoppiert ist.

    Relative Positionierung sollte man auch nur nehmen, wenn es unbedingt notwendig ist.
    Damit kann man zwar einige IE-Fehler fixen, aber leider auch einige auslösen Stichwort falscher Stapelkontext im IE. ;)

    So ungefähr hat er sich das vorgestellt vermute ich.
     
    #18      
  19. aka_Robin

    aka_Robin Noch nicht viel geschrieben

    Dabei seit:
    29.03.2010
    Beiträge:
    16
    Geschlecht:
    männlich
    Software:
    Adobe Creative Suite 5.5 Design Premium
    Kameratyp:
    Nikon D3100
    CSS Problem(e)
    AW: CSS Problem(e)

    Eine Woche ist nun seit dem ersten Post und diesem vergangen. Das Stylesheet steht, incl Positonierungen und Slides. Nochmals vielen Dank.

    Trotzdem, wenn jemand schreibt er ist blutiger Anfänger, müsst ihr, die sich auskennen, nicht immer wieder mit Hinweisen wie "lerne erstmal die Basics kommen". Denn das ist bekannt und auch ihr habt mal angefangen...

    Thread close pls....
     
    #19      
  20. hubspe

    hubspe display:schwarzgelb;

    Dabei seit:
    09.08.2007
    Beiträge:
    209
    Geschlecht:
    männlich
    Ort:
    Passau
    Software:
    PS CS5
    Kameratyp:
    Linhof Technika 4
    CSS Problem(e)
    AW: CSS Problem(e)

    jep, hamm wir.
    Da wurde uns dann in den Foren gesagt:"Lern erstmal die Basics!"
    Das haben wir getan und waren anschließend glücklich und zufrieden. :mrorange:
     
    #20      
Seobility SEO Tool
x
×
×