CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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

</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')">

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

Synes godt om

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


<div class="indhold">


<div class="toplogo">Toplogo</div>


<div class="menu"></div>


<div class="left">Venstre

</div>



<div class="content">

Indhold på siden sættes ind her
<div class="curvy">
<em id="ctl"><b>•</b></em>
<em id="cbl"><b>•</b></em>
<em id="ctr"><b>•</b></em>
<em id="cbr"><b>•</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>

</div>

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

</div>
</body>
</html>

Synes godt om

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

Synes godt om

sibbelone Nybegynder

30. juni 2007 - 11:49 #3

du kan se siden på http://websmeden.dk/test/css/siden.php

Synes godt om

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

Synes godt om

darkstardk Nybegynder

30. juni 2007 - 19:56 #5

Muligvis en der vil tjene en skilling på at lave det?

Synes godt om

sibbelone Nybegynder

01. juli 2007 - 02:14 #6

link til siden tak

Synes godt om

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

Synes godt om

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

Synes godt om

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>

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
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
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

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