Bordas ficam juntas - Tem como uni-las?
Olá pessoal, é possível definir o tamanho máximo da borda de uma div? Pois estou usando a propriedade border em duas DIVs que quando ficam juntas, acumulam a borda. Os códigos:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>eboo</title> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body> <div id="principal"> <div id="logo"></div> <div id="menu"> <ul> <li><a href="#">XXXXX</a></li> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> </div> <div id="conteudo"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pretium placerat arcu. Quisque massa libero, dapibus sit amet, semper eu, accumsan id, elit. Nam vehicula lacus non nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam pellentesque, ante vitae dapibus vehicula, mauris enim vestibulum nunc, sit amet hendrerit sem neque nec eros. Nunc consectetuer leo ut dui. Nunc feugiat lacus. Donec lectus. Nullam eros velit, cursus eget, convallis sit amet, consequat at, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque hendrerit feugiat orci. Vivamus euismod justo eu urna. Duis luctus eros a nunc. Sed non leo placerat libero adipiscing gravida. Aliquam eu orci nec felis tincidunt vulputate. Morbi enim. Ut tristique dolor ac ligula. Aliquam nec enim. </p> <p>Etiam nulla urna, consequat vel, laoreet varius, tincidunt sit amet, diam. Phasellus eget odio in ligula ultricies gravida. Sed fermentum. Ut enim tellus, cursus sit amet, feugiat eu, vehicula sit amet, sem. Integer pede. Aliquam congue mi sit amet lorem. Curabitur bibendum convallis lectus. Cras tincidunt nisi sit amet diam. Donec vitae magna ut ipsum vulputate fermentum. Praesent neque nibh, sagittis ut, vestibulum id, sagittis ut, lacus. Mauris quis risus. Proin urna. Vestibulum accumsan feugiat purus. Nulla ornare ante ac ante. Maecenas eu diam vel tellus tincidunt venenatis. Integer metus odio, pulvinar nonummy, convallis nec, imperdiet sed, purus. Ut tincidunt ante vitae nisl. Aenean non purus. Aliquam ullamcorper venenatis quam. Morbi nonummy nunc eu urna.</p></div> </div> </body> </html>
CSS
@charset "utf-8"; / CSS Document / body { font-family: "Palatino Linotype","Trebuchet MS",sans-serif; color: #0066CC; margin: 0px; } div ul li{ border-collapse:collapse; border-spacing:0; } p { text-indent: 30px; text-align:justify; } a { text-decoration:none; color:#1188FF; } a:hover { color:#000066; } / DIVS / #principal { width:90%; height:100%; margin: 20px 5% 0px 5%; background-color:#FFF; border: solid 4px #0066CC; } #logo { width:100%; height:120px; border: 2px solid #0066CC; } #conteudo { width:100%; height:100%; min-height:500px; } #conteudo p { margin: 10px; } #menu { width:100%; height:28px; margin:0; } #menu ul { list-style:none; display:table; margin:0; padding:0; width:100%; heigth:28px; } #menu ul li { border: solid 2px #0066CC; display:inline; margin:0; white-space:nowrap; padding:2px 12px; text-align:center; vertical-align:center; height:28px; }
Discussão (2)
Carregando comentários...