XHTMLforum - Table align="Center" in CSS integrieren

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Table align="Center" in CSS integrieren (http://xhtmlforum.de/showthread.php?t=61182)

Height: 100% funktioniert nicht so richtig

Hi .....

bin gerade dabei eine weitere Seite aufzubauen. Soweit hat das auch alles geklappt. Ich hab nur noch ein Problem.
Ich bekomme diesen html code nicht in die CSS integriert. Alle versuche die ich durchführte brachten nicht das identische Ergebnis. Muss dazu sagen das ich die Seite in header, inhalt und footer unterteil haben und quasi den header und footer per include integriere.
Hier mal der code von der header.php

Code:

</head>

<body>

<table align="center" width="843" border="0" cellpadding="0" cellspacing="0"  >

<tr>

<td  class="li">&nbsp;</td>

<!--ende aussentab-->

<td  >

<!--leiste-->

<table align="center" width="820" border="0" cellpadding="0" cellspacing="0"  >

<tr>

<td id="top">&nbsp;</td>

</tr>

<tr>

<td id="leiste1">"<b>P</b>fiff" <b >d</b>ie <b >K</b>leingaststätte</td>

</tr>

</table>

<!--ende header-->

und footer.php

Code:

</tr>

<tr>

<td colspan="2" id="fussb"><a href="<?php echo $root_dir; ?>www.google.de">www.pfiff-kleingaststätte.de</a></td>

</tr>

    </table>

  </div>

</td>

<!-- aussentab-->

<td class="re">&nbsp;</td>

</tr>

    </table>

  </div>

</body>

</html>

Seite habe ich hochgeladen. Hier der Demolink: Pfiff "Gasthaus zum Wahnsinn"

Weiterhin habe ich einen Unterschied im IE 7 u 8 zu FF. Es geht um den Wert in der format.css

Code:

#sp2 {

font-size: 15px;

height:800px;

color:#93A5A9;

padding-top: 30px; padding-bottom: 40px;

padding-left: 20px;padding-right:20px;

background-color:#202020;letter-spacing:0px;width:100%;

}

Das padding-top wird im IE weiter oben angezeigt als im FF, dabei gehts jeweils um den Inhalt der jeweiligen Seiten. Wäre schön wenn das man so hinbekommen würde das beide gleich angezeigt werden.
Hier noch die komplette css:

Code:

body

{margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px; background-image:url(images/bg.jpg); 

}



td {font-size: 97%;line-height: 125%;

font-family: arial, helvetica, tahoma ,verdana,  sans-serif;

text-align:left}



h2{ color:#969696;



text-decoration:underline;

font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif; font-size: 20px;

}



h3{ color:#C0C0C0;

margin-bottom:20px;letter-spacing:2px;

text-decoration:none;

font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif;font-size: 115%;

}



fieldset { 

border:none;

}

/* hauptgerüst */



table.sample {

margin:auto;

border-width: 0px 0px 0px 0px;

border-spacing: 0px;

margin: auto; 

}



.bilder { 

float:left;

text-align:center;

padding: 10px;

font-style:italic;

}



.links { 

float:left;

padding-left: 0;

}



.rechts {

float:right;

padding-right: 10px;

}



.clear {

clear:left;

}



.ul {

padding-left: 10px;

padding-right: 10px;

} 



.li {

width:12px;

background-image:url(images/rand1.jpg);

}





.re {

width:11px;

background-image:url(images/rand2.jpg);

}





#top {background-image:url(images/back.jpg);

background-repeat:repeat-y;

vertical-align:bottom;

height:180px;

background-color:#1F1F1F;

}



#leiste1 {height:0px;

font-size: 18px;

background-color:#000;

height:30px;

letter-spacing:10px;

color:#56686D;

font-variant:small-caps;

padding-left:10px;

padding-bottom:1px;

width:100%;

vertical-align:bottom;border-bottom:solid 1px #535353;

border-top:solid 1px #535353;

font-family: georgia,arial, helvetica, tahoma ,verdana,  sans-serif;

}





#sp1 {color:#fff;font: normal 11px/15px verdana, sans-serif; padding-left: 20px;padding-right:20px;padding-top: 30px;

background-color:#151515;

}



#sp2 {

font-size: 15px;

height:800px;

color:#93A5A9;

padding-top: 30px; padding-bottom: 40px;

padding-left: 20px;padding-right:20px;

background-color:#202020;letter-spacing:0px;width:100%;

}



#sp3 {

font-size: 14px;

vertical-align:top;

padding-left:10px;

color:#93A5A9;

background-color:#202020;letter-spacing:0px;width:100%;

}



#fussb {font: normal 11px verdana, sans-serif; color: #fff; padding:2px;

height:24px;

text-align:center;

background-color:#222222;width:100%;

border-top:solid 1px #343434;



}

/* scrolleiste internet explorer ab vers.5.5 */









/* menue  */



#menu1 a , #menu1 a:visited , #menu1 a:active {display:block;

color:#93A5A9;

font: normal 16px verdana, sans-serif;

text-decoration:none ;

text-align:left;

width:160px;

border-bottom:solid 1px #313131;

font-size: 13px;line-height: 180%;

font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif;

}



#menu1 a:hover{

background-color:#262626;

color:#fff;

text-decoration:none ;

}





/* allgemeine links im text */



a:link, a:visited, a:active{ font-family: arial, helvetica, tahoma ,verdana,  sans-serif;

font-size: 97%;line-height: 125%;

text-decoration:underline;color:#56686D;}



a:hover{ text-decoration:none;background-color:#4F4F4F;

color:#000;text-decoration:none;}



/* Kontakt */

#kontaktform { clear: left; float: left; line-height: normal; width: 500px; margin: 0px 0px 10px 0px; padding: 0px 10px 10px 10px; }

#kontaktform label { clear: left; float: left; width: 100px; margin: 5px 4px 0px 0px; text-align: left; }

#kontaktform label.plabel { color: #C0C0C0; font-weight: bold; }

#kontaktform input, #kontaktform select, #kontaktform textarea { float: left; width: 250px; margin: 5px 0px 5px 0px; border: 1px solid #dedede; }

#kontaktform select{ width: 260px; color: #333; }

#kontaktform input{ padding: 2px 4px 2px 4px; color: #333; }

#kontaktform textarea{ padding: 2px 4px 2px 4px; height: 100px; color: #333; }

#kontaktform input.submit { width: auto; float: left; margin: 10px 5px 0px 105px; padding: 2px 10px 2px 10px; background-color: #ccc; color: #333; }

#kontaktform input.reset { width: auto; float: left; margin: 10px 10px 0px 0px; padding: 2px 10px 2px 10px; border: 1px solid #2F3842; background-color: #666; color: #ccc; }

Danke schon einmal für Tipps und Hilfen.

Gruß Huchi

Hi .........

weiss nicht ob pushen hier erlaubt ist aber würde mich über einen Tipp für die 2 Problemchen freuen.
Der tag align sorgt noch für den einzigen Fehler bei der html Validierung.

Gruß Huch

Moin,

nimm erst mal den Kommentar () vor dem Doctype raus, sowas mag der IE gar nicht.

Die Zahl der Helfer sinkt i.d.R. geradezu drastisch wenn man ein Tabellendesign präsentiert.
Viele kennen sich damit nicht mehr aus (ich auch!) weil es von vorgestern ist. ;)

Zitat:

Zitat von hubspe (Beitrag 466274)

Hm was wäre die alternative zum Tabellendesign? Alles in div containern zu setzen? Sprich alle Tabellen mit div containern ersetzen?
Kommentar rausgenommen

Gruß Huch

schau mal hier, dort wird dir auf unterhaltsame Weise modernes Webdesign nahegebracht. ;)

Zitat:

Zitat von hubspe (Beitrag 466276)

schau mal hier, dort wird dir auf unterhaltsame Weise modernes Webdesign nahegebracht. ;)

Hi ...........

erst einmal vielen Dank für den Tipp. Hab mir Teil 1 zugelegt und auch schon durchgelesen. Sehr unterhaltsam muss ich sagen.
Hab auch angefangen die Webseite nun rein auf CSS aufzubauen ohne Tabellen. Soweit hat das auch im Grunde schon geklappt. Hier mal der erste Entwurf rein auf CSS Container aufgebaut:
http://img268.imageshack.us/img268/7400/websw.th.jpg

Uploaded with ImageShack.us

Nur ein Problem habe ich noch. In meinem Layout mit Tabellen habe ich rechts und links jeweils eine kleine Grafik die ich als Rand benutze (siehe Pfiff "Gasthaus zum Wahnsinn"). Die Grafik ist 12px bzw. 11px breit und ich wiederhole diese mit repeat y.
Beim Umbau auf css ohne Tabellen bekomme ich das aber irgendwie nicht hin. Kann mir einer einen Tipp geben wie ich rechts und links die Grafik integrieren kann?
Hier mal meine css

Code:

/*  ===============================================

Stylesheet für die Übungsseiten aus  "Little Boxes, Teil 1"

Stand:  3-spaltiges Layout mit float und margin (fertig)

Datei:  bildschirm.css

Datum:  2009-04-17

Autor:  Peter Müller

Aufbau: 1. Kalibrierung und Restauration

        2. Allgemeine Styles

        3. Styles für Layoutbereiche

        4. Sonstige Styles

================================================ */



/* ======================================

  1. Kalibrierung und Restauration

  ====================================== */

/* Reset - alle Abstände auf NULL */

*  { padding: 0; margin: 0; }

/* optional: erzwingt Scrollbar im Firefox */

html { height: 100%; margin-bottom: 1px; }

h2, h3, p, ul, ol { margin-bottom: 1em; }

ul ul { margin-bottom: 0; }

li { margin-left: 1em ; }

/* hier ggfs. Abstände für weitere Elemente restaurieren */





/* ======================================

  2. Allgemeine Styles

  ====================================== */

body {

  background-color: #8c8c8c;

  background-image:url(images/bg.jpg); 

}

h1 { font-size: 150%; }

h2 { font-size: 130%; }

h3 { font-size: 110%; } 

 

img#logo {

  background-color: white;

  color: black;

}

/* Skiplink ausblenden */

.skiplink {

  position: absolute;

  top: -9999px;

  left: -9999px;

  width: 0;

  height: 0;

  font-size: 0;

  line-height: 0;

}



/* ======================================

  3.  Styles für die Layoutbereiche

  ====================================== */

#wrapper {

  /* Hintergrundgrafik für drei Spalten */

  background-color:#151515;

  width: 820px;

  margin: 0px auto;

}



#kopfbereich {

  height:180px;

  position: relative;

  color: black;

  padding: 0px 0px 0px 0px;



}



#top {

position: relative;

background-color:#000;

height:30px;

width: 820px;

border-bottom:solid 1px #535353;

border-top:solid 1px #535353;

}



  #top p {

  font-size: 18px;

  font-variant:small-caps;

  color:#56686D;

  letter-spacing:10px;

  padding-left:10px;

  padding-top:5px;

  font-family: georgia,arial, helvetica, tahoma ,verdana,  sans-serif;

  }

  

#navibereich {

  /*background-color: pink; */ /* zum Testen Kommentar entfernen */

  background-color:#151515;

  float: left;

  width: 160px;

  padding-left: 20px;

  padding-top: 20px;

  margin-top: 0px;

}

  #navibereich ul {

    width: 6em;

  }

  #navibereich li {

    list-style-type: none;

    margin: 0;

  }

  #navibereich a {

        display:block;

        color:#93A5A9;

        font: normal 16px verdana, sans-serif;

        text-decoration:none ;

        text-align:left;

        width:160px;

        border-bottom:solid 1px #313131;

        font-size: 13px;line-height: 180%;

        font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif;

  }



  #navibereich a:hover,

  #navibereich a:focus {

        background-color:#262626;

        color:#fff;

        text-decoration:none ;

  }

  #navibereich a:active {

    color: black;

    background-color: #d9d9d9;

  }

  

/* Style für #sidebar */

#sidebar {

  color:#93A5A9;

  background-color:#151515;

  float: right;

  width: 110px;

  padding: 10px;

  padding-top: 20px;

  margin-top: 0px;

}

#textbereich {

  color:#93A5A9;

  padding: 20px 10px 20px 20px;

  margin-left: 180px; /* Platz für #navibereich */

  margin-right: 140px; /* Platz für #sidebar */

  background-color:#202020;

  margin-top: 0px;

}

  #textbereich a {

  border-bottom: 1px dotted #cc0000;

}

  #textbereich a:hover,

  #textbereich a:focus {

    border-bottom: 1px solid #d90000;

  }



#fussbereich {

  clear:both;

  font: normal 11px verdana, sans-serif; 

  color: #fff; 

  padding:0px;

  height:24px;

  text-align:center;

  background-color:#222222;

  width:100%;

  border-top:solid 1px #343434;

}







/* Kontakt */



#kontaktform { clear: left; float: left; line-height: normal; width: 500px; margin: 0px 0px 10px 0px; padding: 0px 10px 10px 10px; }



#kontaktform label { clear: left; float: left; width: 100px; margin: 5px 4px 0px 0px; text-align: left; }



#kontaktform label.plabel { color: #C0C0C0; font-weight: bold; }



#kontaktform input, #kontaktform select, #kontaktform textarea { float: left; width: 250px; margin: 5px 0px 5px 0px; border: 1px solid #dedede; }



#kontaktform select{ width: 260px; color: #333; }



#kontaktform input{ padding: 2px 4px 2px 4px; color: #333; }



#kontaktform textarea{ padding: 2px 4px 2px 4px; height: 100px; color: #333; }



#kontaktform input.submit { width: auto; float: left; margin: 10px 5px 0px 105px; padding: 2px 10px 2px 10px; background-color: #ccc; color: #333; }



#kontaktform input.reset { width: auto; float: left; margin: 10px 10px 0px 0px; padding: 2px 10px 2px 10px; border: 1px solid #2F3842; background-color: #666; color: #ccc; }

und die index.html

Code:

<body>

<body id="startseite">

<div id="wrapper">

<div id="kopfbereich">

<div class="skiplink"><a href="#textbereich"></a></div>

<img src="http://xhtmlforum.de/images/back.JPG" id="logo" alt="Pfiff die Kleingaststätte" width="820" />

</div> <!-- Ende kopfbereich -->

<div id="top"><p>"Pfiff" - Die Kleingaststätte</p></div>

<div id="navibereich">

<ul>

  <li id="navi01"><a href="index.html">Startseite</a></li>

  <li id="navi02"><a href="galerie.html">Galerie</a></li>

  <li id="navi03"><a href="kontakt.html">Kontakt</a></li>

</ul>

</div> <!-- Ende navibereich -->



<div id="sidebar">

<h2>Werbung</h2>

<p>Hier könnte Ihre Werbung stehen</p>

<p>Werben Sie auf Pfiff.de</p>

</div> <!-- Ende sidebar -->



<div id="textbereich">

<h2>Startseite</h2>



<p><img src="ballon.jpg" alt="Roter Luftballon" width="78" height="100" class="bildrechts" />Dies ist ein Test Text <strong>auf Pfiff.de</strong>, dieser Text dient rein zu Testzwecken damit das Layout Grundgerippe angepasst werden kann.</p>



<p>Auf dieser Seite steht keine informativer Text und somit ist das auch nichts was sich sehen lassen kann<em>solange</em> bis das Grundlayout steht das für diese <em>Webseite</em> verwendet wird</p>



<ul>

  <li>Test 1</li>

  <li>Test 2

  <ul>

    <li>Untertest 1</li>

    <li>Untertest 2</li>

    <li>Untertest 3</li>

  </ul>

  </li>

  <li>Test 3</li>

</ul>



<p>Besuchen Sie <a href="http://www.google.de" title="google.de - die Suchmaschine">die Suchmaschine im Web</a> für weitere Informationen.</p>



</div> <!-- Ende textbereich -->



<div id="fussbereich">

<address>

<a href="<?php echo $root_dir; ?>www.gaststaette-pfiff.de">www.gaststaette-pfiff.de</a>&nbsp;|&nbsp;<a href="<?php echo $root_dir; ?>impressum.php">Impressum</a>&nbsp;|&nbsp;<a href="mailto:mirco.lang@freenet.de">Design by Mirco Lang</a>&nbsp;|&nbsp;<a href="<?php print $node_url?>#top">Seitenanfang</a>

</address>

</div> <!-- Ende fussbereich -->

</div> <!-- Ende wrapper -->

</body>

</html>



<!-- ende footer -->

Edit: Hab mal ein Layout hochgeladen damit ihr seht was ich meine

Eine Grafik draus machen und dem Wrapper zuweisen.

Zitat:

Zitat von heiko_rs (Beitrag 467976)

Eine Grafik draus machen und dem Wrapper zuweisen.

Hi .........

Grafik ist vorhanden als rand1.jpg und rand2.jpg für rechts und links.
Dem wrapper zuweisen? Meinst du als border image sprich

Code:

border-left-image : url("images\rand1.jpg") repeat-y;

border-right-image : url("images\rand2.jpg") repeat-y;

Wenn ja muss ich da dann auch noch die bordergröße in px angeben?

Gruß Huch

Zitat:

Zitat von Huchinotte (Beitrag 467982)

Grafik ist vorhanden als rand1.jpg und rand2.jpg für rechts und links.

Wie gesagt, mache eine draus.

Zitat:

Zitat von Huchinotte (Beitrag 467982)

Meinst du als border image

Nein, als background-image mit repeat-y. Der Wrapper bekommt dafür z.B. horiz. padding.

Zitat:

Zitat von heiko_rs (Beitrag 467984)

Wie gesagt, mache eine draus.

:oops: ach so hast das gemeint ....

Also sieht schon besser aus aber will noch nicht so ganz wie ich möchte. Hab dem wrapper nun ein image und ein reapet-y zugewiesen

Code:

#wrapper {

  /* Hintergrundgrafik für drei Spalten */

  background-color:#151515;

  background-image:url(images/rand1.jpg);

  background-repeat:repeat-y;

  width: 844px;

  margin: 0px auto;

}

Leider wird nur der linke Rand angezeigt.
http://img121.imageshack.us/img121/9694/websd.th.jpg

Der Platz für den rechten ist vorhanden nur zeigt er nichts an. Was mich noch stutzig, ich benutze im wrapper das background-color um die navibox links und die werbungsbox rechts aufzufüllen. Weil die Box ja nur so groß ist wie sein Inhalt. Beisst sich das dann nicht wenn ich dem wrapper das image zuweise?