Top-Themen

Aktuelle Themen (A bis Z)

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, 2546 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 ..
Ähnliche Inhalte
Batch & Shell
Werte vergleichen die nicht 100 Prozent gleich sind
Frage von functionstrutBatch & Shell4 Kommentare

Hallo, gibt es eine Möglichkeit Ordnernamen oder einfach generell Texte oder Werte zu vergleichen auch wenn sie nicht 100%ig ...

Batch & Shell
Batchdatei mit tasklist findstr funktioniert nicht 100 Prozent
gelöst Frage von Alicudi2000Batch & Shell7 Kommentare

Guten Abend Ich stelle eine Batchdatei her, die auf 6 PCs an Produktionsmaschinen laufen sollen. Die Maschinenführer sind im ...

C und C++
Ladebalken in C bewegt sich erst bei 100 prozent
gelöst Frage von pelzfruchtC und C++3 Kommentare

Moin, Ich habe in C einen Pseude Ladebalken erstellt: Wenn ich das Programm ausführe, zeigt er die ganze Zeit ...

Windows Server
SBS2011 WSUS sqlservr.exe 100 Prozent CPU Benutzung
Frage von Buschi80Windows Server10 Kommentare

Hallo, wir haben einen SBS2011 auf dem auch der WSUS 3 SP2 läuft. Seit ein paar Tagen haben wir ...

Neue Wissensbeiträge
DSL, VDSL

ALL-BM200VDSL2V - Neues VDSL-Modem mit Vectoring von Allnet

Information von Lochkartenstanzer vor 57 MinutenDSL, VDSL

Moin, Falls jemand eine Alternative zu dem draytek sucht: Gruß lks

Windows 10

Microsoft bestätigt DMA-Policy-Problem in Win10 v1709

Information von DerWoWusste vor 1 StundeWindows 10

Wer sein Gerät mit der DMA-Policy absichert, bekommt evtl. Hardwareprobleme in v1709 von Win10. Warum? Weil v1709 endlich "richtig" ...

Verschlüsselung & Zertifikate

Die Hölle friert ein weiteres Stück zu: Microsoft integriert OpenSSH in Windows

Information von ticuta1 vor 4 StundenVerschlüsselung & Zertifikate

Interessant Die Hölle friert ein weiteres Stück zu: Microsoft integriert OpenSSH in Windows SSH-Kommando in CMD.exe und PowerShell

Apple

IOS 11.2.1 stopft HomeKit-Remote-Lücke

Tipp von BassFishFox vor 1 TagApple

Das Update für iPhone, iPad und Apple TV soll die Fernsteuerung von Smart-Home-Geräten wieder in vollem Umfang ermöglichen. Apple ...

Heiß diskutierte Inhalte
Windows Server
RODC kann nicht aus Domäne entfernt werden
Frage von NilsvLehnWindows Server19 Kommentare

HAllo, ich arbeite in einem Universitätsnetzwerk mit 3 Standorten. Die Standorte haben alle ein ESXi Cluster und auf diesen ...

Hardware
Kein Bild mit nur einer bestimmten Grafikkarten - Mainboard Konfiguration
gelöst Frage von bestelittHardware18 Kommentare

Hallo zusammen, ich hatte schon einmal eine ähnliche Frage gestellt. Damals hatte ich genau das gleiche Problem. Allerdings lies ...

Netzwerkmanagement
Mehrere Netzwerkadapter in einem PC zu einem Switch zusammenfügen
Frage von prodriveNetzwerkmanagement17 Kommentare

Hallo zusammen Vorweg, ich konnte schon einige IT-Probleme mit Hilfe dieses Forums lösen. Wirklich klasse hier! Doch für das ...

Hardware
Links klick bei Maus funktioniert nicht
gelöst Frage von Pablu23Hardware16 Kommentare

Hallo erstmal. Ich habe ein Problem mit meiner relativ alten maus jedoch denke ich nicht das es an der ...