text naarst plaatje maken. met div. kleuren

Status
Niet open voor verdere reacties.
djeric

djeric

Gebruiker
Lid geworden
22 nov 2006
Berichten
955
hallo.

ik wil hier: http://www.yourdjeric.nl/collega.html onder mijn logo en tussen de menu en de filmstrip een pagina maken.

nu wil ik 3 foto's plaatsen, met naarst elke foto rechts text. van verschillende groote en kleur.

maar krijg het niet voor elkaar dit goed te doen. ik moet code in de html plaatsen en in de css. maar begrijp niet meer wat waar hoort. en hoe ik t krijg wat ik wil.

het volgende wil ik bereiken:

een foto plaatsen van gewenste groote. daarnaarst text in bepaalde kleur, in bepaalde groote bv <h2></h2> en dan daarnaast nog eens een keer text, met andere kleur en bepaalde groote. ongeveer net zoiets als deze site: http://www.spikey.tk/ deze site heb ik ook gemaakt, maar ik zie in me code dat het in een tabel staat maar ook de code "font" is toegepast. dit mag toch ook niet in de html strict 4.01 ???
 
Laatst bewerkt:
<font> wordt inderdaad afgeraden te gebruiken en is daarom niet geldig in strict.

In plaats van <font> kun je ook <p> gebruiken. Deze kun je dan met je CSS stylen.
(Ook mogelijk; <p style="color: #CCCCCC; font-size: 14px">Text</p>)

Kun je hier voorlopig me op weg of heb je nog andere vragen?
 
5i5 zei:
<font> wordt inderdaad afgeraden te gebruiken en is daarom niet geldig in strict.

In plaats van <font> kun je ook <p> gebruiken. Deze kun je dan met je CSS stylen.
(Ook mogelijk; <p style="color: #CCCCCC; font-size: 14px">Text</p>)
Klik om te vergroten...


he nu snap ik het ff n<font> mag niet. (dacht ik ook al te zien) maar ter voorbeeld geef je me wel font-size aan te gebruiken ? kan dan toch niet?

en daarbij nu weet ik niet hoe ik moet beginnen in de html en css code.

ik heb een plaatje. naarst dat plaatje wil ik een vraag plaatsen. en dan naarst die vraag het antwoord. en zo wil ik dan naarst iedere foto 7 vragen plaatsen onderelkaar met de 7 antwoorden ernaarst. de vragen dan bv in het rood en de antwoorden bv in het blauw. hoe maak ik het beste een begin? ik heb al bv nu een foto geplaatst. maar nu de rest nog.

html code:

HTML: 
<div id= "collega"> 

<img src="images/eric.jpg" WIDTH=370 HEIGHT=247 ALT="dj eric"></a>

</div>


css code:

PHP: 
#collega{
 background-image:url('images/eric.jpg');
 background-repeat:no-repeat;
 position:absolute;
 top:280px;
 left:200px;
 height:150px;
 width:600px;
}


zie resultaat: http://www.yourdjeric.nl/collega.html
 
font-size in CSS mag wel, alleen de html tag <font> is niet toegestaan. Als je trouwens een tag wilt zonder opmaak kun je beter <span> gebruiken, want <p> geeft automatisch regeleindes om het blokje heen.
 
Zoals Frats al zei heeft font-size niets te maken met font. Het is gewoon 'toeval' dat er font in de naam staat. En <span> is inderdaad een betere keuze als <p>.

Voor de plaatjes zijn er meerdere mogelijkheden. Je kunt div's gebruiken of tables. Ik zou zelf voor tables gaan. Bij tables zijn er ook twee mogelijkheden, je kunt een table met daarin een table plaatsen of colspan gebruiken. Rowspan vind ik zelf netter, maar een table in een table is misschien makkelijker voor jou.

Als je niet helemaal snapt hoe je het zou ontwerpen moet je het maar even laten weten, dan zal ik een voorbeeld maken.

PS: Het is naast, niet naarst. :)
 
5i5 zei:
Als je niet helemaal snapt hoe je het zou ontwerpen moet je het maar even laten weten, dan zal ik een voorbeeld maken.

PS: Het is naast, niet naarst. :)
Klik om te vergroten...

ach ja, let niet op de spel fouten:o voor de html code zijn ze wel belangrijk;)

nee maare.... ja ik dacht ook aan tabels.

lijkt me het beste idd.

een tabel maken is niet zo heel moelijk. ik haal alleen altijd door de war wat nu wel of nu niet in de css/html mag. ivm met de html strict 4.01

ik ga niet te streng me websites bouwen, dus houd het hier bij.


maar ja.... een tabel.....

je moet ergens beginnen he...

html code voor tabellen lijkt me niet zo moelijk. heb ik deels goed mee geoefend. ik wil best zelf voorbeeldjes geven, maar ja.... de plaats ervan in css bewerkt lukt me niet zo goed. moet de tabel weer in een div staan bv?

en zo ja, wat zet ik dan in de css voor de div code ?

daarnaast de kleuren van letters en de groote van letters. en nartuurlijk het plaatje zelf.


waar begin je mee????


css is me moelijk maar snap hem wel deels beter.
html lukt me vrij goed. niet perfect. maar kan het goed lezen, begrijpen.

maare ja die tabel......

in een div????? of anders????? wat voor css code?

edit: even voor moderators. dit is een css vraag maar hoort bij deze forum vraag. vandaar hij hier op html forum staat.
 
Weet je wel het verschil tussen HTML en CSS? In je HTML geef je aan wat je precies op de pagina wil en in CSS hoe het er uitkomt te zien. Je begint dus met je HTML code (waarin je trouwens ook kunt aangeven hoe iets er uit komt te zien, CSS is alleen overzichtelijker).

Ik neem aan dat je de interviews onder de tekst "Onze dj's" wil hebben. Hieronder begin je dus met je tabel. Deze staat in de div met class "inhoud". (Wel na de H2 uiteraard, anders zou je tabel ook met van die grote letter worden.)

Ik heb even snel twee voorbeelden gemaakt.
Een met een tabel in een tabel: http://ddaan.nl/junk/hm/djs/djs.htm
En een met rowspan. Ik geef hier de voorkeur aan omdat je hiermee gemakkelijk de breedte van een kolom kunt aanpassen, zoals ik heb gedaan met de middelste kolom.
http://ddaan.nl/junk/hm/djs/djsrow.htm[/
 
5i5 zei:
Weet je wel het verschil tussen HTML en CSS?[/
Klik om te vergroten...

jawel hoor. maar ben niet super goed in css. ik weet wel dat css voor stylen word gebruik. de bassis ervan snap ik. en kan de code ook lezen, maar soms begrijp ik de code taal hiervan niet goed. html leer ik steeds beter kennen.

ik heb wat geprobeerd met een tabel zoals je omschreef.

het volgende resultaat heb ik gemaakt: http://www.yourdjeric.nl/collega.html

ik heb deze html code gebruikt:

HTML: 
<div id= "inhoud"> 

	<h2>Onze DJS</h2>
	<table>
		<tr>
			<td>
				<img src="images/collegas/eric.jpg" alt="dj eric" width="300px">
			</td>
			<td>
				<table>
					<tr>
						<td>roep naam:</td>
						<td>eric</td>
					</tr>
					<tr>
						<td>dj naam:</td>
						<td>dj eric</td>
					</tr>
					<tr>
						<td>leeftijd:</td>
						<td>32</td>
					</tr>
										<tr>
						<td>evaring:</td>
						<td>10 jaar</td>
					</tr>
					<tr>
						<td>hobby's:</td>
						<td>Computers en muziek en modelbouw van treinen.</td>
					</tr>
					<tr>
						<td>Ik draai:</td>
						<td>apresski, dance, top 40...</td>
					</tr>
										<tr>
						<td>levens motto:</td>
						<td>feesten tot je er bij neer valt.</td>
					</tr>
				</table>
			</td>
		</tr>
		
		<tr>
			<td>
				<img src="images/collegas/dabo.jpg" alt="dj dabo" width="300px">
			</td>
			<td>
				<table>
				    <tr>
						<td>roep naam:</td>
						<td>danni</td>
					</tr>
					<tr>
						<td>dj naam:</td>
						<td>dj dabo</td>
					</tr>
					<tr>
						<td>leeftijd:</td>
						<td>35</td>
					</tr>
										<tr>
						<td>evaring:</td>
						<td>3 jaar</td>
					</tr>
					<tr>
						<td>hobby's:</td>
						<td>Formule 1, muziek</td>
					</tr>
					<tr>
						<td>Ik draai:</td>
						<td>hardstyle, house, trance...</td>
					</tr>
										<tr>
						<td>levens motto:</td>
						<td>dag niet gelachen is dag niet geleefd</td>
				</table>
			</td>
		</tr>
		
		<tr>
			<td>
				<img src="images/collegas/sylvester.jpg" alt="dj sylvester" width="300px">
			</td>
			<td>
				<table>
				    <tr>
						<td>roep naam:</td>
						<td>remco</td>
					</tr>
					<tr>
						<td>dj naam:</td>
						<td>dj sylvester</td>
					</tr>
					<tr>
						<td>leeftijd:</td>
						<td>36</td>
					</tr>
										<tr>
						<td>evaring:</td>
						<td>5 jaar</td>
					</tr>
					<tr>
						<td>hobby's:</td>
						<td>tv en computers</td>
					</tr>
					<tr>
						<td>Ik draai:</td>
						<td>apresski, nederlands, top 40...</td>
					</tr>
										<tr>
						<td>levens motto:</td>
						<td>dronken worden!</td>
				</table>
			</td>
		</tr>
	</table>
	
</div>


en deze css:

PHP: 
#inhoud{
 background-attachment:scroll;
 background-repeat:repeat-y;
 position: absolute;
 top: 210px; /* Hier dan ook 10px gezakt omdat de inhoud niet tegen het logo zou plakken.*/
 left: 200px;
 width: 600px;
 color:#fff999; /* dit verandert de hoofd tekst kleur van de weergegeven pagina's, die nu geel/wit is*/
 font-family:Georgia, "Times New Roman", Times, serif;
 font-style:italic;
 font-size:medium;
 font-weight:100;
  
}

alles ziet er op zich goed uit.

de plaats is redelijk goed.

alleen nu nog de text in 2 kleuren maken. maar moet ik dan de code:

<p style="color: #CCCCCC; font-size: 14px">Text</p>)
Klik om te vergroten...

gebruiken??? dus ipv het woordje "text" komen die vragen/antwoorden te staan?

p.s. ik heb alles geupload en deze pagina gevalideerd op css en html. alle 2 waren goed volgens html strict 4.01
 
Laatst bewerkt:
<p> is geen probleem als je een hele regel wilt kleuren. Als je slechts een of enkele woorden wilt kleuren moet je <span> gebruiken.

Je kunt ook een class maken in je CSS maken als je alle vragen en antwoorden in een bepaalde kleur wilt. Als je dan alle kleuren wilt wijzigen hoef je dit alleen in de stylesheet te doen en in niet overal in de HTML pagina?
 
5i5 zei:
Je kunt ook een class maken in je CSS maken als je alle vragen en antwoorden in een bepaalde kleur wilt.
Klik om te vergroten...

dat wil ik. maar weet totaal niet hoe.

ik wil t leren met jou hulp.

vind ik makelijker dan steeds leren op bepaalde html/css sites. krijg je veel text en voorbeelden die je niet nodig hebt en gebruikt.

ik wil t dan van jou leren hoe je dan zo kleuren code maakt in de css met class.

p.s. bedankt voor je reactie:thumb:
 
Het is best wel simpel vind ik eigenlijk. ;)

In je HTML code zet je bijvoorbeeld:
HTML: 
<td><p class="vraag">Hoe heet je?</p></td><td><p class="antwoord">Jan</p>

In je CSS zet je bijvoorbeeld:
HTML: 
.vraag
{
 color: #FF0000;
}
.antwoord
{
 color: #00FF44;
}
 
5i5 zei:
In je CSS zet je bijvoorbeeld:
HTML: 
.vraag
{
 color: #FF0000;
}
.antwoord
{
 color: #00FF44;
}
Klik om te vergroten...

in de css komen die "vraag" en "antwoord" terug. waarom dan? staan toch in de html al?

wat gebeurd daar mee in de css ??? en er staan dan ook nog is een puntje ervoor.
 
Laatst bewerkt:
djeric zei:
in de css komen die "vraag" en "antwoord" terug. waarom dan? staan toch in de html al?

wat gebeurd daar mee in de css ??? en er staan dan ook nog is een puntje ervoor.
Klik om te vergroten...
In de CSS wordt juist de kleur van die elementen gedefinieerd. In ieder element met de class "vraag" zal de tekst dus rood worden. Die . geeft aan dat het om een class gaat en niet om een id.

Ik denk trouwens dat je toch beter wat leeswerk kunt gaan verrrichten, dat is een stuk effectiever dan iedere keer dat je een probleem tegenkomt een losse vraag stellen, dan wordt het nooit een samenhangend verhaal. De twee links in m'n signature leveren goede informatie.
 
heb alles goed ingevuld. getest in firefox o.a. en is goed gegaan.

via internet explorer 8 is het resultaat niet te zien. alleen foto's geen text.

wat is er fout?

link van webpagina: http://www.yourdjeric.nl/collega.html


l.s. website gevalideerd op css en html. geen fouten.:rolleyes:
 
Je hebt nu in .vraag en .antwoord height:1px staan. Dit is niet erg slim. Er ontstaat veel ruimte door de margin's van de <p> tags. Je zegt nu dat je regel 1 pixel hoog is, zo maak je de regel klein, maar je wilt de margin wegwerken.

Je kunt <span> gebruiken in plaats van <p>, deze tag heeft standaard geen margin. Als je toch wel <p> wilt gebruiken moet je de margin-top en margin-bottom kleiner maken.
 
Ja, die 1px is het.
Hoewel de pagina volledig voldoet aan de standaarden, kan IE8 er nog steeds niet mee overweg. IE7 en IE6 trouwens ook niet.
Als je de {height:1px;} weglaat, moeten inderdaad de margins en paddings van de <p>'s op nul gezet worden, anders gaan die weer teveel hoogte opleveren.
Als je vervolgens de <p>'s er uit haalt, hoeft er in de tabelcellen niet persé een span in. De vraag en antwoord classes kunnen dan opgehangen worden aan de <td>'s.Op die manier kan het eenvoudiger worden. En als we toch aan het versimpelen zijn: als je de tekstkleur van de cellen standaard de kleur rood van de .vraag geeft, is de hele class .vraag niet meer nodig.
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
csshunter zei:
[*]Maar wat dacht je van deze:
www.developerscorner.nl/csshunter/tests/ydj-nw-a.htm?
[/LIST]
Als je vervolgens de <p>'s er uit haalt, hoeft er in de tabelcellen niet persé een span in. De vraag en antwoord classes kunnen dan opgehangen worden aan de <td>'s.Op die manier kan het eenvoudiger worden. En als we toch aan het versimpelen zijn: als je de tekstkleur van de cellen standaard de kleur rood van de .vraag geeft, is de hele class .vraag niet meer nodig.
Met vriendelijke groet,
CSShunter
Klik om te vergroten...

toch maar overwegen dat ik toch idd die laaste pak. is ook gelijk stuk duidelijker en overzichtelijker.

dus ben van plan ook dan die te bestuderen. hoewel ik tabellen wel snapte maar de css ervan niet helemaal, maakt me deze stap wel een heel stuk wijzer.

allen toch bedankt hiervoor.:thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan