Inhalte scrollen

Spellchiller · 7 Dezember 2012

Hallo zusammen,

ersteinmal: Sehr gutes Forum.

Zu meinem Anliegen:

Ich habe einen sheet für meinen Aufbau. Nun ist es so, dass überbreite Inhalte (z.B. Tabellen) horizontal gescrollt werden sollen. Allerdings ist es dann so, dass der footer verrückt wird und die scrollleiste dahinter verschwindet.

Könnt mir da jmd bitte einen TIpp geben?

Dankeschön!

Code:

* {
    margin: 0;
    padding: 0;
}


body {
    font-family: Arial;
    font-size: 1em;
    color: #000;
    background-color: #F5F5F5;
    /* 879583 */
    /* 639254 */
    /* 424940 */
    width:100%; 
    height:100%;
}


a  {
    text-decoration: none;
}    


a img {
    border: 0;
    text-decoration: none;
}


p  {
    letter-spacing: 1px;
    margin-bottom: 1em;
    text-align: justify;
}


#wrapper {
    position: relative;
    width: 750px;
    margin: 30px auto;
    border: 15px solid #FFF;
    box-shadow: 0px 0px 35px #333;
    border-radius: 5px;
}


#head {
    position: relative;
    color: #000;
    background-color: #387c22;
    width: 100%;
    height: 120px;
    border-bottom: 2px solid #FFF;
}


#content {
    color: #FFF;
    background-color: #363636; 
    width: 80%; overflow:scroll;
    padding-top: 5%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 15%;
}


#db_button {
    float: center;
    text-align: center;
    vertical-align: center;
    background-color: lightgray;
    width:    250px;
    height: 40px;
    padding: 10px;
    color: black;
    font-size: 25px;
    border: 5px;
    border-style: solid;
    border-color: white;
    border-radius: 20px;
    margin: 10px;
}


#content p {
    text-align:  justify;
    margin-bottom: 1em;
    font-size: 1em;
}


#footer {
    font-size: 0.9em;
    border-top: 2px solid #FFF;
    line-height: 1em;
    position: absolute;
    bottom: 0%;
    width: 100%;
    height: 40px;
    color: #FFF;
    background-color: #387c22;
    text-align: center;
}


#footer span  {
    position: relative;
    top: 12px;
}


#head #schrift{
    position: absolute;
    top: 30%;
    right: 4%;
    width: 300px;
}


#head #logo{
    position: absolute;
    top: 14%;
    left: 4%;
    width: 130px;
}


#head #page {
    position: absolute;
    top: 38%;
    left: 4%;
    color: #FFF;
    background-color: transparent;
    font-size: 1.8em;
}


/* Text formatting */
#content  p:first-letter {
    font-weight: bold;
}


#content p.quote {
    letter-spacing: 1px;
    margin: 1.4em;
    font-size: 1.4em;
    font-style: italic;
    text-align: center;
}


#content p {
    font-weight: normal;
}


#content em {
    font-style: italic;
}


#content h2 {
    letter-spacing: 2px;
    font-size: 1.9em;
    font-weight: normal;
    font-family: Arial;
    margin-top: 0.5em;
    margin-bottom: 0.8em;
}


#content a {
    color: #FFF;
    text-decoration: none;
    font-style: italic;
}


#content a:hover {
      text-decoration: underline;
}


/* List elements */
ul {
    margin-left: 1em;
    list-style-image: url('../images/list_stern.png');
}


ul li {
    margin-bottom: 0.4em;
}


/* Form elements */
fieldset {
    border: 0;
}


legend {
    color: #FFF;
    background-color: transparent;
    float: left;
    margin-right: 1em;
    display: block;
    width: 110px;
    line-height: 1.5em;
    vertical-align: bottom;
}


input[type="text"] {
    margin-bottom: 1em;
    float: left;
    width: 210px;
    color: #000;
    background-color: #EEEEF0;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 4px;
}


input[type="submit"] {
    margin-top: 1em;
    padding: 0.5em;
    border: 1px solid #333;
    border-radius: 4px;
    display: block;
}


textarea {
    color: #000;
    background-color: #EEEEF0;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 4px;
    width: 99%;
    height: 150px;
}


input:focus, input:hover, textarea:focus, textarea:hover {
    color: #000;
    background-color: #B8C8B2;
    border: 1px solid #387c22;
}




/* Misc elements */
.zipfel {
    height: 1em;
    vertical-align: top;
    margin-left: 1.5em;
    margin-right: 1.5em;
}


.content-inner-box {
    margin: 0 auto;
    width: 58%;
    text-align: justify;
}


.content-inner-box-large {
    margin: 0 auto;
    width: 70%;
    text-align: justify;
}


.box-transparent {
    border: 1px solid #EEE;
    text-align: left;
    vertical-align: top;
    color: #000;
    background-image: url('../images/transparent.png');
    width: 90%;
    padding: 1em;
}

FoXMorayn · 7 Dezember 2012

nimm den firefox und mach einen rechtsklick auf deine webseite. -> Element untersuchen -> unten rechts auf 3D Ansicht. Das hilft oft schnell ein überstehendes element zu finden. ansonsten mach mal nen klick am äußersten rechten bereich deiner webseite und geh dort auf element untersuchen.

Spellchiller · 7 Dezember 2012

Hallo FoXMorayn,

so richtig hilft mir die Antwort nicht weiter. Bin noch nicht so lange in dem Geschäft ;

Ich habe mal einen Screenshot gemacht um zu veranschaulichen was mein Problem genau ist.

Cheffchen · 7 Dezember 2012

Hallo,

ohne Link wird das nichts, da wir ja nicht wissen konnen wie die dliederung deiner html ist.
(bitte nicht, ist noch test und nur Local :O), dann musst halt nachbar fragen der rüber kommen kann :O) )

Cheffchen

Spellchiller · 7 Dezember 2012

Hallo,

ein Link ist in der Tat schwierig.

Reicht auch nur der Code?

In dieser Seite findet das ganze statt:

PHP:

<?phpinclude_once 'checkLogin.inc.php';  ?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>             	<title>Aufbau</title>    <meta charset="utf-8">	<meta name="robots" content="index,follow">   	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <link rel="stylesheet" href="/css/reset.css">	<link rel="stylesheet" href="http://www.im-nadelwald.de/css/dbseiten_style.css">	<link rel="stylesheet" href="/css/tabelle_style.css">	<base href="/" target="_self">	<link rel="SHORTCUT ICON" href="favicon.ico" type="image/x-icon">	
</head><body>	<div id="wrapper">		<div id="head">			<a title="Zur Startseite"><img alt="Logo" id="logo" src="images/logo_weiss.gif"></a>			<a>            <img alt="Schriftzug" id="schrift" src="images/schriftzug.gif">            </a>		</div>		<div id="content">
<div class="content-inner-box-large"><?phpinclude 'config.php';include 'connect.php';

$name = $_POST["k_name"];$sql = "SELECT `kd_name`, `kd_vorname`, `kd_str`, `kd_PLZ`, `kd_geb`, `kd_tel`, `kd_email`, `kd_perso`, `kd_akut`, `kd_allergie`, `kd_arznei`, `kd_text`, `kd_platz1`, `gestochen1`           FROM `tbl_Kunden`           WHERE `kd_name` = '" . mysql_real_escape_string($name) . "'"
OR die("Error: $ergebnis <br>".mysql_error());$ergebnis = mysql_query($sql);
if(isset($ergebnis)){ }else {echo "HMMMM";}?>

<table><tr>    <th><h1>Vorname</h1></th>    <th>Name</th>    <th>Strasse</th>    <th>Postleitzahl</th>    <th>Ort</th>    <th>Geburtsdatum</th>	<th>Telefonnummer</th>    <th>Email Adresse</th>    <th>Personalausweisnummer</th>    <th>Akute Krankheiten</th>	<th>Allergien</th>	<th>Arzneimittelunverträglichkeit</th>    <th>Infotext</th>    <th>1. Tattoostelle</th>    <th>1. Tattoo gestochen von</th></tr>
<?phpwhile($row = mysql_fetch_assoc($ergebnis)) {
     echo "<tr>";     echo "<td>". $row['kd_vorname'] . "</td>";	 echo "<td>". $row['kd_name'] . "</td>";	 echo "<td>". $row['kd_str'] . "</td>";	 echo "<td>". $row['kd_PLZ'] . "</td>";	 echo "<td>". $row['kd_ort'] . "</td>";	 echo "<td>". $row['kd_geb'] . "</td>";	 echo "<td>". $row['kd_tel'] . "</td>";	 echo "<td>". $row['kd_email'] . "</td>";	 echo "<td>". $row['kd_perso'] . "</td>";	 echo "<td>". $row['kd_akut'] . "</td>";	 echo "<td>". $row['kd_allergie'] . "</td>";	 echo "<td>". $row['kd_arznei'] . "</td>";	 echo "<td>". $row['kd_text'] . "</td>";	 echo "<td>". $row['kd_platz1'] . "</td>";	 echo "<td>". $row['gestochen1'] . "</td>";	 echo "</tr>";	echo $row->Spaltenname;   }?><br><br><a href="database/kunden.html">Zurück zur Kundensuche</a><br><br><br><br><br></div>	</div>		<div id="footer">			<span>							</span>		</div>			</div>
</body></html>

Und das ist die CSS für die Seite

Code:

* {    margin: 0;
    padding: 0;
}


body {
    font-family: Arial;
	font-size: 1em;
    color: #000;
	background-color: #F5F5F5;
	/* 879583 */
	/* 639254 */
	/* 424940 */
    width:100%; 
    height:100%;
}


a  {
	text-decoration: none;
}	


a img {
    border: 0;
    text-decoration: none;
}


p  {
    letter-spacing: 1px;
	margin-bottom: 1em;
	text-align: justify;
}


#wrapper {
	position: relative;
	width: 750px;
	margin: 30px auto;
	border: 15px solid #FFF;
	box-shadow: 0px 0px 35px #333;
    border-radius: 5px;
}


#head {
	position: relative;
	color: #000;
	background-color: #387c22;
	width: 100%;
	height: 120px;
	border-bottom: 2px solid #FFF;
}


#content {
	color: #FFF;
	background-color: #363636; 
	width: 80%; overflow:scroll;
	padding-top: 5%;
	padding-left: 10%;
	padding-right: 10%;
	padding-bottom: 15%;
}


#db_button {
	float: center;
	text-align: center;
	vertical-align: center;
	background-color: lightgray;
	width:	250px;
	height: 40px;
	padding: 10px;
	color: black;
	font-size: 25px;
	border: 5px;
	border-style: solid;
	border-color: white;
	border-radius: 20px;
	margin: 10px;
}


#content p {
	text-align:  justify;
	margin-bottom: 1em;
    font-size: 1em;
}


#footer {
	font-size: 0.9em;
	border-top: 2px solid #FFF;
    line-height: 1em;
	position: absolute;
	bottom: 0%;
	width: 100%;
	height: 40px;
	color: #FFF;
	background-color: #387c22;
	text-align: center;
}


#footer span  {
	position: relative;
	top: 12px;
}


#head #schrift{
	position: absolute;
	top: 30%;
	right: 4%;
	width: 300px;
}


#head #logo{
	position: absolute;
	top: 14%;
	left: 4%;
	width: 130px;
}


#head #page {
	position: absolute;
	top: 38%;
	left: 4%;
	color: #FFF;
	background-color: transparent;
	font-size: 1.8em;
}


/* Text formatting */
#content  p:first-letter {
	font-weight: bold;
}


#content p.quote {
    letter-spacing: 1px;
    margin: 1.4em;
    font-size: 1.4em;
    font-style: italic;
    text-align: center;
}


#content p {
    font-weight: normal;
}


#content em {
    font-style: italic;
}


#content h2 {
    letter-spacing: 2px;
    font-size: 1.9em;
    font-weight: normal;
    font-family: Arial;
    margin-top: 0.5em;
    margin-bottom: 0.8em;
}


#content a {
	color: #FFF;
	text-decoration: none;
	font-style: italic;
}


#content a:hover {
  	text-decoration: underline;
}


/* List elements */
ul {
	margin-left: 1em;
	list-style-image: url('../images/list_stern.png');
}


ul li {
	margin-bottom: 0.4em;
}


/* Form elements */
fieldset {
    border: 0;
}


legend {
    color: #FFF;
    background-color: transparent;
	float: left;
	margin-right: 1em;
	display: block;
	width: 110px;
	line-height: 1.5em;
	vertical-align: bottom;
}


input[type="text"] {
	margin-bottom: 1em;
	float: left;
	width: 210px;
	color: #000;
	background-color: #EEEEF0;
	border: 1px solid #333;
	border-radius: 4px;
	padding: 4px;
}


input[type="submit"] {
	margin-top: 1em;
	padding: 0.5em;
	border: 1px solid #333;
	border-radius: 4px;
	display: block;
}


textarea {
	color: #000;
	background-color: #EEEEF0;
	border: 1px solid #333;
	border-radius: 4px;
	padding: 4px;
	width: 99%;
	height: 150px;
}


input:focus, input:hover, textarea:focus, textarea:hover {
	color: #000;
	background-color: #B8C8B2;
	border: 1px solid #387c22;
}




/* Misc elements */
.zipfel {
	height: 1em;
	vertical-align: top;
	margin-left: 1.5em;
	margin-right: 1.5em;
}


.content-inner-box {
	margin: 0 auto;
	width: 58%;
	text-align: justify;
}


.content-inner-box-large {
	margin: 0 auto;
	width: 70%;
	text-align: justify;
}


.box-transparent {
	border: 1px solid #EEE;
	text-align: left;
	vertical-align: top;
	color: #000;
	background-image: url('../images/transparent.png');
	width: 90%;
	padding: 1em;
}


[/FONT][FONT=Times New Roman]}[/FONT][FONT=Times New Roman]

Und hier für die Tabelle

Code:

table,td{
	border               : 1px solid #CCC;
	border-collapse      : collapse;
  font                 : small/1.5 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
}
table
{
	border                :none;
	border                :1px solid #CCC;
}
thead th,
tbody th
{
	background            : #FFF url(th_bck.gif) repeat-x;
  color                 : #666;  
	padding               : 5px 10px;
  border-left           : 1px solid #CCC;
}
tbody th
{
  background            : #fafafb;
  border-top            : 1px solid #CCC;
  text-align            : left;
  font-weight           : normal;
}
tbody tr td
{
	padding               : 5px 10px;
  color                 : #666;
}
tbody tr:hover
{
  background            : #FFF url(tr_bck.gif) repeat;
}


tbody tr:hover td
{
  color                 : #454545;
}
tfoot td,
tfoot th
{
  border-left           : none;
  border-top            : 1px solid #CCC;
	padding               : 4px;
  background            : #FFF url(foot_bck.gif) repeat;
  color                 : #666;
}
caption
{
	text-align            : left;
	font-size             : 120%;
	padding               : 10px 0;
	color                 : #666;
}
table a:link
{
	color                 : #666;
}
table a:visited
{
	color                 : #666;
}
table a:hover
{
	color                 : #003366;
	text-decoration       : none;
}
table a:active
{
	color                 : #003366;
[/FONT][FONT=Times New Roman]}[/FONT][FONT=Times New Roman]

Ich hoffe die Informationen sind ausreichend. :roll:

Vielen Dank im vorraus!!

Spellchiller · 7 Dezember 2012

Hmm warum auch immer ist mein Beitrag nicht zu sehen. Ist es denn gernerell gestattet beim Antworten Codes zu senden?

Das verlinken ist in der Tat schwierig. Wollte den php code, css code der seite und css der Tabellen senden.

Hier der Link: http://www.im-nadelwald.de/database/test/kunde_verwalten.php

Spellchiller · 7 Dezember 2012

Anbei der Link: Tattoostudio Im Nadelwald: Aufbau

FoXMorayn · 8 Dezember 2012

die antwort muss dir weiterhelfen! ansonsten versuch das firebug plugin. du hast nahezu keine chance dich anders zu behelfen.

Cheffchen · 8 Dezember 2012

Hallo,

also, zuerst ist die Tabelle von der glaube ich Datenbank abfrage nicht geschlossen und dann neine sql error das kann nichts werden :O).
Das musst erst mal beheben dann kann man schauen was schief läuft.

Cheffchen

Inhalte scrollen

Spellchiller

Neues Mitglied

FoXMorayn

Guest

Spellchiller

Neues Mitglied

Cheffchen

Senior HTML'ler

Spellchiller

Neues Mitglied

Spellchiller

Neues Mitglied

Spellchiller

Neues Mitglied

FoXMorayn

Guest

Cheffchen

Senior HTML'ler

Neueste Beiträge