Avatar billede steen_hansen Forsker
16. februar 2011 - 09:47 Der er 15 kommentarer og
1 løsning

Styling af <div>

Når man fører musen hen over en <div></div> på eksempelvis width: 701px, skal hele div'en være et link, og styles i

a:hover {
display: block;
width: 701px;
background-color: #eee;
}

I en tabel har man muligheden for at klare det på flg. måde (jeg ved ikke, om det er den fedeste måde at gøre det på):

<a href="#"><tr>..............</tr></a>

Den synes straks at være mere kringlet, når man forsøger sig med en div.

For at få teksten til at stå pænt i min div, har jeg været nødsaget til at bruge padding-top, for at få skubbet teksten ned i midten. Ligeledes skal teksten starte 20px inde i div'en.

Når man benytter både padding og margin, vil baggrundsfarven i div'en også starte 20px inde ved a:hover. Ved a:hover skal HELE div'en markeres, og ikke 20px inde, hvor teksten også starter.

Man kan vel omgå det ved det at lave en div inde i div'en, så det er den, der laves en a: hover på. Men man kan vel style sig ud af det, uden at skulle lave alle mulige krumspring med ekstra div's etc? Håber I kan hjælpe.



CSS:

.divAvailableGenres1 {
width: 701px;
height: 22px;
padding: 4px 0px 0px 19px;
background-color: #e7e7e7;
}
.divAvailableGenres2 {
width: 701px;
height: 22px;
padding: 4px 0px 0px 19px;
background-color: #f7f7f7;
}



HTML:

<%

    Dim RS, a, b, x

    ConstLenTitle = 60

    Set RS = Conn.Execute("SELECT genreID, genreTitle FROM filmgenre ORDER BY genreTitle ASC")

    a = "divAvailableGenres1"
    b = "divAvailableGenres2"
    x = "divAvailableGenres1"

%>

    ......................................................

            <%

                If Not RS.EOF Then

                    Do Until RS.EOF

            %>

                    <div class="<%=x%>"><a href="/filmlisten/editgenre.asp?genreID=<%=RS("genreID")%>"><%=Server.HTMLEncode(RS("genreTitle"))%></a></div>

            <%

                    If x = a Then
                        x = b
                    ElseIf x = b Then
                        x = a
                    End If

                    RS.Movenext
                    Loop

                End If

                RS.Close
                Set RS = Nothing

            %>
Avatar billede steen_hansen Forsker
16. februar 2011 - 09:49 #1
Jeg skal lige huske at nævne, at det skal kunne valideres.
Avatar billede steen_hansen Forsker
16. februar 2011 - 09:51 #2
Øverst i dokumentet:

ConstLenTitle = 60

Det skal benyttes i en anden sammenhæng, lad ikke den distrahere dig :)
Avatar billede decoon Nybegynder
16. februar 2011 - 10:16 #3
Javascript er din ven, samt onmouseover="" :) Hurtigt søg på google med Javascript div mouseover returnere nok et resultat du kan benytt e:)
Avatar billede steen_hansen Forsker
16. februar 2011 - 10:45 #4
ah, jeg er rusten. Jeg prøver, decoon, og vender tilbage :)
Avatar billede webweaver Praktikant
16. februar 2011 - 14:03 #5
Det burde nu kunne laves i CSS.

Lav din hover effekt på din div.
Hvor skal teksten helt præcist være henne?

<style type="text/css">
   
            .test {
           
                width: 701px;
                height: 22px;
                padding: 4px 0px 0px 19px;
                background-color: #e7e7e7;
           
            }
           
            div.test:hover {
           
                width: 701px;
                height: 22px;
                padding: 4px 0px 0px 19px;
                background-color: blue;
                           
            }
           
           
            .link {
           
                color: red;
                font-familie: verdana;
                font-size: 11px;
                font-style: normal;
                font-weight: normal;
                           
            }
                   
</style>


<a class="link" href="http://www.eksperten.dk" target="_blank">
           
                <div class="test">
                   
                    <p style="margin: 0px">En tekst her</p>               
           
                            </div>
               
<a>
Avatar billede steen_hansen Forsker
16. februar 2011 - 20:46 #6
Der er et problem med at sætte baggrundsfarve i link, da data bliver hevet ud i en løkke:

1. background-color: #xxxxxx; (inden starten på løkken køres igennem første gang

2. Når løkken er kørt igennem første gang:
    If background-color: #xxxxxx; Then
        background-color: #yyyyyy;
    ElseIf background-color: #yyyyyy; Then
        background-color: #xxxxxx;
    End If

3. Kør løkken igen

Så der skal ikke sættes nogen baggrundsfarve på a, kun på a:hover.
Avatar billede steen_hansen Forsker
17. februar 2011 - 00:06 #7
Det virker fint nok med nedenstående, men tekstens placering i <div> er helt ad pommern til.

Jeg har en container på 722px. Border er 1px solid #xxxxxx; så den er faktisk kun på 720:

.divGetData {
width: 722px;
padding-bottom: 20px;
}
.divDataContent {
width: 720px;
border: 1px solid #c7c7c7;
}
.divAvailableGenres1 {
width: 720px;
height: 22px;
font-weight: bold;
/* padding: 4px 0px 0px 19px;*/
background-color: #e7e7e7;
}
.divAvailableGenres2 {
width: 720px;
height: 22px;
font-weight: bold;
/* padding: 4px 0px 0px 19px;*/
background-color: #f7f7f7;
}

a.markdata {
display: block;
width: 720px;
height: 22px;
font-weight: bold;
}
a.markdata:hover {
display: block;
width: 720px;
height: 22px;
color: #000;
font-weight: bold;
text-decoration: none;
background-color: #fbfbfb;
}
Avatar billede steen_hansen Forsker
17. februar 2011 - 00:25 #8
vertical-align: middle; burde placere teksten lodret i midten, korrekt? Det sker bare ikke.
Avatar billede steen_hansen Forsker
17. februar 2011 - 00:57 #9
vertical-align er bedre kendt som text-align
Avatar billede webweaver Praktikant
18. februar 2011 - 21:14 #10
Ikke bedre kendt som text-align :) Der findes både en text-align og en vertical-align rent faktisk. Text-align centrerer horisontalt (right, center og left) hvor vertical-align centrerer vertikalt, som det nok er til at regne ud. (top, middle og bottom) ...

Og jo man skulle umiddelbart tro at det ville virke ligeså let som en valign på en tabel i gamle dage, men det gør det desværre ikke. Der er nogle problematikker ved det, med kendte og ukendte højder.

Der findes nogle "besværlige/mindre gode løsninger" samt lidt forklaringer om problemet. Se mere her; http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Jeg vil anbefale at du bare bruger margin til at justere til, nu hvor du har en fast højde på din div alligevel. Hvis man sætter det rigtigt op i CSS, kan det lade sig gøre og det vises ens i de forskellige browsere :)

http://www.lasse-jensen.dk/eksperten/link_div.html
Se kildekoden ...

Hvis du har nogle andre problemer med din ASP programmering, bedes du oprette et indlæg omkring dette i den kategori dertil :) Det vil nok gavne dig mere.
Avatar billede steen_hansen Forsker
19. februar 2011 - 12:21 #11
Der er nu ikke ASP inlkuderet i dette spørgsmål :) Jeg ville bare synliggøre, at der er forskel på baggrundsfarverne, de skifter mellem to farver, i takt med, at løkken bliver kørt igennem løkken.

Jeg prøver lige at tjekke din kildekode. Er det valideret? Det virker ikke i MSIE 6.
Avatar billede steen_hansen Forsker
19. februar 2011 - 12:36 #12
... i takt med, at løkken bliver kørt igennem :)

Linket på din boks fungerer i MSIE6, men ikke hover-effekten. Jeg prøver.
Avatar billede webweaver Praktikant
19. februar 2011 - 16:24 #13
Jeg har ikke testet tilbage i IE6. Den er forældet. Men det virker i IE7, IE8, FF, Opera og Chrome lige af hvad jeg har testet. Det er ikke validérbart, da det ikke er tilladt at have et block element inde i en <a></a>. Altså et <p> tag eller en <div>.

Så skal du finde på en helt anden løsning.
Måske et billede som firkanten f. eks.
Avatar billede steen_hansen Forsker
21. februar 2011 - 21:35 #14
Hej Lasse. Jeg har nu stærkt inspireret af dit CSS forsøgt mig frem og må erkende, at det ikke lykkes i IE6. Den vil jeg gerne have til at fungere, eftersom der er en del private brugere, der sidder med en W2K maskine og IE6.

Jeg har droppet at få hover-effekt med en anden baggrundsfarve, og i stedet brugt text-decoration: none/underline; samt skift af color.

Jeg vil lade spørgsmålet stå åbent i håb om, at der en én eller anden, der kan nogle cowboy-tricks :) Du skal nok få point for dit besvær, men jeg kan desværre ikke bruge det. Desuden er din side desværre ikke valid :(

Det nedenstående virker fint nok, pånær hover-effekten først opstår 20px inden i DIV'en. Men det er valid, og det virker. Så indtil videre bliver det sådan her. Jeg håber som sagt, at der er en anden, der kan ryste noget ud af ærmet:

CSS:

.divAvailableGenres1 {
width: 720px;
height: 22px;
padding: 0px;
font-weight: bold;
background-color: #e7e7e7;
}
.divAvailableGenres2 {
width: 720px;
height: 22px;
padding: 0px;
font-weight: bold;
background-color: #f7f7f7;
}
a.markdata {
width: 701px;
height: 22px;
display: block;
font-weight: bold;
text-decoration: none;
margin: 0px 0px 0px 19px;
}
a.markdata:hover {
color: #000;
width: 701px;
height: 22px;
display: block;
font-weight: bold;
text-decoration: underline;
}

HTML:

<%

    Dim a, b, x

    a = "divAvailableGenres1"
    b = "divAvailableGenres2"
    x = "divAvailableGenres1"

%>

<%

    If Not RS.EOF Then

        Do Until RS.EOF

%>

        <div class="<%=x%>"><a href="/filmlisten/editgenre.asp?genreID=<%=RS("genreID")%>" title="Ret &quot;<%=RS("genreTitle")%>&quot;" onfocus="this.blur();" class="markdata"><%=RS("genreTitle")%></a></div>

<%

        If x = a Then
            x = b
        ElseIf x = b Then
            x = a
        End If

        RS.Movenext
        Loop

    End If

    RS.Close
    Set RS = Nothing

%>
Avatar billede steen_hansen Forsker
03. juli 2011 - 20:07 #15
Det er vist på tide at lukke. Takker for indsatsen, jeg fandt dog aldrig en brugbar løsning
Avatar billede steen_hansen Forsker
03. juli 2011 - 20:07 #16
Det er vist på tide at lukke. Takker for indsatsen, jeg fandt dog aldrig en brugbar løsning
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester