Kasten mit Ecken um Link
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abgerundeten ecken
bild
blocken
browser
code
container
dank
display
eigenschaft
element
genau nachlesen
glauben
http
kasten
markup
radius
runden ecken
tip
url
verwenden
-
Hallo zusammen,
hat jemand eine Idee, wie ich einen Kasten mit Runden um einen Link darstellen kann.
Einen Kasten selber kann ich, aber mit Runden Ecken?
Und nen Kasten mit Runden Ecken auch. Allerdings in einen div, also ohne Link.
Danke,
askarian -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hey, ich weiß nicht, ob ich dich richtig verstanden habe:
Du willst einen Link in einem DIV mit abgerundeten Ecken.
Der DIV und die Ecken sind kein Problem.
Dann schreib' doch einfach in den DIV den Link. Oder war das anders gemeint ? -
Dafür gibt es die CSS3 Eigenschaft border-radius. Das ganze kann man dann noch wahlweise mit einem Rahmen kombinieren. Selbiges funktioniert auch mit Links. Diese müssen dann aber die Eigenschaft display:block aufweisen oder eben in einem DIV mit abgerundeten Ecken stehen.
Folgender HTML-Code:
<div class="kasten"> <!--Irgendwas, ein Link, ein Paragraph, ein Bild, ...--> </div>
...mit folgendem CSS:
.kasten{ width: 200px; height: 50px; background-color: red; border-radius: 4px; }
Beitrag zuletzt geändert: 3.6.2012 14:49:33 von cyclobox -
Eig. meinte ich, dass der gesamte Kasten ein Link ist.
Geht das so?
Und 2. border-radius geht nicht überall -
Wenn du willst, dass man überall im Kasten auf den Link klicken kann und nicht nur, wenn du über den Linktext fährst, dann geht das folgendermaßen:
HTML Markup:
<p> <a href="#" class="menu-item">Link 1</a> <a href="#" class="menu-item">Link 2</a> </p>
CSS:
.menu-item{ display: block; padding: 10px 30px; border-radius: 4px; color: #ffffff; background-color: #222222; }
Der Link selbst, also das a-Element muss dann per display:block zu einem Blockelement werden. Dazu noch ein bisschen Innenabstand über padding und man hat einen schönen Button.
Das stimmt, border-radius wird nicht von allen Browser unterstützt. Aber das sind nur sehr Alte. border-radius ist eine der CSS3-Eigenschaften, die alle namhaften Browser schon lange unterstützen. Die älteren dabie benötigen sogenannte Vendor-Prefixes.
Neben der normalen border-radius Eigenschaft definiert man noch für alle Browser(-engines) welche mit Vendor-Prefix. Aber vor die Eigenschaft ohne Prefix:
(...) -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; (...)
Hier kannst du ganz genau nachlesen, welcher Browser diese eigenschaft ab welcher Version unterstützt:
http://caniuse.com/#search=border-radius
Beitrag zuletzt geändert: 3.6.2012 15:01:41 von cyclobox -
Ok danke, Mir ist aufgefallen, dass ich auch einfach ein <a> Tag herum schreiben kann.
Und ich glaube, dass ich auf alten HP's surfe.
Trotzdem Danke.
Ich glaube, dass ich die HP nun was vereinfachen kann. -
Es wäre eventuell auch hilfreich einmal den konkreten Anwendungsfall zu sehen. Also wo du das verwenden willst.
Ich selbst verwende bei border-radius die Vendor-Prefixes nicht mehr, dieses CSS3 Feature kann man getrost ohne verwenden. -
Wo ich es ausprobiere: askarian.net/index.php?c=shop
-
Okey, dann hier erstmal ein Tipp. Du verwendest float:left um die a-Elemente nebeneinander anzuzeigen. Darum solltest du nach diesen Menüelementen, also bevor du <div class="navi"> mit </div> schließt, folgendes schreiben:
<div class="navi"> <!--Menü Elemente--> <div class="clear"></div> </div>
Die Klasse clear, die du in dem leeren Div-Container verwendest, erhält dann folgende CSS-Eigenschaften:
.clear { clear: both; height: 0; overflow: hidden; }
Sonst zerschießt du dir durch das Float das umliegende Layout. Es gibt auch noch andere Möglichkeiten diesen Effekt zu erreichen, ohne einen zusätzlichen DIV-Container einzubauen, allerdings sind diese Lösungen auch mit einem Mehraufwand verbunden, da sie komplizierter sind. Falls dich das aber interessiert, hier ist ein sehr ausführlicher Artikel dazu (englisch): http://www.positioniseverything.net/easyclearing.html
Weiterhin empfinde ich die Menüpunkte als zu hoch, zumal die Unterpunkte genauso hoch sind und somit viel von der Seite verdecken.
Beitrag zuletzt geändert: 3.6.2012 17:26:14 von cyclobox -
Ok, danke für die Tipps.
Habe die Höhe mal von 55 auf 40 Pixel runtergeschraubt. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
