Frage zum Verlinken

Kadey · 09.07.2010

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

AlexanderBo · 09.07.2010

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 ;-)

Kadey · 09.07.2010

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...

AlexanderBo · 09.07.2010

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.

Kadey · 09.07.2010

AW: Frage zum Verlinken

Ja das stimmt...

Hier die Index

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST 2</title>
<link href="css/style_index.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" href="css/menu_style_oben.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/menu_style_links.css" type="text/css" />

</head>

<body>
    <div id="komplett">
        <div id="kopf">
            <a href="index.html" id="logo" class="noText" title="www.petersen-lürschau.de">Petersen Lürschau
                </a></div>
                        <ul id="menu">
                           <li><a href="index.html" target="_self">Home</a></li>
                           <li><a href="wir über uns.html" target="_self">Wir über uns</a></li>
                          <li><a href="gallery.html" target="_self">Gallery</a></li>
                           <li><a href="partner.html" target="_self">Partner/Links</a></li>
                          <li><a href="kontakt.html" target="_self">Kontakt</a></li>
                    </ul>

                
                    
        
<div id="mainmitte">
        <div class="links">
            <div class="bild1"></div>
            
                <ul id="menu_links">
                <li><a href="service.html" target="_self">Service</a></li>
                    <li><a href="abschleppdienst.html" target="_self">Abschleppdienst</a></li>
                <li><a href="pannendienst.html" target="_self">Pannendienst</a></li>
                <li><a href="bergung.html" target="_self">Bergung</a></li>
                <li><a href="kranarbeiten.html" target="_self">Kranarbeiten</a></li>
                <li><a href="überführung.html" target="_self">Überführung</a></li>
                <li><a href="autoversicherung.html" target="_self">Autoversicherung?</a></li>
                <li><a href="werkstatt.html" target="_self">Werkstatt</a></li>
                <li><a href="reifenservice.html" target="_self">Reifenservice</a></li>
                
              </ul>
            <div class="bild2">
                <div class="text">
                        TEST TEST TEST</div></div>
                </div><!--End of links-->
                        
                        
        <div class="mitte"> 
       <h1> Herzlich Willkommen</h1>
       <p>Hier entsteht unsere neue Homepage!</p>
        </div><!--End of mitte-->
                        
                        
        <div class="rechts">
            <div class="bild3"></div>
             </div><!--End of rechts-->
                        
                    
                        
       </div><!--End of Mainmitte-->
       
       

    
</div></div><!--End of Komplett-->


<div id="unten">
    <div class="unten_links">
                <a href="index.html" target="_self">Startseite</a>
                    <a href="*********html" target="_self">Anfahrt</a>
                <a href="impressum.html" target="_self">Impressum</a>
                </div>
</div><!--End of Unten-->  








</body>
</html>

Und hier die Css

PHP:

@charset "utf-8";
/* CSS Document */

* { margin:0; padding:0; border:0;}

body { background:#999999;}

div#komplett { width:980px; margin:0 auto;}

.noText { text-indent:-9999px; color:#003366; font-size:1px; overflow:hidden; }

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; }
div#kopf a#logo { width:505px; height:187px; display:block; position:absolute; top:1px; left:10px; }

div#mainmitte { width:980px; height:510px; margin-top:40px;}


.links {
width: 150px;
height:500px;
background-color: #003366; 
float:left; 
margin:0px 0px 0px 0px;}

    .bild1 { width:150px; height:36px; background:url(../bilder/Bilder/Leistungen.gif) no-repeat; }
    .bild2 { width:150px; height:36px; background:url(../bilder/Bilder/24h-hotline.gif) no-repeat; }
        .text { padding:50px 0px 0 15px ;}
    
    .hotline {}


.mitte {
width: 655px;
height:500px;
float:left;
background-color: #CCCCCC;
margin:0px 11px 0px 11px;
}
    .mitte h1 { padding:10px 0px 0px 15px }
    .mitte p { padding:10px 25px 0px 15px; font-family:Georgia, "Times New Roman", Times, serif; }



.rechts {
width: 150px;
height:500px;
float:left;
background-color: #003366;
margin:0px 0px 0px 0px;
} 
    .bild3 { width:150px; height:36px; background:url(../bilder/Bilder/Partner.gif) no-repeat; }

div#unten { width:980px; height:45px; background:url(../bilder/Bilder/bg-footer.gif); margin:0 auto; }
    .unten_links { padding-left:355px; padding-right:355px;}

AlexanderBo · 09.07.2010

AW: Frage zum Verlinken

habs nur überflogen.

hier ist ein schliessendes zuviel.

Code:

</div>[B]</div>[/B]<!--End of Komplett-->

die ganzen können raus werden nicht benötigt.

Code:

target="_self"

und hier ändert sich der jeweilige content der seite.

Code:

       <div class="mitte"> 
       <h1> Herzlich Willkommen</h1>
       <p>Hier entsteht unsere neue Homepage!</p>
        </div><!--End of mitte-->

Kadey · 09.07.2010

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 ???

AlexanderBo · 09.07.2010

AW: Frage zum Verlinken

Kadey schrieb:
...<h1> und <p> ändern...oder ???

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.

Kadey · 09.07.2010

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 ????????

AlexanderBo · 09.07.2010

AW: Frage zum Verlinken

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

Kadey · 09.07.2010

AW: Frage zum Verlinken

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

Warum denn nicht im Firefox ??

AlexanderBo · 09.07.2010

AW: Frage zum Verlinken

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

Kadey · 09.07.2010

AW: Frage zum Verlinken

Jop..code kommt..

Hier Index

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.Petersen-Lürschau.de</title>
<link href="css/style_index.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" href="css/menu_style_oben.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/menu_style_links.css" type="text/css" media="screen" />

</head>

<body>
    <div id="komplett">
        <div id="kopf">
            <a href="index.html" id="logo" class="noText" title="www.petersen-lürschau.de">Petersen Lürschau
                </a></div>
                        <ul id="menu">
                           <li><a href="index.html">Home</a></li>
                           <li><a href="seiten/wir_über_uns.html">Wir über uns</a></li>
                          <li><a href="seiten/gallery.html">Gallery</a></li>
                           <li><a href="seiten/partner.html">Partner/Links</a></li>
                          <li><a href="seiten/kontakt.html">Kontakt</a></li>
                    </ul>

                
                    
        
<div id="mainmitte">
        <div id="links">
            <div class="bild1"></div>
            
                <ul id="menu_links">
                <li><a href="seiten/service.html" >Service</a></li>
                    <li><a href="seiten/abschleppdienst.html">Abschleppdienst</a></li>
                <li><a href="seiten/pannendienst.html" >Pannendienst</a></li>
                <li><a href="seiten/bergung.html">Bergung</a></li>
                <li><a href="seiten/kranarbeiten.html">Kranarbeiten</a></li>
                <li><a href="seiten/überführung.html" >Überführung</a></li>
                <li><a href="seiten/autoversicherung.html">Autoversicherung?</a></li>
                <li><a href="seiten/werkstatt.html" >Werkstatt</a></li>
                <li><a href="seiten/reifenservice.html">Reifenservice</a></li>
                
              </ul>
            <div class="bild2">
            </div>
                
                
                </div><!--End of links-->
                        
                        
        <div id="mitte"> 
       <h1> Herzlich Willkommen</h1>
       <p>Hier entsteht unsere neue Homepage!</p>
        </div><!--End of mitte-->
                        
                        
        <div id="rechts">
            <div class="bild3"></div>
                
                    <div id="vba">
                    <a href="http://www.vba-service.de/" id="link1" class="noText" title="www.vba-service.de">Verband der Bergungs- und Abschleppunternehmen e. V.
                    </a> </div>
                    <div id="assistance"><a href="http://www.assistancepartner.de/" id="link2" class="noText" title="www.assistancepartner.de/">Assistance Partner GmbH & Co. KG
                    </a></div>
                
                
                
             </div><!--End of rechts-->
                        
                    
                        
       </div><!--End of Mainmitte-->
       
       

    
</div><!--End of Komplett-->


<div id="unten">
    <div class="unten_links">
                <a href="index.html">Startseite</a>
                    <a href="seiten/*********html">Anfahrt</a>
                <a href="seiten/impressum.html">Impressum</a>
                </div>
</div><!--End of Unten-->  








</body>
</html>

Hier Style für Index

PHP:

@charset "utf-8";
/* CSS Document */

* { margin:0; padding:0; border:0;}

body { background:#565555;}

div#komplett { width:980px; margin:0 auto;}

.noText { text-indent:-9999px; color:#003366; font-size:1px; overflow:hidden; }

div#kopf { width:980px; background: url(../bilder/Bilder/bg-header.jpg) no-repeat; height:187px;}
div#kopf a#logo { width:505px; height:187px;display:block; position:absolute; top:1px; left:10px; }

div#mainmitte { width:980px; height:510px; margin-top:40px;}


div#links {
width: 150px;
height:500px;
background-color: #003366; 
float:left; 
margin:0px 0px 0px 0px;}

    .bild1 { width:150px; height:36px; background:url(../bilder/Bilder/Leistungen.gif) no-repeat; }
    .bild2 { width:150px; height:140px; background:url(../bilder/Bilder/telefon.gif) no-repeat;}
    
        
    
    


div#mitte {
width: 655px;
height:500px;
float:left;
background-color: #CCCCCC;
margin:0px 11px 0px 11px;
}
    #mitte h1 { padding:10px 0px 0px 15px }
    #mitte p { padding:10px 25px 0px 15px; font-family:Georgia, "Times New Roman", Times, serif; }



div#rechts {
width: 150px;
height:500px;
float:left;
background-color: #003366;
margin:0px 0px 0px 0px;
} 
    .bild3 { width:150px; height:36px; background:url(../bilder/Bilder/Partner.gif) no-repeat; }
    div#vba { width:117px; height:83px; background:url(../bilder/Bilder/vba.gif) no-repeat; margin:5px auto;}
        div#vba a#link1 { width:117px; height:83px; display:block; position:absolute; top:270px;}
        
        div#assistance { width:140px; height:56px; background:url(../bilder/Bilder/assistance.gif) no-repeat; margin:0 auto;}
            div#assistance a#link2 { width:140px; height:56px; position:absolute; top:355px;}
        
        
        

div#unten { width:980px; height:45px; background:url(../bilder/Bilder/bg-footer.gif); margin:0 auto; }
    .unten_links { padding-left:355px; padding-right:355px;}

Hier Style für obere Navi

PHP:

#menu {
    background: #333;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    
}
#menu li {
    float: left;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    
}
#menu a {
    background: #333 url("images/seperator_oben.gif") bottom right no-repeat;
    color: #ccc;
    display: block;
    float: left;
    margin: 0;
    padding: 8px 68px;
    text-decoration: none;
    font-weight:normal;
    margin-left:8px;
}
#menu a:hover {
    background: #2580a2 url("images/hover_oben.gif") bottom center no-repeat;
    color: #fff;
    padding-bottom: 8px;
    }

Hier Style linke Navi

PHP:

#menu_links {
    background: #333;
    list-style: none; 
    margin-top:0px;
    padding: 0;
    width: 150px;
}
#menu_links li {
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
#menu_links a {
    background: #333;
    border-bottom: 1px solid #393939;
    color: #ccc;
    display: block;
    margin: 0;
    padding: 10px 14px;
    text-decoration: none;
    font-weight:normal;
}
#menu_links a:hover {
    background: #2580a2 url("images/hover.gif") left center no-repeat;
    color: #fff;
    padding-bottom: 8px;
}

Sorry fürs zu spammen...

Marc_ · 09.07.2010

AW: Frage zum Verlinken

Die URL zum Header-Bild gibst du so an

HTML:

background: url(../bilder/Bilder/bg-header.jpg)

für die anderen Bilder so

HTML:

url("images/seperator_oben.gif")

eventuell liegts daran

Kadey · 10.07.2010

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 ???

cebito · 10.07.2010

AW: Frage zum Verlinken

Kadey schrieb:
Habe die Site zum Testen mal hochgeladen...

Dann kannst ja auch nen Link posten.

Kadey schrieb:
Habe es mal geändert..daran liegt es aber nicht...

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:

Kadey · 10.07.2010

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

Kadey · 11.07.2010

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