Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

HTML Image height 100 Prozent

Frage Entwicklung HTML

Mitglied: Shaddy

Shaddy (Level 1) - Jetzt verbinden

14.12.2012, aktualisiert 18.12.2012, 2491 Aufrufe, 9 Kommentare

Das Problem beschränkt sich nur auf die Markierte Zelle und eine andere Zelle, bei der ich das selbe Problem habe.
Die Images sollen Trennlinien darstellen.
Die Zelle ist immer verschieden groß.

Hallo Leute,

unter der Zeile mit der Markierung <!--Problem--> befinden sich 3 Kommentare mit den 3 Wegen die ich bereits einzeln ausprobiert habe.

Ich habe verschiedene andere Wege zusätzlich versucht wie beispielsweise
style="height: 100%;"
durch
style="min-height: 100%;"
zu ersetzen oder "!important" hinzuzufügen, so wie ich es in einigen Problemlösungen gesehen habe,
die für mich jedoch nicht funktioniert haben.

Kurz gesagt habe ich versucht der Zelle einen einen hintergrund zu geben und diesen auf 100% zu ziehen, eine div innerhalb der zelle auf 100% zu strecken - position:relative - und dem image einfach height 100% zuzuweisen.

Wie kann ich in der Zelle mein Image auf height 100% ziehen?

Gruß Shaddy

01.
<?php 
02.
		session_start(); 
03.
?> 
04.
<html> 
05.
<head> 
06.
<title>website title</title> 
07.
</head> 
08.
<body> 
09.
<table width="700" align="center" style="margin-top:100px;" border="0" cellpadding="0" cellspacing="0"> 
10.
	<tr> 
11.
	<tr> 
12.
		<td> 
13.
			<img src="/pix/Fernsehbox/LinksOben.png"/> 
14.
		</td> 
15.
		<td> 
16.
			<img src="/pix/Fernsehbox/ObenLeiste.png" style="position: relative;margin-bottom: 5px;width: 100%;height:14px;"/> 
17.
		</td> 
18.
		<td> 
19.
			<img src="/pix/Fernsehbox/RechtsOben.png"/> 
20.
		</td> 
21.
	</tr> 
22.
 
23.
		<td > 
24.
		<!--Problem--> 
25.
		<!--<td style="background: url(/pix/Fernsehbox/LinksLeiste.png); height: 100%; width: 14px;">--> 
26.
			<!--<div style="position: relative; background: url(/pix/Fernsehbox/LinksLeiste.png); height: 100%;"></div>--> 
27.
			<!--<img src="/pix/Fernsehbox/LinksLeiste.png" style="position: relative;margin-bottom: 5px;width: 14px;height:100%;"/>--> 
28.
		</td> 
29.
 
30.
 
31.
		<td align="center"> 
32.
			<h1>Loginbereich</h1></br></br> 
33.
			<table width="300" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC"> 
34.
				<tr> 
35.
					<td> 
36.
						<form name="form1" method="post" action="login.php"> 
37.
					<td> 
38.
						<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"> 
39.
						<tr> 
40.
							<td colspan="3"> 
41.
								<strong>Member Login </strong> 
42.
							</td> 
43.
						</tr> 
44.
						<tr> 
45.
							<td width="78"> 
46.
								Username 
47.
							</td> 
48.
							<td width="6"> 
49.
50.
							</td> 
51.
							<td width="294"> 
52.
								<input name="username" type="text" id="username"> 
53.
							</td> 
54.
						</tr> 
55.
						<tr> 
56.
							<td> 
57.
								Password 
58.
							</td> 
59.
							<td> 
60.
61.
							</td> 
62.
							<td> 
63.
								<input name="password" type="password" id="password"> 
64.
							</td> 
65.
						</tr> 
66.
						<tr> 
67.
							<td>&nbsp;</td> 
68.
							<td>&nbsp;</td> 
69.
							<td><input type="submit" name="Submit" value="Login"></td> 
70.
						</tr> 
71.
						</table> 
72.
					</td> 
73.
					</form> 
74.
					</td> 
75.
				</tr> 
76.
			</table> 
77.
				 
78.
				<td> 
79.
					<img src="/pix/Fernsehbox/RechtsKnoepfe.png" style="position: relative;margin-bottom: 121px;margin-left: 41px;z-index: 1;"/> 
80.
					<img src="/pix/Fernsehbox/RechtsLeiste.png" height="100%" style="margin-left: 41px;" /><!--###TO FIX###--> 
81.
				</td> 
82.
		</td> 
83.
		</tr> 
84.
		<tr> 
85.
			<td> 
86.
				<img src="/pix/Fernsehbox/LinksUnten.png"/> 
87.
			</td> 
88.
			<td> 
89.
				<img src="/pix/Fernsehbox/UntenLeiste.png" style="position: relative;margin-bottom: 50px;width: 100%; height: 64px;"/> 
90.
			</td> 
91.
			<td> 
92.
				<img src="/pix/Fernsehbox/RechtsUnten.png"/> 
93.
			</td> 
94.
		</tr> 
95.
	</table> 
96.
</body> 
97.
</html>
Edit: Bild hinzugefügt - Klick auf das Bild, um es zum vergrößern

1f4ee23cfdf196957a2b974cfe331379 - Klicke auf das Bild, um es zu vergrößern
Mitglied: bytecounter
14.12.2012 um 14:06 Uhr
Ah..alter Beitrag gelöscht und mit neuer Frische vollständiger Code
Da fällt mir gleich auf:
Eine Angabe in % bezieht sich auf das Elternelement (schließlich sind Prozente ja keine absoluten Angaben). Bei den Elternelementen sehe ich aber keinerlei Höhenangaben. Folglich ist die Zelle nur so groß, wie deren Inhalt.

vg
Bitte warten ..
Mitglied: Arano
14.12.2012, aktualisiert um 16:07 Uhr
Hi,

  1. Hintergrundbilder kann man nicht strecken !
  2. Zeile "3,5" Da fehlt die DTD
  3. Zeile 10+11 = Markup-Fehler
  4. Zeile 21+22+23 = Markup-Fehler
  5. Zeile 37+38 = Markup-Fehler
  6. ... nää, nach mehr schau ich jetzt nicht Bringe __zuerst__ dein Markup in Ordnung, sonst kann der Rest nicht funktionieren
  7. Tabellen sind kein Designmittel
  8. WAS WILLST du eigentlich machen ?

Kann es sein, das du einfach nur einen Rahmen um den eigentlichen Inhalt ziehen möchtest um das ganz wie einen Fernsehgerät aussehen zu lasen !?
Und nun hast du Probleme bei den linke und rechten Rahmenteile die links und rechts neben dem Inhalt angezeigt werden sollen.

Am besten ist so etwas immer, wenn ein Link zu einem __echtem__ Beispiel dabei ist

Kennst du background-repeat css4you.de - Hintergrundbilder


Schönen Wochenendstart
~Arano
Bitte warten ..
Mitglied: bytecounter
14.12.2012 um 19:13 Uhr
Hallo zusammen,

@Arano:
es geht nicht um den Hintergrund, sondern um die IMG-Tags - das weiß ich noch aus seinem letzten Beitrag; den hat Shaddy - aus welchen Gründen auch immer - aber gelöscht. Auf Markupfehler geh ich bei solchen Posts nicht ein ;)

Das Layout erinnert mich an die Anfangszeiten von CSS - man hat trotz CSS noch die herkömmlichen HMTL-Attribute verwendet ;)

Wünsche Euch ein schönes Wochenende!

vg
Bitte warten ..
Mitglied: Arano
14.12.2012 um 20:36 Uhr
WAS ?
Es geht im die img-Tags ?
Die habe ich aus dem Beitrag als "ein verzweifelter Versuch Hintergrundbilder durch img-Tags zu ersetzen" raus gelesen.

Tja, vom alten Beitrag weiß ich nichts...

Aber was soll das dann alles ?
Will er doch nur eine Grafik genau so groß haben wie die Zelle in der sie steckt !? (dynamisch "wachsend / schrumpfend")
Das mit den img-Tags ist ja "nur das" was er sich überlegt hat seinen Plan umzusetzen. Aber die Frage: "Was ist sein Plan ?" bleibt vorerst ungeklärt...
...ich mein gestrechte/gestauchte Bilder sehen eh doof aus !

Auf die Markupfehler schaue ich ja auch nicht immer, aber man kann es ja mal nebenbei erwähnen. Aber... eigentlich kommt erst das Markup und dann CSS. Meine wenn der Licht__schalter__ kaputt ist, kann ich an der Lampe soviel herum fummeln wie ich will - das mit dem Licht wird dann trotzdem nichts, oder immer ärger machen.

"Anfangszeiten von CSS"
Ja das dachte ich auch ...ging mir allerdings nicht anders.
besonders "align" habe ich gerne und lange verwendet


So @Shaddy
Dann lass mal hören


~Arano
Bitte warten ..
Mitglied: Shaddy
17.12.2012 um 01:48 Uhr
Hey Arano und bytecounter,

entschuldigt die lange Antwortzeit - ich war unterwegs.

Einen Link kann ich euch leider nicht geben, da die Dateien noch in meinem xampp liegen und ich sie hier nicht bei der Hand habe..

Das Image welches ich strecken möchte ist nur 1 Pixel hoch, es ist ausschließlich dazu gedacht um auf volle Länge der Zelle gestreckt zu werden.
Die Vermutung mit meiner Tabellenkonstruktion stimmt. Die habe ich nur gemacht, um alles fein anzuordnen.

Den alten Beitrag habe ich gelöscht, weil er ziemlig schlampig angelegt war und darüber bloß gelacht wurde..

Das Ziel ist es die Box - egal wie lang (je nach Inhalt) - wie ein Fernsehgerät aussehen zu lassen.
Der Rahmen oben und unten sitzt, nur links und rechts gibt es die Probleme.

Gruß Shaddy
Bitte warten ..
Mitglied: Arano
17.12.2012 um 20:56 Uhr
Hallo Shaddy

Schade wegen des fehlende Links, aber nun gut.

Das Image welches ich strecken möchte ist nur 1 Pixel hoch, es ist ausschließlich dazu gedacht um auf volle Länge der Zelle gestreckt zu werden.
Die Vermutung mit meiner Tabellenkonstruktion stimmt. Die habe ich nur gemacht, um alles fein anzuordnen.
  1. Die Grafik ist 1px hoch, aber mehrere Pixel breit, richtig !?
  2. Gibt es eine __speziellen Grund__ warum du es mit einem Tabellen-Design umsetzen möchtest, oder nur eine Möglichkeit die du einfach so ausgewählt hast ?
  3. Du sprichst zwar von "gesteckt", aber funktioniert es nicht auch wenn die Grafik einfach mehrfach untereinander angezeigt wird ? Das ginge als Hintergrundgrafik nämlich automatisch !?
  4. Je nach Antwort auf 2., Bist du auf die Unterteilung der Tabelle in drei Spalten (links, mitte, rechts) angewiesen ? Denn das wäre rein theoretisch auch mit nur drei Zeilen (oben, mitte, unten) möglich. Schließlich hat die Tabelle eine feste Breite von 700px.

Bitte fühle dich nicht überrumpelt wegen der Fragerei, aber wenn wir dir schon beim Grundaufbau helfen können wir es dir ja auch richtig/besser/schöner zeigen.
Es ist nur eben alles davon abhängig was den tatsächlich geplant ist bzw. der Fragende kann.


Schönen Gruß
~Arano
Bitte warten ..
Mitglied: Shaddy
18.12.2012, aktualisiert um 03:45 Uhr
Hey Arano,

ich habe ein Bild hinzugefügt, mit dem Ur-Plan.

Die Grafik ist 1px hoch und mehrere Pixel breit.

Tables zu benutzen erschien mir einfach und konstruktiv - somit nur eine Möglichkeit der Umsetzung die mir zusprach.

Das Bild als Hintergrundgrafik zu benutzen habe ich in der folgenden Zeile probiert:
<!--<td style="background: url(/pix/Fernsehbox/LinksLeiste.png); height: 100%; width: 14px;">-->

Mögliche Fehler?..

Die Unterteilung in 3 Spalten & Zeilen hat mir sehr gut gefallen, so hat alles seinen Platz.
Der Code, der hier zu sehen ist, setzt sich aus 3 Dateien zusammen:
- header.php
- index.php
- fooder.php
Mit der PHP-include Funktion erhält so jede Unterseite das selbe Gerüst (header.php & fooder.php) und alles ist etwas übersichtlicher.

Wer mir Fragen stellt, der nimmt mich ernst.
Der Ur-Plan befindet sich direkt unter dem Code.
Als Webdesigner/Webmaster würde ich mich nicht bezeichnen wollen.
Während meiner Lehre als Technischer Assistent für Informatik haben wir leider nur wenig in Sachen Webdesign durchgekaut.

Gruß Shaddy
Bitte warten ..
Mitglied: Arano
18.12.2012, aktualisiert um 10:46 Uhr
Hi, ich klatsch das hier mal so hin, keine Möglichkeiten zu speichern... Schulrechner -.-

Also, jetzt noch einmal langsam.
Aktuell sitze ich in der Schule mit einer Freistunde und habe deher etwas Zeit über... dann war die Stunde vorbei und ich musste mit den Daten schnell wo hin - einfach Posten.
Leider konnte ich die drei Grafiken so schnell irgendwo hochladen, eine Titelzeilengrafik, eine für di Mitte (linker Rahmen + mitte Hintergrund + rechter Rahmen) und eine für unten. Meine Rahmen stellten ein Windows-Fenster dar - ähnlich deines TV-Rahmens.

Wie du im Code siehst habe ich die Tabelle entfernt und durch div-Container ersetzt - und es ist viel übersichtlicher und sauberer. Im HTML selber steht nichts weiter als der Seiteninhalt selber, alles Designtechnische wird über CSS im Header geregelt (dieses sollte noch in eine externet Datei ausgelagert werden. So auch die Grafiken die du vorher über img-Tags eingebunden hattest.

Im Code habe ich einige Kommentare hinterlassen die helfen sollen zu verstehen. Sollten Fragen seien kannst du dich ja immer hier melden. Mir fehlt hier, mitlerweile auf dem Smartphone, einfach die Übersicht.

Viel Spass
~Arano

01.
<html> 
02.
  <head> 
03.
    <title>Ein Layout für Shaddy</title> 
04.
	<style type="text/css"> 
05.
	  <!-- 
06.
	    #main    { width:700px; margin:0px auto; }     /* Haupt-Container, bestimmt die Breite und                 */ 
07.
                                                       /*   Hintergrundfarbe falls Grafiken blockiert              */ 
08.
													   /*   werden                              */ 
09.
	    #header  { border:0px solid #ff0000;           /* Header,                                                  */  
10.
		           height:22px;                        /*   Definierte Höhe entspricht der Grafik                  */ 
11.
		           background-image: url(top.png);     /*   Eibinden der Hintergrundgrafik                         */ 
12.
                   background-repeat:no-repeat;        /*   Hintergrundgrafik nur *einmal* anzeigen                */ 
13.
14.
		#content { border:0px solid #00ff00;           /* Content,                                                 */ 
15.
		           height:auto;                        /*   automatische Höhe (optional, weil standard)            */ 
16.
		           padding:0px 7px;                    /*   Inhalt(Text) eine Abstand von 7px nach links           */ 
17.
                                                       /*   und rechts halten lassen. 4px für die Rahmengrafik     */ 
18.
													   /*   selber und 3px damit schöner aussieht.                 */ 
19.
		           background-image: url(middle.png);  /*   Einbinden der Hintergrundgrafik für den mittleren      */ 
20.
                                                       /*   teil (volle breite)	                                   */ 
21.
                   background-repeat:repeat-y;         /*     Hintergrundgrafik __nur_nach_unten__ wiederholen     */ 
22.
                                                              Standard = Wiederholung in alle Richtungen (Kacheln) */ 
23.
				  }  
24.
		#footer  { border:0px solid #0000ff;           /* Footer, */ 
25.
		           height:24px;                        /*   Definierte Höhe entspricht der Grafik */ 
26.
		           background-image: url(bottom.png);  /*   Eibinden der Hintergrundgrafik  */ 
27.
                   background-repeat:no-repeat;        /*   Hintergrundgrafik nur *einmal* anzeigen */ 
28.
29.
	  --> 
30.
	</style> 
31.
  </head> 
32.
  <body> 
33.
   
34.
   
35.
  <div id="main"> 
36.
    <div id="header"></div><!-- end #header --> 
37.
    <div id="content"> 
38.
	  bla blab bla bla bla <br> 
39.
	  bla blab bla bla bla <br> 
40.
	  bla blab bla bla bla <br> 
41.
	  bla blab bla bla bla <br> 
42.
	  bla blab bla bla bla bla blab bla bla bla bla blab bla bla bla bla blab bla bla bla bla blab bla bla bla 
43.
	  bla blab bla bla bla bla blab bla bla bla bla blab bla bla bla bla blab bla bla bla bla blab bla bla bla 
44.
	  bla blab bla bla bla bla blab bla bla bla bla blab bla bla bla bla blab bla bla bla bla blab bla bla bla 
45.
	  bla blab bla bla bla bla blab bla bla bla bla blab bla bla bla bla blab bla bla bla bla blab bla bla bla 
46.
	  bla blab bla bla bla bla blab bla bla bla bla blab bla bla bla bla blab bla bla bla bla blab bla bla bla 
47.
	  bla blab bla bla bla <br> 
48.
	  bla blab bla bla bla <br> 
49.
	  bla blab bla bla bla <br> 
50.
	  bla blab bla bla bla <br> 
51.
	</div><!-- end #header --> 
52.
    <div id="footer"></div><!-- end #header --> 
53.
  </div> 
54.
   
55.
   
56.
  </body>   
57.
</html> 
58.
 
Bitte warten ..
Mitglied: Shaddy
07.01.2013 um 11:34 Uhr
Hey Arano,

noch ein gesundes neues Jahr mit maximalen Erfolgen.

Danke für die elegante Lösung und die gut verständlichen Kommentare!

Ich bin gerade darüber und lasse dich wissen wenn alles soweit fertig ist, für die erste Show.

Gruß Shaddy
Bitte warten ..
Neuester Wissensbeitrag
Windows 10

Powershell 5 BSOD

(1)

Tipp von agowa338 zum Thema Windows 10 ...

Ähnliche Inhalte
Windows 7
gelöst Windows 7 Skalierung auf 100 Prozent für normale Dömenenuser (2)

Frage von netzwerkschlumpf zum Thema Windows 7 ...

Batch & Shell
Werte vergleichen die nicht 100 Prozent gleich sind (4)

Frage von functionstrut zum Thema Batch & Shell ...

Heiß diskutierte Inhalte
LAN, WAN, Wireless
gelöst Server erkennt Client nicht wenn er ausserhalb des DHCP Pools liegt (28)

Frage von Mar-west zum Thema LAN, WAN, Wireless ...

Outlook & Mail
Outlook 2010 findet ost datei nicht (18)

Frage von Floh21 zum Thema Outlook & Mail ...

Windows Server
Server 2008R2 startet nicht mehr (Bad Patch 0xa) (18)

Frage von Haures zum Thema Windows Server ...