div border probleem

[joostvdh]

Hallo,

Ik zit met het volgende probleem:

Ik heb tussen mijn div's borders zitten, en ook aan de bovenzijde. Tussen in is het geen probleem en werken de border voortreffelijk. Alleen aan de bovenzijde komt er een probleem opzetten.

Ik heb daar namelijk een soort van 'pijltjes' die ik daar niet zou willen hebben.

 

[peter vazed]

Kan er geen touw aan vastknopen.

Code?
Of online voorbeeld.

 

[joostvdh]

Hierbij de code:

[CPP]<style type="text/css">
.wrapper{
margin : 0 auto;
left : 241px;
width: 900px;
margin-bottom: 0px;
background-color: #cccccc
}
.logo{
position: relative;
float: left;
left: 0px;
width: 300px;
height: 300px;
background-image: url(images/logo-djuiced.gif);
}
#slideshow {
float: right;
position : relative;
height : 300px;
width : 600px;
margin : 0 auto;
}
#slideshow IMG {
position : absolute;
top : 0;
left : 0;
z-index : 8;
}
#slideshow IMG.active {
z-index : 10;
}
#slideshow IMG.last-active {
z-index : 9;
}
.navigatie{
margin : 0 auto;
left : 241px;
width: 900px;
margin-bottom: 0px;
}
.links{
border-bottom : 3px solid #828282;
border-right : 3px solid #FFFFFF;
position: relative;
float: left;
left: 0px;
width: 297px;
height: 30px;
background-image: url(images/navi-links.gif);
}
.home{
border-bottom : 3px solid #828282;
position: relative;
float: left;
left: 0px;
width: 150px;
height: 30px;
background-color: #e7e7de
}
.diensten{
border-bottom : 3px solid #828282;
border-left : 3px solid #FFFFFF;
position: relative;
float: left;
left: 0px;
width: 147px;
height: 30px;
background-color: #e7e7de
}
.portfolio{
border-bottom : 3px solid #828282;
border-left : 3px solid #FFFFFF;
position: relative;
float: left;
left: 0px;
width: 147px;
height: 30px;
background-color: #e7e7de
}
.contact{
border-bottom : 3px solid #828282;
border-left : 3px solid #FFFFFF;
position: relative;
float: right;
right: 0px;
width: 147px;
height: 30px;
background-image: url(images/navi-rechts.gif);
}
.wrapper{
margin : 0 auto;
left : 241px;
width: 900px;
margin-bottom: 0px;
}
.left1{
border-right : 3px solid #f18e00;
position: relative;
float: left;
left: 0px;
width: 297px;
height: 500px;
background-color: #ead9cc
}
.left2{
position: relative;
float: left;
left: 0px;
width: 300px;
height: 500px;
background-color: #e7e7de
}
.right{
position: relative;
float: right;
right: 0px;
width: 300px;
height: 500px;
background-color: #e7e7de
}
body {
border-width: 0px;
padding: 0px;
margin: 0px;
font-size: 10px;
background-color: #828282
}
</style>[/CPP]

 

[peter vazed]

Code niks mis mee, evenwel in combinatie met de html, nu natuurlijk geen zicht op.
Html?

 

[joostvdh]

http://www.djuiced.nl/secret/index.html

 

[peter vazed]

Ja, ik zie het nu,
de puntjes in de grijze onderlijn van de navigatie.

 

[joostvdh]

Ja, hoe ga ik die weg krijgen

 

[peter vazed]

Ja, hoe ga ik die weg krijgen

Zal niet lukken.
Is een style gegeven voor het tonen van de borders
Zie:
http://www.yourhtmlsource.com/stylesheets/cssborders.html
http://www.html-site.nl/border.php

Hoeken zijn dus gewoon in 45 graden.

 

[csshunter]

Voeg eens toe:

[SIZE="2"][FONT="Courier New"].left1, .left2, .right {
   border-top: 3px solid #828282;
   margin-top: -3px;
}[/FONT][/SIZE]

Dit is het snelste. Nu heeft alleen de okergele rechterborder van .links bovenaan nog een driehoekje, maar dat is voor luitjes met een vergrootglas. *)

Met vriendelijke groet,
CSShunter

*) Heb je die in je buurt, dan zou het ook nog anders kunnen (door in de nav-knoppen de afstand ertussen niet met een border te regelen, maar met een witte achtergrondkleur van de .navigatie, en een margin-right van 3px van de <li>'s). Dat is eigenlijk de mooiste oplossing; eventueel moet er nog iets aangepast worden aan de background van de <li>'s van de navigatie.

[edit]Onder de naam "border slants" zijn er een aantal css-trucs bedacht, die juist gebruik maken van de hoek van 45 graden tussen twee borders van hetzelfde element. In den beginne: Slantastic van Eric Meijer, en Border Slants van Lasse Reichstein Nielsen.[/edit]

 

[joostvdh]

Bedankt voor de reacties, ik ga het even proberen en jullie horen van me!

Edit: de manier:

.left1, .left2, .right {
   border-top: 3px solid #828282;
   margin-top: -3px;
}

werkt op dit moment voldoende, bedankt voor jullie hulp!