zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden News mit HTML (Tabelle/Spalten Problem)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.09.2008, 17:41
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2008
Beiträge: 31
crimi befindet sich auf einem aufstrebenden Ast
Standard News mit HTML (Tabelle/Spalten Problem)

Hey,

ich überlege gerade wie ich zum Beispiel eine News am besten mit HTML darstellen kann. Die Erste Idee war eine Tabelle. Das Problem hierbei ist aber schon, dass ich in der ersten Zeile quasi 3 Spalten (Titel, Datum, Uhrzeit) bräuchte und in der zweiten Zeile nur eine (Text).

Ebenso gibt es News mit Teasern, wo sich der Shortbody Text als Fließtext um den Teaser erstrecken sollte. Muss ich das wirklich über lauter einzelne Divs gestalten? Gibts da eine andere Möglichkeit?

Im Moment habe ich das hier:

HTML News Div und Tabelle
Code:
	
<div id="ContentNews">
		<table id="TabelleMain" width="100%">
			<caption>
				Newstitel
			</caption>
				<tr>
					<td>
						Hier steht dann der eigentlich Newstext, der ganz lang ist und unter Umstaenden auch über den entsprechenden Platzbedarf hinausgeht.
						Dennoch koennte man hier Formatierungen, Links und den ganzen Krams einbetten.
						<b>Fetter Test</b>
						<u>Unterstrichener Test</u>
						<a href="#">Link Test</a>
						Und dann ist der Newsshorttext auch schon vorbei
					</td>
				</tr>
				<tr>
					<td>
				    	<div style="display : none" id="ghost01">
				    		Hier steht dann der ultra lange Longtext. Dieser Langtext wird nur aufgeklappt, wenn man vorher auf den "oeffnen" Link gedrückt hat. Dabei sollte sich weder die Seite verschieben noch die vertikale Ausrichtung.
							Im Optimalfall funktionieren hier auch weiterhin alle Stilarten:
							<b>Fetter Test</b>
							<u>Unterstrichener Test</u>
							<a href="#">Link Test</a>	
							Optimalfall eingetreten :D	
				    	</div>
						<a href="#" onclick="versteckt('01'); return false;" id="StatusText01">oeffnen</a>
					</td>
				</tr>					
		</table>
</div>
CSS Dazu
Code:
 /*Standard Tabellen Design; Breite und Ausrichtung in HTML*/
	table#TabelleMain {
		background-color: #EBEBEB; /*zartes hellgrau*/
		margin: 0 0 10px 0; /*unter der Tabelle kleiner Abstand*/
		/*Rahmen rechts,links,unten; oben ist die Caption*/
		border-style: none solid solid solid;
		border-width: 0px;
		border-color: #808080; /*dunkelgrau*/
		/*Schriftsettings*/
		font-size: 12px;
	}
		table#TabelleMain td {
			padding: 0 2px 0 2px; /*innerer Zellabstand*/
		}
		table#TabelleMain caption{
			background-color: #DCDCDC; /*hellgrau*/
			/*Schriftsetup*/
			color: #000000; /*schwarz*/
			font-weight: bold;
			text-align: left;
			/*Rahmen und Abstand*/
			padding: 2px;
			border-style: solid none none solid; /*oben und links Rahmen absetzen*/
			border-width: 0px;
			border-color: #808080; /*dunkelgrau*/
			border-bottom-style: dotted;
			border-bottom-width: 1px;
			border-bottom-color: #808080; /*dunkelgrau*/
		}
JavaScript zum Aufklappen
Code:
function versteckt(objektID) 
{ 
	ghost = "ghost" + objektID;
	StatusText = "StatusText" + objektID;
	if(document.getElementById(ghost).style.display=='none') {
		document.getElementById(ghost).style.display = 'block';
		window.document.getElementById(StatusText).innerHTML = 'schliessen';
 		/*window.document.images['Icon'].src = 'minus.png';*/   	
	}
	else {
		document.getElementById(ghost).style.display = 'none';
		window.document.getElementById(StatusText).innerHTML = 'oeffnen';
		/*window.document.images['Icon'].src = 'plus.png';*/
	}
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.09.2008, 23:20
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2008
Beiträge: 31
crimi befindet sich auf einem aufstrebenden Ast
Standard

wenns keiner anschauen mag, gibts dazu vllt nen tut?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.09.2008, 00:27
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Ich verstehe das Problem nicht ganz.... was ist denn das Problem bei der Tabelle?? wie soll das denn aussehen??

Tabelle mit 3 Spalten:

HTML-Code:
<table>
  <tr>
     <th>Spalte1</th>
     <th>Spalte2</th>
     <th>Spalte3</th>
  </tr>
  <tr>
     <td>Text1</td>
     <td>Text2</td>
     <td>Text3</td>
   </tr>
</table>
oder mit 3 spalten im Kopf und einer danach....

HTML-Code:
<table>
  <tr>
     <th>Spalte1</th>
     <th>Spalte2</th>
     <th>Spalte3</th>
  </tr>
  <tr>
     <td colspan="3">Text</td>
  </tr>
</table>
Also... wo ist bitte das Problem?
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #4 (permalink)  
Alt 25.09.2008, 04:59
Benutzer
neuer user
 
Registriert seit: 28.03.2007
Beiträge: 42
schorsch befindet sich auf einem aufstrebenden Ast
Standard

nimm keine tabelle. das ist html von vorvorgestern. außerdem solltest du keine ids verwenden, wenn absehbar ist, dass mehr als eine neuigkeit auf der seite erscheinen soll.

HTML
HTML-Code:
<div class="news">
  <h2>title</h2>
  <p>01.01.2008</p>
  <p>12:00</p>
  <div class="body">
    <p>bodytext bla bla</p>
    <p>bodytext blub blub</p>
  </div>
  <p class="footer">footer</p>
</div>
CSS
Code:
.news p { float: right; padding-left: 10px; }
.body { clear: right; }
das müsste schon reichen.

meinst du mit teaser, dass man nur die headline sieht und dann beim draufklicken alles ausklappt?

wenn ja, definiere auf die headline ein onClickEvent, welches den bodytext/footer einblendet. display: none; oder display: block; sind hier die stichworte. am besten schreibt man sich dafür ne funktion getElementsByClassName(). gibt es auch schon fertige lösungen im web. einfach mal suchen.

Code:
window.onclick= function(){
  for (i = 0; i < document.getElementsByClassName("body").length; ++i) {
    if (...) {
      ...
    }
  }
Wenn du nicht klar kommst musst mal die gesamte seite posten.

Geändert von schorsch (25.09.2008 um 05:11 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 25.09.2008, 17:44
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2008
Beiträge: 31
crimi befindet sich auf einem aufstrebenden Ast
Standard

genau deshalb wollte ich tabellen eigentlich umgehen, die table lösungen gerade mit colspan wurden mir als extrem unschön beschrieben.

das mit den IDs verstehe ich nicht.

ob ich eine klasse definiere oder IDs ist doch eigentlich egal? beides male wird ein vordefinierter CSS Style geladen, oder?
ich brauche sogar für den klapptext unterschiedliche IDs, damit die funktion auch auf die richtige news zugreift.

wann sollte ich den "class" verwenden und wann "ID" ??
Mit Zitat antworten
  #6 (permalink)  
Alt 25.09.2008, 19:29
Benutzer
neuer user
 
Registriert seit: 28.03.2007
Beiträge: 42
schorsch befindet sich auf einem aufstrebenden Ast
Standard

ids sind laut definition einmalig im dokument, klassen nicht. der browser interprätiert es jedoch gleich. es wird aber dann problematisch, wenn du javascript verwenden willst. denn getElementById() gibt dir ein einzelnen element zurück, du brauchst jedoch etwas, was dir ein array zurück gibt, so wie bei getElementsByTagName(). leider gibt es diesen klassengetter noch nicht im normalen javascript. in bibliotheken, wie prototype wurden diese aber ergänzt.

ids kannst du verwenden beim header, fotter, menü usw. die einzigartig auf der seite sind. bei deinen news solltest du also klassen verwenden, da du mehrere news haben wirst.
Mit Zitat antworten
  #7 (permalink)  
Alt 25.09.2008, 19:44
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2008
Beiträge: 31
crimi befindet sich auf einem aufstrebenden Ast
Standard

JavaScript:
Code:
function versteckt(objektID) 
{ 
	ghost = "ghost" + objektID;
	StatusText = "StatusText" + objektID;
	if(document.getElementById(ghost).style.display=='none') {
		document.getElementById(ghost).style.display = 'block';
		window.document.getElementById(StatusText).innerHTML = 'schliessen';
 		/*window.document.images['Icon'].src = 'minus.png';*/   	
	}
	else {
		document.getElementById(ghost).style.display = 'none';
		window.document.getElementById(StatusText).innerHTML = 'oeffnen';
		/*window.document.images['Icon'].src = 'plus.png';*/
	}
}
HTML Aufruf:
Code:
<div style="display : none" id="ghost01">
Hier steht dann der ultra lange Longtext. Dieser Langtext wird nur aufgeklappt, wenn man vorher auf den "oeffnen" Link gedrückt hat.</div>
<a href="#" onclick="versteckt('01'); return false;" id="StatusText01">oeffnen</a>
Heisst dass, die Verwendung von IDs in Javascript, wie in meinem Beispiel hier, ist eigentlich falsch?

Wie man IDs/Class benutzen sollte ist mir jetzt klar. Jeder Aufklapptext der Newsbox muss bei mir eine eigene ID bekommen, damit ich ihn bei JavaScript aufklappen kann. Ich dachte das wäre dir normale Arbeitsweise. Oder habe ich deine Bedenken bzgl. IDs und JS falsch verstanden?
Mit Zitat antworten
  #8 (permalink)  
Alt 25.09.2008, 20:51
Benutzer
neuer user
 
Registriert seit: 28.03.2007
Beiträge: 42
schorsch befindet sich auf einem aufstrebenden Ast
Standard

wenn du jedem beitrag eine eigene id gibst, dann nicht. kannst ja ne durchlaufende beitragsnummer vergeben. #news1345, news1346, ...

das javascript kann man aber auch schöner schreiben. wenn man es schön machen will lagert man das alles in eine javascriptdatei aus und hängt im html garkeine eventhandler mehr an einzelne elemente.

in meinem javascriptbeispiel siehst du ein beispiel, wie man es machen könnte.

außerdem würde ich mit this arbeiten. this gibt dir das aktuelle objekt zurück, welches das event ausgelöst hat.

Code:
this.style.overflow = "hidden";
die sauberste lösung wäre, dass du für jeden beitrag einen teaserstatus hast und einen komplettansichtsstatus. je nach dem vergibst du dem beitrag eine andere klasse. in der css sagst du dann, dass die klasse "teaser" den hauptinhalt des beitrags ausblendet (display: none und die klasse "complete" den hauptinhalt einblendet (display: block. das javascript macht dann nichts weiter, als die klasse setzen. dann hast du perfekt html, css und javascript voneinander getrennt.
Mit Zitat antworten
  #9 (permalink)  
Alt 26.09.2008, 15:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2008
Beiträge: 31
crimi befindet sich auf einem aufstrebenden Ast
Standard

Okay ich habe mal was probiert.
Das ist jetzt eine ganz einfache News in HTML Code
Code:
		<div class="newsShort">
			<p class="Kurztext">
				Kurztext der immer eingeblendet wird.
			</p>
			<div class="Langtext">
				Langtext der dann extra eingeblendet wird beim öffnen
			</div>
			<a href="#" onclick="newsStatus(); return false;">oeffnen</a>
		</div>
Das soll meine JS Funktion sein
Code:
function newsStatus()
{
	objClass = this.classname;
	if (objClass == 'newsShort') {
		this.classname = 'newsFull';
	}
	else {
		this.classname = 'newsShort';
	}
}
Jetzt stehe ich aber auf dem Schlauch wie ich das mit CSS angehe.
Wie kann ich denn verschachtelte Klassen formatieren?
Weil eigentlich brauch ich doch jetzt 2 CSS Formatierungen.

Class NewsShort mit Class Langtext display=none
Class NewsFull mit Class Langtext display=block

Wie definiere ich denn solche verschachtelten Klassen? also dass Newshort.Langtext quasi was andres ist als NewsFull.Langtext

Und wie soll ich das jetzt anstellen, dass sich der Text von meinem Link öffnen/schliessen ändert, wenn ich keine IDs vergeben will?
Und wie soll ich den Aufruf ohne eines on*-Events handeln?

Fragen über Fragen, sry :\
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 26.09.2008, 16:39
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.03.2007
Beiträge: 178
Thorben befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von crimi Beitrag anzeigen
Wie kann ich denn verschachtelte Klassen formatieren?
Wie bei verschachtelten Elementen auch:
Code:
.newsShort .Langtext {
  display: none;
}

.newsFull .Langtext {
  dispaly: block;
}
Und ohne IDs kommst du aus, wenn du das Element, was du ändern willst, der Funktion als Argument mitgibst:

Code:
function newsStatus(element)
{
	element.className = element.className == "newsFull" ? "newsShort" : "newsFull";
}

...

<div class="newsShort">
	<p class="Kurztext">Kurztext der immer eingeblendet wird.</p>
	<div class="Langtext">
		<p>Langtext der dann extra eingeblendet wird beim öffnen</p>
	</div>
	<a onclick="newsStatus(this.parentNode); return false;">öffnen</a>
</div>

Geändert von Thorben (26.09.2008 um 17:37 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

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
Benötige Hilfe :( Html / Css Problem? Stefanie CSS 9 17.05.2011 19:12
CSS Problem mit html area und map im IE9 icebox CSS 2 11.05.2011 13:31
Problem: HTML und CSS | Einsatz für eine simple Testseite rAiDeN (X)HTML 15 07.10.2008 17:23
HTML PHP Problem _sarah (X)HTML 4 22.02.2007 14:29
habe eine problem mit html + css madlarkin CSS 6 12.01.2006 14:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:42 Uhr.