tekst-layout aanpassen

Status
Niet open voor verdere reacties.
hazesoft

hazesoft

Gebruiker
Lid geworden
11 nov 2004
Berichten
361
Goede middag dames en heren,

Ik ben met een fotoalbum op een website bezig.
Alles lukt aardig, maar ik heb één probleem:

Ik wil onder de foto's de tekst wat groter hebben en met een ander lettertype.
Omdat het album in javascript is geschreven, lukt mij dat niet.
Kan iemand mij helpen?
Ik stuur de html-pagina mee met de JavaScript-code voor het album mee.
Al vast dank voor uw moeite.
 

Bijlagen

Hoi hazesoft,
Er mist het bestand galleryStyle.css, waar alle styles in moeten staan. En zonder de css van deze pagina is je vraag moeilijk te beantwoorden.
Ook de images missen, dat maakt het ook niet makkelijker.

Kan je de pagina niet ergens online zetten, en hier de link geven?

Met vriendelijke groet,
CSShunter
 
Dag csshunter,

Via deze link is de voorlopige site en het album te bekijken.
 
ik ben niet zeker maar denk dat je hier de css hebt voor de onder titel van je foto

.checkBoxText

{

font-size: 11px;

color: #000000;

}

deze veranderen naar bijv.

.checkBoxText

{

font-size: 14px;
font-family;Arial, Helvetica, sans-serif;
color: #000000;

}

groetjes michelscot :thumb:
 
Nou, ik had meer het idee dat het de .content is in regel 87 van de galleryStyle.css:
Code: 
[FONT="Courier New"][SIZE="2"].content {
	font-size:11px;
/*	color: #333333;*/

	padding-top:6px;
	padding-bottom:6px;
}[/SIZE][/FONT]
en waarschijnlijk ook iets verderop de:
Code: 
[FONT="Courier New"][SIZE="2"].contentLast {
	font-size:11px;
/*	color: #333333;*/
	padding-top:6px;
}[/SIZE][/FONT]
Als je daar bv. zet:
Code: 
[FONT="Courier New"][SIZE="2"].content {
	font-size: 1em;
	font-family: verdana, arial, "Trebuchet MS", helvetica, sans-serif;
	padding-top:6px;
	padding-bottom:6px;
}[/SIZE][/FONT]
lukt het dan? :)

Met vriendelijke groet,
CSShunter

PS: in het stylesheet staat overal Trebuchet MS (zonder aanhalingstekens). Bij font-family moeten lettertypen van twee of meer woorden, dus met een spatie er in, altijd tussen aanhalingstekens gezet worden: "Trebuchet MS".
 
Vervolg!
... maar bij nadere beschouwing blijkt bv. de pagina www.taschestaalbouw.nl/Tasche-nieuw/staalbouw/album2/pages/project1.html, waar de aangepaste css in moet komen:
  • ongeldige html te zijn: 17 Errors, 4 warning(s),
  • als css-validator resultaat 15 waarschuwingen te hebben;
  • een vreselijke hoeveelheid tabellen (met tabellen in tabellen) te hebben,
  • 5 plaatjes nodig te hebben voor de dropschaduw onder de foto,
  • en nog afhankelijk te zijn van een overbodig javascript om het onderschrift te kunnen tonen. :confused:
... terwijl het ook met een super-eenvoudige lichtgewicht (1kB) html-pagina kan:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="nl">

<title>project1-nw</title>
<meta name="description" content="..."><!-- nader in te vullen -->
<meta name="keywords" content="project, ..."><!-- nader in te vullen -->

<meta http-equiv="imagetoolbar" content="no">
<meta name="robots" content="index, follow">
<link rel="stylesheet" type="text/css" href="stylesheets/album-pages.css">
</head>

<body>

<table border="0" cellspacing="0" cellpadding="0" summary="">
	<tr><td>
			<img src="images/project1.jpg" 
			width="375" height="251" alt=""><br><span><!-- ! --></span>
	</td></tr>
</table>

<h1>project 1</h1>

</body>
</html>
De meeste code zit in de <head>. Voor de vergelijkbare pagina's hoeft alleen maar de foto-bron en het onderschrift veranderd te worden (+ de beschrijving en trefwoorden voor de zoekmachines). - Helaas is er nog één ééncellige tabel nodig voor Internet Explorer, anders had ook helemaal zonder tabel gekund.
De toebehoren zijn:
Hierin wordt de schaduw drie keer gebruikt: één keer voor de rechterzijkant, één keer voor de onderkant, en één keer, in de <span><!--! --></span> *), voor het afgeronde rechts-onder-hoekje (zie de css). Bij een eventueel ander formaat van de foto past de schaduw zich automatisch aan.
Daarmee wordt het:
Succes ermee!
met vriendelijke groet,
CSShunter

*)
Het commentaar <!-- ! --> moet binnen de <span> blijven staan, zodat browsers niet per ongeluk kunnen denken dat het een lege span is, die overgeslagen kan worden.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan