/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
CSS layout der driller - igen
Fra : Mads Horndrup


Dato : 03-12-09 19:32

Så er jeg tilbage! Denne gang med en hjemmeside så i kan se hvad
koden gør :)

Hej.
Jeg har lavet en smule kode som jeg har en smule problemer med
(layout).

Jeg ved kunne have lavet kasserne med div, og at der er en række
andre fejl, men lige nu er det kun den menu det drejer sig om.

Jeg vil gerne have menuen til at stå sammen med bodyen under
logoet, sådan at de står side om side men logoet ovenpå.

Jeg har lagt 3 links. Et til min css fil og et til min html fil,
og et sidste til hjemmesiden så i kan se hvad koden gør :)

HTML:
http://pastie.org/720640

CSS:
http://pastie.org/720631

Siden:
http://www.horndrup.eu/lalala.html


Bare skriv hvis i har spørgsmål
-Mads


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Mads Horndrup (03-12-2009)
Kommentar
Fra : Mads Horndrup


Dato : 03-12-09 20:22

SNIP:
> CSS:
> http://pastie.org/720631
*END*

Jeg har lavet lidt om i den CSS kode der er på hjemmesiden, dette
nye link viser præcis hvilke styles der bruges ligenu på siden.

CSS:
http://pastie.org/726114

For HTML koden kan i bare vise kilden :)

Tak
-Mads

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Dennis Munding (03-12-2009)
Kommentar
Fra : Dennis Munding


Dato : 03-12-09 22:26

Hej Mads!
Mads Horndrup skrev...
> Så er jeg tilbage! Denne gang med en hjemmeside så i kan se hvad
> koden gør :)

Fantastisk!

> Hej.
> Jeg har lavet en smule kode som jeg har en smule problemer med
> (layout).
>
> Jeg ved kunne have lavet kasserne med div, og at der er en række
> andre fejl, men lige nu er det kun den menu det drejer sig om.
>
> Jeg vil gerne have menuen til at stå sammen med bodyen under
> logoet, sådan at de står side om side men logoet ovenpå.

Prøv at indsætte en korrekt DOCTYPE:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

> Jeg har lagt 3 links. Et til min css fil og et til min html fil,
> og et sidste til hjemmesiden så i kan se hvad koden gør :)

Du kan nøjes med ét:

> Siden:
> http://www.horndrup.eu/lalala.html

Herfra kan vi selv kigge på html-kode og css...


Med venlig hilsen
--
Dennis Munding
a.k.a. The Eye - Member of the PosseGrim Squad
http://pgsquad.com/
"When you hear the wind - you're already dead..."


Mads Horndrup (04-12-2009)
Kommentar
Fra : Mads Horndrup


Dato : 04-12-09 12:58

Mads skrev:
> > Jeg ved kunne have lavet kasserne med div, og at der er en række
> > andre fejl, men lige nu er det kun den menu det drejer sig om.
> >
> > Jeg vil gerne have menuen til at stå sammen med bodyen under
> > logoet, sådan at de står side om side men logoet ovenpå.

Dennis skrev:
> Prøv at indsætte en korrekt DOCTYPE:
> http://www.w3.org/QA/2002/04/valid-dtd-list.html

> Herfra kan vi selv kigge på html-kode og css...


Jeg forstår ikke rigtig hvor du vil hen :(
Kan du ikke forklare lidt om hvad DOCTYPE er, og hvad det gør for her
jeg helt på bar bund :)

> > Jeg vil gerne have menuen til at stå sammen med bodyen under
> > logoet, sådan at de står side om side men logoet ovenpå.

Er du sikker på, at du ved hvor jeg vil hen? :)

På forhånd tak
Mads



--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Jørgen Farum Jensen (04-12-2009)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 04-12-09 16:03

Mads Horndrup skrev:

>>> Jeg vil gerne have menuen til at stå sammen med bodyen under
>>> logoet, sådan at de står side om side men logoet ovenpå.

>
> Jeg forstår ikke rigtig hvor du vil hen :(
> Kan du ikke forklare lidt om hvad DOCTYPE er, og hvad det gør for her
> jeg helt på bar bund :)

DOCTYPE = dokumenttypeerklæring, der altid skal
forekomme som det første på en webside. Her er en
komplet head-del af en side:
<!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="da"
lang="da">
<head>
<title>[ Sidens titel ]</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link rel="stylesheet" type="text/css"
href="http://webdesign101.dk/x/res/exstyle.css">
</head>
>>> Jeg vil gerne have menuen til at stå sammen med bodyen under
>>> logoet, sådan at de står side om side men logoet ovenpå.

Så skal du gentænke dit layout. I øjeblikket har du 4 kasser
der står og blomstrer på siden med nogle forholdsvis
tilfældige positioner.

Jeg tænker at det du vel opnå er et sidehoved,
efterfugt af to spalter, efterfulgt af en sidefod,
in casu en reklameblok.

Den HTML-kode, du har brug for er:
<div id="side">
<div id="sidehoved">...</div>
<div id="content">
<div id="menuspalte">...</div>
<div id="artikel">...</div>
<div class="clear"></div>
</div>
<div id="sidefod">...</div>
</div>

Og det nødvendig stylesheet:
#side {
width:760px;
margin:0 auto; }
#content {
width:100%;
overflow:hidden;}
#menuspalte {
width:25%;
float:left;
}
#artikel {
margin-left:27%;
}
..clear {clear:both;}

På den måde "flyder" artikelindhold
op på højre side af menuen, mens clear'ing
elementet sikrer at den af de to spalter, der
har mest indhold, skubber sidefoden nedad.

Det er halsløs gerning at lave CSS-kasser
med bestemte højdemål og indsætte en mængde
br'er for at skubbe på nogle elementer.
Alt kan styres af kassernes /indhold/. Det
er derfor vigtigt i det mindste at bruge mumletekst
i kasserne.

Du kan læse meget mere om disse ting på min hjemmeside,
http://webdesign101.dk.

I det hele taget forstår jeg ikke denne fascination af
at starte med at bestemme sig for hvordan tingene skal
tage sig ud før man har noget at fortælle. Selv den
grimmeste webside bliver læst, hvis indholdet er noget
læseren har brug for, mens de "flotteste" hjemmesider
ikke sjældent mere er en fest for øjet end for
forstanden.

"Content is King" bør feltråbet lyde for den moderne
webdesigner. "Content" er tekst og de billeder der er
nødvendige for at understøtte hjemmesidens budskab.
--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Mads Horndrup (06-12-2009)
Kommentar
Fra : Mads Horndrup


Dato : 06-12-09 18:09

Jørgen skrev:
> I det hele taget forstår jeg ikke denne fascination af
> at starte med at bestemme sig for hvordan tingene skal
> tage sig ud før man har noget at fortælle. Selv den
> grimmeste webside bliver læst, hvis indholdet er noget
> læseren har brug for, mens de "flotteste" hjemmesider
> ikke sjældent mere er en fest for øjet end for
> forstanden.


Simpelthen fordi, alt content er skrevet og færdigt.
Min idé til det her var at skabe et nyt layout - hvilket ikke rigtig
skriger efter content jo ;)

-Mads


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Erik Ginnerskov (07-12-2009)
Kommentar
Fra : Erik Ginnerskov


Dato : 07-12-09 01:40

Mads Horndrup wrote:

> Simpelthen fordi, alt content er skrevet og færdigt.
> Min idé til det her var at skabe et nyt layout - hvilket ikke rigtig
> skriger efter content jo ;)

Problemet er, at din side er forkert skruet sammen i forhold til det, du
vil. for at opnå det ønskede er du nødt til at putte det hele ind i en
fælles div, som du giver den ønskede totalbredde og centrering med
margin:auto;.

I html bruger du denne skabelon:

<body>
<div id="wrapper">
<div id="logo">Logo</div>
<div id="menu">Menu</div>
<div id="side">Sidens indhold</div>
<div id="reklame">Din reklameblok</div>
</div>
</body>

Dertil denne css:

#wrapper {
width: 760px;
margin: auto;
}
#logo {
height: 200px;
}
#menu {
width: 187px;
float: left;
}
#side {
margin-left: 192px;
}
#reklame {
clear: both;
}

--
Med venlig hilsen
Erik Ginnerskov
http://ginnerskov.dk - http://html-faq.dk


Mads Horndrup (04-12-2009)
Kommentar
Fra : Mads Horndrup


Dato : 04-12-09 14:47

Dennis skrev:
> Prøv at indsætte en korrekt DOCTYPE:
> http://www.w3.org/QA/2002/04/valid-dtd-list.html

Jeg har prøvet at sætte min gamle DOCTYPE ind, så koden starter sådan
her:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> lala.. ect.

Det virker ikke - hjælp?

Venlig hilsen Mads


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Erik Ginnerskov (04-12-2009)
Kommentar
Fra : Erik Ginnerskov


Dato : 04-12-09 15:53

Mads Horndrup wrote:

> Jeg har prøvet at sætte min gamle DOCTYPE ind, så koden starter sådan
> her:
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> <html> lala.. ect.
>
> Det virker ikke - hjælp?

Den DOCTYPE sætter browserne i quirks mode (de viser siderne på samme
fejlagtige måde som ældre versioner af browserne gjorde. Læs om DOCTYPE her:

http://hjemmesideskolen.dk/html/elmnt/dtd.php

--
Med venlig hilsen
Erik Ginnerskov
http://ginnerskov.dk - http://html-faq.dk


Søg
Reklame
Statistik
Spørgsmål : 177549
Tips : 31968
Nyheder : 719565
Indlæg : 6408820
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste