kostenloser Webspace werbefrei: lima-city


Kasten mit Ecken um Link

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    askarian

    Kostenloser Webspace von askarian

    askarian hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. 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 ?
  4. 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
  5. Autor dieses Themas

    askarian

    Kostenloser Webspace von askarian

    askarian hat kostenlosen Webspace.

    Eig. meinte ich, dass der gesamte Kasten ein Link ist.
    Geht das so?


    Und 2. border-radius geht nicht überall
  6. 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
  7. Autor dieses Themas

    askarian

    Kostenloser Webspace von askarian

    askarian hat kostenlosen Webspace.

    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.
  8. 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.
  9. Autor dieses Themas

    askarian

    Kostenloser Webspace von askarian

    askarian hat kostenlosen Webspace.

  10. 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
  11. Autor dieses Themas

    askarian

    Kostenloser Webspace von askarian

    askarian hat kostenlosen Webspace.

    Ok, danke für die Tipps.
    Habe die Höhe mal von 55 auf 40 Pixel runtergeschraubt.
  12. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!