/ 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
Justering af elementer
Fra : Grith


Dato : 09-05-11 14:22

Hej allesammen

På denne side har jeg nogle billeder, der kører oppe i højre
hjørne: http://www.skitcho.dk/profil.shtml

Men billederne skal helt op i hjørnet på samme måde som logoet,
bare modsat. Hvorfor rykker det ned?
Jeg har prøvet næsten alt, men har ikke flere ideer. Hjælp!

På forhånd tak.
Grith


--
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

 
 
Birger Sørensen (09-05-2011)
Kommentar
Fra : Birger Sørensen


Dato : 09-05-11 15:15

Efter mange tanker skrev Grith:
> Hej allesammen
>
> På denne side har jeg nogle billeder, der kører oppe i højre
> hjørne: http://www.skitcho.dk/profil.shtml
>
> Men billederne skal helt op i hjørnet på samme måde som logoet,
> bare modsat. Hvorfor rykker det ned?
> Jeg har prøvet næsten alt, men har ikke flere ideer. Hjælp!
>
> På forhånd tak.
> Grith

Har du prøvet de løsninger der blev givet, sidst du spurgte?

Jeg har downloadet FF4, og Firebug er opdateret endnu, så jeg mangler
et vigtigt værktøj, og kan derfor ikke teste på din kode.

Tror du måske mangler at floate de elementer du vil have i toppen.
Sæt float : right på det element der viser billederne - evt også på
#kolonnefristelser

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Grith (09-05-2011)
Kommentar
Fra : Grith


Dato : 09-05-11 18:52

> Har du prøvet de løsninger der blev givet, sidst du spurgte?
>
Jeg har prøvet de løsninger, jeg kan komme på ud fra min viden (også den
erhvervet herinde)
>
> Tror du måske mangler at floate de elementer du vil have i toppen.
> Sæt float : right på det element der viser billederne - evt også på
> #kolonnefristelser
>
Der er sat float left på logoet og float right på billederne. Jeg har
prøvet at floate #kolonnefristelser, men så ryger det hele over til
højre, hvilket jo ikke er meningen.

--
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

Birger Sørensen (09-05-2011)
Kommentar
Fra : Birger Sørensen


Dato : 09-05-11 19:31

Grith formulerede mandag:
>> Har du prøvet de løsninger der blev givet, sidst du spurgte?
>>
> Jeg har prøvet de løsninger, jeg kan komme på ud fra min viden (også den
> erhvervet herinde)
>>
>> Tror du måske mangler at floate de elementer du vil have i toppen.
>> Sæt float : right på det element der viser billederne - evt også på
>> #kolonnefristelser
>>
> Der er sat float left på logoet og float right på billederne. Jeg har
> prøvet at floate #kolonnefristelser, men så ryger det hele over til
> højre, hvilket jo ikke er meningen.

Sæt billederne først i din kildekode, align dem til højre.
Sæt #kolonnefristelser lige efter i kildekoden - også alignet til
højre.
Derefter logoet.
Og det bør efterfølges af en clearing - et eller andet element der har
clear:both;

<div style="float:right;position: relative; visibility: visible;
overflow: hidden; width: 160px; height: 127px;" id="slides-fristelser">
<div class="slide"
style="position:absolute;left:160px;width:160px;height:127px;text-align:center;">
<div
style="width:160px;height:127px;display:table-cell;vertical-align:middle;">
<img src="/billeder/fristelser/fristelser01-thumb.png"
style="border-width:0;">
</div>
</div>
<div class="slide" style="position: absolute; left: 0px; width:
160px; height: 127px; text-align: center;">
<div
style="width:160px;height:127px;display:table-cell;vertical-align:middle;">
<a href="http://en.wikipedia.org/wiki/Cave" target="_new">
<img src="/billeder/fristelser/fristelser02-thumb.png"
style="border-width:0;">
</a>
</div>
</div>
<div class="slide"
style="position:absolute;left:160px;width:160px;height:127px;text-align:center;">
<div
style="width:160px;height:127px;display:table-cell;vertical-align:middle;">
<img src="/billeder/fristelser/fristelser03-thumb.png"
style="border-width:0;">
</div>
</div>
</div>
<div id="kolonnefristelser" style="float:right">
<h1>FRISTELSER</h1>
<a href="fristelser.html" title="Fristelser">Bliv inspireret af<br>
forårets fristelser &gt;&gt;</a>
</div>
<div id="kolonnelogo">
<div id="logo">
<a href="index.html" title="Forside"><img src="billeder/logo.png"
alt="Skitcho Couture"></a>
</div>
</div>
<div class="clear"></div>

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Birger Sørensen (09-05-2011)
Kommentar
Fra : Birger Sørensen


Dato : 09-05-11 19:39

Birger Sørensen har bragt dette til os:
> Grith formulerede mandag:
>>> Har du prøvet de løsninger der blev givet, sidst du spurgte?
>>>
>> Jeg har prøvet de løsninger, jeg kan komme på ud fra min viden (også den
>> erhvervet herinde)
>>> Tror du måske mangler at floate de elementer du vil have i toppen. Sæt
>>> float : right på det element der viser billederne - evt også på
>>> #kolonnefristelser
>>>
>> Der er sat float left på logoet og float right på billederne. Jeg har
>> prøvet at floate #kolonnefristelser, men så ryger det hele over til
>> højre, hvilket jo ikke er meningen.
>
> Sæt billederne først i din kildekode, align dem til højre.
> Sæt #kolonnefristelser lige efter i kildekoden - også alignet til højre.
> Derefter logoet.
> Og det bør efterfølges af en clearing - et eller andet element der har
> clear:both;
>
> <div style="float:right;position: relative; visibility: visible; overflow:
> hidden; width: 160px; height: 127px;" id="slides-fristelser">
> <div class="slide"
> style="position:absolute;left:160px;width:160px;height:127px;text-align:center;">
> <div
> style="width:160px;height:127px;display:table-cell;vertical-align:middle;">
> <img src="/billeder/fristelser/fristelser01-thumb.png"
> style="border-width:0;">
> </div>
> </div>
> <div class="slide" style="position: absolute; left: 0px; width: 160px;
> height: 127px; text-align: center;">
> <div
> style="width:160px;height:127px;display:table-cell;vertical-align:middle;">
> <a href="http://en.wikipedia.org/wiki/Cave" target="_new">
> <img src="/billeder/fristelser/fristelser02-thumb.png"
> style="border-width:0;">
> </a>
> </div>
> </div>
> <div class="slide"
> style="position:absolute;left:160px;width:160px;height:127px;text-align:center;">
> <div
> style="width:160px;height:127px;display:table-cell;vertical-align:middle;">
> <img src="/billeder/fristelser/fristelser03-thumb.png"
> style="border-width:0;">
> </div>
> </div>
> </div>
> <div id="kolonnefristelser" style="float:right">
> <h1>FRISTELSER</h1>
> <a href="fristelser.html" title="Fristelser">Bliv inspireret af<br>
> forårets fristelser &gt;&gt;</a>
> </div>
> <div id="kolonnelogo">
> <div id="logo">
> <a href="index.html" title="Forside"><img src="billeder/logo.png"
> alt="Skitcho Couture"></a>
> </div>
> </div>
> <div class="clear"></div>
>
> Birger

Skal lige sige, at ovenstående er selvfølgelig kun den del der gælder
de tre øverste elementer.
At det er uoverskueligt, er din egen fejl - inline css er ikke
nødvendigt, og tjener - bortset fra i test situationer, hvor det kan
anvendes kortvarigt - kun til at forvirre og uoverskueliggøre.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Grith (09-05-2011)
Kommentar
Fra : Grith


Dato : 09-05-11 20:18

> Sæt billederne først i din kildekode, align dem til højre.
> Sæt #kolonnefristelser lige efter i kildekoden - også alignet til
> højre.
> Derefter logoet.
> Og det bør efterfølges af en clearing - et eller andet element der har
> clear:both;

Det virker! Tak for hjælpen. Jeg har nu ikke skrevet alt det, der står nedenfor her.
Jeg bruger ikke inline css.
>
> <div style="float:right;position: relative; visibility: visible;
> overflow: hidden; width: 160px; height: 127px;" id="slides-fristelser">
> <div class="slide"
> style="position:absolute;left:160px;width:160px;height:127px;text-align:center;">
> <div
> style="width:160px;height:127px;display:table-cell;vertical-align:middle;">
> <img src="/billeder/fristelser/fristelser01-thumb.png"
> style="border-width:0;">
> </div>
> </div>
> <div class="slide" style="position: absolute; left: 0px; width:
> 160px; height: 127px; text-align: center;">
> <div
> style="width:160px;height:127px;display:table-cell;vertical-align:middle;">
> <a href="http://en.wikipedia.org/wiki/Cave" target="_new">
> <img src="/billeder/fristelser/fristelser02-thumb.png"
> style="border-width:0;">
> </a>
> </div>
> </div>
> <div class="slide"
> style="position:absolute;left:160px;width:160px;height:127px;text-align:center;">
> <div
> style="width:160px;height:127px;display:table-cell;vertical-align:middle;">
> <img src="/billeder/fristelser/fristelser03-thumb.png"
> style="border-width:0;">
> </div>
> </div>
> </div>
> <div id="kolonnefristelser" style="float:right">
> <h1>FRISTELSER</h1>
> <a href="fristelser.html" title="Fristelser">Bliv inspireret af<br>
> forårets fristelser >></a>
> </div>
> <div id="kolonnelogo">
> <div id="logo">
> <a href="index.html" title="Forside"><img src="billeder/logo.png"
> alt="Skitcho Couture"></a>
> </div>
> </div>
> <div class="clear"></div>
>
> Birger
>
> --
> http://varmeretter.dk - billig, sund og hurtig mad
> http://bbsorensen.dk
>
>


--
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

Birger Sørensen (10-05-2011)
Kommentar
Fra : Birger Sørensen


Dato : 10-05-11 07:33

Grith tastede følgende:
>> Sæt billederne først i din kildekode, align dem til højre.
>> Sæt #kolonnefristelser lige efter i kildekoden - også alignet til
>> højre.
>> Derefter logoet.
>> Og det bør efterfølges af en clearing - et eller andet element der har
>> clear:both;
>
> Det virker! Tak for hjælpen. Jeg har nu ikke skrevet alt det, der står
> nedenfor her. Jeg bruger ikke inline css.

Jamen så må du undskylde!

Det står i kildekoden når man ser den i FF med Web-developer - det må
være den der gør tingene på den måde så - og det var den jeg lavede om
på i forsøget..
(Tror måske jeg skal tilbage til FF3, så jeg kan få Firebug igen...)

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Leif Neland (10-05-2011)
Kommentar
Fra : Leif Neland


Dato : 10-05-11 08:20

Den 09-05-2011 16:15, Birger Sørensen skrev:

> Jeg har downloadet FF4, og Firebug er opdateret endnu, så jeg mangler et
> vigtigt værktøj, og kan derfor ikke teste på din kode.
>
Jeg kører med FF 4.0.1 og Firebug 1.7.0, så du skal da bare se at få
fingeren ud
Tingene er derude.

Leif

--
Bevar P2, luk P3, der er nok P3'er i forvejen.

Birger Sørensen (10-05-2011)
Kommentar
Fra : Birger Sørensen


Dato : 10-05-11 08:24

Leif Neland udtrykte præcist:
> Den 09-05-2011 16:15, Birger Sørensen skrev:
>
>> Jeg har downloadet FF4, og Firebug er opdateret endnu, så jeg mangler et
>> vigtigt værktøj, og kan derfor ikke teste på din kode.
>>
> Jeg kører med FF 4.0.1 og Firebug 1.7.0, så du skal da bare se at få fingeren
> ud
> Tingene er derude.
>
> Leif

8-o
Har lige fundet den - troede faktisk at opdateringen selv var i stand
tl at sige til. Den siger bare at FB1.4 ikke er kompatibel...
Hvad skal man med automatisk opdatering, hvis det ikke opdaterer
automatisk?

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Jørgen Farum Jensen (09-05-2011)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 09-05-11 22:15

Den 09-05-2011 15:22, Grith skrev:
> Hej allesammen
>
> På denne side har jeg nogle billeder, der kører oppe i højre
> hjørne: http://www.skitcho.dk/profil.shtml
>
> Men billederne skal helt op i hjørnet på samme måde som logoet,
> bare modsat. Hvorfor rykker det ned?
> Jeg har prøvet næsten alt, men har ikke flere ideer. Hjælp!
>
> På forhånd tak.
> Grith
>
>

Du har en div:
<div id="slides-fristelser"></div>
Dette element flyttes højere op i kildekoden,
således:

<div id="container">
<div id="slides-fristelser"></div>
<div id="kolonnelogo">

I dit stylesheet indsætter du
følgende formdeklaration:
#slides-fristelser {
width:160px; /* bredden af slideshowet */
float:right;;
}

Så vil billedshowet flytte op til højre for
logoboksen.

--
Jørgen Farum Jensen
http://webdesign101.dk
..

Søg
Reklame
Statistik
Spørgsmål : 177416
Tips : 31962
Nyheder : 719565
Indlæg : 6407858
Brugere : 218876

Månedens bedste
Årets bedste
Sidste års bedste