|
|||
CSS von Link auf ASP:ImageButton umschreiben
Guten Tag,
ich bin in CSS noch sehr frisch und komme noch nicht so klar wie ich gerne möchte. Ich habe im Netz eine CSS Datei für einen MAC OS like Dock gefunden. Code:
body{ background: #eee; } .container{ margin: 0 auto; width: 700px; } .logo{ text-align: center; margin-bottom: 76px; } .dock ul{ display: inline-block; float: left; width: auto; margin: 0px; padding: 0px; list-style: none; background: rgba(0, 0, 0, 0.3); padding-right: 76px; } .dock ul li { width: auto; height: auto; display: inline-block; bottom: 0; vertical-align: bottom; margin-top: -43px; } .dock ul li a { display: block; height: 100px; width: 100px; position: relative; -webkit-transition-property: width, height,margin-top; -webkit-transition-duration: 0.5s; -o-transition-property: width, height,margin-top; -o-transition-duration: 0.5s; -moz-transition-property: width, height,margin-top; -moz-transition-duration: 0.5s; -ms-transition-property: width, height,margin-top; -ms-transition-duration: 0.5s; } .dock ul li a:hover { width: 150px; height: 150px; margin-top: -50px; } .dock ul li a img { width: 100%; position: absolute; bottom: 0; left: 0; border: none; padding: 0px 0px 0px 30px; } .dock_left{ width: 31px; -webkit-transform: rotate(33deg); -moz-transform: rotate(33deg); -ms-transform: rotate(33deg); -o-transform: rotate(33deg); position: relative; background: #fff ; overflow: hidden; float: left; height: 100px; z-index: 2; margin: -18px; } .dock_right{ width: 36px; -webkit-transform: rotate(-33deg); -moz-transform: rotate(-33deg); -ms-transform: rotate(-33deg); -o-transform: rotate(-33deg); position: relative; background: #fff; overflow: hidden; float: left; height: 100px; z-index: 2; margin: -18px; } Code:
<div class="dock_left"></div> <div class="dock"> <ul> <li><a href="http://techumber.com/"><img src="images/Zeiterfassung.png" alt="Heia"></a></li> <li><a href="http://techumber.com/"><img src="images/Schloss.png" alt="Apple"></a></li> <li><a href="http://techumber.com/"><img src="images/Schloss.png" alt="Safari"></a></li> <li><a href="http://techumber.com/"><img src="images/Schloss.png" alt="harddrive"></a></li> <li><a href="http://techumber.com/"><img src="images/Schloss.png" alt="Tools"></a></li> </ul> </div> <div class="dock_right"></div> Kann mir da jemand helfen und mir den Weg weisen? Danke |
Sponsored Links |
|
|||
CSS wird im Browser(Clienten) abgearbeitet und dazu gehört auch Html.
Zeige uns daher bitte auch den HTML Code. Wie es im Server erstellt wird, ist nebensächlich. Ob da also ASP, Python oder PHP seinen Dienst im Server verrichtet weiss der Browser gar nicht, bzw. ist ihm total egal.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
|||
Gott, wie kleinlich
Umgeschrieben werden sollte der obrige Code auf: Code:
<div class="dock_left"></div> <div class="dock"> <ul> <asp:ImageButton ID="aa" runat="server" ImageUrl="~/images/Zeiterfassung.png" Class="???" /> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/Schloss.png" Class="???" /> <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/images/Schloss.png" Class="???" /> <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/images/Schloss.png" Class="???" /> <asp:ImageButton ID="ImageButton4" runat="server" ImageUrl="~/images/Schloss.png" Class="??? /> </ul> </div> <div class="dock_right"></div> |
|
|||
Zitat:
Schon einmal Websites mit Visual Studio erstellt? |
|
|||
Nein.
Und ich denke, explanator hat dir deine Antwort schon geliefert: Zitat:
|
|
|||
Falsches HTML, verwende immer den Validator um deinen Code zu testen.
Nach dem UL-Element kommen die LI-Elemente. Innerhalb der LI-Elemente kannst du dann deine Buttons mit dem IMG-Element ausgeben. Beispiel: HTML-Code:
<div class="dock"> <ul> <li> <button ID="ImageButton1 type="button"> <img src="/images/Zeiterfassung.png" alt=""> </button> </li> <li> <button ID="ImageButton2 type="button"> <img src="/images/Schloss.png" alt=""> </button> </li> </ul> </div> Code:
.dock ul li a:hover { width: 150px; height: 150px; margin-top: -50px; } Code:
.dock ul li button:hover { width: 150px; height: 150px; margin-top: -50px; } Zitat:
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. Geändert von explanator (18.06.2014 um 14:45 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
"Zurücktaste" bei CSS Link | Stadi71 | CSS | 3 | 30.03.2014 21:23 |
ein bild aus css ein link verpassen | quartier | CSS | 3 | 18.05.2012 00:11 |
CSS Navigation aktiver Link | mimii | CSS | 0 | 25.08.2008 11:50 |
CSS und IE - Link als Block macht Probleme | Morjo | CSS | 4 | 25.06.2008 14:28 |
Hintergrundbild mit CSS und Link??? | Gifmik | CSS | 2 | 06.02.2006 14:27 |