afbeelding met tekst in html tabel
Voor mijn website wil ik een aantal buttons naast elkaar hebben staan.
Ik heb een variabele, bijvoorbeeld $aantal = 5
Omdat $aantal gelijk is aan 5, wil ik 5 buttons naast elkaar laten zien.
De totale breedte moet altijd 900 pixels zijn, dus hoe meer buttons, hoe smaller ze worden. De breedte berekenen is niet zo moeilijk: $breedte = (902/$aantal)-2
Het probleem is alleen, als ik met een PhP loop 5 keer een button in een nieuwe kolom van de tabel laat zetten, valt de opmaak(afbeelding) weg.
Hier is het script:
Met 1 button, werkend:
Code (php)
1
2
3
4
2
3
4
<?php
$aantal = 5;
$width = (902/$aantal) - 2;
?>
$aantal = 5;
$width = (902/$aantal) - 2;
?>
<html>
<head>
<link href='test10.css' rel='stylesheet' type='text/css'>
</head>
<table border="1">
<tr>
<td div id="demo"; style="background-image: -webkit-linear-gradient(top, #000FFF, #FFF000 100%); width: ; height: 40px">
<div id="text">Hallo</div>
</td>
</tr>
</table>
</html>
Als ik echo '...'; voor de 3 regels van <td>...</td> krijg ik wel nog Hallo te zien, maar zonder opmaak.
Weet iemand hoe ik dit kan oplossen?
Of is dit makkelijker te doen op een andere manier?
Alvast bedankt
~Jeroen
Edit: Ik zie dat de code een beetje raar wordt weergegeven, geen idee hoe ik dat kan oplossen, sorry.
Gewijzigd op 21/08/2012 15:40:07 door Jdog Silverblade
edit: als je het inline wilt oplossen vergeet je volgens mij de "=" bij width, de aanhalingstekens en de px.
Gewijzigd op 21/08/2012 16:05:07 door N K
http://jsfiddle.net/n5uhu/1/
Even opzetje hé. Dus ziet er niet uit.
Gewijzigd op 21/08/2012 16:12:08 door Eddy E
even benieuwd: wat doet die content: ''; ?
Code (php)
1
2
3
4
2
3
4
<?php
$aantal = 5;
$width= (902/$aantal)-2;
?>
$aantal = 5;
$width= (902/$aantal)-2;
?>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<link href='test10.css' rel='stylesheet' type='text/css'>
<style>
.demo{
background-image: -webkit-linear-gradient(top, #000FFF, #FFF000 100%);
height:40px;
}
.text{
/* Eventuele andere opmaak */
}
</style>
</head>
<body>
<table style="border: 1px solid black;">
<tr>
<head>
<link href='test10.css' rel='stylesheet' type='text/css'>
<style>
.demo{
background-image: -webkit-linear-gradient(top, #000FFF, #FFF000 100%);
height:40px;
}
.text{
/* Eventuele andere opmaak */
}
</style>
</head>
<body>
<table style="border: 1px solid black;">
<tr>
Code (php)
Code (php)
1
2
3
4
2
3
4
</tr>
</table>
</body>
</html>
</table>
</body>
</html>
Als dit niet werkt, kijk even naar je <td>, <td div id=""; etc. is een beetje vaag.
Gewijzigd op 21/08/2012 16:20:15 door Frans Piter Schaap
Waar het voor mij uiteindelijk om ging, wat ik niet gezegd heb in de vorige post, is de kleurovergang van de button.
Dit heb ik gedaan met background-image: -webkit-linear-gradient(...)
@Frans Piter: De px was ik inderdaad vergeten, bedankt. Helaas maakte dit voor de opmaak geen verschil.
Het probleem met opmaak is dus dat, als ik background-image: -webkit-linear-gradient(...) in de css file zet, dit fout gaat in een PhP echo.
Edit: Bij de link van Eddy Erkelens heb ik background-image: linear-gradient veranderd in background-image: -webkit-linear-gradient. Dit werkt nu prima.
Bedankt allemaal!
Het enige nadeel is dat nu de hover niet meer werkt, maar dat lijkt me vrij gemakkelijk op te lossen. Als ik dat niet klaar krijg post ik wel een berichtje.
Nogmaals bedankt iedereen!
Je kan die jsFiddle ook forken: dat is overnemen, bewerken en opslaan.
Ps die -webkit-prefix is maar tijdelijk. Probeer ze zo veel mogelijk te vermijden en de normale syntax te gebruiken: ondersteund je browser die nog niet: pech.... of zoek een betere browser (Opera/Chrome)
Of pak dan ook de andere prefixes.
Bijgewerkt: http://jsfiddle.net/n5uhu/8/
Gewijzigd op 21/08/2012 16:52:27 door Eddy E
Dat werkt prima, het haalt ook de tussenruimte weg, wat ik niet zo mooi vond.
Een voorbeeld staat compleet op: http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced
Het laatste wat de opmaak naar mijn smaak compleet zou maken is een afronding links-boven en rechts-boven. Dit moet gedaan worden bij de ul en niet bij de li, omdat anders alle linken afgerond worden. (Ik wil alleen de buitenste twee afronden, aan de buitenste kant).
Dit zou mogelijk moeten zijn door deze code bij de ul te plaatsen:
Code (php)
1
2
2
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-top-right-radius: 10px;
Het vreemde is, links boven wordt het mooi afgerond, ook alleen bij de linkse link, precies naar wens. Maar bij de rechter bovenhoek blijft het bij mij vierkant, niet afgerond dus.
Heeft iemand enig idee hoe ik dit zou kunnen oplossen?
Alvast bedankt,
~Jeroen
Ps. Zoals Eddy Erkelens vroeg, ik gebruik de laatste versie van Google Chrome. Vroeger had ik Internet Explorer, maar dit geeft zoveel problemen... bij alle sites met opmaak...