Table zentriert !

tru visual · 22. Juli 2007

Hi Leute !

Ich habe da etwas was für euch, was für euch sicherlich einfach ist.
Es geht um eine "blinde" Tabelle die soll im Browserfenster, immer zentriert sein.

Das bekomme ich auch hin, ABER, sie ist NUR horizontal zentriert.
Und ich möchte gerne, das sie auch vertikal zentriert ist.
Also, so das ein bild immer mittig im Browser ist, egal wie groß das Browserfenster ist.

Wie bekomme ich das hin ?

anna55 · 22. Juli 2007

Schon mal die SuFu angeworfen?

tru visual · 22. Juli 2007

anna55 schrieb:
Schon mal die SuFu angeworfen?

Hi Anna ! Habe mir die Mühe gemacht und mal die anderen postings durch gesucht, aber noch kein zutreffendes gefunden.....daher, wäre ein direkter Lösungsvorschlag sehr nett.

Gruß
tru

P.s.: valign="middle" und style="vertical-align:middle" funktionieren nicht....

dkdenz · 22. Juli 2007

tru visual schrieb:
Also, so das ein bild immer mittig im Browser ist, egal wie groß das Browserfenster ist.

Ein Lösungsansatz welcher mir spontan einfällt:

PHP:

<table style="background:url(pfad_zum_bild) center center no-repeat;">

tru visual · 22. Juli 2007

Hi dkdenz !

YOOOOOOOOO ! Das ist die richtige Lösung...ich hatte sie schon mal, aber ich habe sie gelöscht. ( center center )...und ist mir nicht wieder eingefallen.

>>>>UPS !!!!!!!! Funktioniert doch nicht !?<<<<

Nun ist das aber so...... ich möchte das gleiche Ergebniss aber nun mit einer Tabelle.....geht das ? Also eine Tabelle, die ein hintergrundbild hat.

So sieht meine HTML aus:

PHP:

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<meta name="generator" content="Adobe GoLive 5">
<link rel=stylesheet type="text/css" href="indexO.css"> 
		<title></title>
	</head>

	<body bgcolor="#123F54" link=#E87B00 vlink=#E87B00 alink=#E87B00>
<embed src=".mp3" autostart=true loop=true hidden=true height=0 width=0>
<table align="center"  border="0" cellpadding="0" cellspacing="0" width="800" background="bgO.jpg" height="600" style="margin-top:-35px;">
			<tr>	<td>
					
				</td>
				<td><div style="position:relative; top:-24px; left:449px; z-index:10"></div>
 <div style="position:relative; top:-89px; left:446px;"></div>
					<div style="position:relative; top:-70px; left:450px; width:92px">
						</div>
				</td>
			</tr>
			<tr>
				<td>
					
				</td>
				<td>
					
				</td>
			</tr>
		</table>

	</body>

</html>

DaSpecht · 22. Juli 2007

Den Hintergrund kannst du auf Tabellenebene im style-bereich definieren.

background-image:url(linkZumBild.jpg);

tru visual · 22. Juli 2007

DaSpecht schrieb:
Den Hintergrund kannst du auf Tabellenebene im style-bereich definieren.

background-image:url(linkZumBild.jpg);

Hi DaSpecht ! Vielen Dank auch an Dich !

Ich habe es ausprobiert, funktioniert aber leider nicht...

anna55 · 22. Juli 2007

Hab Dir mal nen Vorschlag gebastelt, musst noch deine Divs einstellen. Außerdem bekommst Du deine mp3 Einspielung auf diese Weise nicht validiert. Da hatten wir aber letztens erst was hier im Forum.

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 5">
<link rel=stylesheet type="text/css" href="indexO.css">
<title></title>
<style type="text/css">
html, body {
   background: #123F54;
   height: 100%;
   margin: 0px;
}
#container {
   width: 100%;
   height: 100%;
}
#content {
   width:60px;
   border:1px solid #000;
   background:#fff;
   text-align:left;
}   
a:link {
   color: #E87B00;
}
a:visited {
   color: #E87B00;
}
a:hover {
   color: #E87B00;
}
a:active {
   color: #E87B00;
}
</style> 
</head> 
<body>  
<table id="container">
   <tr>
      <td align="center" valign="middle">
         <table id="content" cellspacing="0" cellpadding="0">
            <tr>
               <td style="background:url(bgO.jpg) center center no-repeat;" >dein Inhalt</td>
            </tr>
         </table>
      </td>
   </tr>
</table>
</body>
</html>

tru visual · 23. Juli 2007

Hi Anna ! Vielen lieben Dank an Dich !!!!!
Yo, damit funktioniert es ! SUPER !!!!

Ich habe die Seite mal hoch geladen :

http://de.geocities.com/tru_visual_tv/

Da ist noch ein kleines Problem, ich habe dort Input felder und die sollten nach möglichkeit ihre position an entsprechender Stelle beibehalten.

Ich habe die CSS Syntax "position: relative" benutzt und es funktioniert auch,
aber nur horizontal und wieder nicht vertikal.

Habe eben mal statt "position: relativ" -> "position:static" benutzt. UND es sieht schon besser aus.
Aber, ich kann die Input-felder nicht verschieben ( top: 250px; left: 500px

.

WIESOooooo......?

Hier noch mal die Adresse: http://de.geocities.com/tru_visual_tv/

anna55 · 23. Juli 2007

Habs jetzt nur im FF getestet:

PHP:

#INPUT01  {
                  position: relative;
                  top: 115px;
                  left: 420px;
                  height: 17px;
                  background-color:#234656;

                  border-style:solid;
                  border-color:#FFFFFF;
                  border-width:1px;

                  color: #FFFFFF;

                  }

#INPUT02  {
                  position: relative;
                  top: 140px;
                  left: 336px;
                  height: 17px;

                  background-color:#234656;
                  border-style:solid;
                  border-color:#FFFFFF;
                  border-width:1px;

                  color: #FFFFFF;

                  }

tru visual · 23. Juli 2007

Hi Anna ! Ne', mit position:relativ hab' ich es schon probiert, aber dann ist das Input-feld zwar horizontal ok, aber nicht vertikal. Weisst Du was ich meine, oder Ihr ?

Das Input-feld soll direkt neben dem Wort "name". Und da soll es auch bleiben, egal wie groß man das browserfenster zieht.

Das muss doch irgendwie gehen oder nicht ?
Bin am verzweifeln..... hab nen freund versprochen, ne' Homepage zubasteln...

Gruß
tru

anna55 · 23. Juli 2007

Welchen Browser nimmst Du denn?
Mit diesen leicht modifizierten top und left-Werten bleiben die imput-Felder sowohl horizontal als auch vertikal bei groß- oder kleingeschobenem Browserfenster an ihrem Platz direkt neben Name und Password (im FF):

PHP:

#INPUT01  {
                  position: relative;
                  top: 112px;
                  left: 385px;
                  }

#INPUT02  {
                  position: relative;
                  top: 136px;
                  left: 301px;
                  height: 17px;
                  }

tru visual · 23. Juli 2007

Hi Anna ! Danke schön, das Du dir noch einbischen Zeit dafür genohmen hast.

Ich benutze IE die aktuelle version ( 7 ? )

Du hast recht, mit FF geht's ! Aber mit IE nicht ......?
Wie bekommt man das mit dem IE hin ?

Gruß tru

dkdenz · 23. Juli 2007

tru visual schrieb:
Bin am verzweifeln..... hab nen freund versprochen, ne' Homepage zubasteln...

SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)
Cascading Style Sheets, Level 2 - Deutsche Übersetzung
CSS 4 You - The Finest in Stylesheets

tru visual · 24. Juli 2007

Hi dkdenz !
Wie soll ich das jetzt verstehen ? Frage: Willst Du mich mit dem komentarlosen Zitat dissen ?

Ich habe zwei probleme: 1. ich habe einen Freund eine Zusage gemacht
2. Ich bekomme das alleine nicht hin, zumindest mit den Input - Feldern etc..

Aber ich denke mir das Du mich nicht dissen möchtest.
Ich bin nähmlich auf eure Hilfe angewiesen.

Gruß
tru

dkdenz · 24. Juli 2007

Ich habe Dir die Links von allgemein anerkannten Nachschlagewerken gepostet, damit Du Dich dort erst einmal umsiehst, um Dein Problem zu lösen.
(SELFHTML: Stylesheets / CSS-Eigenschaften / Ausrichtung und Absatzkontrolle)
Vielleicht bin ich dem Punkt etwas naiv, aber ich bin der Meinung, das ein Forum erst in letzter Instanz bemüht werden sollte.
Und da Du jemandem versprochen hast, ihm eine Website zu bauen, solltest Du schon ein paar Basics beherrschen.
Und wenn das Problem nicht wie gewünscht zu beheben ist, sucht man nach Alternativen.

Zudem sind Tabellen zum Layouten nicht mehr aktuell.

Und Nein. Dissen wollte ich Dich nicht...

tru visual · 24. Juli 2007

Hi !

Genau das habe ich getan, ich habe versucht mich mit einigen nachschlagewerken schlau zu machen. Aber ich bin nicht fündig geworden.

Drum habe ich hier gepostet bzw. einen thread gestartet...

Also ist das, meine ich, korrekt, sich alternativ an ein GUTES Forum wie dieses hier zu wenden.

Muss ich das Thema jetzt noch mal neu hier rein stellen ? Weil wir vom thema abgekommen sind ?

Gru
tru

dkdenz · 24. Juli 2007

tru visual schrieb:
Muss ich das Thema jetzt noch mal neu hier rein stellen ? Weil wir vom thema abgekommen sind ?

Nein! Allzusehr sind wir auch nicht vom Thema abgekommen!

Hier mal ein Alternativ-Vorschlag, welcher sicher noch verbesserungswürdig ist, aber als Ansatz hilfreich sein könnte:
Hier gucken!
Ungetestet im IE...

anna55 · 24. Juli 2007

dkdenz schrieb:
Nein! Allzusehr sind wir auch nicht vom Thema abgekommen!

Im Gegenteil: Alternativvorschläge gehören zum Thema und in diesem Fall hast Du nicht nur eine weitere Möglichkeit gezeigt bekommen, sondern bist Deine Tabelle los und der Vorschlag von dkdenz funktioniert nicht nur im FF, sondern auch im IE6, IE7, Opera und Safari (Windows). Also nimm den als Basis für's Weitermachen.

tru visual · 24. Juli 2007

Hi dkdenz! WOWww Vielen vielen Dank.
Ich bin soo froh und freue mich darüber.

Ich möchte das aber nicht nur nutzen sondern auch verstehen...
...und auch mal Tipps an andere weiter geben.

Kannst Du mir....sorry....könnt ihr mir ein wirklich gutes Buch empfehlen?

Hab' in der Bibleothek schon einiges durch geschaut, aber....
(Alle über CSS )

Du hast mit zwei <div> 's gearbeitet. Ein übergeordnetes ( Inhalt ), mit dem
Du alles zentriet hast ( background:url(bg.jpg) center center no-repeat ).

Aber margin ? weil du mit top:50% und left:50% geabeitet hast ?

Ups...ich möchte nicht zuviele Fragen stellen...

Ich versuche mal die parameter zuändern und schau, wie sich's drauf auswirkt.

Viele liebe Grüße
tru

P.s.: Anna, Dir danke ich natürlich auch ganz doll ! Danke ! ::d

Table zentriert !

New member

Moderator

New member

New member

New member

New member

New member

Moderator

New member

Moderator

New member

Moderator

New member

New member

New member

New member

New member

New member

Moderator

New member