Ich suche Hilfe bei einer Html Datei bzw Seite.
Ich möchte auf diesen Screen 2 Striche haben:
Hier ein Screen wie es aussehen sollte. PS: die striche sind nur schnell per paint bearbeitet worden sprich sie sollte natürlich gleiche Farben. Es reicht mir wenn sie mir sagen in Welche Zeile und welchen code ich einfügen soll.
Hier mal mein html Code.
und CSS.
CSS
HTML Code:
/* ==== COMMON SETTINGS ==== */
* { margin:0; padding: 0; }
p { padding-bottom: 15px; }
a { text-decoration: none; color: #32428d; }
ul { list-style-type: none; }
a:hover { text-decoration: underline; }
.clear { clear: both; }
body { font: 14px Arial, Helvetica, sans-serif; color: #58585a; background: #EDEDEF url('img/body.jpg') top center no-repeat; }#EDEDEF
/* ==== HEADINGS ==== */
h1 { font: bold 20px Arial; color: #32428d; margin-bottom: 0; }
h2, h3 { margin-bottom: 0; font-size: 16px; }
/* ==== FORMS ==== */
.text,
.textarea,
.select,
.captcha { border: 1px solid #ccc; padding: 2px; width: 220px; font: 9pt Arial; margin-bottom: 5px; color: #333; }
.submit { border: none; background: #999; color: #fff; padding: 2px 10px; font: 8pt Arial; font-weight: bold; }
.submit:hover { cursor: pointer; background: #666; color: #fff; }
label { display: block; float: left; width: 130px; }
fieldset { padding: 10px; border: 1px solid #ddd; margin-bottom: 15px; }
legend { font-weight: bold; color: #555; padding: 0 5px; }
input.error { border: 1px solid #ff0000; }
p.error { display: block; color: #fff; padding: 2px 5px; width: 216px; background: #ff0000; margin: 0; }
.formbody div { float: left; width: 900px; margin: 5px 0; }
.formbody div span { display: block; margin-bottom: 5px; }
.formbody div label { float: none; }
.formbody div input { float: left; margin-right: 5px; }
/* ==== PAGE POSITIONING ==== */
#container { background: transparent url('img/container.png') 0 0 repeat; }
#header { position: relative; height: 180px; }
#left { float: left; width: 500px; min-height: 500px; padding: 30px 0 30px 30px; }
#main { margin-left: 283px; padding: 30px; background: #fff; }
#footer { min-height: 144px; background: #1C86EE url('img/footer.png') 0 0 repeat-x; color: #fff; margin-bottom: 20px; }
/* ------ Header ------ */
#header .logo { position: absolute; top: 0; left: 0px; }
#header .font { position: absolute; top: 70px; right: 40px; height: 20px; line-height: 20px; }
#header .font span { position: relative; top: 2px; }
#header .font img { vertical-align: middle; cursor: pointer; margin-left: 4px; }
#header .mod_customnav { position: absolute; top: 130px; left: 0; height: 39px; width: 960px; z-index: 2000; }
#header .level_1 li { display: block; height: 39px; font-size: 15px; text-transform: uppercase; line-height: 38px; }
#header .level_1 li { float: left; border-right: 1px solid #31418d; color: #fff; }
#header .level_1 li span { padding: 0 34px; }
#header .level_1 li a { padding: 0 34px; color: #fff; }
#header .level_1 .active,
#header .level_1 .trail { color: #d6d9e8; text-shadow: 0 -1px 0 #31418c; }
#header .level_1 .last { border: none; }
#header a:hover { text-decoration: none; }
.mac #header .level_1 li span,
.mac #header .level_1 li a { padding: 0 32px; }
/* ------ Left ------ */
#left h3 { display: block; height: 31px; font: normal 14px Arial; color: #32428d; line-height: 31px; text-transform: uppercase; }
#left .search { position: relative; width: 233px; height: 32px; background: transparent url('img/search.png') 0 0 no-repeat; margin-bottom: 32px; }
#left .search .text { border: none; height: 30px; font-size: 14px; line-height: 30px; color: #32428d; background: transparent; padding: 0 10px; width: 170px; }
#left .search .submit { position: absolute; top: 0; right: 0; width: 30px; height: 30px; opacity: 0; }
#left .level_1 { margin-bottom: 33px; border-top: 1px solid #fff#31418d; }
#left .level_1 li { font-size: 14px; line-height: 31px; border-bottom: 1px solid #fff; text-transform: uppercase; }
#left .level_1 li a { color: #32428d; }
#left .login .text { display: block; height: 30px; font: normal 14px Arial; line-height: 30px; padding: 0 16px; border: 1px solid #dadbdc; }
#left .login .text { color: #32428d; width: 190px; margin-bottom: 9px; }
#left .login .pass { position: relative; width: 230px; }
#left .login .btn { position: absolute; top: 0; right: 0; z-index: 100; }
#left .level_2 li { padding-left: 15px; line-height: 20px; font-size: 12px; text-transform: none; white-space: pre-wrap; }
/* ------ Main ------ */
#main ul { list-style-type: disc; list-style-position: outside; margin-left: 20px; }
#main ol { margin-left: 20px; }
#main p { font-size: 14px; }
#main .layout_short { border-bottom: 1px solid #32428d; background: #f5f6f6; margin-bottom: 20px; }
#main .layout_short h2 { font: normal 20px Arial; color: #32428d; display: block; line-height: 30px; border-bottom: 1px solid #32428d; background: #fff; }
#main .layout_short .teaser { padding: 16px 10px; font-size: 14px; }
#main .layout_short .more { margin-top: -10px; margin-left: 10px; }
#main .layout_short img { float: left; margin-right: 20px; }
#main .mod_breadcrumb { margin-bottom: 20px; }
#main .pagination { position: relative; height: 20px; padding-top: 20px; border-top: 1px dotted #ccc; }
#main .pagination p { position: absolute; left: 0; padding: 0; }
#main .pagination a { text-decoration: none; }
#main .pagination ul { position: absolute; right: 0; list-style-type: none; }
#main .pagination li { display: inline; padding: 0 5px; }
#main form label { clear: both; }
#main .mod_article .block { margin-bottom: 15px; }
#main .ce_downloads p { padding: 0; }
#main .ce_downloads img { vertical-align: -3px; }
#main .checkbox_container span { display: block; clear: both; margin-bottom: 5px; }
#main .checkbox_container input { float: left; margin-right: 5px; }
#main .checkbox_container label { float: none; width: auto; display: inline; }
/* ------ Footer ------ */
#footer .inside { padding: 30px; }
#footer .ce_text { float: left; font-size: 13px; line-height: 22px; }
#footer .first { width: 315px; }
#footer .second { width: 245px; }
#footer .third { width: 290px; }
HTML Code:
<!DOCTYPE html> <title>Startseite</title> <base > <meta name="robots" content="index,follow"> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" href="http://fansfast.de/all" media="all"> <link rel="next" href="index4658.html?page=2"> <link type="text/css" rel="stylesheet" media="screen" href="tl_files/layout/screen.css" /> <!--[if lt IE 9]><script src="plugins/html5shim/html5-3.js"></script><![endif]--> <style type="text/css">body { font-size: 12px; }</style><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> </head> <body id="top" class="win other"> <div id="wrapper"> <header id="header"> <nav class="mod_customnav block"> <ul class="level_1"> <li class="last"><a href="ueber-uns.html" title="Ãœber uns" class="last">Login</a></li> </ul> </nav> <img src="tl_files/layout/img/header.png" width="6500" height="180" border="0" class="header" usemap="#Map" /> </div> </header> <div class="clear"></div> <div id="container"> </div> <aside id="left"> <div class="inside"> </div> <nav class="mod_customnav block"> <a href="#skipNavigation9" class="invisible">Navigation überspringen</a> <ul class="level_1"> <li class="first"><a href="Startseite.html" title="Startseite" class="first">> Startseite</a></li> <li><a href="Unser Angebot.html" title="Unser Angebot">> Unser Angebot</a></li> <li><a href="Mitglied werden.html" title="Mitglied werden">> Mitglied werden</a></li> <li class="last"><a href="Rechtsschutzversicherung erwerben.html" title="Rechtsschutzversicherung erwerben" class="last">> Rechtsschutzversicherung erwerben</a></li> <li class="sibling first"><a href="Aktuelles.html" title="Aktuelles" class="sibling first">> Aktuelles</a></li> <li class="sibling"><a href="Kontakt direkt.html" title="Kontakt direkt" class="sibling">> Kontakt direkt </a></li> <li class="sibling"><a href="Mitgleid berreich.html" title="Mitgleid berreich" class="sibling">> Mitgleid berreich</a></li> <li class="sibling"><a href="neues schreiben.html" title="neues schreiben" class="sibling">> neues schreiben</a></li> </ul> <a id="skipNavigation9" class="invisible"> </a> </nav> <div class="mod_login one_column tableless login block"> </div> <!-- indexer::continue --> </div> </aside> <div id="main"> <div class="inside"> <div class="mod_breadcrumb block"> <span class="active"></span> </div> <div class="mod_article block" id="startseite"> <div class="ce_text block"> <h1><!-- inhalt überschrift --></h1> <p></p> </div> <div class="mod_newslist block"> <div class=""> </div> <div id="clear"></div> </div> <footer id="footer"> <div class="inside"> <div class="ce_text first"> <div class="ce_text second block"> <p><br><br></p> </div> <div class="ce_text third block"> <p><br><span></span><br></p> </div> </footer> </div> </body> </html>
