Notifikationer

Markér alle som læst Log ud

mvk Nybegynder

31. juli 2006 - 09:29 Der er 9 kommentarer og
1 løsning

Centrere indhold i en div både horisontalt og vertikalt

hvordan gør man det ?

jeg ønsker at få placeret det store billede i midten af den blå kasse.

http://www.because-test.dk/collections_specific_new.asp?IDcollection=6

Synes godt om

mclemens Nybegynder

31. juli 2006 - 12:01 #1

Her er måden ... men hvis billedet skal kunne skiftes til forskellige str. skal man
gøre det via. et javascript istedet - samtidig med at man skifter billedet ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type"

content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

#en_div_der_skal_vaere_baggrund{
background:#00f;
position:relative;
height:200px;
width:300px;
}

#skal_vaere_et_billede_men_for_illustrering_en_div{
background:#0ff;
position:absolute;
height:100px;
width:150px;
left:50%;
top:50%;
margin-left:-75px;
margin-top:-50px;
}

</style>

</head><body>

<div id="en_div_der_skal_vaere_baggrund">
<div id="skal_vaere_et_billede_men_for_illustrering_en_div"></div>
</div>

</body></html>

Synes godt om

mclemens Nybegynder

31. juli 2006 - 12:18 #2

Et eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

#cdiv{
background:#00f;
position:relative;
height:300px;
width:350px;
}

#cbil{
background:#0ff;
position:absolute;
left:50%;
top:50%;
margin-left:-145px;
margin-top:-109px;
}

</style>

<script type="text/javascript">

var cbil;
window.onload=function(){
cbil=document.getElementById("cbil");
cbil.onload=function(){calign();};
}

function cpic(tmpp){
cbil.src=tmpp;
}

function calign(){
cbil.style.marginLeft=(cbil.offsetWidth/2*-1)+"px";
cbil.style.marginTop=(cbil.offsetHeight/2*-1)+"px";
}
</script>

</head><body>
Baseret på start billede cbil er 290x218 px derfor halvdelen i negativ padding på begge top og left i margin
<div id="cdiv"><img src="b1.jpg" id="cbil"></div>

<b onclick="cpic('b1.jpg');">Skift billedet til b1.jpg</b><br>
<b onclick="cpic('./b2.jpg');">Skift billedet til b2.jpg - f.eks. 150 x 100px</b>

</body></html>

... hjalp det ?

Synes godt om

mclemens Nybegynder

01. august 2006 - 09:24 #3

eksempel med en tabel istedet:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

#ctab{
background:#00f;
border-collapse:collapse;
height:300px;
width:350px;
text-align:center;
}

</style>

<script type="text/javascript">
function cpic(tmpp){document.getElementById("cbil").src=tmpp;}
</script>

</head><body>

<table id="ctab"><tr><td><img src="b1.jpg" id="cbil"></td></tr></table>

<b onclick="cpic('b1.jpg');">Skift billedet til b1.jpg</b><br>
<b onclick="cpic('./b2.jpg');">Skift billedet til b2.jpg - f.eks. 150 x 100px</b>

</body></html>

Synes godt om

mvk Nybegynder

01. august 2006 - 10:38 #4

i dag ligger billedet i en div. eksempelvis: <div id="product_image"><img src="img/shop/<%=rsSpecific("ImageName")%>" alt="<%=rsSpecific("Name")%>" <%=ImageResize(server.mappath("img/shop") &"/" & rsSpecific("ImageName"), 385, 345)%>></div>

hvilken løsning af ovenstående vil du så anbefale ?

Synes godt om

mvk Nybegynder

01. august 2006 - 10:40 #5

på denne side vil jeg eksempelvis gerne smide det store billede i midten af den blå ramme og de små billeder i midten af deres ramme: http://www.because-test.dk/product.asp?IDproduct=24

Synes godt om

mclemens Nybegynder

01. august 2006 - 18:48 #6

Billederne mangler?
Jeg vil nok nærmest anbefale den i 01/08-2006 09:24:25 ... tabeller er
lige en tand bedre til at centrere end div elementer med negative margin'er...
- De små billeder bør sættes ind i en td hvor de ikke får tildelt valign="top" - og så måske text-align:center; på hver af td'erne...

Synes godt om

mclemens Nybegynder

01. august 2006 - 18:50 #7

( det store billede står vist fint nu ...
jeg ville selv bruge 01/08-2006 09:24:25 - hvis billeder skulle kunne skiftes dynamisk med en automatisk centrering ... det eneste javascriptet gør i det indlæg er at skifte src ... )

Synes godt om

mvk Nybegynder

01. september 2006 - 10:09 #8

point...

Synes godt om

mclemens Nybegynder

01. september 2006 - 10:18 #9

Ok :)

Synes godt om

mclemens Nybegynder

01. september 2006 - 11:10 #10

Og tak for point :)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS