Notifikationer

Markér alle som læst Log ud

mikl-dk Nybegynder

19. december 2003 - 20:14 Der er 29 kommentarer og
1 løsning

Samme effekt i CSS som merge celler med tables

Hej,

Jeg har det problem, at jeg skal lave nogenlunde det samme i css, som hvis jeg merger celler i tables - mit problem er, at jeg ikke er særlig skarp til CSS...

Jeg har et indholdsfelt i midten. Ude til højre og venstre har jeg en identisk situation: et billede i toppen på fast højde, et i midten hvis højde skal afhænge af, hvor meget indhold der er, samt et i bunden med fast højde... Hvordan gør jeg det?

Synes godt om

roenving Novice

19. december 2003 - 20:15 #1

Kun ved at javascripte dig frem !-)

Synes godt om

roenving Novice

19. december 2003 - 20:16 #2

Du kan se noget af teknikken her: http://www.eksperten.dk/spm/441574

Synes godt om

mikl-dk Nybegynder

19. december 2003 - 20:18 #3

Men det er kun højden du snakker om på dem ikke? Hvad med det "merging" så?

Synes godt om

mikl-dk Nybegynder

19. december 2003 - 21:18 #4

Har kigget lidt, og har fået lavet noget fusk js til det med højden... :)

Synes godt om

roenving Novice

20. december 2003 - 11:28 #5

Du snakker vel om det, som du med tabeller ville have lavet med en rowspan=3 i midterkolonnen ?-)

Synes godt om

mikl-dk Nybegynder

20. december 2003 - 13:31 #6

Ja :)

Synes godt om

mikl-dk Nybegynder

20. december 2003 - 13:42 #7

Men jeg har fixet det ved at lave fusk ved at bruge både tables og css, så nu virker det fint :) Dog som sagt, ikke optimal, da det ikke er ren css...

Synes godt om

roenving Novice

20. december 2003 - 15:27 #8

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sæt højde på divs dynamisk</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="søgeord adskilt af komma">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%}
div{
border-bottom:2px dotted #833;
}
#left{
position:relative;
float:left;
width:120px;
}
#center{
position:relative;
float:left;
width:500px;
text-align:center;
}
#right{
position:relative;
float:left;
width:120px;
text-align:right;
}
.top{
position:relative;
height:120px;
}
.middle{
position:relative;
}
.bottom{
position:relative;
height:120px;
}
</style>
<script language="javascript" type="text/javascript">
var divs = ['left','center','right'];
var divs2 = ['top','middle','bottom'];

function resizeDivs(){
var maxH = 0;
d = document.getElementsByTagName("DIV");
for(i=0;divs.length>i;i++){
maxH = Math.max(maxH,document.getElementById(divs[i]).offsetHeight);
}
for(i=0;divs.length>i;i++){
document.getElementById(divs[i]).style.height=maxH + 'px';
}
var t = document.getElementById(divs2[0]+divs[0]).offsetHeight;
var b = document.getElementById(divs2[2]+divs[0]).offsetHeight;
document.getElementById(divs2[1]+divs[0]).style.height = (maxH - t - b - 2) + 'px';

t = document.getElementById(divs2[0]+divs[2]).offsetHeight;
b = document.getElementById(divs2[2]+divs[2]).offsetHeight;
document.getElementById(divs2[1]+divs[2]).style.height = (maxH - t - b - 2) + 'px';
}
</script>
</head>

<body onload="resizeDivs()">
<div id="left">
<div id="topleft" class="top">topleft</div>
<div id="middleleft" class="middle">middleleft</div>
<div id="bottomleft" class="bottom">bottomleft</div>
</div>
<div id="center">center
En tekst<br>
</div>
<div id="right">
<div id="topright" class="top">topright</div>
<div id="middleright" class="middle">middleright</div>
<div id="bottomright" class="bottom">bottomright</div>
</div>
</body>
</html>

Synes godt om

mikl-dk Nybegynder

20. december 2003 - 15:31 #9

Det der går slet ikke :) Det kan jeg ikke lige overskue at sætte ind :) Jeg paster lige min indexfil og mit style-sheet som det er nu - ok? Og så sætter jeg point op, og gider du så hjælpe mig med at få skidtet til at passe? :)

Synes godt om

mikl-dk Nybegynder

20. december 2003 - 15:33 #10

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>xxxxxxxxx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript">

function syncronizeDivs()
{

contentObject = document.getElementById("content");
contentHeight = contentObject.offsetHeight;

lcol = document.getElementById("leftContent");
lcol.style.height = contentHeight - 76 - 113;

rcol = document.getElementById("rightContent");
rcol.style.height = contentHeight - 76 - 113;
}
</script>

</head>

</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="syncronizeDivs();">

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20%" bgcolor="#656532"></td>
<td width="800" align="center" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"> <table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="logoTop leftLogoTop">
</td>
<td class="logoTop rightLogoTop">
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="topMenu leftTopMenuLogo"></td>
<td><a href="?section=1" class="topMenu leftTopMenuOne"></a></td>
<td><a href="?section=2" class="topMenu leftTopMenuTwo"></a></td>
<td><a href="?section=3" class="topMenu leftTopMenuThree"></a></td>
<td><a href="?section=4" class="topMenu leftTopMenuFour"></a></td>
<td><a href="?section=5" class="topMenu leftTopMenuFive"></a></td>
<td><a href="?section=6" class="topMenu leftTopMenuSix"></a></td>
<td class="topMenu rightTopMenuLogo"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="menuContentSpacer leftMenuContentSpacer"></td>
<td class="menuContentSpacer middleLeftMenuContentSpacer"></td>
<td class="menuContentSpacer middleRightMenuContentSpacer"></td>
<td class="menuContentSpacer rightMenuContentSpacer"></td>
</tr>
</table>
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="titleOnPage leftTitleOnPage"></td>
<td rowspan="3" align="center" valign="top" bgcolor="#000000" id="content">
<div class="tekst headline">Velkommen til denne side!</div>
<div class="tekst content"> Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Donec dapibus. Nunc hendrerit urna sed nisl.
In hac habitasse platea dictumst. Phasellus augerat, odio
velit vestibulum pede, vitae molestie tortor nunc ut odio.
Maecenas varius sodales risus. Nunc lobortis, felis at gravida
adipiscing, nisl metus ornare nisl, eget elementum turpis
sem eu ligula.Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec dapibus. Nunc hendrerit urna sed nisl. In hac
habitasse platea dictumst. Phasellus augue enim, adipiscing
a, sagittis ut, pharetra pretium, nerit urna sed nisl. In
hac habitasse platea dictumst. Phasellus augue enim, adipiscing
a, sagittis ut, pharetra pretium, neque. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Praesent non est quis arcu aliquet lacinia. Donec
feugiat neque eu neque. Vivamus enim nibh, ornare sed, pulvinar
am eu ligula.Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec dapibus. Nunc hendreneque, placerat sed, cursus
ac, euismod eu, est. Nunc imperdiet ultricies sem. Curabitur
ac augue vel felis dapibus venenatis. Fusce fermentum, dui
id adipiscing placerat, odio velit vestibulum pede, vitae
molestie tortor nunc ut odio. Maecenas varius sodales risus.
Nunc lobortis, felis at gravida adipiscing, nisl metus ornare
nisl, eget elementum turpis sem eu ligula.Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Donec dapibus. Nunc
hendrerit urna sed nisl. In hac habitasse platea dictumst.
Phasellus augue enim, adipiscing a, sagittis ut, pharetra
pretium, nerit urna sed nisl. In hac habitasse platea dictumst.
Phasellus augue enim, adipiscing a, sagittis ut, pharetra
pretium, neque. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Praesent non
est quis arcu aliquet lacinia.</div></td>
<td class="titleOnPage rightTitleOnPage"></td>
</tr>
<tr>
<td class="leftLowerContent" id="leftContent"></td>
<td class="rightLowerContent" id="rightContent"></td>
</tr>
<tr>
<td class="lowerContent leftLowerContent"></td>
<td class="lowerContent rightLowerContent"></td>
</tr>
<tr>
<td rowspan="2" class="bottomTextSides leftBottomTextSides"></td>
<td class="bottomLine"></td>
<td rowspan="2" class="bottomTextSides rightBottomTextSides"></td>
</tr>
<tr>
<td class="tekst footer"> ng placerat, odio velit vestibulum pede,
vitae molestie tortor nunc ut odio. Maecenas varius sodales
risus. Nunc lobortis, felisat gravida adipiscing, nisl metus
ornare nisl, eget elementum turpis sem eu ligula.Lorem ipsum
dol </td>
</tr>
<tr>
<td class="bottom leftBottom"></td>
<td class="bottom middleBottom"></td>
<td class="bottom rightBottom"></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#656532"></td>
<td bgcolor="#EBDDB6"></td>
</tr>
</table>
</td>
<td width="20%" bgcolor="#EBDDB6"></td>
</tr>
</table>
</body>
</html>

Synes godt om

mikl-dk Nybegynder

20. december 2003 - 15:33 #11

.tekst
{
font-family: verdana, tahoma, arial, sans-serif;
color: #FFFFFF;
background-color: #000000;
}

.headline
{
font-size: 16px;
text-align: center;
text-decoration: none;
font-weight: bold;
}

.content
{
font-size: 12px;
text-align: justify;
text-decoration: none;
font-weight: normal;
}

.footer
{
font-size: 10px;
text-align: center;
text-decoration: none;
font-weight: normal;
}

/*
TOP
*/
.logoTop
{
height: 76px;
width: 400px;
float: left;
}

.leftLogoTop
{
background-image: url(../images/design/slices/01.jpg);
}

.rightLogoTop
{
background-image: url(../images/design/slices/02.jpg);
}

/*
MENU
*/
.topMenu
{
height: 24px;
float: left;
}

.leftTopMenuLogo
{
width: 162px;
background-image: url(../images/design/slices/03.jpg);
}

.leftTopMenuOne
{
width: 75px;
background-image: url(../images/design/menu/4-out.jpg);
}

.leftTopMenuTwo
{
width: 79px;
background-image: url(../images/design/menu/5-out.jpg);
}

.leftTopMenuThree
{
width: 79px;
background-image: url(../images/design/menu/6-out.jpg);
}

.leftTopMenuFour
{
width: 77px;
background-image: url(../images/design/menu/7-out.jpg);
}

.leftTopMenuFive
{
width: 77px;
background-image: url(../images/design/menu/8-out.jpg);
}

.leftTopMenuSix
{
width: 76px;
background-image: url(../images/design/menu/9-out.jpg);
}

.rightTopMenuLogo
{
width: 175px;
background-image: url(../images/design/slices/10.jpg);
}

/*
SPACE BETWEEN MENU AND CONTENT
*/
.menuContentSpacer
{
height: 54px;
float: left;
}

.leftMenuContentSpacer
{
width: 18px;
background-image: url(../images/design/slices/11.jpg);
}

.middleLeftMenuContentSpacer
{
width: 382;
background-image: url(../images/design/slices/12.jpg);
}

.middleRightMenuContentSpacer
{
width: 382;
background-image: url(../images/design/slices/13.jpg);
}

.rightMenuContentSpacer
{
width: 18px;
background-image: url(../images/design/slices/14.jpg);
}

/*
TITLE ON PAGE
*/
.titleOnPage
{
height: 76px;
float: left;
}

.leftTitleOnPage
{
width: 18px;
background-image: url(../images/design/slices/15.jpg);
}

.rightTitleOnPage
{
width: 18px;
background-image: url(../images/design/slices/17.jpg);
}

/*
CONTENT
*/
.leftLowerContent
{
background-image: url(../images/design/slices/18-left-repeat.jpg);
background-repeat: repeat-y;
width: 18px;
}

.rightLowerContent
{
background-image: url(../images/design/slices/19-right-repeat.jpg);
background-repeat: repeat-y;
width: 18px;
}

/*
LOWER CONTENT
*/

.lowerContent
{
height: 113px;
background-color: #000000;
float: left;
}

.leftLowerContent
{
background-image: url(../images/design/slices/20.jpg);
width: 18px;
}

.rightLowerContent
{
background-image: url(../images/design/slices/21.jpg);
width: 18px;
}

/*
BOTTOM LINE
*/
.bottomLine
{
height: 6px;
background-color: #000000;
float: left;
background-image: url(../images/design/slices/23-streg.jpg);
background-repeat: no-repeat;
width: 764px;
vertical-align: top;
}

/*
BOTTOM TEXT
*/
.bottomTextSides
{
height: 64px;
background-color: #000000;
float: left;
}

.leftBottomTextSides
{
background-image: url(../images/design/slices/22.jpg);
width: 18px;
}

.rightBottomTextSides
{
background-image: url(../images/design/slices/24.jpg);
width: 18px;
}

/*
BOTTOM
*/

.bottom
{
height: 13px;
background-color: #000000;
float: left;
}

.leftBottom
{
background-image: url(../images/design/slices/26.jpg);
width: 18px;
}

.middleBottom
{
background-image: url(../images/design/slices/27-bund.jpg);
width: 764px;
}

.rightBottom
{
background-image: url(../images/design/slices/28.jpg);
width: 18px;
}

Synes godt om

roenving Novice

20. december 2003 - 23:57 #12

Kan du ikke kaste en url, så man kan se det i virke ?-)

Synes godt om

mikl-dk Nybegynder

21. december 2003 - 13:45 #13

Jo, det kan jeg :)

Du kan bestemme indholdet med ?tekst=[tekst] :
http://www.spiritsafe.com/exp/?tekst=adaslmnfsdmf

Synes godt om

roenving Novice

22. december 2003 - 12:31 #14

Uff, kom lige til at kigge på siden i Mozilla ...

Ikke nogen rar oplevelse ,-(

Synes godt om

mikl-dk Nybegynder

22. december 2003 - 18:24 #15

Ja, fy for dælen :s

Er det noget du også kan hjælpe med :) ?

Synes godt om

roenving Novice

22. december 2003 - 18:30 #16

Jeg har kigget lidt på den idag, men er slet ikke færdig !-)

Den er jo ikke lige så nem at gå til ...

-- men det jeg har gang i, skulle automatisk få den til at virke i de andre browsere også !-)

Synes godt om

mikl-dk Nybegynder

22. december 2003 - 19:05 #17

:)

Vi må lige finde ud af nogle flere point evt :) Det er i samarbejde med fcs herinde fra jeg laver den - jeg laver selve sidens programmering (php og mysql), og er ikke noget design-, css- eller html-haj, sååå :)

Synes godt om

roenving Novice

22. december 2003 - 19:07 #18

Aha, det forklarer jo noget, for jeg studsede lige en anelse, da jeg opdagede, at det var et whisky-site, som fcs jo har snakket om længe ...

Synes godt om

mikl-dk Nybegynder

22. december 2003 - 21:34 #19

he he, ja :)

Synes godt om

fcs Novice

23. december 2003 - 11:13 #20

He, he - ja - bare lige for at rydde de værste misforståelser af vejen, så er der ikke noget lusket i det. Mikl-dk og jeg samarbejder om sitet ;-)

Synes godt om

roenving Novice

30. december 2003 - 14:39 #21

Her er så en rimeligt fungerende udgave, som endnu ikke er optimeret til andet end IE, men den vil jeg arbejde videre på (jeg har et mindre problem med noget left-float i left-bottom !-)

I arbejdsversionen har jeg flyttet stylen ind i html-filen, men den kan I jo nok finde ud af at flytte ud igen !o]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>www.spiritsafe.com</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/441947">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body{
height:100%;
width:100%;
text-align:center;
margin:0px;
}
div{
position:relative;
z-index:1;
background:transparent;
float:none;
}
.site{
width:800px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
.fulldiv{
position:relative;
width:100%;
float:none;
}
.back{
position:absolute;
z-index:0;
height:100%;
width:50%;
}
.backleft{
left:0px;
background:#656532;
}
.backright{
left:50%;
background:#EBDDB6;
}
.tekst{
font-family: verdana, tahoma, arial, sans-serif;
color: #FFFFFF;
background-color: #000000;
}
.headline{
font-size: 16px;
text-align: center;
text-decoration: none;
font-weight: bold;
}
.content{
font-size: 12px;
text-align: justify;
text-decoration: none;
font-weight: normal;
}
.footer{
font-size: 10px;
text-align: center;
text-decoration: none;
font-weight: normal;
}
/*
TOP
*/
.logoTop{
height: 76px;
width: 400px;
float: left;
}
.leftLogoTop{
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/01.jpg);
}
.rightLogoTop{
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/02.jpg);
}
/*
MENU
*/
.topMenu{
height: 24px;
float: left;
}
.leftTopMenuLogo{
width: 162px;
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/03.jpg);
}
.leftTopMenuOne{
width: 75px;
background-image: url(http://www.spiritsafe.com/exp/images/design/menu/4-out.jpg);
cursor: pointer;
}
.leftTopMenuTwo{
width: 79px;
background-image: url(http://www.spiritsafe.com/exp/images/design/menu/5-out.jpg);
cursor: pointer;
}
.leftTopMenuThree{
width: 79px;
background-image: url(http://www.spiritsafe.com/exp/images/design/menu/6-out.jpg);
cursor: pointer;
}
.leftTopMenuFour{
width: 77px;
background-image: url(http://www.spiritsafe.com/exp/images/design/menu/7-out.jpg);
cursor: pointer;
}
.leftTopMenuFive{
width: 77px;
background-image: url(http://www.spiritsafe.com/exp/images/design/menu/8-out.jpg);
cursor: pointer;
}
.leftTopMenuSix{
width: 76px;
background-image: url(http://www.spiritsafe.com/exp/images/design/menu/9-out.jpg);
cursor: pointer;
}
.rightTopMenuLogo{
width: 175px;
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/10.jpg);
}
/*
SPACE BETWEEN MENU AND CONTENT
*/
.menuContentSpacer{
height: 54px;
float: left;
}
.leftMenuContentSpacer{
width: 18px;
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/11.jpg);
}
.middleLeftMenuContentSpacer{
width: 382px;
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/12.jpg);
}
.middleRightMenuContentSpacer{
width: 382px;
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/13.jpg);
}
.rightMenuContentSpacer{
width: 18px;
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/14.jpg);
}
.leftTitleContent{
float: left;
}
.rightTitleContent{
float: left;
}
/*
TITLE ON PAGE
*/
.titleOnPage{
height: 76px;
float: left;
}
.leftTitleOnPage{
width: 18px;
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/15.jpg);
float:none;
}
.rightTitleOnPage{
width: 18px;
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/17.jpg);
float:none;
}
/*
CONTENT
*/
#content{
width: 764px;
float:left;
}
.leftLowerContent{
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/18-left-repeat.jpg);
background-repeat: repeat-y;
width: 18px;
}
.rightLowerContent{
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/19-right-repeat.jpg);
background-repeat: repeat-y;
width: 18px;
}
/*
LOWER CONTENT
*/
.lowerContent{
float:left;
width: 764px;
height: 64px;
background-color: #000000;
}
.leftLowerContent{
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/20.jpg);
width: 18px;
}
.rightLowerContent{
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/21.jpg);
width: 18px;
}
/*
BOTTOM LINE
*/
.bottomLine{
height: 6px;
background-color: #000000;
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/23-streg.jpg);
background-repeat: no-repeat;
width: 764px;
vertical-align: top;
}
/*
BOTTOM TEXT
*/
.bottomTextSides{
height: 64px;
background-color: #000000;
float: left;
}
.leftBottomTextSides{
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/22.jpg);
width: 18px;
}
.rightBottomTextSides{
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/24.jpg);
width: 18px;
}
/*
BOTTOM
*/
.bottom{
height: 13px;
background-color: transparent;
float: left;
background-repeat: no-repeat;
}
.leftBottom{
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/26.jpg);
width: 18px;
}
.middleBottom{
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/27-bund.jpg);
width: 764px;
}
.rightBottom{
background-image: url(http://www.spiritsafe.com/exp/images/design/slices/28.jpg);
width: 18px;
}
</style>
<script type="text/javascript">
function syncronizeDivs(){
contentObject = document.getElementById("content");
contentHeight = contentObject.offsetHeight;

lcol = document.getElementById("leftContent");
lcol.style.height = contentHeight - 140 + 'px';

rcol = document.getElementById("rightContent");
rcol.style.height = contentHeight - 140 + 'px';
}
</script>

</head>

<body onload="syncronizeDivs();">
<div class="back backleft"></div>
<div class="back backright"></div>
<div class="site">
<div class="fulldiv">
<div class="logoTop leftLogoTop"></div>
<div class="logoTop rightLogoTop"></div>
</div>
<div class="fulldiv">
<div class="topMenu leftTopMenuLogo"></div>
<div onclick="location.href='?section=1'" class="topMenu leftTopMenuOne"></div>
<div onclick="location.href='?section=2'" class="topMenu leftTopMenuTwo"></a></div>
<div onclick="location.href='?section=3'" class="topMenu leftTopMenuThree"></a></div>
<div onclick="location.href='?section=4'" class="topMenu leftTopMenuFour"></a></div>
<div onclick="location.href='?section=5'" class="topMenu leftTopMenuFive"></a></div>
<div onclick="location.href='?section=6'" class="topMenu leftTopMenuSix"></a></div>
<div class="topMenu rightTopMenuLogo"></div>
</div>
<div class="fulldiv">
<div class="menuContentSpacer leftMenuContentSpacer"></div>
<div class="menuContentSpacer middleLeftMenuContentSpacer"></div>
<div class="menuContentSpacer middleRightMenuContentSpacer"></div>
<div class="menuContentSpacer rightMenuContentSpacer"></div>
</div>
<div class="fulldiv">
<div class="leftTitleContent">
<div class="titleOnPage leftTitleOnPage"></div>
<div class="leftLowerContent" id="leftContent"></div>
<div class="lowerContent leftLowerContent"></div>
</div>
<div id="content"> 
<div class="tekst headline">Velkommen til denne side!</div>
<div class="tekst content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dapibus. Nunc hendrerit urna sed nisl. In hac habitasse platea dictumst. Phasellus augerat, odio velit vestibulum pede, vitae molestie tortor nunc ut odio. Maecenas varius sodales risus. Nunc lobortis, felis at gravida adipiscing, nisl metus ornare nisl, eget elementum turpis sem eu ligula.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dapibus. Nunc hendrerit urna sed nisl. In hac habitasse platea dictumst. Phasellus augue enim, adipiscing a, sagittis ut, pharetra pretium, nerit urna sed nisl. In hac habitasse platea dictumst. Phasellus augue enim, adipiscing a, sagittis ut, pharetra pretium, neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non est quis arcu aliquet lacinia. Donec feugiat neque eu neque. Vivamus enim nibh, ornare sed, pulvinar am eu ligula.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dapibus. Nunc hendreneque, placerat sed, cursus ac, euismod eu, est. Nunc imperdiet ultricies sem. Curabitur ac augue vel felis dapibus venenatis. Fusce fermentum, dui id adipiscing placerat, odio velit vestibulum pede, vitae molestie tortor nunc ut odio. Maecenas varius sodales risus. Nunc lobortis, felis at gravida adipiscing, nisl metus ornare nisl, eget elementum turpis sem eu ligula.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dapibus. Nunc hendrerit urna sed nisl. In hac habitasse platea dictumst. Phasellus augue enim, adipiscing a, sagittis ut, pharetra pretium, nerit urna sed nisl. In hac habitasse platea dictumst. Phasellus augue enim, adipiscing a, sagittis ut, pharetra pretium, neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non est quis arcu aliquet lacinia.</div>
</div>
<div class="rightTitleContent">
<div class="titleOnPage rightTitleOnPage"></div>
<div class="rightLowerContent" id="rightContent"></div>
<div class="lowerContent rightLowerContent"></div>
</div>
</div>
<div class="fulldiv">
<div class="bottomTextSides leftBottomTextSides"></div>
<div class="lowerContent">
<div class="bottomLine"></div>
<div class="tekst footer"> ng placerat, odio velit vestibulum pede, vitae molestie tortor nunc ut odio. Maecenas varius sodales risus. Nunc lobortis, felisat gravida adipiscing, nisl metus ornare nisl, eget elementum turpis sem eu ligula.Lorem ipsum dol </div>
</div>
<div class="bottomTextSides rightBottomTextSides"></div>
</div>
<div class="fulldiv">
<div class="bottom leftBottom"></div>
<div class="bottom middleBottom"></div>
<div class="bottom rightBottom"></div>
</div>
</div>
</body>
</html>

Synes godt om

roenving Novice

30. december 2003 - 14:52 #22

-- forøvrigt tog jeg tid på load-hastighed, og den var ca. 15 sekunder ...

-- men det kan selvfølgelige blive anderledes på andre forbindelser, min er kun 10Mb/s. !-)

Synes godt om

roenving Novice

30. december 2003 - 14:53 #23

Dvs. på en normal ISDN-forbindelse ville det svare til 20 minutter ...

Synes godt om

mikl-dk Nybegynder

30. december 2003 - 18:13 #24

Det er meget :o?
Hvad hvis man fx har slået js fra? Og hvad er idéen i at have links som <div onclick="location.href='?section=1" class="topMenu leftTopMenuOne"></div>
i stedet for <a> i html?

Synes godt om

roenving Novice

30. december 2003 - 18:28 #25

Fordi du så får hele området med, det ville du kun kunne klare uden baggrundsbilleder, men med billederne sat direkte ind i div'erne !-)

Synes godt om

mikl-dk Nybegynder

30. december 2003 - 21:31 #26

:D - smart :)

Synes godt om

roenving Novice

31. december 2003 - 03:37 #27

-- og hvis man har javascript slået fra, vil et par væsentlige hjørner af jeres design jo også falde ud (synkroniseringen f.eks. !-)

Synes godt om

mikl-dk Nybegynder

12. april 2004 - 15:55 #28

roenving, læg et svar.

Synes godt om

roenving Novice

12. april 2004 - 16:40 #29

Velbekomme '-)

Synes godt om

roenving Novice

12. april 2004 - 17:32 #30

-- og tak for points ;~}

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