Hvordan lage kolonner med html/css?

GoldenHymn90 · 23. januar 2011

Hei, jeg har den siste tiden sett litt på webdesign, og holder på med et frivillig prosjekt med å lage egen nettside. De fleste profesjonelle sider, sånn som Amobil.no, Mobili.no, Hardware.no m.m. har delt inn sidene deres i forskjellige kolonner. F.eks. på Mobili.no, så ser du den første saken dekker hele bredden, mens de to sakene under deler 50/50 på bredden. Jeg har selv delvis klart å dele inn i kolonner på mitt prosjekt – som for så vidt også er en it-avis – men problemet er at teksten jeg skriver under artikkelbildene ikke ligger symmetrisk med de vertikale kantene på bildet. For å oppnå det, justerer jeg margin-left i css-en, men finnes det en måte å gjøre det på uten å manuelt justere margin i css-en hver bidige gang?

Jeg legger til et bilde i tilfelle dere ikke skjønner hva jeg mener.

http://img94.imageshack.us/f/utennavnba.jpg/

Du ser at teksten starter der jeg har merket med røde vertikale streker. Til meg kommer teksten litt foran (altså på venstre side) av bildekanten. Hvordan fikser jeg dette?

Er takknemlig for alle svar

Endret 23. januar 2011 av Bullet in the Head

frankhaugen · 24. januar 2011

Hei, jeg har den siste tiden sett litt på webdesign, og holder på med et frivillig prosjekt med å lage egen nettside. De fleste profesjonelle sider, sånn som Amobil.no, Mobili.no, Hardware.no m.m. har delt inn sidene deres i forskjellige kolonner. F.eks. på Mobili.no, så ser du den første saken dekker hele bredden, mens de to sakene under deler 50/50 på bredden. Jeg har selv delvis klart å dele inn i kolonner på mitt prosjekt – som for så vidt også er en it-avis – men problemet er at teksten jeg skriver under artikkelbildene ikke ligger symmetrisk med de vertikale kantene på bildet. For å oppnå det, justerer jeg margin-left i css-en, men finnes det en måte å gjøre det på uten å manuelt justere margin i css-en hver bidige gang?

Jeg legger til et bilde i tilfelle dere ikke skjønner hva jeg mener.

http://img94.imageshack.us/f/utennavnba.jpg/

Du ser at teksten starter der jeg har merket med røde vertikale streker. Til meg kommer teksten litt foran (altså på venstre side) av bildekanten. Hvordan fikser jeg dette?

Er takknemlig for alle svar

du kan for eksempel gjør:

<html>
<head>
	<title>DIV example</title>
	<style type="text/css">
		body {background-color:blue;}
		#wrapper {background-color:white; width:650px; height:50px;}
		#top {background-color:red; width:645px; height:50px;}
		#left {background-color:green; float:left; width:322px; height:50px;}
		#right {background-color:yellow; float:right; width:322px; height:50px;}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="top">
			top
		</div>
		<div id="left">
			left
		</div>
		<div id="right">
			right
		</div>
	</div>
</body>
</html>

besøk: http://www.w3schools.com/ spesielt CSS tutorialene så kan du lære mer avanserte teknikker.

svarte dette spørsmålet ditt??

Var litt tungt formulert spørsmål, spesiellt med tittelen og faktisk spørsmål ikke helt stemte:P. Jeg vil legge til at <table> er ikke forbudt å bruke, emn er tungvindt som f-en;)

GoldenHymn90 · 24. januar 2011

Hei, jeg har den siste tiden sett litt på webdesign, og holder på med et frivillig prosjekt med å lage egen nettside. De fleste profesjonelle sider, sånn som Amobil.no, Mobili.no, Hardware.no m.m. har delt inn sidene deres i forskjellige kolonner. F.eks. på Mobili.no, så ser du den første saken dekker hele bredden, mens de to sakene under deler 50/50 på bredden. Jeg har selv delvis klart å dele inn i kolonner på mitt prosjekt – som for så vidt også er en it-avis – men problemet er at teksten jeg skriver under artikkelbildene ikke ligger symmetrisk med de vertikale kantene på bildet. For å oppnå det, justerer jeg margin-left i css-en, men finnes det en måte å gjøre det på uten å manuelt justere margin i css-en hver bidige gang?

Jeg legger til et bilde i tilfelle dere ikke skjønner hva jeg mener.

http://img94.imageshack.us/f/utennavnba.jpg/

Du ser at teksten starter der jeg har merket med røde vertikale streker. Til meg kommer teksten litt foran (altså på venstre side) av bildekanten. Hvordan fikser jeg dette?

Er takknemlig for alle svar

du kan for eksempel gjør:
<html>
<head>
	<title>DIV example</title>
	<style type="text/css">
		body {background-color:blue;}
		#wrapper {background-color:white; width:650px; height:50px;}
		#top {background-color:red; width:645px; height:50px;}
		#left {background-color:green; float:left; width:322px; height:50px;}
		#right {background-color:yellow; float:right; width:322px; height:50px;}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="top">
			top
		</div>
		<div id="left">
			left
		</div>
		<div id="right">
			right
		</div>
	</div>
</body>
</html>
besøk: http://www.w3schools.com/ spesielt CSS tutorialene så kan du lære mer avanserte teknikker.

svarte dette spørsmålet ditt??

Var litt tungt formulert spørsmål, spesiellt med tittelen og faktisk spørsmål ikke helt stemte:P. Jeg vil legge til at <table> er ikke forbudt å bruke, emn er tungvindt som f-en;)

Hei, og takk for svar. Prøvde ut de kodene du la ut, men det så dessverre ikke ut til å funke. Men hva kalles den slags form for kolonner? Hadde vært så mye enklere hvis jeg bare hadde visst hva det het. Og jeg beklager tungt formulert førsteinnlegg, men for å ta det kjapt og enkelt – hvordan deler man en nettside inn i flere symmetriske kolonner? Det kan f.eks. være én kolonne som tar 100% bredde, to kolonner som fordeler 50/50 og tre kolonner som tar 33% bredde hver. Og jeg vil også at bildekantene tilsvarer maks bredde på kolonnene, slik at teksten står i stil med illustrasjonene.

frankhaugen · 24. januar 2011

Hei, og takk for svar. Prøvde ut de kodene du la ut, men det så dessverre ikke ut til å funke. Men hva kalles den slags form for kolonner? Hadde vært så mye enklere hvis jeg bare hadde visst hva det het. Og jeg beklager tungt formulert førsteinnlegg, men for å ta det kjapt og enkelt – hvordan deler man en nettside inn i flere symmetriske kolonner? Det kan f.eks. være én kolonne som tar 100% bredde, to kolonner som fordeler 50/50 og tre kolonner som tar 33% bredde hver. Og jeg vil også at bildekantene tilsvarer maks bredde på kolonnene, slik at teksten står i stil med illustrasjonene.

Merkelig, jeg testet koden i IE, FF, og Chrome, funket fett der.

det du burde se er:

menmen, kommer ikke på et navn for teknikken, men er tilsvarende "tables", bare du står fritt til å forandre for eks. bredder uten at dette må være innenfor ei ramme. <DIV> forteller deg alt du trenger å vite om bruken av disse "boksene" og igjen se på CSS biten. og du bruker ordet "kolonne" feil, "kolonner" er fra venstre til høyre, mens "rader" er fra topp til bunn.

Jeg har gitt deg løsningen i koden, det med bilde er bare å gi bildet i CSS koden(tror jeg):

img{position:relative; width:100%;}

hvis du tar i paint og bruker fargede firkanter og lager et bilde av hva du vil ha, kan jeg ta å røske sammen en basic html kode til deg som du kan jobbe utifra. Men best er om du leser på ting sånn som CSS og lærer deg det grundig.

GoldenHymn90 · 24. januar 2011

Hei, og takk for svar. Prøvde ut de kodene du la ut, men det så dessverre ikke ut til å funke. Men hva kalles den slags form for kolonner? Hadde vært så mye enklere hvis jeg bare hadde visst hva det het. Og jeg beklager tungt formulert førsteinnlegg, men for å ta det kjapt og enkelt – hvordan deler man en nettside inn i flere symmetriske kolonner? Det kan f.eks. være én kolonne som tar 100% bredde, to kolonner som fordeler 50/50 og tre kolonner som tar 33% bredde hver. Og jeg vil også at bildekantene tilsvarer maks bredde på kolonnene, slik at teksten står i stil med illustrasjonene.

Merkelig, jeg testet koden i IE, FF, og Chrome, funket fett der.

det du burde se er:

menmen, kommer ikke på et navn for teknikken, men er tilsvarende "tables", bare du står fritt til å forandre for eks. bredder uten at dette må være innenfor ei ramme. <DIV> forteller deg alt du trenger å vite om bruken av disse "boksene" og igjen se på CSS biten. og du bruker ordet "kolonne" feil, "kolonner" er fra venstre til høyre, mens "rader" er fra topp til bunn.

Jeg har gitt deg løsningen i koden, det med bilde er bare å gi bildet i CSS koden(tror jeg):
img{position:relative; width:100%;}
hvis du tar i paint og bruker fargede firkanter og lager et bilde av hva du vil ha, kan jeg ta å røske sammen en basic html kode til deg som du kan jobbe utifra. Men best er om du leser på ting sånn som CSS og lærer deg det grundig.

Først av alt: tusen takk for hjelpsomheten din! Jeg har tatt printscreen av mitt webprosjekt, og merk deg at det allerede er som det skal være – men den skriften som står under bildene er manuelt justert i css.

http://img716.imageshack.us/f/utennavnay.jpg/

Jeg har brukt margin-left slik at skrifta står på linje med bildenes vertikale linjer. Så det jeg spør etter er om det er nødvendig å bruke margin-left for å få til noe slikt? Hadde vært så sinnsykt mye enklere om teksten stod på linje med de vertikale aksene uten justering i css.

frankhaugen · 24. januar 2011

se her: http://www.frankhaugen.com/inhead.php

slik jeg ser det er det dette du vil ha.

Bilde:

Kode:

<html>
<head>
<?php include("header.php"); ?>
<style type="text/css">
	.hundred
	{
	background-color:gray;
	width:600px;
	margin-left:10px;
	margin-top:10px;
	}
	.fifty
	{
	background-color:gray;
	float:left;
	width:300px;
	margin-left:10px;
	margin-top:10px;
	}
	.thirtythree
	{
	background-color:gray;
	width:200px;
	float:left;
	margin-left:10px;
	margin-top:10px;
	}
	.pics
	{
	width:100%;
	}
	.artikkler
	{
	width:631px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	}
</style>
</head>
<body id="body">
<div id="wrapper">
<div id="bannerwrap">
<?php include("banner.php"); ?>
</div>
<div class="container">
<div class="artikkler">
	<div class="hundred">
		<img class="pics" src="images/100.png" />
		<h2>Lorem Ipsum</h2>
		<br /><a>Les mer</a>
	</div>
	<div class="fifty">
		<img class="pics" src="images/50a.png" />
		<h2>Lorem Ipsum</h2>
		<br /><a>Les mer</a>
	</div>
	<div class="fifty">
		<img class="pics" src="images/50b.png" />
		<h2>Lorem Ipsum</h2>
		<br /><a>Les mer</a>
		</div>
	<div class="thirtythree">
		<img class="pics" src="images/33a.png" />
		<h2>Lorem Ipsum</h2>
		<br /><a>Les mer</a>
	</div>
	<div class="thirtythree">
		<img class="pics" src="images/33b.png" />
		<h2>Lorem Ipsum</h2>
		<br /><a>Les mer</a>
	</div>
	<div class="thirtythree">
		<img class="pics" src="images/33c.png" />
		<h2>Lorem Ipsum</h2>
		<br /><a>Les mer</a>
	</div>
<div>
</div>
</div>
</body>
</html>

Jeg finner ikke noen annen løsning på deg du mener, her er hvertfall koden 100% det du vil ha. alt fra linje 4 til 39 er CSS-koden brukt for å oppnå det du vil, og alt fra 47 til 77 er boksene brukt for å oppnå dette, resten er koden brukt på min hjemmeside jeg holder på med.

håper dette har vært til hjelp:)

-frank

GoldenHymn90 · 24. januar 2011

se her: http://www.frankhaugen.com/inhead.php

slik jeg ser det er det dette du vil ha.

Bilde:

Kode:

<html>
<head>
<?php include("header.php"); ?>
<style type="text/css">
	.hundred
	{
	background-color:gray;
	width:600px;
	margin-left:10px;
	margin-top:10px;
	}
	.fifty
	{
	background-color:gray;
	float:left;
	width:300px;
	margin-left:10px;
	margin-top:10px;
	}
	.thirtythree
	{
	background-color:gray;
	width:200px;
	float:left;
	margin-left:10px;
	margin-top:10px;
	}
	.pics
	{
	width:100%;
	}
	.artikkler
	{
	width:631px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	}
</style>
</head>
<body id="body">
<div id="wrapper">
<div id="bannerwrap">
<?php include("banner.php"); ?>
</div>
<div class="container">
<div class="artikkler">
	<div class="hundred">
		<img class="pics" src="images/100.png" />
		<h2>Lorem Ipsum</h2>
		<br /><a>Les mer</a>
	</div>
	<div class="fifty">
		<img class="pics" src="images/50a.png" />
		<h2>Lorem Ipsum</h2>
		<br /><a>Les mer</a>
	</div>
	<div class="fifty">
		<img class="pics" src="images/50b.png" />
		<h2>Lorem Ipsum</h2>
		<br /><a>Les mer</a>
		</div>
	<div class="thirtythree">
		<img class="pics" src="images/33a.png" />
		<h2>Lorem Ipsum</h2>
		<br /><a>Les mer</a>
	</div>
	<div class="thirtythree">
		<img class="pics" src="images/33b.png" />
		<h2>Lorem Ipsum</h2>
		<br /><a>Les mer</a>
	</div>
	<div class="thirtythree">
		<img class="pics" src="images/33c.png" />
		<h2>Lorem Ipsum</h2>
		<br /><a>Les mer</a>
	</div>
<div>
</div>
</div>
</body>
</html>

Jeg finner ikke noen annen løsning på deg du mener, her er hvertfall koden 100% det du vil ha. alt fra linje 4 til 39 er CSS-koden brukt for å oppnå det du vil, og alt fra 47 til 77 er boksene brukt for å oppnå dette, resten er koden brukt på min hjemmeside jeg holder på med.

håper dette har vært til hjelp:)

-frank

Var akkurat slik jeg tenkte! Skal studere de kodene senere og prøve å forstå dem litt senere. Men jeg har kommet over et annet «problem». Er det nødvendig å lage flere class, samt css-koder, for bokser med forskjellig høyde? Forsiden har jo selvfølgelig mye mer stoff enn f.eks. «Om oss», så det blir mye plass til overs hvis den skal bruke samme høydeoppløsning som forsiden. Er det mulig å kode slik at innholdsboksen endrer seg etter som hvor mye stoff det er? Og tusen hjertelig takk for hjelpa, Frank!

frankhaugen · 24. januar 2011

Var akkurat slik jeg tenkte! Skal studere de kodene senere og prøve å forstå dem litt senere. Men jeg har kommet over et annet «problem». Er det nødvendig å lage flere class, samt css-koder, for bokser med forskjellig høyde? Forsiden har jo selvfølgelig mye mer stoff enn f.eks. «Om oss», så det blir mye plass til overs hvis den skal bruke samme høydeoppløsning som forsiden. Er det mulig å kode slik at innholdsboksen endrer seg etter som hvor mye stoff det er? Og tusen hjertelig takk for hjelpa, Frank!

Istede for å å sette en høyde for en "class" kan du sette CSS kode direkte i html-tag'en, disse to eksemplene gir samme resultat:

<html>
<head>
<style type="text/css">
	.box
	{
	text-transform:uppercase;
	}
</style>
</head>
<body>
	<div class="box">
	Eppler og bananer
	</div>
</body>
</html>

<html>
<head>
</head>
<body>
	<div style="text-transform:uppercase">
	Eppler og bananer
	</div>
</body>
</html>

Igjen skjønner jeg ikke helt hva du spør etter, "innholdsboksen" er det den alle artikklene ligger inni? for hvis det er tilfellet setter du bare bredden, så vil høyden justere seg etter innholdet. Det gjelder egentlig det meste, prøv å bare sett bredder for ting vil forandre seg og trenge mulighet til å være høyer eller laver avhengig av innholdet. Derfor <div> er så fint for den vil alltid være innenfor <div>-en den er inni men i motsetning til tabeller så vil den tilpasse seg til innholdet med mindre noe annet er satt i CSS.

Bruk det du har her, og hva du kan lese deg til selv på w3schools.com så kanskje du finner en løsning. Jeg ville laget mange "class" navn slik at jeg kunne brukt css-fila til å tilpasse alt av høyder og plasseringer.

Logg inn

Hvordan lage kolonner med html/css?

Anbefalte innlegg

GoldenHymn90

Lenke til kommentar

Videoannonse

frankhaugen

Lenke til kommentar

GoldenHymn90

Lenke til kommentar

frankhaugen

Lenke til kommentar

GoldenHymn90

Lenke til kommentar

frankhaugen

Lenke til kommentar

GoldenHymn90

Lenke til kommentar

frankhaugen

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Tinder er skadelig for menn. 1 2 3 4 246

Hvem er aktive 0 medlemmer