Avatar billede sajbar Nybegynder
27. juli 2002 - 18:07 Der er 13 kommentarer og
1 løsning

Bokse/posetionering

Heysan
jeg sidder og roder med CSS vil gerne lave mit design der i, jeg har forsøgt med mig TABLES, men der synes jeg at jeg mister overblikket

http://www.sajbar.dk/test.html
på følgende side er det jeg har fået lavet lige nu
jeg vil gerne vide er det muligt at få lavet en kasse nedenunder de 2 andre kasser jeg har lavet, uden at vide præcist hvor de skal placeres, min tanke er at min menu skal bygges op dynamisk så dvs. jeg kan aldrig været helt sikker på hvornår bunden af min menu skal komme..lige ledes med den "store" kasse som skal indeholde nyheder og lignende, der ved jeg heller ikke præcist hvor bunden skal placeres.

jeg ved godt at jeg burde smide min CSS ud i en selvstændig fil, men jeg sidder bare og roder med grund designet nu :)
håber i kan hjælpe mig
på forhånd tak
Daniel
Avatar billede moefelt Nybegynder
27. juli 2002 - 20:49 #1
du kan sætte din height i dine tables til procent. Altså f.eks. 80% af skærmen så sætter den sig selv udfra hvor stor skærmen er.
Avatar billede sajbar Nybegynder
27. juli 2002 - 21:08 #2
nu bruger jeg IKKE tabels..som jeg skrev synes jeg det blev for uoverskueligt.
og desuden ved jeg heller ikke hvor stor min menu bliver da det er planet at den skal dannes vha. et udtræk fra en database
Avatar billede moefelt Nybegynder
27. juli 2002 - 22:12 #3
jamen det er det samme for <div> tag'et. Ellers så lad vær med at sætte en specifikation på height så bliver den automatisk sat f.eks. udfra dit sql output.
Avatar billede sajbar Nybegynder
27. juli 2002 - 22:16 #4
mmm..nu er det at jeg vil vide om det er muligt at placere en kasse lige under min menu...altså jeg har en kasse med 2 billeder og teksten menu..derunder kommer stedet hvor selve linksene skal være..jeg vil så gerne vide om jeg på en eller anden måde kan lave det sådan at der kommer en kasse ligeefter dette....den skal være lige under ligemeget hvor lang/kort kassen er..
det jeg tænker på er er lissom i en tabel der kommer de enkelte rækker også lige under hinanden uden man ved hvor de skal placeres, men jeg kører altid sur i tabeller da jeg mister overblikket..
Avatar billede moefelt Nybegynder
27. juli 2002 - 22:58 #5
ok - hvad bruger til at lave dine hjemmesider. Jeg kan anbefale Homesite fra macromedia - der ligger en trial på macromedia.com. Hvis man ikke er så god til at hardkode tables/frames etc. har Homesite indbyggede funktioner som gør det til en leg ;-).

Men en table som du beskriver den:

____________________________
|    |                    |
|  1 |          2          |
|    |                    |
|----|                    |
|  3 |                    |
|    |                    |
----------------------------

kan laves sådan:

<table>
<tr><td>Indhold til 1</td>
<td rowspan=2>Indhold til 2</td></tr>
<tr><td>indhold til 3</td></tr>
</table>
Avatar billede sajbar Nybegynder
27. juli 2002 - 23:07 #6
jeg bruger stones webwritter og notepad..men det kan da godt være jeg skal prøve homesite imorgen..vil nu helst lave det i css da jeg synes det er meget nemere at finde rundt i..altså i HTML filen..
Avatar billede gryn Nybegynder
28. juli 2002 - 17:21 #7
Jeg kan nok godt fixe det... kigger nok forbi senere
Avatar billede gryn Nybegynder
29. juli 2002 - 02:31 #8
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

<title>AutoPositionering</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="javascript" type="text/javascript">
function faa(obj)
{
if (document.getElementById){return(eval("document.getElementById('"+obj+"').style"));}
else if (document.all){return(eval("document.all."+obj+".style"));}
else {return(eval("document."+obj+".style"));}
}

function gaaigang(){
n = "ulrik1"
faa("ulrik2").top = document.images["bund1"].offsetTop*1 + faa(n).top.substr(0, faa(n).top.length - 2)*1 + 2 + 20; //Det sidste tal er afstanden mellem boxene
}
</script>

</head>

<body style="margin: 0px 0px 0px 0px" onload="gaaigang()">

<div id="ulrik1" style="position:absolute;left:50px;top:40px;width:170; border:1px #000000 solid;">
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold

<p style="margin:0px 0px 0px 0px;"><img src="pix.gif" name="bund1" width="1" height="1" alt=""></p>

</div>

<div id="ulrik2" style="position:absolute;left:50px;width:170; border:1px #000000 solid;">
Denne box er 20px fra boxen oven over.
</div>


</body>

</html>



FORKLARING:

<p style="margin:0px 0px 0px 0px;"><img src="pix.gif" name="bund1" width="1" height="1" alt=""></p>

skal stå nederst i den div, som er øverst.

"ulrik1" og "ulrik2" er ID'en på henholdsvis den øverste og den nederste box.
Avatar billede sajbar Nybegynder
29. juli 2002 - 10:29 #9
kanon..hvad så hvis jeg har 2 steder jeg skal have placeret en bund hvor jeg ikke ved hvor bunden skal være hvad gør jeg så..så vidt jeg har forstået klarer det der javascript jo kun 1 placering..
jeg har jo både i min "menu" ting en bund der skal placeres og ved min store kasse en bund der skal placeres
hvis du kan fixe det er jeg da villig til at smide lidt flere point ind..
Avatar billede gryn Nybegynder
29. juli 2002 - 13:18 #10
Et øjeblik...
Avatar billede gryn Nybegynder
29. juli 2002 - 13:22 #11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

<title>AutoPositionering</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="javascript" type="text/javascript">
function faa(obj)
{
if (document.getElementById){return(eval("document.getElementById('"+obj+"').style"));}
else if (document.all){return(eval("document.all."+obj+".style"));}
else {return(eval("document."+obj+".style"));}
}

function gaaigang(){
n = "ulrik1"
faa("ulrik2").top = document.images["bund1"].offsetTop*1 + faa(n).top.substr(0, faa(n).top.length - 2)*1 + 2 + 20; //Det sidste tal er afstanden mellem boxene
n = "ulrik3"
faa("ulrik4").top = document.images["bund2"].offsetTop*1 + faa(n).top.substr(0, faa(n).top.length - 2)*1 + 2 + 20; //Det sidste tal er afstanden mellem boxene

}
</script>

</head>

<body style="margin: 0px 0px 0px 0px" onload="gaaigang()">

<div id="ulrik1" style="position:absolute;left:50px;top:40px;width:170; border:1px #000000 solid;">
Indhold<br>
Indhold<br>
Indhold<br>
Indhold<br>
Indhold

<p style="margin:0px 0px 0px 0px;"><img src="pix.gif" name="bund1" width="1" height="1" alt=""></p>

</div>

<div id="ulrik2" style="position:absolute;left:50px;width:170; border:1px #000000 solid;">
Denne box er 20px fra boxen oven over.
</div>



<div id="ulrik3" style="position:absolute;left:250px;top:40px;width:400; border:1px #000000 solid;">
Mere Indhold<br>
Indhold bla bla<br>
Indhold er gr hseth <br>
Indhold txhxth t<br>
Indhold rt<br>
trhh th <br>
xthgtg

<p style="margin:0px 0px 0px 0px;"><img src="pix.gif" name="bund2" width="1" height="1" alt=""></p>

</div>

<div id="ulrik4" style="position:absolute;left:250px;width:400; border:1px #000000 solid;">
Denne box er 20px fra boxen oven over.
</div>


</body>

</html>
Avatar billede sajbar Nybegynder
29. juli 2002 - 13:24 #12
alle tiders! 45 point er det passende for sådan et nydeligt stykke arbejde ? :)
Avatar billede gryn Nybegynder
29. juli 2002 - 13:33 #13
30 er nok ;o)
Avatar billede sajbar Nybegynder
29. juli 2002 - 13:35 #14
okay godt så:)
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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