• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV-Layout und Probs mit <hr>-Anzeige

F

franz86

Neues Mitglied
Hi "html.de"-Community,

versuch mich gerade mit einem DIV-Layout mit CSS, jedoch werden mir kein <hr> (Trennlinien) angezeigt.

Mein Quelltext schaut wie folgt aus:

Code: 
<!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=iso-8859-1" />
<title>title</title>
<!-- a javascript or expression could be used for IE6 and below for min-width -->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#wrapper {word-wrap: break-word;} /* ie proprietary property to force long words to break rather than the layout */
</style>
<![endif]-->
<style type="text/css" media="screen">
* {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    text-align: center;
}
/* wrapper holds left faux column tab */
/* nn6/7 will put content out of scrollable reach if auto is used unless the min-width is on body */
#wrapper {
    text-align: left;
    width: 100%;
    margin: 0 auto;
    -moz-box-shadow: 0px 0px 5px #000;
    -webkit-box-shadow: 0px 0px 5px #000;
    box-shadow: 0px 0px 4px #000;
    border: 4px solid #fff;
}
#header, #subnav, #footer {
    clear: both;
    width: 100%;
}
#header {
    background: url(banner.png) no-repeat #000;
    height: 70px;
}
#subnav {
    background: #555;
    padding: 1px 0;
    color: #FFF;
    clear: both;
    width: 100%;
    border: solid #000;
    border-width:0px 0px 1px;
    margin-bottom: 5px;
}
#footer {
    background: #000;
    font-size:12px;
    padding: 4px 0;
    border: solid #444;
    border-width:2px 0px 0px;
    color: #CCC;
    text-align: center;
    clear: both;
    width: 100%;
}
#contentfloatholder {/* right faux column tab */
    background: url(imgPanelBkgSilverTall.jpg) repeat-x 100% 0 #FFF;
    float: left;
    width: 100%;
    margin: 0px 0px 0px 0px;
}
#contentfloatholder:after {
    /* this is for NN6 to clear floats */
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}
#center {
    margin: 5px 5px 0 210px;
}
#centerwrap {
    float:left;
    width: 100%;
    margin: 0 -95% 0 0;
}
#left {
    float:left;
    width: 170px;
    margin: 0 0 0 -5%;
}
.box_body {
    margin:10px;
    -moz-border-radius: 3px;
    -moz-box-shadow: 0px 0px 3px #000;
    width: 180px;
}
.box_title {
    background: url(bg_boxtitle.png) #333;
    -moz-border-radius: 3px 3px 0px 0px;
    color: #CCC;
    padding:3px;
    padding-left: 5px;
    font-size: 12px;
    font-weight: bold;
}
.box_content {
    background-color: #FFF;
    border: solid #ccc;
    border-width:0px 1px 1px;
    -moz-border-radius: 0px 0px 3px 3px;
    padding: 4px;
    font-size: 10px;
    color: #666;
}
.box_body_content {
    margin:10px;
    -moz-border-radius: 3px;
    -moz-box-shadow: 0px 0px 3px #000;
}
.box_title_content {
    background: url(bg_boxtitle.png) #333;
    -moz-border-radius: 3px 5px 0px 0px;
    color: #FFF;
    padding:3px;
    padding-left: 5px;
    font-size: 14px;
    font-weight: bold;
}
.box_content_content {
    background-color: #FFF;
    border: solid #ccc;
    border-width:0px 1px 1px;
    -moz-border-radius: 0px 0px 3px 3px;
    padding: 4px;
    font-size: 14px;
    color: #666;
}
/************* IE Mac CSS Only **************/
* html div#centerwrap {
    margin: 0 -100% 0 0;
}
* html div#left {
    margin: 0;
}
div h3, div p {
    margin: 1em 0;
    padding: 0 20px;
}
</style>
</head>
<body>
<div id="wrapper">
  <div id="header">&nbsp;</div>
  <div id="subnav"></div>
  <div id="contentfloatholder">
    <div id="centerwrap">
      <div id="center">
      
      <div class="box_body_content">
        <div class="box_title_content">Titel</div>
        <div class="box_content_content"> texttext <hr> <br />testetasrtsdds
</div>
      </div>
      </div>
    </div>

    <div id="left">

      <div class="box_body">
        <div class="box_title">BOX1-Title</div>
        <div class="box_content">BOX1-Content</div>
      </div>
     
      <div class="box_body">
        <div class="box_title">BOX2-Title</div>
        <div class="box_content">BOX2-Content</div>
      </div>

      <div class="box_body">
        <div class="box_title">BOX3-Title</div>
        <div class="box_content">BOX3-Content</div>
      </div>
      
      <div class="box_body">
        <div class="box_title">BOX4-Title</div>
        <div class="box_content">BOX4-Content</div>
      </div>
      
    </div> 
  </div>
  <div id="footer">
   footertext</div>
</div>
</body>
</html>
jemand eine idee, woran es liegen könnte?
 
auf die idee kam ich auch schon, hab eine hr-css-style erstellt mit border:1 ;, aber ohne effekt, farben usw... bzw. der rest lies sich aber darüber einstellen und in dreamweaver sieht man nur einen kleinen punkt.
 
Daran liegt es jedenfalls. border: 1; ist vermutlich von der Syntax her nicht korrekt.

Code: 
hr {
    border: 1px solid #000;
}
 
Wozu soll die Angabe * { border: 0} denn gut sein. Es gibt doch nichts was per default einen border hat.
 
Das ist ein verschachteltes Element und läßt sich selektiv vermeiden: a img{border:none;}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben