Darstellungs-/Formatierungsprobleme mit html/css

joedelord

joedelord

Aktives Mitglied
Thread Starter
Dabei seit
12.12.2002
Beiträge
492
Reaktionspunkte
0
hallo liebe macuser

die zeit in der ich eure hilfe brauche ist wieder gekommen. ich arbeite gerade an einer seite fuer einen jazz-musiker und habe nun einige probleme mit der Darstellung bzw Formatierung.

1.) Die Seite besteht aus drei 100% width tablen die außeren werden aber nur zur zierde verwendet und im inneren spielt die musik. diese innere tabelle ist wiederum in 5 spalten aufgeteilt, wovon die drei inneren eine definierte breite haben. diese drei sollten sich somit auch genau in der seiten mitte befinden, und die aeuseren sollten den restlichen platz ergaenzen.
mit safari funktioniert das problemlos, nur bei allen anderen browsern wird die seite einfach gestreckt und die   bereiche werden verdraengt.

2.) im menue der seite verwende ich drei grafiken, die ein groses bild bilden. diese bilder sollten nahtlos und ohne rand aneinander passen, was sie aber leider im moment nicht tun. (bei allen browsern)

allgemeine frage) welchen zeichensatz sollte man verwenden. im moment bin ich bei western iso 1 + http-equiv[...]ISO-8859-1 . ist das gut oder sollte ich einen anderen verwenden.


die seite schreibe ich nach den w3c 'strict' vorgaben, und die seite so wie sie jetzt vorliegt ist validiert. css + html. strukturelles aufraeumen kommt aber erst noch.

ich hoffe ich konnte mein probelm halbwegs verstaendlich zum ausdruck bringen, und hoffe auf loesungen.

danke, joedelord

ps: hier noch der quellcode:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3c//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Oskar Aichinger - TOPIC</title>

<link rel="stylesheet" type="text/css" href="../style.css">
<script src="../function.js" type="text../javascript"></script>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<!-- meta informationen WICHTIG! -->

</head>
<body>

<!-- top structural stable -->
<table class="top" width="100%">
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>

<!-- content table -->
<table class="content" width="100%" cellspacing="0" cellpadding="0">
	<tr>
		<td rowspan="3">&nbsp;</td>
		<td class="menu" colspan="3"> <!-- 310 statt 300 im stylesheet td.menu-->
		
		<!-- image border muss gefixt werden... -->
		<div class="menu_image">
		<img src="../img/start_1-3.jpg" width="100" height="100" alt="Oskar Aichinger">
		<img src="../img/start_2-3.jpg" width="100" height="100" alt="Oskar Aichinger">
		<img src="../img/start_3-3.jpg" width="100" height="100" alt="Oskar Aichinger">
		</div>
		</td>

		
		<td class="center_line" rowspan="3">
			<img class="center_line" src="../img/v_line.jpg" alt="line" height="100%" width="1">
		</td>
		
		
		<!-- content table -->
		<td class="content" rowspan="3" >
			<div class="title">Oskar Aichinger</div>
			<p class="text">Lore core modit lam zzrillandre consent augiam velenis olortie conse minibh eu feuisim doloborem irit wisit ut irilisit, con ute ming ex ex et iuscilit ut laorem vent vero con velit volor sit nonum erat utpat.
				Duisi. Lorper inci enit wis nullum nim veniamc nsequamet vullum dolortis alit elisit augiat ad tet prat. Duis accum vulpute modolor erilluptat nostion equat augue vulla consenibh et veliquat, sent ing elesecte faci tie dolor at. Ut nostrud mod esed mincidunt eriliquam velit, sectet illa consendio core modio od dolor iriustrud magnibh eu facincin ex ex el ip ex et nisl euguer in utpatie min henis et, quat. Ut vel in eriurem vercipit, consecte core ero dui eugueri scillutpat.
				Duisci bla augait, si blan henim quatie mod <br>delessed modolobore euguer iure feu facip ea feuisit augait aut wis delit autatum velit nonsequamet alis delismo olortis et acinit laorper iduip el ut in ullam nullandrer am quametumsan utpatue dolore feuisi.
				Lortin utpat veliscipit la consed minim vel delis doloborer sim digna acilit iriuscipismod ea feum vel ing estrud minit wismodo consequipit iuscil ex ex eugiam nulputpate eros num at, veliqua ionsequisi.
				Lorer sis nos er adio odolor<br> sequismolor ad dunt lorem ipsum nosto odigna feuis alisci tie core diatetue tem vel er suscincilit ipit nos alisim quamcon equatincil etumsan utpat, consequation esed ea faccum vel diametum init duis alit augue facilis am dolorperos am vero od do commy nis autpat in hendrem zzriure magnibh et nonsecte velit vel dolesed dolore veliquam vulputpatem in ullaor suscip esequat. Lorper incinibh eriliquisl utpat ullum dolortie dolessi.
				Lore feum venibh essequat. Ut wisi te eu faciduis eum venit niam ent wisiscilisl iriurem ing ex estie duisim ent aut vel eugue minibh eugait nosto erci blaoreet do dolessis ad te commodo od dunt alit praessi eugait nulput adio enisit laorera etumsan utpat, consed del dolesse uatiniam ea feugiamet wis adit augait lore magnis eril dunt ver si.
				Lortin utpat veliscipit la consed<br> minim vel delis doloborer sim digna acilit iriuscipismod ea feum vel ing estrud minit wismodo consequipit iuscil ex ex eugiam nulputpate eros num at, veliqua ionsequisi.
				Lorer sis nos er adio odolor sequismolor<br> ad dunt lorem ipsum nosto odigna feuis alisci tie core diatetue tem vel er suscincilit ipit nos alisim quamcon equatincil etumsan utpat, consequation esed ea faccum vel diametum init duis alit augue facilis am dolorperos am vero od do commy nis autpat in hendrem zzriure magnibh et nonsecte velit vel dolesed dolore veliquam vulputpatem in ullaor suscip esequat. Lorper incinibh eriliquisl utpat ullum dolortie dolessi.
				Lore feum venibh essequat. Ut wisi te eu faciduis eum venit niam ent wisiscilisl iriurem ing ex estie duisim ent aut vel eugue minibh eugait nosto erci blaoreet do dolessis ad te commodo od dunt alit praessi eugait nulput adio enisit laorera etumsan utpat, consed del dolesse uatiniam ea feugiamet wis adit augait lore magnis eril dunt ver si.
				Lortin utpat veliscipit la consed minim vel<br> delis doloborer sim digna acilit iriuscipismod ea feum vel ing estrud minit wismodo consequipit iuscil ex ex eugiam nulputpate eros num at, veliqua ionsequisi.
				Lorer sis nos er adio odolor sequismolor ad dunt<br> lorem ipsum nosto odigna feuis alisci tie core diatetue tem vel er suscincilit ipit nos alisim quamcon equatincil etumsan utpat, consequation esed ea faccum vel diametum init duis alit augue facilis am dolorperos am vero od do commy nis autpat in hendrem zzriure magnibh et nonsecte velit vel dolesed dolore veliquam vulputpatem in ullaor suscip esequat. Lorper incinibh eriliquisl utpat ullum dolortie dolessi.
				Lore feum venibh essequat. Ut wisi te eu faciduis eum venit niam ent wisiscilisl iriurem ing ex estie duisim ent aut vel eugue minibh eugait nosto erci blaoreet do dolessis ad te commodo od dunt alit praessi eugait nulput adio enisit laorera etumsan utpat, consed del dolesse uatiniam ea feugiamet wis adit augait lore magnis eril dunt ver si.
			</p>	
		</td>
		
		<td rowspan="3">&nbsp;</td>
	</tr>
	<tr>
		<td class="navigation">
			<p>Biographie</p>
		</td>
		<td class="navigation">
			<p>Musik</p>
		</td>
		<td class="navigation">
			<p>Aktuelles</p>
		</td>
	</tr>
	<tr>
		<td class="menu_content" colspan="3">
				
			<p class="menu">
			Menue Listing</p>
			
		</td>
	</tr>
</table>

<!-- bottom structural table -->
<table class="bottom" width="100%">
	<tr>
		<td>&nbsp;</td>
		<td class="bottom">
			<a href="mailto:simon.wallner@gmx.at"><img src="../img/label72.gif" alt="Simon Wallner"></a>
		</td>
		<td>&nbsp;</td>
	</tr>
</table>

</body>
</html>

Code: 
body {
	background-color:#cccccc;
	margin:0px;
	font-family:Verdana,Helvetica,sans-serif;
	}
	
p {
	font-size:12px;
	}
p.text {
	margin-top:10px;
	line-height:130%;
	}
p.menu {
	margin-top:30px;
	font-size:12px;
	}

table.top {
	background-color:#cccccc;
	height:89px;
	background-image:url(img/bgt_grau.jpg);
	background-repeat:repeat-x;
	}
table.content {background-color:rgb(255, 255, 255);}
table.bottom {
	color:#cccccc;
	height:91px;
	background-image:url(img/bgb_grau.jpg);
	background-repeat:repeat-x;
	}

td.menu {width:300px;}
td.content {
	background-color:rgb(255, 255, 255);
	width:400px;
	}
td.center_line {width:40px;}
td.navigation {width:100px;}
td.menu_content {vertical-align:baseline;}
td.bottom {width:750px;}	

div.menu_image {
	margin-top:25px;
	border:0px;
	padding:0px;
	width:310px;
	}
div.title {
	margin-top:25px;
	font-size:36px;
	}

img.center_line {
	margin-top:25px;
	margin-left:20px;
	margin-right:20px;
	}
 
ich bring das wieder mal nach oben. vielleicht faellt wem was ein...

danke, joedelord
 
hm. ein link wäre besser, als nur der quellcode ... ;)

also, was mir einfällt: 3x 100% ist irgendwie unsinnig, woher soll der browser denn wissen, welche spalte 100% des verfügbaren platzes einnehmen soll? schon war -safari macht das "richtig" aber andere Browser eben nicht ...

charset ist schon ok so ...

Frage, wer oder was hat dir den den code und css gebaut?

und setze im body auch padding auf "0"
 
danke fuer die hilfe. es sind drei eigene tablellen die jeweils 100% breite haben. das sollte glaube ich so stimmen. die obere und untere ist aber nur zierde.
link habe ich leider keinen, server gibt es noch nicht.
die ganze seite + css ist von mir mit suethaedit in handarbeit gebaut.

vielleicht faellt noch wem was ein.
danke, joedelord
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten