Een homepage met 2 linken

Status
Niet open voor verdere reacties.
Nee, heb niets aan de style veranderd hoor.

De css is
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;
}

daar staat dus niets in zie ik, van in het midden zetten.

Moet jouw regel dan boven staan?
 
Ik denk dat je nu zo ver bent dat je gekozen hebt om met index.css verder te gaan. Die keuze is belangrijk, anders blijven we op twee gedachten hinken. Mijn code ging nog uit van de situatie van alleen html. Die klopt dus niet meer als je index.css gaat gebruiken.
Gezien het feit dat anderen meer ervaring (b)lijken te hebben, geef ik even geen aanwijzingen meer, anders lopen we elkaar maar voor de voeten en kom je er niet meer uit.
 
Nou, ik vond je hulp anders heel duidelijk Veng. Heb er al wat van geleerd!!
Als er nu anderen weer andere dingen aangeven, dan ga ik het niet meer snappen ;)

Ik wil zoals het nu is (zie dus de link angelavanderploeg.nl) maar dan in het midden van de pagina.
De achtergrond en zo ga ik dan zelf doen, die link die ik eerder gaf wat ik al gelezen heb, is duidelijk en simpel geschreven. Dus dat gaat goed komen!
 
Dan stel ik voor dat je de code van Jaap implementeert en dat we gaan kijken om die bij jou werkend te maken (mijn code ombouwen naar index.css zal alleen maar verwarring geven.
Bij mij werkt Jaap's code. Zie heronder:
PHP: 
<html xmlns="http://www.w3.org/1999/xhtml">
<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="index.css" />
</head>
<body>
    <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>
</body>
</html>

Ik ga er van uit dat je css-file heet: index.css (dus geen hoofdletters) en dat die in de zelfde folder staat als de html file.

De rest van de middag ben ik uit de lucht (Ondanks de regen :-( ga ik toch op pad)
 

Bijlagen

  • Image3.jpg
    Image3.jpg
    12,4 KB · Weergaven: 33
Laatst bewerkt:
Ik ga er van uit dat je css-file heet: index.css (dus geen hoofdletters) en dat die in de zelfde folder staat als de html file.
Klik om te vergroten...
zie mijn secreenshot van de public_html
De 2 files staan onder elkaar.

attachment.php


Ik ga de html file nu uploaden en dan zal ik eens kijken of het nu wel werkt.

Edit: YES! Het staat nu in het midden van de pagina! We komen er wel, dankzij alle hulp van hier.
Heb nu wat kleuren veranderd, en ga nu inlezen over een achtergrond of plaatjes erin zetten.
 
Laatst bewerkt:
Nog even vraagje:

als ik een achtergrond wil (een foto), moet ik deze dan alleen in de css zetten of ook in de html?

In de css moet het dan worden:

Code: 
body {
background-image: url(/framework/data/magazine/nummers/62/LocatieLogo/logo.jpg);
background-attachment: fixed;
background-repeat: no-repeat
}

waar de locatie uiteraard wordt vervangen door waar de foto staat.
Ikheb een foto geupload naar de public_html en dus is het pad domains/angelavanderploeg.nl/public_html/logo.JPG

En verder de vraag:
als ik op de praktijk of pc hulp klik, dan worden de letters rood......en ik heb een hekel aan rood.
Nu zie ik in de css nergens staan dat de letters van kleur veranderen en dus kan ik nergens de kleur rood aanpassen. Waar staat dit en hoe verander ik het?

Alvast bedankt!!
 
Volgens mij zet je een achtergrond in de css.
Mijn images zelf heb ik echter in de html staan, maar dat is meer omdat ik niet alle ins en outs van images in de .css ken.
In de css kun je ook wel aangeven welke kleur een link moet worden als hij aangeklikt is. Ik kan het alleen niet zo snel uitleggen:
http://www.w3schools.com/css/css_link.asp

Hier wat css code:
PHP: 
.class1 A:link
{
    text-decoration: none;
    color: #161665
}
.class1 A:visited
{
    text-decoration: none;
    color: #A5B8C3
}
.class1 A:hover
{
    font-weight: bold
}

Voor jou wordt het dan waarschijnlijk:
PHP: 
#havayah:visited
{
    text-decoration: none;
    color: #A5B8C3
}
 
Laatst bewerkt:
Ik dacht dat ook, van die achtergrond, dat die alleen in de html moet worden gezet.
Ik ga daar eens voor puzzelen.

In de css zet je inderdaad dat hoover gebeuren van tekst, maar ik weet niet precies hoe het heet, dus vandaar dat ik het vraag.
Het rood wat het nu geeft, zie ik niet terug in de css en html, dus dat vind ik wel vreemd. Want dan is het een kwestie van color veranderen.
 
Hoi femke, welke html en css gebruik je nu, dan weet ik wat ik voor je kan veranderen :)
 
Ik ga ze even hier neerzetten:

html:
Code: 
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<body>
    <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 reading, healing, wandelcoach, huisreiniging en Spirit
                            Art
                        </div>
                    </div>
                </tr>
                <div id="middenstuk">
                </div>
                <tr>
                    <div id="almere">
                        <div id="koptekst">
                            <a href="http://pchulp-almere.nl" target="_blank">PC Hulp Almere
                        </div>
                        </a>
                        <div id="ondertekst">
                            PC hulp voor particulieren
                        </div>
                    </div>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

css:
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: 2px solid #493940;
    border-top: 2px solid #493940;
    border-right: 2px solid #493940;
    padding-top: 25px;
}

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

#middenstuk {
    background-color: #493940;
    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: 2px solid #493940;
    border-bottom: 2px solid #493940;
    border-right: 2px solid #493940;
    padding-top: 25px;
}

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

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

#ondertekst {
    font-size: 20px;
}

De achtergrond die ik heb geupload heet logo.jpg
Het pad /domains/angelavanderploeg.nl/public_html/logo.jpg

Het rood kan ik niet terugvinden dus dat wil ik graag veranderd zien. Je mag mij ook vertellen hoe ik dat moet doen. Dan kan ik het zelf en daar leer ik van ;)
 
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angela van der Ploeg</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>
<body>
    <div class="container">
        <div id="havayah">
            <div class="koptekst">
                <a href="http://www.praktijk-havayah.nl" target="_blank">Praktijk Havayah </a>
            </div>
            
            <div class="ondertekst">
                Spirituele praktijk voor reading, healing, wandelcoach, huisreiniging en Spirit Art
            </div>
        </div>
        
                    
            <div id="middenstuk">
            </div>
                   
        <div id="almere">
            <div class="koptekst">
                <a href="http://pchulp-almere.nl" target="_blank"> PC Hulp Almere </a>
            </div>
            
            <div class="ondertekst">
                PC hulp voor particulieren
            </div>
        </div>
    </div>
</body>
</html>

Code: 
body {
    background-image: url("/domains/angelavanderploeg.nl/public_html/logo.jpg");
}

.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: 2px solid #493940;
    border-top: 2px solid #493940;
    border-right: 2px solid #493940;
    padding-top: 25px;
}

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

#middenstuk {
    background-color: #493940;
    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: 2px solid #493940;
    border-bottom: 2px solid #493940;
    border-right: 2px solid #493940;
    padding-top: 25px;
}

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

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

.ondertekst {
    font-size: 20px;
}

a:active {
    color: green;
}
 
Laatst bewerkt:
Dit zijn de nieuwe goede codes, verplaats dat met je oude codes. En welk rood bedoel je precies?
 
@Jaap: Er zitten nog een paar foutjes in de nieuwe code: "unmatched closing tab" omdat </a> buiten de div staat.
en "dupplicate id" op "ondertekst" en "koptekst"

Met het rood bedoelt Angela dat "visited link" rood wordt. Dat vindt ze blijkbaar niet mooi.

Veder zie ik nu ook dat de div's zo niet genest mogen worden: "within element <tr>" en "within tbody"
 
Laatst bewerkt:
Goed gezien Veng, ik heb blijkbaar nog een kopje koffie nodig ;)

@ femke, de code om rood te vervangen staat er nu wel bij. Namelijk helemaal onderaan bij de css: a:active etc..
 
Laatst bewerkt:
Met het rood bedoelt Angela dat "visited link" rood wordt. Dat vindt ze blijkbaar niet mooi.
Klik om te vergroten...
De kleur rood is niet mijn ding, ik vind het vreselijk (okee, 1 rode roos vind ik wel mooi hoor! ;) ). Ik snap niet hoe die er in is gekomen, omdat ik deze nergens terug zie.

Ik ben zo blij met jullie, echt waar!

Welke code Jaap?
 
Haha. Ik had niets gezien, maar Micr. Visual Studio geeft dat automatisch aan ;)
 
@ femke, de code om rood te vervangen staat er nu wel bij. Namelijk helemaal onderaan bij de css: a:active etc..
De reden dat het rood wordt is omdat het standaard er in zit, daarom kon je de code niet vinden.
 
@ veng, ik denk trouwens dat je nog naar de oude code kijkt, want de nieuwe code heeft geen <tr> meer.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan