Gå til innhold

Trenger litt hjelp til table!

Dryper

Anbefalte innlegg

Dryper

Dryper

Skrevet
Skrevet (endret)

Heisann! jeg har holdt på å lage en lite profil side som skal på siden min jeg jeg klarer ikke å designe det i HTML.. :(

4.jpg

 

Kunne noen hjelpet meg med å lage en slik tabell i HTML?

 

 

i alle fall (om bildet ikke vises.)

 

det skal være 3 kolonner og 9 rader. Kolonne 1 skal romme hele tabellen (slik at på kolonne 1 er det ingen rader :p)

Håper at noen kan hjelpe meg..

 

 

Takk Dryper

Endret av Dryper
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Demantios

Demantios

Skrevet
Skrevet (endret)

Noe á la dette. Trenger litt finpuss da

 

html:

<head><link rel="stylesheet" type="text/css" href="style.css" /></head>

<body>
<div class="box">
<div class="avatar"></div>
<div class="stats">Nick:<br/>Alder<br/>Sted<br/>Penger<br/>osv..</div></div>
</body>

 

style.css:

#box {
height: 300px;
width: 800px; }

#avatar {
float: left;
height: 250px;
width: 250px; }

#stats {
height: 250px;
width: 600px; }

Endret av PepsiCo
Lenke til kommentar
Dryper

Dryper

Skrevet
  • Forfatter
Skrevet
Noe á la dette. Trenger litt finpuss da

 

html:

<head><link rel="stylesheet" type="text/css" href="style.css" /></head>

<body>
<div class="box">
<div class="avatar"></div>
<div class="stats">Nick:<br/>Alder<br/>Sted<br/>Penger<br/>osv..</div></div>
</body>

 

style.css:

#box {
height: 300px;
width: 800px; }

#avatar {
float: left;
height: 250px;
width: 250px; }

#stats {
height: 250px;
width: 600px; }

 

 

er det slik resultatet skal være?

 

http://globalmafia.sytes.net/test/

Lenke til kommentar
Demantios

Demantios

Skrevet
Skrevet

Nå er den der ja

 

#box {

background-color: black;

height: 300px;

width: 800px; }

 

#avatar {

background-color: blue;

float: left;

height: 250px;

width: 250px; }

 

#stats {

background-color: red;

height: 250px;

width: 600px; }

 

Sånn, da ser du hvor dem ligger i forhold til hverandre

Lenke til kommentar
Dryper

Dryper

Skrevet
  • Forfatter
Skrevet
Nå er den der ja

 

#box {

background-color: black;

height: 300px;

width: 800px; }

 

#avatar {

background-color: blue;

float: left;

height: 250px;

width: 250px; }

 

#stats {

background-color: red;

height: 250px;

width: 600px; }

 

Sånn, da ser du hvor dem ligger i forhold til hverandre

 

 

 

jeg fant ut feilen -.- #box osv er feill ska vel være div.box ...

takker anyway :p

Lenke til kommentar
Jonas

Jonas

Skrevet
Skrevet (endret)

Den DIV/CSS-koden du viser til, PepsiCo, er jo ikke akkurat så mye bedre enn en table-suppe man vanligvis finner. Du gjør jo ikke strengt tatt annet enn å lage tabell-bokser i CSS. :!:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

	<title>Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<style type="text/css">

		* {
			margin: 0;
			padding: 0;
		}

		.profil {
			width: 400px;
			border: 1px solid #000000;
			padding: 10px;
			overflow: auto;
			margin-bottom: 20px;
		}

		.profil img {
			float: left;
			width: 100px;
			height: 100px;
			margin-right: 10px;
		}

		.profil p {
			text-align: right;
		}

		.profil p span {
			float: left;
			font-weight: bold;
		}

	</style>

</head>

<body>

	<div class="profil">

		<img src="http//.." alt="profil-bilde" />

		<p><span>Navn</span>Ola Nordmann</p>
		<p><span>Email</span>[email protected]</p>
		<p><span>Alias</span>Ola-mannen</p>

	</div>

	<div class="profil">

		<img src="http//.." alt="profil-bilde" />

		<p><span>Navn</span>Ola Nordmann</p>
		<p><span>Email</span>[email protected]</p>
		<p><span>Alias</span>Ola-mannen</p>

	</div>

	<div class="profil">

		<img src="http//.." alt="profil-bilde" />

		<p><span>Navn</span>Ola Nordmann</p>
		<p><span>Email</span>[email protected]</p>
		<p><span>Alias</span>Ola-mannen</p>

	</div>

	<div class="profil">

		<img src="http//.." alt="profil-bilde" />

		<p><span>Navn</span>Ola Nordmann</p>
		<p><span>Email</span>[email protected]</p>
		<p><span>Alias</span>Ola-mannen</p>

	</div>

</body>

</html>

 

Vises slik.

Endret av Jonas
Lenke til kommentar
Jonas

Jonas

Skrevet
Skrevet (endret)

Du annbefalte Dryper å avskaffe bruken av tabeller fordi det er ukorrekt og prøvde å vise en bedre måte. Jo, selvsagt prøvde du. Hva er ellers vitsen om din alternative metode ikke er noe bedre?

Endret av Jonas
Lenke til kommentar
Scheherazade

Scheherazade

Skrevet
Skrevet (endret)
Det du sier gir ingen mening. Dryper må ikke bare bygge på koden din om han vil ha god og riktig kode, den må skrives helt om!

Enig meg deg, PepsiCos forslag var hårreisende dårlig. Sorry, men slik er det. :no:

 

Imidlertid syns jeg ikke ditt forslag så semantisk bra heller, det er bedre, men ikke perfekt. Markupen din gir egentlig ikke så mye mening, bortsett fra å støtte oppunder designet/CSS-en. Husk at det beste er å velge semantisk riktig markup, for deretter å stile med CSS.

 

Det vi egentlig har, er et bilde til venstre for en liste med personopplysninger. Hvorfor ikke lage markupen slik også, en bilde som flyter til venstre for en uordnet liste? Vi kan jo også diskutere om det er mest korrekt å bruke <label>-taggen sammen med et inputfelt for å merke opp personopplysningene, og så stile det hele slik man vil ha det, men dette kommer an på hvordan det hele er tenkt å fungere, mener jeg. Fungerer kanskje best i en setting der man f.eks kan klikke for å redigere opplysninger:

 

 


<div class="profil">

           <img src="http//.." alt="profil-bilde" />
           <ul>
                 <li>
                       <label for="navn">Navn</label>
                       <input type="text" id="navn">Ola Nordmann</input>
                 </li>
                  <li>
                       <label for="epost">E-mail</label>
                       <input type="text" id="epost">[email protected]</input>
                 </li>
                 <li>
                       <label for="alias">Alias</label>
                       <input type="text" id="alias">Ola-mannen</input>
                 </li>
           </ul>
       </div>

Eventuelt bare <li><span>Navn</span>Ola Nordmann</li>

Endret av Scheherazade
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...