kostenloser Webspace werbefrei: lima-city

Tabellen Layout (HILFE)

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

auto bild blocken boxen browser code display eigenschaft grafik http image inhalt kontakt layout page position problem tabelle text url
  1. Autor dieses Themas

    psd

    psd hat kostenlosen Webspace.

    6:39, 18.9.2009
    so da ich meine seite ausschlieslich aus divs gemacht hatte und nach ansicht in Safari oder IE alles verschoben war, hab ich mich erkundigt und herraus gefunden das eine mischung aus Div und table auch eine löung wäre.

    da kommt dann aber ein problem welches ich nicht zu lösen versteh :-D

    Stand der dinge:

    seiten aufbau:

    divs
    - html
    - body
    - box
    - -head
    - -navi
    - -content
    - -footer

    tabellen
    - - content ( 3x3 )

    Problem:

    die tabelle soll 100% des content divs sein. Da aber das content div eine breite von 80% hat bekomm ich da schon probleme.
    Dazu kommt noch das die px angaben von den tabellen nicht übernommen werden (ltop , midtop , rtop)

    hier mal das HTML und CSS der Tabelle+content div

    HTML
    <div id="content">
       <table class="contentt"  border="0" cellpadding="0" cellspacing="0">
        <tr>
         <td class="ltop"></td>
         <td class="midtop"></td>
         <td class="rtop"></td>
        </tr>
        <tr>
         <td class="lborder"></td>
         <td class="contenttt">TEST CONTENT</td>
         <td class="rborder"></td>
        </tr>
        <tr>
         <td class="lbtm"></td>
         <td class="midbtm"></td>
         <td class="rbtm"></td>
        </tr>
       </table>
  </div>


    CSS
    @charset "utf-8";
/* CSS table content */

table.contentt {
	height: auto;
	height: 100%;
	min-height: 100%;
	width: auto;
	width: 80%;
	min-width: 80%;
}

td.ltop {
	background-image: url(../images/content/content_ltop.png) ;
	background-repeat: no-repeat;
	height: 10px;
	min-height:10px;
	width: 10px;
	padding: 0;
	margin: 0;
	postition: fixed;
}
td.midtop {
	text-align: center;
	background-image: url(../images/content/content_midtop.png);
	background-repeat:  repeat-x;
	height: 10px;
	width: auto;
	width: 100%;
	padding: 0;
	margin-left: 10px;
}
td.rtop {
	display: block;
	background-image: url(../images/content/content_rtop.png);
	background-repeat: no-repeat;
	height: 10px;
	width: 10px;
	padding: 0;
	margin:0;
}
td.lborder {
	background-image: url(../images/content/content_mid_left.png);
	background-repeat: repeat-y;
	height: auto;
	width: 10px;
	padding: 0;
	margin: 0;
}
td.contenttt {
	height: auto;
	height: 80%;
	max-height: 95%;
	width: auto;
	width: 80%;
	max-width: 95%; 
	padding:0;
	margin-top: 10px;
}
td.rborder {
	background-image: url(../images/content/content_mid_right.png);
	background-repeat: repeat-y;
	height:100%;
	height: auto;
	width: 10px;
	padding: 0;
	margin: 0;
}
td.lbtm {
	background-image: url(../images/content/content_lbtm.png);
	background-repeat: no-repeat;
	height: 10px;
	width: 10px;
	padding: 0;
	margin: 0;
}
td.midbtm {
	background-image: url(../images/content/content_midbtm.png);
	background-repeat: repeat-x;
	height: 10px;
	width: auto;
	padding: 0;
	margin-left: 10px;
}
td.rbtm {
	background-image: url(../images/content/content_rbtm.png);
	background-repeat: no-repeat;
	height: 10px;
	width: 10px;
	padding: 0;
	margin: 0;
}
/* table end */
/* content */
#content {
	height: auto;
	height: 100%;
	min-height: 100%;
	width: 100%;
	width: auto;
	min-width: 80%;
	margin-top: 0px;
	margin-bottom: 60px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	padding: 0;
}
/* content end */


    so sieht es aus
    http://psd.lima-city.de/tm-bussines/index.html

    so sollte es eig aussehn
    http://psd.lima-city.de/bilder/tabelle.jpg

    eigenschaft der seite : je nach dem wie groß der benutzer sein browserfenster hat passt sich die seite an.

    Beitrag zuletzt geändert: 18.9.2009 8:03:50 von psd

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. color

    Kostenloser Webspace von color, auf Homepage erstellen warten

    color hat kostenlosen Webspace.

    7:00, 18.9.2009
    Also, jeder Browser hat Standardeinstellungen für z.B. margin: und paddng:. In Tabellen wirkt sich das besonders aus weil jede Zelle paddings hat und margins.

    Deswegen schreib mal

    body,html,table,tbody,thead,tfoot,th,tr,td
{
margin:0px;
padding:0px
}


    (ja ich weis geht auch kürzer ^^)

    Ein Design das sich an die Fenstergröße anpasst is ziehmlich gewagt oder? Die Grafiken würde es irgendwann total verziehen.
    Wie um alles in der Welt kommst du auf ein Layout durch tabellen?

    <div class="page">
<div class="rechts"></div>
<div class="content"></div>
<div class="links"></div>
</div>


    html,body
{
background:black;
}

.page
{
position:absolute;
top:50%
left:50%;
width:880px;
height:400px;
margin:-200px 0px 0px -410px;
background:#333;
}

.rechts,
.content,
.links
{
position:absolute;
top:5px;
width:200px;
background:#ccc;
border:1px solid black;
}

.page .rechts
{
left:5px;
}

.page .content
{
width:400px;
left:210px
}

.page .links
{
right:5px;
}


    Damit brauchts keine Tabellen mehr.
    Schau villeicht das du kein "max-height" / "min-height" verwendest, das kennen nicht alle Browser. Da ist es sicher das dir IE einen Strich durch dieRechnung macht.

    Zeichnest du eig. 3 Bilder und setzt die untereinander?? "content_mid_left.png" Mach doch 1 Bild draus.

    Grüsse
    Color
  4. Autor dieses Themas

    psd

    psd hat kostenlosen Webspace.

    7:18, 18.9.2009
    1. bekommste jetzt von mir mal Karma :thumb::-D bist echt hilfs bereit !

    also ja es ist gewagt. natürlich bau ich nachher noch eine mindest breite ein damit sich nicht alles verzieht.
    ich habs mit divs probiert da ist dann das problem das die hp sich nicht anpassen kann da ich mehr mit absolut und und und arbeiten muss.

    tabellen sind recht einfach in der handhabung nur dieses eine problem bekomm ich nicht hin :-D.
    auserdem weis ich nicht welche inhalte rein kommen, aus dem grund kann ich die breite der seite nicht mit pixel angeben.

    nicht die ganze seite ist mit table gestyled sondern nur der content und das navi ( welches ich noch un ul-tag´s um schreiben möchte)

    Wegen der grafik es ist eine weise fläche mit shadow zum abgrenzen. wenn ich dort eine fläche mach ist sie immer so groß.
    ich hab wie im bild beschrieben 4 eck grafiken und 4 seiten grafiken die jeweils nur 10 auf 1 px sind :-D und somit durch repeat immer vergrößert oder verkleinert werden können.

    eine 100% dynamische seite. ( ohne JS oder Flash) <- das sind meine vorgaben hehe

  5. color

    Kostenloser Webspace von color, auf Homepage erstellen warten

    color hat kostenlosen Webspace.

    8:51, 18.9.2009
    Aha ;D deswegen die Grafiken ^^

    Ahm Tabellen sind Blockelemente die Automatisch 100% haben und sich praktisch auch alleine Skalieren. Das macht jeder Browser halt anderst.
    Wegen dem Inhalt würde ich sagen benutzt du "overflow:auto;", damit bleibt der Container so groß wie er ist und der Inhalt wird in dem jeweiligen div dann scrollbar.
    Bei der UL-Navi musst du ebenso schauen, auch hier hat jeder Browser andere Vorstellungen welches Standarddesign eine Liste haben soll.

    Villeicht nutzt du dann einfach mal 
    *{margin:0px;padding:0px;}


    und der Rest is ja dann schnell erledigt ^^.

    PS.: Danke für das Karma :prost:

    Grüsse
    Color

    Beitrag zuletzt geändert: 18.9.2009 8:52:27 von color
  6. Autor dieses Themas

    psd

    psd hat kostenlosen Webspace.

    9:42, 18.9.2009
    ähm ich glaub ich bin zu doof ^^

    ähm hier mal die komplett css und html HIER (auch kontakt ist eingetragen aber buggy)

    CSS Layout
    @charset "utf-8";
/* CSS LayOut */
*{margin:0px;padding:0px;}

html {
	height: 100%;
	margin: 0px auto 0px auto;
}

body {
	text-align: center;
	background-image: url(../images/bg_img.gif);
	margin: 0;
	min-height: 100%;
	height: 100%;
	width: 100%;
}

#box {
	border-right: 1px solid Black;
	border-left: 1px solid Black;
	margin: auto;
	min-width: 80%;
	width: 80%;
	height: 100%;
	height: auto;
	min-height: 100%;
	background-color: White;
	position: relativ;
}

#head {
	padding: 0px;
	width: auto;
	height: 160px;
	background-image: url(../images/head/vcard.png);
	background-repeat: no-repeat;
	background-position: 100% 0%;
}

#line {
	padding-top: 0px;
	padding-bottom: 3px;
	display: block;
	margin-bottom: 0px;
	margin-top: 0px;
	background-image: url(../images/lines/line_bg.png);
	background-repeat: repeat-x;
	height: 30px;
	width: auto;
	vertical-align: bottom;
}

#content {
	overflow:auto;
	height: auto;
	height: 100%;
	min-height: 100%;
	width: 100%;
	width: auto;
	min-width: 80%;
	margin-top: 0px;
	margin-bottom: 60px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	padding: 0;
}

#footer {
	vertical-align: bottom;
	text-align: center;
	background-image: url(../images/footer/footer_bg.png);
	background-repeat: repeat-x;
	background-position: bottom;
	width: 80%;
	height: 60px;
	margin-top: auto;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	padding: 0;
	bottom: 0px;
	position: fixed;
}

#clear {
	clear: both;
}

table.navi {
	margin-top:0px;
	margin-bottom: auto;
	margin-left: 0px;
	margin-right: auto;
	padding: 0;
	height: 28px;
	width: auto;
}

table.head {
	margin-top:0px;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	height: 42px;
	width: 100%;
}
table.footert {
	margin-top: 30px;
	margin-bottom: opx;
	padding-bottom: opx;
}

td.logo {
	width: 100%;
	height: 100%;
	width: auto;
	height: auto;
	margin-top: 35px;
	margin-left: 35px;
	margin-bottom: auto;
	margin-right: auto;
	padding: 35px;
}

td.left {
	background-image: url(../images/lines/line_element_left.png);
	background-position: 0% 50%;
	height: 30px;
	width: 140px;
	padding: 0;
}
td.right {
	text-align: right;
	height: 30px;
	width: 140px;
	padding: 0;
	padding-right: 10px;
}

td.navi {
	background-image: url(../images/navi/streifengif.png);
	background-repeat: no-repeat;
	background-position: left;
	height: 25px;
	width: 100px;
	padding: 0;
	margin-left: 5px;
	margin-right: 5px;
}

td.naviblank {
	height: 25px;
	width: 20px;
	padding: 0;
	margin-left: 5px;
	margin-right: 5px;
}

td.naviend {
	background-image: url(../images/navi/streifengif.png);
	background-repeat: no-repeat;
	background-position: left;
	height: 25px;
	width: auto;
	min-width: 5px;
	padding: 0;
	margin-left: 5px;
	margin-right: 5px;
	
}

td.blank {
	height: 30px;
	width: auto;
	padding:0;
}

td.search {
	width: 150px;
	height: 30px;
	background-image: url(../images/navi/search.png);
	background-repeat: no-repeat;
	background-position: 0% 50%;
	padding-left: 15px;
	margin: auto;
}

a.navi {
	display: block;
	padding-left: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: white;
	font-size: 14px;
	font-variant: small-caps;
	text-decoration: none;
	height: 25px;
	width: 80px;
}

a.navi:active, a.navi:focus, a.navi:visited, a.navi:hover {
	padding-left:10px; 
	background-image: url(../images/navi/navi bg.gif);
	background-repeat: no-repeat;
	background-position: 0% 100%;
	font-family: Arial, Helvetica, sans-serif;
	color: white;
	font-size: 15px;
	font-variant: small-caps;
	text-decoration: none;
	height: 25px;
	width: 80px;
}

    CSS Content
    @charset "utf-8";
/* CSS table content */

table.contentt {
	height: auto;
	height: 100%;
	min-height: 100%;
	width: auto;
	width: 80%;
	min-width: 80%;
}

td.ltop {
	background-image: url(../images/content/content_ltop.png) ;
	background-repeat: no-repeat;
	height: 10px;
	min-height:10px;
	width: 10px;
	padding: 0;
	margin: 0;
	postition: fixed;
}
td.midtop {
	text-align: center;
	background-image: url(../images/content/content_midtop.png);
	background-repeat:  repeat-x;
	height: 10px;
	width: auto;
	width: 100%;
	padding: 0;
	margin-left: 10px;
}
td.rtop {
	display: block;
	background-image: url(../images/content/content_rtop.png);
	background-repeat: no-repeat;
	height: 10px;
	width: 10px;
	padding: 0;
	margin:0;
}
td.lborder {
	background-image: url(../images/content/content_mid_left.png);
	background-repeat: repeat-y;
	height: auto;
	width: 10px;
	padding: 0;
	margin: 0;
}
td.contenttt {
	height: auto;
	height: 80%;
	max-height: 95%;
	width: auto;
	width: 80%;
	max-width: 95%; 
	padding:0;
	margin-top: 10px;
}
td.rborder {
	background-image: url(../images/content/content_mid_right.png);
	background-repeat: repeat-y;
	height:100%;
	height: auto;
	width: 10px;
	padding: 0;
	margin: 0;
}
td.lbtm {
	background-image: url(../images/content/content_lbtm.png);
	background-repeat: no-repeat;
	height: 10px;
	width: 10px;
	padding: 0;
	margin: 0;
}
td.midbtm {
	background-image: url(../images/content/content_midbtm.png);
	background-repeat: repeat-x;
	height: 10px;
	width: auto;
	padding: 0;
	margin-left: 10px;
}
td.rbtm {
	background-image: url(../images/content/content_rbtm.png);
	background-repeat: no-repeat;
	height: 10px;
	width: 10px;
	padding: 0;
	margin: 0;
}


    ich weis einfach nicht an was es liegt das der content nicht volle 100% hoch ist und die grafiken (tabbellen zum teil 0px breit sind obwohl sie angegeben sind.

    wegen der kontakt seite da bin ich dann total raht los ^^ :confused:

  7. color

    Kostenloser Webspace von color, auf Homepage erstellen warten

    color hat kostenlosen Webspace.

    10:35, 18.9.2009
    Benutzt du Firefox? Es gibt für Firefox das Firebug-Plugin, wenn du das in den Firefox geladen hast, rufst du die Seite auf klickst auf Untersuchen und Untersuchst deine Seite.

    Damit kannst du CSS eigenschaften live ändern und sehen wie es sich auf die HP auswirkt, danach kannst du die Werte in die CSS-Datei eintragen und die Seite erneut anschaun.

    Du kannst so deine ganze HP durchleuchten und siehst auch schnell wo die Fehler sein könnten und musst nicht jedesmal die CSS neu abspeichern / hochladen.

    Dann wäre es auch kein Problem die Tabellen zu ersetzen durch dementsprechenden Code.

    Grüsse
    Color
  8. Autor dieses Themas

    psd

    psd hat kostenlosen Webspace.

    11:33, 18.9.2009
    doch hab ich schon, aber ich benutz einen offline test server.

    aber ich hab den fehler entdeckt ^^ hab ein table-tag vergessen zu schliesen und 2 td-tags ^^

    ich muss mein html ordnen :spammer:

    dank deiner vorschläge kann ich endlich weiter machen seite ist jetzt aktuell als demo zu sehn

    Hier

  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!