zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS von Link auf ASP:ImageButton umschreiben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.06.2014, 12:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.06.2014
Beiträge: 9
icolor ist in Verruf geratenicolor ist in Verruf geraten
Standard 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;
}
BeispielCode in C# / HTML dazu:

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>
Jetzt möchte ich das oben genannte CSS derart umschreiben, das es nicht auf Link und Image reagiert, sondern auf asp:ImageButton.
Kann mir da jemand helfen und mir den Weg weisen?

Danke
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.06.2014, 13:28
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.06.2014, 13:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.06.2014
Beiträge: 9
icolor ist in Verruf geratenicolor ist in Verruf geraten
Standard

???

HTML Code steht doch bereit in meinem ersten Posting mit drin

???
Mit Zitat antworten
  #4 (permalink)  
Alt 18.06.2014, 14:02
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Es gibt dort keinen Button mit der ID oder Klasse asp:ImageButton.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 18.06.2014, 14:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.06.2014
Beiträge: 9
icolor ist in Verruf geratenicolor ist in Verruf geraten
Standard

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>
Mit Zitat antworten
  #6 (permalink)  
Alt 18.06.2014, 14:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Und woher sollten wir wissen, wo die asp-dinger hinkommen?
Dein Konstrukt ist außerdem nicht valides HTML, wo soll das denn zum Einsatz kommen? Das zeigt doch kein Browser so an.
Mit Zitat antworten
  #7 (permalink)  
Alt 18.06.2014, 14:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.06.2014
Beiträge: 9
icolor ist in Verruf geratenicolor ist in Verruf geraten
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Und woher sollten wir wissen, wo die asp-dinger hinkommen?
Dein Konstrukt ist außerdem nicht valides HTML, wo soll das denn zum Einsatz kommen? Das zeigt doch kein Browser so an.

Schon einmal Websites mit Visual Studio erstellt?
Mit Zitat antworten
  #8 (permalink)  
Alt 18.06.2014, 14:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Nein.
Und ich denke, explanator hat dir deine Antwort schon geliefert:
Zitat:
Zitat von explanator Beitrag anzeigen
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.
Um es umzuformulieren: Das <asp: Dingens ist egal, du musst nur dafür sorgen, dass der HTML Code im Endeffekt das ergibt, was du in deinem ersten Post geschrieben hast. Dann passt auch das CSS dazu.
Mit Zitat antworten
  #9 (permalink)  
Alt 18.06.2014, 14:42
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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>
Dein CSS passt du an, indem du a in button oder img änderst, je nachdem worauf reagiert werden soll.

Code:
.dock ul li a:hover {
    width: 150px;
    height: 150px;
    margin-top: -50px;
}
zu
Code:
.dock ul li button:hover {
    width: 150px;
    height: 150px;
    margin-top: -50px;
}
Zitat:
Schon einmal Websites mit Visual Studio erstellt?
Gegenfrage: Schon einmal Websites mit einem Texteditor erstellt?
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.

Geändert von explanator (18.06.2014 um 14:45 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 18.06.2014, 16:07
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von icolor Beitrag anzeigen
Jetzt möchte ich das oben genannte CSS derart umschreiben, das es nicht auf Link und Image reagiert, sondern auf asp:ImageButton.
Kann mir da jemand helfen und mir den Weg weisen?
Das was aus asp:ImageButton wird ist doch der Link und das Image. Insofern ist deine Frage wirklich schwer zu beantworten, da wir nicht Wissen was du meinst.
Mit Zitat antworten
Sponsored Links
Antwort

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
"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


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