Anzeige

Frage zum Verlinken

Frage zum Verlinken | PSD-Tutorials.de

Erstellt von Kadey, 09.07.2010.

  1. Kadey

    Kadey Nicht mehr ganz neu hier

    Dabei seit:
    08.07.2009
    Beiträge:
    104
    Geschlecht:
    männlich
    Frage zum Verlinken
    Hallo zusammen,

    habe mein Layout nun soweit fertig und möchte jetzt für meine Buttons die nötigen Links erstellen. Blicke da aber nicht ganz durch.

    Angefangen bin ich damit, dass meine Index.htm ja mit meiner styles.css verknüpft ist.
    In meiner Index sind ja meine ganzen verlinkungen drin.
    ( a href "..." )

    Jetzt muss ich doch eigentlich nur noch meine Index paar mal kopieren, die dann umbenennen und fertig...

    Sehe ich das richtig oder voll falsch...??

    mfg
     
    #1      
  2. AlexanderBo

    AlexanderBo Gesperrt

    Dabei seit:
    09.04.2009
    Beiträge:
    425
    Geschlecht:
    männlich
    Ort:
    im Tor zur Welt ;-)
    Software:
    Notepad++ / CS4
    Frage zum Verlinken
    AW: Frage zum Verlinken

    jein...
    grundsätzlich was wohlmöglich den header- navi- und footer-bereich angeht richtig.
    aber der content sollte dann doch schon noch individueller sein ;-)
     
    #2      
  3. Kadey

    Kadey Nicht mehr ganz neu hier

    Dabei seit:
    08.07.2009
    Beiträge:
    104
    Geschlecht:
    männlich
    Frage zum Verlinken
    AW: Frage zum Verlinken

    Ja, aber wie mache ich das denn am besten ???

    Möchte ja, dass wenn ich auf meine Button/links klicke, das dann immernoch das Design angezeigt wird und sich nur der Text im Content ändert...
     
    #3      
  4. AlexanderBo

    AlexanderBo Gesperrt

    Dabei seit:
    09.04.2009
    Beiträge:
    425
    Geschlecht:
    männlich
    Ort:
    im Tor zur Welt ;-)
    Software:
    Notepad++ / CS4
    Frage zum Verlinken
    AW: Frage zum Verlinken

    das steht ja dann auch in den umbenannten kopien drin -
    der inhalt sollte sich nur ändern.
    vllt solltest mit mal n bissl code geben - index.htm und css -
    sonst wird es sehr theoretisch.
     
    #4      
  5. Kadey

    Kadey Nicht mehr ganz neu hier

    Dabei seit:
    08.07.2009
    Beiträge:
    104
    Geschlecht:
    männlich
    Frage zum Verlinken
    AW: Frage zum Verlinken

    Ja das stimmt...

    Hier die Index

    PHP:
    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. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>TEST 2</title>
    6. <link href="css/style_index.css" rel="stylesheet" type="text/css" media="screen" />
    7. <link rel="stylesheet" href="css/menu_style_oben.css" type="text/css" media="screen" />
    8. <link rel="stylesheet" href="css/menu_style_links.css" type="text/css" />
    9.  
    10. </head>
    11.  
    12. <body>
    13.     <div id="komplett">
    14.         <div id="kopf">
    15.             <a href="index.html" id="logo" class="noText" title="www.petersen-lürschau.de">Petersen Lürschau
    16.                 </a></div>
    17.                         <ul id="menu">
    18.                            <li><a href="index.html" target="_self">Home</a></li>
    19.                            <li><a href="wir über uns.html" target="_self">Wir über uns</a></li>
    20.                           <li><a href="gallery.html" target="_self">Gallery</a></li>
    21.                            <li><a href="partner.html" target="_self">Partner/Links</a></li>
    22.                           <li><a href="kontakt.html" target="_self">Kontakt</a></li>
    23.                     </ul>
    24.  
    25.                
    26.                    
    27.        
    28. <div id="mainmitte">
    29.         <div class="links">
    30.             <div class="bild1"></div>
    31.            
    32.                 <ul id="menu_links">
    33.                 <li><a href="service.html" target="_self">Service</a></li>
    34.                     <li><a href="abschleppdienst.html" target="_self">Abschleppdienst</a></li>
    35.                 <li><a href="pannendienst.html" target="_self">Pannendienst</a></li>
    36.                 <li><a href="bergung.html" target="_self">Bergung</a></li>
    37.                 <li><a href="kranarbeiten.html" target="_self">Kranarbeiten</a></li>
    38.                 <li><a href="überführung.html" target="_self">Überführung</a></li>
    39.                 <li><a href="autoversicherung.html" target="_self">Autoversicherung?</a></li>
    40.                 <li><a href="werkstatt.html" target="_self">Werkstatt</a></li>
    41.                 <li><a href="reifenservice.html" target="_self">Reifenservice</a></li>
    42.                
    43.               </ul>
    44.             <div class="bild2">
    45.                 <div class="text">
    46.                         TEST TEST TEST</div></div>
    47.                 </div><!--End of links-->
    48.                        
    49.                        
    50.         <div class="mitte">
    51.        <h1> Herzlich Willkommen</h1>
    52.        <p>Hier entsteht unsere neue Homepage!</p>
    53.         </div><!--End of mitte-->
    54.                        
    55.                        
    56.         <div class="rechts">
    57.             <div class="bild3"></div>
    58.              </div><!--End of rechts-->
    59.                        
    60.                    
    61.                        
    62.        </div><!--End of Mainmitte-->
    63.        
    64.        
    65.  
    66.    
    67. </div></div><!--End of Komplett-->
    68.  
    69.  
    70. <div id="unten">
    71.     <div class="unten_links">
    72.                 <a href="index.html" target="_self">Startseite</a>
    73.                     <a href="*********html" target="_self">Anfahrt</a>
    74.                 <a href="impressum.html" target="_self">Impressum</a>
    75.                 </div>
    76. </div><!--End of Unten-->  
    77.  
    78.  
    79.  
    80.  
    81.  
    82.  
    83.  
    84.  
    85. </body>
    86. </html>
    87.  

    Und hier die Css

    PHP:
    1. @charset "utf-8";
    2. /* CSS Document */
    3.  
    4. * { margin:0; padding:0; border:0;}
    5.  
    6. body { background:#999999;}
    7.  
    8. div#komplett { width:980px; margin:0 auto;}
    9.  
    10. .noText { text-indent:-9999px; color:#003366; font-size:1px; overflow:hidden; }
    11.  
    12. div#kopf { width:980px; background: url(file:///C|/Users/Icke/Desktop/TEST%202/bilder/Bilder/bg-header.png) 0 0 no-repeat; height:187px; position:relative; }
    13. div#kopf a#logo { width:505px; height:187px; display:block; position:absolute; top:1px; left:10px; }
    14.  
    15. div#mainmitte { width:980px; height:510px; margin-top:40px;}
    16.  
    17.  
    18. .links {
    19. width: 150px;
    20. height:500px;
    21. background-color: #003366;
    22. float:left;
    23. margin:0px 0px 0px 0px;}
    24.  
    25.     .bild1 { width:150px; height:36px; background:url(../bilder/Bilder/Leistungen.gif) no-repeat; }
    26.     .bild2 { width:150px; height:36px; background:url(../bilder/Bilder/24h-hotline.gif) no-repeat; }
    27.         .text { padding:50px 0px 0 15px ;}
    28.    
    29.     .hotline {}
    30.  
    31.  
    32. .mitte {
    33. width: 655px;
    34. height:500px;
    35. float:left;
    36. background-color: #CCCCCC;
    37. margin:0px 11px 0px 11px;
    38. }
    39.     .mitte h1 { padding:10px 0px 0px 15px }
    40.     .mitte p { padding:10px 25px 0px 15px; font-family:Georgia, "Times New Roman", Times, serif; }
    41.  
    42.  
    43.  
    44. .rechts {
    45. width: 150px;
    46. height:500px;
    47. float:left;
    48. background-color: #003366;
    49. margin:0px 0px 0px 0px;
    50. }
    51.     .bild3 { width:150px; height:36px; background:url(../bilder/Bilder/Partner.gif) no-repeat; }
    52.  
    53. div#unten { width:980px; height:45px; background:url(../bilder/Bilder/bg-footer.gif); margin:0 auto; }
    54.    .unten_links { padding-left:355px; padding-right:355px;}
     
    #5      
  6. AlexanderBo

    AlexanderBo Gesperrt

    Dabei seit:
    09.04.2009
    Beiträge:
    425
    Geschlecht:
    männlich
    Ort:
    im Tor zur Welt ;-)
    Software:
    Notepad++ / CS4
    Frage zum Verlinken
    AW: Frage zum Verlinken

    habs nur überflogen.

    hier ist ein schliessendes zuviel.
    Code (Text):
    1.  
    2. </div>[B]</div>[/B]<!--End of Komplett-->
    3.  

    die ganzen können raus werden nicht benötigt.
    Code (Text):
    1.  
    2. target="_self"
    3.  
    und hier ändert sich der jeweilige content der seite.
    Code (Text):
    1.  
    2.        <div class="mitte">
    3.        <h1> Herzlich Willkommen</h1>
    4.        <p>Hier entsteht unsere neue Homepage!</p>
    5.         </div><!--End of mitte-->
    6.  
     
    #6      
  7. Kadey

    Kadey Nicht mehr ganz neu hier

    Dabei seit:
    08.07.2009
    Beiträge:
    104
    Geschlecht:
    männlich
    Frage zum Verlinken
    AW: Frage zum Verlinken

    Also war ich schon aufm richtigen Weg.
    Muss also meine endgültig fertig gestylte Index kopieren und nur
    (in meinem Fall)
    <h1> und <p> ändern...oder ???
     
    #7      
  8. AlexanderBo

    AlexanderBo Gesperrt

    Dabei seit:
    09.04.2009
    Beiträge:
    425
    Geschlecht:
    männlich
    Ort:
    im Tor zur Welt ;-)
    Software:
    Notepad++ / CS4
    Frage zum Verlinken
    AW: Frage zum Verlinken

    ja... in "mitte" ist der einxliche inhalt der sich auf den unterseiten ändern sollte..

    mit php liesse sich das ganze natürlich vereinfachem -
    aber egal ob das auf deinem space vorhanden ist -
    denke ich du kannst erstmal so arbeiten - will dich nicht verwirren.
     
    #8      
  9. Kadey

    Kadey Nicht mehr ganz neu hier

    Dabei seit:
    08.07.2009
    Beiträge:
    104
    Geschlecht:
    männlich
    Frage zum Verlinken
    AW: Frage zum Verlinken

    Ich bins nochmal,

    habe das jetzt alles so lala gebacken bekommen. Jetzt aber ein anderes Problem.

    Habe die Site zum Testen mal hochgeladen, nur leider wird mein Header nicht angezeigt.

    Wenn ich im Dreamweaver teste..wird der mir angezeigt....Stehe wieder vor lauter ????????
     
    #9      
  10. AlexanderBo

    AlexanderBo Gesperrt

    Dabei seit:
    09.04.2009
    Beiträge:
    425
    Geschlecht:
    männlich
    Ort:
    im Tor zur Welt ;-)
    Software:
    Notepad++ / CS4
    Frage zum Verlinken
    AW: Frage zum Verlinken

    vermeide leerzeichen in seitenaufrufen...
    a lá "wir über uns.html"
    achte auf grossKLEINschreibung
     
    #10      
  11. Kadey

    Kadey Nicht mehr ganz neu hier

    Dabei seit:
    08.07.2009
    Beiträge:
    104
    Geschlecht:
    männlich
    Frage zum Verlinken
    AW: Frage zum Verlinken

    Habe es jetzt nochmal im Internet Explorer getestet. Da wird der Header komischerweise angezeigt.

    Warum denn nicht im Firefox ??
     
    #11      
  12. AlexanderBo

    AlexanderBo Gesperrt

    Dabei seit:
    09.04.2009
    Beiträge:
    425
    Geschlecht:
    männlich
    Ort:
    im Tor zur Welt ;-)
    Software:
    Notepad++ / CS4
    Frage zum Verlinken
    AW: Frage zum Verlinken

    wenn FF zigt ist es eher ungewöhnlich...
    also her mit der aktuellen index. und allen .css
     
    #12      
  13. Kadey

    Kadey Nicht mehr ganz neu hier

    Dabei seit:
    08.07.2009
    Beiträge:
    104
    Geschlecht:
    männlich
    Frage zum Verlinken
    AW: Frage zum Verlinken

    Jop..code kommt..

    Hier Index

    PHP:
    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. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>www.Petersen-Lürschau.de</title>
    6. <link href="css/style_index.css" rel="stylesheet" type="text/css" media="screen" />
    7. <link rel="stylesheet" href="css/menu_style_oben.css" type="text/css" media="screen" />
    8. <link rel="stylesheet" href="css/menu_style_links.css" type="text/css" media="screen" />
    9.  
    10. </head>
    11.  
    12. <body>
    13.     <div id="komplett">
    14.         <div id="kopf">
    15.             <a href="index.html" id="logo" class="noText" title="www.petersen-lürschau.de">Petersen Lürschau
    16.                 </a></div>
    17.                         <ul id="menu">
    18.                            <li><a href="index.html">Home</a></li>
    19.                            <li><a href="seiten/wir_über_uns.html">Wir über uns</a></li>
    20.                           <li><a href="seiten/gallery.html">Gallery</a></li>
    21.                            <li><a href="seiten/partner.html">Partner/Links</a></li>
    22.                           <li><a href="seiten/kontakt.html">Kontakt</a></li>
    23.                     </ul>
    24.  
    25.                
    26.                    
    27.        
    28. <div id="mainmitte">
    29.         <div id="links">
    30.             <div class="bild1"></div>
    31.            
    32.                 <ul id="menu_links">
    33.                 <li><a href="seiten/service.html" >Service</a></li>
    34.                     <li><a href="seiten/abschleppdienst.html">Abschleppdienst</a></li>
    35.                 <li><a href="seiten/pannendienst.html" >Pannendienst</a></li>
    36.                 <li><a href="seiten/bergung.html">Bergung</a></li>
    37.                 <li><a href="seiten/kranarbeiten.html">Kranarbeiten</a></li>
    38.                 <li><a href="seiten/überführung.html" >Überführung</a></li>
    39.                 <li><a href="seiten/autoversicherung.html">Autoversicherung?</a></li>
    40.                 <li><a href="seiten/werkstatt.html" >Werkstatt</a></li>
    41.                 <li><a href="seiten/reifenservice.html">Reifenservice</a></li>
    42.                
    43.               </ul>
    44.             <div class="bild2">
    45.             </div>
    46.                
    47.                
    48.                 </div><!--End of links-->
    49.                        
    50.                        
    51.         <div id="mitte">
    52.        <h1> Herzlich Willkommen</h1>
    53.        <p>Hier entsteht unsere neue Homepage!</p>
    54.         </div><!--End of mitte-->
    55.                        
    56.                        
    57.         <div id="rechts">
    58.             <div class="bild3"></div>
    59.                
    60.                     <div id="vba">
    61.                     <a href="http://www.vba-service.de/" id="link1" class="noText" title="www.vba-service.de">Verband der Bergungs- und Abschleppunternehmen e. V.
    62.                     </a> </div>
    63.                     <div id="assistance"><a href="http://www.assistancepartner.de/" id="link2" class="noText" title="www.assistancepartner.de/">Assistance Partner GmbH & Co. KG
    64.                     </a></div>
    65.                
    66.                
    67.                
    68.              </div><!--End of rechts-->
    69.                        
    70.                    
    71.                        
    72.        </div><!--End of Mainmitte-->
    73.        
    74.        
    75.  
    76.    
    77. </div><!--End of Komplett-->
    78.  
    79.  
    80. <div id="unten">
    81.     <div class="unten_links">
    82.                 <a href="index.html">Startseite</a>
    83.                     <a href="seiten/*********html">Anfahrt</a>
    84.                 <a href="seiten/impressum.html">Impressum</a>
    85.                 </div>
    86. </div><!--End of Unten-->  
    87.  
    88.  
    89.  
    90.  
    91.  
    92.  
    93.  
    94.  
    95. </body>
    96. </html>
    97.  
    Hier Style für Index

    PHP:
    1. @charset "utf-8";
    2. /* CSS Document */
    3.  
    4. * { margin:0; padding:0; border:0;}
    5.  
    6. body { background:#565555;}
    7.  
    8. div#komplett { width:980px; margin:0 auto;}
    9.  
    10. .noText { text-indent:-9999px; color:#003366; font-size:1px; overflow:hidden; }
    11.  
    12. div#kopf { width:980px; background: url(../bilder/Bilder/bg-header.jpg) no-repeat; height:187px;}
    13. div#kopf a#logo { width:505px; height:187px;display:block; position:absolute; top:1px; left:10px; }
    14.  
    15. div#mainmitte { width:980px; height:510px; margin-top:40px;}
    16.  
    17.  
    18. div#links {
    19. width: 150px;
    20. height:500px;
    21. background-color: #003366;
    22. float:left;
    23. margin:0px 0px 0px 0px;}
    24.  
    25.     .bild1 { width:150px; height:36px; background:url(../bilder/Bilder/Leistungen.gif) no-repeat; }
    26.     .bild2 { width:150px; height:140px; background:url(../bilder/Bilder/telefon.gif) no-repeat;}
    27.    
    28.        
    29.    
    30.    
    31.  
    32.  
    33. div#mitte {
    34. width: 655px;
    35. height:500px;
    36. float:left;
    37. background-color: #CCCCCC;
    38. margin:0px 11px 0px 11px;
    39. }
    40.     #mitte h1 { padding:10px 0px 0px 15px }
    41.    #mitte p { padding:10px 25px 0px 15px; font-family:Georgia, "Times New Roman", Times, serif; }
    42.  
    43.  
    44.  
    45. div#rechts {
    46. width: 150px;
    47. height:500px;
    48. float:left;
    49. background-color: #003366;
    50. margin:0px 0px 0px 0px;
    51. }
    52.     .bild3 { width:150px; height:36px; background:url(../bilder/Bilder/Partner.gif) no-repeat; }
    53.     div#vba { width:117px; height:83px; background:url(../bilder/Bilder/vba.gif) no-repeat; margin:5px auto;}
    54.        div#vba a#link1 { width:117px; height:83px; display:block; position:absolute; top:270px;}
    55.        
    56.         div#assistance { width:140px; height:56px; background:url(../bilder/Bilder/assistance.gif) no-repeat; margin:0 auto;}
    57.            div#assistance a#link2 { width:140px; height:56px; position:absolute; top:355px;}
    58.        
    59.        
    60.        
    61.  
    62. div#unten { width:980px; height:45px; background:url(../bilder/Bilder/bg-footer.gif); margin:0 auto; }
    63.    .unten_links { padding-left:355px; padding-right:355px;}
    64.  
    Hier Style für obere Navi

    PHP:
    1. #menu {
    2.    background: #333;
    3.    float: left;
    4.     list-style: none;
    5.     margin: 0;
    6.     padding: 0;
    7.     width: 100%;
    8.    
    9. }
    10. #menu li {
    11.    float: left;
    12.     font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    13.     margin: 0;
    14.     padding: 0;
    15.    
    16. }
    17. #menu a {
    18.    background: #333 url("images/seperator_oben.gif") bottom right no-repeat;
    19.    color: #ccc;
    20.    display: block;
    21.     float: left;
    22.     margin: 0;
    23.     padding: 8px 68px;
    24.     text-decoration: none;
    25.     font-weight:normal;
    26.     margin-left:8px;
    27. }
    28. #menu a:hover {
    29.    background: #2580a2 url("images/hover_oben.gif") bottom center no-repeat;
    30.    color: #fff;
    31.    padding-bottom: 8px;
    32.     }
    Hier Style linke Navi

    PHP:
    1. #menu_links {
    2.    background: #333;
    3.    list-style: none;
    4.     margin-top:0px;
    5.     padding: 0;
    6.     width: 150px;
    7. }
    8. #menu_links li {
    9.    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    10.     margin: 0;
    11.     padding: 0;
    12. }
    13. #menu_links a {
    14.    background: #333;
    15.    border-bottom: 1px solid #393939;
    16.    color: #ccc;
    17.    display: block;
    18.     margin: 0;
    19.     padding: 10px 14px;
    20.     text-decoration: none;
    21.     font-weight:normal;
    22. }
    23. #menu_links a:hover {
    24.    background: #2580a2 url("images/hover.gif") left center no-repeat;
    25.    color: #fff;
    26.    padding-bottom: 8px;
    27. }
    Sorry fürs zu spammen...
     
    #13      
  14. Marc_

    Marc_ Noch nicht viel geschrieben

    Dabei seit:
    07.07.2010
    Beiträge:
    4
    Geschlecht:
    männlich
    Frage zum Verlinken
    AW: Frage zum Verlinken

    Die URL zum Header-Bild gibst du so an
    HTML:
    1. background: url(../bilder/Bilder/bg-header.jpg)
    für die anderen Bilder so
    HTML:
    1. url("images/seperator_oben.gif")
    eventuell liegts daran
    ;)
     
    #14      
  15. Kadey

    Kadey Nicht mehr ganz neu hier

    Dabei seit:
    08.07.2009
    Beiträge:
    104
    Geschlecht:
    männlich
    Frage zum Verlinken
    AW: Frage zum Verlinken

    Habe es mal geändert..daran liegt es aber nicht...

    Hat denn niemand ne Idee warum mein Header im IE angezeigt wird und im FF nicht ???
     
    #15      
  16. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Frage zum Verlinken
    AW: Frage zum Verlinken

    Dann kannst ja auch nen Link posten.

    WAS hast du geändert und WIE? Wir sind hier doch nicht bei "Rate mal mit Rosenthal", das man euch auch jedes Wort einzeln aus der Nase ziehen muss. :rolleyes:
     
    #16      
  17. Kadey

    Kadey Nicht mehr ganz neu hier

    Dabei seit:
    08.07.2009
    Beiträge:
    104
    Geschlecht:
    männlich
    Frage zum Verlinken
    AW: Frage zum Verlinken

    Sicherheitsfehler: Inhalt auf http://meineSeite.de/css/style_index.css darf file:///C|/Users/Icke/Desktop/TEST%202/bilder/Bilder/bg-header.png nicht laden oder verlinken.


    Die Fehlerkonsole von Firefox zeigt mir diesen Fehler an.

    Frage mich nur warum alles andere im FF angezeigt ???
    Kennt jemand diesen Fehler ??

    mfg
     
    #17      
  18. Kadey

    Kadey Nicht mehr ganz neu hier

    Dabei seit:
    08.07.2009
    Beiträge:
    104
    Geschlecht:
    männlich
    Frage zum Verlinken
    AW: Frage zum Verlinken

    Hi Leute,

    habe mein Problem gelöst bekommen. Ich weis zwar nicht warum das jetzt auf einmal geht aber ich sage trotzdem mal was ich gemacht habe...

    Da sich die Sicherheitsfehlermeldung ja auf den Header bezieht, habe ich einfach mal versucht, dass Div abzuändern und die Bg-Grafik als Jpeg zu speichern. Siehe da...es hat wohl was gebracht. Kann mir zwar nicht vorstellen das das daran lag aber jetzt gehts und ich bin zufrieden.

    Danke nochmal für alle antworten.

    mfg
     
    #18      
x
×
×