Sponsor-Board.de
.css Frage

+- Sponsor-Board.de (https://www.sponsor-board.de)
+-- Forum: Community (/forumdisplay.php?fid=56)
+--- Forum: Hilfe (/forumdisplay.php?fid=102)
+---- Forum: Scripting (/forumdisplay.php?fid=108)
+---- Thema: .css Frage (/showthread.php?tid=9549)

.css Frage - pl0x - 21.01.2011 14:01

Hallo SB - Gemeinde ,

Ich habe ein Problem und zwar ich will mein Design in die Mitte bekommen also "center" jedoch ist es immer links. Hier die .css Datei:

Code:
body
{
    margin: 0px;
    padding: 0px;
    color: #000;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    line-height: 1.7em;
    background-color: #0a4b77;          
    background-position: top;
    background-repeat: repeat-x;

}


a, a:link, a:visited { color: #777700; text-decoration: none; }
a:hover { color: #808080; text-decoration: underline; }

p { margin: 0 0 10px 0; padding: 0; }
img { border: none; }

h1, h2, h3, h4, h5, h6 { color: #252323; font-weight: normal }

#main_top {
    position: absolute;
    top: 10px;
    left: 70px;
    padding:2px;
    width: 900px;
    height: 243px;
    background: url(images/content_top.png) no-repeat
}

#header {
    position: relative;
    left: 4.5px;
    width: 890px;
    height: 196px;
    background: url(images/header.jpg) no-repeat center top

}

#logo {
    position: relative;
    left: 4.5px;
    top: 45px;
    width: 350px;
    height: 90px;
    background: url(images/logo.png) no-repeat center top

}

#menu {
    position: relative;
    left: 70px;
    top: 222px;
    width: 904px;
    height: 70px;
    background: url(images/menü.png) no-repeat;
}

#menu ul {
    height: 70px;
    margin: 0;
    padding: 1px 0 0 0;
    list-style: none;
}

#menu ul li {
    padding: 0;    
    margin: 0;
    display: block;
}

#menu ul li a {
    float: left;
    display: block;
    height: 25px;
    padding: 8px 52px 0 50px;
    font-size: 15px;
    color: #000000;
    text-align: center;
    text-decoration: none;
    background: url(images/menu_divider.png) center right no-repeat;
}

#menu ul li a:hover, #menu ul .current {
    color: #0033FF;
}

#menu ul .last {
    background: none;
    padding-right: 52px
}
#oben {
    position: relative;
    left: 70px;
    top: 190px;
    width: 905px;
    height: 300px;
    background: url(images/conten_oben.jpg) no-repeat;
}

.banner_box {
    position: relative;
    top: 10px;
    left: 100px;
    clear: both;    
    width: 235px;
    margin-bottom: 30px;
}

.we_title {

    width: 800px;
    height: 20px;
    padding: 4px 30px;
    font-size: 14px;
    color: #ffffff;
    background: url(images/sidebar_box_top.jpg) no-repeat top left;
}
.we_content {
    padding: 15px 25px;
    width: 800px;
    background: url(images/sidebar_box_middle.jpg) repeat-y left;
}
.we_bottom {
    width: 800px;
    background: url(images/sidebar_box_bottom.jpg) no-repeat top left;
}

.seid_box {
    position: absolute;
    left: 780px;
    top: 270px;
    clear: both;
    width: 50px;
    margin-bottom: 30px;
}
.sb_title {
    width: 130px;
    height: auto;
    padding: 4px 30px;
    font-size: 14px;
    color: #ffffff;
    background: url(images/sidebar_box_top.jpg) no-repeat top left;
}
.sb_content {
    padding: 15px 25px;
    width: 180px;
    background: url(images/sidebar_boxx_middle.jpg) repeat-y left;
}
.sb_bottom {
    width: 800px;
    background: url(images/sidebar_box_bottom.jpg) no-repeat top left;
}
.seid_box2 {
    position: absolute;
    left: 780px;
    top: 500px;
    clear: both;
    width: 50px;
    margin-bottom: 30px;
}
.sb_title2 {
    width: 130px;
    height: auto;
    padding: 4px 30px;
    font-size: 14px;
    color: #ffffff;
    background: url(images/sidebar_box_top.jpg) no-repeat top left;
}
.sb_content2 {
    padding: 15px 25px;
    width: 180px;
    background: url(images/sidebar_boxx_middle.jpg) repeat-y left;
}
.sb_bottom2 {
    width: 800px;
    background: url(images/sidebar_box_bottom.jpg) no-repeat top left;
}
.sb_bottom2 {
    width: 800px;
    background: url(images/sidebar_box_bottom.jpg) no-repeat top left;
}
.seid_box3 {
    position: absolute;
    left: 780px;
    top: 800px;
    clear: both;
    width: 50px;
    margin-bottom: 30px;
}
.sb_title3 {
    width: 130px;
    height: auto;
    padding: 4px 30px;
    font-size: 14px;
    color: #ffffff;
    background: url(images/sidebar_box_top.jpg) no-repeat top left;
}
.sb_content3 {
    padding: 15px 25px;
    width: 180px;
    background: url(images/sidebar_boxx_middle.jpg) repeat-y left;
}
.sb_bottom3 {
    width: 800px;
    background: url(images/sidebar_box_bottom.jpg) no-repeat top left;
}

#content {
    position: relative;
    top: 50px;
    left: 70px;
    background-color:#FFFFFF;
    width: 905px;

}
#footer {
    position: relative;
    top: 42px;
    left: 200px;
    width: 905px;
    margin: 0 auto;
    color: #ffffff;
    padding: 5px 0;
}
#footer a {    color: #C0C0C0;}


Wodran liegt es?

MfG

RE: .css Frage - Sysix - 21.01.2011 14:08

im body margin auto Wink

bzw ein wrapper erstellen und da margin auto machen

RE: .css Frage - Aaron - 21.01.2011 14:16

margin-left: auto;
margin-right: auto;

RE: .css Frage - pl0x - 21.01.2011 14:33

Code:
body
{
    margin-left: auto;
        margin-right: auto;
    padding: 0px;
    color: #000;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    line-height: 1.7em;
    background-color: #0a4b77;          
    background-position: top;
    background-repeat: repeat-x;

}


a, a:link, a:visited { color: #777700; text-decoration: none; }
a:hover { color: #808080; text-decoration: underline; }

p { margin: 0 0 10px 0; padding: 0; }
img { border: none; }

h1, h2, h3, h4, h5, h6 { color: #252323; font-weight: normal }

#main_top {
    position: absolute;
    top: 10px;
    left: 70px;
    padding:2px;
    width: 900px;
    height: 243px;
    background: url(images/content_top.png) no-repeat
}

#header {
    position: relative;
    left: 4.5px;
    width: 890px;
    height: 196px;
    background: url(images/header.jpg) no-repeat center top

}

#logo {
    position: relative;
    left: 4.5px;
    top: 45px;
    width: 350px;
    height: 90px;
    background: url(images/logo.png) no-repeat center top

}

#menu {
    position: relative;
    left: 70px;
    top: 222px;
    width: 904px;
    height: 70px;
    background: url(images/menü.png) no-repeat;
}

#menu ul {
    height: 70px;
    margin: 0;
    padding: 1px 0 0 0;
    list-style: none;
}

#menu ul li {
    padding: 0;    
    margin: 0;
    display: block;
}

#menu ul li a {
    float: left;
    display: block;
    height: 25px;
    padding: 8px 52px 0 50px;
    font-size: 15px;
    color: #000000;
    text-align: center;
    text-decoration: none;
    background: url(images/menu_divider.png) center right no-repeat;
}

#menu ul li a:hover, #menu ul .current {
    color: #0033FF;
}

#menu ul .last {
    background: none;
    padding-right: 52px
}
#oben {
    position: relative;
    left: 70px;
    top: 190px;
    width: 905px;
    height: 300px;
    background: url(images/conten_oben.jpg) no-repeat;
}

.banner_box {
    position: relative;
    top: 10px;
    left: 100px;
    clear: both;    
    width: 235px;
    margin-bottom: 30px;
}

.we_title {

    width: 800px;
    height: 20px;
    padding: 4px 30px;
    font-size: 14px;
    color: #ffffff;
    background: url(images/sidebar_box_top.jpg) no-repeat top left;
}
.we_content {
    padding: 15px 25px;
    width: 800px;
    background: url(images/sidebar_box_middle.jpg) repeat-y left;
}
.we_bottom {
    width: 800px;
    background: url(images/sidebar_box_bottom.jpg) no-repeat top left;
}

.seid_box {
    position: absolute;
    left: 780px;
    top: 270px;
    clear: both;
    width: 50px;
    margin-bottom: 30px;
}
.sb_title {
    width: 130px;
    height: auto;
    padding: 4px 30px;
    font-size: 14px;
    color: #ffffff;
    background: url(images/sidebar_box_top.jpg) no-repeat top left;
}
.sb_content {
    padding: 15px 25px;
    width: 180px;
    background: url(images/sidebar_boxx_middle.jpg) repeat-y left;
}
.sb_bottom {
    width: 800px;
    background: url(images/sidebar_box_bottom.jpg) no-repeat top left;
}
.seid_box2 {
    position: absolute;
    left: 780px;
    top: 500px;
    clear: both;
    width: 50px;
    margin-bottom: 30px;
}
.sb_title2 {
    width: 130px;
    height: auto;
    padding: 4px 30px;
    font-size: 14px;
    color: #ffffff;
    background: url(images/sidebar_box_top.jpg) no-repeat top left;
}
.sb_content2 {
    padding: 15px 25px;
    width: 180px;
    background: url(images/sidebar_boxx_middle.jpg) repeat-y left;
}
.sb_bottom2 {
    width: 800px;
    background: url(images/sidebar_box_bottom.jpg) no-repeat top left;
}
.sb_bottom2 {
    width: 800px;
    background: url(images/sidebar_box_bottom.jpg) no-repeat top left;
}
.seid_box3 {
    position: absolute;
    left: 780px;
    top: 800px;
    clear: both;
    width: 50px;
    margin-bottom: 30px;
}
.sb_title3 {
    width: 130px;
    height: auto;
    padding: 4px 30px;
    font-size: 14px;
    color: #ffffff;
    background: url(images/sidebar_box_top.jpg) no-repeat top left;
}
.sb_content3 {
    padding: 15px 25px;
    width: 180px;
    background: url(images/sidebar_boxx_middle.jpg) repeat-y left;
}
.sb_bottom3 {
    width: 800px;
    background: url(images/sidebar_box_bottom.jpg) no-repeat top left;
}

#content {
    position: relative;
    top: 50px;
    left: 70px;
    background-color:#FFFFFF;
    width: 905px;

}
#footer {
    position: relative;
    top: 42px;
    left: 200px;
    width: 905px;
    margin: 0 auto;
    color: #ffffff;
    padding: 5px 0;
}
#footer a {    color: #C0C0C0;}


Geht immer noch nicht?

RE: .css Frage - Thomas - 21.01.2011 14:56

Gib uns doch mal ein Link zum Design.

RE: .css Frage - pl0x - 21.01.2011 15:17

[Link: Registrierung erforderlich]

RE: .css Frage - Thomas - 21.01.2011 15:54

Also mein Bildschrim ist 1280 breit, das Design ragt nicht über den Bildschrim raus, dennoch habe ich einen Scrollbalken um nach links bzw nach rechts zu scrollen obwohl da nur noch ein Stück blauer Hintergrund ist.

Das wäre das 1. Problem das du mal beseitigen musst, daher wird es denke ich mal auch nicht mittig.

RE: .css Frage - Damian - 21.01.2011 17:54

erstell einen wrapper
Den machste um dein Design also
<div id="wrapper">
dein Design
</div>

In der .css dann:

#wrapper {
margin:auto;
width:breite deines Designs;
}

gruß
Damian