---

Mit problem er at jeg ikke kan centre et billede op min side..
I Ie er billedet helt til højre og i FF er den helt til venstre.


div.billede {
text-align:center;
position:absolute;
top: 90px;
border: 10px solid black;}


<div Class='billede'> <img src='billede.php?visid=$visid'/></div>

Der er sikkert en simpel løsning på problemet, jeg er bare ikke
så stærk til Css.

Mikkel


http://www.bonzai.adsl.dk/galleri/visbillede.php?visid=1668

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

---

On 10 Sep 2007 19:03:00 GMT, Mikkel Jakobsen wrote:

> text-align:center;

centrer tekst og ikke andre elementer.

Skift den linie ud med:

margin-left: auto;
margin-right: auto;

og måske skal der en:

width: 800px;

på også.

Så virker det sandsynligvis i Firefox og andre standardbrowsere.
IE5.5 og tidligere kan ikke finde ud af dette, men så må du vurdere om
det er nødvendigt i så gamle browsere.


--
Leonard
Mine biler: http://vw.leonard.dk/

---

Leonard wrote:
> On 10 Sep 2007 19:03:00 GMT, Mikkel Jakobsen wrote:
>
>> text-align:center;
>
> centrer tekst og ikke andre elementer.

Forkert. Den centrerer indholdet i den div, der har fået class'en "billede",
uanset om indholdet er tekst eller billede.

> Skift den linie ud med:
>
> margin-left: auto;
> margin-right: auto;

Det centrerer et element, der er mindre end 100 % i forhold til det
omgivende element. Da en div som default er 100 % i forhold til body, vil
det ikke hjælpe.

Skal den metode bruges, skal koden sættes på billedet.

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

---

On Mon, 10 Sep 2007 21:48:19 +0200, Erik Ginnerskov wrote:

> Forkert. Den centrerer indholdet i den div, der har fået class'en "billede",
> uanset om indholdet er tekst eller billede.

OK, jeg var lidt for hurtig der og tog fejl.

>> margin-left: auto;
>> margin-right: auto;
>
> Det centrerer et element, der er mindre end 100 % i forhold til det
> omgivende element. Da en div som default er 100 % i forhold til body, vil
> det ikke hjælpe.
>
> Skal den metode bruges, skal koden sættes på billedet.

Eller der skal en width på den div, der skal centreres, som jeg også
foreslog i næste linie.

--
Leonard
Mine biler: http://vw.leonard.dk/

---

Leonard <piper28a@gmail.invalid> skrev :

>centrer tekst og ikke andre elementer.

Nej, centrerer inline elementer, også billeder.

Men man ikke både bruge text-align og position samtidig, hvias
det skal være centreret midt på siden.

Skal det være centreret og man vil bruge position: absolute, så
skal der være to <div>, en der bliver positioneret absolute og så
en, der bluver centreret i denne <div>.

Men position: absolute er noget af det mest misbrugte på mange
hjemmesider.

Det bliver bragt ud af sidens normale flow og kan derfor være
svært at styre uden en masse andre positioner.

Hvis det blot er for at skabe afstand til toppen, så brug
margin-top: 90px i stedet for.

--
Kerim
»Søger nogen en anden religion end Islam, skal den ikke modtages
af Ham, og han skal i det kommende liv være blandt taberne.«
(Sura 3, vers 87)

---

Kerim Ellentoft wrote in dk.edb.internet.webdesign.html:
> Leonard <piper28a@gmail.invalid> skrev :
>
> >centrer tekst og ikke andre elementer.
>
> Nej, centrerer inline elementer, også billeder.
>
> Men man ikke både bruge text-align og position samtidig, hvias
> det skal være centreret midt på siden.
>
> Skal det være centreret og man vil bruge position: absolute, så
> skal der være to <div>, en der bliver positioneret absolute og så
> en, der bluver centreret i denne <div>.
>
> Men position: absolute er noget af det mest misbrugte på mange
> hjemmesider.
>
> Det bliver bragt ud af sidens normale flow og kan derfor være
> svært at styre uden en masse andre positioner.
>
> Hvis det blot er for at skabe afstand til toppen, så brug
> margin-top: 90px i stedet for.
>

Hej Erik og Kerim

Ja, I har ret. Jeg har bokset med problemet mange gange, og I
beskriver det rigtigt flot. Tak for det.

Hvh.

Peter


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

---

Mikkel Jakobsen wrote:

> <div Class='billede'> <img src='billede.php?visid=$visid'/></div>

Hvorfor i alverden sender du dit billede som php-kode? Det fylder på den
måde 457 KB. Gemmer du billedet som jpg på serveren og sender det som jpg,
fylder det kun 107 KB. Dermed skal brugerne ikke sidde og vente nær så længe
på, at billedet kommer.

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

---

>
> > <div Class='billede'> <img src='billede.php?visid=$visid'/></div>
>
> Hvorfor i alverden sender du dit billede som php-kode? Det fylder på den
> måde 457 KB. Gemmer du billedet som jpg på serveren og sender det som jpg,
> fylder det kun 107 KB. Dermed skal brugerne ikke sidde og vente nær så længe
> på, at billedet kommer.
>

Point taken.

Jeg kan godt se hvad du mener.
grunden til at jeg laver det som Php billede er at jeg tilføjer noget tekst som
brugeren selv kan vælge.

Og Nej jeg var ikke lige opmærksom på at billedet kom til at fylde så meget.

Tak.

Mikkel





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

---

Det skulle være fikset nu...

Det var en php kode fejl...

Rettet imgPNG() til imgJPG() så resulatatet bliver et jpeg billede istædet for
et PNG...

Erik Ginnerskov wrote in dk.edb.internet.webdesign.html:
> Mikkel Jakobsen wrote:
>
> > <div Class='billede'> <img src='billede.php?visid=$visid'/></div>
>
> Hvorfor i alverden sender du dit billede som php-kode? Det fylder på den
> måde 457 KB. Gemmer du billedet som jpg på serveren og sender det som jpg,
> fylder det kun 107 KB. Dermed skal brugerne ikke sidde og vente nær så længe
> på, at billedet kommer.
>
> --
> Med venlig hilsen
> Erik Ginnerskov
> http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
> http://html-faq.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

---

Sorry, men jeg har desværre stadig ikke løst problemet,
det er nok bare mig der roder rundt i det.


div.ramme {
border: 10px solid black;
}

div.billede {
text-align:center;
   margin-left: auto;
   margin-right: auto;
   top: 90px;
}


<div Class='billede'>
<div class='ramme'>
<img src='billede.php?visid=$visid' alt='$Beskrivelse' />
</div>
</div>

Men det centrer stadig ikke billedet. og rammen er ikke "stram" om
billedet....

Jeg er ikke gode venner med ham CSS gutten......

Er der nogen der kan skrive de par linier kode der
1. centrer billedet på siden
2. en ramme "tæt" om billedet.

Tak Mikkel.







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

---

Mikkel Jakobsen <spam@bonzai.adsl.dk> skrev :

>Er der nogen der kan skrive de par linier kode der
>1. centrer billedet på siden
>2. en ramme "tæt" om billedet.

Du mangler at angive vidde på din div (= den størrelse billedet
har), default er 100%, så man kan ikke se, at din div faktisk er
centreret, men drop den margin: auto, den er overflødig og uden,
så er width ikke påkrævet.

div.billede {
text-align:center;
margin-top: 90px;
}
vil gøre det.

Sæt border på img, ikke div.

--
Kerim
»Søger nogen en anden religion end Islam, skal den ikke modtages
af Ham, og han skal i det kommende liv være blandt taberne.«
(Sura 3, vers 87)

---

Mikkel Jakobsen skrev:

> Sorry, men jeg har desværre stadig ikke løst
> problemet

Prøv med:

<div class="ramme">
<img src="images/billede.jpg" alt="Beskrivelse" />
</div>

og

..ramme{
text-align:center;
}
..ramme img{
border:solid 3px #f00;
}

--
Allan Vebel
http://html-faq.dk

---

"Mikkel Jakobsen" <spam@bonzai.adsl.dk> skrev i en meddelelse
news:46e594e4$0$90276$14726298@news.sunsite.dk...
> Mit problem er at jeg ikke kan centre et billede op min side..
> I Ie er billedet helt til højre og i FF er den helt til venstre.
>
>
> div.billede {
> text-align:center;
> position:absolute;
> top: 90px;
> border: 10px solid black;}
>
>
> <div Class='billede'> <img src='billede.php?visid=$visid'/></div>
>
> Der er sikkert en simpel løsning på problemet, jeg er bare ikke
> så stærk til Css.
>
> Mikkel
>
>
> http://www.bonzai.adsl.dk/galleri/visbillede.php?visid=1668
>
> --

Bortset fra at siden lige i øjeblikket ikke kan vises, har jeg et par
kommentarer.

Dit dokument har ingen DOCTYPE - altså ved browserne ikke hvad de har med at
gøre, eller hvordan dine koder skal fortolkes.
Du bruger left og right i absolut positionerede elementer, med størrelser i
pixel. På små skærme bytter knapperne plads. Brug f. eks 30% i stedet. Så
bliver de forholdsmæssigt på plads, når browservinduet ændres.

Din kode er noget rod. Masser af whitespace i CSS - mens al html står på een
linie.
Store og små bogstaver mellem hinanden.
der er en </div> for meget..

http://validator.w3.org/check er et fantastisk værktøj, og en uvurderlig
hjælp til fejlfinding.


Jeg har leget lidt med din kode, og er nået til følgende som så vidt jeg kan
se virker (IE6,IE7,FF), og også validerer.
Der bør selvfølgelig en brugbar titel på, og alt på knap-billeder kan også
gøres forståelig, f.eks. Forrige / Næste..

Birger


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<title>..</title>
<style type="text/css">
body {
text-align : center;
}
div.boks1 {
position: absolute;
top: 50px;
left: 30%;
border: 1px solid black;
}
div.boks2 {
position:absolute;
top: 50px;
right: 30%;
border: 1px solid black;
}
div.ramme {
border: 10px solid black;
margin-top: 70px;
}
div.billede {
text-align:center;
margin-left: auto;
margin-right: auto;
top: 90px;
}
</style>
</head>
<body>
<h2>Bente og Lasse</h2>
<div class='boks1'>
<a href= 'visbillede.php?visid=1667'><img src='style/Previous.ico' border=0
alt=""></a>
</div>
<div class='boks2'>
<a href= 'visbillede.php?visid=1669'><img src='style/next.ico' border=0
alt=""></a>
</div>
<div class='ramme'>
<div class='billede'><img src='billede.php?visid=1668' alt='Bente og
Lasse'></div>
</div>
</body>
</html>

---

Tak for Hjælpen, og den konstruktive kritik.

Jeg har fået ryddet lidt op i koden, og fået den kontrolleret af
http://validator.w3.org/ så nu skulle det køre.

Hvad designet angår, så bliver det nok ikke bedre end det er nu,
med mine Css evner.

http://www.bonzai.adsl.dk/galleri/visbillede.php?visid=1668

eller bare.

http://www.bonzai.adsl.dk/galleri/

Men tak for hjælpen.
Mikkel


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

---

"Mikkel Jakobsen" <spam@bonzai.adsl.dk> skrev i en meddelelse
news:46e6e904$0$90262$14726298@news.sunsite.dk...
> Tak for Hjælpen, og den konstruktive kritik.
>
> Jeg har fået ryddet lidt op i koden, og fået den kontrolleret af
> http://validator.w3.org/ så nu skulle det køre.
>
> Hvad designet angår, så bliver det nok ikke bedre end det er nu,
> med mine Css evner.
>
> http://www.bonzai.adsl.dk/galleri/visbillede.php?visid=1668
>
> eller bare.
>
> http://www.bonzai.adsl.dk/galleri/
>
> Men tak for hjælpen.
> Mikkel
>
>
> --
> 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


Ser også meget bedre ud... ;>)

Nogle småting du burde ændre:

div.ramme {
border: 10px solid black;
top: 70px;
}
bliver aldrig brugt, fordi der ikke er en div med class="ramme".
I øvrigt vil top ikke virke, fordi div'en ikke har nogen placering (skal
være enten absolute eller relative, for at top - og også left, right og
bottom - virker).
brug margin-top på img.ramme i stedet, eller sæt den større i div.billede,
så billedet kommer ned under knapperne.

Der er nogle <br> puttet ind imellem nogle steder, som heller ikke rigtigt
hører til, og nogle steder (ved nogle billeder) ødelægger dit design.

Du bruger php til at generere visningen?
Jeg ville så lægge css i separat fil i stedet. Det giver mindre båndbredde
for de enkelte sider (billeder), og er mere overskueligt.

Birger.

---

Tak for kritikken....

Jeg har rettet alle de åbenlyse fejl jeg kunne finde.
og fået valideret både Css og Html.


http://www.bonzai.adsl.dk/galleri/visbillede.php?visid=1668


alt virker også fint når siden vises i FF. men når jeg
afprøver den i IE6. flyver billedet op og ned alt efter
om der er en overskrift til billedet eller ej.

(det dog skal siges at de billeder uden overskrift er overskriften udskiftet
med et <br>)

<Brok>
Hvorfor vises siden ikke ens når koden er ens,
er det ikke derfor der er lavet en standart som skal overholdes.
Hvorfor fortolkes koden så forskelligt.
</Brok>

sorry det måtte ud.

Css www.bonzai.adsl.dk/galleri/style/style.css

Mikkel


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

---

On 12 Sep 2007 18:31:54 GMT, Mikkel Jakobsen wrote:

> (det dog skal siges at de billeder uden overskrift er overskriften udskiftet
> med et <br>)

Prøv at skifte <br> ud med &nbsp;
Det er et fast mellemrum og det bør have samme størrelse som et bogstav.

--
Leonard
Mine biler: http://vw.leonard.dk/

---

> > (det dog skal siges at de billeder uden overskrift er overskriften udskiftet
> > med et <br>)
>
> Prøv at skifte <br> ud med
> Det er et fast mellemrum og det bør have samme størrelse som et bogstav.




Jo... sørme jo. Nu virker det, både i FF og IE6. Takker

http://www.bonzai.adsl.dk/galleri/visbillede.php?visid=1668

Mikkel

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

---

"Mikkel Jakobsen" <spam@bonzai.adsl.dk> skrev i en meddelelse
news:46e83099$0$90273$14726298@news.sunsite.dk...
> Tak for kritikken....
>
> Jeg har rettet alle de åbenlyse fejl jeg kunne finde.
> og fået valideret både Css og Html.
>
>
> http://www.bonzai.adsl.dk/galleri/visbillede.php?visid=1668
>
>
> alt virker også fint når siden vises i FF. men når jeg
> afprøver den i IE6. flyver billedet op og ned alt efter
> om der er en overskrift til billedet eller ej.
>
> (det dog skal siges at de billeder uden overskrift er overskriften
> udskiftet
> med et <br>)
>
> <Brok>
> Hvorfor vises siden ikke ens når koden er ens,
> er det ikke derfor der er lavet en standart som skal overholdes.
> Hvorfor fortolkes koden så forskelligt.
> </Brok>
>
> sorry det måtte ud.
>
> Css www.bonzai.adsl.dk/galleri/style/style.css
>
> Mikkel
>

<Brok>
Jeg tror der er rigtig mange herinde, der er mere end 100% enig med dig!
Der kan tærskes langhalm på afvigelser fra standarder - og til ingen verdens
nytte.
Det er jo ikke muligt for os almindelige mennesker at rette i den måde IE6
f.eks. opfatter/fortolker.
Det kan kun komme et sted fra - og eftersom det ikke gør det, må vi blot
acceptere at sådan er det, og forsøge omveje for faktisk at få browserne til
at gøre som det forventes af dem.
Nogen burde betale den enorme mængde spildtid og frustrationer de er den
direkte årsag til!
</Brok>

Din anvendelse af <br>, specielt i et <h> tag er ikke heldig.
Nogle browsere vil indsætte en tom linie, fordi der står et linieskift -
andre vil ikke, netop fordi der ingen tekst er, og følgelig mener at de er
allerede på den næste linie. Det kan godt være årsag til at dit billede
flytter sig op og ned.

Brug sekvensen &nbsp; i stedet. Det er et mellemrum, som browseren ikke kan
opfatte som whitespace, og derfor ikke selv må manipulere med. Du vil derfor
få en overskrift, der udelukkende består af et mellemrum - og det skulle
fylde nogenlunde det samme som en tekst, og også være ens i alle browsere.

Problemet i IE6 (jeg har ikke set siden i IE6) er nok, at du bruger right i
css. Det forstår den ikke - gør i hvert fald ikke rigtigt.
Men du skulle kunne sætte f.eks. left : 70%; i stedet for right :30%; - selv
om det bliver bredden af dine knapper forkert, så er det nok ikke så
væsentligt - og det skulle give omtrent samme resultat, også i IE6.

Birger