[Løst] Responsive design

4. april 2014

Hei!

Holder for tiden på med HTML/CSS, og har et lite problem. Det har seg slik at websiden forandrer seg hele tiden ettersom nettleseren ikke er 100%, noe som er et lite problem.

Lurer derfor på om noen kunne hjulpet meg med en responsiv kode som kan legges inn i en sepperat CSS-fil.

Her er et eksempel på hvordan det ser ut:

Her er HTML-filen:

<!DOCTYPE html>
<html>	
<head>
<link rel="stylesheet" type="text/css" href="style.css"><title>Min side</title>
</head>
<body>
<div class="conteiner">
<div class="text">
<h1>Header</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae mi nibh. Nunc 		gravida faucibus odio vitae lobortis. Nullam ac luctus tellus, ut ultricies sapien. Maecenas commodo pretium augue non mollis. Nullam molestie est malesuada neque sagittis, ut hendrerit neque fringilla. Sed vel iaculis magna. Integer vitae lectus risus. Maecenas sit amet egestas urna. Nullam tempus egestas dolor, eget feugiat mi pretium sed. Phasellus at augue interdum, tristique libero quis, imperdiet leo. Phasellus ultrices sodales feugiat. Cras egestas libero eget dolor pellentesque, laoreet feugiat ipsum interdum. Pellentesque eget mi lobortis, facilisis sapien vel, blandit nisi. Cras et viverra mauris, at posuere lectus.Phasellus at augue interdum, tristique libero quis, imperdiet leo. Phasellus ultrices sodales feugiat. Cras egestas libero eget dolor pellentesque, laoreet feugiat ipsum interdum. Pellentesque eget mi lobortis, facilisis sapien vel, blandit nisi. Cras et viverra mauris, at posuere lectus.
</p>	
</div>
<div class="bilde">
<img src="https://farm8.staticflickr.com/7115/13580679163_ae194dc79e_b.jpg" height="363px" width="600px" />
</div>
<div class="text2">
<h1>Header</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae mi nibh. Nunc 		gravida faucibus odio vitae lobortis. Nullam ac luctus tellus, ut ultricies sapien. Maecenas commodo pretium augue non mollis. Nullam molestie est malesuada neque sagittis, ut hendrerit neque fringilla. Sed vel iaculis magna. Integer vitae lectus risus. 
</p>	
</div>
<div class="bilde2">
<img src="https://farm4.staticflickr.com/3704/13600499275_d6c15c0162_b.jpg" height="363px" width="600px" />
</div>
</div>
</body>
</html>

Her er CSS-filen:

body {
	background-color: #E6E6E6;
	font-family: arial;
}

.conteiner {
	max-width: 100%
}

.text {
	margin: 0px 0px 0 520px;
	text-align: center;
	background-color: #CACACA;
	padding: 23px;
	width: 500px;
	height: 435px;
	text-align: center;
	float: left;
	
}

.bilde {
	margin: 0px 215px 15px 0px;
	float: right;
}

.text2 {
	margin: 20px 20px 0 520px;
	text-align: center;
	background-color: #CDCDCD;
	padding: 23px;
	width: 500px;
	height: 200px;
	text-align: center;
	float:left;
}

.bilde2 {
	
}

Endret 14. desember 2014 av Slettet-x7D6du0Hjb

cronbach alpha · 4. april 2014

Tenker du på at når du gjør siden mindre at bildene og teksten blir mikset?

4. april 2014

Tenker du på at når du gjør siden mindre at bildene og teksten blir mikset?

Er jo selve definisjonen det.. Vil gjøre det slik at det er mulig å bruke websiden på mobiler o.l.

Pratet med en på jobb som er ekspert innen feltet, men fikk ikke så mye ut av akkurat den samtalen, da det var litt vanskelig å forstå hvordan en skulle implementere det. Han brukte @media tagen.

Holder på med HTML/CSS for å lære meg gunnleggende, så dette er ikke en faktisk webside som er under utvikling, men et lite prosjekt for meg å lære hvordan det funker.

Endret 4. april 2014 av Slettet-x7D6du0Hjb

fwj__ · 4. april 2014

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"><title>Min side</title>

<style>


@media (min-width: 800px) {
  .text {
   width:48%;
  }

    .bilde {
     width:48%;
  }
}

html {
	font-size: 100%;
}

body {
	background-color: #E6E6E6;
	font-family: arial;
	font-size: 1em;
}

.conteiner {
	width:100%;
}

.text {
	float:left;
	text-align: center;
	background-color: #CACACA;
	padding:1em;
	font-size: 1em;
}

.bilde img {
width:100%;


}

.bilde {
	float:left;

}

.text2 {

	text-align: center;
	background-color: #CDCDCD;

	float:left;
}

.bilde2 img {
	width:100%;
}

.bilde2 {
	float:left;
	width:100%;
}


</style>


</head>
<body>
<div class="conteiner">
<div class="text">
<h1>Header</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae mi nibh. Nunc 		gravida faucibus odio vitae lobortis. Nullam ac luctus tellus, ut ultricies sapien. Maecenas commodo pretium augue non mollis. Nullam molestie est malesuada neque sagittis, ut hendrerit neque fringilla. Sed vel iaculis magna. Integer vitae lectus risus. Maecenas sit amet egestas urna. Nullam tempus egestas dolor, eget feugiat mi pretium sed. Phasellus at augue interdum, tristique libero quis, imperdiet leo. Phasellus ultrices sodales feugiat. Cras egestas libero eget dolor pellentesque, laoreet feugiat ipsum interdum. Pellentesque eget mi lobortis, facilisis sapien vel, blandit nisi. Cras et viverra mauris, at posuere lectus.Phasellus at augue interdum, tristique libero quis, imperdiet leo. Phasellus ultrices sodales feugiat. Cras egestas libero eget dolor pellentesque, laoreet feugiat ipsum interdum. Pellentesque eget mi lobortis, facilisis sapien vel, blandit nisi. Cras et viverra mauris, at posuere lectus.
</p>
</div>
<div class="bilde">
<img src="https://farm8.staticflickr.com/7115/13580679163_ae194dc79e_b.jpg" />
</div>
<div class="text2">
<h1>Header</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae mi nibh. Nunc 		gravida faucibus odio vitae lobortis. Nullam ac luctus tellus, ut ultricies sapien. Maecenas commodo pretium augue non mollis. Nullam molestie est malesuada neque sagittis, ut hendrerit neque fringilla. Sed vel iaculis magna. Integer vitae lectus risus.
</p>
</div>
<div class="bilde2">
<img src="https://farm4.staticflickr.com/3704/13600499275_d6c15c0162_b.jpg" />
</div>
</div>
</body>
</html>

Her er en mer responsiv css som du kan teste ut.

4. april 2014

Her er en mer responsiv css som du kan teste ut.

Den så utrolig bra ut på et lavt format, men vil også at det skal kunne vær på et større format, som f.eks desktop, noe det designet ikke gjør.

5. april 2014

Det jeg iallefall ville gjort er å ha satt en maksbredde på containerelementet ditt ved høyere oppløsninger sånn at det blir mer lesbart.

@media only screen and (min-width: 1280px) {
  .container {
    margin: 0 auto;
    width: 90%;
    max-width: 960px;
  }
}

...og deretter, for mobile størrelser, si...

@media only screen and (max-width: 480px) {
  .container {
    margin: 0;
    width: 96%;
    min-width: 320px;
  }
}

...sånn at containerelementet ikke blir altfor lite.

Rent typografisk og designmessig sett er det jo opp til deg hvordan du vil at det skal se ut, men de reglene burde iallefall hjelpe litt. Så er det også viktig at du tar med en metatag så det responsive designet faktisk fungerer som det skal:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Håper dette hjalp litt.

5. april 2014

Skal ta meg en liten tur i koden å se om dette hjelper ja, takk!

Emancipate · 5. april 2014

Så er det også viktig at du tar med en metatag så det responsive designet faktisk fungerer som det skal:
<meta name="viewport" content="width=device-width, initial-scale=1" />

Interresant, hva er det den tagen gjør?

5. april 2014

Interresant, hva er det den tagen gjør?

Vet ihvertfall at det er en veldig viktig tag som alltid skal være i HEAD tagen.. Eksperten på jobb sier ihvertfall at en alltid skal bruke en eller annen type meta tag.

Her er en link som forklarer hva den gjør: http://www.w3schools.com/tags/tag_meta.asp

Edit: Slik ser det ut når jeg legger inn koden du ga meg:

Må være mulig å låse fast elementene og bildene slik at dem ikke flyter, noe dem hele tiden gjør..

Endret 5. april 2014 av Slettet-x7D6du0Hjb

Emancipate · 5. april 2014

Jeg vet hva meta-tag er, men den gjør forskjellige ting avhengig av hva som står i name. Jeg har aldri sett name="viewport" før.

Et annet eksempel på meta-tag er å bruke <meta charset="UTF-8"> på dokumenter som er lagret som utf-8 (det bør du gjøre "alltid" etter min mening). Da sørger du for at internasjonale tegn vises korrekt. Serveren kan også sende informasjon om charset, men taggen i tillegg skader ikke.

Meta betyr "om seg selv", så meta-taggen i dokumentet inneholder informasjon om dokumentet. Uten å være en del av innholdet i dokumentet.

5. april 2014

Jeg vet hva meta-tag er, men den gjør forskjellige ting avhengig av hva som står i name. Jeg har aldri sett name="viewport" før.

Et annet eksempel på meta-tag er å bruke <meta charset="UTF-8"> på dokumenter som er lagret som utf-8 (det bør du gjøre "alltid" etter min mening). Da sørger du for at internasjonale tegn vises korrekt. Serveren kan også sende informasjon om charset, men taggen i tillegg skader ikke.

Meta betyr "om seg selv", så meta-taggen i dokumentet inneholder informasjon om dokumentet. Uten å være en del av innholdet i dokumentet.

Her er det, det er for å kontrollere websiden på mobile enheter.

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Endret 5. april 2014 av Slettet-x7D6du0Hjb

5. april 2014

Klarte å bruke Position tagen, og absolute til å få dem til å stå fast, selv om jeg zoomer inn eller ut. Problemet er bare at dem ikke minsker seg selv, skal se om jeg kan bruke media taggen til å prøve å gjøre akkurat det.

Edit:

Et annet dilemma er at når jeg zoomer inn, så går designet til høyre side, men når jeg zoomer ut, så går det til venstre, hvordan kan jeg gjøre det slik at dem går i midten uavhengig om jeg zoomer inn eller ut?

Slik ser det ut nå:

Endret 14. desember 2014 av Slettet-x7D6du0Hjb

5. april 2014

Det er veldig vanskelig å forstå hva du mener med å "låse fast" ting. Når du setter float på både bilder og tekst og i tillegg bruker positioning og marginer - ja, da flyter ting rundt, slik de i grunn skal. Det hadde kanskje hjulpet med noen skisser for å forklare hva det er du prøver å få til?

6. april 2014

Det er veldig vanskelig å forstå hva du mener med å "låse fast" ting. Når du setter float på både bilder og tekst og i tillegg bruker positioning og marginer - ja, da flyter ting rundt, slik de i grunn skal. Det hadde kanskje hjulpet med noen skisser for å forklare hva det er du prøver å få til?

Prøver å gjøre det så designet ikke beveger på seg i noen retning når jeg forandrer på oppløsningen.

Med å låse fast mener jeg at det ikke beveger seg opp eller til siden, noe jeg har delvis klart ved å bruke Position og absolute.

Endret 6. april 2014 av Slettet-x7D6du0Hjb

Crowly · 8. april 2014

Ta en titt på disse videoene Responsive Web Design, den tar for seg bl.a. viewport og media queries.

Endret 8. april 2014 av Crowly

[Løst] Responsive design

Anbefalte innlegg

Gjest Slettet-x7D6du0Hjb

Lenke til kommentar

Videoannonse

Lenke til kommentar

Gjest Slettet-x7D6du0Hjb

Lenke til kommentar

Lenke til kommentar

Gjest Slettet-x7D6du0Hjb

Lenke til kommentar

Gjest Slettet+1523

Lenke til kommentar

Gjest Slettet-x7D6du0Hjb

Lenke til kommentar

Lenke til kommentar

Gjest Slettet-x7D6du0Hjb

Lenke til kommentar

Lenke til kommentar

Gjest Slettet-x7D6du0Hjb

Lenke til kommentar

Gjest Slettet-x7D6du0Hjb

Lenke til kommentar

Gjest Slettet+1523

Lenke til kommentar

Gjest Slettet-x7D6du0Hjb

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Hvem er aktive 0 medlemmer