zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hilfe bei Div Box

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.11.2007, 16:20
Benutzerbild von julia83
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2007
Beiträge: 6
julia83 befindet sich auf einem aufstrebenden Ast
Lächeln Hilfe bei Div Box

Hi Leute,

erstmal ein "Hallo" an alle hier im Forum.
Ich habe mal eine kleine Frage bzw. bitte an euch...

Könnt ihr mir vielleicht ein kleinen CSS Code zusammen stellen der folgendes Feld anpasst

|---------|
|
| BILD
|
|-------- |

Anzeigen: Klein Mittel Groß
Ansichten: 1
Bewertung: 0
Datum: 2007-11-19

---------------------

Das Ganze soll eine Box werden für ein Thumbnail eines Bildes.
Leider kenen ich mich noch nicht so gut mit CSS aus um möchte euch daher um Hilfe bitten

Ganz liebe Grüße an euch,
Julia
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.11.2007, 16:43
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ich würde ein div nehmen, und dorthinein das Bild stellen sowie eine dl für die Zuordnungen (dt ohne width floaten). Falls Dir das alles nix sagt, frage einfach nochmal nach
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.11.2007, 16:52
Benutzerbild von julia83
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2007
Beiträge: 6
julia83 befindet sich auf einem aufstrebenden Ast
Lächeln

Danke ihr beiden

Leider sagt mir das nicht viel heiko...
Die Box die ich möchte sollte so gut wie möglich durch die css Klasse verändert werden können.

- Hintergundfarbe
- Größe
- Schrift Typ
- Link fabe

Am besten wäre es wenn mann dann noch z.b sagen kann dass das Thumbnail 10 px rand hat usw...

Ist das sehr komplex?
Wenn nicht könntet ihr mir sowas posten?

Wäre wirklich toll von euch!

Liebe Grüße,
Julia
Mit Zitat antworten
  #4 (permalink)  
Alt 19.11.2007, 17:12
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von julia83 Beitrag anzeigen
Die Box die ich möchte sollte so gut wie möglich durch die css Klasse verändert werden können.
Kein Problem, über die Klasse .thumbnail wird es angesprochenen (sowie alle enthaltenen Elemente).

Eine dl ist eine Definitionsliste, die meiner nach hier die korrekte Auszeichnung für Deine Zuordnungen wäre.

Zitat:
Zitat von julia83 Beitrag anzeigen
Am besten wäre es wenn mann dann noch z.b sagen kann dass das Thumbnail 10 px rand hat usw...
Du meinst das Bild selbst? Das wird angesprochen per .thumbnail img.

Zitat:
Zitat von julia83 Beitrag anzeigen
Ist das sehr komplex?
Nein, im Gegenteil

Zitat:
Zitat von julia83 Beitrag anzeigen
Wenn nicht könntet ihr mir sowas posten?
Ich poste nur in absoluten Ausnahmefällen fertigen Code (und von diesem Grundsatz bringt mich auch Dein attraktives Foto nicht ab ), denn davon hat der Ersteller eines Threads ja nichts - er soll ja verstehen was er tut, und nicht einfach nur Copy & Paste durchführen. Aber wenn andere Teilnehmer unbedingt Code posten wollen, bitte... Aber versuche wenigstens, ihn nachzuvollziehen.
Mit Zitat antworten
  #5 (permalink)  
Alt 19.11.2007, 17:20
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von tuxor1337 Beitrag anzeigen
Es sei mein Beispiel der XHTML-Code (nicht, dass ich heikos Version für minderwertiger halte!).
Ich würde es grundsätzlich eh genauso machen, allerdings braucht meiner Meinung nach folgender Part noch eine angemessene Auszeichnung:

Code:
<em>Anzeigen:</em>
<a href="#">Klein</a>
<a href="#">Mittel</a>
<a href="#">Groß</a><br />

<em>Ansichten:</em> 1<br />

<em>Bewertung:</em> 0<br />

<em>Datum:</em> 2007-11-19<br />
Ich würde das als dl darstellen, em in dt stellen und den dazugehörigen Text in dd, und "klein mittel groß" als ul darstellen. Auch wenn dieses Markup einen größeren CSS-Aufwand bedeutet - letztlich ist das Design-Ergebnis dasselbe, aber dafür besitzt das Markup die nötige Semantik, und das ist den Aufwand wert.

Geändert von heiko_rs (19.11.2007 um 17:23 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 19.11.2007, 18:35
Benutzerbild von julia83
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2007
Beiträge: 6
julia83 befindet sich auf einem aufstrebenden Ast
Standard

Hey jungs,

danke für die Hilfe!
Ich versuche ohne große quellcode von euch klar zu kommen ...
kann halt sein, dass ich dann ein zwei mal öfters fragen muss

Mein Quell code nun:

index.html
Code:
<div class="thumbnail">
<img src="test.png" alt="Was du willst"/><br />

<strong><em>Show:</em></strong>
<a href="#">Klein</a>
<a href="#">Mittel</a>
<a href="#">Groß</a><br />

<p>Views:</strong> 1</p>

<p>Rating:</strong> 0</p>

<p>Date:</strong> 2007-11-19</p>


</div>
style.css
Code:
div.thumbnail {
	background-color:#717B39;
	width:150px;
	margin:10px 10px 10px 10px;
	border:1px solid #000000;
	padding:5px 5px 5px 5px;
}
div.thumbnail a:link { color: #F0FF9B; font-size:12px; }
div.thumbnail img { border:1px dotted #000000; }
div.thumbnail p { font-family:Arial, Helvetica, sans-serif; font-size:12px; font-style:normal;
Damit ich nicht jedesmal ein <br /> schreiben muss könnte ich doch <p></p> benutzen? Nur leider macht das bei mir einen Zeilen Absatz keinen Umbruch...

Muss man dazu ein anderes Tag benutzen?

Grüße Julia
Mit Zitat antworten
  #7 (permalink)  
Alt 19.11.2007, 18:40
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Du kannst nicht nur, du solltest auch statt mit <br /> die Abstände zwischen Absätzen mit dem <p>-Element gestalten. Nur wenn du einen Umbruch innerhalb des <p>-Elementes erzwingen willst, solltest du dies dort auch nutzen.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #8 (permalink)  
Alt 19.11.2007, 18:48
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Dein Quellcode haut so noch nicht hin (d.h. ist nicht valide). Du brauchst weder br noch p, wenn Du's per dl umsetzt, wie ich vorgeschlagen hatte. Deren Prinzip:

Code:
<dl>

<dt>Views:</dt>
<dd>1</dd>

<dt>Rating:</dt>
<dd>0</dd>

</dl>
Noch ein Link dazu: SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Listen

Übrigens solltest Du entweder <em> oder <strong> nehmen.

Für "Show:" stellst Du die Links innerhalb von dd am besten noch in eine <ul>. Versuche am besten erstmal, das korrekte Markup zu erstellen, anschließend läßt sich auch leicht und schnell das CSS dazu erarbeiten. Und dann wirst Du am Ende auch verstanden haben, was Du gemacht hast
Mit Zitat antworten
  #9 (permalink)  
Alt 19.11.2007, 18:49
Benutzerbild von julia83
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2007
Beiträge: 6
julia83 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von BlackHawk Beitrag anzeigen
Du kannst nicht nur, du solltest auch statt mit <br /> die Abstände zwischen Absätzen mit dem <p>-Element gestalten. Nur wenn du einen Umbruch innerhalb des <p>-Elementes erzwingen willst, solltest du dies dort auch nutzen.
Okay das hat geklappt
Code:
div.thumbnail p { font-family:Arial, Helvetica, sans-serif; font-size:12px; font-style:normal; margin:0px; padding:0px;  }
Bestimmt habe ich bald wieder fragen

Liebe grüße,
Julia
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.11.2007, 19:10
Benutzerbild von julia83
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2007
Beiträge: 6
julia83 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Dein Quellcode haut so noch nicht hin (d.h. ist nicht valide). Du brauchst weder br noch p, wenn Du's per dl umsetzt, wie ich vorgeschlagen hatte. Deren Prinzip:

Code:
<dl>

<dt>Views:</dt>
<dd>1</dd>

<dt>Rating:</dt>
<dd>0</dd>

</dl>
Noch ein Link dazu: SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Listen

Übrigens solltest Du entweder <em> oder <strong> nehmen.

Für "Show:" stellst Du die Links innerhalb von dd am besten noch in eine <ul>. Versuche am besten erstmal, das korrekte Markup zu erstellen, anschließend läßt sich auch leicht und schnell das CSS dazu erarbeiten. Und dann wirst Du am Ende auch verstanden haben, was Du gemacht hast

Dann so:

Code:
<div class="thumbnail">
<p><a href="test.png" border="0"><img src="" alt="Test"/></a></p>
<dl>
<dt>Show:</dt>
<dd><ul>Small - Middle - Large</ul></dd>

<dt>Views:</dt>
<dd>1</dd>

<dt>Rating:</dt>
<dd>0</dd>

<dt>Date:</dt>
<dd>2007-09-18</dd>

</dl>
</div>
Was hat dl deiner Meinung nach für einen Vorteil zu p?

Danke für deine Zeit

Julia
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
Header entfernen tripple CSS 17 15.06.2010 16:41
Design Float IE6 Problem koknarr CSS 10 05.09.2008 19:05
ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!? damonster CSS 12 27.08.2008 16:56
DIV in DIV BOX party CSS 1 24.08.2007 17:20
Problem mit der Wrapper Div Box Muldenbroger CSS 2 07.10.2006 14:41


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:49 Uhr.