VMS Umsetzung failed oO Hilfe!

[danny888]

Hi,

mein bald startendes Portal basiert auf dem VMS, jedoch habe ich ein Problem mit der Anpassung eindes Designs...ich hoffe ihr könnt mir helfen.

Link: http://www.pecuniaportal.de

main.css:


body {
margin:0;
background-image:url(../images/bg.png);
background-repeat:repeat-x;
background-color:#C0C0C0;
width:100%;
height:100%;
}

body, table, td, tr, div, p, pre, h1, h2, h3, h4, ul, a {
font-family: Verdana, Arial;
font-size: 11px;
color:#999999;
}

img {
border:none;
}

a {
color:#a2bbd5;
text-decoration:underline;
}

a:hover {
text-decoration:none;
}

#main {
width:1042px;
min-height:400px;
height:auto;
margin:0 auto 0 auto;
background-image:url(../images/bg_middle.png);
background-repeat:no-repeat;
background-position:center top;
text-align:center;
}

#header {
margin:0 auto 0 auto;
width:1042px;
}

#info {
width:1042px;
margin:0 6px 0 6px;
text-align:left;
background-image:url(../images/top_bg.png);
color:#1c3753;
}

#info form {
margin:0px;
padding:0px;
float:left;
}

#info input {
border:none;
padding:0;
}

#info a, #info span a {
color:#1c3753;
font-size:10px;
text-decoration:underline;
margin:5px 10px 0 10px;
}

#info a:hover, #info span a:hover {
text-decoration:none;
}

#info span {
float:right;
margin:5px 0 0 0;
}

.login {
width:86px;
height:15px;
font-size:10px;
color:#80a7d1;
padding:2px 0 2px 4px !important;
background-image:url(../images/top_input.png);
background-repeat:no-repeat;
margin:5px;
}

#go {
height:15px;
width:44px;
font-size:10px;
font-family:Verdana, Arial;
color:#dfefff;
text-align:center;
background-image:url(../images/top_go.png);
background-repeat:no-repeat;
border:none;
}

#topnav {
width:1042px;
height:35px;
background-image:url(../images/top_nav.png);
background-repeat:no-repeat;
}

#topnav ul {
margin:0 0 0 3px;
padding:0;
list-style:none;
}

#topnav ul li {
float:left;
width:149px;
background-image:url(../images/space.png);
background-repeat:no-repeat;
background-position:0 0;
}

#topnav ul li:first-child {
background:none;
}

#topnav ul li a {
display:block;
width:148px;
height:28px;
padding:10px 0 0 0;
margin:0 0 0 1px;
text-align:center;
font-size:14px;
font-weight:bold;
font-family: Trebuchet MS, Verdana;
color:#000000;
text-decoration:none;
text-shadow: 1px 1px 0 #ebeff5;
}

#topnav ul li a:hover {
background-image:url(../images/top_nav_hover.png);
background-repeat:repeat-x;
}

#logo {
float:left;
border:none;
margin:30px 0 0 25px;
}

#banner {
float:right;
height:60px;
width:468px;
background-image:url(../images/banner_bg.png);
background-repeat:no-repeat;
margin:15px 15px 15px 0;
}

.nhead {
background-image: url(../images/middle_nav_head.png);
background-repeat: no-repeat;
height: 30px;
width: 160px;
text-align: center;
padding:3px 0 0 0;
margin:4px 5px 0 4px;
font-family: Trebuchet MS, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-shadow: 1px 1px 0 #f7f9fb;
}

.nbg {
background-image: url(../images/middle_nav_bg.png);
background-repeat: repeat-y;
height: auto;
width: 160px;
padding: 0 2px 0 2px;
margin:0 5px 0 4px;
text-align: left;
color: #999999;
}

.nbg ul {
margin:0;
padding:0;
list-style:none;
}

.nbg ul li {
display:block;
}

.nbg ul li a{
display: block;
padding: 2px 0 2px 15px;
color: #999999;
text-decoration:none;
background-image: url(../images/list_dot.png);
background-repeat: no-repeat;
background-position: 2px 5px;
}



.nfoot {
background-image: url(../images/middle_nav_foot.png);
background-repeat: no-repeat;
margin:0 5px 0 4px;
height: 10px;
width: 160px;
font-size: 1px;
}

input, select, textarea, option {
font-size: 11px;
padding: 1px;
font-family: Verdana, Arial, sans-serif;
border: 1px solid #afafaf;
background-color: #f5f7fb;
color: #a2bbd5;
}

#content {
width:900px;
margin:0 auto 0 auto;
background-image:url(../images/content_bg.png);
background-repeat:repeat-y;
}

#left {
float:left;
width:165px;
background-repeat:no-repeat;
background-position:left top;
text-align:center;
margin:0px;
padding:0 0 4px 0;
}

#middle {
float:right;
width:750px;
margin:0px;
padding:0px;
}

#context {
float:left;
width:560px;
margin:0 0 0 5px;
padding:0px;
text-align:left;
font-size:11px;
color:#999999;
padding:0 0 4px 0;
}

#context h2 {
font-size:18px;
font-weight:normal;
font-family:Trebuchet MS, Verdana;
color:#7a9abd;
border-bottom: 1px solid #cccccc;
margin:5px 0 2px 0;
padding:0 0 0 2px;
text-shadow: 1px 1px 1px #cccccc;
}

#right {
float:right;
width:150px;
background-repeat:no-repeat;
background-position:right top;
text-align:center;
margin:0px;
padding:0 0 4px 0;
}

#footer {
width:100%;
padding:4px 0 4px 0;
font-size:10px;
color:#93a9c0;
text-align:center;
}

#footer a {
font-size:10px;
color:#93a9c0;
text-decoration:underline;
}

#footer a:hover {
text-decoration:none;
}

.tr_table {
background-color:#afafaf;
}

.tr_row0 {
background-color: #f5f7fb;
}

.tr_row1 {
background-color: #f0f4f9;
}

.tr_row0 td, .tr_row1 td {
border:1px solid #ffffff;
}

.tr_head {
background-image:url(../images/tablehead.png);
background-repeat:repeat-x;
background-color: #dfe6f0;
color: #7191b2;
height:24px;
text-shadow: 1px 1px 0 #ffffff;
vertical-align:middle;
}

.tr_head td {
text-align:center;
}

Was mach ich falsch?

[Sepp]

hy
das selbe hatte ich acuh am anfang muss ein bisschen mit den groessen spielen und schauen wo sich dann was aendert weil da passen so wie es aussieht ein paar nicht deswegen verschiebt sich das so.

Ich habe immer geziehlt eine groese genommen und man veraendert und geschaut wie sich und was sich aendert und wenn die dann so war wie ich es haben wollte die naechste.

Sorry bin leider kein proficoder aber hoffe ich konnte einen kleinen anstoß geben.

[Jenny]

So wie ich das sehe ist die content und die middle zu klein gewählt da mal bisschen ausprobieren

[hankfromhelvete]

Wenn du Firefox nutzt, installier dir am besten Firebug (https://addons.mozilla.org/de/firefox/addon/firebug/). Damit siehts du die Änderungen direkt, ohne die .css dauern hochladen zu müssen.