body zakt door margin van ander element

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jop B

Jop B

16/04/2015 12:02:50
Quote Anchor link
Beste,


Zelf zie ik het probleem niet, waarschijnlijk omdat ik er te lang mee bezig ben.
Toch vraag ik of een van jullie iets ziet in de opbouw van css/html.

html:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>new page</title>
<link type="text/css" href="css/style.css" rel="stylesheet" ></link>
</head>

<body>
<div class="wrapper">
<form name="info" id="form">
<input class="fields" id="first-name" placeholder="Voer uw voornaam in" type="text" name="fname" value="" autocomplete="off" />
<input class="fields" id="last-name" placeholder="Voer uw achternaam in" type="text" name="lname" value="" autocomplete="off" />
<button type="submit" name="submit" id="submit">send</button>
</form>
</div>
</body>
</html>


css:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
body            {
            margin: 0;
            padding: 0;
            font-family:
            sans-serif; font-size: 10pt;
            z-index:0;
            }

.wrapper        {
            width:240px;
            margin-left:auto;
            margin-right:auto;
            z-index:1;
            }

#form            {
            margin-top: 50px;
            }

input.fields        {
            border-top:none;
            border-left:none;
            border-right:none;
            color:#BD1978;
            font-size:18px;
            margin-bottom:12px;
            background: transparent;
              outline: 0;
            width:100%;
            clear:both;
            float:left;
            }


Momenteel is het zo dat de body 50px omlaag opschuift, dit komt door de margin-top op het element #form.
Het zou toch moeten zijn dat hij de margin-top binnen de class wrapper moet maken?

Hoe kan ik dit oplossen, heb diversen dingen geprobeerd. De class wrapper moet top:0px blijven ;-)

Gr. Jop
 
PHP hulp

PHP hulp

29/03/2024 12:26:35
 
Rick B

Rick B

16/04/2015 12:21:46
Quote Anchor link
Probeer dit eens in je #form

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
#form {
        padding-top: 50px;
}

of

#form {
        position: absolute;
        top: 50px;
}
Gewijzigd op 16/04/2015 12:24:20 door Rick B
 
Jop B

Jop B

16/04/2015 15:03:16
Quote Anchor link
Thanks Rick,

De padding-top werkt wel normaal :-)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.