steen_hansen Forsker

24. september 2006 - 10:54 Der er 117 kommentarer og
1 løsning

<tr> i tabeller, hvad bruger man med <div>

Hvis jeg laver en tabel, og ønsker banner i den øverste række, menu/indhold i den, og bund i den sidste række, kunne det se således ud:

<table>
<tr>
<td colspan="2">Banner</td>
</tr>
<tr>
<td>Menu</td>
<td>Indhold</td>
</tr>
<tr>
<td colspan="2">Bund</td>
</tr>
</table>

Hvordan laver jeg det samme med <div>? I det nedenstående har jeg kun et banner og en menu under banneret. Jeg mangler en række med menu/indhold, samt en bund under menu/indhold:

<div class="maindiv">
<div class="divbanner"></div>
<div class="divbannermenu"></div>
</div>

Synes godt om

mclemens Nybegynder

24. september 2006 - 11:12 #1

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

html,body{margin:0px;padding:0px;}

.maindiv{width:980px;margin:0px auto;border:1px solid #000;}

.divbanner{clear:both;background:#aaa;height:50px;}

.leftdiv{float:left;width:180px;background:#ccc;}

.rightdiv{float:right;width:800px;background:#888;}

.divbannermenu{clear:both;background:#aaa;height:30px;}

</style>

</head><body>
<div class="maindiv">
<div class="divbanner"></div>
<div class="leftdiv">br<br></div>
<div class="rightdiv">br<br>br<br></div>
<div class="divbannermenu"></div>
</div>
</body></html>

... med en evt. rettelse af maindiv til:
.maindiv{width:980px;margin:0px auto;border:1px solid #000;background:#ccc;}
... forudsat at baggrunde på de forskellige kollonner skal bruges og det er nødvendigt at de har farven ned til bunden (men, det fordrer at den ene kolonne altid er højere end den anden - ellers er det svært at vide hvad baggrund man skal sætte på maindiv... - et javascript kan selvfølgelig aligne højden)

Synes godt om

mclemens Nybegynder

24. september 2006 - 11:28 #2

Hvis man så kigger på http://www.w3schools.com/css/pr_class_display.asp
... kan eksemplet senere når IE understøtter det se sådan her ud:
(kig eksemplet i f.eks. Firefox)

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

html,body{margin:0px;padding:0px;}

.maindiv{width:980px;margin:0px auto;border:1px solid #000;display:inline-table;}

.tr{display:table-row;}

.divbanner{width:100%;background:#aaa;height:50px;display:table-cell;}

.leftdiv{width:180px;background:#ccc;display:table-cell;}

.rightdiv{width:800px;background:#888;display:table-cell;}

.divbannermenu{width:100%;background:#aaa;height:30px;display:table-cell;}

.table{display:table;width:100%;}

</style>

</head><body>
<div class="maindiv"><div class="tr">

<div class="divbanner"></div>

</div><div class="tr">

<div class="table"><div class="tr">
<div class="leftdiv">br<br></div>
<div class="rightdiv">br<br>br<br></div>
</div></div>

</div><div class="tr">

<div class="divbannermenu"></div>

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

Så kommer så spørgsmålet om hvorfor man kan definere elementers udseende via css'en og derved få det til at opføre sig som en table ... uhm, måske fordi vi senere skal arbejde med elementer der ikke har en designmæssig betydning og undgå elementer som f.eks. det udgåede <u> element (selvfølgelig kun udgået i xhtml 1.1) ... ligesåvel som senere når xframes kommer så kører det (vist) mere via css med src defineringer m.v. ...

Synes godt om

steen_hansen Forsker

24. september 2006 - 11:34 #3

Jeg går ud fra, at dine eksempler fra 24/09-2006 11:12:30

br<br>br

skal være

<br><br><br>

...?

Synes godt om

mclemens Nybegynder

24. september 2006 - 11:36 #4

br<br>br er god nok - det var for at have noget tekst...
(jeg burde måske have skrevet tekst<br>tekst men <br><br><br>
kan jo også bruges til at illustere køjde udvidelsen :) )

Synes godt om

steen_hansen Forsker

24. september 2006 - 11:57 #5

Hm? Jeg forstår tydeligvis ikke principperne i det:

CSS:

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #d7d7d7;
background-image: url('/images/bodybg.gif');
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}
.maindiv {
width: 990px;
padding: 0px;
margin: 0px auto;
border-spacing: 0px;
}
.divbanner {
/* clear: both;*/
width: 988px;
height: 90px;
padding: 0px;
border-right: 1px solid #d7d7d7;
border-left: 1px solid #d7d7d7;
border-bottom: 1px solid #7b7b7b;
}
.divbannermenu {
/* clear: both;*/
width: 988px;
height: 30px;
padding: 0px;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}
.divcontext {
width: 988px;
height: 50px;
padding: 0px;
}
.divmenucontent {
width: 988px;
padding: 0px;
margin: 0px auto;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
background-color: #fff;
}
.divmenu {
float: left;
width: 150px;
padding: 30px;
}
.divcontent {
float: right;
width: 778px;
padding: 30px 0px;
}

HTML:

<div class="maindiv">
<div class="divbanner"></div>
<div class="divbannermenu"></div>
<div class="divcontext">Context</div>
</div>
<div class="menucontent">
<div class="divmenu">Menu</div>
<div class="divcontent">Indhold</div>
</div>

Attributen "clear: both;" - hvad bruges den til?

Synes godt om

mclemens Nybegynder

24. september 2006 - 12:20 #6

css defineringen clear:both; kan hjælpe med at få FF
til at strække ydre elementer i forhold til indre elementers
højde - og sørge for at der ikke er noget til højre / venstre for elementet...

(påvirkningen kan ses i IE og FF afhængig af ens situation i markup'en)

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>

</head><body>
<div style="border:1px solid #000;background:#666;">

<div style="float:left;width:200px;background:#888">left</div>
<div style="float:left;clear:left;width:200px;background:#aaa;">left også,<br> men<br> under grundet clear: left ... det kunne også have været both eller right afhængig af behovet</div>

<div style="clear:both;">en sidste clear af den sidste float</div>

</div>

<br><br>vs.:<br><br>

<div style="border:1px solid #000;background:#666;">

<div style="float:left;width:200px;background:#888">left</div>
<div style="float:left;width:200px;background:#aaa;">left også,<br> men<br> under grundet clear: left ... det kunne også have været both eller right afhængig af behovet</div>

<div style="">en sidste clear af den sidste float</div>

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

Kigger lige på din css ...

Synes godt om

steen_hansen Forsker

24. september 2006 - 12:59 #7

Jeg kan squtte få skidtet til at passe, ved ikke hvor kæden hopper af :o/

Synes godt om

mclemens Nybegynder

24. september 2006 - 13:20 #8

<div class="menucontent">
vs. .divmenucontent {

... Men, ellers virker din css fint :)

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #d7d7d7;
background-image: url('/images/bodybg.gif');
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}

.maindiv {
width: 990px;
margin: 0px auto;
}

.divbanner {
width: 988px;
height: 90px;
border-right: 1px solid #d7d7d7;
border-left: 1px solid #d7d7d7;
border-bottom: 1px solid #7b7b7b;
}

.divbannermenu {
width: 988px;
height: 30px;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}

.divcontext {
width: 988px;
height: 50px;
}

.menucontent {
width: 988px;
padding: 0px;
margin: 0px auto;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
background-color: #fff;
}
.divmenu {
float: left;
width: 150px;
padding: 30px;
}
.divcontent {
float: right;
width: 778px;
padding: 30px 0px;
}

- border er på enkelte steder defineret til samme
baggrund som body ... formoder at det er med vilje :)

Synes godt om

mclemens Nybegynder

24. september 2006 - 13:27 #9

Umiddelbart vil jeg selv vælge id="elementetsnavn"
og i css: #elementsnavn{styles} såfremt at det ene
element kun eksisterer en gang på siden ...

Synes godt om

steen_hansen Forsker

24. september 2006 - 13:31 #10

Ja, det er med vilje, men jeg har simpelthen fjernet de linier:

.divbanner {
width: 990px;
height: 90px;
}

Der skal nemlig ikke være afgrænsning på banner, som det er tilfældet med divmenu og divcontent, det var lidt unødigt :o)

Men jeg kan ikke se der er kommet en border #7b7b7b; og at baggrunden er hvid på divmenucontent, samt at den er centreret?

Synes godt om

steen_hansen Forsker

24. september 2006 - 13:36 #11

24/09-2006 13:27:27: Ja, det har jeg ellers også gjort, men jeg kan faktisk ikke se den dybere mening med den, udover man bedre kan spotte den i CSS - og så kan den jo ikke genanvendes, hvis man skulle havne et sted, hvor det kunne være belejligt :o)

Synes godt om

mclemens Nybegynder

24. september 2006 - 13:51 #12

Men jeg kan ikke se der er kommet en border #7b7b7b; og at baggrunden er hvid på divmenucontent, samt at den er centreret?

fra 24/09-2006 13:20:27:
[ <div class="menucontent">
vs. .divmenucontent { ]

- enten skal du rette class i html'en til: divmenucontent

eller bruge:

div.menucontent i css filen istedet for .divmenucontent

Synes godt om

mclemens Nybegynder

24. september 2006 - 13:54 #13

Et eksempel kunne se sådan her ud:

<!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">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #d7d7d7;
background-image: url('/images/bodybg.gif');
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}

div.main {
width: 990px;
margin: 0px auto;
}

div.banner {
width: 988px;
height: 90px;
border-right: 1px solid #d7d7d7;
border-left: 1px solid #d7d7d7;
border-bottom: 1px solid #7b7b7b;
}

div.bannermenu {
width: 988px;
height: 30px;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}

div.context {
width: 988px;
height: 50px;
}

div.menucontent {
width: 988px;
padding: 0px;
margin: 0px auto;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
background-color: #fff;
}
div.menu {
float: left;
width: 150px;
padding: 30px;
}
div.content {
float: right;
width: 778px;
padding: 30px 0px;
}
</style>

</head><body>

<div class="main">
<div class="banner"></div>
<div class="bannermenu"></div>
<div class="context">Context</div>
</div>

<div class="menucontent">
<div class="menu">Menu</div>
<div class="content">Indhold</div>
</div>

</body></html>

... og så - så jeg lige at der manglede en clear i FF så:

<div class="main">
<div class="banner"></div>
<div class="bannermenu"></div>
<div class="context">Context</div>
</div>

<div class="menucontent">
<div class="menu">Menu</div>
<div class="content">Indhold</div>
<div style="clear:both;"></div>
</div>

Synes godt om

steen_hansen Forsker

24. september 2006 - 13:57 #14

ah, sorry :o)

Men baggrund er stadig ikke hvid?

Synes godt om

steen_hansen Forsker

24. september 2006 - 13:58 #15

NU tror jeg sq den er der :o)

Synes godt om

steen_hansen Forsker

24. september 2006 - 14:03 #16

Så er der lige et sidste spørgsmål:

.divcontext {
width: 988px;
height: 50px;
paddingleft: 30px;
background-color: #fff;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
vertical-align: middle;
}

Hvorfor rettes det ikke til, så teksten bliver centreret + "paddet" 30px fra venstre?

Synes godt om

steen_hansen Forsker

24. september 2006 - 14:08 #17

paddingleft: 30px; skulle være padding-left: 30px;, det var en smutter :o) Men teksten bliver ikke centreret vertikalt?

Synes godt om

steen_hansen Forsker

24. september 2006 - 14:52 #18

Håber du stadig er med, jeg er kørt helt fast. Nu passer dette ikke længere?

CSS:

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #d7d7d7;
background-image: url('/images/bodybg.gif');
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}
.maindiv {
width: 990px;
margin: 0px auto;
}
.divbanner {
width: 990px;
height: 90px;
}
.divbannermenu {
width: 988px;
height: 30px;
padding: 0px;
border: 1px solid #7b7b7b;
}
.divcontext {
width: 958px;
height: 50px;
padding-left: 30px;
background-color: #fff;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
vertical-align: middle;
}
.divmenucontent {
width: 988px;
padding: 0px;
margin: 0px auto;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
background-color: #fff;
}
.divmenu {
float: left;
width: 150px;
padding: 30px;
}
.divcontent {
float: right;
width: 778px;
padding: 30px 0px;
}

HTML:

<div class="maindiv">
<div class="divbanner"></div>
<div class="divbannermenu"></div>
<div class="divcontext">Context</div>
</div>
<div class="divmenucontent">
<div class="divmenu">Menu</div>
<div class="divcontent">Indhold</div>
<div style="clear: both;"></div>
</div>

Synes godt om

steen_hansen Forsker

24. september 2006 - 15:16 #19

Jeg roede rundt i nogle stylesheets, den er ok nu. Jeg mangler dog kun lige at kunne centrere teksten i divcontext. Nogen forslag?

Synes godt om

mclemens Nybegynder

24. september 2006 - 16:40 #20

Hej Steen, kigger lige på det...
Var lige optaget fra 14:00 -> nu.

Synes godt om

mclemens Nybegynder

24. september 2006 - 16:43 #21

vertical-align: middle; er til table-cell's ...

Hvad med denne css?

.divcontext {
width: 958px;
height: 50px;
padding-left: 30px;
background-color: #fff;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
text-align:center;
}

Synes godt om

mclemens Nybegynder

24. september 2006 - 16:43 #22

edit: vertical-align: middle; er til table-cell's ...
(tror jeg nok, ved ikke om der er andet det virker på også :) )

Synes godt om

steen_hansen Forsker

24. september 2006 - 16:52 #23

1. Nej, desværre:

Centrer vandret i cellen: text-align: center;
Centrer lodret i cellen: vertical-align: middle;

2. Hvis jeg vil have 3 divs ved siden af hinanden:

<div class="divmenu">
<div class="divcontent">
<div class="divinfo">

Hvordan skal CSS se ud?

3. Det nedenstående ser temmelig mærkeligt ud i MSIE:

CSS:

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #d7d7d7;
background-image: url('/images/bodybg.gif');
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}
.maindiv {
width: 990px;
margin: 0px auto;
border-bottom: 1px solid #7b7b7b;
}
.divbanner {
width: 990px;
height: 90px;
border-bottom: 1px solid #7b7b7b;
}
.divbannermenu {
width: 990px;
height: 30px;
padding: 0px;
}
.divcontext {
width: 958px;
height: 50px;
padding-left: 30px;
background-color: #fff;
border-top: 1px solid #7b7b7b;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
vertical-align: middle;
}
.divmenucontent {
width: 988px;
padding: 0px;
margin: 0px auto;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
background-color: #fff;
}
.divmenu {
float: left;
width: 150px;
padding: 30px;
}
.divmenus {
width: 150px;
border: 1px solid #7b7b7b;
}
.divcontent {
float: center;
width: 538px;
padding: 30px 30px 30px 0px;
}

HTML:
<div class="maindiv">
<div class="divbanner"></div>
<div class="divbannermenu">
<div class="divcontext">Context</div>
</div>
<div class="divmenucontent">
<div class="divmenu"></div>
<div class="divcontent"></div>
<div style="clear: both;"></div>
</div>

Synes godt om

steen_hansen Forsker

24. september 2006 - 16:56 #24

3. Det nedenstående ser temmelig mærkeligt ud i MSIE, divcontent kommer ned under divmenu (ikke ind under), som om der ikke er plads til divcontent?

Synes godt om

mclemens Nybegynder

24. september 2006 - 17:03 #25

3. Ikke helt sikker, med måske:

<div class="maindiv">
<div class="divbanner"></div>
<div class="divbannermenu"> - - - - - en manglende </div> her ?
<div class="divcontext">Context</div>
</div>
<div class="divmenucontent">
<div class="divmenu"></div>
<div class="divcontent"></div>
<div style="clear: both;"></div>
</div>

Læser det lige igennem ... og checker

Synes godt om

steen_hansen Forsker

24. september 2006 - 17:08 #26

Ok, jeg havde glemt at sætte </div> ind her, men den er ok i dokumentet:

<div class="maindiv">
<div class="divbanner"></div>
<div class="divbannermenu"></div>
<div class="divcontext">Context</div>
</div>
<div class="divmenucontent">
<div class="divmenu"></div>
<div class="divcontent"></div>
<div style="clear: both;"></div>
</div>

Synes godt om

steen_hansen Forsker

24. september 2006 - 17:12 #27

SQ! Nu er den fin i MSIE, men ikke i Opera. divcontent fortsætter nedenunder divmenu ...?

Synes godt om

mclemens Nybegynder

24. september 2006 - 17:21 #28

Har testet denne i IE og FF ...

<!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">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #d7d7d7;
background-image: url('/images/bodybg.gif');
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}

.maindiv {
width: 990px;
margin: 0px auto;
border-bottom: 1px solid #7b7b7b;
}

.divbanner {
height: 90px;
border-bottom: 1px solid #7b7b7b;
}

.divbannermenu {
height: 30px;
}

.divcontext {
width: 958px;
height: 50px;
padding-left: 30px;
background-color: #fff;
border-top: 1px solid #7b7b7b;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
line-height:50px;
}

.divmenucontent {
width: 988px;
margin: 0px auto;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
background-color: #fff;
}

.divmenu {background:red;
float: left;
width: 150px;
padding: 30px;
}

.divcontent {background:blue;
float: left;
width: 566px;
padding: 30px 30px 30px 0px;
}

.divinfo {
float: right;
width: 150px;
border: 1px solid #7b7b7b;
padding: 29px 30px 29px 0px;
}

.clearer{clear:both;}
</style>

</head><body>

<div class="maindiv">
<div class="divbanner"></div>
<div class="divbannermenu">divbannermenu</div>
<div class="divcontext">Context</div>
</div>

<div class="divmenucontent">
<div class="divmenu">divmenu</div>
<div class="divcontent">divcontent</div>
<div class="divinfo">divinfo</div>
<div class="clearer"></div>
</div>

</body></html>

... Prøver lige OP ...

Synes godt om

mclemens Nybegynder

24. september 2006 - 17:27 #29

Min Op 9.01 virker umiddelbart med ovenstående ...

Synes godt om

mclemens Nybegynder

24. september 2006 - 17:32 #30

P.s.: float: center; eksisterer
ikke... left eller right :o)

- I nogle tilfælde kan det være rart med en overflow:hidden;
på nogle af div'sene så hvis der er en der skriver
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Så bliver div'en ikke ødelagt ... det er selvfølgelig også muligt at bruge overflow:auto; men en scrollbar er ikke altid ønsket ... :)

Synes godt om

steen_hansen Forsker

24. september 2006 - 17:45 #31

Den er med det laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaange ord er der taget højde for :o)

Nu virker de i alle, pånær MSIE. Her kommer divinfo ned på "næste linie", som om der ikke er plads til den. Vil du have HELE koden?

Synes godt om

steen_hansen Forsker

24. september 2006 - 17:46 #32

Det er der også højde for, her på E, kan jeg se :oD

Synes godt om

mclemens Nybegynder

24. september 2006 - 17:51 #33

Hvis 24/09-2006 17:21:51 virker på din IE
er jeg nok nødt til at få lidt mere css så
jeg for at kigge på / at kunne se problemet.

Synes godt om

steen_hansen Forsker

24. september 2006 - 19:31 #34

Det var fordi jeg oprettede 2 tabeller/divs i hver side, og de havde en border på 1px.

mclemens, du er simpelthen en guttermand. Smid et svar :o)

Synes godt om

mclemens Nybegynder

24. september 2006 - 19:43 #35

Det er du også ;) Her er lige et svar.
Og tak for bonus pointene :o)

Synes godt om

mclemens Nybegynder

24. september 2006 - 19:43 #36

( det var vist 15 fra start
af så vidt jeg huskede :) )

Synes godt om

steen_hansen Forsker

24. september 2006 - 19:53 #37

Det var det, men du har mere end fortjent det, den er lige i øret, og jeg kan komme videre med scripting nu :o)

Læg lige et svar :o)

Synes godt om

steen_hansen Forsker

24. september 2006 - 19:53 #38

Ups, du havde jo svaret. 1000 tak mclemens, du er en guttermand! :o)

Synes godt om

mclemens Nybegynder

24. september 2006 - 20:07 #39

Ok, tak for pointene :)

Synes godt om

steen_hansen Forsker

24. september 2006 - 23:55 #40

mclemens, jeg har et problem mere, håber du stadig er på:

<div class="maindiv">

slutter lige under

<div class="divcontext">

Jeg kan kun se, at det nedenstående er korrekt, men

<div class="divmenucontent">

får ikke den hvide baggrundsfarve, som den burde:

<%' HOVEDDIV START %>
<%'-----------------------------------------------------------------------%>
<div class="maindiv">

<%'-----------------------------------------------------------------------%>
<%' BANNER START %>
<div class="divbanner"></div>
<%' BANNER SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' BANNERMENU START %>
<div class="divbannermenu"></div>
<%' BANNERMENU START %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' CONTEXT START %>
<div class="divcontext"></div>
<%' CONTEXT SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' MENU/INDHOLD/INFO START %>
<div class="divmenucontent">
<div class="divmenu">
<div class="divmenus">
<div class="divmenuhead"> </div>
<div class="divmenusubs"> </div>
<div class="divmenusubs"> </div>
<div class="divmenusubs"> </div>
</div>
</div>
<div class="divcontent"></div>

<%' HER STARTER HØJRE KOLONNE %>
<div class="divinfo">
<div class="divmenus">
<div class="divmenuhead"> </div>
<div class="divmenusubs">

</div>
</div>
<div class="divider"></div>
<div class="divmenus">

</div>
<div class="divmenus">

</div>
<div class="divmenus">

</div>
</div>
</div>
<%' MENU/INDHOLD/INFO SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' BUND START %>
<div class="divbottom"></div>
<%' BUND SLUT %>
<%'-----------------------------------------------------------------------%>

<div class="clearer"></div>

</div>
<%' HOVEDDIV SLUT %>
<%'-----------------------------------------------------------------------%>

Håber det er nemmere at overskue, når det er delt op på denne måde :o)

Jeg har ikke lagt mit CSS ved, da jeg tror det er spørgsmål om at få placeret de divs ordentligt.

Synes godt om

steen_hansen Forsker

25. september 2006 - 00:07 #41

Og så lige rettet ordentligt til:

<%' HOVEDDIV START %>
<%'-----------------------------------------------------------------------%>
<div class="maindiv">
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' BANNER START %>
<div class="divbanner"></div>
<%' BANNER SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' BANNERMENU START %>
<div class="divbannermenu"></div>
<%' BANNERMENU START %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' CONTEXT START %>
<div class="divcontext"></div>
<%' CONTEXT SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' MENU/INDHOLD/INFO START %>
<div class="divmenucontent">
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' MENU START %>
<div class="divmenu">
<div class="divmenus">
<div class="divmenuhead"> </div>
<div class="divmenusubs"> </div>
<div class="divmenusubs"> </div>
<div class="divmenusubs"> </div>
</div>
</div>
<%' MENU SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' INDHOLD START %>
<div class="divcontent">

</div>
<%' INDHOLD SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' HØJRE KOLONNE START %>
<div class="divinfo">
<div class="divmenus">
<div class="divmenuhead"></div>
<div class="divmenusubs"></div>
</div>
<div class="divider"></div>
<div class="divmenus"></div>
<div class="divmenus"></div>
<div class="divmenus"></div>
</div>
<%' HØJRE KOLONNE SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
</div>
<%' MENU/INDHOLD/INFO SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' BUND START %>
<div class="divbottom"></div>
<%' BUND SLUT %>
<%'-----------------------------------------------------------------------%>

<div class="clearer"></div>

<%'-----------------------------------------------------------------------%>
</div>
<%' HOVEDDIV SLUT %>
<%'-----------------------------------------------------------------------%>

Synes godt om

steen_hansen Forsker

25. september 2006 - 00:10 #42

Sorry:

<%' HOVEDDIV START %>
<%'-----------------------------------------------------------------------%>
<div class="maindiv">
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' BANNER START %>
<div class="divbanner"></div>
<%' BANNER SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' BANNERMENU START %>
<div class="divbannermenu"></div>
<%' BANNERMENU SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' CONTEXT START %>
<div class="divcontext"></div>
<%' CONTEXT SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' MENU/INDHOLD/INFO START %>
<div class="divmenucontent">
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' MENU START %>
<div class="divmenu">
<div class="divmenus">
<div class="divmenuhead"></div>
<div class="divmenusubs"></div>
<div class="divmenusubs"></div>
<div class="divmenusubs"></div>
</div>
</div>
<%' MENU SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' INDHOLD START %>
<div class="divcontent"></div>
<%' INDHOLD SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' INFO START %>
<div class="divinfo">
<div class="divmenus">
<div class="divmenuhead"></div>
<div class="divmenusubs"></div>
</div>
<div class="divider"></div>
<div class="divmenus"></div>
<div class="divmenus"></div>
<div class="divmenus"></div>
</div>
<%' INFO SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
</div>
<%' MENU/INDHOLD/INFO SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' BUND START %>
<div class="divbottom"></div>
<%' BUND SLUT %>
<%'-----------------------------------------------------------------------%>

<div class="clearer"></div>

<%'-----------------------------------------------------------------------%>
</div>
<%' HOVEDDIV SLUT %>
<%'-----------------------------------------------------------------------%>

Synes godt om

mclemens Nybegynder

25. september 2006 - 01:10 #43

Din clearer er til at cleare float's så elementer kører baggrunden med nedaf
... hvis der er flere floats skal der måske bruge flere clear's men med de
float's elementer jeg kender til p.t. ser resultatet sådan her ud:

<!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">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #d7d7d7;
background-image: url('/images/bodybg.gif');
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}

.maindiv {
width: 990px;
margin: 0px auto;
border-bottom: 1px solid #7b7b7b;
}

.divbanner {
height: 90px;
border-bottom: 1px solid #7b7b7b;
}

.divbannermenu {
height: 30px;
}

.divcontext {
width: 958px;
height: 50px;
padding-left: 30px;
background-color: #fff;
border-top: 1px solid #7b7b7b;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
line-height:50px;
}

.divmenucontent {
width: 988px;
margin: 0px auto;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
background-color: #fff;
}

.divmenu {background:red;
float: left;
width: 150px;
padding: 30px;
}

.divcontent {background:blue;
float: left;
width: 566px;
padding: 30px 30px 30px 0px;
}

.divinfo {
float: right;
width: 150px;
border: 1px solid #7b7b7b;
padding: 29px 30px 29px 0px;
}

.clearer{clear:both;}
</style>

</head><body>

<div class="maindiv">

<div class="divbanner"></div>

<div class="divbannermenu"></div>

<div class="divcontext"></div>

<div class="divmenucontent">

<div class="divmenu">
<div class="divmenus">
<div class="divmenuhead"></div>
<div class="divmenusubs"></div>
<div class="divmenusubs"></div>
<div class="divmenusubs"></div>
</div>
</div>

<div class="divcontent"></div>

<div class="divinfo">
<div class="divmenus">
<div class="divmenuhead"></div>
<div class="divmenusubs"></div>
</div>
<div class="divider"></div>
<div class="divmenus"></div>
<div class="divmenus"></div>
<div class="divmenus"></div>
</div>

<div class="clearer"></div>

</div>

<div class="divbottom"></div>

</div>

</body></html>

... D.v.s. din float står en tand for langt nede så:

<%' HOVEDDIV START %>
<%'-----------------------------------------------------------------------%>
<div class="maindiv">
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' BANNER START %>
<div class="divbanner"></div>
<%' BANNER SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' BANNERMENU START %>
<div class="divbannermenu"></div>
<%' BANNERMENU SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' CONTEXT START %>
<div class="divcontext"></div>
<%' CONTEXT SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' MENU/INDHOLD/INFO START %>
<div class="divmenucontent">
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' MENU START %>
<div class="divmenu">
<div class="divmenus">
<div class="divmenuhead"></div>
<div class="divmenusubs"></div>
<div class="divmenusubs"></div>
<div class="divmenusubs"></div>
</div>
</div>
<%' MENU SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' INDHOLD START %>
<div class="divcontent"></div>
<%' INDHOLD SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' INFO START %>
<div class="divinfo">
<div class="divmenus">
<div class="divmenuhead"></div>
<div class="divmenusubs"></div>
</div>
<div class="divider"></div>
<div class="divmenus"></div>
<div class="divmenus"></div>
<div class="divmenus"></div>
</div>
<%' INFO SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<div class="clearer"></div>
<%' Vi får lige det ydre element til at udvide sig højde baseret på de indre floatede elementer %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
</div>
<%' MENU/INDHOLD/INFO SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
<%' BUND START %>
<div class="divbottom"></div>
<%' BUND SLUT %>
<%'-----------------------------------------------------------------------%>

<%'-----------------------------------------------------------------------%>
</div>
<%' HOVEDDIV SLUT %>
<%'-----------------------------------------------------------------------%>

Synes godt om

steen_hansen Forsker

25. september 2006 - 01:10 #44

Jeg fik klaret den, jeg fik vist kørt for meget rundt efter en validering :o)

Synes godt om

mclemens Nybegynder

25. september 2006 - 01:11 #45

Ok, jeg var også lidt beskæftiget til
anden side lige et stykke tid :)
... Godnatter og sov godt ;)

Synes godt om

steen_hansen Forsker

25. september 2006 - 01:35 #46

I lige måde :o)

Synes godt om

steen_hansen Forsker

26. september 2006 - 18:16 #47

Lige et hurtigt spørgsmål: Kan man ikke dette i en div?

.readarticle {
display: block;
width: 100%;
}

<a href="#" class="readarticle">Artikel</a>

Synes godt om

mclemens Nybegynder

26. september 2006 - 18:35 #48

Joh, det virker fint nok...

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

.readarticle {
display: block;
width: 100%;
}

div {background:blue;}

</style>

</head><body>

<a href="#" class="readarticle" style="background:red;">Artikel</a>

<br>

<div><a href="#" class="readarticle" style="background:red;">Artikel</a></div>

<br>

<div><a href="#" style="background:red;">Artikel</a></div>
</body></html>

Synes godt om

steen_hansen Forsker

26. september 2006 - 21:09 #49

Ok, jeg må gå det igennem igen :o)

Jeg har et andet problem: Nede mellem <td class="border25"> og <td class="border75"> får jeg et lille mellemrum i FF, Mozilla og Opera. Men ikke i MSIE. Kan du se hvor det går galt?

Synes godt om

steen_hansen Forsker

26. september 2006 - 21:10 #50

Og du får lige noget CSS/HTML, øjeblik ... :o)

Synes godt om

steen_hansen Forsker

26. september 2006 - 21:10 #51

HTML:

<div class="maindiv">
<div class="divbanner">
<table class="fullwidth">
<tr>
<td style="width: 380px; height: 90px; padding: 0px;">
 
</td>
<td style="width: 580px; text-align: right; padding: 0px 30px 0px 0px;">
 
</td>
</tr>
</table>
</div>
<div class="divbannermenu">
<table class="tablebannermenu">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div class="divcontext">..........</div>
<div class="divmenucontent">
<div class="divmenu">
<div class="divmenus">
<div class="divmenuhead">..........</div>
<div class="divmenusubs">..........</div>
<div class="divmenusubs">..........</div>
<div class="divmenusubs">..........</div>
</div>
</div>
<div class="divcontent">
<%
strSQL = "SELECT * FROM befrontnews ORDER BY infoID DESC LIMIT 0, 1"
Set RS = Conn.Execute (strSQL)
%>
<table class="tablemenu">
<tr>
<td style="width: 100%; height: 26px; padding: 0px 0px 0px 10px; border-bottom: 1px solid #7b7b7b; background-image: url('/images/menu/menubg.jpg');"><b>Seneste nyt: <% If RS.EOF Then %>Der er endnu ikke oprettet nogen nyheder<% Else %><%=FormatText(RS("headline"))%><% End If %></b></td>
</tr>
<% If RS("introductory") <> "" Then %>
<tr>
<td style="width: 100%; padding: 15px;"><b><%=FormatText(RS("introductory"))%></b></td>
</tr>
<% End If %>
<tr>
<td style="width: 100%; padding: <% If RS("introductory") <> "" Then %>0px 15px 15px 15px<% Else %>15px<% End If %>;"><%=FormatText(left(RS("newstext"),300))%> ...</td>
</tr>
<tr>
<td style="width: 100%; padding: 0px 15px 15px 15px;">
<table class="fullwidth">
<tr>
<td style="width: 15%; padding: 2px 0px 2px 15px; float: right;"><img src="/images/readthis.gif" style="width: 5px; height: 9px; border: 0px;" alt=""></td>
<td style="width: 85%; padding: 2px 0px 2px 10px;"><a href="/members/news/shownews.asp?infoID=<%=RS("infoID")%>" style="width: 100%; display: block;" onfocus="this.blur();" title="Seneste nyt: <%=FormatText(RS("headline"))%>"><b>Hele nyheden</b></a></td>
</tr>
<tr>
<td style="width: 15%; padding: 2px 0px 0px 15px; float: right;"><img src="/images/readthis.gif" style="width: 5px; height: 9px; border: 0px;" alt=""></td>
<td style="width: 85%; padding: 2px 0px 0px 10px;"><a href="/members/news/default.asp?infoID=<%=RS("infoID")%>" style="width: 100%; display: block;" onfocus="this.blur();" title="Se alle nyhederne i Nyhedsarkivet"><b>Nyhedsarkivet</b></a></td>
</tr>
</table>
</td>
</tr>
</table>
<div style="height: 30px;"></div>
<table class="fullwidth">
<tr>
<td class="border25"><img src="/xxxxxxxxx.jpg" style="width: 105px; height: 152px; border: 0px; vertical-align: top;" alt=".........."></td>
<td class="border75">
<span class="headlinenews">....</span><br>
..............
</td>
</tr>
<tr>
<td class="border25"><img src="/xxxxxxxxx.jpg" style="width: 105px; height: 152px; border: 0px; vertical-align: top;" alt=".........."></td>
<td class="border75">
<span class="headlinenews">....</span><br>
..............
</td>
</tr>
</table>
</div>
<div class="divinfo">
<div class="divmenus">
<div class="divmenuhead">....</div>
<div class="divmenusubs"></div>
</div>
<div class="divider"></div>
<div class="divmenus">
<div class="divmenuhead">..............</div>
<div class="divmenusubs">..............</div>
<div class="divmenusubs1">..............</div>
<div class="divmenusubs1">..............</div>
<div class="divmenusubs1">..............</div>
<div class="divmenusubs"></div>
<div class="divmenusubs">..............</div>
<div class="divmenusubs1">..............</div>
<div class="divmenusubs1">..............</div>
<div class="divmenusubs"></div>
<div class="divmenusubs">..............</div>
<div class="divmenusubs1">..............</div>
<div class="divmenusubs1">..............</div>
<div class="divmenusubs1">..............</div>
<div class="divmenusubs"></div>
<div class="divmenusubs">..............</div>
<div class="divmenusubs1">..............</div>
<div class="divmenusubs1">..............</div>
</div>
</div>
<div class="clearer"></div>
</div>

<div class="divbottom"></div>

<div style="height: 60px;"></div>

Synes godt om

steen_hansen Forsker

26. september 2006 - 21:11 #52

CSS:

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #d7d7d7;
background-image: url('/images/bodybg.gif');
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}
.maindiv {
width: 990px;
margin: 0px auto;
}
.divbanner {
width: 990px;
height: 90px;
line-height: 90p;
border-bottom: 1px solid #7b7b7b;
}
.divbannermenu {
width: 990px;
height: 30px;
padding: 0px;
}
.divcontext {
width: 947px;
height: 50px;
padding-left: 41px;
background-color: #fff;
border-top: 1px solid #7b7b7b;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
line-height:50px;
}
.divmenucontent {
width: 988px;
padding: 0px;
margin: 0px auto;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
background-color: #fff;
}
.divmenu {
float: left;
width: 150px;
padding: 30px;
}
.divmenus {
width: 148px;
border: 1px solid #7b7b7b;
}
.divinfo {
float: right;
width: 150px;
padding: 30px
}
.divmenuhead {
width: 138px;
height: 26px;
line-height: 26px;
font-weight: bold;
padding-left: 10px;
border-bottom: 1px solid #7b7b7b;
background-image: url('/images/menu/menubg.jpg');
}
.divmenusubs {
width: 133px;
height: 20px;
padding-left: 15px;
line-height: 20px;
}
.divmenusubs1 {
width: 128px;
height: 20px;
padding-left: 20px;
line-height: 20px;
}
.divider {
width: 148px;
height: 30px;
}
.divcontent {
float: left;
width: 568px;
line-height: 18px;
padding: 30px 0px;
}
.divcontentadmin {
float: left;
width: 778px;
line-height: 18px;
padding: 30px 0px;
}
.divbottom {
width: 988px;
height: 60px;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
background-image: url('/images/bottom/bottominfo.jpg');
}
.clearer {
clear: both;
}
.border25 {
width: 25%;
padding: 20px 0px;
vertical-align: top;
border-top: 1px solid #7b7b7b;
}
.border75 {
width: 75%;
padding: 20px 0px;
vertical-align: top;
border-top: 1px solid #7b7b7b;
}
.tablebannermenu {
width: 990px;
height: 30px;
padding: 0px;
border-spacing: 0px;
}
.tablebannermenu td {
width: 110px;
height: 30px;
padding: 0px;
text-align: center;
background-image: url("/images/banner/out.gif");
}
.tablemenu {
width: 100%;
padding: 0px;
margin: 0px auto;
border-spacing: 0px;
border: 1px solid #7b7b7b;
}
.fullwidth: {
width: 100%;
padding: 0px;
line-height: 18px;
border-spacing: 0px;
}

Synes godt om

steen_hansen Forsker

26. september 2006 - 21:13 #53

Og så må du gerne lige svare på http://www.eksperten.dk/spm/734851 :o)

Synes godt om

steen_hansen Forsker

26. september 2006 - 22:42 #54

Jeg vil smutte tidligt i seng for en gangs skyld. Håber du har mod på at finde de 2 forholdsvis små fejl i al den tekst :oD

Snakkes!

Synes godt om

mclemens Nybegynder

26. september 2006 - 23:07 #55

Hov, takker - jeg så slet ikke andet
end kommentaren. Nat, nat ;)

Synes godt om

mclemens Nybegynder

27. september 2006 - 00:01 #56

<!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">
.fullwidth {
width: 100%;
padding: 0px;
line-height: 18px;
border-spacing: 0px;
}

.border25 {
width: 25%;
padding: 20px 0px;
vertical-align: top;
border-top: 1px solid #7b7b7b;
}
.border75 {
width: 75%;
padding: 20px 0px;
vertical-align: top;
border-top: 1px solid #7b7b7b;
}

</style>

</head><body>

<table class="fullwidth">
<tr>
<td class="border25" style="background:red;"><img src="x.gif" style="width: 105px; height: 152px; border: 0px; vertical-align: top;" alt=".........."></td><td class="border75" style="background:blue;">
<span class="headlinenews">....</span><br>
..............
</td>
</tr>
<tr>
<td class="border25" style="background:red;"><img src="x.gif" style="width: 105px; height: 152px; border: 0px; vertical-align: top;" alt=".........."></td>
<td class="border75" style="background:blue;">
<span class="headlinenews">....</span><br>
..............
</td>
</tr>
</table>

<br><br>Med cellspacing="0" virker IE 6 også ligesom i eksperten.dk/spm/734101#rid6439988<br><br>

<table class="fullwidth" cellspacing="0">
<tr>
<td class="border25" style="background:red;"><img src="x.gif" style="width: 105px; height: 152px; border: 0px; vertical-align: top;" alt=".........."></td><td class="border75" style="background:blue;">
<span class="headlinenews">....</span><br>
..............
</td>
</tr>
<tr>
<td class="border25" style="background:red;"><img src="x.gif" style="width: 105px; height: 152px; border: 0px; vertical-align: top;" alt=".........."></td>
<td class="border75" style="background:blue;">
<span class="headlinenews">....</span><br>
..............
</td>
</tr>
</table>

</body></html>

Synes godt om

mclemens Nybegynder

27. september 2006 - 00:03 #57

Løsningen var: .fullwidth: {
rettet til: .fullwidth {
(ingen pseudo selector bagefter)

og cellspacing="0" hvis IE 6 også skal være med ...
da den jo ikke understøtter border-spacing ...

Synes godt om

steen_hansen Forsker

27. september 2006 - 00:20 #58

Det er jo perfekt, tak igen-igen-igen :o)

Er du tilfreds med pointene? Jeg er MEGET glad for din store indsats :o)

Synes godt om

steen_hansen Forsker

27. september 2006 - 00:29 #59

[og cellspacing="0" hvis IE 6 også skal være med ...]

Blev det ikke løst med nedenstående?



Mit problem fra 26/09-2006 18:16:24 blev løst med .fullwidth: { :o)

Synes godt om

mclemens Nybegynder

27. september 2006 - 01:23 #60

[Er du tilfreds med pointene? Jeg er
MEGET glad for din store indsats :o) ]
Det er helt fint, jeg havde jo ikke forventet
en bonus - så det var jo rart nok :o)

00:29:02 -> Joh, kan ikke lige huske om der
var 1 px i Opera så eller hvordan den var :o)
... Men det lyder som noget i den stil :o)

Måske kunne det forkortes til denne istedet:

Synes godt om

mclemens Nybegynder

27. september 2006 - 01:24 #61

Nu hopper jeg til køjs :D

Synes godt om

steen_hansen Forsker

27. september 2006 - 08:09 #62

Dvs. dette



- kan forkortes til dette:



- og stadig hedde dette:

.fullwidth: {
width: 100%;
padding: 0px;
line-height: 18px;
border-spacing: 0px;
}

...? Det ville jo være fedt :o)

Synes godt om

mclemens Nybegynder

27. september 2006 - 08:55 #63

Jeg mener at det var det vi nåede til,
men jeg ved ikke hvad IE 7 siger ...

Synes godt om

steen_hansen Forsker

27. september 2006 - 09:09 #64

Jeg prøver det af. Kan IE 7 ikke finde ud af det, må jeg tilbage til det gamle :o)

Endnu en gang tak for hjælpen. Det ser ud til, at der er styr på tabeller/opsætning/struktur, og det er FEDT :o) Jeg har udsat scripting, grafik og design iøvrigt gennem flere uger/måneder p.gr.a. de drilske problemer. Du er simpelthen Man of The Year :o)

Synes godt om

mclemens Nybegynder

27. september 2006 - 09:17 #65

Velbekomme :)
Hvis IE 7 giver problemer kan du prøve at skifte
<!--[if IE]> til <!--[if lt IE 7]> (så rammer
det specielle IE style kun IE under 7 )

Synes godt om

steen_hansen Forsker

28. september 2006 - 23:58 #66

Det vil jeg prøve :o)

Hvor skal

<div class="clearer"></div>

- placeres? Jeg kan få den rigtig i MSIE og Opera, men ikke i Mozilla og FF :o/

Synes godt om

mclemens Nybegynder

29. september 2006 - 00:08 #67

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>

</head><body>

<div style="border:10px solid #000;">
<div style="float:left;width:50px;height:50px;background:#aaa;"></div>
<div style="float:left;width:50px;height:50px;background:#faa;"></div>
</div>

<div style="clear:both;">clear div forkert placeret</div>

<br><br><br><br><br>

<div style="border:10px solid #000;">
<div style="float:left;width:50px;height:50px;background:#aaa;"></div>
<div style="float:left;width:50px;height:50px;background:#faa;"></div>
<div style="clear:both;">clear div korrekt placeret</div>
</div>

</body></html>

... D.v.s. lige efter den sidste floatede div ...

Synes godt om

steen_hansen Forsker

29. september 2006 - 00:47 #68

Ok. Jeg satte en bund på siden, og så fik jeg problemer. Har du tid/lyst til at kigge på det? Skidt med CSS, problemet er, at jeg ikke kan få divmain til at omslutte det hele.




<%
Dim Conn, RS, vID

vID = Request("id")
If Not IsNumeric(vID) Then vID = 0
vID = Int(vID)
If vID < 0 Then vID = 0
%>

<html>

<head>

<title>Titel</title>
</head>

<body>

<div class="maindiv">
<div class="divbanner">
<table class="fullwidth">
<tr>
<td style="width: 380px; height: 90px; padding: 0px;">
<a href="/members/" onfocus="this.blur();" title=".........">
<img src="/images/..........gif" style="width: 380px; height: 88px; border: 0px;" alt="........."></a>
</td>
<td style="width: 580px; text-align: right; padding: 0px 30px 0px 0px;">
<a href="#" onClick="window.open('http://www.redbarnet.dk/');" onfocus="this.blur();" title=".........">
<img src="/images/..........gif" style="width: 468px; height: 60px; border: 0px;" alt="........."></a>
</td>
</tr>
</table>
</div>
<div class="divbannermenu">
<table class="tablebannermenu">
<tr>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
</tr>
</table>
</div>
<div class="divcontext"><span class="contextblack">Context:</span>  <span class="contextred">Forsiden</span></div>
<div class="divmenucontent">
<div class="divmenu">
<div class="divmenus">
<div class="divmenuhead">.........</div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs">.........</div>
</div>
</div>
<div class="divcontent">
<%
strSQL = "SELECT * FROM befrontnews ORDER BY infoID DESC LIMIT 0, 1"
Set RS = Conn.Execute (strSQL)
%>
<table class="tablemenu">
<tr>
<td style="width: 100%; height: 26px; padding: 0px 0px 0px 10px; border-bottom: 1px solid #7b7b7b; background-image: url('/images/..........jpg');"><b>Seneste nyt: <% If RS.EOF Then %>Der er endnu ikke oprettet nogen nyheder<% Else %><%=FormatText(RS("headline"))%><% End If %></b></td>
</tr>
<% If RS("introductory") <> "" Then %>
<tr>
<td style="width: 100%; padding: 15px;"><b><%=FormatText(RS("introductary"))%></b></td>
</tr>
<% End If %>
<tr>
<td style="width: 100%; padding: <% If RS("introductory") <> "" Then %>0px 15px 15px 15px<% Else %>15px<% End If %>;"><%=FormatText(left(RS("newstext"),300))%> ...</td>
</tr>
<tr>
<td style="width: 100%; padding: 0px 15px 15px 15px;">
<table class="fullwidth">
<tr>
<td class="news5"><img src="/images/readthis.gif" class="vbutton" alt=""></td>
<td class="news95"><a href="/members/news/shownews.asp?infoID=<%=RS("infoID")%>" class="fulllink" onfocus="this.blur();" title="Seneste nyt: <%=FormatText(RS("headline"))%>"><b>Hele nyheden</b></a></td>
</tr>
<tr>
<td class="news5"><img src="/images/readthis.gif" class="vbutton" alt=""></td>
<td class="news95"><a href="/members/news/default.asp?infoID=<%=RS("infoID")%>" class="fulllink" onfocus="this.blur();" title="Se alle nyhederne i Nyhedsarkivet"><b>Nyhedsarkivet</b></a></td>
</tr>
</table>
</td>
</tr>
</table>
<div style="height: 30px;"></div>
<table class="fullwidth">
<tr>
<td class="border22"><img src="/images/..........jpg" class="mainpic" alt="........."></td>
<td class="border78">
.........
</td>
</tr>
<tr>
<td class="border22"><img src="/images/..........jpg" class="mainpic" alt="........."></td>
<td class="border78">
.........
</td>
</tr>
<tr>
<td class="border22"><img src="/images/..........jpg" class="mainpic" alt="........."></td>
<td class="border78">
.........
</td>
</tr>
</table>
</div>
<div class="divinfo">
<div class="divmenus">
<div class="divmenuhead">.........</div>
<div class="divmenutable"></div>
</div>
<div class="divider"></div>
<div class="divmenus">
<div class="divmenuhead">.........</div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs"></div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs"></div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs"></div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
</div>
</div>
</div>
<div class="topback">
<div class="backtop">
<table class="fullwidth">
<tr>
<td class="topback1"></td>
<td class="topback2"><img src="/images/back1.gif" class="vbutton" alt="Til top"></td>
<td class="topback3"><a href="java script: history.back(-1);" onfocus="this.blur();" title="Tilbage"><b>Tilbage</b></a></td>
<td class="topback4"><img src="/images/tothetop.gif" class="tothetop" alt="Gå til toppen af siden"></td>
<td class="topback5"><a href="#" onfocus="this.blur();" title="Tilbage"><b>Til top</b></a></td>
</tr>
</table>
</div>
<div class="divbottom"></div>
</div>
</div>
<div style="width: 100%; height: 60px;"></div>

</body>

</html>

<%'<div class="clearer"></div>%>

Synes godt om

mclemens Nybegynder

29. september 2006 - 01:05 #69

Hvis vi nu retter
den nederste del fra:

<div class="divbottom"></div>
</div>
</div>
<div style="width: 100%; height: 60px;"></div>

</body>

</html>

<%'<div class="clearer"></div>%>

til:

<div class="divbottom"></div>
</div>
<div style="width: 100%; height: 60px;"></div>
</div>

</body>

</html>

... så er det wrappet ind hos mig ...

Synes godt om

steen_hansen Forsker

29. september 2006 - 01:12 #70

Ok, jeg må hellere lige kopiere det over i et nyt dokument og prøve det af :o) Øjeblik ...

Synes godt om

mclemens Nybegynder

29. september 2006 - 01:15 #71

((( Hvis der er floats - skal de cleares ...
... men jeg kan ikke se floats'ene (hvis
der er nogen) udfra det du kastede ... )))

Synes godt om

steen_hansen Forsker

29. september 2006 - 01:19 #72

divbottom kommer til at stå lige under menuerne i toppen :o/

Siden er bygget op på denne måde:

<table>
<tr>
<td colspan="3">Banner</td>
</tr>
<tr>
<td colspan="3">Bannermenu</td>
</tr>
<tr>
<td colspan="3">Context</td>
</tr>
<tr>
<td>Menu</td>
<td>Indhold</td>
<td>Information</td>
</tr>
<tr>
<td colspan="3">Tilbage-link/Til top-link</td>
</tr>
<tr>
<td colspan="3">Bund</td>
</tr>
</table>

Synes godt om

steen_hansen Forsker

29. september 2006 - 01:20 #73

29/09-2006 01:15:48: Nej, jeg har lagt det ind i CSS. Men det får vel ingen indflydelse på noget ....?

Synes godt om

mclemens Nybegynder

29. september 2006 - 01:22 #74

Nej, men hvis det var fordi at der var noget der ikke strækkede sig ned ad grunden floats kunne jeg ikke se det hvis det var grundet en float defineret i css ...

- kigger på 01:19:41 ...

Synes godt om

mclemens Nybegynder

29. september 2006 - 01:24 #75

divbottom kommer til at stå i bunden iflg. det du lagde ...

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

</head><body>

<div class="maindiv" style="border:5px solid #000;background:red;">
<div class="divbanner">
<table class="fullwidth">
<tr>
<td style="width: 380px; height: 90px; padding: 0px;">
<a href="/members/" onfocus="this.blur();" title=".........">
<img src="/images/..........gif" style="width: 380px; height: 88px; border: 0px;" alt="........."></a>
</td>
<td style="width: 580px; text-align: right; padding: 0px 30px 0px 0px;">
<a href="#" onClick="window.open('http://www.redbarnet.dk/');" onfocus="this.blur();" title=".........">
<img src="/images/..........gif" style="width: 468px; height: 60px; border: 0px;" alt="........."></a>
</td>
</tr>
</table>
</div>
<div class="divbannermenu">
<table class="tablebannermenu">
<tr>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
</tr>
</table>
</div>
<div class="divcontext"><span class="contextblack">Context:</span>  <span class="contextred">Forsiden</span></div>
<div class="divmenucontent">
<div class="divmenu">
<div class="divmenus">
<div class="divmenuhead">.........</div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs">.........</div>
</div>
</div>
<div class="divcontent">

<table class="tablemenu">
<tr>
<td style="width: 100%; height: 26px; padding: 0px 0px 0px 10px; border-bottom: 1px solid #7b7b7b; background-image: url('/images/..........jpg');"><b>Seneste nyt: Der er endnu ikke oprettet nogen nyheder</b></td>
</tr>

<tr>
<td style="width: 100%; padding: 15px;"><b><%=FormatText(RS("introductary"))%></b></td>
</tr>

<tr>
<td style="width: 100%; padding: 0px 15px 15px 15px"> ...</td>
</tr>
<tr>
<td style="width: 100%; padding: 0px 15px 15px 15px;">
<table class="fullwidth">
<tr>
<td class="news5"><img src="/images/readthis.gif" class="vbutton" alt=""></td>
<td class="news95"><a href="/members/news/shownews.asp?infoID=" class="fulllink" onfocus="this.blur();" title="Seneste nyt: "><b>Hele nyheden</b></a></td>
</tr>
<tr>
<td class="news5"><img src="/images/readthis.gif" class="vbutton" alt=""></td>
<td class="news95"><a href="/members/news/default.asp?infoID=" class="fulllink" onfocus="this.blur();" title="Se alle nyhederne i Nyhedsarkivet"><b>Nyhedsarkivet</b></a></td>
</tr>
</table>
</td>
</tr>
</table>
<div style="height: 30px;"></div>
<table class="fullwidth">
<tr>
<td class="border22"><img src="/images/..........jpg" class="mainpic" alt="........."></td>
<td class="border78">
.........
</td>
</tr>
<tr>
<td class="border22"><img src="/images/..........jpg" class="mainpic" alt="........."></td>
<td class="border78">
.........
</td>
</tr>
<tr>
<td class="border22"><img src="/images/..........jpg" class="mainpic" alt="........."></td>
<td class="border78">
.........
</td>
</tr>
</table>
</div>
<div class="divinfo">
<div class="divmenus">
<div class="divmenuhead">.........</div>
<div class="divmenutable"></div>
</div>
<div class="divider"></div>
<div class="divmenus">
<div class="divmenuhead">.........</div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs"></div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs"></div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs"></div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
</div>
</div>
</div>
<div class="topback">
<div class="backtop">
<table class="fullwidth">
<tr>
<td class="topback1"></td>
<td class="topback2"><img src="/images/back1.gif" class="vbutton" alt="Til top"></td>
<td class="topback3"><a href="java script: history.back(-1);" onfocus="this.blur();" title="Tilbage"><b>Tilbage</b></a></td>
<td class="topback4"><img src="/images/tothetop.gif" class="tothetop" alt="Gå til toppen af siden"></td>
<td class="topback5"><a href="#" onfocus="this.blur();" title="Tilbage"><b>Til top</b></a></td>
</tr>
</table>
</div>
<div class="divbottom"> div id : divbottom </div>
</div>
<div style="width: 100%; height: 60px;"></div>
</div>

</body>

</html>

Synes godt om

mclemens Nybegynder

29. september 2006 - 01:25 #76

... en væsentlig del af placeringen af elementerne er css ...
- uden det kan det være svært at finde problemet ...

Synes godt om

steen_hansen Forsker

29. september 2006 - 01:28 #77

Ok. Vil du have hele CSS? Jeg har eksperimenteret en del, det er blevet til meget :o)

Du får det. Har du mod på det, vil jeg vil være glad :o)

CSS:

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #d7d7d7 url('/images/bodybg.gif') repeat-x;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}
.maindiv {
width: 990px;
margin: 0px auto;
}
.divbanner {
width: 990px;
height: 90px;
line-height: 90p;
border-bottom: 1px solid #7b7b7b;
}
.divbannermenu {
width: 990px;
height: 30px;
padding: 0px;
}
.divcontext {
width: 947px;
height: 50px;
padding-left: 41px;
background-color: #fff;
border-top: 1px solid #7b7b7b;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
line-height:50px;
}
.divmenucontent {
width: 988px;
padding: 0px;
margin: 0px auto;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
background-color: #fff;
}
.divmenu {
float: left;
width: 150px;
padding: 30px;
}
.divmenus {
width: 148px;
border: 1px solid #7b7b7b;
}
.divinfo {
float: right;
width: 150px;
padding: 30px
}
.divmenuhead {
width: 138px;
height: 26px;
line-height: 26px;
font-weight: bold;
padding-left: 10px;
border-bottom: 1px solid #7b7b7b;
background-image: url('/images/menu/menubg.jpg');
}
.divmenutable {
width: 133px;
padding-left: 15px;
}
.divmenusubs {
width: 133px;
height: 20px;
padding-left: 15px;
line-height: 20px;
}
.divmenusubs1 {
width: 128px;
height: 20px;
padding-left: 20px;
line-height: 20px;
}
.divider {
width: 148px;
height: 30px;
}
.divcontent {
float: left;
width: 568px;
line-height: 18px;
padding: 30px 0px;
}
.divcontentadmin {
float: left;
width: 778px;
line-height: 18px;
padding: 30px 0px;
}
.divbottom {
width: 988px;
height: 60px;
line-height: 60px;
text-align: center;
border-top: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
background-image: url('/images/bottom/bottominfo.jpg');
}
.clearer {
clear: both;
}
.news5 {
width: 5%;
padding: 2px 0px 2px 15px;
float: right;
}
.news95 {
width: 95%;
padding: 2px 0px 2px 10px;
}
.border22 {
width: 22%;
padding: 5px 0px;
vertical-align: top;
border-top: 1px solid #7b7b7b;
}
.border78 {
width: 78%;
padding: 5px 0px;
vertical-align: top;
border-top: 1px solid #7b7b7b;
}
.tablebannermenu {
width: 990px;
height: 30px;
padding: 0px;
border-spacing: 0px;
}
.tablebannermenu td {
width: 110px;
height: 30px;
padding: 0px;
text-align: center;
background-image: url("/images/banner/out.gif");
}
.tablemenu {
width: 100%;
padding: 0px;
margin: 0px auto;
border-spacing: 0px;
border: 1px solid #7b7b7b;
}
.fullwidth {
width: 100%;
padding: 0px;
line-height: 18px;
border-spacing: 0px;
}
.vbutton {
width: 5px;
height: 10px;
border: 0px;
}
.fulllink {
width: 100%;
display: block;
}
.divbacktop {
width: 998px;
}
.topback1 {
width: 76%;
padding: 15px 0px;
/* background-color: #b80000;*/
}
.topback2 {
width: 2%;
padding: 15px 0px;
/* background-color: #b84422;*/
}
.topback3 {
width: 10%;
padding: 15px 0px;
margin-left: 3px;
/* background-color: #b86000;*/
}
.topback4 {
width: 2%;
padding: 15px 0px;
/* background-color: #b88800;*/
}
.topback5 {
width: 10%;
padding: 15px 0px;
/* background-color: #b88800;*/
}
.tothetop {
width: 9px;
height: 10px;
border: 0px;
}
.topback {
width: 988px;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
background-color: #fff;
}
a {
font-size: 11px;
color: #336699;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
.headline {
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: bold;
font-size: 12px;
}
.headlinenews {
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: #000;
font-style: normal;
font-weight: bold;
font-size: 11px;
}
.contextblack {
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: bold;
font-size: 11px;
}
.contextred {
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: red;
font-style: normal;
font-weight: bold;
font-size: 11px;
}
a.contextred {
font-size: 11px;
color: red;
font-style: normal;
font-weight: bold;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
text-decoration: none;
}
a.contextred:hover {
color: red;
text-decoration: underline;
}
.mainpic {
width: 105px;
height: 152px;
border: 0px;
}
a.bannermenu, a.bannermenu:link, a.bannermenu:visited {
display: block;
width: 110px;
height: 23px;
padding: 7px 0px 0px 0px;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
font-weight: none;
font-size: 11px;
color: #000;
text-decoration: none;
background-image: url('/images/banner/out.gif');
}
a.bannermenuleft, a.bannermenuleft:link, a.bannermenuleft:visited {
display: block;
width: 108px;
height: 23px;
padding: 7px 0px 0px 0px;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
font-weight: none;
font-size: 11px;
color: #000;
text-decoration: none;
border-left: 1px solid #7b7b7b;
border-right: 1px solid #7b7b7b;
background-image: url('/images/banner/out_left.gif');
}
a.bannermenu:hover {
width: 110px;
display: block;
font-weight: normal;
text-decoration: none;
background-image: url('/images/banner/on.jpg');
}
a.bannermenuleft:hover {
width: 108px;
display: block;
font-weight: normal;
color: #000;
text-decoration: none;
background-image: url('/images/banner/on_left.gif');
}
.activeMenu {
display: block;
width: 110px;
padding: 7px 0px 0px 0px;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
font-weight: normal;
font-size: 11px;
color: #000;
text-decoration: none;
background-image: url('/images/banner/on.jpg');
}
a.menu, a.activeMenu, a.menu:hover, a.activeMenu:hover {
width: 110px;
padding: 7px 0px 0px 0px;
text-decoration: none;
}

Synes godt om

mclemens Nybegynder

29. september 2006 - 01:35 #78

<div class="maindiv" style="border:5px solid #000;background:red;">
<div class="divbanner">
<table class="fullwidth">
<tr>
<td style="width: 380px; height: 90px; padding: 0px;">
<a href="/members/" onfocus="this.blur();" title=".........">
<img src="/images/..........gif" style="width: 380px; height: 88px; border: 0px;" alt="........."></a>
</td>
<td style="width: 580px; text-align: right; padding: 0px 30px 0px 0px;">
<a href="#" onClick="window.open('http://www.redbarnet.dk/');" onfocus="this.blur();" title=".........">
<img src="/images/..........gif" style="width: 468px; height: 60px; border: 0px;" alt="........."></a>
</td>
</tr>
</table>
</div>
<div class="divbannermenu">
<table class="tablebannermenu">
<tr>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
</tr>
</table>
</div>
<div class="divcontext"><span class="contextblack">Context:</span>  <span class="contextred">Forsiden</span></div>
<div class="divmenucontent">
<div class="divmenu">
<div class="divmenus">
<div class="divmenuhead">.........</div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs">.........</div>
</div>
</div>
<div class="divcontent">

<table class="tablemenu">
<tr>
<td style="width: 100%; height: 26px; padding: 0px 0px 0px 10px; border-bottom: 1px solid #7b7b7b; background-image: url('/images/..........jpg');"><b>Seneste nyt: Der er endnu ikke oprettet nogen nyheder</b></td>
</tr>

<tr>
<td style="width: 100%; padding: 15px;"><b><%=FormatText(RS("introductary"))%></b></td>
</tr>

<tr>
<td style="width: 100%; padding: 0px 15px 15px 15px"> ...</td>
</tr>
<tr>
<td style="width: 100%; padding: 0px 15px 15px 15px;">
<table class="fullwidth">
<tr>
<td class="news5"><img src="/images/readthis.gif" class="vbutton" alt=""></td>
<td class="news95"><a href="/members/news/shownews.asp?infoID=" class="fulllink" onfocus="this.blur();" title="Seneste nyt: "><b>Hele nyheden</b></a></td>
</tr>
<tr>
<td class="news5"><img src="/images/readthis.gif" class="vbutton" alt=""></td>
<td class="news95"><a href="/members/news/default.asp?infoID=" class="fulllink" onfocus="this.blur();" title="Se alle nyhederne i Nyhedsarkivet"><b>Nyhedsarkivet</b></a></td>
</tr>
</table>
</td>
</tr>
</table>
<div style="height: 30px;"></div>
<table class="fullwidth">
<tr>
<td class="border22"><img src="/images/..........jpg" class="mainpic" alt="........."></td>
<td class="border78">
.........
</td>
</tr>
<tr>
<td class="border22"><img src="/images/..........jpg" class="mainpic" alt="........."></td>
<td class="border78">
.........
</td>
</tr>
<tr>
<td class="border22"><img src="/images/..........jpg" class="mainpic" alt="........."></td>
<td class="border78">
.........
</td>
</tr>
</table>
</div>
<div class="divinfo">
<div class="divmenus">
<div class="divmenuhead">.........</div>
<div class="divmenutable"></div>
</div>
<div class="divider"></div>
<div class="divmenus">
<div class="divmenuhead">.........</div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs"></div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs"></div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs"></div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
</div>
</div>

<div class="clearer"></div>

</div>
<div class="topback">
<div class="backtop">
<table class="fullwidth">
<tr>
<td class="topback1"></td>
<td class="topback2"><img src="/images/back1.gif" class="vbutton" alt="Til top"></td>
<td class="topback3"><a href="java script: history.back(-1);" onfocus="this.blur();" title="Tilbage"><b>Tilbage</b></a></td>
<td class="topback4"><img src="/images/tothetop.gif" class="tothetop" alt="Gå til toppen af siden"></td>
<td class="topback5"><a href="#" onfocus="this.blur();" title="Tilbage"><b>Til top</b></a></td>
</tr>
</table>
</div>
<div class="divbottom"> div id : divbottom </div>
</div>
<div style="width: 100%; height: 60px;"></div>
</div>

Synes godt om

mclemens Nybegynder

29. september 2006 - 01:36 #79

(Eneste ændring den clear div lagt ind ...)

Synes godt om

steen_hansen Forsker

29. september 2006 - 01:41 #80

Ok, så ligner det noget, men nu er divmenucontent uden baggrundsfarve og border-left/right :(

Synes godt om

mclemens Nybegynder

29. september 2006 - 01:46 #81

divmenecontent har baggrundsfarve og border i min tester ?

<!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">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #d7d7d7 url('/images/bodybg.gif') repeat-x;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}
.maindiv {
width: 990px;
margin: 0px auto;
}
.divbanner {
width: 990px;
height: 90px;
line-height: 90p;
border-bottom: 1px solid #7b7b7b;
}
.divbannermenu {
width: 990px;
height: 30px;
padding: 0px;
}
.divcontext {
width: 947px;
height: 50px;
padding-left: 41px;
background-color: #fff;
border-top: 1px solid #7b7b7b;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
line-height:50px;
}

.divmenucontent {
width: 980px; /* - skal være 988px efter test */
padding: 0px;
margin: 0px auto;
border-right: 5px solid #7b7b7b; /* 1px efter test */
border-left: 5px solid #7b7b7b; /* 1px efter test */
background-color: #fff;
}

.divmenu {
float: left;
width: 150px;
padding: 30px;
}

.divmenus {
width: 148px;
border: 1px solid #7b7b7b;
}
.divinfo {
float: right;
width: 150px;
padding: 30px
}
.divmenuhead {
width: 138px;
height: 26px;
line-height: 26px;
font-weight: bold;
padding-left: 10px;
border-bottom: 1px solid #7b7b7b;
background-image: url('/images/menu/menubg.jpg');
}
.divmenutable {
width: 133px;
padding-left: 15px;
}
.divmenusubs {
width: 133px;
height: 20px;
padding-left: 15px;
line-height: 20px;
}
.divmenusubs1 {
width: 128px;
height: 20px;
padding-left: 20px;
line-height: 20px;
}
.divider {
width: 148px;
height: 30px;
}
.divcontent {
float: left;
width: 568px;
line-height: 18px;
padding: 30px 0px;
}
.divcontentadmin {
float: left;
width: 778px;
line-height: 18px;
padding: 30px 0px;
}
.divbottom {
width: 988px;
height: 60px;
line-height: 60px;
text-align: center;
border-top: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
background-image: url('/images/bottom/bottominfo.jpg');
}
.clearer {
clear: both;
}
.news5 {
width: 5%;
padding: 2px 0px 2px 15px;
float: right;
}
.news95 {
width: 95%;
padding: 2px 0px 2px 10px;
}
.border22 {
width: 22%;
padding: 5px 0px;
vertical-align: top;
border-top: 1px solid #7b7b7b;
}
.border78 {
width: 78%;
padding: 5px 0px;
vertical-align: top;
border-top: 1px solid #7b7b7b;
}
.tablebannermenu {
width: 990px;
height: 30px;
padding: 0px;
border-spacing: 0px;
}
.tablebannermenu td {
width: 110px;
height: 30px;
padding: 0px;
text-align: center;
background-image: url("/images/banner/out.gif");
}
.tablemenu {
width: 100%;
padding: 0px;
margin: 0px auto;
border-spacing: 0px;
border: 1px solid #7b7b7b;
}
.fullwidth {
width: 100%;
padding: 0px;
line-height: 18px;
border-spacing: 0px;
}
.vbutton {
width: 5px;
height: 10px;
border: 0px;
}
.fulllink {
width: 100%;
display: block;
}
.divbacktop {
width: 998px;
}
.topback1 {
width: 76%;
padding: 15px 0px;
/* background-color: #b80000;*/
}
.topback2 {
width: 2%;
padding: 15px 0px;
/* background-color: #b84422;*/
}
.topback3 {
width: 10%;
padding: 15px 0px;
margin-left: 3px;
/* background-color: #b86000;*/
}
.topback4 {
width: 2%;
padding: 15px 0px;
/* background-color: #b88800;*/
}
.topback5 {
width: 10%;
padding: 15px 0px;
/* background-color: #b88800;*/
}
.tothetop {
width: 9px;
height: 10px;
border: 0px;
}
.topback {
width: 988px;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
background-color: #fff;
}
a {
font-size: 11px;
color: #336699;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
.headline {
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: bold;
font-size: 12px;
}
.headlinenews {
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: #000;
font-style: normal;
font-weight: bold;
font-size: 11px;
}
.contextblack {
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: bold;
font-size: 11px;
}
.contextred {
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: red;
font-style: normal;
font-weight: bold;
font-size: 11px;
}
a.contextred {
font-size: 11px;
color: red;
font-style: normal;
font-weight: bold;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
text-decoration: none;
}
a.contextred:hover {
color: red;
text-decoration: underline;
}
.mainpic {
width: 105px;
height: 152px;
border: 0px;
}
a.bannermenu, a.bannermenu:link, a.bannermenu:visited {
display: block;
width: 110px;
height: 23px;
padding: 7px 0px 0px 0px;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
font-weight: none;
font-size: 11px;
color: #000;
text-decoration: none;
background-image: url('/images/banner/out.gif');
}
a.bannermenuleft, a.bannermenuleft:link, a.bannermenuleft:visited {
display: block;
width: 108px;
height: 23px;
padding: 7px 0px 0px 0px;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
font-weight: none;
font-size: 11px;
color: #000;
text-decoration: none;
border-left: 1px solid #7b7b7b;
border-right: 1px solid #7b7b7b;
background-image: url('/images/banner/out_left.gif');
}
a.bannermenu:hover {
width: 110px;
display: block;
font-weight: normal;
text-decoration: none;
background-image: url('/images/banner/on.jpg');
}
a.bannermenuleft:hover {
width: 108px;
display: block;
font-weight: normal;
color: #000;
text-decoration: none;
background-image: url('/images/banner/on_left.gif');
}
.activeMenu {
display: block;
width: 110px;
padding: 7px 0px 0px 0px;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
font-weight: normal;
font-size: 11px;
color: #000;
text-decoration: none;
background-image: url('/images/banner/on.jpg');
}
a.menu, a.activeMenu, a.menu:hover, a.activeMenu:hover {
width: 110px;
padding: 7px 0px 0px 0px;
text-decoration: none;
}
</style>

</head><body>

<div class="maindiv" style="border:5px solid #000;background:red;">
<div class="divbanner">
<table class="fullwidth">
<tr>
<td style="width: 380px; height: 90px; padding: 0px;">
<a href="/members/" onfocus="this.blur();" title=".........">
<img src="/images/..........gif" style="width: 380px; height: 88px; border: 0px;" alt="........."></a>
</td>
<td style="width: 580px; text-align: right; padding: 0px 30px 0px 0px;">
<a href="#" onClick="window.open('http://www.redbarnet.dk/');" onfocus="this.blur();" title=".........">
<img src="/images/..........gif" style="width: 468px; height: 60px; border: 0px;" alt="........."></a>
</td>
</tr>
</table>
</div>
<div class="divbannermenu">
<table class="tablebannermenu">
<tr>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
<td>.........</td>
</tr>
</table>
</div>
<div class="divcontext"><span class="contextblack">Context:</span>  <span class="contextred">Forsiden</span></div>
<div class="divmenucontent">
<div class="divmenu">
<div class="divmenus">
<div class="divmenuhead">.........</div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs">.........</div>
</div>
</div>
<div class="divcontent">

<table class="tablemenu">
<tr>
<td style="width: 100%; height: 26px; padding: 0px 0px 0px 10px; border-bottom: 1px solid #7b7b7b; background-image: url('/images/..........jpg');"><b>Seneste nyt: Der er endnu ikke oprettet nogen nyheder</b></td>
</tr>

<tr>
<td style="width: 100%; padding: 15px;"><b><%=FormatText(RS("introductary"))%></b></td>
</tr>

<tr>
<td style="width: 100%; padding: 0px 15px 15px 15px"> ...</td>
</tr>
<tr>
<td style="width: 100%; padding: 0px 15px 15px 15px;">
<table class="fullwidth">
<tr>
<td class="news5"><img src="/images/readthis.gif" class="vbutton" alt=""></td>
<td class="news95"><a href="/members/news/shownews.asp?infoID=" class="fulllink" onfocus="this.blur();" title="Seneste nyt: "><b>Hele nyheden</b></a></td>
</tr>
<tr>
<td class="news5"><img src="/images/readthis.gif" class="vbutton" alt=""></td>
<td class="news95"><a href="/members/news/default.asp?infoID=" class="fulllink" onfocus="this.blur();" title="Se alle nyhederne i Nyhedsarkivet"><b>Nyhedsarkivet</b></a></td>
</tr>
</table>
</td>
</tr>
</table>
<div style="height: 30px;"></div>
<table class="fullwidth">
<tr>
<td class="border22"><img src="/images/..........jpg" class="mainpic" alt="........."></td>
<td class="border78">
.........
</td>
</tr>
<tr>
<td class="border22"><img src="/images/..........jpg" class="mainpic" alt="........."></td>
<td class="border78">
.........
</td>
</tr>
<tr>
<td class="border22"><img src="/images/..........jpg" class="mainpic" alt="........."></td>
<td class="border78">
..
</td>
</tr>
</table>
</div>
<div class="divinfo">
<div class="divmenus">
<div class="divmenuhead">.........</div>
<div class="divmenutable"></div>
</div>
<div class="divider"></div>
<div class="divmenus">
<div class="divmenuhead">.........</div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs"></div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs"></div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs"></div>
<div class="divmenusubs">.........</div>
<div class="divmenusubs1">.........</div>
<div class="divmenusubs1">.........</div>
</div>
</div>

<div class="clearer"></div>

</div>
<div class="topback">
<div class="backtop">
<table class="fullwidth">
<tr>
<td class="topback1"></td>
<td class="topback2"><img src="/images/back1.gif" class="vbutton" alt="Til top"></td>
<td class="topback3"><a href="java script: history.back(-1);" onfocus="this.blur();" title="Tilbage"><b>Tilbage</b></a></td>
<td class="topback4"><img src="/images/tothetop.gif" class="tothetop" alt="Gå til toppen af siden"></td>
<td class="topback5"><a href="#" onfocus="this.blur();" title="Tilbage"><b>Til top</b></a></td>
</tr>
</table>
</div>
<div class="divbottom"> div id : divbottom </div>
</div>
<div style="width: 100%; height: 60px;"></div>
</div>

</body>

</html>

Synes godt om

steen_hansen Forsker

29. september 2006 - 01:46 #82

Det er i FF og Mozilla det mangler.

Synes godt om

steen_hansen Forsker

29. september 2006 - 01:48 #83

Ja, det er rigtigt i MSIE og Opera, men ikke i FF og Mozilla :/

Synes godt om

mclemens Nybegynder

29. september 2006 - 01:55 #84

Min IE og FF kører testen i 29/09-2006 01:46:19 ens ?
(FF 1.5.0.6 - har ikke moz ... - FF klager dog over 3 styles)

.divbanner {
width: 990px;
height: 90px;

line-height: 90p; <- px
border-bottom: 1px solid #7b7b7b;
}

a.bannermenu, a.bannermenu:link, a.bannermenu:visited {
display: block;
width: 110px;
height: 23px;
padding: 7px 0px 0px 0px;
font-family: verdana, helvetica, tahoma, sans-serif, arial;

font-weight: none; <- normal
font-size: 11px;
color: #000;
text-decoration: none;
background-image: url('/images/banner/out.gif');
}

a.bannermenuleft, a.bannermenuleft:link, a.bannermenuleft:visited {
display: block;
width: 108px;
height: 23px;
padding: 7px 0px 0px 0px;
font-family: verdana, helvetica, tahoma, sans-serif, arial;

font-weight: none; <- normal
font-size: 11px;
color: #000;
text-decoration: none;
border-left: 1px solid #7b7b7b;
border-right: 1px solid #7b7b7b;
background-image: url('/images/banner/out_left.gif');
}

Synes godt om

mclemens Nybegynder

29. september 2006 - 01:57 #85

Resultatet jeg får når jeg tester test filen er:
( ww w.dkif.com/users/clemens/tmp/images/test.png )

Synes godt om

steen_hansen Forsker

29. september 2006 - 02:03 #86

Ok, det var heller ikke helt uvæsentligt at få rettet de fejl, tak :o)

Jeg har

FF v1.07

Mozilla 1.7.8, Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511

Jeg forstår det simpelthen ikke, men nu er det gået hen og blevet afsindigt sent igen :o)

Hvis det virker hos dig, må det være noget hos mig. Jeg vil prøve at kigge videre på det i morgen/senere i dag :o)

Foreløbigt 1000 tak igen-igen-igen-igen.... :o)

Synes godt om

steen_hansen Forsker

29. september 2006 - 02:06 #87

Ok, jeg kan se, at den menu til højre er "skubbet ned på næste linie. Det er dælme ikke altid lige nemt at valide for skønheden :D

Jeg må prøve at få styr på det, vi snakkes ved :o)

Synes godt om

mclemens Nybegynder

29. september 2006 - 02:09 #88

Så har du måske sat den clear div ind en tand for højt oppe...
(den skal først ind lige under afslutningen af højre menu)
Nat, nat snakkes ved :)

Synes godt om

mclemens Nybegynder

29. september 2006 - 02:10 #89

Hov, det var den på mit eksempel ... lol
- sorry ... jeg sover vist lidt :P

Synes godt om

mclemens Nybegynder

29. september 2006 - 02:12 #90

Hmm, hvis jeg rettede borderen til 1px og bredden
til 988px så hoppede den på plads igen ...

Synes godt om

mclemens Nybegynder

29. september 2006 - 02:15 #91

( ww w.dkif.com/users/clemens/tmp/images/test.png )
- zoom evt. ind på kanten i et maleprogram ...

Synes godt om

steen_hansen Forsker

29. september 2006 - 09:41 #92

Jeg kan ikke se hvad der er galt med kanten, den er på 5px?

Der er lige en skævhed mere: I MSIE vises det nedenstående korrekt. Der er 5px luft for oven og for neden. Men i Opera, FF og NS/Mozilla er der 10px?

Det er de eneste 2 ting, der mangler. Den hvide baggrund i <divmenucontent></div> og de 5px, der er for meget i Opera, FF og NS/Mozilla. Kan jeg få dem på plads, har jeg en noget nær perfekt side, og den vil så danne skabelon for alle andre sider. Håber du har mod på at hjælpe med at få dem på plads :o)

Synes godt om

steen_hansen Forsker

29. september 2006 - 09:44 #93

[Der er lige en skævhed mere: I MSIE vises det nedenstående korrekt. Der er 5px luft for oven og for neden. Men i Opera, FF og NS/Mozilla er der 10px?]

Og du får lige hvor det er, det går galt :oD

CSS:

.border22 {
width: 22%;
padding: 5px 0px;
vertical-align: top;
border-top: 1px solid #7b7b7b;
}
.border78 {
width: 78%;
padding: 5px 0px;
vertical-align: top;
border-top: 1px solid #7b7b7b;
}

HTML:

<table class="fullwidth">
<tr>
<td class="border22"><img src="/images/.........jpg" class="mainpic" alt="........"></td>
<td class="border78">
..............................
</td>
</tr>
<tr>
<td class="border22"><img src="/images/.........jpg" class="mainpic" alt="........"></td>
<td class="border78">
..............................
</td>
</tr>
</table>

Synes godt om

steen_hansen Forsker

29. september 2006 - 11:00 #94

Ommer:

[Der er lige en skævhed mere: I MSIE vises det nedenstående korrekt. Der er 5px luft for oven og for neden. Men i Opera, FF og NS/Mozilla er der 10px?]

er lig med

[Der er lige en skævhed mere: I MSIE vises det nedenstående korrekt. Der er 5px luft for oven og for neden. Men i Opera, FF og NS/Mozilla er der 10px for neden?]

Synes godt om

mclemens Nybegynder

29. september 2006 - 11:09 #95

[ Jeg kan ikke se hvad der er galt med kanten, den er på 5px? ]
.divmenucontent {
width: 988px;
padding: 0px;
margin: 0px auto;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
background-color: #fff;
}

Var det den du mente m.h.t. kanten ?

Kigger på 11:00:33 ...

Synes godt om

steen_hansen Forsker

29. september 2006 - 11:12 #96

Jeg misforstod dit indlæg, skidt med kanten :o)

Synes godt om

mclemens Nybegynder

29. september 2006 - 11:51 #97

Synes ikke rigtig at jeg kan se fejlen i IE eller FF ...
(ved ikke om det er fordi det er en nyere FF jeg har måske)

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

html,body{margin:0px;padding:0px;}

.fullwidth {
width: 100%;
padding: 0px;
line-height: 18px;
border-spacing: 0px;
}

.border22 {
width: 22%;
padding: 5px 0px;
vertical-align: top;
border-top: 1px solid #7b7b7b;
}

.border78 {
width: 78%;
padding: 5px 0px;
vertical-align: top;
border-top: 1px solid #7b7b7b;
}

</style>



</head><body>

<div style="background:#00f;">a</div>

<table class="fullwidth">
<tr>
<td class="border22"><img src="http://www.eksperten.dk/img/elogo.png" class="mainpic" alt="........"></td>
<td class="border78">
..............................
</td>
</tr>
<tr>
<td class="border22"><img src="http://www.eksperten.dk/img/elogo.png" class="mainpic" alt="........"></td>
<td class="border78">
..............................
</td>
</tr>
</table>

<div style="background:#00f;">a</div>

</body></html>

Synes godt om

steen_hansen Forsker

29. september 2006 - 20:08 #98

Jeg satte hvid baggrund på divmain. Så er den hvide farve jo også i divmenucontent. Men så mangler border-right/left i divmenucontent. Jeg er blank, håber du kommer på et eller andet genialt :o)

Synes godt om

steen_hansen Forsker

29. september 2006 - 20:21 #99

Hvid er ikke en farve, men du ved hvad jeg mener :o)

Synes godt om

steen_hansen Forsker

29. september 2006 - 20:26 #100

Men 29/09-2006 20:08:27 er jo ikke en løsning på problemet. Selvom jeg sætter baggrunden til hvid på maindiv, forklarer det jo ikke hvorfor den ikke er på divmenucontent :/

Synes godt om

mclemens Nybegynder

29. september 2006 - 20:30 #101

Jeg ved ikke helt med den border ... der er en border rundt om divmenucontent i min test ... ligesom på det screendump jeg lagde ... du skulle vel ikke mene at der manglede border om divbanner og divbannermenu istedet ?

[ Selvom jeg sætter baggrunden til hvid på maindiv, forklarer det jo ikke hvorfor den ikke er på divmenucontent :/ ] Hvis vi nu sætter en baggrund på maindiv der skal skinne igennem ved divmenucontent - skal den div hvor baggrunden skal skinne igennem ikke have en baggrundsfarve defineret ... ?

Synes godt om

mclemens Nybegynder

29. september 2006 - 20:34 #102

Resultatet af det du skriver viser sig sådan her i min test:
ww w.dkif.com/users/clemens/tmp/images/test2.png

Synes godt om

mclemens Nybegynder

29. september 2006 - 20:35 #103

(ingen border om divbanner og divbannermenu og ingen om bund-div'en heller ...)

Synes godt om

steen_hansen Forsker

29. september 2006 - 20:37 #104

Nej, det er lidt omvendt, hos mig er der ingen border rundt om divmenucontent, og det er baggrundsfarven på html, body man kan se. Der er ingen problemer med divbanner og divbannermenu. Mystisk?

Synes godt om

mclemens Nybegynder

29. september 2006 - 20:48 #105

Test filen kan ses her: ww w.dkif.com/users/clemens/tmp/images/test.html
... Men hvad årsagen er til at det vises på en anden
måde hos dig end hos mig tør jeg ikke sige :/

Synes godt om

steen_hansen Forsker

29. september 2006 - 20:52 #106

Mystisk og ærgerligt, for den border er (selvfølgelig en del af designet. Jeg tror jeg piller alt fra hinanden og starter for fra bunden igen-igen-igen-igen.....

Jeg er ikke hjemme, og jeg må smutte. Vi snakkes ved :o)

- og tak for din indsats, den er værdsat :o)

Synes godt om

steen_hansen Forsker

29. september 2006 - 20:54 #107

I forlængelse af divbannermenu (på hver side) har jeg noget baggrundsgrafik. Og inde i divbannermenu har jeg 9 links (grafik), som også udgør en del af borderen hele vejen ned. Vi snakkes :o)

Synes godt om

steen_hansen Forsker

30. september 2006 - 00:18 #108

Jeg har lige downloadet og installeret FF V1.5.0.7, og det er nøjagtigt det samme. Jeg må hellere starte fra scratch .... selvom jeg ikke er meget for det :o/

Synes godt om

mclemens Nybegynder

30. september 2006 - 00:52 #109

Du kan evt. kaste et link til det ... Det er måske en special
opsætning der skal laves eller der skal måske bare justeres på width
knapper m.v. ... Som du ser på de test's jeg kan lave p.t. udfra css
og markup'en så får jeg ikke nogle fejl - en visuel fejl
som jeg ikke kan se er svær at rette ...

- Alternativt kan du prøve et spørgmål med din markup og css
og se om en anden kan gennemskue hvad der evt. går galt ...
(jeg kan ikke lige gennemskue fejlen udfra nuværende data)

Nat, nat

Synes godt om

steen_hansen Forsker

30. september 2006 - 01:05 #110

nat, vi snakkes :o)

Synes godt om

steen_hansen Forsker

30. september 2006 - 21:39 #111

Mej mclemens. Jeg prøver én gang til.

Grundprincipperne for at få den ønskede opbygning bør se således ud, ikke sandt?

<div class="upperthird">
<div class="divbanner"></div>
<div class="divbannermenu"></div>
<div class="divcontext"></div>
</div>
<div class="middlethird">
<div class="divmenu"></div>
<div class="divcontent"></div>
<div class="divsummary"></div>
</div>
<div class="lowerthird">
<div class="divbackup></div>
<div class="divbottom"></div>
</div>

Synes godt om

steen_hansen Forsker

30. september 2006 - 21:53 #112

Hvis "underdiverne" i f.eks. upperthird hver især udgør den samme længe, som er angivet i upperthird, så vil "underdiverne" placeres under hinanden, og hvis de 3 "underdiver" sammenlagt bliver lige så lang som "upperthird", så vil de blive placeret ved siden af hinanden?

Eksempel 1:

upperthird = 990px;
div 1 = 990px;
div 2 = 990px;
div 3 = 990px;
upperthird slut

Resultat = 3 divs neden under hinanden på hver især 990px; i længden

Eksempel 2:

middlethird = 990px;
div 1 = 220px;
div 2 = 550px;
div 3 = 220px;
middlethird slut

Resultat = 3 divs ved siden af hinanden, som tilsammen bliver den samme længe, som middlethird er.

Har jeg forstået det korrekt?

Synes godt om

steen_hansen Forsker

30. september 2006 - 22:23 #113

Jeg sludrer, det var jo hhv. float: left; float: left; float right;, sorry :o)

Synes godt om

mclemens Nybegynder

30. september 2006 - 22:55 #114

[ Har jeg forstået det korrekt? ]
Ja, der er ingen fejl i det du skriver.
- Sådan ville jeg også selv bygge det op :)

Synes godt om

steen_hansen Forsker

30. september 2006 - 23:23 #115

Ok, men der skal lige float på middlethird?

middlethird = 990px;
div 1 = width: 220px; float: left;
div 2 = width: 550px; float: left;
div 3 = width: 220px; float: right;
middlethird slut

Sådan?

Synes godt om

mclemens Nybegynder

01. oktober 2006 - 00:27 #116

middlethird = 990px;
div 1 = width: 220px; float: left;
div 2 = width: 550px; float: left;
div 3 = width: 220px; float: right;
div 4 = clear: both;
middlethird slut

Synes godt om

steen_hansen Forsker

08. oktober 2006 - 11:29 #117

mclemens, dette virker fint i MSIE, men ikke i FF, Mozilla og FF. Jeg har nu de seneste versioner i alle browsere, pånær MSIE. Her kører jeg stadig med version 6.0.2900.xxxxxxx SP2. Nogen gode bud? Det BURDE virke i de andre browsere også, men ét er teori .... :o)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<META HTTP-EQUIV="Expires" CONTENT="Fri, Jun 12 1981 08:20:00 GMT">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="content-type" content="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" content="no">
<META HTTP-EQUIV="Content-language" content="dan">
<META NAME="robots" content="all">
<link rel="stylesheet" type="text/css" href="/includes/............css">
<title>Forside</title>
</head>

<body>

<div class="upperthird">
<div class="divbanner">
<div class="divlogo">
<a href="/.........../" class="blocklink" title="...........">
<img src="/images/general/logo.gif" class="logo" alt="...........">
</a>
</div>
<div class="divbanneradd">
<a href="#" onClick="window.open('http://.........../');" onfocus="this.blur();" title="...........">
<img src="/............gif" class="banneradd" alt="...........">
</a>
</div>
<div class="clearer"></div>
</div>
<div class="divbannermenu">
<div class="divbannermenuwidthleft"><a href="/members/report/" onfocus="this.blur();" class="bannermenuleft" title="...........">...........</a></div>
<div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu" title="...........">...........</a></div>
<div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu" title="...........">...........</a></div>
<div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu" title="...........">...........</a></div>
<div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu" title="...........">...........</a></div>
<div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu" title="...........">...........</a></div>
<div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu" title="...........">...........</a></div>
<div class="divbannermenuwidth"><a href="#" onfocus="this.blur();" class="bannermenu" title="...........">...........</a></div>
<div class="divbannermenuwidthright"><a href="#" onfocus="this.blur();" class="bannermenu" title="...........">...........</a></div>
<div class="clearer"></div>
</div>
<div class="divcontext">Context:</div>
</div>
<div class="middlethird">
<div class="divmenu">
<div class="divmenuborder">
<div class="divmenuhead">...........</div>
<div class="divmenucontent">...........</div>
<div class="divmenucontent">...........</div>
<div class="divmenubottom">...........</div>
</div>
</div>
<div class="divcontent">
<div class="divcontentnewsheadline">Seneste nyt: ...........</div>

<div class="divcontentnewsintro">...........</div>

<div class="divcontentnews">........... ...</div>
</div>
<div class="tdsummary">
<div class="divmenuborder">
<div class="divmenuhead">...........</div>
</div>
</div>
<div class="clearer"></div>
</div>

</body>

</html>

CSS:

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #d7d7d7 url('/images/general/bodybg.gif') repeat-x;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
}

/****************************************/
/* UPPERTHIRD */
/****************************************/
.upperthird {
width: 990px;
margin: 0px auto;
}
.divbanner {
width: 990px;
height: 90px;
border-bottom: 1px solid #7b7b7b;
}
.divlogo {
width: 380px;
float: left;
}
.logo {
width: 380px;
height: 88px;
border: 0px;
}
.divbanneradd {
width: 580px;
height: 75px;
line-height: 90px;
float: right;
padding: 15px 30px 0px 0px;
}
.banneradd {
width: 468px;
height: 60px;
border: 0px;
float: right;
}
.divbannermenu {
width: 990px;
height: 30px;
}
.divbannermenuwidthleft {
width: 108px;
height: 30px;
float: left;
text-align: center;
line-height: 30px;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}
.divbannermenuwidthright {
width: 110px;
height: 30px;
float: right;
line-height: 30px;
text-align: center;
}
.divbannermenuwidth {
width: 110px;
height: 30px;
float: left;
text-align: center;
line-height: 30px;
}
a.bannermenu, a.bannermenu:link, a.bannermenu:visited {
display: block;
width: 110px;
height: 30px;
color: #000;
text-decoration: none;
background-image: url('/images/banner/out.gif');
}
a.bannermenuleft, a.bannermenuleft:link, a.bannermenuleft:visited {
display: block;
width: 108px;
height: 30px;
text-decoration: none;
color: #000;
background-image: url('/images/banner/out_left.gif');
}
a.bannermenu:hover {
width: 110px;
height: 30px;
display: block;
text-decoration: none;
color: #000;
background-image: url('/images/banner/on.jpg');
}
a.bannermenuleft:hover {
width: 108px;
height: 30px;
display: block;
color: #000;
text-decoration: none;
background-image: url('/images/banner/on_left.gif');
}
.activeMenu {
display: block;
width: 110px;
height: 30px;
color: #000;
text-decoration: none;
background-image: url('/images/banner/on.jpg');
}
a.menu, a.activeMenu, a.menu:hover, a.activeMenu:hover {
width: 110px;
text-decoration: none;
}
.activeMenuLeft {
display: block;
width: 108px;
height: 30px;
color: #000;
text-decoration: none;
background-image: url('/images/banner/on.jpg');
}
a.menuLeft, a.activeMenuLeft, a.menuLeft:hover, a.activeMenuLeft:hover {
width: 108px;
text-decoration: none;
}
.divcontext {
width: 948px;
height: 50px;
line-height: 50px;
padding-left: 40px;
color: black;
font-weight: bold;
background-color: #fff;
border-top: 1px solid #7b7b7b;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}
/****************************************/

/****************************************/
/* MIDDLETHIRD */
/****************************************/
.middlethird {
/* width: 988px;*/
width: 928px;
padding: 0px 30px 30px 30px;
margin: 0px auto;
background-color: #fff;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}
/****************************************/
/* MENU */
/****************************************/
.divmenu {
width: 150px;
float: left;
vertical-align: top;
/* padding: 0px 30px 30px 30px;*/
padding-right: 30px;
}
.divmenuborder {
width: 148px;
border: 1px solid #7b7b7b;
}
.divmenuhead {
width: 138px;
height: 26px;
padding-left: 10px;
font-weight: bold;
line-height: 26px;
background-image: url('/images/menu/menubg.jpg');
border-bottom: 1px solid #7b7b7b;
}
.divmenucontent {
width: 133px;
height: 22px;
padding: 5px 0px 0px 15px;
vertical-align: top;
background: #e0e0e0 url('/images/menu/divider_horizontal.gif') repeat-x bottom center;
}
.divmenubottom {
width: 133px;
height: 20px;
padding: 5px 0px 0px 15px;
vertical-align: top;
background-color: #e0e0e0;
}
/****************************************/
/* CONTENT */
/****************************************/
.divcontent {
float: left;
width: 570px;
padding: 0px;
vertical-align: top;
}
.divcontent {
width: 568px;
height: 26px;
}
.divcontentnewsheadline {
width: 556px;
height: 26px;
padding-left: 10px;
font-weight: bold;
line-height: 26px;
border: 1px solid #7b7b7b;
background-image: url('/images/menu/menubg.jpg');
}
.divcontentnewsintro {
width: 536px;
padding: 15px 15px 0px 15px;
font-weight: bold;
line-height: 18px;
border-right: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}
.divcontentnews {
width: 536px;
padding: 15px;
line-height: 18px;
border-right: 1px solid #7b7b7b;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #7b7b7b;
}
/****************************************/
/* INFOCOLUMN */
/****************************************/
.tdsummary {
width: 150px;
float: right;
vertical-align: top;
/* padding: 0px 30px 30px 30px;*/
padding-left: 30px;
}
/****************************************/

.clearer {
clear: both;
}

Synes godt om

steen_hansen Forsker

08. oktober 2006 - 18:38 #118

Hej mclemens. Hvis du har tid/lyst, har jeg oprettet et nyt spørgsmål på http://www.eksperten.dk/spm/737315 :o)

Synes godt om

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

27/0714:34	Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
27/0713:58	Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
25/0713:55	Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
24/0711:08	Forskel mellem klokkeslet start aften slut næste morgen Af krasmussen i Excel
23/0715:10	WINDOWS KOMPABILITET Af snestrup2000 i Windows

Notifikationer

<tr> i tabeller, hvad bruger man med <div>

Log ind eller opret profil

Hov!