|
|||
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> 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*/ } 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';*/ } } |
Sponsored Links |
|
|||
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> Code:
.news p { float: right; padding-left: 10px; } .body { clear: right; } 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 (...) { ... } } Geändert von schorsch (25.09.2008 um 05:11 Uhr) |
|
|||
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" ?? |
|
|||
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. |
|
|||
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';*/ } } 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> 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? |
|
|||
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"; |
|
|||
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> Code:
function newsStatus() { objClass = this.classname; if (objClass == 'newsShort') { this.classname = 'newsFull'; } else { this.classname = 'newsShort'; } } 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 :\ |
Sponsored Links |
|
|||
Wie bei verschachtelten Elementen auch:
Code:
.newsShort .Langtext { display: none; } .newsFull .Langtext { dispaly: block; } 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) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |