Anzeige

allles verrutscht

allles verrutscht | PSD-Tutorials.de

Erstellt von nickido, 08.10.2008.

  1. nickido

    nickido Nicht mehr ganz neu hier

    Dabei seit:
    21.03.2008
    Beiträge:
    108
    Geschlecht:
    weiblich
    Ort:
    Süddeutschland
    Software:
    dies und das
    allles verrutscht
    hallo,

    ich programmiere gerade meine erste homepage...
    ich habe eine hintergrundbild und eine navigationsleiste mit css gemacht, beides verschiebt sich sobald ich das Fenster verkleinere.:(

    In firefox wird die navi-leiste nur im rohformat angezeigt...:'(

    kann mir jemand helfen??

    Vielen Dank schon einmal
     
    #1      
  2. toxictoon

    toxictoon Pixelpatriot

    Dabei seit:
    27.05.2007
    Beiträge:
    633
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    Adobe CC
    Kameratyp:
    Eos 400 d
    allles verrutscht
    AW: allles verrutscht

    mach doch mal nen link oder poste nen code auszug...
     
    #2      
  3. nickido

    nickido Nicht mehr ganz neu hier

    Dabei seit:
    21.03.2008
    Beiträge:
    108
    Geschlecht:
    weiblich
    Ort:
    Süddeutschland
    Software:
    dies und das
    allles verrutscht
    AW: allles verrutscht

    ja, klar, mach ich:



    <style type=text/css>
    body {
    background-image:url(bild.jpg);
    background-color:eeeeee;
    background-attachment:fixed;
    background-position:center;
    background-repeat:no-repeat;
    }
    </style>
    </body>

    <body>


    <div id="bl_main_nav">
    <ul>
    <li><a id="main_nav1" href="home" target="_top">Home</a></li>
    <li><a id="main_nav2" href="general_person.shtml" target="_top">Gruppe</a></li>
    <li><a id="main_nav3" href="general_skills.shtml" target="_top">Kalender</a></li>
    <li><a id="main_nav4" href="general_projects.shtml" target="_top">Kontakt</a></li>
    <li><a id="main_nav5" href="general_contact.shtml" target="_top">Impressum</a></li>

    </div>

    <style type=text/css>{

    #bl_main_nav ul {
    width:600px;
    line-height:20px;
    margin:0px;
    padding:0px;
    list-style-type:none;
    letter-spacing:1px;
    }

    #bl_main_nav li {
    margin:0px;
    padding:0px;
    text-align:center;
    float:left;
    border:0px solid #ffffff;
    }


    #bl_main_nav a {
    color:#FFFFFF;
    font-family:tahoma;
    font-weight:bold;
    display:block;
    height:30px;
    width:158px;
    padding-top:0px;
    background:#cccccc;
    text-decoration:none;
    border-bottom:5px solid #7f7f7f;
    }

    #bl_main_nav a:hover {
    color:#000000;
    background:#eeeeee;
    border-bottom:5px solid #7f7f7f;
    }


    </style>
    <style type=text/css>
    body { margin-top: 150px; margin-left: 15%; }

    </style>
     
    #3      
  4. toxictoon

    toxictoon Pixelpatriot

    Dabei seit:
    27.05.2007
    Beiträge:
    633
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    Adobe CC
    Kameratyp:
    Eos 400 d
    allles verrutscht
    AW: allles verrutscht

    vll sottest du die width der ul auch der breite von 5 nebeneinaderliegenden 158 px breiten li elementen anpassen ;)
     
    #4      
  5. Guin

    Guin Nicht mehr ganz neu hier

    Dabei seit:
    18.04.2008
    Beiträge:
    186
    Geschlecht:
    männlich
    Ort:
    Lübeck
    allles verrutscht
    AW: allles verrutscht

    Hallo

    Anders rum ist es einfacher gesagt: Nur im IE wird es so angezeigt, wie du es möchtest ;)

    Schau dir mal bei selfhtml an, wie das Grundgerüst einer HTML Seite aussehen muss
    SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Grundgerüst einer HTML-Datei
     
    #5      
  6. nickido

    nickido Nicht mehr ganz neu hier

    Dabei seit:
    21.03.2008
    Beiträge:
    108
    Geschlecht:
    weiblich
    Ort:
    Süddeutschland
    Software:
    dies und das
    allles verrutscht
    AW: allles verrutscht

    wie meinst du das?? Hier bei (#bl_main_nav ul) width:158px eingeben?? das hab ich versucht, leider ändert sich nichts:(


    @guin: ich brauche nicht den Grundaufbau, sonder die Lösung für das Navi-Problem...
     
    #6      
  7. Guin

    Guin Nicht mehr ganz neu hier

    Dabei seit:
    18.04.2008
    Beiträge:
    186
    Geschlecht:
    männlich
    Ort:
    Lübeck
    allles verrutscht
    AW: allles verrutscht

    Ok,

    toxictoon meint, dass 5 mal 158px nicht in 600px passt.
    Also entweder die Buttons schmaler machen, so dass sie in 600px passen oder aber die 600 erhöhen.

    Beispiel
    #bl_main_nav ul {
    width:800px;
    line-height:20px;
    margin:0px;
    padding:0px;
    list-style-type:none;
    letter-spacing:1px;
    }
     
    #7      
  8. toxictoon

    toxictoon Pixelpatriot

    Dabei seit:
    27.05.2007
    Beiträge:
    633
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    Adobe CC
    Kameratyp:
    Eos 400 d
    allles verrutscht
    AW: allles verrutscht

    #bl_main_nav ul {
    width:600px;
    line-height:20px;


    ...

    hier solltest du die breit von 5 x 158 px eingeben... 790 px wenn ich richtig gerechnet hab???
     
    #8      
  9. nickido

    nickido Nicht mehr ganz neu hier

    Dabei seit:
    21.03.2008
    Beiträge:
    108
    Geschlecht:
    weiblich
    Ort:
    Süddeutschland
    Software:
    dies und das
    allles verrutscht
    AW: allles verrutscht

    ok, das klingt logisch, das habe ich auch versucht, aber wenn ich das browser-fenster verkleinere, dann verrutschen die einzelnen "buttons" immernoch in die nächste Zeile...ich habe mir noch überlegt als attachement:fixed, oder so was zu nehmen. könnte es damit klappen??
     
    #9      
  10. toxictoon

    toxictoon Pixelpatriot

    Dabei seit:
    27.05.2007
    Beiträge:
    633
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    Adobe CC
    Kameratyp:
    Eos 400 d
    allles verrutscht
    AW: allles verrutscht

    warum arbeitest du denn eigneltich mit ul?

    mach doch einfach ganz nomrmale links, dann brauchste auch nicht float:left...
     
    #10      
  11. Guin

    Guin Nicht mehr ganz neu hier

    Dabei seit:
    18.04.2008
    Beiträge:
    186
    Geschlecht:
    männlich
    Ort:
    Lübeck
    allles verrutscht
    AW: allles verrutscht

    HTML:
    1. <style type=text/css>
    2. body {
    3. background-image:url(bild.jpg);
    4. background-color:eeeeee;
    5. background-attachment:fixed;
    6. background-position:center;
    7. background-repeat:no-repeat;
    8. margin-top: 150px; margin-left: 15%;
    9. }
    10.  
    11. #bl_main_nav ul {
    12. width:800px;
    13. line-height:20px;
    14. margin:0px;
    15. padding:0px;
    16. list-style-type:none;
    17. letter-spacing:1px;
    18. }
    19.  
    20. #bl_main_nav li {
    21. margin:0px;
    22. padding:0px;
    23. text-align:center;
    24. float:left;
    25. border:0px solid #ffffff;
    26. }
    27.  
    28.  
    29. #bl_main_nav a {
    30. color:#FFFFFF;
    31. font-family:tahoma;
    32. font-weight:bold;
    33. display:block;
    34. height:30px;
    35. width:158px;
    36. padding-top:0px;
    37. background:#cccccc;
    38. text-decoration:none;
    39. border-bottom:5px solid #7f7f7f;
    40. }
    41.  
    42. #bl_main_nav a:hover {
    43. color:#000000;
    44. background:#eeeeee;
    45. border-bottom:5px solid #7f7f7f;
    46. }
    47.  
    48.  
    49.  
    50.  
    51. </head>
    52.  
    53.  
    54. <div id="bl_main_nav">
    55. <ul>
    56. <li><a id="main_nav1" href="home" target="_top">Home</a></li>
    57. <li><a id="main_nav2" href="general_person.shtml" target="_top">Gruppe</a></li>
    58. <li><a id="main_nav3" href="general_skills.shtml" target="_top">Kalender</a></li>
    59. <li><a id="main_nav4" href="general_projects.shtml" target="_top">Kontakt</a></li>
    60. <li><a id="main_nav5" href="general_contact.shtml" target="_top">Impressum</a></li>
    61. </ul>
    62. </div>
    63.  
    64. </body>
    65.  
    Hier stelle ich kein verrutschen mehr fest.
     
    #11      
  12. nickido

    nickido Nicht mehr ganz neu hier

    Dabei seit:
    21.03.2008
    Beiträge:
    108
    Geschlecht:
    weiblich
    Ort:
    Süddeutschland
    Software:
    dies und das
    allles verrutscht
    AW: allles verrutscht

    juhu....ne jetzt auch nicht mehr, vielen Dank an euch beide!!
     
    #12      
x
×
×
teststefan