Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

bnAutumn: Link auf "banner" geht nicht richtig

Begonnen von Toni-S, 10. November 2016, 13:19:21

« vorheriges - nächstes »

Toni-S

Hallo Zusammen,
entsprechend der Empfehlung des Autors blacknight der "style.css" setzte ich einen Link auf den "banner", der zur Home-Seite führt. Im Prinzip funktioniert das zwar, aber der Curser wird nur auf ca. 20 px am oberen Rand des Banners aktiv. Ich würde den Curser natürlich lieber auf dem ganzen Foto aktivieren, denn nur das erwartet der Besucher. Leider finde ich nicht heraus, wo die Position des Cursers festlegt wurde und kann es somit nicht ändern. Aber vielleicht weiß es jemand von euch?     
Würde mich sehr freuen!
Toni

Hier die betreffende Stelle in der  "style.css":
   <body id="a0">
      <div id="container"> 
          <div id="banner">
<!-- Grafik kann z.B. als Link zur Startseite genutzt werden -->
      <a href="http://www.ssvc-rimsting.de">
                <div id="search">
          {SEARCH}
        </div>   

marusti

ungetestet:
#banner a {
    background: url(../grafiken/banner.jpg) no-repeat;
    display: block;
    height: 100%;
}

Wenn es funktioniert, kannst du die beiden Anweisungen (background, repeat) bei #banner löschen.

Toni-S

Zunächst eine Berichtigung: In meinem Thread schrieb ich von der "style.css". Es ist aber die Template im Adminbereich.

Zum Link-Problem:
Ich habe gemacht, was du mir aufschriebst, und der Link auf dem Header Foto funktionierte! Aber optisch scheint der content auf Tablettmaß geschrumpft zu sein.
Daraufhin überschrieb ich die geänderte Stelle mit der vorherigen Version, aber das verschobene Layout bleibt trotzdem. Ich habe keine Ahnung, was da passiert ist. Ich fürchte, ich komme nicht mehr weiter ohne dich.
Toni

marusti

Da ist wohl etwas in der HTML Datei durcheinander gekommen. Auf alle Fälle fehlt nach
<!-- Grafik kann z.B. als Link zur Startseite genutzt werden -->
            <a href="http://www.ssvc-rimsting.de">
ein </a>, vielleicht behebt das schon das Problem.

Toni-S

Es ist schon verflixt: Jetzt habe ich </a> und </a>, probiert, aber es ändert sich nichts. Ich könnte versuchen, das Backup vom Vormittag darüberzukopieren. Aber dadurch wäre zwar die Optik in Ordnung, aber das Linkproblem nicht gelöst.

marusti

Ok Fehler gefunden, das auskommentieren für einen anderen Tread war falsch

statt
/*
@media all and (max-width: 610px) {
#banner {
    display: none;
  }*/

@media all and (max-width: 610px) {
/* #banner {
    display: none;
  }*/

Oder einfach
#banner {
    display: none;
  }
löschen.

Toni-S

marusti, du bist a Hund!!!
Um Missverständnisse zu vermeiden: Das gilt bei uns am Alpenrand als Ausdruck höchster Bewunderung!
Jetzt funktioniert alles - sogar am iPhone. Ich bin begeistert! Du hast dir mindestens 2 Schokoladen verdient.
Toni

Toni-S

Zwei Kleinigkeiten noch:

1. Das Suchfeld war vorher im Foto, was mir designmäßig sehr gut gefiel. Jetzt ist es unter dem Header. Wie kann ich das rückgängig machen?

2. Vorher war es so, dass man das Browserfenster auf etwa 700 px verkleinern musste, bis es umbrach. Das war gut. Jetzt umbricht es leider schon bei 1000 px um. Das ist weniger gut, weil es nicht schön ist und weil man auch bei einem größeren Bildschirm das Browserfenster oft zwischen 700 und 1000 px einstellt, um z.B. andere geöffnete Fenster auf dem Desktop zu sehen. Ob das auch noch hinzukriegen ist?
Toni

marusti

Zitat von: Toni-S am 10. November 2016, 16:59:42
1. Das Suchfeld war vorher im Foto, was mir designmäßig sehr gut gefiel. Jetzt ist es unter dem Header. Wie kann ich das rückgängig machen?
Da muss die CSS etwas mehr angepasst werden durch die vorherigen Änderungen, daher bitte vorher eine Kopie anlegen. Ich konnte auch nicht alle media queries prüfen wie es ausschaut, das müsstest du dann machen.
Als erstes mal in der HTML bei <a href="http://www.ssvc-rimsting.de"></a>, das Komma löschen.
Dann in der CSS
#banner {position:relative}
bei #search {position absolute; top:10px} hinzufügen

und wenn du das willst, kannst du dann bei #containerclient das margin:-30px entweder raus nehmen oder die Zahl verringern.

Zitat von: Toni-S am 10. November 2016, 16:59:42
2. Vorher war es so, dass man das Browserfenster auf etwa 700 px verkleinern musste, bis es umbrach. Das war gut. Jetzt umbricht es leider schon bei 1000 px um. Das ist weniger gut, weil es nicht schön ist und weil man auch bei einem größeren Bildschirm das Browserfenster oft zwischen 700 und 1000 px einstellt, um z.B. andere geöffnete Fenster auf dem Desktop zu sehen. Ob das auch noch hinzukriegen ist?
Was genau meinst du? In der style_mobile.css sind verschiedene Breakpoints (media query) eingebaut (bei 1000px, 700px, 610px,500px und 480px). Die Zahlen kannst du nach deinen Bedürfnissen anpassen.

Toni-S

Ein weiteres Mal mein herzlicher Dank an marusti, doch leider auch eine weitere Frage, da ich mit den Feinheiten im CSS-Code nicht sehr vertraut bin. In der style.css gibt es seit der letzten Änderung kein #banner mehr, sondern nur noch ein # banner a. Meinst du dennoch dasselbe? Vielleicht habe ich die Umsetzung auch nicht CSS-valid gemacht, denn es änderte sich an der Position der Seach-Funktion nichts.

Das habe ich eingefügt:
#banner a { 
  position:relative;
  height: 200px;
  padding-top: 0px;
  margin-bottom:10px;
  background: url(../grafiken/banner.jpg) no-repeat;
  display: block;
  text-align:left;
  border:0px solid #FFFFFF;   
  box-shadow: 5px 10px 10px #808080;       
}

und diese Stelle:
#search{
position absolute; top: 10px;
  padding-left: 830px;
  font-size: 0.9em;
  display: box;
}

Danke für deine Bemühungen im Voraus!
Toni

marusti

Zitat von: Toni-S am 11. November 2016, 15:38:18
In der style.css gibt es seit der letzten Änderung kein #banner mehr, sondern nur noch ein # banner a.
Ich weiss nicht mehr in welchem Beitrag es war. Du hättest #banner nicht löschen sollen, sondern #banner a neu einfügen. Scheint aber auch so zu klappen (position absolute; scheint bei #search noch nicht eingefügt zu sein)

PS:   display: box; bei #search ist keine CSS Angabe, ich vermute mal das soll "block" (statt box) heißen.

Ob der Code valide ist, kannst du hier prüfen http://jigsaw.w3.org/css-validator/

djr

@marusti & @Toni-S:

Ihr habt da ein : (Doppelpunkt) vergessen:
Statt

#search {position absolute;
...

muss

#search {position: absolute;
...



Toni-S

@djr: Diesmal bin ich dir zuvorgekommen, denn ich habe den fehlenden Doppelpunkt SELBER gefunden :P ! Der Beweis müsste aus dem Link der letzten Änderung (im Footer) herauszulesen sein. Trotzdem, ich bin erstaunt, wie ihr Profis da genau hinschaut.

Nach marusti's Empfehlung habe ich den w3-css-validator drüberlaufen lassen. Dieser meint einen Fehler entdeckt zu haben, doch leider kann ich mit der Meldung alleine nichts anfangen, wenn ich keine Anleitung habe, den Fehler zu entfernen. Kann mir jemand den Fehler erklären und dann helfen, ihn auszuradieren? Ich denke, er hängt mir der Umbrechung bei 1000 px zusammen, die mir nicht gefiel.
Hier ist die Validator-Fehlermeldung:
   Einlese-Fehler @media all and (max-width: 500px) { #container { width: 450px; } #sidebar-a { margin-left: 30px; width:386px; } #rightmenu { width:386px; } }
Toni

marusti

Zitat von: Toni-S am 11. November 2016, 19:13:07
Hier ist die Validator-Fehlermeldung:
   Einlese-Fehler @media all and (max-width: 500px) { #container { width: 450px; } #sidebar-a { margin-left: 30px; width:386px; } #rightmenu { width:386px; } }
vor diesem Abschnitt fehlt beim Abschnitt davor am Ende ein }