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

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

rtfm Nybegynder

24. maj 2006 - 19:36 Der er 9 kommentarer og
1 løsning

Rod med divs

Jeg har lavet nogle hjemmesider for Venstres Ungdom, som hovedsageligt er opbygget af divs. Problemet er bare, at selvom jeg troede jeg havde fået løst problemet, så er der opstået noget rod med mine divs. Jeg kan bare ikke finde fejlen, som næsten kun kan være i stylesheet'et. Jeg har simpelthen stirret mig blind på koden. Derfor håber jeg der er nogen, der kan hjælpe med at finde fejlen?!

Lige pt. ser siden fin nok ud i IE, men det er jo bare ikke nok. Der er lidt for mange divs inde i hinanden, men lige nu skal det bare op at køre, så må jeg tynde ud i dem senere.

Siden ligger på følgende adresse: http://vu-storkbh.dk

På forhånd tak for hjælpen!

Synes godt om

rtfm Nybegynder

24. maj 2006 - 19:37 #1

Prøv at åbne siden i begge browsere, så vil I forstå, hvad jeg mener:-/

Synes godt om

mclemens Nybegynder

25. maj 2006 - 01:34 #2

noget i denne stil???
(lagt som svar ... just in case)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da"><head>

<meta http-equiv="content-type" content="text/html; charset=windows-1252"><title>Venstres Ungdom i Storkøbenhavn</title>

<style type="text/css" media="screen">
/*generelt*/
body{
font: xx-small normal tahoma,verdana,sans-serif;
background-color: #cad8df;
line-height: 1.6em;
text-align: center;
/* voice-family: "\"}\"";
voice-family: inherit;*/
font: 0.7em normal tahoma,verdana,sans-serif;
line-height: 1.6em;
}

img{
border: 0;
}

.pdiv{
margin: 0px;
}

html>body{
font: 0.7em normal tahoma,verdana,sans-serif;
line-height: 1.6em;
}

/*logo*/
#logo{
height: 104px;
width: 698px;
background: url(http://www.vu-storkbh.dk/img/logo.jpg) top center no-repeat;
cursor: pointer;
}

#logo h1{
float: left;
height: 50px;
color: #fff;
font-size: 20px;
font-weight: bold;
margin: 35px;
}

/*content*/
#content{

width: 538px;
float: left;
}

#contentboxes{
width: 500px;
float: left;
padding-left: 10px;
padding-right: 15px;
}

#contentboxes h1{
margin: 0;
color: #226080;
font-size: 18px;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 4px;
}

#contentboxes h2{
margin: 0;
color: #226080;
font-size: 16px;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 4px;
}

#contentboxes h3{
margin: 0;
color: #226080;
font-size: 14px;
padding-bottom: 5px;
padding-left: 4px;
}

br{
margin: 0;
padding: 0;
}

.contentbox img{
float: left;
width: 125px;
margin: 3px;
margin-left: 0;
border: 1px solid #aaa;
}

.contentbox img.large{
width: 187px;
float: right;
margin-left: 5px;
margin-bottom: 5px;
}

.contentbox p{
margin: 0;
padding-left: 4px;
margin-bottom: 5px;
}

.contentbox_border{
border: 1px solid #aaa;
}

.writtenby{
clear: both;
color: #777;
padding-left: 4px;
text-indent: 14px;
background: url(http://www.vu-storkbh.dk/img/icon_writtenby.gif) no-repeat;
}

.contentbox h2{
margin: 0;
color: #226080;
font-size: 16px;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 4px;
}

.contentbox h2 a{
color: #226080;
text-decoration: none;
}

/*static*/
#content a, #overview a{
text-decoration: none;
color: #226080;
font-weight: bold;
}
#content a:hover,#overview a:hover{
text-decoration: underline;
}

/*footer*/
#footer a{
font-weight: bold;
color: #226080;
text-decoration: none;
}

#footer img.border{
border-bottom: 1px solid #aaa;
margin-bottom: 5px;
}

/*Border ting*/

#footer{
font: 9px tahoma,sans-serif;
text-align: center;
background: url(http://www.vu-storkbh.dk/img/corners_bottom.png) bottom center no-repeat #fff;
width: 718px;
height: inherit;
margin :auto;
padding-bottom: 10px;
padding-top: 25px;
}

#footer_line{
background-color: #aaa;
}

#leftmenu{
background-color: #3c789a;
width: 160px;
height: 355px;
float: left;
font-size :12px;
line-height: 1em;
text-align: left;
}

#leftmenu_links{
background: url(http://www.vu-storkbh.dk/img/leftmenu_fade.jpg) bottom center no-repeat #19506f;
width: 160;
height: 300px;
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
}

#leftmenu_links p{
/*float: left;*/
width: 160;
text-align: left;
}

#leftmenu_top{
background: url(http://www.vu-storkbh.dk/img/leftmenu_top.jpg) bottom center no-repeat #19506f;
width: 160px;
height: 25px;
}

#leftmenu_bottom{
background: url(http://www.vu-storkbh.dk/img/leftmenu_bottom.jpg) bottom center no-repeat #3c789a;
width: 160px;
height: 30px;
}

#leftmenu a{
padding-left: 8px;
color: #fff;
text-decoration: none;
text-align: left;
}
#leftmenu a{
display: block;
text-align: left;
font-weight: bold;
line-height: 21px;
padding-left: 5px;
padding-right: 5px;
height: 21px;
/* voice-family: "\"}\"";
voice-family: inherit;*/
}

#leftmenu a:hover{
text-decoration: underline;
height: 21px;
/*float: left;*/
text-align: left;
font-weight: bold;
line-height: 21px;
padding-left: 5px;
padding-right: 5px;
/* voice-family: "\"}\"";
voice-family: inherit;*/
}

.errormsg h2{
margin: 0;
color: red;
font-size: 16px;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 4px;
}

.commentgrey{
float: left;
color: #777;
}

.paging{
align: center;
margin: 10px;
text-align: center;
width: 450px;
}

/* commitee */
.commities{
padding: 3px;
float: left;
width: 450px;
margin: 3px;
margin-left: 0;
}

.commitee img{
float: center;
width: 125px;
border-bottom: 1px solid #aaa;
}

.commiteerow{
float: left;
}

.commiteebox{
padding: 3px;
float: left;
margin: 5px;
border: 1px solid #aaa;
}

.commiteebox img{
height: 130px;
width: 125px;
}

.commitee_reorder{
float: left;
width: 14px;
height: 14px;
}

.commitee_list{
float: left;
width: 420px;
height: 14px;
}

/* minutes */
.minutes{
padding: 3px;
float: left;
width: 450px;
margin: 3px;
margin-left: 0;
}

.minutebox img{
float: left;
width: 30px;
margin: 3px;
margin-left: 0;
}

.minutebox{
padding: 3px;
float: left;
width: 450px;
margin: 3px;
border: 1px solid #aaa;
}

/* links */
.links{
padding: 3px;
float: left;
width: 450px;
margin: 3px;
}

.linkcat{
margin: 0;
width: 450px;
color: #226080;
font-size: 14px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 4px;
border-bottom: 1px solid #aaa;
}

.linkbox{
padding: 3px;
float: left;
width: 440px;
margin-left: 10px;
margin-bottom: 6px;
}

.linkbox_border{
padding: 3px;
float: left;
width: 450px;
margin: 3px;
margin-left: 0;
border: 1px solid #aaa;
}

/* gallery */
.gallery{
padding: 3px;
float: left;
width: 450px;
margin: 3px;
}

.galleryimgages{
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 3px;
}

.gallery_hori img{
display: block;
height: 300px;
width: 400px;
margin-bottom: 10px;
}

.gallery_vert img{
display: block;
height: 400px;
width: 300px;
margin-bottom: 10px;
}

.gallery_hori p{
margin-left: auto;
margin-right: auto;
text-align: center;
display: block;
height: 300px;
width: 400px;
}

.gallery_vert p{
margin-left: auto;
margin-right: auto;
text-align: center;
display: block;
height: 400px;
width: 300px;
}

.gallerybox{
padding: 3px;
float: left;
width: 450px;
margin: 3px;
margin-left: 0;
border: 1px solid #aaa;
}

.gallery_foldererror, .gallery_foldererror a{
text-decoration: line-through;
color: #226080;
}

/* calendar */
.calendar{
padding: 3px;
float: left;
width: 450px;
margin: 3px;
}

.calendardescr{
float: left;
width: 440px;
padding-left: 5px;
}

.calendar h2{
margin: 0;
color: #226080;
font-size: 16px;
padding-top: 10px;
padding-bottom: 5px;
}

.calendarbox{
padding: 3px;
width: 450px;
margin: 3px;
margin-left: 0;
border: 1px solid #aaa;
}

.calendarbox h3{
margin: 0;
color: #226080;
font-size: 14px;
padding-top: 5px;
padding-bottom: 5px;
}

.calendarbox h4{
margin: 0;
color: #226080;
font-size: 12px;
padding-top: 3px;
padding-bottom: 3px;
}

.calendar_upcomming{
margin: 0;
color: #226080;
font-size: 12px;
}

.calendarprev{
float: left;
text-align: left;
width: 195px;
margin: 10px;
}

.calendarnext{
float: left;
text-align: right;
width: 195px;
margin: 10px;
}

/* news */
.newsbox{
margin: 0;
padding-left: 4px;
margin-bottom: 5px;
}

.newsbox img{
padding: 3px;
float: right;
width: 125px;
height: 130px;
margin: 3px;
margin-right: 0;
border: 1px solid #aaa;
}

.newsbox h2{
margin: 0;
color: #226080;
font-size: 16px;
padding-top: 10px;
padding-bottom: 5px;
}

.news{
padding: 3px;
float: left;
width: 450px;
margin: 3px;
}

.news_readmore{
float: left;
text-align: right;
/*width: 450px;
margin: 10px;*/
}

.news_displayall{
float: left;
text-align: right;
width: 450px;
margin: 10px;
}

/* admin */
.admin_box{
padding: 3px;
float: left;
width: 450px;
margin: 3px;
margin-top: 100px;
border: 1px solid #aaa;
}

.admin_login{
padding: 3px;
float: left;
width: 450px;
margin: 3px;
}

.admin_box2{
padding: 3px;
float: left;
width: 440px;
margin: 3px;
border: 1px solid #aaa;
}

.admin_formheader{
margin: 0;
width: 450px;
border-bottom: 1px solid #aaa;
}

.admin_box h2, .admin_login h2{
margin: 0;
color: #226080;
font-size: 16px;
padding-top: 10px;
padding-bottom: 5px;
}

.admin_box h3, .admin_login h3{
margin: 0;
color: #226080;
font-size: 14px;
padding-top: 10px;
padding-bottom: 5px;
font-weight: bold;
}

.admin_box h4, .admin_login h4{
margin: 0;
color: #226080;
font-size: 12px;
padding-top: 10px;
padding-bottom: 5px;
text-decoration: underline;
}

.admin_form{
text-align: left;
padding: 3px;
float: left;
margin-left: 20px;
}

.admin_success{
color: green;
font-style: italic;
}

.admin_error{
color: red;
font-style: italic;
}

.admin_logout{
border-top: 1px solid #aaa;
}

.showhide_text{
text-decoration: underline;
}

.div_show{
display: block;
}

.div_hide{
display: none;
}

#holder{
width: 698px;
text-align: left;
margin: 0px auto;
background: #fff;
}

#border{
width: 718px;
margin: 0px auto;
background: url(http://www.vu-storkbh.dk/img/corners_top.png) top center no-repeat;
background-color: #fff;
position: relative;
padding-top:10px;
}

.clearit{height:0px;font-size:0px;line-height:0px;clear:both;}

</style>
<script type="text/javascript">
function toggleDisplay(ObjId) {
if (document.getElementById(ObjId).className == "div_show") {
document.getElementById(ObjId).className = "div_hide";
} else {
document.getElementById(ObjId).className = "div_show";
}
}

function confirmbox(text, loca) {
if (confirm(text)) {
window.location.search = loca;
}
}

// i stedet for "target"-tags anvendes "rel"-tags i links
// funktionen herunder anvendes til at få rel="external" til at åbne linket i et nyt vindue
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") {
var href_old = anchor.getAttribute("href");
var linktext_old = anchor.innerHTML;
anchor.target = "_blank";
anchor.title = "Dette link åbner i et nyt vindue!\nLink: "+href_old+"";
anchor.innerHTML = linktext_old;
}
}
}
window.onload = externalLinks; </script></head><body>
<div id="border">
<div id="holder">

<div id="logo" onclick="location.href='http://www.vu-storkbh.dk'">

<h1 style="position:absolute;left:50px;top:50px;padding:0px;margin:0px;">Venstres Ungdom i Storkøbenhavn</h1>

</div>

<div class="clearit"> </div>

<div id="leftmenu">

<div id="leftmenu_top"></div>
<div id="leftmenu_links">
<a href="http://www.vu-storkbh.dk/?pg=front">Forsiden</a>
<a href="http://www.vu-storkbh.dk/?pg=commitee">Forretningsudvalg</a>

<a href="http://www.vu-storkbh.dk/?pg=calendar">Aktivitetskalender</a>
<a href="http://www.vu-storkbh.dk/?pg=minutes">Mødereferater</a>
<a href="http://www.vu-storkbh.dk/?pg=gallery">Billedgalleri</a>
<a href="http://www.vu-storkbh.dk/?pg=links">Links</a>
<a href="http://www.vu-storkbh.dk/?pg=about">Om</a>
<a title="Dette link åbner i et nyt vindue!
Link: https://secure.vu.dk/webshop/index.php?category=30" target="_blank" href="https://secure.vu.dk/webshop/index.php?category=30" rel="external">Bliv medlem</a>

</div>
<div id="leftmenu_bottom"></div>
</div>
<div id="content">
<div id="contentboxes">


<h1>Venstres Ungdom i Storkøbenhavn</h1>
<div class="news">
<div class="contentbox">

<h2><a href="http://vu-storkbh.dk/?pg=news&nid=1">Nyhed</a></h2>
<p>
<a href="http://vu-storkbh.dk/?pg=news&nid=1"><img src="123_files/99b44350b89ce3df.jpg" alt=""></a>
Dette er et eksempel på en nyhed. <br>
Tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst... <a href="http://vu-storkbh.dk/?pg=news&nid=1">Læs mere</a></p>
<p class="writtenby">Skrevet af <strong><a href="mailto:email@dom%C3%A6ne.dk">Forfatternavn</a></strong> den 01/01 2006<br><br></p>
</div>
<div class="news_displayall"><a href="http://vu-storkbh.dk/?pg=front&nview=all">Vis alle nyheder (1)</a></div><br><br>

<h3>Næste 3 kalenderaktiviteter</h3><div class="calendarbox">
<div class="calendardescr">Der er ingen kommende kalenderbemærkninger!
</div></div></div>


</div>
</div>
</div>

<div class="clearit"> </div>

<div id="footer">
<hr class="footer_line" size="1">
Siden er testet i Microsoft Internet Explorer og Mozilla Firefox<br>

<a href="http://www.vu-storkbh.dk/">http://www.vu-storkbh.dk</a> - Copyright © <a href="mailto:kontakt@jjunker.dk">Jeppe Junker</a> 2006 - <a title="Dette link åbner i et nyt vindue!
Link: http://jjunker.dk" target="_blank" href="http://jjunker.dk/" rel="external">jjunker.dk</a> </div>
</div>

</body></html>

Synes godt om

mclemens Nybegynder

25. maj 2006 - 01:36 #3

P.s.: Denne skal nok lige rettes...
<img src="123_files/99b44350b89ce3df.jpg" alt="">

Synes godt om

rtfm Nybegynder

25. maj 2006 - 10:59 #4

Jamen det virker jo! Det var godt nok lækkert.
Jeg har bare kigget så længe på det. Kan du ikke lige forklare mig det med .clearit? Hvad er dens funktion, og hvad gør clear:both?
Og en sidste ting: efter ændringen kører den blå kant ikke hele vejen rundt om "Næste 3 kalenderaktiviteter". Kan du forklare mig hvorfor?

Jeg har ikke opdateret vu-storkbh.dk endnu, men tester det på http://deve.jjunker.dk/association/

Synes godt om

mclemens Nybegynder

25. maj 2006 - 11:11 #5

[ Jeg har bare kigget så længe på det. Kan du ikke lige forklare mig det med .clearit? Hvad er dens funktion, og hvad gør clear:both? ]
... Den sørger for at efterfølgende objecter skal kastes op som man har angivet d.v.s. at hvis man f.eks. har en width 100% div logo, efterfulgt af en width 150px menu vil menuen normalt ryge ned på linjen nedenunder(hvorfor den ikke gjorde det i ff her kan jeg ikke lige gennemskue) hvis man så har problemer med at ens div f.eks. ikke vil rykke helt til venstre kan man bruge clear:left; (hvis der kun skal være ryddet til venstre for div'en / right / eller both ) ... jeg bruger normalt both for en sikkerhedsskyld... Grunden til at der er en clear mere lige før footeren er at footeren ellers kunne være samme sted som indholdet og den skulle jo fylde det hele i bredden derfor en clear:both; mere...

- Fjernede også nogle height defineringer af din sides størrelse ... regner med at siden skulle kunne være længere eller kortere - i det tilfælde er det ikke godt at definere height på et object.

- Fjernede også padding og margin på <h1> antal px af de to er browserne lidt uenige om ... jeg placerede den så istedet med absolute :)

[ Og en sidste ting: efter ændringen kører den blå kant ikke hele vejen rundt om "Næste 3 kalenderaktiviteter". Kan du forklare mig hvorfor? ]
- kigger lige ...

Synes godt om

mclemens Nybegynder

25. maj 2006 - 11:19 #6

kan ikke se fejlen... men en anden ting: [ Almindelig HTML-formatering accepteres.
Dvs. <b>TEKST</b> for fed, <i>TEKST</i> for kursiv, og <u>TEKST</u> for understreget. ] ... anbefaler varmt en <b class="uline">Understreget</b> istedet for din <u>Understreget</u> ... evt. bare kør en replace på <u> når du modtager den og så i din css have: b.uline{font-weight:normal;text-decoration:none;} eller noget i den stil...

Synes godt om

mclemens Nybegynder

25. maj 2006 - 11:19 #7

- da <u> ikke er tilladt i xhtml 1.1 + (kører xhtml 1.1 selv)

Synes godt om

mclemens Nybegynder

25. maj 2006 - 11:19 #8

- og tak for point forresten :)

Synes godt om

rtfm Nybegynder

25. maj 2006 - 11:27 #9

Jeg har lige fundet fejlen, så det er derfor du ikke kunne se den.

Men der kan man bare se, der blev jeg så meget klogere. Jeg har mange gange overvejet, hvad clear betød, men har aldrig rigtig fået det undersøgt.

Desuden har du nok ret i det med b, i og u. Jeg må bare lave noget replace-halløj til det.

Men du skal i hvert fald have mange tak for hjælpen...

Synes godt om

mclemens Nybegynder

25. maj 2006 - 11:44 #10

det var så lidt ;)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

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

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS