PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

Hyperlinks positioneren

Door John De Zon op 11-12-2015 14:32
2.027 views
Hallo iedereen,

Ik wil mijn hyperlinks op bepaalde plaatsen op mijn pagina zetten.
Ik heb al zitten knoeien met positions maar het wil niet baten. Hoe kan ik dit oplossen?
Hieronder mijn code:
<style>
                .registerlink {
                    padding-top: 500px;
                    font-size: 40px;
                    position: relative;
                    left: 200px;
                }
            </style>
            <a class="registerlink" href="../registreren.php">Registreren</a>
M
Max Vaessen
11-12-2015 14:53
Hoi Chris,

Heb je een link / iets meer code om te zien hoe wat en waar (en misschien iets meer tekst en uitleg waar het moet komen)?
J
John De Zon
11-12-2015 14:56
Ik heb een background en een beetje tekst op mijn pagina. Ik wil de hyperlinks gewoon onder de tekst op sommige plaatsen zetten. De een staat hoger dan de ander.

Alvast bedankt voor je snelle reactie!
M
Max Vaessen
11-12-2015 14:58
Hoi Chris,

Heb je iets van een screenshot? Ik word er eerlijk gezegd niet veel wijzer van :)
M
Max Vaessen
11-12-2015 15:18 gewijzigd op 11-12-2015 15:22
Mogelijk werkt dit, eventueel met een position:absolute als de rest ook naar beneden gaat:


<style>
    .registerlink {
        position: relative;
        top:50px;
        left: 200px;
        font-size: 40px;
    }
</style>


(het blijft wel een beetje gissen op basis van een screenshot uiteraard :) )
J
John De Zon
11-12-2015 15:25
Dank je! Het werkt! Maar ik heb nog 1 probleem.
Als ik mijn venster kleiner maak dan overlapt de tekst. Hoe kan ik ervoor zorgen dat deze niet overlapt en dat je moet scrollen?
Ik heb de code een beetje aangepast.
            <style>
                .registerlink {
                    position: relative;
                    top:75%;
                    left: 200px;
                    font-size: 40px;
                }
            </style>
M
Max Vaessen
11-12-2015 15:30
Zou je de broncode hier kunnen plaatsen, je kunt de tekst en plaatjes er verder uitlaten.
Het gaat vooral om de opzet en de verschillende blokken die je gebruikt, dan kan ik er goed naar kijken.
J
John De Zon
11-12-2015 15:32 gewijzigd op 11-12-2015 15:33
Ok, ---------... = tekst

<style>
    @import url(https://fonts.googleapis.com/css?family=Raleway:300|Open+Sans:300);
</style>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <title>Titel</title>
    </head>
    <body>
        <style>
            body {
                background: url(../images/background.jpg) no-repeat center center fixed; 
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }
        </style>
        <div class="content">
            <div id="content">
                <br/>
-------------------------------
            </div>
        </div>
            <style>
                .registerlink {
                    position: relative;
                    top:75%;
                    left: 200px;
                    font-size: 40px;
                }
            </style>
            <a class="registerlink" href="../registreren.php">Registreren</a>
    </body>
</html>


En voor de CSS:

body {
    margin: 0;
    font-family: 'Raleway';
}

h1 {
    margin: 0px;
    font-size: 45px;
}

h2 {
    margin: 0px;
    font-size: 20px;
}

p {
    margin: 0px;
}

a {
    color: white;
}

.text {
}

.content {
    position: absolute;
    width: 500px;
    padding-left: 30%;
    height: 500px;
    text-align: center;
}

#content {
    color: white;
}

#head {
    width: 100%;
    height: 350px;
    background-image: url(../images/background.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.title {
    padding-top: 75px;
    margin-left: 50px;
}

.box {
    margin: 20px 100px 20px 100px;
    border: 1px solid #e7e8ec;
}

input.text {
    height: 30px;
    width: 250px;
    border: 1px solid #e7e8ec;
}

textarea.message {
    height: 100px;
    width: 250px;
    border: 1px solid #e7e8ec;
    margin-left: 10px;
}

input.submit {
    width: 82px;
    height: 40px;
    background-color: #ffffff;
    color: #183951;
    margin-left: 10px;
    border: 1px solid #e7e8ec;
    font-size: 13px;
}

input.submit:hover {
    width: 82px;
    height: 40px;
    background-color: #e7e8ec;
    color: #183951;
    margin-left: 10px;
    border: 1px solid #e7e8ec;
    font-size: 13px;
}

input.submit:hover {
    width: 82px;
    height: 40px;
    background-color: #e7e8ec;
    color: #183951;
    margin-left: 10px;
    border: 1px solid #e7e8ec;
    font-size: 13px;
}

#text {
    margin-left: 20px;
    margin-top: 10px;
}
M
Max Vaessen
11-12-2015 15:48 gewijzigd op 11-12-2015 16:42
Hoi Chris,

En hoe moet de button zich gedragen? Want hij valt nu (responsive gezien) op een gegeven punt inderdaad over de title / text.
Als je de button altijd links wilt houden, zul je toch ergens concessies moeten doen.

Je kunt kiezen voor media-queries (om bij bepaalde breedtes van het scherm de marges e.d. aan te passen). Misschien kun je beter voor een framework als Bootstrap kiezen (alleen het grid systeem) als je een website responsive wilt maken.

Responsive sites maken met absolute posities op de containers (in jouw geval .content) werk vaak niet heel goed.

Je zou ook kunnen kiezen voor iets in deze richting:


.contentWrapper {
   display:table;
   margin:0 auto;
   width: 500px;
}

.content {
   display:table-cell;
}

.registerlink {
   display:table-cell;
   padding:0 50px 0 0;
   margin-left:-40px;
}



<div class="contentWrapper">

   <a class="registerlink" href="../registreren.php">Registreren</a>

   <div class="content">
      <div id="content">
         Duis facilisis fermentum est sit amet facilisis. Nullam varius mauris nec scelerisque rutrum. Etiam id ante et felis pharetra vehicula quis non leo. 
      </div>
   </div>

</div>

Reageren

Inloggen om te reageren