zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Kreis um einen Menulink

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.03.2015, 12:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.03.2015
Beiträge: 22
kalenderfamily befindet sich auf einem aufstrebenden Ast
Standard Kreis um einen Menulink

Guten Morgen,

ich habe ein Problem mit CSS und dem Zeichnen eines Kreises um einen Menülink.

Habe schon Etliches versucht, probiert, aber irgendwie will das nicht und das Resultat ist immer oval....

Es geht um www.bildung-individuell.de, die Bereiche habe ich zur besseren Übersicht eingefärbt.

Das hier ist der Bereich für das Menü

Code:
.menu {

	font-size: 15px;
	background-color: yellow; /* kommentar */
	position: absolute;
	margin-top: 35px;
	margin-left: 35px;
 	margin-bottom: 10px;
	width: 600px;
           height: 70px;

}

Das hier ist der Code für den Kreis...

Code:
.menu a:link {

	margin-top: 10px;
	margin-left: 20px;
 	line-height: 70px;
	color: grey;
	text-decoration: none;
	background-color: red;
        -moz-border-radius: 150px; 
        -webkit-border-radius: 150px;
        border-radius: 300px; 
	vertical-align: middle;

}

.menu a:hover {

        text-decoration: none;
        background-color: blue;
        -moz-border-radius: 300px; 
        -webkit-border-radius: 300px;
        border-radius: 150px; 
        vertical-align: middle;

}

Für Lösungsansätze bin ich sehr dankbar!


Beste Grüße Kalenderfamily
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.03.2015, 13:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

spiel beim

HTML-Code:
.menu a:link
mal etwas mit padding rum.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.03.2015, 14:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.03.2015
Beiträge: 22
kalenderfamily befindet sich auf einem aufstrebenden Ast
Standard

Hallo MrMurphy, vielen Dank für den Tipp!!

Habe meinen Fehler auch gefunden: ich muss für a.visited natürlich auch einen Kreis festlegen...

Jetzt ist es aber so, dass der Kreis sich leider der Schrift anpasst und oval ist...

Der Kreis Bildung wird korrekt dargestellt, die übrigen sind verzogen..aber auch nur in Opera, im IE 10 sind alle verzogen...

Code:
	margin-left: 150px;
    	padding-top: 35px;
     	padding-right: 35px;
     	padding-bottom: 35px;
     	padding-left: 35px;
	text-decoration: none;
        background-color: white;
        -moz-border-radius: 70px; 
        -webkit-border-radius: 70px;
        border-radius: 70px;

Geändert von kalenderfamily (21.03.2015 um 14:46 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 21.03.2015, 15:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

du musst das a-Element wahrscheinlich erst mal quadratisch machen, also eine feste übereinstimmtende Breite und Höhe vergeben.

Gruss

MrMurphy
Mit Zitat antworten
  #5 (permalink)  
Alt 21.03.2015, 16:31
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Hallo kalenderfamily

Nur falls du es selber nicht hinbekommst!

Siehe Beispiel: Edit fiddle - JSFiddle

__________________
MfG Roland

Geändert von K.Roland (21.03.2015 um 16:34 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 21.03.2015, 18:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.03.2015
Beiträge: 22
kalenderfamily befindet sich auf einem aufstrebenden Ast
Standard

Guten Abend Roland,

vielen, vielen Dank, ich wäre darauf niemals gekommen!

Damit ich es verstehe: Du hast einfach ein ul und li Element gemacht und das einfach ausgerichtet, richtig? Außerdem hat dieses Element bestimmte Attribute bekommen. Deswegen kann ich auch den übrigen Quellcode mit .menu a unverändert lassen, da dieser sich nur auf Textlinks bezieht, richtig? Falls ich mich komisch ausdrücke, bitte ich um Nachsicht, ich arbeite nur hobbymäßig mit CSS und php.

Nun habe ich das Problem, dass das CMS nur eine Farbe für die Kreise zulässt und mit meiner Erfahrung sehe ich keine Möglichkeit eines overrides.

Kann ich denn jetzt die Links (Kreise) mit einer anderen Farbe überlegen??

viele Grüße
Kalenderfamily
Mit Zitat antworten
  #7 (permalink)  
Alt 21.03.2015, 18:52
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von kalenderfamily Beitrag anzeigen

Kann ich denn jetzt die Links (Kreise) mit einer anderen Farbe überlegen??
Ja. Edit fiddle - JSFiddle

__________
MfG Roland
Mit Zitat antworten
  #8 (permalink)  
Alt 21.03.2015, 21:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.03.2015
Beiträge: 22
kalenderfamily befindet sich auf einem aufstrebenden Ast
Standard

Guten Abend Roland,

ich weiß gar nicht, wie ich mich bedanken soll, ich wäre niemals darauf gekommen! Vielen, vielen herzlichen Dank für Deine Hilfe!!

Dir ein schönes Wochenende,

viele Grüße
Kalenderfamily
Mit Zitat antworten
  #9 (permalink)  
Alt 21.03.2015, 22:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.03.2015
Beiträge: 22
kalenderfamily befindet sich auf einem aufstrebenden Ast
Standard

Konnte den Code noch für hover und wechselnde Farben verwenden und werde morgen noch die Textfarbe versuchen zu ändern.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 21.03.2015, 22:36
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von kalenderfamily Beitrag anzeigen
Guten Abend Roland,
ich weiß gar nicht, wie ich mich bedanken soll, ich wäre niemals darauf gekommen! Vielen, vielen herzlichen Dank für Deine Hilfe!!
Gerne war keine große Sache.

Zitat:
Zitat von kalenderfamily Beitrag anzeigen
Dir ein schönes Wochenende,
Ich dir auch.

__________________
MfG Roland
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, kreis, link

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Kreis mit Text inhalt hakura CSS 3 13.08.2013 23:24
ext rechts und links an CSS Kreis floaten? choumana CSS 10 20.11.2012 15:12
Verschachtelter Bildaufbau Rico88 (X)HTML 5 08.03.2011 19:50
Adobe Illustrator CS Kreis ziehen Electrohunter Grafik, Design, Typografie 1 08.07.2009 12:16
Kreis bei Aufzählung eine andere Farbe geben Luca CSS 5 21.05.2006 20:09


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:10 Uhr.