php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 07-01-2009, 02:00
Chrissi007
 Registrierter Benutzer
Links : Onlinestatus : Chrissi007 ist offline
Registriert seit: Jul 2004
Beiträge: 49
Chrissi007 ist zur Zeit noch ein unbeschriebenes Blatt
Chrissi007 eine Nachricht über ICQ schicken
Standard [CSS] Tabellen-ähnliche Anordnung

Hi,

Ich häng hier gerade an einem bestimmt total simplen Design-CSS-Problem fest und komme einfach nicht weiter.

Es geht um folgendes:

- Simple Newsausgabe in der Form:
Code:
<ul>
<li>Datum: Das ist der Titel von News 1</li>
<li>Datum: Das ist ein sehr sehr sehr sehr sehr sehr sehr langer Titel von News 2</li>
</ul>
Soweit so gut. Jetzt möchte ich aber, dass der Schriftzug von der zweiten News umgebrochen wird und hinter das Datum eingerückt wird. Siehe beigefügten Screenshot. So soll das aussehen (Auf dem Screenshot die unterste News).

Ich habs darüber gelöst, indem ich dem Datum und der News-Überschrift jeweils ein label-Tag verpasst habe mit ein paar CSS Attributen. Also sozusagen:
Code:
<li><label style="display: block; float: left;">DATUM</label> 
<label style="display: block; float: left;">Überschrifttext</label></li>
Im Internet Explorer kommt dabei die Version raus, wie man sie auf dem Screenshot sieht. Auf dem Firefox allerdings nicht. Ich vermute, das liegt einfach daran, dass meine CSS-Defintionen wahrscheinlich total idiotisch sind. Aber ich weiß echt nicht weiter. Sieht jemand von euch, wo mein Denkfehler ist bzw. hat auch eine Mozilla-freundliche Lösung dieses Problems parat?

Es soll wie gesagt nur ein einheitlicher Blocktext entstehen und lange News nicht umgebrochen werden und dann unter dem Datum erscheinen. Der umgebrochene Text soll schön bündig hinter dem Datum stehen, so wie auf dem Screenshot zu sehen. Nur habe ich echt keine Ahnung, wie man das "schön" mit CSS machen könnte.
Angehängte Grafiken
Dateityp: jpg screeny.jpg (23,0 KB, 95x aufgerufen)
__________________
Grüße, Chrissi
Our Dreams are Wings

Geändert von Chrissi007 (07-01-2009 um 13:50 Uhr)
Mit Zitat antworten
  #2 (permalink)  
Alt 07-01-2009, 02:11
Blackgreetz
 PHP Junior
Links : Onlinestatus : Blackgreetz ist offline
Registriert seit: Oct 2005
Beiträge: 901
Blackgreetz ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Das ist eine Tabelle. (border=0)


mfg
Mit Zitat antworten
  #3 (permalink)  
Alt 07-01-2009, 02:21
Chrissi007
 Registrierter Benutzer
Links : Onlinestatus : Chrissi007 ist offline
Registriert seit: Jul 2004
Beiträge: 49
Chrissi007 ist zur Zeit noch ein unbeschriebenes Blatt
Chrissi007 eine Nachricht über ICQ schicken
Standard

Ne, der Screeny kommt ja von mir selbst und stellt das Wunsch-Ergebnis dar. Auf dem Internet Explorer funktioniert die Ausgabe wie gesagt, nur auf dem Firefox siehts eben nicht so aus, wie auf dem Screeny.

Hier ein Auszug aus dem Quelltext:

Code:
<li><label id="content_box_datefield">Son, 04.01.</label> 
<a href="/?cmd=news&nid=8&ln=de">
A b c D e f G h i J k l M</a> (0 Kommentare)</li>
<li><label id="content_box_datefield">Son, 04.01.</label> 
<a href="/?cmd=news&nid=7&ln=de">
DCS: Black Shark veröffentlicht mit längerem Heading</a> (0 Kommentare)</li>
und hier noch die Deklarationen von content_box_datefield

Code:
#content_box_datefield {
display: block;
	width: 70px;
	float:left;
	font-size: 11px;
}
Also es handelt sich schon um CSS und nicht um ein Tabellenlayout. Ein Tabellenlayout wollte ich an dieser Stelle vermeiden.


Kurz noch mal erklärt:
Was ich nicht möchte, ist dies:
Code:
25.12.2008: Das ist der Titel einer sehr langen News,
die umgebrochen wurde (0 Kommentare)
... sondern:
Code:
25.12.2008: Das ist der Titel einer sehr langen News,
            die umgebrochen wurde (0 Kommentare)
Ich vermute, dass ich das irgendwie mit zwei label-Tags realisieren könnte. Quasi dem Datum einen "display: block; float: left;" zu verpassen und ähnliche Attribute auch auf das label-Tag für die Überschrift anwenden. Nur bin ich total ratlos, wie ich das umzusetzen habe.

Über jeden noch so kleinen Tipp bin ich echt dankbar!
__________________
Grüße, Chrissi
Our Dreams are Wings

Geändert von Chrissi007 (07-01-2009 um 22:35 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 07-01-2009, 02:26
Blackgreetz
 PHP Junior
Links : Onlinestatus : Blackgreetz ist offline
Registriert seit: Oct 2005
Beiträge: 901
Blackgreetz ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Ich bin durchaus des Lesens mächtig.
Das du keine Tabelle nutzt, seh ich an deiner Liste.

Vlt hätte ich noch sagen müssen:

"Nutz eine Tabelle, denn es ist eine."

mfg
Edit: Code bitte umbrechen.
Mit Zitat antworten
  #5 (permalink)  
Alt 07-01-2009, 02:47
Chrissi007
 Registrierter Benutzer
Links : Onlinestatus : Chrissi007 ist offline
Registriert seit: Jul 2004
Beiträge: 49
Chrissi007 ist zur Zeit noch ein unbeschriebenes Blatt
Chrissi007 eine Nachricht über ICQ schicken
Standard

Du sprichst in Rätseln

Tabellen mage ich so gut es geht außen vor lassen.

Hier siehst du ein Livebeispiel (hatte gerade nix anderes):

http://www.computerbase.de

Die dortige Newsansicht wird unter Dienstag, 6. Januar 2009 ebenfalls umgebrochen. Hier ein Quelltextauszug:

Code:
<ul class="plain">

<li class="compact_item">
<small class="date">22:50</small>
<a href="/news/allgemein/computerbase/2009/januar/computerbase_ces_las_vegas/">
<strong>ComputerBase erreicht CES in Las Vegas</strong></a>
<small>(29)</small>
</li>

<li class="compact_item">
<small class="date">20:30</small>
<a href="/news/software/multimedia/2009/januar/divx_7_windows/">
<strong>DivX 7 für Windows verfügbar</strong></a> 
<small>(50)</small>
</li>

</ul>
Die haben im Prinzip genau das, was ich möchte. Das Datum steht stets einzeln vorne dran und der Text wird rechts sauber umgebrochen. Ich hab mich schon durch die dortigen css files durchgewühlt aber da ich mich mit css sehr wenig auskenne, komme ich mit den dortigen Deklarationen nicht wirklich zurecht. Die Seite zeigt mir ja, dass es mit css funktioniert - die Frage ist nur: wie? Für jemanden, der sich ein bisschen mit css auskennt müsste das doch zu beantworten sein, oder?

EDIT: Mach mal die Computerbase-Seite kleiner, in dem du dein Fenster kleiner ziehst. Du wirst sehen wie bei wenig Platz die Newsüberschriften umgebrochen werden. Genau das brauche ich.
__________________
Grüße, Chrissi
Our Dreams are Wings
Mit Zitat antworten
  #6 (permalink)  
Alt 07-01-2009, 04:22
Benutzerbild von onemorenerd onemorenerd
  Moderator
Links : Onlinestatus : onemorenerd ist offline
Registriert seit: Mar 2005
Ort: Berlin
Beiträge: 9.471
onemorenerd wird schon bald berühmt werdenonemorenerd wird schon bald berühmt werden
Standard

Mit Firebug kannst du dir die effektiv verwendeten Styles der beteiligten HTML-Elemente anzeigen lassen. Dazu muss man kein CSS-Guru sein.
Mit Zitat antworten
  #7 (permalink)  
Alt 07-01-2009, 09:53
pekka
 PHP Master
Links : Onlinestatus : pekka ist offline
Registriert seit: Jun 2001
Ort: Köln
Beiträge: 6.608
pekka befindet sich auf einem aufstrebenden Ast
Standard

Computerbase bescheißt mit Line-height: 130%. Das geht aber schätze ich spätestens bei der 3. Textzeile auch in die Hose.

Lade Dir wie onemorenerd schons sagt den Firebug, oder die Web Developer Toolbar für den Firefox herunter. Mit der Funktion "CSS / View Style Information" kannst Du Dir die CSS-Eigneschaften von jedem Element anzeigen lassen.

Trotzdem: Ich halte das auch für mit Kanonen auf Spatzen geschossen, und Tabellen viel besser geeignet. Für diesen Zweck sind Tabellen auch in CSS-Layouts gedacht, und auch das einzige Element das dafür vernünftig geeignet ist. Die allgemeine Verpöntheit von Tabellen bezieht sich darauf, sie als Layoutinstrument zu gebrauchen.

Geändert von pekka (07-01-2009 um 09:58 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 07-01-2009, 12:30
ghostgambler
 Master
Links : Onlinestatus : ghostgambler ist offline
Registriert seit: Jul 2004
Ort: DE - NRW
Beiträge: 4.620
ghostgambler ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Tendenziell würde ich auch zu Tabelle raten.
Ansonsten kannst du ein
float:left;display:block;width:130px; auf das label und ein margin-left:140px auf den Rest versuchen (ggf. auch noch mit float:left) ... aber dolle ist das alles nicht
Mit Zitat antworten
  #9 (permalink)  
Alt 07-01-2009, 13:28
Blackgreetz
 PHP Junior
Links : Onlinestatus : Blackgreetz ist offline
Registriert seit: Oct 2005
Beiträge: 901
Blackgreetz ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Entschuldige für die äußerst knappe Formulierung heute Nacht.
Ich fand es aussagekräftig, aber vlt auch nur, weil ich wusste, was ich meine...

Was ich sagen wollte:

Dein Vorhaben ist keine Liste sondern eine Tabelle. Was computerbase da macht ist unsinnig und geht eventuell auf diese falsche Einstellung zurück:
Zitat:
Tabellen mage ich so gut es geht außen vor lassen.
Kurz knapp:
Zitat:
pekka: Tabellen sind für die Darstellung von tabellarischen Daten völlig in Ordnung und nach wie vor das A und O. Der allgemeine Konsens ist, daß man da von Tabellen weg soll, wo sie für Layoutzwecke benutzt werden.
Quelle
Edit: ich hab immer noch eine Scrollbar ausgehend von deinem 1. Beitrag
Mit Zitat antworten
  #10 (permalink)  
Alt 07-01-2009, 13:58
Chrissi007
 Registrierter Benutzer
Links : Onlinestatus : Chrissi007 ist offline
Registriert seit: Jul 2004
Beiträge: 49
Chrissi007 ist zur Zeit noch ein unbeschriebenes Blatt
Chrissi007 eine Nachricht über ICQ schicken
Standard

Super, habt mir weiter geholfen. Danke vielmals.

Scrollbar ist jetzt hoffentlich weg, ansonsten größeren Monitor kaufen
__________________
Grüße, Chrissi
Our Dreams are Wings
Mit Zitat antworten
  #11 (permalink)  
Alt 07-01-2009, 16:57
ghostgambler
 Master
Links : Onlinestatus : ghostgambler ist offline
Registriert seit: Jul 2004
Ort: DE - NRW
Beiträge: 4.620
ghostgambler ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Zitat:
Original geschrieben von Chrissi007
Scrollbar ist jetzt hoffentlich weg, ansonsten größeren Monitor kaufen
Dein zweiter Post ist noch zu breit.

Wohl eher Forum wechseln, oder CSS manuell abändern...
Mit Zitat antworten
  #12 (permalink)  
Alt 07-01-2009, 22:48
Chrissi007
 Registrierter Benutzer
Links : Onlinestatus : Chrissi007 ist offline
Registriert seit: Jul 2004
Beiträge: 49
Chrissi007 ist zur Zeit noch ein unbeschriebenes Blatt
Chrissi007 eine Nachricht über ICQ schicken
Standard

Postingbreite noch mals geändert...

Das Problem habe ich jetzt doch css-seitig gelöst. Ich bin folgendermaßen vorgegangen, vielleicht interessierts ja den ein oder anderen:

<li style="margin-left: 70px;"> <label style="margin-left: -70px">D A T U M</label> L I N K </li>

Das gesamte LI-Element beginnt sozusagen bei einem margin von 70px. Das Label-Element Datum beginnt bei einem negativen Margin von -70px und gehört optisch sozusagen gar nicht mehr zur Liste dazu. Hat den selben Effekt wie wenn mans mit ner Tabelle machen würde und spart ein paar Zeilen Code. Obendrein dürfts eigentlich relativ solid sein und auf allen Browsern funktionieren. Meine ich zumindest.
__________________
Grüße, Chrissi
Our Dreams are Wings
Mit Zitat antworten
  #13 (permalink)  
Alt 07-01-2009, 23:06
Blackgreetz
 PHP Junior
Links : Onlinestatus : Blackgreetz ist offline
Registriert seit: Oct 2005
Beiträge: 901
Blackgreetz ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Warum?
Es ist doch keine Liste sondern eine Tabelle
Mit Zitat antworten
  #14 (permalink)  
Alt 15-01-2009, 04:05
MuffiTehmaeh
 Newbie
Links : Onlinestatus : MuffiTehmaeh ist offline
Registriert seit: Jan 2009
Ort: Erkelenz, bei Mönchengladbach ^^
Beiträge: 4
MuffiTehmaeh ist zur Zeit noch ein unbeschriebenes Blatt
MuffiTehmaeh eine Nachricht über ICQ schicken
Standard

Heyho, es gibt eine Sehr gute lösung dazu die auch mir erst vor kurzem zur "Rettung" wurde:
<dl> <dt> und <dd>
der ungefähre aufbau würde so aussehen:
Code:
<dl  id="listen_name">
<dt>Spalte Links</dt>
<dd>Spalte Rechts</dd>
</dl>
Dazu muss mann nch einen kleinen CSS Angaben Pool nutzen:
Die DT Elemente brauchen
Code:
clear:left;
float:left;
und die DD Elemente
Code:
float:left;
und schon hat man eine Liste mit 2 Spalten kannst das ja mal ausprobieren und bei fragen dich einfach melden

Gruß
Richard | Muffi
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Themen-Optionen
Thema bewerten
Thema bewerten:

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 an


PHP News

Die RIGID-FLEX-Technologie
Die RIGID-FLEX-TechnologieDie sogenannte "Flexible Elektronik" , oftmals auch als "Flexible Schaltungen" bezeichnet, ist eine zeitgemäße Technologie zum Montieren von elektronischen Schaltungen.

06.12.2018 | Berni

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni


 

Aktuelle PHP Scripte

HeidiSQL - kostenloses MySQL front-end Editor für Windows ansehen HeidiSQL - kostenloses MySQL front-end Editor für Windows

HeidiSQL - ist ein Windows-Editor für die bekannt open Source Datenbank mySQL

10.12.2018 Berni | Kategorie: MYSQL/ Management
piwik Open-Source Webanalyse-Software ansehen piwik Open-Source Webanalyse-Software

piwik ist eine gute Alternative zu Google Analytics. Viele Features und ein modernes Erscheinungsbild mit aussagefähigen Statistiken in Echtzeit

10.12.2018 phpler | Kategorie: PHP/ Besucherzaehler
jQuery Mobile ansehen jQuery Mobile

Touch-Optimized Web Framework für Smartphones & Tablets

09.12.2018 phpler | Kategorie: AJAX/ Framework
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 10:05 Uhr.