/ 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
Hjælp til CSS - design evt. anden læsning
Fra : Jonas Filsø


Dato : 15-07-04 18:12

Jeg har lavet et design, som jeg vil have kodet. Jeg har prøvet
med tabel men det gik hen og blev for inviklet. Så nu er jeg
igang med CSS men skal bruge lidt hjælp da det er første gang.

Hvis i klikker ind på min hjemmeside www.fille-shop.dk/ses2 kan i
se, at indholdet forsætter ud over designet. Mening er, at
designet selv skal følge med teksten så designet altså automatisk
bliver længere i det alt efter, hvor meget tekst der er.

Min css kan hentes her:
http://www.fille-shop.dk/ses2/style/style.css

Prøver lige uddybe mig lidt mere...
Mening er, at når der komme mere indhold (#indhold) på siden end
designet længde. Skal #tilpasning-venstre og #tilpasning-hojre
automatisk følge indholdets (#indhold) længde og samme tid skubbe
bunden (#bundlogo) længere ned.

Kan dette lade sig gøre eller er der en bedre måde, at lave dette
på. Alt kan bruges.....

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

 
 
*XxX* (15-07-2004)
Kommentar
Fra : *XxX*


Dato : 15-07-04 18:27

Jeg ville lave den i en tabel.

Del den op så laver en tabel og den skal være 3 x 3
den øverste række laver du om til en kolone og sætter det billede ind du har
i toppen.
anden række skal være i 3 koloner, en til menu en til indhold og en til
border i højre side.
og så laver du en række som med den første hvor det bare er bgunden der er
med i.



Jonas Filsø (16-07-2004)
Kommentar
Fra : Jonas Filsø


Dato : 16-07-04 06:28

> Jeg ville lave den i en tabel.

Jeg plejer normal selv, at lave tabeler. Men jeg droppede det denne her gang
fordi jeg ikke kunne få venstre side til, at tilpasse sig til designet når det
blev længere.

> Del den op så laver en tabel og den skal være 3 x 3
> den øverste række laver du om til en kolone og sætter det billede ind du har
> i toppen.
> anden række skal være i 3 koloner, en til menu en til indhold og en til
> border i højre side.
> og så laver du en række som med den første hvor det bare er bgunden der er
> med i.

Jeg lavede min opstilling på følgende måde:

Toplogo
Menu - Indhold - højre tilpasning
Venstre tilpasning
Bund logo

Men prøv, at klik ind på www.fille-shop.dk/ses3. Der har jeg lavet hele desinet
op med tabeler. Men hvis du klikker ind under sponsors bliver siden længere i
det. Og i stedet for, at trække i cellen venstre tilpasning trækker den bare
mere i menuen.

Tag jer ikke lige af, at menu sidder som den gør. Gad ik lige til, at justere
den.

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

*XxX* (16-07-2004)
Kommentar
Fra : *XxX*


Dato : 16-07-04 11:54


>
> Jeg lavede min opstilling på følgende måde:
>
> Toplogo
> Menu - Indhold - højre tilpasning
> Venstre tilpasning
> Bund logo
>
> Men prøv, at klik ind på www.fille-shop.dk/ses3. Der har jeg lavet hele
desinet
> op med tabeler. Men hvis du klikker ind under sponsors bliver siden
længere i
> det. Og i stedet for, at trække i cellen venstre tilpasning trækker den
bare
> mere i menuen.

Så laver du bare en tabel inden i den del hvor du har menuen, en top hvor du
har selve menuen og en bund hvor højden ikke er defineret så er det den der
bliver trukket ned, der skal self ikke være noget indhold i den nederste

>
> Tag jer ikke lige af, at menu sidder som den gør. Gad ik lige til, at
justere
> den.
>
> --
> Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
> - Pædagogiske tutorials på dansk
> - Kom godt i gang med koderne
> KLIK HER! => http://www.html.dk/tutorials



jopa (15-07-2004)
Kommentar
Fra : jopa


Dato : 15-07-04 18:54

Jonas Filsø <Jonas@Fille-Cup.dk> skrev bla:
> Prøver lige uddybe mig lidt mere...
> Mening er, at når der komme mere indhold (#indhold) på siden end
> designet længde. Skal #tilpasning-venstre og #tilpasning-hojre
> automatisk følge indholdets (#indhold) længde og samme tid skubbe
> bunden (#bundlogo) længere ned.
>
> Kan dette lade sig gøre eller er der en bedre måde, at lave dette
> på. Alt kan bruges.....

Kan prøve at forklare hvorledes jeg selv gør normalt.

Opbygger mine sider med <div>
eks en til top og midt samt bund.
I samtlige 3 <div> smider jeg bag ind som baggrund.
Er den midterste <div> større/højere på nogen af siderne laver jeg blot bg
billedet så stort at det passer til indholdet.
Nogen gange smider jeg blot en <iframe> i midter>div>
Håber jeg har forstået dit ?



--
Mvh. John
www.jp-web.dk
www.johns-web.dk



Jonas Filsø (16-07-2004)
Kommentar
Fra : Jonas Filsø


Dato : 16-07-04 07:20

> Opbygger mine sider med <div>
> eks en til top og midt samt bund.
> I samtlige 3 <div> smider jeg bag ind som baggrund.
> Er den midterste <div> større/højere på nogen af siderne laver jeg blot bg
> billedet så stort at det passer til indholdet.
> Nogen gange smider jeg blot en <iframe> i midter>div>
> Håber jeg har forstået dit ?

Også noget i den stil jeg prøvede, at lave. Men jeg kunne godt få midterste
til, at blive længere. Men så gik den over bunden og vider ned. Den skulle
gerne skubbe bunden med ned. Hvordan gør du det?

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

J.K.Arning (16-07-2004)
Kommentar
Fra : J.K.Arning


Dato : 16-07-04 13:07

Jonas Filsø wrote:

>
> Også noget i den stil jeg prøvede, at lave. Men jeg kunne godt få
> midterste til, at blive længere. Men så gik den over bunden og vider
> ned. Den skulle gerne skubbe bunden med ned. Hvordan gør du det?

Position:relative

Det placerer Div`en relativt i forhold til den foregående.

Regards



Jonas Filsø (16-07-2004)
Kommentar
Fra : Jonas Filsø


Dato : 16-07-04 21:26

> Position:relative
>
> Det placerer Div`en relativt i forhold til den foregående.

Arh#"!#! Den skal jeg lige have igen. Som sagt er jeg ny i det her css og
vil utrolig gerne lære det. Alle mine div står til position:absolute;.
Hvorfor ved jeg edenligt ikke. Synes ikke rigtig tutorials kunne forklare
mig det på en forståligt måde. Alt andet har jeg styr på. Men hvad er det
lige helt nøjartig jeg skal lave om i?

Min css kunne hentes her http://www.fille-shop.dk/ses2/style/style.css

Ville være til en stor hjælp, hvis du kunne hjælpe med det her

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

Lasse Reichstein Nie~ (16-07-2004)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 16-07-04 13:55

"J.K.Arning" <spam@_remove_arning.dk> writes:

> Position:relative
>
> Det placerer Div`en relativt i forhold til den foregående.

Det placerer faktisk div'en relativt i forhold til hvor den ellers
ville stå.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

Lasse Reichstein Nie~ (16-07-2004)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 16-07-04 22:26

Jonas Filsø <Jonas@Fille-Cup.dk> writes:

>> Position:relative
> Arh#"!#! Den skal jeg lige have igen. Som sagt er jeg ny i det her css og
> vil utrolig gerne lære det.

CSS kan placere sine blokke på forskellige måder. Det bestemmes af (bl.a.)
"position"-egenskaben. Den har fire forskellige muligheder:

position: static; - Den normale opførsel. Elementet placeres hvor
det skal i det almindelige "flow" på siden. Det
er den opførsel man får hvis man ikke angiver
en anden.

position: relative; - Placeres lige som med static, og optager den
samme plads på siden. Men, derefter kan elementet
flyttes relativt til denne position med fx left:-
og top:-egenskaberne. Selv om elementet bliver
vist forskudt, så optager det stadig samme plads
på siden som for "static".

position: absolute; - Elementet tages ud af den normale "flow" for siden
(optager altså ikke nogen plads mellem det der står
før og efter). Placering med fx left: og top: er
i forhold til det nærmeste omkrandsende element
der er placeret (har position forskellig fra
static).

position: fixed; - Som for "absolute", ud over at placering er
i forhold til "viewport" på browseren (en
del af browseren hvor siden vises).
"position:fixed;" virker ikke i IE (det gamle
lort :).

Eksempel:
---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Positionstest</title>
<style type="text/css">
.box1 {
width: 96px;
height: 96px;
border: 2px solid;
}
.box2 {
margin-left: 100px;
width: 200px;
height: 200px;
border: 2px solid;
}
</style>
</head>
<body>
<p> To kasser inde i en tredje: </p>
<div class="box2" style="border-color:blue">
<div class="box1" style="border-color:red">rød 1</div>
<div class="box1" style="border-color:green">grøn 1</div>
</div>

<p> Rød kasse: <code>position:relative</code>. Den grønne kasse
er stadig placeret hvor den plejer.</p>
<div class="box2" style="border-color:blue">
<div class="box1" style="border-color:red;
position: relative;
left: 50px;
top: 50px">rød 2</div>
<div class="box1" style="border-color:green">grøn 2</div>
</div>

<p> Rød kasse: <code>position:absolute</code>. Den grønne kasse
er nu ikke skubbet ned af den røde. Den røde er placeret
i forhold til siden (50 ned, 350 fra venstre).</p>
<div class="box2" style="border-color:blue">
<div class="box1" style="border-color:red;
position: absolute;
left: 350px;
top: 50px">rød 3</div>
<div class="box1" style="border-color:green">grøn 3</div>
</div>

<p> Rød kasse: <code>position:absolute</code> med blå <code>relative</code>.
Den grønne kasse
er nu ikke skubbet ned af den røde. Den røde er placeret
i forhold til den blå (50 ned, 350 fra venstre).</p>
<div class="box2" style="border-color:blue; position: relative;">
<div class="box1" style="border-color:red;
position: absolute;
left: 350px;
top: 50px">rød 3</div>
<div class="box1" style="border-color:green">grøn 3</div>
</div>


<p> Rød kasse: <code>position:fixed</code>. Den grønne kasse
er nu ikke skubbet ned af den røde. Den røde er placeret
i forhold til viewport (flytter sig ikke når man scroller).</p>
<div class="box2" style="border-color:blue">
<div class="box1" style="border-color:red;
position: fixed;
left: 450px;
top: 50px">rød 5</div>
<div class="box1" style="border-color:green">grøn 5</div>
</div>

</body>
</html>
---

> Alle mine div står til position:absolute;. Hvorfor ved jeg edenligt
> ikke.

Et godt udgangspunkt for at blive klogere :)

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

Bertel Lund Hansen (16-07-2004)
Kommentar
Fra : Bertel Lund Hansen


Dato : 16-07-04 12:16

Jonas Filsø skrev:

>Min css kan hentes her:

Dit problem stammer fra at du bruger absolut positionering. Det
betyder at elementerne 'svæver' for sig selv uafhængigt af resten
af siden. Derfor presser de ikke bunden ned.

>Kan dette lade sig gøre eller er der en bedre måde, at lave dette
>på. Alt kan bruges.....

På min hjemmeside har jeg lavet et design hvor bunden bliver
presset ned under indholdet.

Menuen er placeret med absolut positionering og ramme-div'en har
så fået en venstremargin der er lidt bredere end menuen.

Ved undersider med meget lidt tekst har jeg så været nødt til at
indføje nogle fyldlinjer for at menuen ikke skal rage ud over
kanten, men det vil ikke være et problem på en normal side (eller
med en lille menu).

Side:
http://lundhansen.dk/bertel/

CSS:
http://lundhansen.dk/bertel/bertel.css

--
Bertel
FIDUSO: http://fiduso.dk/

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

Månedens bedste
Årets bedste
Sidste års bedste