Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag12.08.2014 um 01:33 (UTC)    
Titel: "nach oben"-Button-Position fixieren

Hallo Leute,

mein "nach oben" Button zeigt keine Funktion und ich bin am rätseln warum Rolling Eyes
Code bei "CSS-Code ohne Styletags":
Zitat:
/* Hover bei Mauskontakt Button */
#nach_oben a:hover {
color: #000000;
background-color: #fff400;}

#nach_oben {
color: #000000;
font-size: 12px;
font-family: verdana;
text-align: center;
width: 183px;
height: 33px;
background-color: #c9c9c9;
background-image: url();
border: 0px solid #c9c9c9;
margin-left:975px; }


Code bei "Text unter dem Design":
Zitat:

<id="nach_oben"><a href="#nach_oben">nach oben</a>


was stimmt da nicht Question danke für Hilfe
______________
mfG design-globe


Zuletzt bearbeitet von design-globe am 17.08.2014, 22:56, insgesamt 6-mal bearbeitet
Beitrag12.08.2014 um 06:01 (UTC)    
Titel:

<id="nach_oben">
Was soll denn das sein?
Ein Tag ohne Name nur mit ID-Attribut?
Wenn das das Sprungziel sein soll, zu dem hingescrollt wird, dann wird das so nicht funktionieren, da das kein valides HTML ist. Du kannst das ID-Attribut zu einem beliebigen HTML-Tag hinzufügen, aber quasi stand-alone geht nicht.

href="#nach_oben" bewirkt, dass der Browser zu einem Element mit der ID nach_oben scrollt (was es derzeit aber nicht gibt). Wenn du aber ohnehin nach ganz oben möchtest genügt href="#"
______________
Mit mir chatten? Besuche uns auf CookieChat.de (keine Anmeldung nötig, einfach einen Spitznamen einegeben)


Zuletzt bearbeitet von freefunstuff am 12.08.2014, 07:14, insgesamt einmal bearbeitet
Beitrag12.08.2014 um 07:12 (UTC)    
Titel:

freefunstuff hat Folgendes geschrieben:
<id="nach_oben">
Was soll denn das sein?

Embarassed mich mal gründlich schäme, ok jetzt mit # gehts
noch ein kleines Problem gibts, mir gehts zu schnell nach oben
im CSS-Code ist ja extra eine transition-Anweisung, wie muss ich diese ändern Question
...und die Hoverfunktion geht auch nicht

/* transition Button */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s; }

/* Hover bei Mauskontakt Button */
#nach_oben a:hover {
color: #000000;
background-color: #fff400;}


vielen dank freefunstuff Wink


Zuletzt bearbeitet von design-globe am 12.08.2014, 08:14, insgesamt einmal bearbeitet
Beitrag12.08.2014 um 07:36 (UTC)    
Titel:

Die Transitions-Definitionen, zu was sind die zugeordnet? Es geht zwar eine Klammer zu, aber wo geht die auf und was ist der zugehörige Selektor? Das gleiche gilt für "abgerundete Ecken Button", du hast nirgends definiert, was denn nun "Button" ist, also wofür diese Regeln gelten sollen.
Eine CSS Regel muss sich immer wie folgt aufbauen: Selektor { Regeln }
Der Selektor entscheidet welche HTML Elemente angesprochen werden sollen und die Regeln was mit diesen Elementen optisch passieren soll.

Ob man mit CSS eine Transition für das Springen zu einem Anker definieren kann weis ich nicht,... notfalls müsstest du das langsame Scrollen mit JavaScript umsetzen.

Die für hover definierten Regeln greifen noch nicht, da du weiterhin <id="nach_oben"> ... </id="nach_oben"> nutzt. Ersetze diese beiden durch das folgende und es sollte hinhauen: <div id="nach_oben"> ... </div>
______________
Mit mir chatten? Besuche uns auf CookieChat.de (keine Anmeldung nötig, einfach einen Spitznamen einegeben)


Zuletzt bearbeitet von freefunstuff am 12.08.2014, 08:37, insgesamt einmal bearbeitet
Beitrag12.08.2014 um 07:47 (UTC)    
Titel:

jetzt passts überhaupt nicht mehr
der Button sitzt unter dem Design und nicht im Footer und Hover geht trotzdem auch nicht Crying or Very sad
Beitrag12.08.2014 um 07:58 (UTC)    
Titel:

Du kannst die ID natürlich auch direkt im Link angeben:
<a href="#" id="nach_oben">nach oben</a>
Und das dann wieder in den Footer packen, du hast den Code ja jetzt außerhalb des Footers.

Oder du machst alles wie zuvor und nimmst nimmst anstatt div einfach span, wenn du nicht möchtest, dass es einen Zeilenumbruch gibt.

Dass hover noch nicht funktioniert kann daran liegen, dass du davor die ungültigen CSS Regeln hast:
Code:
/* abgerundete Ecken Button */
 border: 1px solid #c9c9c9;
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;

/* transition Button */
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s; }

Hier fehlen die Selektoren, es geht nur eine Klammer zu und keine auf. Mach den Teil weg oder korrigiere ihn.
______________
Mit mir chatten? Besuche uns auf CookieChat.de (keine Anmeldung nötig, einfach einen Spitznamen einegeben)
Beitrag12.08.2014 um 08:13 (UTC)    
Titel:

alles klar - habe im CSS-Code korrigiert
und lasse es jetzt so
danke dir vielmals
______________
mfG design-globe
Beitrag17.08.2014 um 22:02 (UTC)    
Titel:

nun muss ich hier nochmals aufmachen, wegen eines weiteren Problemes
und zwar folgendes:
ich habe auf der rechten Seite den "nach oben "-Button eingefügt und dieser wird bei mir bei einer Auflösung von 1240x1024 px korrekt neben dem Design angezeigt.

Nun hatte ich aber vor einpaar Tagen die Ansicht auf einem Laptop und da sitzt der Button im Footer und verdeckt den Impressum-Button.

Wenn ich dann aber den "nach oben"-Button weiter rechts positioniere ist er bei meiner Ansicht verschwunden (also zu weit rechts für meine Auflösung)

Wie bekomme ich es hin den Button eine fixe Position zu geben Question So dass er bei jeder Bildschirmauflösung rechts unten erscheint.

Danke für Hilfe
Beitrag18.08.2014 um 11:18 (UTC)    
Titel:

Das liegt an der "schlechten" Positionierung.
Zitat:
margin-left:975px;

beträgt jetzt immer der Abstand vom linken Bildrand aus. Heißt: Ist die Breite der Auflösung kleiner als ~1000px wird dieser nicht angezeigt.
Bin gerade aber überfragt wie du das löst, da margin: auto und position:absolute (left: 50% ...) in diesem Fall keine Lösungen sind.
______________
Gruß Pexxi
Beitrag18.08.2014 um 12:58 (UTC)    
Titel:

hi pexxi,

trotzdem erstmal danke für die Antwort, vielleicht kommt ja nochwas dazu von jemandem
______________
mfG design-globe
Beitrag18.08.2014 um 13:50 (UTC)    
Titel:

Du könntest ein div darum machen ->
Code:
#box {
width: 1000px;
margin: auto;}

/* Hover bei Mauskontakt Button */
#nach_oben a:hover {
color: #000000;
background-color: #fff400;}

#nach_oben {
color: #000000;
font-size: 12px;
font-family: verdana;
text-align: center;
width: 183px;
height: 33px;
background-color: #c9c9c9;
background-image: url();
border: 0px solid #c9c9c9;
float: right;}


Code:
<div id="box"> <a href="#" id="nach_oben">nach oben</a>  </div>


So bleibt der Button immer an gleicher Stelle
______________
Gruß Pexxi


Zuletzt bearbeitet von pexxi am 18.08.2014, 14:52, insgesamt einmal bearbeitet
Beitrag18.08.2014 um 16:03 (UTC)    
Titel:

pexxi hat Folgendes geschrieben:
Du könntest ein div darum machen
................
So bleibt der Button immer an gleicher Stelle

sehr gut, vielen dank, das hat schonmal funktioniert
jetzt hätte ich gerne noch drei Dinge die geändert werden müssten
1. der Hovereffekt wird nicht angezeigt (Farbe orange)
2. der Link "nach oben" soll nicht unterstrichen sein und
3. lässt sich der Button auf Höhe des Footers positionieren, weil er ja jetzt etwas weit unten erst angezeigt wird Question

danke
______________
mfG design-globe
Beitrag18.08.2014 um 17:23 (UTC)    
Titel:

2) #nach_oben a { text-decoration: none; }
3) Ich weiß ja noch gar nicht wie das Deisgn etc. aussieht, schließlich kenne ich die Homepage nicht. Würde aber mit der div-Methode nicht gehen. Dazu muss ich mir aber vorher erstmal ein Bild davon machen Wink
Da der Hover nicht angezeigt wird bezweifle ich, dass 2) funktioniert. Wie gesagt, die Homepage wäre vonnöten
______________
Gruß Pexxi
Beitrag18.08.2014 um 20:22 (UTC)    
Titel:

pexxi hat Folgendes geschrieben:
Ich weiß ja noch gar nicht wie das Deisgn etc. aussieht, schließlich kenne ich die Homepage nicht. Würde aber mit der div-Methode nicht gehen. Dazu muss ich mir aber vorher erstmal ein Bild davon machen Wink

danke pexxi
habe den Button jetzt eigentlich so , wie er sein soll
und es geht um meine Homepage http://www.design-globe.de/
daher verstehe ich das obere von dir nicht so richtig Embarassed
der Button ist mir noch etwas zu weit unten und sollte wenn möglich auf Höhe des Footers sein
und der Hover funktioniert nicht (bevor ich diese jetzigen Veränderungen alle gemacht habe ging das aber Rolling Eyes )
Beitrag18.08.2014 um 21:50 (UTC)    
Titel:

Am besten wäre es, wenn du das nochmal (sofern es möglich ist) auf den Stand von heute morgen bringst. Ich wusste ja nicht, wie das ganze Konstrukt aussah und habe daher mit den vorhandenen Codes aus diesem Thread gearbeitet.
So könnte ich dann sehen wie der Stand ist und darauf auf-/weiterbauen
______________
Gruß Pexxi
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de