CSS: Logo en input in midden

Hoi,

Ik heb me projectje weer terug gekocht, heb nu wat meer ervaring met CSS dus wil ik het nu beter gaan maken. Ik heb het volgende probleem waar ik niet weet wat ik moet doen. Het gaat over de header.

Wat ik dus wil hebben:

- Logo moet 10px vanaf de linkerkant hebben en boven en beneden precies in het midden.
- De input moet in het midden staan van de header. Maar 10px vanaf de onderkant van de input.

Ik heb al wat zitten te klooien met de code maar ik kom er niet uit.

CSS van de header + logo + input:

Codeblok (voorbeeld.css):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#header {
margin: auto;
width: 100%;
height: 97px;
background: rgb(251, 212, 94);
border-bottom: 2px solid rgb(226, 171, 5);
}

#logo {
position:relative;
float:left;
margin:auto;
background: url(/afb/logo.jpg);
width:395px;
height:74px;
}

#station_input {
position:absolute;
display:inline;
margin:auto;
width:150px
}

Hopelijk kan iemand mij uitleggen hoe dit moet.

- Dylan

toevoeging op 7 september 2013, 12:59:32:
Opgelost door de header opnieuw te coderen

Op welke manier gecodeerd?
Met wat relevante code kunnen anderen er ook wat van leren.

Aarclay schreef:

Op welke manier gecodeerd?
Met wat relevante code kunnen anderen er ook wat van leren.

Ik denk dat het al is opgelost zie toevoeging

Aarclay schreef:

Op welke manier gecodeerd?
Met wat relevante code kunnen anderen er ook wat van leren.

Ik haalde logo weg en daarna kon ik de input goed zetten en deed ik het logo terug en het werkte.

Heb nu een andere probleem met fancybox:Hier is die wel goed, maar met fancybox staat die niet in het midden

Wat staat er niet goed?

Patricka schreef:

Wat staat er niet goed?

Zie pijltje. De tabel staat niet in het midden.

Ligt niet echt aan de fancybox lijkt me. Check je margins anders eens.

Dylanh schreef:

Eerdere citaten tonen

Patricka schreef:

Wat staat er niet goed?

Zie pijltje. De tabel staat niet in het midden.

Oh, sorry.

Moet je even spelen met de margins van je tabel en anders van de fancybox.

Margins zijn gewoon auto:

Oke, ik heb nu een lightbox alleen heb ik nu het volgende probleem, ik krijg het niet in het midden.

CSS:

Codeblok (voorbeeld.php):

1
2
3
4
5
6
7
8
9
10
11

.white_content {
display: none;
position: absolute;
height:500px;
width:90%;
margin-left:auto;
margin-right:auto;
background-color: white;
z-index:1002;
overflow: auto;
}

Ik heb wat gekloot alleen ik kom er niet uit. Weet iemand hoe ik de lightbox in het midden kan krijgen?

Dylanh schreef:

Oke, ik heb nu een lightbox alleen heb ik nu het volgende probleem, ik krijg het niet in het midden.

Afbeelding

CSS:

Codeblok (voorbeeld.php):

1
2
3
4
5
6
7
8
9
10
11

.white_content {
display: none;
position: absolute;
height:500px;
width:90%;
margin-left:auto;
margin-right:auto;
background-color: white;
z-index:1002;
overflow: auto;
}

hej ik weet misschien wat? verander position: absolute; in fixed? moet het opgelost zijn

Ik heb wat gekloot alleen ik kom er niet uit. Weet iemand hoe ik de lightbox in het midden kan krijgen?

toevoeging op 14 september 2013, 13:45:32:

Jordymen schreef:

Eerdere citaten tonen

Dylanh schreef:

Oke, ik heb nu een lightbox alleen heb ik nu het volgende probleem, ik krijg het niet in het midden.

Afbeelding

CSS:

Codeblok (voorbeeld.php):

1
2
3
4
5
6
7
8
9
10
11

.white_content {
display: none;
position: absolute;
height:500px;
width:90%;
margin-left:auto;
margin-right:auto;
background-color: white;
z-index:1002;
overflow: auto;
}

hej ik weet misschien wat? verander position: absolute; in fixed? moet het opgelost zijn

Ik heb wat gekloot alleen ik kom er niet uit. Weet iemand hoe ik de lightbox in het midden kan krijgen?

hej ik weet misschien wat? verander position: absolute; in fixed? moet het opgelost zijn

toevoeging op 14 september 2013, 13:49:04:

Dylanh schreef:

Oke, ik heb nu een lightbox alleen heb ik nu het volgende probleem, ik krijg het niet in het midden.

Afbeelding

CSS:

Codeblok (voorbeeld.php):

1
2
3
4
5
6
7
8
9
10
11

.white_content {
display: none;
position: absolute;
height:500px;
width:90%;
margin-left:auto;
margin-right:auto;
background-color: white;
z-index:1002;
overflow: auto;
}

Ik heb wat gekloot alleen ik kom er niet uit. Weet iemand hoe ik de lightbox in het midden kan krijgen?

Hoor graag van je of het is gelukt?

Jordyman, thanks.

Het was geen fixed maar ik moest position op relative zetten ipv absolute. Door jouw had ik dit dus geprobeerd. Maar thanks! lol.

Dylanh schreef:

Jordyman, thanks.

Het was geen fixed maar ik moest position op relative zetten ipv absolute. Door jouw had ik dit dus geprobeerd. Maar thanks! lol.

Ow ik weet dat als je absolute op fixed zet hij bij alle handelingen het zelfde doet?

Heb nu weer een andere probleem; ik wil mijn lightbox een border-radius van 5 px geven. Links boven heeft die dat maar de andere kanten niet.

Van rechts boven en onder snap ik het want daar zit een scroll balkje, maar waarom pakt die links onder niet?