[css-html] hulp bij diven van site - Softwareontwikkeling

vrijdag 4 juli 2008 14:58

Acties:

Verwijderd

Topicstarter

Gegroet

Ik heb besloten mijn site op te bouwen uit divs en daarna ga ik ook voor een ander design. Daarvoor was hij opgebouwd uit tabellen wat een vrij verouderde techniek is. Nu lukt het al redelijk, maar ik zit toch met nog een aantal grote problemen

css:

code:

body {
    background: url(images/body-bg.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
    margin: Opx;
    padding: 0px;
    width: 100%;
    height: 100%;
}

p {
    font-family: tahoma;
    font-size: 13px;
    font-weight: bold;
    color: #cccccc;
}

p.footer {
    font-size: 10px;
    color: #cccccc;
    font-family: tahoma;
    text-align: right;
    font-weight: normal;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#container {
    position: absolute;
    left: 80px;
    top: 40px;
    width: 642px;
}

#header {
    width: 642px;
    height: 128px;
}

#hnav {
    width: 642px;
    height: 40px;
    margin-top: Opx;
    background:url(images/hnavbg.jpg) repeat-x;
}

    ul.nav {
        float: left;
        list-style-type: none;
        padding: 0px;
        margin: 0px;
        width: 100%
    }
    
    a.nav {
        float: left;
        text-decoration: none;
        padding-left: 50px;
        width: 110px;
        padding-top: 10px;
        color: #cccccc;
        font-weight: bold;
    }
        
    
#content {
    width: 642px;
    background-color: #OeOeOe;
    height: 100%;
}

    #content .text {
        background-color: #131313;
        width: 576px;
        margin-left: 18px;
        margin-top: 30px;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
        
#footer {
    width: 627px;
    background-color: #0e0e0e;
    height: 32px;
    padding-top: 1px;
    padding-right: 15px;
    margin-bottom: 20px;
}

.end {
    clear: both;
}

html:

code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tom O - Amateur Design</title>
<link rel="stylesheet" type="text/css"
href="style.css">
<base target="_blank" />
</head>

<body>
<div id="container">
    <div id="header">
    <img src="images/header.jpg" alt="header" />
    </div>
    <div id="hnav">
    <ul class="nav">
    <li><a class="nav" href="link.html">About Me</a></li><li><a class="nav" href="link.html">Werken</a></li><li><a class="nav" href="link.html">Links</a></li><li><a class="nav" href="link.html">Contact Me</a></li>
    </ul>
    </div>
    <div id="content">
        <div class="text"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam imperdiet, lacus nec hendrerit suscipit, est felis ultrices diam, ac facilisis nunc turpis a turpis. Duis dictum varius nulla. Integer pulvinar libero in leo. Etiam nonummy tortor a odio mattis porta. Nulla feugiat. Sed vitae arcu ut augue tincidunt sollicitudin. Nullam et ante. Sed leo nunc, pulvinar id, tempor hendrerit, vehicula vel, velit. Sed a libero quis elit placerat bibendum. Morbi facilisis nunc a est. Cras porttitor lobortis erat. Integer pellentesque semper ipsum. Vestibulum posuere.</p>
        </div> 
        <div class="text"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam imperdiet, lacus nec hendrerit suscipit, est felis ultrices diam, ac facilisis nunc turpis a turpis. Duis dictum varius nulla. Integer pulvinar libero in leo. Etiam nonummy tortor a odio mattis porta. Nulla feugiat. Sed vitae arcu ut augue tincidunt sollicitudin. Nullam et ante. Sed leo nunc, pulvinar id, tempor hendrerit, vehicula vel, velit. Sed a libero quis elit placerat bibendum. Morbi facilisis nunc a est. Cras porttitor lobortis erat. Integer pellentesque semper ipsum. Vestibulum posuere.</p>       
  </div>
  <div id="footer"><p class="footer">&copy; Tom op't Roodt 2007-2008</p></div>
  <div class="end"></div>       
</div>
</body>
</html>

resultaat in firefox:

Afbeeldingslocatie: http://www.techzine.nl/f/g/51032php4K0Ng6.jpg

resultaat in internet explorer (7.0)

Afbeeldingslocatie: http://www.techzine.nl/f/g/51032phpMFNGeN.jpg

de problemen:
-de achtergrond achter de tekst boxes (met lorem ipsum....) moet normaal de kleur #0e0e0e hebben. Dat is niet het geval, het vreemde is dat als ik bij dreamweaver bij design kijk, dat wel zo is.
-in ie worden de links verkeerd weergegeven, elke volgende link staat verder naar beneden.

Ik ben nog een newbie op het gebied van html/css dus hopelijk is dit goed op te lossen.
Ik vraag dus jullie hulp daarbij. Comments op de rest van de code mogen uiteraard ook, ik kan geloven dat deze verre van ideaal is.

bvd

vrijdag 4 juli 2008 15:02

Acties:

WeeJeWel

ul.nav {
display: inline; float: left;
}

probeer dat eens voor je menu

Homey — Critics are those without skills to create.

vrijdag 4 juli 2008 15:07

Acties:

Bosmonster

*zucht*

Ik mis ook een html tag

Verder kan het komen doordat je doctype regel is afgebroken. IE heeft de doctype op de eerste regel nodig, anders springt ie naar quirksmode en heb je ineens een ander boxmodel voor IE.

[ Voor 78% gewijzigd door Bosmonster op 04-07-2008 15:08 ]

vrijdag 4 juli 2008 15:25

Acties:

Verwijderd

Topicstarter

geen van bovenstaande heeft iets uitgehaald

display: inline werkte niet.

die missende html tag was neem ik aan

code:

1	<html xmlns="http://www.w3.org/1999/xhtml">

het doctype is nu het standaard doctype van dreamweaver, gewoon op de 1e rij:

code:

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

EDIT: was nog ergens een </div> vergeten, maar dat heeft niets uitgemaakt.
verder heb ik als content achtergrond niet meer een kleur gepakt, afbeelding, die afbeelding is 1px met die kleur, die heb ik dan laten herhalen en vreemd genoeg gaat het zo wel, dus het achtergrond probleem is opgelost...

[ Voor 27% gewijzigd door Verwijderd op 04-07-2008 15:39 ]

vrijdag 4 juli 2008 15:39

Acties:

TeeDee

CQB 241

Persoonlijk gooi ik altijd nog een float:left op de listitems (li).
Dan zou het zoiets worden:

Cascading Stylesheet:

1	ul.nav li {float:left}

Pas trouwens ook op dat je geen diveritus gaat ontwikkelen.
Dingen als:

HTML:

<div id="content">
<div class="text">lorum...</div>
<div class="text">lorum...</div>
</div>

omschrijven naar:

HTML:

1
2
3

<div id="content">
<p>lorum..</p>
<p>lorum...</p>

En dan eventueel het volgende in je CSS:

Cascading Stylesheet:

1
2
3

#content p {
/* hier de specifieke styling voor het p element in je content div */
}

Kijk ook eens voor de gein naar dit stukje over semantiek.

Heart..pumps blood.Has nothing to do with emotion! Bored

vrijdag 4 juli 2008 16:07

Acties:

Verwijderd

Topicstarter

thnx, zowel in ie als firefox doet ie het nu

vrijdag 4 juli 2008 16:09

Acties:

WeeJeWel

TeeDee schreef op vrijdag 04 juli 2008 @ 15:39:
Persoonlijk gooi ik altijd nog een float:left op de listitems (li).
Dan zou het zoiets worden:
Cascading Stylesheet:
1
ul.nav li {float:left}

Moet beter lezen, dacht dat hij elk li element de class nav meegaf

Homey — Critics are those without skills to create.