Problemen met responsive banner
Ik had een vraag ik ben bezig met een responsive website
maar loop tegen het volgende probleem aan.
Mijn banner :
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
#header {
background-image:url(images/main-banner.png);
background-repeat:no-repeat;
background-size:100%;
padding-top:18.34016%; /* IMG H:IMG W (179/976) */
border-bottom:1px #FFFFFF solid;
}
background-image:url(images/main-banner.png);
background-repeat:no-repeat;
background-size:100%;
padding-top:18.34016%; /* IMG H:IMG W (179/976) */
border-bottom:1px #FFFFFF solid;
}
Werkt zo perfect schaalt goed mee maar!
Als ik nu een div toevoeg die float
Code (php)
1
2
3
4
5
2
3
4
5
#websitenaam {
float:right;
top:0px;
right:1.05263%;
}
float:right;
top:0px;
right:1.05263%;
}
Dan drukt de padding hem omlaag (onder de header div) begrijp ik ook maar hoe kan ik dit wel voor elkaar krijgen aangezien ik geen standaard Heigth kan instellen omdat hij anders niet responsive meeschaalt in de hoogte.
Heeft iemand een oplossing voor mij of is er een andere manier om mijn header zowel in heigth als in weigth mee te laten schalen? Zodat ik er wel een div op kan plaatsen?
Alvast bedankt,
Met vriendelijke groet,
Mark
Gewijzigd op 19/10/2014 16:02:23 door Mark van den Brink
En wellicht is min-height een optie voor je?
Zoals ik het nu lees is jouw div gewoon pagina breed omdat je geen width opgeeft. Het volgende element dat buiten de div valt zal dus altijd onder de div komen te staan.
http://codepen.io/anon/pen/qmsAo
Gewijzigd op 19/10/2014 18:53:47 door Frank Nietbelangrijk
Maar ook zoals je daar ziet word de div websitenaam naar beneden geduwd door de padding-top.
Heb hem even nagemaakt
http://codepen.io/markbrink/pen/qjcDn
Hier zie je ook dat de tekst omlaag gedrukt word inplaats van erop nu kan ik het wel bereiken bijv met position absolute maar dan als ik me browser verklein tilt gaat hij door me hele layout heen inplaats van dat ie daar blijft??
Heb min-heigth ook geprobeerd alleen als ik een percentage opgeef dan zie je hem helemaal niet en met een px instelling is de banner niet scaleable want dan word de background image kleiner maar de div blijft 179px...Maar op die manier is wel tekst probleem verholpen dat klopt alleen krijg ik dan dus kale ruimte bij het schalen.
Gewijzigd op 20/10/2014 05:13:38 door Mark van den Brink
Ik snap niet wat precies je uitkomst moet worden :p sorry
http://codepen.io/anon/pen/JdmIo
Ik zou niet weten hoe je dat voor elkaar kunt krijgen als je de afbeelding als achtergrond afbeelding hebt behalve met javascript.
Je kunt wel gewoon de <img> gebruiken en alleen width=100% opgeven. Dan wordt de hoogte automatisch aangepast.
Daarnaast kun je dan met position:absolute; een div met tekst over de afbeelding heen laten zweven.
Toevoeging op 20/10/2014 13:19:48:
http://codepen.io/anon/pen/EbGCx
Gewijzigd op 20/10/2014 13:16:43 door Frank Nietbelangrijk
Ik veronderstel dat #websitenaam ook alleen een extra div is om een stukje tekst rechts te hebben...
Vanochtend in de auto was ik ook al in me hoofd bezig waarom doe ik eigenlijk niet gewoon een image en dan floaten erover is makkelijker.
En nu ik jullie reacties zie ga ik dit ook meteen proberen.
Hoewel ik die van Rickert eerst ga uittesten omdat die toch eigenlijk mijn backgroundimage script gebruikt.
Jullie horen het van me als het gelukt is! Bedankt voor alle reacties in ieder geval.
Of anders cover of 100% auto?
Heb de tekst inderdaad over de afbeelding op zijn positie maar dan komt het als ik mijn
browser schaal krimpt de tekst niet word het gewoon rommelig door elkaar heen gegooid.
Wat mijn bedoeling is van de header is dat als je de banner voor je hebt.
- in het midden een logo
- aan de rechterkant de tekst hebt.
- aan de linkerkant de inloginputs
- onderaan de banner een balk van 30 px hoog en 100% breed met daarin de navigatie knoppen
Maar dan alles responsive gelijk aan de banner dus als de banner in hoogte en breedte kleiner word dat de logo, tekst, inloginputs en de navigatiebalk dat ook doen. Plus dat ze ook op hun positie blijven.
Is dit mogelijk of verwacht ik nu gewoon teveel van CSS? Kunnen fonts wel mee schalen of kan je dit aleen bereiken met media Query's?