klein probleempje met borders - Softwareontwikkeling

maandag 3 maart 2008 16:36

Acties:

Topicstarter

Zie http://home.wanadoo.nl/r.rubingh/GOT/

Mijn probleem is die dubbeldikke lijn naast Home, en Contact. Als ik de breedte van #header en #content 1 pixel verklein, schuift Contact naar onderen

Weet iemand wat ik fout doe ?

Het is vast iets heel simpels, maar ik vindt het niet. Ik heb het aan de linkerkant wel voor elkaar gekregen met een margin-left: -1 oid maar de rechterkant lukt niet.

CSS

Cascading Stylesheet:

#menu
{
float: left;

}

#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    
}



#menu li {
    display: inline;
}

#menu a {
    float: left;
    width: 128px;
    height: 25px;
    background: #FFFFFF;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;   
    text-align: center;
    text-decoration: none;
    color: #626262;
    font-weight: bold;
    font-size: 17px;
    padding-top: 5px;
}

#menu a:hover {
    width: 128px;
    height: 25px;
     font-size: 17px;
     color: #fe46ff;

}

#menu .first a {
    border-left: 1px solid #000000; 

}

#content
{
    margin: 0 auto;
    background: #ffffff;
    width: 775px;
    border-left: 1px solid;
    border-right: 1px solid;
}


/* <SNIP> Gelieve je te beperken tot RELEVANTE code */

HTML

HTML:

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Metamorphosis Design Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">  
<!-- header begins -->
<div id="header">
<div id="menu">
        <ul>
            <li class="first"><a href="#"  title="">Home</a></li>
            <li><a href="#" title="">Blog</a></li>
            <li><a href="#" title="">Gallery</a></li>
            <li><a href="#" title="">Friends</a></li>
            <li><a href="#" title="">About</a></li>
            <li><a href="#" title="">Contact</a></li>
        </ul>
    </div>
</div>
<!-- header ends -->
<!-- content begins -->
<!-- <SNIP> Gelieve je te beperken tot RELEVANTE code -->
</body>
</html>

[ Voor 85% gewijzigd door een moderator op 03-03-2008 16:53 . Reden: Overbodige code verwijderd ]

Random WTF

maandag 3 maart 2008 16:44

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Als je code post, post dan enkel relevante code; niet van die enorme lappen die je nu post. Ik heb je post even aangepast, want dit was teveel van het goede

Je hebt gewoon een dubbele border (op je content wrapper en op #menu .first a).

[ Voor 51% gewijzigd door RobIII op 03-03-2008 16:51 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

maandag 3 maart 2008 16:51

Acties:

Spasm

Topicstarter

Mijn dank is groot !

Random WTF

maandag 3 maart 2008 16:54

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Spasm schreef op maandag 03 maart 2008 @ 16:51:
Mijn dank is groot !

Probeer voortaan voor jezelf eerst eens een 'uitgeklede' test-case te maken met enkel de relevante stukken erin; dan had je het probleem in no-time gevonden en zit je niet te staren op stukken HTML / CSS die niet relevant zijn. Dan heb je meteen als 'bonus' een mooie case om hier te posten (zodat wij ons ook niet blind staren op niet-relevante stukken).

[ Voor 15% gewijzigd door RobIII op 03-03-2008 16:55 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 4 maart 2008 17:09

Acties:

Bastiaan

Bas·ti·aan (de, m)

DIV's; zijn die eigenlijk ook aanpasbaar in breedte (nooit geprobeerd, en denk slechts hardop)?

Anders zou je <div id="header"> of <div id="menu"> wellicht 100% breedte kunnen geven.

dinsdag 4 maart 2008 17:12

Acties:

DeZzL

Rocket surgeon

Op zich toch niet zo vreemd dat 2 borders van 1px naast elkaar een lijn van 2px vormen?
je zou li.first a een border van 0 kunnen geven. Als je dan de laatste li uit het menu ook een klasse meegeeft kun je die ook een border van 0 geven, en dan kun je div #menu 2px breder maken.

[ Voor 8% gewijzigd door DeZzL op 04-03-2008 17:14 ]

dinsdag 4 maart 2008 17:16

Acties:

Bastiaan

Bas·ti·aan (de, m)

Sja, of dát wat RobIII en DeZzL zeggen natuurlijk

woensdag 5 maart 2008 09:00

Acties:

Cartman!

Bastiaan schreef op dinsdag 04 maart 2008 @ 17:09:
DIV's; zijn die eigenlijk ook aanpasbaar in breedte (nooit geprobeerd, en denk slechts hardop)?

Anders zou je <div id="header"> of <div id="menu"> wellicht 100% breedte kunnen geven.

Tuurlijk kun je zelf een breedte aangeven voor een div. 100% breed ie is standaard overigens.