Uitlijning logo tekst

Status
Niet open voor verdere reacties.

marc 05

Gebruiker
Lid geworden
5 sep 2006
Berichten
227
Ik heb binnen een <Div> een logo met float links geplaatst. Nu moet in het midden van deze Div nog tekst komen en rechts nog een logo
Tekst alleen gaat met .center maar zet ik het eerste logo erin dan gaat het al fout.
<h1 class="center">tekst </h1>

Wat kan ik het beste doen binnen de Div om deze 3 dingen op een rij te krijgen. De Div heeft een percentage van 80 procent van het scherm. Gaat dit alleen maar wanneer ik 3 divs naast mekaar zet?
Het moet namelijk een responsive site worden waar telkens een van de 3 zal verdwijnen.
 
Laatst bewerkt:
Hallo,

Er zijn meerdere mogelijkheden.
Kun je een plaatje geven hoe het eruit moet gaan zien?
Hebben de 2 logo's dezelfde afmeting of zijn ze verschillend?

RE: waar telkens een van de 3 zal verdwijnen.
Doe je dit met Javascript/jQuery?
 
Laatst bewerkt:
Hallo,

Even een schets wat ik tot nu heb. Dit even vanuit de telefoon.

Een div header met daarin 3 divs. Verdeeld met percentage. Linker en rechter 30 procent en midden 40 procent.
Linkse en rechts beide logo van zelfde formaat. Tekst staat in middelste div uitgelijnd.

Als de pagina smaller wordt responsive deel dan block ik telkens een div beginnend met de rechtse.
Waarschijnlijk kan het met javascript makkelijker.
Toch schuiven de divs me te snel over mekaar. Had even geprobeerd het rechtse logo in background te zetten.
Dit is wel beter.
Ook een poging gedaan om het logo te schalen maar dan zakt de wrapper teveel ten opzichte van de header doordat de plaatjes omhoog schuiven
 
Als concept...

html
Code:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Header logo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <div class="header">
        <div class="logo1">
            <img src="logo1.png" alt="" />
        </div>
        <div class="text">
            <h1 class="center">Titel pagina</h1>
        </div>
        <div class="logo2">
            <img src="logo2.png" alt="" />
        </div>
    </div>
</div>
</body>
</html>

style.css
Code:
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
html, body {
    height: 100%;
}
body {
    margin: 0;
    font: normal 14px arial,sans-serif;
}
h1 {
    font-family: inherit;
    font-size: 36px;
    font-weight: 500;
}
img {
    border: 0;
    vertical-align: middle;
    display: block;
    max-width: 100%;
    height: auto;
}
.container {
    min-height: 100%;
    width: 80%;
    margin: 0 auto;
}
.header {
    width: 100%;
}
.header::after {
    display: table;
    clear: both;
    content: "";
}
.header img, .header h1 {
    width: 100%;
}
.center {
    text-align: center;
}
.logo1, .text, .logo2 {
    float: left;
    width: 100%;
    min-height: 1px;
}
@media (min-width: 480px) {
    .logo1 {
        width: 43%;
    }
    .text {
        width: 57%;
    }
    .logo2 {
        width: 100%;
    }
    .logo2 img {
        width: 43%;
    }
}
@media (min-width: 960px) {
    .text {
        width: 40%;
    }
    .logo1, .logo2    {
        width: 30%;
    }
    .logo2 img {
        width: 100%;
    }
}

Suc6. Have fun.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan