Div's en/of jpeg fixed responsive maken in de breedte / hoogte.

Status
Niet open voor verdere reacties.

veldfiets

Gebruiker
Lid geworden
5 nov 2013
Berichten
18
Hallo CSS kenners,

Het lukt mij niet de 2 logo's in mijn website www.whbe.nl responsive te maken. Het is iets met margin: 0 auto, maar krijg het niet voor elkaar. Het menu ook in de hoogte responsive.

Bij voorbaat dank voor hulp.
 
Laatst bewerkt:
Je gebruikt een background-image. Die kan je zonder css3 niet responsive maken.
Met een gewone <img> heb je meer mogelijkheden.
Code:
<div id="logolinks">
  <img src="linkslogo.jpg" alt="linker logo" />
</div>
<div id="logorechts">
  <img src="logorechts.jpg" alt="rechter logo" />
</div>

css:

div#logolinks,
div#logorechts {
  background-image: none;
  background-attachment: scroll;
  z-index: 10;
}
div#logolinks {
  width: 16%;
  position: fixed;
  top: 0px;
  right: auto;
  left: 0px;
}
div#logorechts {
  width: 24%;
  position: fixed;
  top: 0px;
  right: 0px;
  left: auto;
}
div#logolinks img,
div#logorechts img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}
Suc6. Have fun.
 
Ok, ok, thanks a lot. Ik heb het geheel nog niet in de site geplakt, ik ben de hele dag niet bijna niet achter de computer geweest, tot 22.30 uur zelfs. Bericht via de flessenpost gekregen :). Bij lezing is eerst het volgende opgevallen: ik ben hier een leek en heb enige bescheiden vra-gen:
Vraag 1. De logo's zelf (img) hebben toch geen div gekregen? Die heb je nu in de body geplaatst, heel goed, dank voor deze lering, maar dat terzijde.
Vraag 2: Achter de accolade staat bijv."div#logolinks img,", wat doet deze regel daar: dit begrijp ik niet, evenals de komma achter img.
Helemaal bovenaan staat "div#logolinks," zelfde vraag.
Vraag 3: van div logorechts heb je 2 keer een css omschrijving gemaakt, ra, ra.
Ik zal het geheel in de bron plaatsen.

Dank voor je uitleg. :)
 
Laatst bewerkt:
:).;)

Thanks a lot again. Alles er in zomaar ingeplakt, klopt als een bus. Het menu: heb ik zelf responsive gemaakt, op de gok. zie www.whbe.nl/
Ik zal op les moeten weer, dat met die img snap ik niet en 2 keer diezelfde div's, ra, ra: waar kan ik deze ongetwijfeld, basis, vinden?
 
1. Het is handig om een img in een div te plaatsen. De div bepaalt de breedte en positionering op de pagina. De img in deze div hoeft als enige taak 'be responisve'. Het volgende stond al in de html, de twee logo's heb ik ertussen gezet, zie post #2
<div id="logolinks">
</div>
<div id="logorechts">
</div>


2. Je kan twee of meer elementen tegelijk vormgeven door de selectors met een komma van elkaar te scheiden.
Door meerdere selectors achter elkaar te plaatsen kan je nauwkeuriger een element selecteren die je wilt vormgeven, bijvoorbeeld div#logolinks img = de img in logolinks

3. Je mag een element op zoveel plekken als je wilt in de css vormgeven zolang het voor jezelf overzichtelijk blijft en het geen rijstebrij wordt. Ik heb de css van een paar commentaarregels voorzien.
Code:
/* background en z-index instellen voor logolinks en logorechts */
div#logolinks,
div#logorechts {
  background-image: none;
  background-attachment: scroll;
  z-index: 10;
}
/* breedte en positionering van logolinks */
/* width en top kan je zelf aanpassen */
div#logolinks {
  width: 16%;
  position: fixed;
  top: 0px;
  right: auto;
  left: 0px;
}
/* breedte en positionering van logorechts */
/* width en top kan je zelf aanpassen */
div#logorechts {
  width: 24%;
  position: fixed;
  top: 0px;
  right: 0px;
  left: auto;
}
/* responsive image in logolinks en logorechts */
div#logolinks img,
div#logorechts img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}
Als je een vraag hebt dan hoor ik het wel. Suc6.
 
Laatst bewerkt:
Er zijn heel veel smaken www.w3schools.com/cssref/css_selectors.asp die je ook nog 'ns met elkaar kan combineren. Eindeloze mogelijkheden.

Dank u.
Maar, nog 2 vragen zijn overgebleven:
1. wat mij nog niet lukt is de lettergrootte van het menu responsive te krijgen: de letters blijven even groot, komen uiteindelijk over de scrollbars heen, waardoor deze niet meer willen werken. Ra, ra, gebruik al .em, ergens anders heb ik nergens de lettergrootte bepaald. https://daniel-dewit.nl/2014/01/responsive-font-size-met-px-em-of-rem/, vanuit dit voorbeeld: zou e.e.a. horen te werken.....(of komt het doordat deze selector in de externe sheet is geplaatst...?).
2. De vertical-align: middle center, werkt niet. :rolleyes:
 
Laatst bewerkt:
In het artikel wat je noemt staat "Sinds versie 3 van css is het mogelijk om zogenaamde media-queries te gebruiken". Dit werkt als hieronder, weer met een paar commentaarregels erbij.
Code:
/* iedere browserbreedte vanaf 320px (smartphone) */
div#menu {
  position: fixed;
  top: 10px;
  right: 0px;
  left: auto;
  z-index: 10;
  padding-right: 1%;
  font-family: Corbel;
  font-weight: bold;
  font-size: 0.9em;
  line-height: 2.5em;
  color: #e6e6e6;
}
/* aanpassing(en) browserbreedte minimaal 480px */
@media (min-width: 480px) {
  div#menu {
    font-size: 1.2em;
  }
}
/* aanpassing(en) browserbreedte minimaal 768px */
@media (min-width: 768px) {
  div#menu {
    font-size: 1.6em;
  }
}
vertical-align: .... is bedoeld voor een afbeelding. Deze kan verticaal gecentreerd worden ten opzichte van tekst of een ander element. In de praktijk wordt het niet gebruikt voor het verticaal uitlijnen van allerlei elementen.

Je noemde: gebruik al .em
Dit werd voorheen gedaan voor de oude Internet Explorer versies. Je kan gerust overstappen op px als eenheid. Het werken met em kan onhandig zijn als je achteraf iets gaat wijzigen.

Suc6. Have fun.
 
Laatst bewerkt:
Gesnapt, invoegen: @media enz.

De vertical-align die hier niet werkt: slaat i.d.d. op afbeelding: maar jij had de selector in het div#menu geplaatst....Ik wil het genoemde artikel hier beter lezen...in line werkte het ook niet :<img style="vertical-align: middel center" enz>: misschien iets verkeerds gedaan...
 
Laatst bewerkt:
Haha, @media is geen truc hoor :)

Jammer dat de schrijver in het artikel er niet bij heeft vermeld dat hij de section een vaste hoogte heeft gegeven. Dan is het werkend te krijgen. Dit is niet aan te raden op responsive websites omdat elk scherm een andere hoogte (en breedte) heeft. Het zou zo moeten zijn dat een pagina op smartphone, tablet, laptop en monitor goed wordt weergegeven. Met andere woorden, het scherm (3 tot 30 inch) kan veel verschillende resoluties hebben.

Het is mij nog niet helemaal duidelijk wat je met wat verticaal wilt uitlijnen...?

Enne, het scheelt veel ruimte als je niet mijn hele bericht herhaalt :p
 
Update: vertical-align: middle, had je gegeven, maar werkt niet uit.
Het linkerlogo = verticaal gecentreerd :D ik had top: 50%; translateY(-50) aanvankelijk gevonden, werkte eerst niet uit maar opnieuw gedaan: werkt voor fixed position, zie www.whbe.nl ::d.
Zowel menu en linkerlogo komen nu in het midden. En dat met die overlap met de scrollbars: blijkt geen probleem in de telefoon, overlapt niet, op internet wel.
Maar, wat wel een beetje lastig is: de scrollbars zelf zijn er niet meer in de telefoon, als je heel licht op het scherm beweegt dan krijg je de tekst binnen scrollbars verplaatst....
Bedankt voor .. alles, je naam mag erbij :love:
 
Laatst bewerkt:
Top, dat werkt netjes :thumb:

vertical-align: middle, had je gegeven
Die had ik juist niet gegeven :) want die werkt alleen t.o.v. een ander element

Je kan in Internet Explorer zien of de website echt responsive is. Als je de muis niet boven de browser houdt dan moet de verticale scrollbar verdwijnen. Op een touchscreen kan je swipen, de scrollbars heb je niet meer nodig.

De Google test

Suc6 met de website.
 
Laatst bewerkt:
- Vertical-align: U/je had .. gelijk, ik keek verkeerd: wilde het graag zien, had er nog niet eens om gevraagd...
Mag nog steeds bestuderen waarom dit daar staat, ben steeds met mijn verplichte dingen druk.
- En: de Mobiele test: kende ik niet, dank: wat er gezegd wordt: had ik ook al gezien.. .de letters van het menu zijn te klein op de telefoon (niet op IE evenwel) en staan te dicht op elkaar, maar ik kan ze niet verder uit elkaar zetten want dan past de menu-kolom niet meer op het scherm van een gewone computer. Hoe op te lossen, u mag het zeggen.
- Website is ook op IE responsive, precies hetzelfde resultaat als met Firefox.
- Met scrollbars op een telefoon: kun je ook niks beginnen, uiteraard.
 
Laatst bewerkt:
N.B.
Heb deze regel bij de metatags gevoegd: <meta name="viewport" content="width=device-width, initial-scale=1.0">, staat bij de aanbevelingen bij de Mobiele test.
Zie wat er is gebeurd! Complete gedaante-verwisseling...kan niet zeggen dat ik hier echt blij mee ben....bij nadere bedenking: ik denk dat ik iets aan die getallen dien te veranderen: lees de google-tekst beter, veldfiets.
 
Laatst bewerkt:
Op een smartphone is het menu meestal verborgen en kan je het openen/sluiten met een menu knop. Zo hou je maximale ruimte voor de teksten. De <meta name="viewport" ....> is inderdaad nodig. RE: ...kan niet zeggen dat ik hier echt blij mee ben... : klik op het linkje onder mijn post.
 
Excuus, maar ik vind geen linkje onder aan je post behalve je email-link onder Bron.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan