zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Suchen Heutige Beiträge Alle Foren als gelesen markieren

Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS und Tabelle mittig

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.04.2005, 10:53
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 18.04.2005
Beiträge: 5
tom39 befindet sich auf einem aufstrebenden Ast
Standard CSS und Tabelle mittig
Hallo Leute,

komme aus dem Printbereich und bin absoluter Neuling in puncto Webdesign. Momentan arbeite ich an einer Website für einen Kunden und benötige dringend Hilfe.
Die Seite wurde komplett mit CSS Rahmen (über 20 Ebenen) gestaltet, eine Tabelle für die Navigation ist ebenfalls vorhanden. Die Ebenen liegen auch teilweise übereinander. Das gesamte Layout ist 800 x 600 px und soll im Browser bei jeder Größe oben mittig ausgerichtet werden. Nun habe ich einfach ein neues HTML-Dokument angelegt, eine Tabelle oben mittig postioniert und darin die gesamte HTML Seite abgelegt. Leider funzt das nur im IE 5.2 auf dem Mac. Alle anderen Browser zeigen das Layout weiterhin links oben, wobei die Tabelle aber mittig ausgerichtet ist. Gibt es eine Möglichkeit das so einfach zu realisieren, oder muß ich jede einzelne Ebene (Rahmen) extra postionieren? Über eine Anwort würde ich mich sehr freuen.

Beste Grüße
Tommy
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.04.2005, 11:54
Philippp
Gast
  
Beiträge: n/a
Standard
Was für Anweisungen hast du denn benutzt? Gib dem Mutterelement, in dem alle anderen Elemente sind mal ein
margin:0 auto; mit. Evtl. klappt das ja.
Ansonsten wäre ein bisschen Code in der Regel nicht schlecht. Bei 20 Ebenen... am besten online .
Gruß, Philippp
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.04.2005, 14:32
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 18.04.2005
Beiträge: 5
tom39 befindet sich auf einem aufstrebenden Ast
Standard
Hallo Philippp,

erst einmal danke für die schnelle Antwort. Leider hatte ich keinen Erfolg bis jetzt. Wenn Du Dir das antun möchtest, schicke ich Dir den Code mal per mail zu. Hierbei handelt es sich um den generierten Code aus GoLive CS ohne bisherige Änderungen. Mit den Positionierungsmöglichkeiten im Programm hatte ich bisher keinen Erfolg.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Kaese</title>
		<style type="text/css" media="screen"><!--
#TellerKaese  { visibility: visible; position: absolute; z-index: 2; top: 67px; left: 2px; width: 133px; height: 272px }
#GalerieBeilagen { visibility: visible; position: absolute; z-index: 15; top: 66px; left: 467px; width: 270px; height: 70px }
#Text2    { visibility: visible; position: absolute; z-index: 19; top: 357px; left: 467px; width: 214px; height: 214px }
#Text1   { visibility: visible; position: absolute; z-index: 19; top: 359px; left: 68px; width: 138px; height: 204px }
#head { visibility: visible; position: absolute; z-index: 11; top: 112px; left: 258px; width: 120px; height: 30px }
#NavTexte { visibility: visible; position: absolute; z-index: 10; top: 268px; left: 173px; width: 260px; height: 30px }
#BildMitte  { visibility: visible; position: absolute; z-index: 12; top: 355px; left: 264px; width: 138px; height: 204px }
#Bilderrechts  { background-color: #ff0; visibility: visible; position: absolute; z-index: 11; top: 267px; left: 699px; width: 73px; height: 73px }
#Bilderrechts2  { background-color: #ff0; visibility: visible; position: absolute; z-index: 11; top: 411px; left: 699px; width: 73px; height: 73px }
#Navigation { visibility: visible; position: absolute; z-index: 9; top: 203px; left: 173px; width: 260px; height: 65px }
#GalerieFischB { visibility: visible; position: absolute; z-index: 21; top: 34px; left: 116px; width: 36px; height: 19px }
#GalerieDessertB { visibility: visible; position: absolute; z-index: 21; top: 34px; left: 384px; width: 36px; height: 19px }
#GalerieFleischB { visibility: visible; position: absolute; z-index: 21; top: 34px; left: 250px; width: 36px; height: 19px }
#BildMitte2  { visibility: hidden; position: absolute; z-index: 13; top: 355px; left: 264px; width: 138px; height: 204px }
#Bildmitte3  { visibility: hidden; position: absolute; z-index: 14; top: 355px; left: 264px; width: 138px; height: 204px }
#Background    { visibility: visible; position: absolute; z-index: 1; top: 0; left: 0; width: 800px; height: 600px }
#NavLeistegrau   { visibility: visible; position: absolute; z-index: 20; top: 34px; left: 115px; width: 305px; height: 21px }
#Text3  { visibility: visible; position: absolute; z-index: 19; top: 306px; left: 177px; width: 405px; height: 44px }
--></style>
		<csactions>
			<csaction name="BE2535CE9" class="ShowHide" type="onevent" val0="BildMitte2" val1="1"></csaction>
			<csaction name="BE2535CE10" class="ShowHide" type="onevent" val0="BildMitte2" val1="0"></csaction>
			<csaction name="BE2535ED11" class="ShowHide" type="onevent" val0="Bildmitte3" val1="1"></csaction>
			<csaction name="BE2535ED12" class="ShowHide" type="onevent" val0="Bildmitte3" val1="0"></csaction>
			<csaction name="BE25372819" class="ShowHide" type="onevent" val0="NavigationT" val1="1"></csaction>
		</csactions>
		<csscriptdict import>
			<script type="text/javascript" src="GeneratedItems/CSScriptLib.js"></script>
		</csscriptdict>
		<csactiondict>
			<script type="text/javascript"><!--
var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		pre_home_over = newImage('bilder/buttons/home_over.gif');
		pre_home_press = newImage('bilder/buttons/home_press.gif');
		pre_uns_over = newImage('bilder/buttons/uns_over.gif');
		pre_uns_press = newImage('bilder/buttons/uns_press.gif');
		pre_kontakt_over = newImage('bilder/buttons/kontakt_over.gif');
		pre_kontakt_press = newImage('bilder/buttons/kontakt_press.gif');
		pre_fein_over = newImage('bilder/buttons/fein_over.gif');
		pre_fein_press = newImage('bilder/buttons/fein_press.gif');
		preloadFlag = true;
	}
}
CSAct[/*CMP*/ 'BE2535CE9'] = new Array(CSShowHide,/*CMP*/ 'BildMitte2',1);
CSAct[/*CMP*/ 'BE2535CE10'] = new Array(CSShowHide,/*CMP*/ 'BildMitte2',0);
CSAct[/*CMP*/ 'BE2535ED11'] = new Array(CSShowHide,/*CMP*/ 'Bildmitte3',1);
CSAct[/*CMP*/ 'BE2535ED12'] = new Array(CSShowHide,/*CMP*/ 'Bildmitte3',0);
CSAct[/*CMP*/ 'BE25372819'] = new Array(CSShowHide,/*CMP*/ 'NavigationT',1);

// --></script>
		</csactiondict>
	</head>

	<body onload="preloadImages();" bgcolor="#dcdcdc" tracingopacity="100" tracingsrc="../Struktur3.jpg">
		<div align="center">
			<div id="GalerieDessertB">
				[img]bilder/Navigation%20oben/LeisteObenEbene4.gif[/img]</div>
			<div id="TellerKaese">
				[img]bilder/kaese/TellerKaese.gif[/img]</div>
			<div id="GalerieFleischB">
				[img]bilder/Navigation%20oben/LeisteObenEbene3.gif[/img]</div>
			<div id="GalerieFischB">
				[img]bilder/Navigation%20oben/LeisteObenEbene2.gif[/img]</div>
			<table width="800" border="0" cellspacing="0" cellpadding="0" cool gridx="10" gridy="10" height="600" usegridx usegridy>
				<tr height="599">
					<td width="799" height="599"></td>
					<td width="1" height="599"><spacer type="block" width="1" height="599"></td>
				</tr>
				<tr height="1" cntrlrow>
					<td width="799" height="1"><spacer type="block" width="799" height="1"></td>
					<td width="1" height="1"></td>
				</tr>
			</table>
			<div id="Text2">
				[img]bilder/smart/KText2.gif[/img]</div>
			<div id="head">
				<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" height="30" width="130">
					<param name="movie" value="swf/kaesehead.swf">
					<param name="quality" value="best">
					<param name="play" value="true">
					<embed height="30" pluginspage="http://www.macromedia.com/go/getflashplayer" src="swf/kaesehead.swf" type="application/x-shockwave-flash" width="130" quality="best" play="true"> 
				</object></div>
			<div id="Bilderrechts">
				[img]bilder/kaese/kaeseBklein.jpg[/img]</div>
			<div id="Navigation" onmouseover="CSAction(new Array(/*CMP*/'BE25372819'));return true;" csover="BE25372819">
				<table width="244" border="0" cellspacing="2" cellpadding="0">
					<tr height="58">
						<td width="58" height="58">[img]bilder/buttons/home_grau.gif[/img]</td>
						<td width="4" height="58"></td>
						<td width="58" height="58">[img]bilder/buttons/uns_grau.gif[/img]</td>
						<td width="4" height="58"></td>
						<td width="58" height="58">[img]bilder/buttons/fein_grau.gif[/img]</td>
						<td width="4" height="58"></td>
						<td width="58" height="58">[img]bilder/buttons/kontakt_grau.gif[/img]</td>
					</tr>
				</table>
			</div>
			<div id="GalerieBeilagen">
				[img]bilder/kaese/kaeseleiste.jpg[/img]</div>
			<div id="Bilderrechts2">
				[img]bilder/kaese/kaeseCklein.jpg[/img]</div>
			<div id="Text3">
				[img]bilder/smart/KText3.gif[/img]</div>
			<div id="Text1">
				[img]bilder/smart/KText1.gif[/img]</div>
			<div id="NavTexte">
				<table width="244" border="0" cellspacing="2" cellpadding="0">
					<tr height="20">
						<td width="58" height="20"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" height="20" width="58">
								<param name="movie" value="swf/home.swf">
								<param name="quality" value="best">
								<param name="play" value="true">
								<embed height="20" pluginspage="http://www.macromedia.com/go/getflashplayer" src="swf/home.swf" type="application/x-shockwave-flash" width="58" quality="best" play="true"> 
							</object></td>
						<td width="4" height="20"></td>
						<td width="58" height="20"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" height="20" width="58">
								<param name="movie" value="swf/uns.swf">
								<param name="quality" value="best">
								<param name="play" value="true">
								<embed height="20" pluginspage="http://www.macromedia.com/go/getflashplayer" src="swf/uns.swf" type="application/x-shockwave-flash" width="58" quality="best" play="true"> 
							</object></td>
						<td width="4" height="20"></td>
						<td width="58" height="20"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" height="20" width="58">
								<param name="movie" value="swf/feinkost.swf">
								<param name="quality" value="best">
								<param name="play" value="true">
								<embed height="20" pluginspage="http://www.macromedia.com/go/getflashplayer" src="swf/feinkost.swf" type="application/x-shockwave-flash" width="58" quality="best" play="true"> 
							</object></td>
						<td width="4" height="20"></td>
						<td width="58" height="20"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" height="20" width="58">
								<param name="movie" value="swf/Kontakt.swf">
								<param name="quality" value="best">
								<param name="play" value="true">
								<embed height="20" pluginspage="http://www.macromedia.com/go/getflashplayer" src="swf/Kontakt.swf" type="application/x-shockwave-flash" width="58" quality="best" play="true"> 
							</object></td>
					</tr>
				</table>
			</div>
			<div id="BildMitte">
				[img]bilder/kaese/KaeseA.jpg[/img]</div>
			<div id="NavLeistegrau">
				[img]bilder/Navigation%20oben/LeisteObenEbene1.gif[/img]</div>
			<div id="BildMitte2">
				[img]bilder/kaese/KaeseB.jpg[/img]</div>
			<div id="Bildmitte3">
				[img]bilder/kaese/KaeseC.jpg[/img]</div>
			<div id="Background">
				[img]bilder/feinkost/Background.gif[/img]</div>
		</div>
		

</p>
	</body>

</html>
Beste Grüße
Tommy
Mit Zitat antworten
  #4 (permalink)  
Alt 18.04.2005, 14:42
Philippp
Gast
  
Beiträge: n/a
Standard
Ich weiß ja warum ich meine Seiten per Hand schreibe.... . Ich werde mir den Code mal zu gemüte führen, aber viel Hoffnung kann ich dir leider nicht machen. Das größte Problem sehe ich in den ganzen absoluten positionierungen.
Gruß, Philippp

PS: Bitte nutze die "code" Funktion um Quelltext hervorzuheben. Das macht die ganze Sache auch gleich ein bisschen übersichtlicher.
Mit Zitat antworten
  #5 (permalink)  
Alt 18.04.2005, 15:05
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 18.04.2005
Beiträge: 5
tom39 befindet sich auf einem aufstrebenden Ast
Standard
Hallo Philippp,

danke nochmal für Deine Mühe.
Gerade wegen der vielen absoluten Positionierungen dachte ich mir, es wäre günstig, das gesamte Layout einfach in eine Tabelle oder einen übergeordneten Layer zu stellen und diese auszurichten. Aber leider ist das wohl doch nicht so einfach, aber ausgerechnet im IE 5.2 funzt es, und alle anderen Brwoser nehmen den Inhalt einfach nicht mit.

Gruß
Tommy
Mit Zitat antworten
  #6 (permalink)  
Alt 18.04.2005, 17:44
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard
Naja - es geht schon.
Dazu einfach ein <div> nehmen - dieses mit position: relative versehen und mittig ausrichten. Damit wird das div dann zum Mutterelement für die anderen.

Aber grundsätzlich ist es natürlich quatsch, eine Seite mit so vielen absolut positionierten Ebenen aufzubauen. Wenn jemand die Schrift vergrößert, ist alles überlagert und du bist extrem unflexibel mit der Textlänge des Inhalts. Allerdings ist ja eh kein Text drin, sondern nur Bilder und Flash und ihr scheint mit der Seite ja ohnehin keine gute Userzugänglichkeit und Suchmaschinentauglichkeit anzustreben - von daher ist es wohl egal. Dann machs halt mit dem relativ positionierten div drumrum.
__________________
Grüße,
Terry

... die immer noch sporadisch mitliest, auch wenn sie sich wenig zu Wort meldet ...
Mit Zitat antworten
  #7 (permalink)  
Alt 18.04.2005, 19:12
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 18.04.2005
Beiträge: 5
tom39 befindet sich auf einem aufstrebenden Ast
Standard
Hallo Terry,

erst einmal danke für Deine Antwort.
Das Problem mit dem Mutterelement ist, das alle weiteren verschachtelten Rahmen diese CSS Definitionen mit übernehmen und alles wäre dann mittig ausgerichtet. Deshalb ging meine Überlegung in die Richtung eineTabelle zur Ausrichtung zu verwenden. Nur funzt das eben auch nicht zumindest wohl nicht bei mir.
Und was meinst Du mit „Userzugänglichkeit“?
Der Weg mit den Ebenen ist für mich am einfachsten und es ist ja auch der modernste. Außerdem sind einige Aktionen (Ebenensichtbarkeit, …) für mich sehr interessant, sowie die Möglichkeit der Überlagerungen der Ebenen. Das läßt sich doch mit Tabellen sicher nur recht schwierig gestalten. Aber wie es aussieht, werde ich wohl das Layout ändern müssen um doch Tabellen zu verwenden.

Beste Grüße
Tommy[/list]
Mit Zitat antworten
  #8 (permalink)  
Alt 18.04.2005, 20:05
Benutzer
neuer user
  
Registriert seit: 14.09.2004
Beiträge: 58
Spider befindet sich auf einem aufstrebenden Ast
Standard
Soviel zu Programmen zum Website erstellen.

Ich habs mal durch nen Validator laufen lassen und der hat jede Menge Fehler gefunden (sprich der Code ist keinesfalls HTML 4.01 Transitional, obwohl es so angegeben ist), daran solltest du arbeiten.

Es mag zwar sein, dass Ebenen (ich denke mal du meinst <div>s) das modernste ist, aber absolute positionierung führt das ganze ad absurdum, denn dass ist sicherlich nicht "modern".

Du solltest eher versuchen das Design ohne absolute Positionierung hinzubekommen, denn so hat das fast nur Nachteile.
(Margin, Padding, Float, usw.)
Mit Zitat antworten
  #9 (permalink)  
Alt 18.04.2005, 20:08
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard
Zitat:
Zitat von tom39
Das Problem mit dem Mutterelement ist, das alle weiteren verschachtelten Rahmen diese CSS Definitionen mit übernehmen und alles wäre dann mittig ausgerichtet.
Häh - das versteh ich jetzt nicht. Das ganze säße dann in Mitte - sonst nichts.

Zitat:
Deshalb ging meine Überlegung in die Richtung eineTabelle zur Ausrichtung zu verwenden.
Wo wäre da der Unterschied zum <div>? Beides sind Blockelemente und reagieren auch so.

Zitat:
Und was meinst Du mit „Userzugänglichkeit“?
Du setzt voraus, dass Javascript aktiviert ist und ein Flashplayer vorhanden ist. Außerdem müssen alle Leute gute Augen haben, da sie sonst vermutlich die Schrift im Flash nicht lesen können (keine Ahnung, wie groß die da ist). Falls du noch Text in die <div>s setzen willst, so darf auch da nicht an der Schriftgröße rumgedreht werden, da sich sonst unweigerlich die <div>s überlagern und Text abgeschnitten wird.
Suchmaschinen können übrigens weder Javascript noch Flash - die finden also gar nichts auf der Seite.

Zitat:
Der Weg mit den Ebenen ist für mich am einfachsten und es ist ja auch der modernste.
Dann beschäftige dich bitte damit und klicker nicht nur irgendwelche absolut positionierten Ebenen im GoLive zusammen. Es gibt weitaus mehr Möglichkeiten der Positionierung, die viel flexibler sind (static, float z.B.).

Zitat:
Außerdem sind einige Aktionen (Ebenensichtbarkeit, …) für mich sehr interessant,
Mit Aktionen meinst du sicher Javascript...

Zitat:
Aber wie es aussieht, werde ich wohl das Layout ändern müssen um doch Tabellen zu verwenden.
Warum? Lerne CSS und wende es vernünftig an!
__________________
Grüße,
Terry

... die immer noch sporadisch mitliest, auch wenn sie sich wenig zu Wort meldet ...
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.04.2005, 08:19
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 18.04.2005
Beiträge: 5
tom39 befindet sich auf einem aufstrebenden Ast
Standard
Hallo Terry,

danke für Deine Hilfe, sehr interessant.

Grüße
Tommy
Mit Zitat antworten
Sponsored Links
Antwort

« Vorheriges Thema | Nächstes Thema »
Themen-Optionen
Ansicht
Linear-Darstellung Linear-Darstellung

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Clearfix / CSS Reset / CSS Hacks 2016 Elma CSS 7 14.08.2016 02:12
bild per css mittig setzen irmen CSS 4 25.08.2014 11:38
"Reine" CSS Alternative für DIESE Tabelle...? Forgetta CSS 8 16.07.2010 12:01
CSS Tips & Tricks Webnauts Ressourcen 0 25.08.2006 23:04
Tabelle mit CSS zentrieren to.ni CSS 8 27.02.2004 10:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:19 Uhr.

Datenschutzerklärung - Impressum - Archiv - Nach oben

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023