Avatar billede steen_hansen Forsker
29. marts 2004 - 23:53 Der er 11 kommentarer og
2 løsninger

Placering v.hj.a. padding og background-position er næsten umulig

Mit CSS:

a.menutop:active, a.menutop:link, a.menutop:visited {
width: 100%;
display: block;
font-family: geneva, verdana, helvetica, arial;
font-weight: none;
font-size: 11px;
text-decoration: none;
color: #336699;
background-color: #d5d5d5;
background-repeat: no-repeat;
background-position: center left;
background-image: url("/images/topmenu1.gif");
}

Jeg prøver at få 4 links til at stå centreret i 4 celler

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>

<table>
    <tr>
        <td style="width: 25%;><a href="#">Link 1</a></td>
        <td style="width: 25%;><a href="#">Link 2</a></td>
        <td style="width: 25%;><a href="#">Link 3</a></td>
        <td style="width: 25%;><a href="#">Link 4</a></td>
    </tr>
</table>

</body>

</html>



Baggrundsbillede og link skal stå centreret i hver sin celle.

Det er så meningen, at disse baggrundsbilleder skal have en smule mellemrum (xxpx eller f.eks. 2 mellemrum), så der er ens afstand mellem background-image og linket. Men den er godt nok tricky :/

Prøv evt. hvordan det ser ud i browseren med CSS/HTML. Det står ikke godt.
Avatar billede knudgert Nybegynder
30. marts 2004 - 00:09 #1
Et meget hurtigt lavet eksempel på http://home13.inet.tele.dk/smedpark/test/td.htm
Er det sådan, du mener?
Du skriver du vil have et baggrundsbillede i en celle og link i en anden, i din kode ser det ud til at være i samme celle.

Har godt nok ikke lavet link, men det gør jo ingen forskel på måden det laves på.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<style type="text/css">
table {width: 180px; border-collapse: collapse}
td {width: 90px; height: 90px; border: 1px solid black}
.bag {background: transparent url(lille.jpg) center no-repeat}
.midt {vertical-align: middle; text-align: center}
</style>
</head>
<body>
<table>
<tr>
<td class="bag">
</td>
<td class="midt">
Link 1
</td>
</tr>
</table>
</body>
</html>
Avatar billede oversjanten Nybegynder
30. marts 2004 - 00:11 #2
Avatar billede roenving Novice
30. marts 2004 - 00:12 #3
Du havde i dit lagte eksempel glemt nogle væsentlige ""er

<td style="width: 25%;">

-- og sådan ser det ud til at virke, men er det det du vil have !-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<style type="text/css">
.menutop{
  text-align:center;
  width:100%;
}
.menutop td{
  width:25%;
  border:1px solid red;
}
.menutop a:link, .menutop a:visited, .menutop a:active {
width: 100%;
display: block;
font-family: geneva, verdana, helvetica, arial, sans-serif;
font-weight: none;
font-size: 11px;
text-decoration: none;
color: #336699;
background-color: #d5d5d5;
background-repeat: no-repeat;
background-position: center center;
background-image: url("/images/topmenu1.gif");
}
</style>

</head>

<body>

<table class="menutop">
    <tr>
        <td><a href="#">Link 1</a></td>
        <td><a href="#">Link 2</a></td>
        <td><a href="#">Link 3</a></td>
        <td style="width: 25%;"><a href="#">Link 4</a></td>
    </tr>
</table>

</body>

</html>
Avatar billede oversjanten Nybegynder
30. marts 2004 - 00:12 #4
*det er vist ved at være sent....så ik lige det med billedet...sorry*
Avatar billede steen_hansen Forsker
30. marts 2004 - 06:38 #5
roenvig: Jeg så godt det med <td style="width: 25%;>, men det forekommer kun her på E :o)

Det eneste jeg kan se, der er ændret, er denne (min):

background-position: center left;


Din:

background-position: center center;

Jeg kan slet ikke se baggrundsbilledet nu. Baggrundsbilledet er to pile til venstre for linket. Ved hover skifter pile og tekst farve. Jeg håber det er til at forstå? :o)
Avatar billede steen_hansen Forsker
30. marts 2004 - 06:46 #6
Ved hover kommer topmenu2.gif op midt i teksten.

knudgert: Ikke helt.

1. Baggrundsbilledet er to pile til venstre for teksten (cellen bliver til et helt aktivt link v.hj.a. block)
2. Når man holder musen hen over cellen, skifter tekst og pile farve
3. Tabellen fylder 100%
4. Den indeholder 4 kolonner i én række
5. Hver celle skal være 25% i bredden
6. Her skal teksten være centreret, og pilene skal gerne være xx pixels til venstre for teksten. Eller evt. med to hårde mellemrum (&nbsp;). Så uanset hvor lang teksten er, så står det sådan her centreret i cellen: [2 pile][XX blanke pixels][Tekst]

oversjanten: 10-4 :o)
Avatar billede steen_hansen Forsker
30. marts 2004 - 07:16 #7
Link: www.include.dk

For at få det til at se pænt ud, har jeg lavet om på tabel- og cellebredde:

Tabelbredde: 0% Cellebredde: 0%

Tabel:

            <table border="0" cellpadding="0" cellspacing="0" class="topmenu">
                <tr>
                    <td><a href="java script:window.external.AddFavorite(location.href,document.title)" onFocus="this.blur()" class="menutop">Føj til Foretrukne</a></td>
                    <td><a href="java script:top.location.reload(true)" onFocus="this.blur()" class="menutop">Opdater siden</a></td>
                    <td><a href="#" cursor="hand" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('www.include.dk/');" onFocus="this.blur()" class="menutop">Gør til Min startside</a></td>
                    <td><a href="java script:history.back(-1)" onFocus="this.blur()" class="menutop">Tilbage</a></td>
                </tr>
            </table>



CSS:
a.menutop:active, a.menutop:link, a.menutop:visited {
width: 100%;
display: block;
font-family: geneva, verdana, helvetica, arial;
font-weight: none;
font-size: 11px;
text-decoration: none;
color: #336699;
padding: 0px 0px 0px 20px;
background-color: #d5d5d5;
background-repeat: no-repeat;
background-position: center left;
background-image: url("/images/topmenu1.gif");
}
a.menutop:hover {
font-family: geneva, verdana, helvetica, arial;
font-weight: none;
font-size: 11px;
color: #000000;
background-color: #d5d5d5;
background-repeat: no-repeat;
background-position: center left;
background-image: url("/images/topmenu2.gif");
}

Det var ikke sådan jeg ønskede det, men det ser meget pænt ud nu.

Ved nærmere eftertanke, så tror jeg, at jeg vil lave det helt om og lægge de links op over banneret med en text-decoration: underline - ikke for at være besværlig :/ Så er den ged barberet.

oversjanten og roenvig, lægger I et svar? Tak for hjælpen til alle :o)
Avatar billede roenving Novice
30. marts 2004 - 18:29 #8
Okay, det lød også, præcis som du selv skrev, _meget_ svært at få tilpasset !-)

-- og så havde jeg i øvrigt også lavet et par andre væsentlig ting om i definitionerne af a i css-tingene ...

At alle links inde i en bestemt klasse tabel havde en bestemt stil, og så en lille fejl i rækkefølgen af pseudo-selektorer, som _skal_ være denne:

a
a:link
a:visited
a:hover
a:active

-- ellers velbekomme '-)
Avatar billede steen_hansen Forsker
31. marts 2004 - 06:30 #9
Fedest, roenvig! :o) Jeg får rettet det til. Mangler lige et svar fra oversjanten.
Avatar billede oversjanten Nybegynder
31. marts 2004 - 14:36 #10
Jeg afstår fra point:
Når fair skal være fair,har roenving givet dig svaret.
Avatar billede steen_hansen Forsker
31. marts 2004 - 14:51 #11
Ok, sjant. Men jeg takker for din indsats :o) Også til Jer andre.
Avatar billede roenving Novice
31. marts 2004 - 15:00 #12
-- takker for points ;~}
Avatar billede steen_hansen Forsker
31. marts 2004 - 15:02 #13
Kammersjuk :o)
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