[css] Header bug

woensdag 8 juli 2015 14:56

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Goedenavond,

Ik ben voor mezelf een CMS aan het maken. Echter loop ik tegen een probleem aan waar ik zelf even geen oplossing meer voor zie.
Als ik het logo zoals te zien is op het eerste screenshot: "float: left;" meegeef, krijg ik het resultaat zoals op screenshot 2 te zien is. Oftewel de blauwe achtergrond is weg.
Hopelijk kan iemand mij helpen, ik zie namelijk zelf niet meer hoe ik dit kan oplossen.

Dimitri

Screenshot 1: www.dimitrigeers.nl/bug-1.png
Screenshot 2: www.dimitrigeers.nl/bug-2.png

code:

<html>

<head>
<title>Dimiti Geers CMS</title>
<link href="style.css" rel="Stylesheet" type="text/css" />
</head>

<body>

    <div id="header">
    
        <div id="content">
    
            <div id="logo"><img src="images/logo-wit.png" style="width: 100%; height: auto;"></div>
            
            <div id="header-gegevens">
            
                <b>Dimitri Geers</b><br/>
                Administrator<br/><br/>
                Instellingen | Uitloggen
            
            </div>
            
        </div>
    
    </div>

</body>

</html>

code:

@font-face {
  font-family: 'MavenPro';
  src: url('fonts/MavenProLight-200.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html, body {

    padding: 0px;
    margin: 0px;

}

#header {

    background-color: #3499D5;
    width: 100%;
    height: auto;
    margin: 0px;

}

#header #content {

    width: 80%;
    height: auto;
    clear: both;
    margin: 0px auto;

}

#header #content #logo {

    width: 30%;
    height: auto;
    margin-left: 10%;
    padding-top: 2.5%;
    padding-bottom: 2.5%;

}

#header #content #header-gegevens {

    width: 40%;
    height: auto;
    float: right;

}

woensdag 8 juli 2015 15:02

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Tsja, als je de enige content van een container gaat lopen floaten dan collapset the hele container. Je zal dus je floats moeten clearen en/of een clearfix toepassen, of kiezen voor een andere oplossing dan floats. Waar je precies voor moet kiezen is wat lastig adviseren zonder te weten wat je eigenlijk wil dat er precies gebeurt.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

woensdag 8 juli 2015 15:04

Acties:

0 Henk 'm!

FotW

NMe was me voor, inderdaad zonder te weten wat je wil is het lastig helpen.

Als ik je portfolio bekijk zie ik dat je meer issues hebt met floating, met name het clearen daarvan, misschien is het handig als je je daar in verdiept?

[ Voor 51% gewijzigd door FotW op 08-07-2015 15:06 ]

woensdag 8 juli 2015 15:56

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik wil graag het volgende design maken: http:www.dimitrigeers.nl/design.png

woensdag 8 juli 2015 16:06

Acties:

0 Henk 'm!

ViNyL

Zoals boven aangegeven zijn er een aantal methodes voor het clearen van floats voorhanden, dit is wel een aardig overzicht:
http://www.sitepoint.com/...fferent-clearfix-methods/

woensdag 8 juli 2015 16:15

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Het is opgelost.
Ik heb het volgende stukje code toegevoegd.

code:

#header::after{
content: ".";
visibility: hidden;
display: block;
clear: both;
}

woensdag 8 juli 2015 16:40

Acties:

0 Henk 'm!

FotW

Maar snap je nu ook waarom je dit moet doen en hoe floats uberhaupt werken?

Je vergeet overigens in je site een doctype te zetten

[ Voor 43% gewijzigd door FotW op 08-07-2015 16:44 ]

woensdag 8 juli 2015 22:49

Acties:

0 Henk 'm!

Gooly

Wie? Ik?

Als je een element float (of positioneert) verdwijnt hij uit de normale 'flow' en wordt daarmee onzichtbaar voor het parent element. Het parent element zal zich dan niet meer voegen naar het floatende kind.
In dit geval dus het logo.
Aangezien je het enige andere kind; header-gegevens ook al float, is die dus ook onzichtbaar voor de parent.
Dan blijft er dus helemaal niks meer over voor de parent om zich naar te voegen en blijft hij 0 pixels hoog.
Ik los dat meestal op door de parent een clearfix mee te geven.

In bepaalde gevallen (maar niet in dit geval) kun je floaten ook vermijden door inline-block toe te passen ipv float. Bijvoorbeeld als je een unordered list als horizontaal menu wilt weergeven.

See that's the trouble with reality, it's taken far too seriously.

donderdag 9 juli 2015 00:25

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Css

NMe schreef op woensdag 08 juli 2015 @ 15:02:
Tsja, als je de enige content van een container gaat lopen floaten dan collapset the hele container. Je zal dus je floats moeten clearen en/of een clearfix toepassen, of kiezen voor een andere oplossing dan floats. Waar je precies voor moet kiezen is wat lastig adviseren zonder te weten wat je eigenlijk wil dat er precies gebeurt.

Is overflow:auto op de container zetten niet handiger? (Of valt dat onder "een clearfix"?)

[ Voor 3% gewijzigd door RobIII op 09-07-2015 00:29 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 9 juli 2015 02:51

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

RobIII schreef op donderdag 09 juli 2015 @ 00:25:
[...]

Is overflow:auto op de container zetten niet handiger? (Of valt dat onder "een clearfix"?)

Dat is niet helemaal wat ik bedoelde maar als dat ook werkt is dat natuurlijk ook prima.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

donderdag 9 juli 2015 10:22

Acties:

0 Henk 'm!

Gooly

Wie? Ik?

RobIII schreef op donderdag 09 juli 2015 @ 00:25:
[...]

Is overflow:auto op de container zetten niet handiger? (Of valt dat onder "een clearfix"?)

Dat werkt ook, alleen werkt dat pas vanaf Android 4.4 (KitKat)

See that's the trouble with reality, it's taken far too seriously.

vrijdag 10 juli 2015 20:42

Acties:

0 Henk 'm!

R4gnax

RobIII schreef op donderdag 09 juli 2015 @ 00:25:
[...]

Is overflow:auto op de container zetten niet handiger? (Of valt dat onder "een clearfix"?)

Aangezien je het daarmee ook onmogelijk maakt om gepositioneerde content deels uit de container te laten lopen: nee. Dat is zeker niet handiger.

Als je een clearfix patroon gaat gebruiken, gebruik dan een patroon dat je in zoveel mogelijk - zo niet alle - scenario's consistent toe kunt passen.

[ Voor 19% gewijzigd door R4gnax op 10-07-2015 20:44 ]

vrijdag 10 juli 2015 21:33

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

R4gnax schreef op vrijdag 10 juli 2015 @ 20:42:
[...]

Aangezien je het daarmee ook onmogelijk maakt om gepositioneerde content deels uit de container te laten lopen: nee. Dat is zeker niet handiger.

Dat lijkt me in het geval van de topicstarter geen probleem.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

vrijdag 10 juli 2015 23:08

Acties:

0 Henk 'm!

R4gnax

NMe schreef op vrijdag 10 juli 2015 @ 21:33:
[...]

Dat lijkt me in het geval van de topicstarter geen probleem.

In dit specifieke geval nog niet, nee.

Onderwerpen