Anzeige

"Background-repeat"-Befehl Problem & weitere Frage

"Background-repeat"-Befehl Problem & weitere Frage | PSD-Tutorials.de

Erstellt von endorfinART, 28.07.2008.

  1. endorfinART

    endorfinART ich mag kekse

    Dabei seit:
    03.04.2008
    Beiträge:
    98
    Geschlecht:
    männlich
    Software:
    Adobe® Creative Suite® CS3
    "Background-repeat"-Befehl Problem & weitere Frage
    Hi.
    Mir bieten sich derzeit 2 Probleme beim Umsetzen einer Homepage. Dazu ist zu sagen, dass ich sicherlich kein CSS/HTML-Profi bin und mit Dreamweaver CS3 arbeite.

    Nachdem ich in Photoshop alles designed und geslict hatte stellte ich mir mein Design in Dreamweaver über die "Code Ansicht" im Box-Modell her.

    Ich habe eine div-Box auf der Seite zentriert, in der ich alle anderen Boxen (Header, Navigation, Content, Footer) plaziert habe. Auf derlinken Seite habe ich durch padding-left einen Innenabstand von 7px eingetragen, da hier ein Teil des Hintergrundbildes zusehen sein soll. Das Hintergrundbild ist 1px hoch und 800px breit (wie die "alles umfassende" div-Box auch). Auf der linken und rechten Seite ist ein "Schatten", da die Hintergrundfarbe des bodys und des Rests beides mal weiß ist.
    Nun habe ich probiert mit dem Befehl background-repeat und dem Wert "repeat-y" das Background-Bild zu wiederholen.
    Wenn ich mir die Seite aber über den "Vorschau-Modus " in Firefox anschaue wiederholt sich das Bild nicht bis zum Ende der Seite sondern nur bis zur Mitte des "content"-divs.

    Weiß jemand woran das liegen könnte?



    Dann zu meinem 2ten Problem. Ich möchte im Header einen Link namens "Kontakt" einfügen. Auch dies probierte ich mit einem Div-Block zu lösen. Um ihn zu platzieren habe ich mit margin gearbitet. Wenn ich nun aber die Vorschau betrachte, verwendet Firefox die margin-Werte (insbesondere den "top"-Wert) auf den body und nicht auf das header-div, indem er liegt.
    Was mache ich da falsch? Weil wenn ich den div-Block wegnehme wird wieder die ganze Seite bis an den oberen Rand des bodys gezogen (wie es von mir gewünscht ist) ansonsten verschiebt sich die ganze Seite nach unten und nur das "kontakt"-div wäre an der richigen Stelle!?!



    Wenn ihr den HTML- und/oder CSS-Code benötigt, poste ich den natürlich gerne.



    lg
    .endorfinART.*





    PS: Hiermit entschuldige ich mich nochmal für meinen Ausfall beim Petch. den Grund schreibe ich gerne auf Anfrage per PN. Ich hoffe ihr antwortet trotzdem :)
     
    #1      
  2. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    "Background-repeat"-Befehl Problem & weitere Frage
    AW: "Background-repeat"-Befehl-Problem & weitere Frage


    dann mach das bitte mal....ohne artet das in ein Rätzelraten aus
     
    #2      
  3. endorfinART

    endorfinART ich mag kekse

    Dabei seit:
    03.04.2008
    Beiträge:
    98
    Geschlecht:
    männlich
    Software:
    Adobe® Creative Suite® CS3
    "Background-repeat"-Befehl Problem & weitere Frage
    AW: "Background-repeat"-Befehl-Problem & weitere Frage

    CSS


    HTML




    Hoffentlich könnt ihr da was raus erkennen....Dreamweaver ordnet das immer so schön automatisch.:uhm::mrorange::uhm:
     
    #3      
  4. Liebling373

    Liebling373 PixelSchubser

    Dabei seit:
    17.04.2007
    Beiträge:
    260
    Geschlecht:
    männlich
    Ort:
    am See
    Software:
    CS 2 bis CS 4, Corel, PHP, SQL, CSS, XML, Flash, 3DSMaxe, Networking, Database, ......
    Kameratyp:
    DSC-W80
    "Background-repeat"-Befehl Problem & weitere Frage
    AW: "Background-repeat"-Befehl-Problem & weitere Frage

    Also dass Du das mit der Code Ansicht zusammengebaut hast ohne "ein großer Profi" zu sein sieht man deutlich!
    Es scheint mir eher so als hättest Du es mit der Entwurfsansicht gemacht, ohne zu sehen was da abgeht!
    Ehrlich gesagt glaube ich nicht das da einer durchsieht. Ausser Dreamweaver natürlich!
     
    #4      
  5. endorfinART

    endorfinART ich mag kekse

    Dabei seit:
    03.04.2008
    Beiträge:
    98
    Geschlecht:
    männlich
    Software:
    Adobe® Creative Suite® CS3
    "Background-repeat"-Befehl Problem & weitere Frage
    AW: "Background-repeat"-Befehl-Problem & weitere Frage


    ich bin zwar kein profi, aber das bisschen divs schubsen schaff ich dann doch noch ;)
     
    #5      
  6. AlienMacHine

    AlienMacHine Musiker-Designer-Punk

    Dabei seit:
    25.12.2005
    Beiträge:
    116
    Geschlecht:
    männlich
    Ort:
    Rheinland-Pfalz
    "Background-repeat"-Befehl Problem & weitere Frage
    AW: "Background-repeat"-Befehl-Problem & weitere Frage

    Waouw! Da werden wie wild divs auf- und wieder zugemacht und einfach mal Kommentare für divs eingebaut dies gar nicht gibt!
    Die Javascript-Rollovers erinnern mich an alte Zeiten. Tabellenlayout.... Also ich würde nochmal von vorne anfangen! Und diesmal dann wirklich in der Code-Ansicht...
    Sorry, aber dass Du da nicht mehr durchblicks ist ja klar. Fang echt nochmal von vorne an...
     
    #6      
  7. endorfinART

    endorfinART ich mag kekse

    Dabei seit:
    03.04.2008
    Beiträge:
    98
    Geschlecht:
    männlich
    Software:
    Adobe® Creative Suite® CS3
    "Background-repeat"-Befehl Problem & weitere Frage
    AW: "Background-repeat"-Befehl-Problem & weitere Frage

    klar hätte man die navi besser lösen können, aber ich fands so am besten...bzw. am einfachsten...

    durchblicken tu ich da ja noch...es geht mir um die oben gestellten fragen nicht darum, was ihr von dem code haltet :) (das der scheiße ist weiß ich selbst...ich bin aber eig auch kein web-designer)...also b2t bitte
     
    #7      
  8. serverhombre

    serverhombre Guest

    "Background-repeat"-Befehl Problem & weitere Frage
    AW: "Background-repeat"-Befehl-Problem & weitere Frage

    Warum musst du dann um Hilfe bitten ? :rolleyes: :hmpf:


    so zu deinen Problemen,
    hab mal den Code genommen und bisschen angepasst,
    hier

    Und ich muss auch sagen das der Code und der Aufbau Müll sind...... :muede:
     
    #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
    "Background-repeat"-Befehl Problem & weitere Frage
    AW: "Background-repeat"-Befehl-Problem & weitere Frage

    zum Thema Hintergrundbild ...

    du hast das Hintergrundbild in deiner umrandenden Box definiert und nicht im Body.
    Ich geh aber mal davon aus das du einfach nur eine zentrierte Seite haben
    möchtest, also optisch von oben nach unten komplett.

    Ersetze bitte folgende Blöcke...

    für body
    HTML:
    1.  
    2. body {
    3.     background: #fff url(Bilder/content_bg.gif) repeat-y 0 0;
    4. color: #1a1a1a; /* Antrazit ... bei Überschriften usw. etwas hübscher */
    5. font-family: Helvetica,'Lucida Sans MS','Bitstream Vera Sans', 'Nimbus Sans L',Tahoma,sans-serif; /* optimalste schrift zu erst dann die je nach system passenste wenn andere nicht vorhanden */
    6. font-size: 10px; /* 10px zum besser rechnen */
    7. margin: 0;
    8.     padding: 0;
    9. text-align: center;
    10.     }
    11.  
    für ".oneColElsCtr #overall"
    HTML:
    1.  
    2. .oneColElsCtr #overall {
    3.    font-size: 1.2em; /* 10px * 1,2 = 12px */
    4.        width: 800px;
    5.    margin: 10px auto 10px auto;
    6.       }
    7.  
    Unter bestimmten vorraussetzungen kannst du für den Seitenhintergrund auch folgendes machen

    HTML:
    1.  
    2. html, body {
    3.       background: #fff url(Bilder/content_bg.gif) repeat-y 0 0;
    4. }
    5.  
    sollte aber auch wie oben gehen.

    Deine Seite online zu sehen wäre übrigens noch praktischer, oder einen Screenshot zusätzlich wie es aussehen soll.

    Zu deiner zweiten Frage:

    Für die Navigation empfehle ich dir eine Liste zu erstellen.
    Und zwar nach folgender Struktur ...

    HTML:
    1.  
    2. <ol id="head_main_nav">
    3.  <li>
    4.   <a href="index.html"><span>Start</span></a>
    5.  </li>
    6.  <li>
    7.   <a href="kontakt.html"><span>Kontakt</span></a>
    8.  </li>
    9.  <li>
    10.   <a href="impressum.html"><span>Impressum</span></a>
    11.  </li>
    12. </ol>
    13.  
    ... usw. jeweils ein neues li element mit a und span pro Menüpunkt.

    Das bekommst du mit folgendem CSS in Form ...

    HTML:
    1.  
    2. #head_main_nav {
    3.   background: url(Bilder/header.gif) repeat-x 0 0;
    4.   display: block;
    5.   list-style: none; /* keine Punkte bzw. hier keine Zahlen*
    6.   margin: 0;  /*Ränder &Abstände weg*/
    7.  padding: 0; /*Ränder &Abstände weg*/
    8.  height: 120px;
    9. }
    10. #head_main_nav li{
    11.   display: block;
    12.   float: left;
    13.   height: 99px;
    14.   width: 30px;
    15.   padding: 10px 15px 10px 15px;
    16. }
    17. #head_main_nav li a,#head_main_nav li a:link, #head_main_nav li a:visited{
    18.   color: #000; /*oder andere passende farbe*/
    19.   font-weight: 600;
    20.   text-decoration: none;
    21. }
    22. #head_main_nav li a:hover{
    23.   color: #f00; /*oder andere passende farbe*/
    24. }
    25.  
    Das sollte grob hinkommen ... kenn dein layout nicht ... deswegen alles nur so ein schuss ins blaue.

    Wenn du Fragen zu meinen Vorschlägen hast ... warum ich etwas so und was so gemacht hab, dann nur raus damit.
     
    #9      
  10. Liebling373

    Liebling373 PixelSchubser

    Dabei seit:
    17.04.2007
    Beiträge:
    260
    Geschlecht:
    männlich
    Ort:
    am See
    Software:
    CS 2 bis CS 4, Corel, PHP, SQL, CSS, XML, Flash, 3DSMaxe, Networking, Database, ......
    Kameratyp:
    DSC-W80
    "Background-repeat"-Befehl Problem & weitere Frage
    AW: "Background-repeat"-Befehl-Problem & weitere Frage

    Wie wahr, wie wahr, nunja ich hatte gestern wirklich nicht mehr die Lust mich damit auseinanderzusetzen. Wobei er die bissl Divs ja selber rumschubsen konnte!
     
    #10      
  11. endorfinART

    endorfinART ich mag kekse

    Dabei seit:
    03.04.2008
    Beiträge:
    98
    Geschlecht:
    männlich
    Software:
    Adobe® Creative Suite® CS3
    "Background-repeat"-Befehl Problem & weitere Frage
    AW: "Background-repeat"-Befehl-Problem & weitere Frage

    Das bisschen schlechten Code konnte ich schließlich noch erstellen :D...UND das wirklich in der Codeansicht, abgesehen von den Roll-overs.


    So ich hab jetzt mal 2 Fotos gemacht, wie's aussehen soll (Dreamweaver):
    [​IMG]


    und wie's angezeigt wird (Firefox):
    [​IMG]
     
    #11      
  12. 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
    "Background-repeat"-Befehl Problem & weitere Frage
    AW: "Background-repeat"-Befehl-Problem & weitere Frage

    HTML:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    5. <!-- TemplateBeginEditable name="doctitle" -->
    6. <title>Praxis Delong | Startseite</title>
    7. <link href="style.css" rel="stylesheet" type="text/css" />
    8. </head>
    9.   <div id="overall">    
    10.   <!-- Kopf -->  
    11.   <div id="header">
    12.      <h1>Praxis ... <span>Name</span></h1>
    13.       <span class="header_infos">
    14.        die ganze adresse hier rein ist besser für google
    15.        <a href="kontakt.html"></a>
    16.       </span>
    17.    <div id="navigation">
    18.      <ol id="head_main_nav">
    19.        <li><a href="index.html"><span>Start</span></a></li>
    20.        <li><a href="kontakt.html"><span>Kontakt</span></a></li>
    21.        <li><a href="impressum.html"><span>Impressum</span></a></li>
    22.     </ol>
    23.    </div>
    24.   </div>
    25.   <!-- Kopf Ende-->
    26.   <!-- Inhalt -->
    27.   <div id="content" class="delongpraxis">
    28.       <p>TEXT TEXT TEXT  </p>
    29.       <p>TEXT TEXT TEXT  </p>
    30.       <p>TEXT TEXT TEXT  </p>
    31.  </div>
    32. <!-- Inhalt -->
    33. <span class="breaker">&nbsp;</span>
    34.    <div id="footer">
    35.      <ol id="footer_nav">
    36.        <li><a href="index.html"><span>LINK</span></a></li>
    37.        <li><a href="index.html"><span>LINK</span></a></li>
    38.        <li><a href="index.html"><span>LINK</span></a></li>
    39.      </ol>
    40.     </div>
    41.    </div>
    42.   </body>
    43. </html>
    44.  
    HTML:
    1.  
    2. html, body {
    3.    color: #1a1a1a; /* Antrazit ... bei Überschriften usw. etwas hübscher */
    4.    font-family: Helvetica,'Lucida Sans MS','Bitstream Vera Sans', 'Nimbus Sans L',Tahoma,sans-serif;
    5.   font-size: 10px; /* 10px zum besser rechnen */
    6.    margin: 0;
    7.    padding: 0;
    8.    text-align: center;
    9. }
    10. #overall {
    11.    background: #fff url(Bilder/content_bg.gif) repeat-y 0 0;
    12.    margin: 0 auto 0 auto;
    13.    width: 800px;
    14.    text-align:center;
    15. }
    16. #overall #header {
    17.    background: #fff url(Bilder/header_bg.jpg) no-repeat 0 0;
    18.    display: block;
    19.    width: 800px;
    20.    height: 150px;
    21. }
    22. #overall #header h1{
    23.    display: block;
    24.    height angeben !
    25.    positioniere mit margin-top etc. . die Überschrift passend
    26. }
    27. #overall #header h1 span{
    28.    setze das span auch auf block damit es umbricht,
    29.    vergrößere die schrift etc.
    30. }
    31. #overall #header .header_infos{
    32.    margin-top: 10px; /*das ist ca. nur geschätzt eben unter die Überschrift*/
    33.  
    34. #head_main_nav {
    35.   background: url(Bilder/menu_bg.gif) repeat-x 0 0;
    36.   /*hier kommt der Farbverlauf für das Menü hin ... 1px breit und hoch wie das Menü sollte das Bild sein es wird nicht für jeden Menüpunkt ein extra Bild benötigt deswegen im Markup auch kein JS mehr*/
    37.   display: block;
    38.   list-style: none; /* keine Punkte bzw. hier keine Zahlen*
    39.   margin: 0;  /*Ränder &Abstände weg*/
    40.  padding: 0; /*Ränder &Abstände weg*/
    41.  height: 35px;
    42.   width: 800px;
    43. }
    44. #head_main_nav li{
    45.   display: block;
    46.   float: left; (menüpunkte nicht untereinander sondern nebeneinander)
    47.   height: 35px;
    48.   width:
    49. }
    50. #head_main_nav li a{
    51.   display: block;
    52.   height: 35px;
    53.   color: #fff;
    54.   text-decoration: none;
    55. }
    56. #head_main_nav li a:hover{
    57.   color: #fff; /*beim mouse over entweder gleich farbe und hintergrund dazu oder statt #fff z.B. "#DF9618" (orange)*/
    58.   background: url {Bilder/menu_bg_hover.gif} repeat-x 0 0;
    59.   /* das fabriziert dir hinter dem menüpunkt der gehovert ist einen andersfarbigen hintergrund ... statt also für jeden menüpunkt einzeln ein bild für alle.
    60. }
    61. #head_main_nav li a span {
    62.    padding: 3px 6px 3px 6px; /* etwas abstand von der schrift zum rand*/
    63.  }
    64.  
    Setzt das erstmal soweit um ... dann sehen wir weiter ... das MarkUp ist so auf jedenfall sauberer und wir haben paar Sachen bereinigt was die Seite Barriere freier macht.

    Wie gesagt setzt das erstmal soweit um dann machen wir weiter an der CSS. Aber erstmal den Kopf mit Menü sauber umsetzen.

    Der Rest ist auch kein Problem ... das kannst du dann eventl. schon selbst
    wenn du verstehst was gemacht wurde.
     
    #12      
  13. endorfinART

    endorfinART ich mag kekse

    Dabei seit:
    03.04.2008
    Beiträge:
    98
    Geschlecht:
    männlich
    Software:
    Adobe® Creative Suite® CS3
    "Background-repeat"-Befehl Problem & weitere Frage
    AW: "Background-repeat"-Befehl Problem & weitere Frage



    wenn ich das mache, verschiebt sich wieder die ganze Seite nach unten...woran könnte das liegen?
     
    #13      
  14. 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
    "Background-repeat"-Befehl Problem & weitere Frage
    AW: "Background-repeat"-Befehl Problem & weitere Frage

    Im Code ersetzt die h1 und den nachfolgenden span.

    HTML:
    1.  
    2.      <h1>Praxis für Physiotherapie <span>Dagmar Delong</span></h1>
    3.       <span class="header_infos">
    4.        | Straße 123 , 12345 Muserhausen, Tel.: 0123 / 456 789 | Fax: 0123 //456 7810 | <a href="kontakt.html">Kontakt</a>
    5.       </span>
    6.  
    im CSS folgende Elemente

    HTML:
    1.  
    2. #overall #header h1{
    3.    float: left;
    4.    margin-top: 20px;
    5.    margin-left: 200px;
    6.    text-align: left;
    7.    text-decoration: underline;
    8. }
    9. #overall #header h1 span{
    10.    display: block;
    11.    text-decoration: none;
    12. }
    13. #overall #header .header_infos{
    14.    display: block;
    15.    clear: left;
    16. }
    17.  
    Wenn Fehler auftreten versuch aber auch diese zu ergründen und eine Lösung zu finden. WEnn ich dir deine Seite komplett mach lernst du dabei
    auch nichts.

    In dem Fall sind float und display (als direkte attribute)
    und das "box model" als generelles Thema interessant.

    Bezüglich der Adresse


    Ist finde ich eine nette Sache ermöglicht z.B. Events und Adressen
    von Seiten ohne viel Arbeit in Thunderbird/Outlook zu übernehmen.
     
    #14      
x
×
×
teststefan