kostenloser Webspace werbefrei: lima-city

Seiten internen Verweis mit # erweitern

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   mukerbude

   

   mukerbude hat kostenlosen Webspace.

   21:19, 4.5.2018

   Folgendes Konstrukt:
   
   <a href="gitarren.html#Ziel_01">
   
   Womit vom Navigator der MukerBude (nur dort kommen die # in den href vor) zur Seite Gitarren und dort in die darunter liegende Rubrik Ziel_01 gesprungen wird. Das funktioniert, ABER die angesprungene Überschrift von Ziel_01 steht direkt unter dem oberen Rand des Browsers.
   
   Da gehört einfach noch eine LeerZeile zwischen oberem Rand und der Überschrift hin.
   Wer eine Lösung dafür kennt bitte melden, weil es schrecklich aussieht, wenn die Überschrift direkt unter dem oberen Rand klebt.
   
   Danke schon mal
   sagt

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. fits-radio

   fits-radio hat kostenlosen Webspace.

   22:10, 4.5.2018

   Moin,
   du musst für den <H3> (Überschrift) in der CSS padding-top > 0 setzen (getestet mit 2rem)... dann bekommst du den gewünschten Abstand.
   
   Beitrag zuletzt geändert: 4.5.2018 22:17:18 von fits-radio
4. Autor dieses Themas

   mukerbude

   

   mukerbude hat kostenlosen Webspace.

   11:48, 5.5.2018

   Das wäre eine schnell gemachte Lösung, nur leider habe ich dann die großen Abstände für <h3> nach oben überall.
   
   Beitrag zuletzt geändert: 5.5.2018 11:57:26 von mukerbude

5. tchab

   tchab hat kostenlosen Webspace.

   12:02, 5.5.2018

   Versuche es mal mit einem
   

   <div id="target" ><br></div>

   
   
   Wäre zwar schlechter Stil, aber dann ist eine Zeile Platz darüber.
6. Autor dieses Themas

   mukerbude

   

   mukerbude hat kostenlosen Webspace.

   12:26, 5.5.2018

   Klar funktioniert das, aber genau wie vorher, der Abstand nach oben vergrößert sich immer und das soll ja nicht sein.
   
   Beitrag zuletzt geändert: 5.5.2018 12:31:29 von mukerbude

7. fits-radio

   fits-radio hat kostenlosen Webspace.

   12:29, 5.5.2018

   css:
   

   h3[id^="Ziel_"] {
      padding-top: 2rem;
   }

   
   So sollte es nur für deine Verweise funktionieren...
   
   Beitrag zuletzt geändert: 5.5.2018 12:32:09 von fits-radio
8. Autor dieses Themas

   mukerbude

   

   mukerbude hat kostenlosen Webspace.

   12:44, 5.5.2018

   Nein, genau das gleiche :-)

9. fits-radio

   fits-radio hat kostenlosen Webspace.

   12:57, 5.5.2018

   Habe es im FF getestet und noch margin-top hinzugefügt:
   

   h3[id^="Ziel_"] {
      margin-top: -2rem;
      padding-top: 2rem;
   }

   
   Die Regel habe ich nach dem einfachen <H3> eingefügt (format.css)...
   

   h2 {
   font-size:       2.4rem;
   line-height:     2.6rem;
   margin-top:      0.0rem;
   margin-bottom:   2.6rem;
   letter-spacing:  0.1rem;
   }
   
   h3 {
   font-size:       1.8rem;
   line-height:     2.0rem;
   margin-top:      0.0rem;
   margin-bottom:   1.2rem;
   letter-spacing:  0.05rem;
   }
   
   h3[id^="Ziel_"] {
     margin-top: -2rem;
     padding-top: 2rem;
   }
   
   h4 {
   font-size:       1.6rem;
   line-height:     1.8rem;
   margin-top:      0.0rem;
   margin-bottom:   1.2rem;
   letter-spacing:  0.0rem;
   }

   
   
   Beitrag zuletzt geändert: 5.5.2018 13:00:01 von fits-radio

10. tchab

    tchab hat kostenlosen Webspace.

    14:32, 5.5.2018

    mukerbude schrieb:
    Klar funktioniert das, aber genau wie vorher, der Abstand nach oben vergrößert sich immer und das soll ja nicht sein.

    
    
    Du beschwerst dich also darüber, dass der Browser das macht was du willst. Die Sprungmarke gibt dem Browser die Anweisung genau zu diesem Element zu springen. Wenn du Abstand möchtest muss der visuell vorhanden sein.
11. Autor dieses Themas

    mukerbude

    

    mukerbude hat kostenlosen Webspace.

    18:15, 6.5.2018

    Sorry für meine dämliche Frage.
    
    Ursprünglich sah der Code so aus:
    
    vorher:
    <br>
    <h3 id="Ziel_01">AkustikGitarren in Serie mit Empfehlungen</h3>
    
    nachher:
    <h3 id="Ziel_01"><br>AkustikGitarren in Serie mit Empfehlungen</h3>
    
    Am Bild der Site hat sich nichts geändert, außer, dass jetzt beim Sprung zu den Zielen zwischen Text und oberem Rand eine Leerzeile steht. Weil einfach einfach einfach bleiben soll!
    
    @tchab,
    nein, ich beschwere mich nicht darüber, dass der Browser macht was ich ihm vorgeben wird, sondern ich wollte aus optischen Gründen (das Auge isst bekanntlich mit, auch bei WebSites) eine kleine Erweiterung dessen was der Browser macht. Mit ein bisschen Nachdenken bin sogar ich drauf gekommen.
    
    Danke für alle Ratschläge
    sagt

12. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?