Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Problem mit der Größe =(“

KriZ-MC

Nicht mehr ganz neu hier

Hallo,

ich habe für meine Seite ein neues Design gemacht und wollte das gerade fertig machen... nun hab ich aber ein problem... ich hab eine neue Art von Layout (Ich hatte vorher noch nicht so eins) gebastelt... 3 Spalten neben einander "Menü/Inhalt/ShoutBox" und das problem jetzt ist folgendes:

Wenn der Inhalt des Menüs größer ist als die eigentlich Grafik vergrößert sich die Grafik nach unten... soweit is ja alles ok... nur irgendwie werden die beiden Spalten daneben auch größer "Inhalt/ShoutBox"...

<--- So sieht das nu aus...

Hier der folgende Code dazu:

HTML:
<HTML>
<HEAD>
<TITLE>TierZimmer.de</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="EXPIRES" CONTENT="0">
<META NAME="RESOURCE-TYPE" CONTENT="DOCUMENT">
<META NAME="robots" CONTENT="index,follow">
<META NAME="language" CONTENT="de">
<META NAME="DISTRIBUTION" CONTENT="GLOBAL">
<META NAME="AUTHOR" CONTENT="TierZimmer.de - Das Heim für Mensch und Tier !">
<META NAME="COPYRIGHT" CONTENT="Copyright (c) 2007 by TierZimmer.de">
<META NAME="KEYWORDS" CONTENT="News, Internet, Download, Video, fotografie, forum, Rasen, Futter, Mensch, Kind, Baby, Leib, Huhn, Wölfe, Legu, Leguan, 50, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 15, Hase, Ostern, foto, treffpunkt, community, allgemein, zubehör, test, vergleich, tipps, tricks, hilfe, erklärung, fragen, antworten, suche, biete, kleinanzeigen, Bremen, Hamburg, Berlin. München, Weser, Bayern, Niedersachen, Weltweit, Globus, Tierwelt, Tier, Tiere, Zimmer, Kinder, Freude, Käfig, Zähne, Zahn, Krallen, Ohren, Knochen, Katzen, Hunde, Hund, Bären, Tieger, Löwen, Löwe. Mähne, Maus, Ratte, Katzenklo, Macht, Deutschland, Köln, Augen, Farben, Heu, Stroh, Häuschen, Häuser, Heim, Tierheim, Wasser, Fisch, Fische, Aquarium, Welpen, Krankheiten, etc, Liebe, Musik, galerie, fotowettbewerb,">
<META NAME="DESCRIPTION" CONTENT="TierZimmer.de - Das Heim für Mensch und Tier !">
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
<META NAME="REVISIT-AFTER" CONTENT="1 DAYS">
<META NAME="RATING" CONTENT="GENERAL">
</HEAD>
<BODY BGCOLOR=#FCFFE4 link=#8B4513 vlink=#8B4513 alink=#8B4513 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<CENTER>
  <table marginwidth="0" marginheight="0" border="0" height="100%" style="height:100%"> 
    <tr> 
      <td style="vertical-align:top"><TABLE WIDTH=800 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=7>
			<IMG SRC="Bilder/header.gif" WIDTH=906 HEIGHT=170 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=7>
			<IMG SRC="Bilder/TierZimmerDesign-2_02.gif" WIDTH=906 HEIGHT=28 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=3>
			<IMG SRC="Bilder/TierZimmerDesign-2_03.gif" WIDTH=130 HEIGHT=17 ALT=""></TD>
		<TD style="background-image:url(Bilder/lauf.gif);width:590;height:17;"><FONT COLOR=#000000 FACE=Tahoma SIZE=1>
<div style="overflow:auto;width:590;height:17"><CENTER>
<marquee behavior="alternate" scrollamount="2">Herzlich Willkommen auf TierZimmer.de ! Meldet Euch doch Bitte im Forum an.</marquee>
</CENTER></div></TD>
		<TD COLSPAN=3>
			<IMG SRC="Bilder/TierZimmerDesign-2_05.gif" WIDTH=186 HEIGHT=17 ALT=""></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="Bilder/TierZimmerDesign-2_06.gif" WIDTH=11 HEIGHT=125 ALT=""></TD>
		<TD style="background-image:url(Bilder/menu.gif);width:102;"><FONT COLOR=#000000 FACE=Tahoma SIZE=1>
<div style="overflow:auto;width:102;">
ghgfjgh<br>irjskalfdj<br>kfsdja<br>
ghgfjgh<br>irjskalfdj<br>kfsdja<br>
ghgfjgh<br>irjskalfdj<br>kfsdja<br>
ghgfjgh<br>irjskalfdj<br>kfsdja<br>
ghgfjgh<br>irjskalfdj<br>kfsdja<br>
ghgfjgh<br>irjskalfdj<br>kfsdja<br>
ghgfjgh<br>irjskalfdj<br>kfsdja<br>
ghgfjgh<br>irjskalfdj<br>kfsdja<br>
ghgfjgh<br>irjskalfdj<br>kfsdja<br>
ghgfjgh<br>irjskalfdj<br>kfsdja<br>

</div></TD>
		<TD>
			<IMG SRC="Bilder/TierZimmerDesign-2_08.gif" WIDTH=17 HEIGHT=125 ALT=""></TD>
		<TD style="background-image:url(Bilder/inhalt.gif);width:590;"><FONT COLOR=#000000 FACE=Tahoma SIZE=2>
<div style="overflow:auto;width:590;"><CENTER>
bfvgnmjdghmjgf
</div></TD>
		<TD>
			<IMG SRC="Bilder/TierZimmerDesign-2_10.gif" WIDTH=17 HEIGHT=125 ALT=""></TD>
		<TD style="background-image:url(Bilder/shout.gif);width:159;"><FONT COLOR=#000000 FACE=Tahoma SIZE=2>
<div style="overflow:auto;width:159;">

</div></TD>
		<TD>
			<IMG SRC="Bilder/TierZimmerDesign-2_12.gif" WIDTH=10 HEIGHT=125 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=7>
			<IMG SRC="Bilder/TierZimmerDesign-2_13.gif" WIDTH=906 HEIGHT=29 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=7>
			<IMG SRC="Bilder/TierZimmerDesign-2_14.gif" WIDTH=906 HEIGHT=17 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=3 ROWSPAN=2>
			<IMG SRC="Bilder/TierZimmerDesign-2_15.gif" WIDTH=130 HEIGHT=153 ALT=""></TD>
		<TD style="background-image:url(Bilder/werbung.gif);width:590;"><FONT COLOR=#000000 FACE=Tahoma SIZE=2>
<div style="overflow:auto;width:590;">
vcbhgfh
</div></TD>
		<TD COLSPAN=3 ROWSPAN=2>
			<IMG SRC="Bilder/TierZimmerDesign-2_17.gif" WIDTH=186 HEIGHT=153 ALT=""></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="Bilder/TierZimmerDesign-2_18.gif" WIDTH=590 HEIGHT=29 ALT=""></TD>
	</TR>
	<TR>
		<TD ROWSPAN=2>
			<IMG SRC="Bilder/TierZimmerDesign-2_19.gif" WIDTH=11 HEIGHT=29 ALT=""></TD>
		<TD COLSPAN=5>
			<IMG SRC="Bilder/unten.gif" WIDTH=885 HEIGHT=17 ALT=""></TD>
		<TD ROWSPAN=2>
			<IMG SRC="Bilder/TierZimmerDesign-2_21.gif" WIDTH=10 HEIGHT=29 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=5>
			<IMG SRC="Bilder/TierZimmerDesign-2_22.gif" WIDTH=885 HEIGHT=12 ALT=""></TD>
	</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>

Sorry für diesen Code... aber ich kanns nicht besser *g* und CSS kann ich garnicht ^^

Könnte mir Bitte irgendwer helfen ? :)

LG
 

toxictoon

Pixelpatriot

AW: Problem mit der Größe =(

ist klar... du hast ja eine feste tabelle, d.h. wenn sich in einer zelle der inhalt nach unten vergrössert wandert der ganze "körper" der anderen zellen mit....
 

feelx75

Hotpixel

AW: Problem mit der Größe =(

Hallo

Du hast es als einzelne Tabelle gemacht (3spaltig) - Das kannst du dir so vorstellen, wie in einer Textverarbeitung - da werden die Spalten in der Mitte und rechts ja auch höher, wenn du die erste vergrösserst.

Wenn du das nicht willst, dann kannst du das ja mit zwei Tabellen lösen (eine eigene für das Menu - und eine zweispaltige für Inhalt und Shoutbox). Dann reagieren sie unabhängig von einander..

Allerdings sollte man ja heutzutage keine reinen Tabellen-Layouts verwenden, sondern eben via CSS formatieren. Das möchtest du aber vielleicht erst in einem nächsten Schritt angehen...

Good Luck
 

toxictoon

Pixelpatriot

AW: Problem mit der Größe =(

Hallo

Allerdings sollte man ja heutzutage keine reinen Tabellen-Layouts verwenden, sondern eben via CSS formatieren. Das möchtest du aber vielleicht erst in einem nächsten Schritt angehen...

Good Luck

jep absolut!

2 spalten sind nicht gut! was sit wenn der inhalt grösser wird?

wenn du bei tabellen beliben willst setz doch einfach in jede der 3 spalten eine neue einfache tabelle...

ist zwar keine schöne lösung aber geht...
 

toxictoon

Pixelpatriot

AW: Problem mit der Größe =(

du hast 3 spalten nebeneinander...

<td>
... füger in der zelle ne neue tabelle ein

<table background="deinhintegrundbild.jpg">
<tr>
<td>
Dein Inhalt...
</td>
</tr>
</table>

</td>

das machst du in jeder der 3 spalten...
 

KriZ-MC

Nicht mehr ganz neu hier

AW: Problem mit der Größe =(

Ich bekomm das irgendwie nicht hin...

könnte mir jemand anhand meines Quellcodes für das Menü den Code machen ? Die anderen Spalten werde ich dann selbst damit probieren...

LG
 

jackprince

xHTML & CSS Junkie

AW: Problem mit der Größe =(

findes komplizierter mit tables klar zu kommen zumindest mit den Problemen diesie mit sich bringen als mit divs.

Mit divs wäre das ganze im groben aufbau in weniger als einer halben stunde erledigt.

html (grob) (10 minuten arbeit mit bild adressen raus suchen)
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
<head>
 <title>TierZimmer.de</title>
 <style>
  #site {
    width: 910px;
   }
   #header {
    margin-bottom: 20px;
   }
   #left h1, #right h1 {
    width: 120px;
    background: #A5B23C;
    margin: 0;
    padding: 3px;
    font-size: 16px;
   }
  #left {
    margin-left: 15px;
    float:left;
    width: 130px;
  }
   #shoutbox {
    float: right;
    width: 186px;
   }
   #middle {
   float:left;
    width: 570px;
    background-color: #CDD497;
   }
 </style>
</head>
<body>
 <div id="site">
  <div id="header">
   <img src="http://kriz-muzik.com/pong/Bilder/header.gif" alt="kopfbild" />
  </div>
  <div id="center">
   <div id="left">
    <h1>Menü</h1>
    <ul id="menu">
     <li><a>Punkt 1</a></li>
    </ul>
   </div>
   <div id="middle">
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
   </div>
   <div id="shoutbox">
    Inhalt der Shoutbox
   </div>
  </div>
  </div>
  </body>
 

KriZ-MC

Nicht mehr ganz neu hier

AW: Problem mit der Größe =(

findes komplizierter mit tables klar zu kommen zumindest mit den Problemen diesie mit sich bringen als mit divs.

Mit divs wäre das ganze im groben aufbau in weniger als einer halben stunde erledigt.

html (grob) (10 minuten arbeit mit bild adressen raus suchen)
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
<head>
 <title>TierZimmer.de</title>
 <style>
  #site {
    width: 910px;
   }
   #header {
    margin-bottom: 20px;
   }
   #left h1, #right h1 {
    width: 120px;
    background: #A5B23C;
    margin: 0;
    padding: 3px;
    font-size: 16px;
   }
  #left {
    margin-left: 15px;
    float:left;
    width: 130px;
  }
   #shoutbox {
    float: right;
    width: 186px;
   }
   #middle {
   float:left;
    width: 570px;
    background-color: #CDD497;
   }
 </style>
</head>
<body>
 <div id="site">
  <div id="header">
   <img src="http://kriz-muzik.com/pong/Bilder/header.gif" alt="kopfbild" />
  </div>
  <div id="center">
   <div id="left">
    <h1>Menü</h1>
    <ul id="menu">
     <li><a>Punkt 1</a></li>
    </ul>
   </div>
   <div id="middle">
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
ghgfjgh  irjskalfdj  kfsdja  
   </div>
   <div id="shoutbox">
    Inhalt der Shoutbox
   </div>
  </div>
  </div>
  </body>

Den Code versteh ich nicht :(
Wie komm ich damit denn nun weiter ?
Geht das nicht mit den Tables ? Mir ist es eig. relativ egal ob der Code hässlich ist oder so... hauptsache er funktioniert :D

LG
 

jackprince

xHTML & CSS Junkie

AW: Problem mit der Größe =(

Bei dem Code wird statt Zellen einfache Boxen verwendet.
Die größe bzw. das aussehen und verhalten der boxen
wird oben im Kopf zwischen den beiden style tags definiert.

Wenn du den Code oben mal abspreichern würdest, z.B.
über Dreamweaver siehst du das 90% der seite schon stehen
du müsstest also nur noch die Inhalte ändern.

Kurz gesagt ... Meiner Meinung nach werden dir Tables immer
wieder Probleme bereiten. Was ist leichter eine box oder eine zelle
bei der ich aufpassen muss das sie den richtigen colspan oder
rowspan hat?

Ich empfehle dir dich bei selfHTML über CSS zu informieren.
Mit etwas Ambitionen hast du nach kurzer Zeit zumindest ganz grobe
Kentnisse und kannst dann entsprechende Fragen hier stellen.
Bzw. verstehst eventuell den Code schon besser.

Was die hilfe bei Tabellendesigns angeht darf man von mir keine Hilfe erwarten,
das ist nicht bös gemeint, sondern hat ganz einfach Gründe.


  • Zeit!
    • Es ist aufwendig den Aufbau im Code zu erkennen da man auf jeden Colspan/rowspan achten muss etc.
  • jede Zelle beinflusst potentiell andere was das schnelle ändern fast unmöglich macht
  • nicht Barrierefrei
  • veraltete Technik
  • ZEIT!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.853
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben