[CSS] Spacing bij list en ongewenste tussenruimte bij div's - Softwareontwikkeling

woensdag 12 april 2006 18:09

Acties:

Topicstarter

Ik ben de site van een vriend aan het verlossen van een vreselijke tabellayout. HTML werd XHTML, alle layout verdween naar de CSS stylesheet en de site kreeg een meer semantische opbouw.

Er blijven echter drie problemen onopgelost (het laatste geraakte niet meer in de topictitel). Google en de GoT search bieden geen soelaas.

1. De navigatieknoppen (afbeeldingen) werden in een ongeordende lijst geplaatst, maar ik krijg de horizontale spatie tussen elk item niet weg. Padding en margin op nul zetten, ... het hielp allemaal niets. In W&G vond ik alleen topics over hoe verticale spacing te verwijderen bij lijsten.

2. Er zijn drie ongewenste tussenlijnen. Ook hier geeft het zetten van de padding en de margin op nul, het verwijderen van line-breaks in de HTML, ... geen resultaat. Het vreemdste eraan is dat tussen de navbar en de navbar-shadow géén tussenruimte voorkomt, terwijl de code niet verschilt.

3. De javascript image preloader (Dreamweaver code) van de navigatieknoppen is gebroken.

Afbeeldingslocatie: http://img153.imageshack.us/img153/542/designstables3tb.th.jpg

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en">

<head>
<title>DesignStables | Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/style.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

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

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

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script type="text/javascript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
</head>

<body onload="MM_preloadImages('images/header_home_over.jpg','images/header_portfolio_over.jpg','images/header_services_over.jpg','images/header_resume_over.jpg','images/header_contact_over.jpg')">

<div id="container">

    <div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>

    <div id="header">&nbsp;</div>

    <div id="navbar">
        <ul>
            <li>[img]"/images/header_home_activ.jpg"[/img]</li>
            <li><a href="/portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','/images/header_portfolio_over.jpg',1)">[img]"/images/header_portfolio.jpg"[/img]</a></li>
            <li><a href="/services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/header_services_over.jpg',1)">[img]"/images/header_services.jpg"[/img]</a></li>

            <li><a href="/resume.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','images/header_resume_over.jpg',1)">[img]"/images/header_resume.jpg"[/img]</a></li>
            <li><a href="/contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','images/header_contact_over.jpg',1)">[img]"/images/header_contact.jpg"[/img]</a></li>
        </ul>
    </div>

    <div id="navbar-shadow">&nbsp;</div>

    <div id="content">
        <div id="text">

            <h2><br />Home</h2>
            <div class="hr"><hr /></div>
            <p>Welcome to the Home section of <strong>The DesignStables</strong>. This page will guide you through the newest additions on this portfolio site in order to present you a up to date peek in my latest work.</p>
            <p>Please browse through your particular interrest by searching in the upper navigation bar or simply by clicking the thumbs below.</p>
            <h2>The DesignStables</h2>
            <div class="hr"><hr /></div>

            <p align="center"><a href="/portfolio/digitalpainting.html" onmouseover="return overlib('Enter the Digital Painting Stable.');" onmouseout="return nd();">[img]"/images/thumbs/thumb_home_digital_painting.jpg"[/img]</a><a href="/portfolio.html" onmouseover="return overlib('Enter the Digital Painting Stable.');" onmouseout="return nd();"></a><a href="/portfolio/photography.html" onmouseover="return overlib('Enter the Photography Stable.');" onmouseout="return nd();">[img]"/images/thumbs/thumb_home_photography.jpg"[/img]</a><a href="/portfolio/conceptart.html" onmouseover="return overlib('Enter the Concept Art Stable.');" onmouseout="return nd();">[img]"/images/thumbs/thumb_home_concept_art.jpg"[/img]</a><a href="/portfolio/traditionalwork.html" onmouseover="return overlib('Enter the Traditional Work Stable.');" onmouseout="return nd();">[img]"/images/thumbs/thumb_home_traditional_work.jpg"[/img]</a><a href="/portfolio/webdesign.html" onmouseover="return overlib('Enter the Webdesign Stable.');" onmouseout="return nd();">[img]"/images/thumbs/thumb_home_webdesign.jpg"[/img]</a><a href="/portfolio/corporateidentity.html" onmouseover="return overlib('Enter the Corporate Identity Stable.');" onmouseout="return nd();">[img]"/images/thumbs/thumb_home_corporate_identity.jpg"[/img]</a></p>

        </div>

    </div>

    <div id="footer">
        <span class="copyright">All images copyrighted by De Smet Yannick, 2006</span>
    </div>

</div>

</body>
</html>

Cascading Stylesheet:

body {
    margin: 0;
    background: #668e35 url(/images/pattern.jpg);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #678f36;
}
#container {
    text-align: center;
}
#header {
    margin: 0 auto;
    background-image: url(/images/header.jpg);
    height: 108px;
    width: 704px;
}
#navbar {
    margin: 0 auto;
    background-image: url(/images/header_navbar.jpg);
    height: 27px;
    width: 704px;
}
#navbar ul {
    list-style-type: none;
}
#navbar li {
    display: inline;
    padding: 0;
    white-space: nowrap;
}
#navbar-shadow {
    margin: 0 auto;
    background-image: url(/images/header_shadow.jpg);
    height: 8px;
    width: 704px;
}
#content {
    margin: 0 auto;
    background: url(/images/middle.jpg) repeat-y;
    width: 704px;
    text-align: left;
}
#text {
    padding: 0 57px 0 57px;
}
div.hr {
    background: url(/images/break.jpg) repeat-x;
    height: 5px;
}
div.hr hr {
    display: none;
}
h2 {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 0;
}
.thumbclass {
    margin: 0;
}
#footer {
    margin: 0 auto;
    background-image: url(/images/footer.jpg);
    height: 72px;
    width: 704px;
}
.copyright {
    font-size: 11px;
    color: #bbe28c;
}

woensdag 12 april 2006 18:53

Acties:

XangadiX

trepanatie is zóó kinderachtig

hmm... zoals we in de FAQ al zeiden is een codedump niet echt inzichtelijk of handig, daarbij is dreamweaver code third party coden en we zijn hier niet de helpdesk van Adobedia.
Het lijkt me raadzaam de manual van dreamweaver na te kijken of even zelf een image preloader te bouwen.

Stoer; Marduq

Dit topic is gesloten.