Een homepage met 2 linken

Status
Niet open voor verdere reacties.
HTML: 
<div class="container">
    <table>
        <tbody>
            <tr>
                <div id="havayah">
                <div id="koptekst"> <a href="http://www.praktijk-havayah.nl" target="_blank"> Praktijk Havayah </div> </a> <div id="ondertekst"> Spirituele praktijk voor healing, reading, wandelcoach, huisreiniging en Spirit Art </div>
                </div>
            </tr>
            
                <div id="middenstuk">
                
            </div>
            
            <tr>
                <div id="almere">
                <div id="koptekst"> <a href="http://www.pchulp-almere.nl" target="_blank"> PC Hulp Almere </div> </a> <div id="ondertekst"> PC hulp voor particulieren </div>
                </div>
            </tr>
        </tbody>
    </table>
</div>
 
Laatst bewerkt:
Code: 
.container {
    text-align: center;
    font-family: arial;
}

#havayah {
    width: 500px;
    height: 120px;
    background-color: #ededed;
    margin: auto;
    position: absolute;
    top: -159px; left: 0; bottom: 0; right: 0;
    border-left: solid grey 1px;
    border-top: solid grey 1px;
    border-right: solid grey 1px;
    padding-top: 25px;
}

#havayah:hover {
    background-color: #feffb4;
}

#middenstuk {
    background-color: green;
    width: 502px;
    height: 10px;
    margin: auto;
    position: absolute;
    top: -3px; left: 0; bottom: 0; right: 0;
}

#almere {
    width: 500px;
    height: 120px;
    background-color: #ededed;
    margin: auto;
    position: absolute;
    top: 150px; left: 0; bottom: 0; right: 0;
    border-left: solid grey 1px;
    border-bottom: solid grey 1px;
    border-right: solid grey 1px;
    padding-top: 25px;
}

#almere:hover {
    background-color: #feffb4;
}

#koptekst {
    font-size: 40px;
    font-weight: bold;
}

#ondertekst {
    font-size: 20px;
}
 
Laatst bewerkt:
En nee haha, ik zal je geen rekening opsturen ;) , is dit een beetje wat je in gedachte had?
 
IK zie alleen dit als ik de tekst opsla in html (in een tekstbestandje)

.container { text-align: center; font-family: arial; } #havayah { width: 500px; height: 120px; background-color: #ededed; margin: auto; position: absolute; top: -159px; left: 0; bottom: 0; right: 0; border-left: solid grey 1px; border-top: solid grey 1px; border-right: solid grey 1px; padding-top: 25px; } #havayah:hover { background-color: #feffb4; } #middenstuk { background-color: green; width: 502px; height: 10px; margin: auto; position: absolute; top: -3px; left: 0; bottom: 0; right: 0; } #almere { width: 500px; height: 120px; background-color: #ededed; margin: auto; position: absolute; top: 150px; left: 0; bottom: 0; right: 0; border-left: solid grey 1px; border-bottom: solid grey 1px; border-right: solid grey 1px; padding-top: 25px; } #almere:hover { background-color: #feffb4; } #koptekst { font-size: 40px; font-weight: bold; } #ondertekst { font-size: 20px; }
Klik om te vergroten...
 
Dat is namelijk de css. Die moet je als css opslaan en weer verbinden met je HTML, de HTML heb ik een berichtje er boven geplaatst.

Het beste kan je http://komodoide.com/komodo-edit/ gebruiken. Dan kan je dus de aanpassingen zien zonder het online te zetten.
 
Ah, ik zag alleen de css haha.

Enne, ik heb geen Windows, dus komodoide is voor mij niets ;)


de html geeft dit, (zie plaatje)
dus het staat in de linkerbovenhoek van de browser.

16.jpg

(dan was die van mij zelf nog zo gek nog niet, want die staat midden in beeld)
 
Aha, kijk.....ja.....en dan nu nog de plaatjes erbij en klaar is Jaap.

Haha, nee hoor.........als je mij uitlegt hoe ik die plaatjes erin krijg, dan kan ik dat zelf.

Even nog een vraagje: de html en css moet ik uploaden naar de server. Dat moet in de public_html (want de pagina moet de index.html vervangen) De naam van de oude wordt dan indexoud.html en de nieuwe (deze nieuwe pagina) wordt van index.html
Maar waar zet ik die css file neer?
 
Kan je anders even een voorbeeldje maken hoe je precies het plaatje wilt hebben met paint oid., dan ik het beter uitleggen ( of zelf maken).

Als we daar klaar mee zijn moet jij html bestand als .html opslaan en css bestand als .css opslaan, die zet je met ftp op je server. De html sla wat je al zei als index op, maar dat komt allemaal zo nog wel, laten we maar eerst de de bestanden goed hebben ;)
 
Laatst bewerkt:
Nog even voor de duidelijkheid, ik werk niet met Windows ;)

Maar goed, de plaatjes heb ik op mijn HD staan.

Ik zal ze uploaden naar hier.

Voor de praktijk wordt dat:

wolf geschaald.jpg

en voor het steunpunt (pc hulp) gebeuren wordt het:

Tux-croft.png

Ik weet hoe ik de files naar de server krijg. Dus dat is geen probleem.
 
En die moeten achter de tekst staan? Want als dat zo is wordt het wel heel onduidelijk.
 
Hm, lastig ja. Heb je dat voorbeeld gezien aar ik het over had?
www.manosverdes.nl

met die plaatjes gaat dat dus niet, begrijp ik? Hm.....dan moet ik even nadenken hoe ik dat dan graag zou willen.
 
Je kan bijvoorbeeld wel proberen een kleur er over heen te zetten, maar dan dat het maar voor 50% zichtbaar, op deze manier is de afbeelding zichtbaar en de tekst ook dus! Nou zal je afbeelding wil minder mooi worden.
 
wat transparanter bedoel je.

Ik denk dat ik eens ga freubelen van het weekend met die plaatjes. Wie weet kan ik het zo maken dat ze in elkaar vallen of zo.
Maar dan weet ik weer niet waar ik ze moet plaatsen.

Of dat het tekstvalk groter wordt en daar het logo inzetten, want in principe zijn het logo's.
Moeilijker dan ik dacht, om heel eerlijk te zijn. Met de plaatjes dan hè.

Ik zal eerst die files eens uploaden naar de server, ben wel benieuwd hoe dat staat. ;)
Ben je al zeer dankbaar dat je wilt helpen.

Edit: files geupload, maar het ziet er niet goed uit. (http://angelavanderploeg.nl)
De fiels hebben de naam index.html en index.css gekregen.
Maar de css vind hij dus niet.
Die is ook geupload naar de public_html
 
Laatst bewerkt:
Mijn programmeerkennis past in een vingerhoed, maar zoals ik het zie werkt
het centreren van de tekst wel degelijk, maar alleen binnen de betreffende div. Nu nog de div zelf centreren:
vervang
<div id="container">
eens door
<div id="container" align="center">
 
Heb je op de doneimnaam geklikt? Dan klopt het toch niet!

zie screenshot:

16.jpg

het staat in kleine letters in de linkerhoek van mijn browser.
 
Ik heb jouw stukje code binnengehaald in Microsoft Visual Studio. Dan start ik de debugger en zie via de debugger, die de code naar FireFox stuurt, dezelfde positie als op jouw domein (dus wel gecentreerd binnen een bepaald kader, maar niet binnen het scherm). Dan voeg ik het extra statement toe en zie dat dan wel alles centreert.
Ik kan natuurlijk niet naar jouw domein uploaden voor een finale test. Maar als je dat zelf even doet, kijk ik wat er te zien is. Ik ben zelf geen programmeur, maar heb wel een programmeur bij de hand. Als we er niet uitkomen vraag ik hem om raad.
Maar misschien begrijp ik je verkeerd en heb je veel meer code dan dat stukje in je eerste posting. Dan kan het zijn dat die div instellingen van voorgaande code overneemt. Die code heb ik dan neit en kan die dan ook niet meenemen. In elk geval moet het een kleinigheid zijn.
Je hebt FF. Heb je ook de add-on "Firebug" geïnstalleerd? Daarmee kun je dit soort zaken goed zichtbaar maken.
Hmm. Nu ben ik "puzzled". Posting #57. Was dat wel een reactie op mijn bericht, of een reactie op het bericht van JaapdVries? want met die code zie ik het zelfde als wat jij in #57 beschrijft.
 

Bijlagen

  • Image2.jpg
    Image2.jpg
    12,2 KB · Weergaven: 32
Laatst bewerkt:
Hmm. Nu ben ik "puzzled". Posting #57. Was dat wel een reactie op mijn bericht, of een reactie op het bericht van JaapdVries? want met die code zie ik het zelfde als wat jij in #57 beschrijft.
Klik om te vergroten...

was op jouw bericht!

Ik heb zelf een code en die zal ik eens uploaden. Dat is de eerdere code die ik zelf had. Deze is zonder css (die file die Jaap gemaakt heeft doet dus niets)

Verder zie ik bij geen enkele afbeelding tekst. Is deze verwijderd, of is de titel tekst niet zichtbaar mij?
Dit omdat ik de titeltekst altijd aanpas, maar dan beter kan verwijderen ...
Klik om te vergroten...
Nog even hier op terugkomen, ik zie wel tekst in Thunderbird. Niet alle plaatjes maar dat kan natuurlijk komen hoe de schrijver van het artikel met die plaatjes omgaat en of hij ze van tekst voorziet.

Edit:
heel raar dit.
Ik heb de code:
Code: 
<center>
<div id="container">
<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>
</center>

Als ik deze eerst test via het tekstbestandje dan ziet het er zo uit (opent dus in Firefox):

Bekijk bijlage 235411

als ik deze upload naar de DirectAdmin met de naam index.html dan ziet het er zo uit:

Bekijk bijlage 235413

Toch raar?
 
Laatst bewerkt:
Zo heb ik getest. Met deze code staat bij mij alles gecentreerd:
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan