Anzeige

[css]headerContainer, navi_oben, logo

[css]headerContainer, navi_oben, logo | PSD-Tutorials.de

Erstellt von tomtom, 15.01.2010.

  1. tomtom

    tomtom css/cms-learning

    Dabei seit:
    15.08.2005
    Beiträge:
    702
    Geschlecht:
    männlich
    Ort:
    t:\huering\en
    Software:
    Photoshop*CS3*
    Kameratyp:
    Kodak DX4530 + Fuji FinePix 1000
    [css]headerContainer, navi_oben, logo
    hallo, brauche mal wieder eure hilfe,

    es geht "nur" um den #headerContainer.
    ich habe im content-bereich einen #headerContainer. in diesen liegen div's, links die #navigation_oben (dunkelgrau) und rechts das #logo (hellgrau). ich möchte gerne in der #navigation_ oben und im #logo ein hintergrundbild einfügen. mein layout verschiebt sich dadurch. desweiteren möchte ich einen abstand zum #headerContainer von 5px rechts, oben, links und zwischen den beiden elementen (#navigation_oben + #logo) auch einen abstand von 5px.

    da muss erstmal kein bild hinein, eine farbe zur erklärung würde mir total reichen.
    muss ich denn das hg-bild eines div's genauso groß machen wie der div selbst, wenn ich einen abstand haben möchte zum übergeordneten element? ich hoffe ihr versteht mich. der code kommt.

    HTML:
    1.  
    2. <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
    3. </head>
    4.     <div id="content">
    5.     <div id="headerContainer">
    6.     <div id="navigation_oben">
    7.         <div class="menu_oben">
    8.         <ul>
    9.             <li><a href="#">HOME</a></li>|
    10.             <li><a href="#">STUDIO</a></li>|
    11.             <li><a href="#">LEISTUNGEN</a></li>|
    12.             <li><a href="#">GÄSTEBUCH</a></li>|
    13.             <li><a href="#">KONTAKT</a></li>|
    14.             <li><a href="#">ZURÜCK</a></li>
    15.         </ul>
    16.         </div>
    17.     </div>
    18.     <div id="logo">
    19.     </div>
    20.     </div>
    21.     </div>
    22.     <div id="footerContainer">
    23.     <p id="address">KOS ? ER ? 3 ? FON 03
    24.     </p>
    25.     <ul id="navigation_unten">
    26.         <li><a href="#">ANFAHRT</a></li>
    27.         <li><a href="#">IMPRESSUM</a></li>
    28.     </ul>
    29.     </div>
    30. </body>
    31. </html>
    32.  
    Code (Text):
    1.  
    2. * {
    3.     margin:0, padding:0, border:0;
    4. }
    5.  
    6. html {
    7.     height:100%;
    8.     background:#a6a6a6;
    9. }
    10.  
    11. body {
    12.     font-family:Verdana, Arial, Helvetica, sans-serif;
    13.     font-size:10px;
    14. }
    15.  
    16. #content {
    17.     width:900px;
    18.     height:550px;
    19.     background:url(../bilder/bg_content.jpg);
    20.     margin:55px auto 0px;
    21. }
    22.  
    23. #footerContainer {
    24.     width:900px;
    25.     height:25px;
    26.     margin:2px auto;
    27.     padding:0;
    28.     background-color:#f6f6f6;
    29.     border:1px solid #ff6633;
    30.     color:#333333;
    31. }
    32.  
    33. #address {
    34.     color:#666666;
    35.     font-size:10px;
    36.     margin:0px;
    37.     padding:7px;
    38.     width:686px;
    39.     height:10px;
    40.     float:left;
    41. }
    42.  
    43. #navigation_unten {
    44.     width:186px;
    45.     height:10px;
    46.     float:right;
    47.     margin:0px;
    48.     padding:7px;
    49. }
    50.  
    51. #navigation_unten ul {
    52.     width:186px;
    53. }
    54.  
    55. #navigation_unten li {
    56.     list-style-type:none;
    57.     display:inline;
    58. }
    59.  
    60. #navigation_unten a {
    61.     text-decoration:none;
    62.     color:#666666;
    63.     font-size:10px;
    64.     padding:10px;
    65. }
    66.  
    67. #headerContainer {
    68.     height:130px;
    69.     width:900px;
    70.     color:#009900;
    71. }
    72.  
    73. #navigation_oben {
    74.     height:130px;
    75.     width:650px;
    76.     background:#333333;
    77.     float:left;
    78. }
    79.  
    80. .menu_oben {
    81.     padding-top:25px;
    82.     padding-left:20px;
    83. }
    84.  
    85. .menu_oben ul, .menu_oben li {
    86.     list-style-type: none;
    87.     padding:10px;
    88.     display:inline;
    89.     font-size:13px;
    90.     font-family:Geneva, Arial, Helvetica, sans-serif;
    91.     color:#ff6633;
    92. }
    93.  
    94. .menu_oben a:link, .menu_oben a:visited, .menu_oben a:active {
    95.     background-color:transparent;
    96.     text-decoration: none;
    97.     display:inline;
    98.     color:#ffffff;
    99.     font-size:11px;
    100. }
    101.  
    102. .menu_oben a:hover {
    103.     color:#ff6633;
    104.     text-decoration:none;
    105. }
    106.  
    107. #logo {
    108.     height:130px;
    109.     width:250px;
    110.     background-color:#666666;
    111.     float:right;
    112. }
    113.  
    vielen, vielen dank.
     
    #1      
  2. fakerer

    fakerer Aktives Mitglied

    Dabei seit:
    03.08.2008
    Beiträge:
    804
    Geschlecht:
    männlich
    [css]headerContainer, navi_oben, logo
    AW: [css]headerContainer, navi_oben, logo

    Code (Text):
    1.  
    2. #headerContainer {
    3.     height:130px;
    4.     width:900px;
    5.     color:#009900;
    6.     padding: 5px 5px 0 5px;
    7. }
    8. #navigation_oben {
    9.     height:130px;
    10.     width:650px;
    11.     background-image: url(deinlogo.png);
    12.     background-color:#333333;
    13.     float:left;
    14. }
    15. #logo {
    16.     height:130px;
    17.     width:245px;
    18.     background-image: url(deinlogo.png);
    19.     background-color:#666666;
    20.     float:right;
    21. }
    22.  
    sollte so klappen
     
    #2      
  3. tomtom

    tomtom css/cms-learning

    Dabei seit:
    15.08.2005
    Beiträge:
    702
    Geschlecht:
    männlich
    Ort:
    t:\huering\en
    Software:
    Photoshop*CS3*
    Kameratyp:
    Kodak DX4530 + Fuji FinePix 1000
    [css]headerContainer, navi_oben, logo
    AW: [css]headerContainer, navi_oben, logo

    ja danke probiere es morgen. 1000 dank
     
    #3      
  4. tomtom

    tomtom css/cms-learning

    Dabei seit:
    15.08.2005
    Beiträge:
    702
    Geschlecht:
    männlich
    Ort:
    t:\huering\en
    Software:
    Photoshop*CS3*
    Kameratyp:
    Kodak DX4530 + Fuji FinePix 1000
    [css]headerContainer, navi_oben, logo
    AW: [css]headerContainer, navi_oben, logo

    @fakerer: danke hat super geklappt, danke dir.

    kleines problem in der entwurfsansicht im dreamweaver ist aufgetreten. sieht mir komisch aus, aber vielleicht muss das so sein.
    ich habe den code in der css für #logo (hellgrau) angepasst, da ich auch einen abstand von 5px zum headerrand rechts haben möchte. das habe ich mit margin gemacht. war das richtig? nun habe ich in der entwurfsansicht noch (wie soll ich sagen und beschreiben) eine zusätzliche spalte. bekomme ich die weg oder ist das wegen dem margin-right?

    Code (Text):
    1.  
    2. #headerContainer {
    3.     height:130px;
    4.     width:900px;
    5.     color:#009900;
    6.     padding:5px 5px 0px 5px;
    7. }
    8.  
    9. #navigation_oben {
    10.     height:130px;
    11.     width:650px;
    12.     background:#333333;
    13.     float:left;
    14. }
    15.  
    16. #logo {
    17.     height:130px;
    18.     width:235px;
    19.     background-color:#666666;
    20.     float:right;
    21.     margin-right:10px;
    22. }
    23.  
    24.  
     
    Zuletzt bearbeitet: 17.01.2010
    #4      
  5. tomtom

    tomtom css/cms-learning

    Dabei seit:
    15.08.2005
    Beiträge:
    702
    Geschlecht:
    männlich
    Ort:
    t:\huering\en
    Software:
    Photoshop*CS3*
    Kameratyp:
    Kodak DX4530 + Fuji FinePix 1000
    [css]headerContainer, navi_oben, logo
    AW: [css]headerContainer, navi_oben, logo

    kann ich das margin-right entfernen und mit anderem ersetzen. wie gesagt die entwurfansicht im dw sieht komisch aus.

    Code (Text):
    1.  
    2. #logo {
    3.     height:130px;
    4.     width:235px;
    5.     background-color:#666666;
    6.     float:right;
    7.     margin-right:10px;
    8. }
    9.  
     
    #5      
  6. tomtom

    tomtom css/cms-learning

    Dabei seit:
    15.08.2005
    Beiträge:
    702
    Geschlecht:
    männlich
    Ort:
    t:\huering\en
    Software:
    Photoshop*CS3*
    Kameratyp:
    Kodak DX4530 + Fuji FinePix 1000
    [css]headerContainer, navi_oben, logo
    AW: [css]headerContainer, navi_oben, logo

    es hat mit keine ruhe gelassen. diese ansicht (entwurfsansicht im dw) sah wirklich komisch aus. habe etwas im css dazu geändert, ich hoffe, ich habe es richtig gemacht.

    Code (Text):
    1.  
    2. #headerContainer {
    3.     height:130px;
    4.     width:900px;
    5.     color:#009900;
    6.     padding:5px 0px 5px 0px;
    7. }
    8.  
    9. #navigation_oben {
    10.     height:130px;
    11.     width:650px;
    12.     background-image:;
    13.     background:#333333;
    14.     float:left;
    15.     margin-left:5px;
    16. }
    17.  
    18. #logo {
    19.     height:130px;
    20.     width:235px;
    21.     background-color:#666666;
    22.     float:right;
    23.     margin-right:5px;
    24. }
    25.  
    oder geht es besser und einfacher? danke für eure hilfe.
     
    #6      
Seobility SEO Tool
x
×
×