Een homepage met 2 linken

Status
Niet open voor verdere reacties.
Mijn code doet wel wat, jij moet alleen de html met de css verbinden en dan ben je klaar! Je moet niet gaan stylen in je html, dat heb ik al voor je gedaan en dat staat in de css.
 
Laatst bewerkt:
@JaapdVries: OT vindt de pagina zo basic en kort, dat css niet nodig wordt geacht. Moet ook kunnen, lijkt me :)
Al zou ik het met je eens zijn als je zou argumenteren dat van het een het ander komt en dat het dan toch netjes is als dat via css gebeurt:D
 
Ik ga hem uploaden en dan zet ik hier de link neer. Alvast bedankt voor het meedenken.
 
JaapdVries zei:
Mijn code doet wel wat, jij moet alleen de html met de css verbinden en dan ben je klaar! Je moet niet gaan stylen in je html, dat heb ik al voor je gedaan en dat staat in de css.
Klik om te vergroten...

zoals ik schreef heb ik je file index.html genoemd en geupload.
Je css file heb ik index.css genoemd en geupload. Maar zoals je ziet gebeurt er dus niets.

ps. niet boos worden hoor, het is mooi weer vandaag ;)
en ik heb niets aan je jouw file gedaan, ik heb nu de file van veng geulopad om te kijken wat die doet.
 
Laatst bewerkt:
Nu is het dus zo met de htmil file van Veng:

http://angelavanderploeg.nl/

Dit komt al in de buurt. (zo had ik het zelf dus ook alleen de code van veng is wat beter)

Nu de vraag: hoe krijgen we het in het midden en hoe zetten we er plaatjes bij?
 
Laatst bewerkt:
Al zou ik het met je eens zijn als je zou argumenteren dat van het een het ander komt en dat het dan toch netjes is als dat via css gebeurt
Klik om te vergroten...
Vraag is dus, als je ook plaatjes wilt en zo dadelijk ook "mobile friendly" en wie weet wat nog meer, of je niet toch beter in eens op css kunt overstappen.
"Mobile friendly" wordt op korte termijn het issue van Google. Als je met mobiel zoekt, komt er niet alleen bij de zoekresultaten te staan: "Geschikt voor mobiel", maar Google rankt je ook lager in de zoekresultaten als je niet "mobile friendly" bent.
Google doet alles voor de beleving van de klant. Dat is immers hun core business.
 
Laatst bewerkt:
mijn websites zijn allemaal mobile vriendelijk, op de steunpunt website na. Het thema is niet responsive en ik zoek nog naar het juiste thema, maar vind even niet ;) iets naar mijn zin.

Ik kan het met een plugin voorlopig oplossen.

De pagina waar men uit kan kiezen hoeft voro mij nog niet perse mobile vriendelijk te zijn.
Ik ga dat pas aanpassen als ik echt helemaal tevreden ben met die pagina. Hoe dat weet ik nog niet, maar inderdaad is het misschien wel verstandiger om op css over te stappen. Hoewel het maar 1 pagina betreft.

Maar:
Nu de vraag: hoe krijgen we het in het midden en hoe zetten we er plaatjes bij? (of anders een mooie achtergrond)
 
Ik neem aan dat je nu nog verticaal gecentreerd bedoeld. Of is hor. nog steeds niet goed?
Hoe (beter) verticaal te centreren zou ik uit moeten zoeken, maar ik ga zo dadelijk uit de lucht voor boodschappen.

Voor de images gebruik ik:
HTML: 
                <div class="imgYYY" align="center">
                              <img class="divXXX" src="/Images/xxx.jpg" title="Van xxx kreeg hij hoofdpijn" alt="xxx" />
                              <p class="p0a"> (is fontgrootte)
                                Hoofdpijn door XXX
                              </p>
                        </div>
en in de css:
HTML: 
.imgYYY
{
    position: relative;
    height: 100%;
    width: 100%;
    top: -3px;
    left: 3px
}

.divXXX
{
    max-width: 40%;
    max-height: 300px; /*fallback voor oude browsers*/
    max-height: 50vh; /*nooit hoger dan 100% van de hoogte van scherm, voor 50% zou het 50vh zijn. vh staat voor viewport height*/
    margin: auto;
    top: -3px;
    left: 3px;
    border-radius: 10px
}

Je zult wat moeten puzzelen om dit naar volledig html terug te zetten.
 
Mijn vraag is wel: waarom werkt de css van Jaap niet?
Had ik deze anders moeten noemen? Hij hoort toch in de public_html?

En hoe laat je de html file dan die css aanspreken?

(sorry guys, maak wel wordpress websites maar dan via thema's die je dan wel kan veranderen, dat weet ik wel. Maar dit weet ik dus even niet)
 
Zo link je naar de css:
<link rel="stylesheet" type="text/css" href="~/CSS/Master.css"/>
Let dus op het juiste pad en naamgeving.
Dat zal ook wel de reden zijn dat die van Jaap bij jou niet werkt: de html pagina ziet waarschijnlijk de css niet.
Bedenk wel dat je een bepaalde header aan je pagina moet geven. De link komt in die header.
Iets dat lijkt op:
HTML: 
<html>
  <head>
     <title>xxxxxxxxxxx</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="language" content="NL" />
     <link rel="stylesheet" type="text/css" href="~/CSS/Master.css"/>
  </head.
  <body>
     De eigenlijke content code
  </body>
</html>
 
Laatst bewerkt:
Mag altijd. Aanvankelijke moeilijkheid was in te schatten hoeveel kennis je hebt. Je hebt immers al een aantal websites, zei het in Wordpress.
Ik adviseer je eens te searchen op hoe je met html en css een site bouwt. Daarvoor zijn legio links.
Ook om te testen of je code goed is:
http://jigsaw.w3.org/css-validator/...usermedium=all&warning=1&vextwarning=&lang=en
http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

Zorg dat je bij je zoekopdrachten altijd css en of html hebt staan. Dan vind je de info zo.
Hier zou je kunnen beginnen: http://htmldog.com/reference/htmltags/
Of hier: http://www.webontwikkelaar.nl/css/cursus/#ch_CSS_terminologie
Dit is ook nog wel een aardige referentiesite: http://tympanus.net/codrops/css_reference/
En de pagina's van de w3schools: http://www.w3schools.com/TAGS/tag_a.asp
 
Laatst bewerkt:
Probleem met/vanb mij is woordblindheid; ik kan geen recepten of handleidingen lezen. Ik doe het liever gelijk en probeer het uit. Wordt moeilijker als je iets niet snapt natuurlijk ;)

Zo link je naar de css:
<link rel="stylesheet" type="text/css" href="~/CSS/Master.css"/>
Let dus op het juiste pad en naamgeving.
Dat zal ook wel de reden zijn dat die van Jaap bij jou niet werkt: de html pagina ziet waarschijnlijk de css niet.
Bedenk wel dat je een bepaalde header aan je pagina moet geven. De link komt in die header.
Klik om te vergroten...

dit begrijp ik dus niet. Maar als ik het probeer te snappen moet die html file aangepast worden met een link naar de .css
Maar die staat (is geupload) naar public_html
 
Mijn zoon is ook wb, dus ik weet wat het in houdt. Hij maakt veel gebruik van luisterboeken uit de blindenbibliotheek. Of die ook technische literatuur hebben weet ik niet. Verder gebruikte hij "Kurzweil 3000" Volgens mij leest die ook voor, maar is wel erg duur. http://www.lexima.nl/ouders/geavanceerde-dyslexiesoftware/kurzweil-3000

Wat je dus moet doen is deze regel: <link rel="stylesheet" type="text/css" href="~/CSS/Master.css"/> in je html pagina zetten en opnieuw uploaden.
Dit: ~/CSS/Master.css is het pad naar de css. Als je die bij jou in de root hebt gezet, wordt de regel:
<link rel="stylesheet" type="text/css" href="Master.css"/>

Die "Master.css" is de naam van mijn css. Jij moet die vervangen door de naam van jouw css.
Dan wordt de regel: <link rel="stylesheet" type="text/css" href="index.css"/>

Jouw complete html file (dus zonder de afzonderlijke index.css file) ziet er dan ongeveer zo uit:
HTML: 
<html>
  <head>
     <title>de titel van jouw pagina</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="language" content="NL" />
     <link rel="stylesheet" type="text/css" href="index.css"/>
  </head.
  <div id="container" align="center">
        <table>
            <tbody>
                <tr>
                    <td style="text-align: center; vertical-align: middle; height: 200px;">
                        <a href="http://www.praktijk-havayah.nl" target="_blank"><span style="font-size: 35pt;
                            font-weight: bold;">Praktijk Havayah</span></a><br />
                        <span style="font-size: 16pt;">Spirituele praktijk voor healing, reading, wandelcoach,
                            huisreiniging en Spirit Art</span>
                            <div class="imgYYY" align="center">
        <img class="divXXX" src="/Images/wolf geschaald.jpg" title="Van xxx kreeg hij hoofdpijn"
            alt="xxx" />
  </div>
                    </td>
                </tr>
                <tr>
                    <td style="height: 2px; background-color: #a68c35; font-size: 6pt;">
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center; vertical-align: middle; height: 200px;">
                        <a href="http://pchulp-almere.nl" target="_blank"><span style="font-size: 35pt; font-weight: bold;">
                            PC Hulp Almere</span></a><br />
                        <span style="font-size: 16pt;">PC hulp voor particulieren</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Maar dan ben je nog niet klaar. Je moet nog een keuze maken tussen wel of geen css en daar de code bij aanpassen.

Wil je werkelijk een volledige oplossing, dan zou je mss iemand tijdelijk toegang tot je upload domein moeten geven, zodat die persoon dan rechtstreeks de files in orde kan maken maken. Voor een programmeur is dat peanuts, in elk geval eenvoudiger dan proberen jou in een middagje wegwijs te maken in de wereld van html en css. Zelf ben ik daar ook niet zo goed in thuis en is het voor mij ook vaak trial and error.
 
Laatst bewerkt:
Okee, nu snap ik het (want ik zie het).

Maar dan ben je nog niet klaar. Je moet nog een keuze maken tussen wel of geen css en daar de code bij aanpassen.
Klik om te vergroten...
En hoe pas ik dit dan aan?

De plaatjes laten we maar even voor wat het is...ben al blij als ik het keuze menu mooi in het midden krijg. Ik zal zelfs een neuzen hoe ik er een achtergrond in kan zetten.
<img class="divXXX" src="/Images/wolf geschaald.jpg" title="Van xxx kreeg hij hoofdpijn"
Klik om te vergroten...
dit kan er dus gewoon tussenuit halen.

ps. je voorbeeld komt links boven in de hoek terecht en niet in het midden. Maar de letters en alles zijn nu wel op goede grootte.
 
Laatst bewerkt:
Code: 
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
  <head>
     <title>angelavanderploeg</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="language" content="NL" />
     <link rel="stylesheet" type="text/css" href="index.css"/>
  </head.
<div id="container" align="center">
    <table>
        <tbody>
            <tr>
                <td style="text-align: center; vertical-align: middle; height: 200px;">
                    <a href="http://www.praktijk-havayah.nl" target="_blank"><span style="font-size: 35pt;
                        font-weight: bold;">Praktijk Havayah</span></a><br />
                    <span style="font-size: 16pt;">Spirituele praktijk voor healing, reading, wandelcoach,
                        huisreiniging en Spirit Art</span>
                </td>
            </tr>
            <tr>
                <td style="height: 2px; background-color: #a68c35; font-size: 6pt;">
                </td>
            </tr>
            <tr>
                <td style="text-align: center; vertical-align: middle; height: 200px;">
                    <a href="http://pchulp-almere.nl" target="_blank"><span style="font-size: 35pt; font-weight: bold;">
                        PC Hulp Almere</span></a><br />
                    <span style="font-size: 16pt;">PC hulp voor particulieren</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</html>

Heb hem nu zo, de index.html

20.jpg
 
Dat het niet in het midden van de pagina staat!

Zie hier dat ik de 2 files in de public_html heb staan.

21.jpg

maar als de css (heb net wat ingelezen http://www.w3.org/Style/Examples/011/firstcss.nl.html
dan moet dus de css de html overnemen, maar dat doet die niet, want hij zet niets in het midden van de pagina.
 
Laatst bewerkt:
hoe anders

PHP: 
<td style="text-align: center; vertical-align: middle; height: 200px;">

bente je met de style rommelen
lijkt mijn veel overzichterlijk als je dat i css file zet
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan