CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede darkstardk Nybegynder
29. juni 2007 - 23:26 Der er 9 kommentarer

"uendelig" side

Sidder her og roder med en hjemmeside, sån lidt for sjov, men vil egentlig gerne have at den skal blive til noget, prøver at opbygge den i CSS, bruger normalt tabeller, så ved ik så meget om CSS.
Det billede jeg har helt i bunden vil jeg gerne have bliver "skubbet" nedad, altså ligemeget hvor meget indhold man tilføjer, så bliver siden bare længere og længere, har fundet ud af at de billeder til højre og til venstre for "tekst området" skal have repeat-y, men hvad gør jeg med billedet i bunden?, her er min kode:

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

#Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:1310px;
    height:918px;
}

#index-01 {
    position:absolute;
    left:0px;
    top:0px;
    width:162px;
    height:237px;
}

#index-02 {
    position:absolute;
    left:162px;
    top:0px;
    width:954px;
    height:120px;
}

#index-03 {
    position:absolute;
    left:1116px;
    top:0px;
    width:194px;
    height:5px;
}

#index-04 {
    position:absolute;
    left:1116px;
    top:5px;
    width:194px;
    height:232px;
}

#index-05 {
    position:absolute;
    left:162px;
    top:120px;
    width:13px;
    height:46px;
}

#index-06 {
    position:absolute;
    left:175px;
    top:120px;
    width:67px;
    height:25px;
}

#index-07 {
    position:absolute;
    left:242px;
    top:120px;
    width:6px;
    height:46px;
}

#index-08 {
    position:absolute;
    left:248px;
    top:120px;
    width:59px;
    height:25px;
}

#index-09 {
    position:absolute;
    left:307px;
    top:120px;
    width:6px;
    height:46px;
}

#index-10 {
    position:absolute;
    left:313px;
    top:120px;
    width:74px;
    height:25px;
}

#index-11 {
    position:absolute;
    left:387px;
    top:120px;
    width:6px;
    height:46px;
}

#index-12 {
    position:absolute;
    left:393px;
    top:120px;
    width:70px;
    height:25px;
}

#index-13 {
    position:absolute;
    left:463px;
    top:120px;
    width:6px;
    height:46px;
}

#index-14 {
    position:absolute;
    left:469px;
    top:120px;
    width:70px;
    height:25px;
}

#index-15 {
    position:absolute;
    left:539px;
    top:120px;
    width:6px;
    height:46px;
}

#index-16 {
    position:absolute;
    left:545px;
    top:120px;
    width:114px;
    height:25px;
}

#index-17 {
    position:absolute;
    left:659px;
    top:120px;
    width:6px;
    height:46px;
}

#index-18 {
    position:absolute;
    left:665px;
    top:120px;
    width:72px;
    height:25px;
}

#index-19 {
    position:absolute;
    left:737px;
    top:120px;
    width:379px;
    height:46px;
}

#index-20 {
    position:absolute;
    left:175px;
    top:145px;
    width:67px;
    height:21px;
}

#index-21 {
    position:absolute;
    left:248px;
    top:145px;
    width:59px;
    height:21px;
}

#index-22 {
    position:absolute;
    left:313px;
    top:145px;
    width:74px;
    height:21px;
}

#index-23 {
    position:absolute;
    left:393px;
    top:145px;
    width:70px;
    height:21px;
}

#index-24 {
    position:absolute;
    left:469px;
    top:145px;
    width:70px;
    height:21px;
}

#index-25 {
    position:absolute;
    left:545px;
    top:145px;
    width:114px;
    height:21px;
}

#index-26 {
    position:absolute;
    left:665px;
    top:145px;
    width:72px;
    height:21px;
}

#index-27 {
    position:absolute;
    left:162px;
    top:166px;
    width:954px;
    height:71px;
}

#index-28 {
    position:absolute;
    left:0px;
    top:237px;
    width:162px;
    height:553px;
    background-image: url(images/index_28.gif);
    background-repeat: repeat-y;
}

#index-29 {
    position:absolute;
    left:162px;
    top:237px;
    width:27px;
    height:553px;
    background-image: url(images/index_29.gif);
    background-repeat: repeat-y;
}

#index-30 {
    position:absolute;
    left:189px;
    top:237px;
    width:895px;
    height:553px;
    background-image: url(images/index_30.gif);
    background-repeat: repeat-y;
}

#index-31 {
    position:absolute;
    left:1084px;
    top:237px;
    width:32px;
    height:553px;
    background-image: url(images/index_31.gif);
    background-repeat: repeat-y;
}

#index-32 {
    position:absolute;
    left:1116px;
    top:237px;
    width:194px;
    height:553px;
    background-image: url(images/index_32.gif);
    background-repeat: repeat-y;
}

#index-33 {
    position:absolute;
    left:0px;
    top:790px;
    width:1310px;
    height:128px;
    background-image: url(images/index_33.gif);
}
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
}
a {
    font-size: 12px;
    color: #FFFFFF;
}
a:visited {
    color: #FFFFFF;
}
a:hover {
    color: #FF0000;
}
a:active {
    color: #FFFFFF;
}

</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;" onLoad="MM_preloadImages('images/index_07_o.gif','images/index_09_o.gif','images/index_11_o.gif','images/index_13_o.gif','images/index_15_o.gif','images/index_17_o.gif','images/index_19_o.gif')">
<!-- ImageReady Slices (site.psd) -->
<div id="Table_01">
    <div id="index-01">
        <img src="images/index_01.gif" width="162" height="237" alt="">
    </div>
    <div id="index-02">
        <img src="images/index_02.gif" width="954" height="120" alt="">
    </div>
    <div id="index-03">
        <img src="images/index_03.gif" width="194" height="5" alt="">
    </div>
    <div id="index-04">
        <img src="images/index_04.gif" width="194" height="232" alt="">
    </div>
    <div id="index-05">
        <img src="images/index_05.gif" width="13" height="46" alt="">
    </div>
    <div id="index-06">
      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image33','','images/index_07_o.gif',1)"><img src="images/index_06.gif" name="Image33" width="67" height="25" border="0"></a>    </div>
    <div id="index-07">
        <img src="images/index_07.gif" width="6" height="46" alt="">
    </div>
    <div id="index-08">
      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image34','','images/index_09_o.gif',1)"><img src="images/index_08.gif" name="Image34" width="59" height="25" border="0"></a>    </div>
    <div id="index-09">
        <img src="images/index_09.gif" width="6" height="46" alt="">
    </div>
    <div id="index-10">
      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image35','','images/index_11_o.gif',1)"><img src="images/index_10.gif" name="Image35" width="74" height="25" border="0"></a>    </div>
    <div id="index-11">
        <img src="images/index_11.gif" width="6" height="46" alt="">
    </div>
    <div id="index-12">
      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image36','','images/index_13_o.gif',1)"><img src="images/index_12.gif" name="Image36" width="70" height="25" border="0"></a>    </div>
    <div id="index-13">
        <img src="images/index_13.gif" width="6" height="46" alt="">
    </div>
    <div id="index-14">
      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image37','','images/index_15_o.gif',1)"><img src="images/index_14.gif" name="Image37" width="70" height="25" border="0"></a>    </div>
    <div id="index-15">
        <img src="images/index_15.gif" width="6" height="46" alt="">
    </div>
    <div id="index-16">
      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image38','','images/index_17_o.gif',1)"><img src="images/index_16.gif" name="Image38" width="114" height="25" border="0"></a>    </div>
    <div id="index-17">
        <img src="images/index_17.gif" width="6" height="46" alt="">
    </div>
    <div id="index-18">
      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image39','','images/index_19_o.gif',1)"><img src="images/index_18.gif" name="Image39" width="72" height="25" border="0"></a>    </div>
    <div id="index-19">
        <img src="images/index_19.gif" width="379" height="46" alt="">
    </div>
    <div id="index-20">
        <img src="images/index_20.gif" width="67" height="21" alt="">
    </div>
    <div id="index-21">
        <img src="images/index_21.gif" width="59" height="21" alt="">
    </div>
    <div id="index-22">
        <img src="images/index_22.gif" width="74" height="21" alt="">
    </div>
    <div id="index-23">
        <img src="images/index_23.gif" width="70" height="21" alt="">
    </div>
    <div id="index-24">
        <img src="images/index_24.gif" width="70" height="21" alt="">
    </div>
    <div id="index-25">
        <img src="images/index_25.gif" width="114" height="21" alt="">
    </div>
    <div id="index-26">
        <img src="images/index_26.gif" width="72" height="21" alt="">
    </div>
    <div id="index-27">
        <img src="images/index_27.gif" width="954" height="71" alt="">
    </div>
    <div id="index-28">
    </div>
    <div id="index-29">
    </div>
    <div id="index-30">
      <p>Testing 1, 2, 3... </p>
      <p>Testing 1, 2, 3...</p>
    </div>
    <div id="index-31">
    </div>
    <div id="index-32">
    </div>
    <div id="index-33">
    </div>
</div>
</body>
</html>

På forhånd mange tak ;)
Avatar billede sibbelone Nybegynder
30. juni 2007 - 11:45 #1
Dette er en opskrift på en side der virker så kan du jo omskrive det til dit eger eksempel

style sheet gemmes som style.css i samme mappe som siden
body {
    Font-family: verdana;
    font-size: 11px;
    color: #000;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    background-color: #fff;}


   
   
/*Starter selv sideindelingen med de forskellige div boxe*/

/*heunder den box som centrere indholdet på siden*/
.holder {
    position: relative;
    width: 963px;
    height: 20px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    /*background-color: #fff;*/
   
    }
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .holder {
    min-height: 200px;
    height: auto;
    }

   
   
/*heunder den indhold hvor både left og content er inde i dette gør at siden udvider sig*/
.indhold {
    position: relative;
    float: left; 
    width: 957px;
    height: 300px;
    border: 3px solid #94aec4;
    background-color: #fff;
    background-color: #fff;}
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/   
html>body .indhold {
    min-height: 300px;
    height: auto;
    }

   

/*heunder den conten  hvor indhold på siden skal sættes ind*/
.content {
    position: relative;
    float: right;  /*skift right ud med left og divboxen vil stå i højre side men kræver at du også ændre .left, der skal float ændres til right*/
    width: 740px;
    height: 10px;
    padding: 10px;
    margin-top: 20px;
    background-color: #fff;}
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .content {
    min-height: 10px;
    height: auto;}   


/*heunder toplogo hvor du kan indsætte et bagrundsbilled*/   
.toplogo {
    position: relative;
    float: left;
    width: 957px;
    height: 90px;
    background-color: #fff;
    border-top: 1px solid #94aec4;
    /*herunder kan du indsætte toplogo
    background: url(../image/toplogo.jpg);
    background-repeat: repeat-y;*/}

/*heunder den menu der går på tværs af hele side, hvis du ikke vil have menuen der kan du bare undlade den på siden*/
.menu {
    position: relative;
    font-size: 11px;
    float: left;
    padding: 0px 0px 0px 10px;
    width: 947px;
    height: 20px;
    color: #fff;
    border-top: 1px solid #94aec4;
    background-color: #435a6e;
    display: inline;
    z-index: 200;}

/*heunder left indhold , her kan du evt lave menu*/   
.left {
    position: relative;
    float: left; /*skift left ud med right og divboxen vil stå i højre side men kræver at du også ændre content, der skal float ændres til left*/
    width: 155px;
    height: 500px;
    margin-right: 0px;
    padding: 5px;
    background-color: #bbb;*/}
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .left {
    min-height: 500px;
    height: auto;}
   

   
   
   
   
   
.bund {
    position: relative;
    font-size: 11px;
    float: left;
    width: 960px;
    height: 20px;
    text-align: center;
    margin-top: 10px; /*styre afstanden op til indhold sættes til 0 hvis man ikke ønsker afstand*/
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #94aec4;
    }
   
   




Siden gemmes som what ever


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Udvid</title>
<meta http-equiv="Content-Language" content="da" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="style/alink.css" />




</head>
<body>



<div class="holder">



<!--indhold starter her og denne div er den der udvider -->
<div class="indhold">

<!--Toplogo starter herunder-->
<div class="toplogo">Toplogo</div>

<!--Vandrette menu starter her-->
<div class="menu"></div>


<!--Left starter her og kan bruges til alt mulig indhold-->
<div class="left">Venstre

</div><!--Left slutter her-->



<!--Contente starter her-->

<div class="content">


Indhold på siden sættes ind her
<div class="curvy">
<em id="ctl"><b>&bull;</b></em>
<em id="cbl"><b>&bull;</b></em>
<em id="ctr"><b>&bull;</b></em>
<em id="cbr"><b>&bull;</b></em>
<p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right up to the corners.<br />
Again, no graphics were used in the making of this demonstration.<br />All it takes is four quadrants of a bullet point positioned absolutely in each corner (arial font this time as it's the safest one to use).</p>
</div>


</div><!--Content slutter her-->




</div><!--Indhold slutter her-->



<div class="bund">Bund bjælke</div>


</div>
</body>
</html>
Avatar billede sibbelone Nybegynder
30. juni 2007 - 11:48 #2
die div bokse som skal kunne udvider sig skal være
position: relative;

og der skal være en
float: left; eller right;

og så er der på siden et hack så det også virker i firefox ie 7
html>body .navnet på div boksen
Avatar billede sibbelone Nybegynder
30. juni 2007 - 11:49 #3
du kan se siden på http://websmeden.dk/test/css/siden.php
Avatar billede darkstardk Nybegynder
30. juni 2007 - 17:45 #4
Hmm, kan ik få det til at virke med de  float: left; det får det til at flyde sammen :S
Avatar billede darkstardk Nybegynder
30. juni 2007 - 19:56 #5
Muligvis en der vil tjene en skilling på at lave det?
Avatar billede sibbelone Nybegynder
01. juli 2007 - 02:14 #6
link til siden tak
Avatar billede darkstardk Nybegynder
01. juli 2007 - 12:27 #7
som den ser ud nu, men vil gerne have den scroll væk..
www.xplayed.com/fuv
Avatar billede darkstardk Nybegynder
01. juli 2007 - 14:56 #8
Hvis du er interesseret, kan jeg smide det hele i en .rar fil, eller du kan få .psd filen hvis det er nemmest
Avatar billede olebole Juniormester
02. juli 2007 - 12:37 #9
<ole>

Hvis alternativet er 'CSS' af den type, du viser i spørgsmålet, er det langt bedre, mere overskueligt og bedre performende at bruge tabeller. Det er komplet misforstået at bruge så mange selectors.

Desuden er det rent spild af tid at bruge CSS, når du aktivt disabler CSS i IE6. Et HTML-dokument _skal_ begynde med en DTD ... f.eks:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Den linje skal st før dit <html>-tag. Ellers disables de mest basale dele af CSS i IE6

/mvh
</bole>
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
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
Variabler som ikke virker Af Frits Jensen i HTML 2 30/10/202409:37 30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML 2 29/09/202410:58 30/09/202412:04
Bredde på div elementer Af dane022 i HTML 2 16/02/202408:29 20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML 2 21/12/202322:51 22/12/202308:03
validering <input tlfnr. Af slein55 i HTML 5 15/10/202311:43 15/10/202314:51
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 13:30 Hvordan ændres UniFi Dream Machine UDM til switch mode Af Kasper4450 i Internetforbindelser
I dag 13:01 Film går i stå midt i afspilningen Af ole falsted i Musik & videoafspillere
I dag 11:40 Fjerne mappe i stifinder Af Peter Olsen i Andet software
I dag 11:27 renteberegning Af Pil i Excel
I går 22:30 Underlig meddelelse på skærmen Af Jordegern i E-mail programmer
White papers
Flere white papers »


Premium
Teaser billede
Vil købe tele-løsninger til det offentlige for 370 millioner kroner
Læs mere »
Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"
Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen
Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet
Se alle »
Computerworld
Teaser billede
Microsofts nye pc er ekstrem billig – men kan blive ekstrem sikker og fleksibel
Læs mere »
Test: Prøv kun disse B&O-hovedtelefoner, hvis du har råd
Kæmpe datalæk på hospital: 750.000 patienters fortrolige data lækket
Telegigant klar med AI-baseret mormor: Holder telefon-svindlere fast i røret med sniksnak og dumme spørgsmål
Se alle »
CIO
Teaser billede
Konsulenthus vil rulle Microsoft 365 Copilot ud til 200.000 ansatte
Læs mere »
Kæmpe-opgave for Danske Bank har banet vej for fuldautomatiseret migrering til cloud: Nu udbredes metoden i hele AWS
Microsofts store årlige event: De tre vigtigste nøglebudskaber fra Satya Nadella om Microsofts fremtid
Tre vigtige erkendelser, som Computerworld tog med hjem fra Gartners store topmøde i Barcelona
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Efter skelsættende møde med sportscoach: Stor dansk it-arbejdsplads indfører fredags-fri og isbade i arbejdstiden
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Topchef Sara Green mener, at der er brug for et radikalt nyt syn på it-ledelse - særligt én ny trend hader hun som pesten
Se alle »
White paper
Teaser billede
Sådan får du overblik og beskytter dine cloudapplikationer
Læs mere »
Styrk compliance, sikkerhed og overblik med ét hug
Governance, Risk & Compliance: Knyt stærke bånd mellem forretning og sikkerhed
Managed Detection & Response: Forsvar din virksomhed mod cybertrusler døgnet rundt
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »