Avatar billede flemche Nybegynder
14. januar 2016 - 21:35 Der er 3 kommentarer og
1 løsning

Spørgsmål til Responsive Design

Hejsa

Jeg forsøger at lave en Responsive header i HTML & CSS, men har lidt problem med at få det til at virke eller forstå om det er rigtigt det jeg gør.


Jeg har lånt et responsive framework fra w3schools.com til opgaven.
http://www.w3schools.com/css/css_rwd_intro.asp

Det jeg ikke er helt med på er at headerens height ikke resizer efter størrelsen på skærmen.

Jeg har lagt et background image ind i headeren og billedet ser ud til at resize, men selve header blokken forbliver i den height størrelse som er angivet i px (nok fordi den netop er angivet i px).

Jeg er vel nød til at angive header blokken i % men har ikke kunnet få det til at virke???

f.eks kan man, hvis man ser siden på en iPad i Portrait mode, se det resizede billedet, men header blokken stikker ud nedenfor.

Er det normalt i Responsive Desingn at man kun arbejder med dynamisk width og at height angives fast størrelse.
Jeg har ikke kunnet finde noget på nettet om dette.


Min koder ser så dan ud.

[b]HTML

<body>
<header class="row">
  <div class="col-12">&nbsp;</div>
</header>
</body>

[b]CSS

header
  {
    background-color: black;
    height: 300px;
    width: 100%;
  }

.col-12
  {
    background-image: url(../IMAGES/Banners/BannerHeiking650.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: inherit;
  }


/Flemming
Avatar billede olsensweb.dk Ekspert
15. januar 2016 - 07:03 #1
nu er der nævnt 4 forskællige framework, så hvilke anvender du ??
ref http://www.w3schools.com/css/css_rwd_frameworks.asp
w3css
bootstrap
foundation
Skeleton

har du gennemgået pågældende tut ??


du kunne kigge på
ref http://www.w3schools.com/bootstrap/bootstrap_images.asp
demo http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_img_responsive&stacked=h
 
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
Avatar billede keysersoze Guru
15. januar 2016 - 17:53 #2
Hvor er din DOCTYPE og meta-tags?
Avatar billede flemche Nybegynder
21. januar 2016 - 15:56 #3
Hej igen,

Undskyld for sent svar, jeg har lige ligget med influenza.

Mit link var selvfølgelig også forkert og skulle have været:
http://www.w3schools.com/css/css_rwd_grid.asp

Men jeg har ikke kigget på Bootstrap endnu, selvom jeg godt ved at det giver et shortcut til mange problemer, men det burde jeg måske.

DOCTYPE og meta-tags mangler ikke, jeg tog dem bare ikke med.

Jeg forsøgte at bruge et img tag istedet for et background image og her ser det ud til at virke.

Så forskellen må ligge i selve div tagget som egentlig ikke indeholder andet end et mellemrum også baggrunds billedet.
Avatar billede flemche Nybegynder
25. februar 2016 - 22:45 #4
Sagen lukkes
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester