Frage zu horizontalen Linien

Frage zu horizontalen Linien

Beitragvon marvin1989 » 29.12.2009, 01:56

Schönen guten Tag erstmal, da ich neu hier bin stelle ich mich auch direkt mal kurz vor.

Ich bin Marvin, 20 Jahre alt und habe weniger Ahnung von CSS als ich dachte, habe bisher immer alles ereicht was ich wollte und wenn ich noch so lange vor dem Rechner sitzen musste, aber diesmal verzweifel ich wirklich, es geht nämlich um folgenes:

[Foto im Anhang]
Die 2. Linie soll genau so sitzen wie die erste, heißt also ich müsste sie irgendwie nach rechts kriegen, aber ich habe schon gegoogelt und rumprobiert ohne Ende, ich kann partout nichts finden, ich würde mich sehr freuen wenn sich jemand die Zeit dazu nimmt und mir hilft.

Das ist die Datei des Styles Red, welches wir gerade benutzen.
Code: Alles auswählen
@charset "utf-8";
/*** red ***/
a:link, a:visited {
   color: #DA281F;
   text-decoration:underline;
}

a:hover {
   color: #DA281F;
}

a.logo:link,a.logo:hover, a.logo:visited{
   color: #FFFFFF;
}

div#logo_bg{
   background: #ECECEC url(../images/red/bg_logo.png) top  repeat-x;
}

div#sub_banner{
   background: #000000 url(../images/red/sub_banner.jpg) top left no-repeat;
   width:1050px;
   height:20px;
   margin-left:9px;
}

#user3{
   background: #B44645 url(../images/red/bg_menu.png) top  repeat-x;
}
#pillmenu_left{
   width: 4px;
   height: 43px;
   float:left;
   background: #16171A url(../images/red/pillmenu_left.png) top left no-repeat;
}
#pillmenu_right{
   width: 4px;
   height: 43px;
   float:right;
   background: #16171A url(../images/red/pillmenu_right.png) top left no-repeat;
}
#pillmenu li a, #pillmenu li a:hover, #active_menu-nav {
   color:#FFFFFF;
   background:url(../images/red/menu_hover.png) right no-repeat;
}
#pillmenu li a:hover, #active_menu-nav {
   color:#000000;
}

#leftcolumn h3, #leftcolumn div h3, #rightcolumn h3, #rightcolumn div h3{
   background:  url(../images/red/bg_h3.png) top left no-repeat;
}

#leftcolumn div.moduletable_menu, #leftcolumn div.moduletable, #leftcolumn div.moduletable_text,
#rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{
   background: url(../images/rub_bottom.png) left bottom no-repeat;
   
}
#f_area div.moduletable_menu, #f_area div.moduletable, #f_area div.moduletable_text{
   background: url(../images/rub_footer_bottom.png) left bottom no-repeat;
   
}
#f_area h3{
   background:  url(../images/red/f_area_h3.png) top left no-repeat;
}

a.readon, a.readon:hover, a.readon:visited{
   display:block;
   height:30px;
   width:109px;
   color:#FFFFFF;
   text-decoration:underline;
   padding-left: 20px;
   line-height:23px;
   background:  url(../images/red/bg_read_more.png) top left no-repeat;
   margin:10px 0px 0px 0px;
}

ul.menu li{
   list-style:none;
   background:url(../images/red/menu_arrow.png) top left no-repeat;
}
ul.mostread li{
   list-style:none;
   background:url(../images/red/menu_arrow.png) top left no-repeat;
}
ul.latestnews li{
   list-style:none;
   background:url(../images/red/menu_arrow.png) top left no-repeat;
}
.moduletable ul li {
   list-style:none;
   background:url(../images/red/menu_arrow.png) top left no-repeat;
}
div.componentheading{
   color:#DA281F;
}
#banner_bg table.contentpaneopen td{
   color: #FFFFFF;
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:11px;
}


Und hier kommt die Datei vom Template allgemein.
Code: Alles auswählen
@charset "utf-8";
input.system-openid, input.com-system-openid {
background : url(http://openid.net/images/login-bg.gif) no-repeat;
background-color : #fff;
background-position : 0 50%;
color : #000;
padding-left : 18px;
}
.system-unpublished {
background : #e8edf1;
border-top : 4px solid #c4d3df;
border-bottom : 4px solid #c4d3df;
}
#system-message {
margin-bottom : 10px;
padding : 0;
}
#system-message dt {
font-weight : bold;
}
#system-message dd {
margin : 0;
font-weight : bold;
text-indent : 30px;
}
#system-message dd ul {
color : #0055bb;
margin-bottom : 10px;
list-style : none;
padding : 10px;
border-top : 3px solid #84a7db;
border-bottom : 3px solid #84a7db;
}
#system-message dt.message {
display : none;
}
#system-message dt.error {
display : none;
}
#system-message dd.error ul {
color : #c00;
background-color : #e6c0c0;
border-top : 3px solid #de7a7b;
border-bottom : 3px solid #de7a7b;
}
#system-message dt.notice {
display : none;
}
#system-message dd.notice ul {
color : #c00;
background : #efe7b8;
border-top : 3px solid #f0dc7e;
border-bottom : 3px solid #f0dc7e;
}
#system-debug {
color : #ccc;
background-color : #fff;
padding : 10px;
margin : 10px;
}
#system-debug div {
font-size : 11px;
}
.invalid {
border-color : #ff0000;
}
label.invalid {
color : #ff0000;
}
#editor-xtd-buttons {
padding : 5px;
}
.button2-left, .button2-right, .button2-left div, .button2-right div {
float : left;
}
.button2-left a, .button2-right a, .button2-left span, .button2-right span {
display : block;
height : 22px;
float : left;
line-height : 22px;
font-size : 11px;
color : #666;
cursor : pointer;
}
.button2-left span, .button2-right span {
cursor : default;
color : #999;
}
.button2-left .page a, .button2-right .page a, .button2-left .page span, .button2-right .page span {
padding : 0 6px;
}
.page span {
color : #000;
font-weight : bold;
}
.button2-left a:hover, .button2-right a:hover {
text-decoration : none;
color : #0b55c4;
}
.button2-left a, .button2-left span {
padding : 0 24px 0 6px;
}
.button2-right a, .button2-right span {
padding : 0 6px 0 24px;
}
.button2-left {
background : url(../images/j_button2_left.png) no-repeat;
float : left;
margin-left : 5px;
}
.button2-right {
background : url(../images/j_button2_right.png) no-repeat 100% 0;
float : left;
margin-left : 5px;
}
.button2-left .image {
background : url(../images/j_button2_image.png) no-repeat 100% 0;
}
.button2-left .readmore {
background : url(../images/j_button2_readmore.png) no-repeat 100% 0;
}
.button2-left .pagebreak {
background : url(../images/j_button2_pagebreak.png) no-repeat 100% 0;
}
.button2-left .blank {
background : url(../images/j_button2_blank.png) no-repeat 100% 0;
}
div.tooltip {
float : left;
background : #ffc;
border : 1px solid #d4d5aa;
padding : 5px;
max-width : 200px;
z-index : 13000;
}
div.tooltip h4 {
padding : 0;
margin : 0;
font-size : 95%;
font-weight : bold;
margin-top : -15px;
padding-top : 15px;
padding-bottom : 5px;
background : url(../images/selector-arrow.png) no-repeat;
}
div.tooltip p {
font-size : 90%;
margin : 0;
}
.img_caption.left {
float : left;
margin-right : 1em;
}
.img_caption.right {
float : right;
margin-left : 1em;
}
.img_caption.left p {
clear : left;
text-align : center;
}
.img_caption.right p {
clear : right;
text-align : center;
}
a img.calendar {
width : 16px;
height : 16px;
margin-left : 3px;
background : url(../images/calendar.png) no-repeat;
cursor : pointer;
vertical-align : middle;
}
html {
height : 100%;
margin-bottom : 1px;
}
form {
display : inline;
}
body {
margin : 0 0 0 0;
padding : 0 0 0 0;
}
body, td {
font-family : Helvetica, Arial, sans-serif;
font-size : 12px;
color : #fff;
line-height : 1.4em;
}
a:link, a:visited {
text-decoration : none;
font-weight : normal;
}
a:hover {
text-decoration : underline;
font-weight : normal;
}
input.button {
cursor : pointer;
}
p {
margin-top : 0;
margin-bottom : 5px;
}
img {
border : 0 none;
}
#page_bg {
background : #16171a url(../images/page_bg.png) repeat-x top left;
}
div.main_bg_center {
margin : 0 auto;
}
div.main_bg_left {
float : left;
}
div.main_bg_right {
float : right;
}
div#main_bg {
width : 1050px;
text-align : left;
background : url(../images/middle_bg.png) repeat-y left;
}
div#middle_bg {
margin : 0 auto;
width : 1050px;
}
div#nologo {
display : block;
float : left;
width : 20px;
}
div#logo_bg {
height : 100px;
margin-left : 7px;
margin-right : 7px;
width : auto;
}
#logo_img {
margin-top : 16px;
margin-left : 16px;
margin-right : 10px;
}
.logo {
display : block;
float : left;
padding-top : 30px;
}
a.logo:link, a.logo:hover, a.logo:visited {
line-height : 28px;
text-decoration : none;
font-weight : bold;
}
a.logo_trebuchet:link, a.logo_trebuchet:hover, a.logo_trebuchet:visited {
font-family : "Trebuchet MS", Tahoma, Verdana;
font-size : 26px;
}
a.logo_tahoma:link, a.logo_tahoma:hover, a.logo_tahoma:visited {
font-family : Tahoma, Verdana, Arial;
font-size : 26px;
}
a.logo_verdana:link, a.logo_verdana:hover, a.logo_verdana:visited {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 26px;
}
a.logo_times:link, a.logo_times:hover, a.logo_times:visited {
font-family : "Times New Roman", Times, serif;
font-size : 26px;
}
a.logo_arial:link, a.logo_arial:hover, a.logo_arial:visited {
font-family : Arial, Helvetica, sans-serif;
font-size : 26px;
}
a.logo_helvetica:link, a.logo_helvetica:hover, a.logo_helvetica:visited {
font-family : Helvetica, Arial, sans-serif;
font-size : 26px;
}
a.logo_georgia:link, a.logo_georgia:hover, a.logo_georgia:visited {
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 26px;
}
a.logo_geneva:link, a.logo_geneva:hover, a.logo_geneva:visited {
font-family : Geneva, Arial, Helvetica, sans-serif;
font-size : 26px;
}
div#user4 {
float : right;
text-align : left;
margin-right : 15px;
}
div#user4 div.search {
width : 290px;
height : 46px;
text-align : left;
padding-top : 9px;
background : url(../images/search_bg.png) no-repeat top right;
}
.search .inputbox {
background : #ffffff;
width : 200px;
height : 16px;
margin-left : 40px;
font-size : 11px;
color : #454545;
padding : 5px 2px 2px 2px;
border : 1px solid #d3d3d3;
}
.input {
padding : 10px 10px 10px 0;
}
div#banner_bg {
height : 216px;
width : 1050px;
margin-top : 5px;
margin-left : 9px;
padding : 0;
}
div.banner1 {
background : url(../images/banner1.jpg) no-repeat top left;
}
div.banner2 {
background : url(../images/banner2.jpg) no-repeat top left;
}
div.banner3 {
background : url(../images/banner3.jpg) no-repeat top left;
}
div.banner4 {
background : url(../images/banner4.jpg) no-repeat top left;
}
div.banner5 {
background : url(../images/banner5.jpg) no-repeat top left;
}
#banner_bg table.contentpaneopen {
margin-top : 25px;
margin-right : 18px;
width : 370px;
float : right;
text-align : left;
}
#user3 {
margin-left : 3px;
margin-right : 3px;
width : auto;
border : 0;
height : 43px;
}
#pillmenu {
text-align : left;
margin : 0;
float : left;
}
#pillmenu ul {
margin : 0;
padding : 0 0 0 8px;
list-style : none;
}
#pillmenu li {
float : left;
margin : 0;
padding : 0;
margin-top : 5px;
}
#pillmenu li a, #pillmenu li a:hover, #active_menu-nav {
font-family : "Trebuchet MS", Tahoma;
font-size : 13px;
float : left;
display : block;
line-height : 30px;
padding : 0 17px 0 17px;
color : #ffffff;
text-decoration : none;
font-weight : bold;
}
#date {
text-align : right;
margin-right : 10px;
float : right;
line-height : 40px;
color : #ffffff;
font-family : Georgia, Tahoma;
font-size : 11px;
}
#leftcolumn {
position:absolute;
left: 105px;
top: 384px;

margin : 0;
padding : 0;
margin-left : 5px;
margin-top : 6px;
width : 175px;
float : left;
}
#rightcolumn {
position: absolute;
left: 970px;
top: 384px;
margin : 0;
padding : 0;
margin-left : 0;
margin-right : 4px;
margin-top : 6px;
width : 175px;
float : right;
}
#maincolumn {
width : 700px;
float : left;
margin-left : 220px;
padding : 0;
}
div.path {
padding : 15px 0 0 15px;
}
div.nopad {
float : left;
padding : 0 55px 5px 0px;
}
div.nopad ul {
clear : both;
}
form#form-login fieldset {
border : none;
margin : 0;
margin-left : 10px;
}
form#form-login ul li {
padding : 0;
}
form#form-login ul li a {
text-align : left;
padding : 0;
font-size : 10px;
color : #858585;
}
#leftcolumn div.moduletable_menu, #leftcolumn div.moduletable, #leftcolumn div.moduletable_text, #rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text {
margin : 2px 0 10px 0;
padding : 0;
width : 193px;
}
#leftcolumn h3, #rightcolumn h3 {
text-align : left;
height : 34px;
width : 175px;
line-height : 33px;
color : #ffffff;
font-size : 12px;
margin : 0 0 0 0;
padding-left : 35px;
}
div.bannergroup_text {
margin : 10px 13px 10px 13px;
}
.bannerheader {
font-weight : bold;
margin-bottom : 10px;
}
.banneritem_text {
margin-bottom : 10px;
}
.bannerfooter_text {
margin-bottom : 10px;
}
table.poll thead td {
text-align : center;
padding-left : 10px;
}
.poll {
margin : 10px 0 10px 0;
}
.poll td {
margin : 0 0 10px 0;
}
table.poll td {
text-align : left;
}
.pollstableborder {
margin : 5px 10px 10px 5px;
}
#leftcolumn ul, #rightcolumn ul {
margin : 10px;
padding : 0 10px 10px 0;
list-style : none;
}
.moduletable ul {
padding : 0 10px 10px 10px;
margin : 0;
}
.moduletable ul li {
padding : 0 0 0 10px;
margin : 0;
line-height : 18px;
}
.moduletable form ul li {
list-style : none;
background : inherit;
}
div.moduletable ul.latestnews {
padding : 0 10px 10px 10px;
margin : 0;
}
ul.latestnews li {
padding : 0 0 0 10px;
margin : 0;
line-height : 18px;
}
div.moduletable ul.mostread {
padding : 0 10px 10px 10px;
margin : 0;
}
ul.mostread li {
padding : 0 0 0 10px;
margin : 0;
line-height : 21px;
}
#leftcolumn ul.menu li#current ul li, #rightcolumn ul.menu li#current ul li {
margin : 0;
padding : 0;
}
div.moduletable ul.menu {
padding : 0 0 10px 15px;
margin : 0;
}
ul.menu {
padding : 0 0 10px 15px;
margin : 0;
}
ul.menu li {
padding : 0 0 0 15px;
margin : 0;
line-height : 21px;
}
ul.menu li#current a {
text-decoration : underline;
color : #ffffff;
}
ul.menu li ul {
padding : 0 0 5px 0;
margin : 0;
}
ul.menu li ul li {
padding : 0 0 0 15px;
}
ul.menu li#current ul li a {
margin-left : 15px;
text-decoration : none;
}
ul.mostread {
padding : 10px 0 10px 15px;
margin : 0;
}
ul.mostread li {
padding : 0 0 0 15px;
margin : 0;
line-height : 21px;
}
ul.latestnews {
padding : 10px 0 10px 15px;
margin : 0;
}
ul.latestnews li {
padding : 0 0 0 15px;
margin : 0;
line-height : 21px;
}
div.componentheading {
font-weight : bold;
font-size : 16px;
margin : 7px auto;
}
td.contentheading, td.buttonheading {
font-weight : bold;
font-size : 14px;
height : 33px;
background : #242424 url(../images/contentheading_line.png) repeat-x bottom;
border : none;
}
table.contentpaneopen {
border-collapse : collapse;
margin-left : 5px;
}
table.contentpaneopen td {
padding : 2px;
}
span.small, td.createdate, td.modifydate {
font-size : 11px;
color : #999999;
}
span.pagination span, span.pagination a {
padding : 5px;
}
div#f_area {
text-align : left;
border-top : 3px solid #4d4c4c;
background : #000000;
margin : 0 auto;
width : 989px;
padding-left : 0;
}
#f_area div.moduletable, #f_area div.moduletable_menu {
margin : 10px 4px 10px 5px;
width : 235px;
}
#f_area h3 {
text-align : left;
height : 34px;
width : 200px;
line-height : 33px;
color : #ffffff;
font-size : 12px;
margin : 0;
padding-left : 35px;
}
#system-message {
margin-bottom : 20px;
}
#system-message dd.message ul {
background : #c3d2e5 url(../../system/images/notice-info.png) no-repeat 4px center;
}
#system-message dd.error ul {
color : #c00;
background : #e6c0c0 url(../../system/images/notice-alert.png) no-repeat 4px center;
border-top : 3px solid #de7a7b;
border-bottom : 3px solid #de7a7b;
margin : 0;
padding-left : 40px;
text-indent : 0;
}
#system-message dd.notice ul {
color : #c00;
background : #efe7b8 url(../../system/images/notice-note.png) no-repeat 4px center;
border-top : 3px solid #f0dc7e;
border-bottom : 3px solid #f0dc7e;
}
#syndicate {
float : left;
padding-left : 25px;
}
#power_by, #power_by a, #power_by a:visited {
color : #858585;
}
a:link, a:visited {
color : #da281f;
text-decoration : underline;
}
a:hover {
color : #da281f;
}
a.logo:link, a.logo:hover, a.logo:visited {
color : #ffffff;
}
div#logo_bg {
background : #ececec url(../images/red/bg_logo.png) repeat-x top;
}
div#sub_banner {
background : #000000 url(../images/red/sub_banner.jpg) no-repeat top left;
width : 1050px;
height : 20px;
margin-left : 9px;
}
#user3 {
background : #b44645 url(../images/red/bg_menu.png) repeat-x top;
}
#pillmenu_left {
width : 4px;
height : 43px;
float : left;
background : #16171a url(../images/red/pillmenu_left.png) no-repeat top left;
}
#pillmenu_right {
width : 4px;
height : 43px;
float : right;
background : #16171a url(../images/red/pillmenu_right.png) no-repeat top left;
}
#pillmenu li a, #pillmenu li a:hover, #active_menu-nav {
color : #ffffff;
background : url(../images/red/menu_hover.png) no-repeat right;
}
#pillmenu li a:hover, #active_menu-nav {
color : #000000;
}
#leftcolumn h3, #leftcolumn div h3, #rightcolumn h3, #rightcolumn div h3 {
background : url(../images/red/bg_h3.png) no-repeat top left;
}
#leftcolumn div.moduletable_menu, #leftcolumn div.moduletable, #leftcolumn div.moduletable_text, #rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text {
background : url(../images/rub_bottom.png) no-repeat left bottom;
}
#f_area div.moduletable_menu, #f_area div.moduletable, #f_area div.moduletable_text {
background : url(../images/rub_footer_bottom.png) no-repeat left bottom;
}
#f_area h3 {
background : url(../images/red/f_area_h3.png) no-repeat top left;
}
a.readon, a.readon:hover, a.readon:visited {
display : block;
height : 30px;
width : 109px;
color : #ffffff;
text-decoration : underline;
padding-left : 20px;
line-height : 23px;
background : url(../images/red/bg_read_more.png) no-repeat top left;
margin : 10px 0 0 0;
}
ul.menu li {
list-style : none;
background : url(../images/red/menu_arrow.png) no-repeat top left;
}
ul.mostread li {
list-style : none;
background : url(../images/red/menu_arrow.png) no-repeat top left;
}
ul.latestnews li {
list-style : none;
background : url(../images/red/menu_arrow.png) no-repeat top left;
}
.moduletable ul li {
list-style : none;
background : url(../images/red/menu_arrow.png) no-repeat top left;
}
div.componentheading {
color : #da281f;
}
#banner_bg table.contentpaneopen td {
color : #ffffff;
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 11px;
}
#uddeim-module {
font-size : 11px;
}
#uddeim-modulenew {
font-size : 11px;
}
#uddeim-module p.uddeim-module-head {
margin : 0;
}
#uddeim-modulenew p.uddeim-module-head {
margin : 0;
}
#uddeim-module p.uddeim-module-body {
margin : 0;
}
#uddeim-modulenew p.uddeim-module-body {
margin : 0;
}
#uddeim-module p.uddeim-module-row {
margin : 0;
}
#uddeim-modulenew p.uddeim-module-row {
margin : 0;
}


Falls ich eine Frage offengelassen haben sollte werde ich das natürlich sofort nachholen. Falls euch durch Zufall noch weitere Fehler in der CSS Datei auffallen sollten, macht mich bitte darauf aufmerksam.

Ich bedanke mich im voraus.

MfG Marvin

ps: Das Foto wird nicht ganz dargestellt (zumindest nicht bei mir) der wichtige Teil auf der rechten Seite fehlt, mit rechtsklick und Bildanzeigen ging es ;-)
Dateianhänge
forumfoto.jpg
Homepage Foto
forumfoto.jpg (213.31 KiB) 325-mal betrachtet
marvin1989
neu hier
 
Beiträge: 2
Registriert: 29.12.2009, 01:36

Re: Frage zu horizontalen Linien

Beitragvon Laus » 29.12.2009, 14:48

Kannst Du die Seite mal bitte irgendwo online stellen damit man den Zusammenhang mit dem HTML Code sehen kann

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald

Re: Frage zu horizontalen Linien

Beitragvon marvin1989 » 29.12.2009, 22:54

Oh, entschuldigt, das habe ich in aller Eile vergessen.
Also der derzeitige Link ist dann
http://www.nordenpartys.de/jcms/

danke im voraus.
marvin1989
neu hier
 
Beiträge: 2
Registriert: 29.12.2009, 01:36

Re: Frage zu horizontalen Linien

Beitragvon Laus » 30.12.2009, 10:05

Die 2. Linie soll genau so sitzen wie die erste, heißt also ich müsste sie irgendwie nach rechts kriegen,

Das liegt ganz einfach daran dass dein Hintergrundbild nur 977px breit ist, die ganze Seite aber mit 1050px definiert ist. Also entweder das HG Bild breiter machen oder die Seite schmaler . Definiere doch einfach die Breite der Seite über dein Div main_bg und lasse alle anderen Breitenangaben die über die komplette breite gehen weg, sie ergibt sich ja aus main_bg. Du eliminierst damit "viele" mögliche Fehlerquellen.
Weiter ist mir aufgefallen das dein left- und rightcolumn aus dem Dokumentenfluss genommen ist und sich deshalb der Hintergrund von main_bg nicht weiter nach unten fortsetzt. Das kommt von position.absolute, (wobei sich float und position absolut sowieso widersprechen),lass sie einfach floaten und korrigiere eventuell mit einem negativen marginwert.
Ich hoffe das hilft Dir weiter

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Frage zu horizontalen Linien"

Zurück zu: CSS für Anfänger

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste

cron