manito: Css Tabelle verschiebt design

SELF-Forum

Css Tabelle verschiebt design

manito Homepage des Autors
– Informationen zu den Bewertungsregeln

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.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Css Tabelle verschiebt design

    manito
    – Informationen zu den Bewertungsregeln

    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: ".";  
}
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bitte immer erst validieren - danke!

      Gunther
      – Informationen zu den Bewertungsregeln

      Guten Abend!

      wenn ich auf einer Seite eine Tabelle benutze wird das ganze design (wrap) nach links verschoben! bin Anfänger und schnalls leider net.

      Na vielleicht hilft es schon mal, wenn du die Fehler erstmal beseitigst!?

      Gruß Gunther

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Css Tabelle verschiebt design

      Cheatah
      – Informationen zu den Bewertungsregeln

      Hi,

      Ich habe es ohne Tabelle versucht funkt. tip top mit Tabelle gehts nicht

      hast Du es anstatt mit einer Tabelle mit etwas versucht, das genau so lang ist? Wenn nicht: Mach mal.

      Hier noch der Code für die Seite mit Tabelle und der Css Code:

      Code zu posten ist nur dann sinnvoll, wenn die Datenmenge übersichtlich ist. Der gesamte Code lässt sich wunderbar aus den von Dir genannten Links erlesen; ihn hier zu wiederholen hilft niemandem.

      Cheatah

      --
      X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
      X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
      X-Will-Answer-Email: No
      X-Please-Search-Archive-First: Absolutely Yes
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Css Tabelle verschiebt design

        manito
        – Informationen zu den Bewertungsregeln

        Hi,

        Ich habe es ohne Tabelle versucht funkt. tip top mit Tabelle gehts nicht

        hast Du es anstatt mit einer Tabelle mit etwas versucht, das genau so lang ist? Wenn nicht: Mach mal.

        Hier noch der Code für die Seite mit Tabelle und der Css Code:

        Code zu posten ist nur dann sinnvoll, wenn die Datenmenge übersichtlich ist. Der gesamte Code lässt sich wunderbar aus den von Dir genannten Links erlesen; ihn hier zu wiederholen hilft niemandem.

        Cheatah

        Danke erstmal für die konstruktive Kritik und den guten Rat.

        Also es ist tatsächlich ein Problem der länge! ist es möglich die verschiebung wegen der scrollbar auf der rechten seite zu umgehen?

        Gruss Manito

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Css Tabelle verschiebt design

          manito
          – Informationen zu den Bewertungsregeln

          Danke für die Antwort!

          Ab und An grefi ich mir an den Kopf und sage: "aber hallo bin ich blöde!!

          Solch ein riesen theater für so etwas einfaches!

          Ich habe die lösung: overflow-y:scroll; beim body im CSS und dat problem ist behoben!

          Ohne eure hHilfe wär ich wahrscheinlich nie drauf gekommen!!

          also danke viel mal.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Css Tabelle verschiebt design

            Cheatah
            – Informationen zu den Bewertungsregeln

            Hi,

            Ich habe die lösung:

            und die Fehler, auf die Gunther Dich aufmerksam gemacht hat, hast Du auch behoben?

            Cheatah

            --
            X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
            X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
            X-Will-Answer-Email: No
            X-Please-Search-Archive-First: Absolutely Yes
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln