nicht angemeldet
Guten Abend, habe folgendes Problem:
wenn ich auf einer Seite eine Tabelle benutze wird das ganze design (wrap) nach links verschoben! bin Anfänger und schnalls leider net.
Gruss und besten Dank für die hilfe.
Ehm als ergänzung:
Ich habe es ohne Tabelle versucht funkt. tip top mit Tabelle gehts nicht
Mit Tabelle siehe: Website mit Tabelle
ohne: Website ohne Tabelle
Hier noch der Code für die Seite mit Tabelle und der Css Code:
/* ----------------------------------------------
HTML ELEMENTS
------------------------------------------------- */
/* Top Elements */
* { margin: 0; padding: 0; outline: 0 }
body {
background: #D7CEE8;
font: 12px/170% 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: #6B6B6B;
text-align: center;
}
/* links */
a, a:visited {
color: #79A325;
background: inherit;
text-decoration: none;
}
a:hover {
color: #73471B;
background: inherit;
text-decoration: underline;
}
/* headers */
h1, h2, h3 {
font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
font-weight: Bold;
padding: 10px;
color: #444;
}
h1 {
font-size: 2.9em;
}
h2 {
font-size: 2.5em;
color: #88AC0B;
}
h3 {
font-size: 1.6em;
font-weight: normal;
padding: 16px 10px 4px 10px;
}
/* Paragraph */
p { padding: 12px 10px; }
/* Lists */
ul, ol {
margin: 10px 20px;
padding: 0 20px;
}
ul { list-style: none; }
dl { padding: 10px; margin: 0; }
dt {
font-weight: bold;
color: #79A62E;
}
dd {
padding-left: 25px;
}
/* Bilder */
img {
background: #FAFAFA;
border: 1px solid #E4E4E4;
}
img.float-right {
margin: 5px 0px 10px 10px;
}
img.float-left {
margin: 5px 10px 10px 0px;
}
/* start - Tabelle */
table {
border-collapse: collapse;
margin: 15px 10px;
}
th {
height: 25px;
padding-left: 12px;
padding-right: 12px;
color: #000;
text-align: left;
background: #fff;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
tr {
height: 34px;
background: #fff;
}
td {
padding-left: 11px;
padding-right: 11px;
border: 1px solid #E7F0CC;
}
/* end - table */
/* Formulare */
form {
margin: 20px 10px;
padding: 15px 25px 25px 20px;
border: 1px solid #EEE8E1;
background: #FAF7F5;
}
form p {
border-bottom: 1px solid #ECE5DD;
padding: 12px 0 5px 0; margin: 0;
color: #9D6D37;
}
label {
font-weight: bold;
color: #A7743B;
}
input, select, textarea {
margin: 5px 0;
padding: 5px;
color: #6A6969;
border-width: 1px;
border-style: solid;
border-color: #d4d4d4 #ebebeb #ebebeb #d4d4d4;
}
option { padding-right: 0.5em; }
#name, #email, #message, #website{
width: 455px;
}
input.button {
font: bold 12px Arial, Sans-serif;
height: 30px;
margin: 0;
padding: 2px 3px;
color: #fff;
background: #A6CD56;
border-width: 1px;
border-style: solid;
border-color: #C4DE8F #8DB836 #8DB836 #C4DE8F;
}
/*-------------------------------------------
LAYOUT
--------------------------------------------*/
#wrap {
position: relative;
width: 952px;
background: #FFF url(wrap.jpg) repeat-y center top;
margin: 40px auto 30px auto;
text-align: left;
}
#content {
clear: both;
float: left;
width: 952px;
padding: 25px 0 60px 0;
}
#header {
position: relative;
width: 952px;
height: 150px;
background: #FFFFFF url(header.jpg) no-repeat;
color: #fff;
padding: 0;
margin: 0;
}
/* top-menu */
#top-menu {
position: absolute;
margin: 0;
padding: 30px 15px 8px 15px;
background: #6922ef url(top-menu.jpg) repeat-x;
font-family: 'Trebuchet MS', Arial, Sans-serif;
color: #FFF;
top: 0; right: 70px
}
#top-menu p {
margin: 0; padding: 0;
}
#top-menu a {
font-weight: bold;
color: #fff;
}
/* Navigation */
#nav {
clear: both;
padding: 0; margin: 0;
width: 952px;
height: 32px;
background: #BAA4E5 url(nav.jpg) no-repeat;
}
#nav ul {
float: left;
list-style: none;
margin: 5px 0 0 0;
height: 27px;
padding: 0 0 0 40px;
}
#nav ul li {
float: left;
margin: 0; padding: 0 0 0 5px;
}
#nav ul li a {
float: left;
margin: 0;
padding: 0 15px 0 5px;
color: #FFF;
font: bold 15px/27px 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
text-decoration: none;
}
#nav ul li a:hover,
#nav ul li a:active {
color: #6922ef;
}
#nav ul li#current {
background: transparent url(left-tab.gif) no-repeat;
}
#nav ul li#current a {
color: #4B3D2C;
background: transparent url(right-tab.gif) no-repeat right top;
}
/* Main Column */
#main {
float: left;
width: 535px;
padding: 0; margin: 0 0 0 40px;
display: inline;
}
#main h2 {
font: bold 2.9em 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
color: #51432F;
padding: 10px 0 5px 5px;
margin-left: 5px;
letter-spacing: -2px;
border-bottom: 1px solid #E4F2C8;
}
#main h2 a {
color: #51432f;
text-decoration: none;
}
#sidebar {
float: right;
width: 285px;
padding: 0;
margin: 0 45px 0 0;
display: inline;
}
#sidebar h3 {
color: #51432F;
font: bold 1.9em 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
text-transform: none;
letter-spacing: -0.5px;
padding: 5px 0 5px 7px;
margin: 10px 0 5px 10px;
border-bottom: 1px solid #E4F2C8;
}
/* footer */
#footer {
clear: both;
width: 952px;
margin: 0;
padding: 30px 0 25px 0;
background: #D7CEE8 url(footer-bottom.jpg) no-repeat left top;
font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
font-size: 0.95em;
color: #777;
text-align: center;
letter-spacing: .2px;
}
#footer p {
padding:10px 0;
}
#footer a:hover {
color: #555;
border-bottom: 1px dotted #555;
text-decoration: none;
}
/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }
/* display and additional classes */
.no-border { border: none; }
.clearer { clear: both; }
.clear { display:inline-block; }
.clear:after {
display:block;
visibility:hidden;
clear:both;
height:0;
content: ".";
}