zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS-Style

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.03.2010, 10:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.03.2010
Beiträge: 4
papgia01 befindet sich auf einem aufstrebenden Ast
Frage CSS-Style

Hallo CSS-Profis,

brauche Hilfe für ein CSS-Style Problem

Ich möchte eine Überschrift, 2 Bilder und die zugehörige Bildbeschreibung in einem Block wie folgt darstellen lassen:



Es soll möglich sein,
  • die Bildgröße und -breite per CSS definieren (beide Bilder haben immer die gleichen Maße)
  • die max. Höhe und max. Breite des Blocks per CSS definieren (hier mit Pfeilen dargestellt)
  • die Bildbeschreibung soll max so breit sein wie das zugehörige Bild (siehe Bild1). Sollte eine Bildbeschreibung länger sein als die Bildbreite, soll der Text umgebrochen werden (siehe Bild2). Sollte der Text trotz Umbruch länger sein als die max Höhe des Blockes, kann der Text abgebrochen werden (siehe Bild2, die letzten 2 Buchstaben fehlen')

Ist das mit CSS realisierbar?

Der HTML-Code
PHP-Code:
<h2>Überschrift</h2>
<
a href="http://www.mydomain.de/test1.html><img src="http://www.mydomain.de/bild1.png" alt="test1"></a>
Bildbeschreibung1
<a href="http://www.mydomain.de/test2.html><img src="http://www.mydomain.de/bild2.png" alt="test2"></a>
Und hier eine längere Bildbeschreibung 
Dankbar für alle Vorschläge
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.03.2010, 11:06
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von papgia01 Beitrag anzeigen
Hallo CSS-Profis,

brauche Hilfe für ein CSS-Style Problem

Ich möchte eine Überschrift, 2 Bilder und die zugehörige Bildbeschreibung in einem Block wie folgt darstellen lassen:



Es soll möglich sein,
  • die Bildgröße und -breite per CSS definieren (beide Bilder haben immer die gleichen Maße)
  • die max. Höhe und max. Breite des Blocks per CSS definieren (hier mit Pfeilen dargestellt)
  • die Bildbeschreibung soll max so breit sein wie das zugehörige Bild (siehe Bild1). Sollte eine Bildbeschreibung länger sein als die Bildbreite, soll der Text umgebrochen werden (siehe Bild2). Sollte der Text trotz Umbruch länger sein als die max Höhe des Blockes, kann der Text abgebrochen werden (siehe Bild2, die letzten 2 Buchstaben fehlen')

Ist das mit CSS realisierbar?

Der HTML-Code
PHP-Code:
<h2>Überschrift</h2>
<
a href="http://www.mydomain.de/test1.html><img src="http://www.mydomain.de/bild1.png" alt="test1"></a>
Bildbeschreibung1
<a href="http://www.mydomain.de/test2.html><img src="http://www.mydomain.de/bild2.png" alt="test2"></a>
Und hier eine längere Bildbeschreibung 
Dankbar für alle Vorschläge
Ja es ist realisierbar. Mehr volltest du doch nicht wissen oder?

Na gut bin ja nicht so:
HTML-Code:
<div class="aussendrum">
    <h2>&Uuml;berschrift</h2>
    <div class="box">
        <a href="http://www.mydomain.de/test1.html">
            <img src="http://www.mydomain.de/bild1.png" alt="test1">
        </a>
        <p>Bildbeschreibung1</p>
    </div>
    <div class="box">
        <a href="http://www.mydomain.de/test2.html">
            <img src="http://www.mydomain.de/bild2.png" alt="test2">
        </a>
        <p>Und hier eine längere Bildbeschreibung</p>
    </div>
</div>
du floatest die beiden Box Elemente mit float: left; (clearen anschließend nicht vergessen ) und baust dir das ganze so wie du willst :P
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.03.2010, 19:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.03.2010
Beiträge: 4
papgia01 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Thielo Beitrag anzeigen
Ja es ist realisierbar. Mehr volltest du doch nicht wissen oder?
hahaha da hast du Recht. Ich hatte mich nicht deutlich ausgedrückt

Aber danke schon einmal für den Tipp - float:left; Jetzt sind die 2 Bilder schon mal nebeneinander und der Text darunter

meine bisherige CSS:
Code:
.aussendrum {
	max-width: 180px;
	max-height: 90px;
	overflow: hidden;
}
.box {
	max-width: 90px;
	max-height: 45px;
	overflow: hidden;
	float: left;
}
korrekt ist das leider nicht z.B. werden die Bilder nicht autom. verkleinert sondern abgeschnitten...

Ich frag mal so: Wie lautet die korrekte CSS ?
Mit Zitat antworten
  #4 (permalink)  
Alt 15.03.2010, 09:34
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.02.2010
Beiträge: 162
Duderinho befindet sich auf einem aufstrebenden Ast
Standard

Wieso lädst du die Bilder nicht in der richtigen Größe hoch? Je größer das Bild, desto länger die Ladezeit, denk auch an die Modemuser.
Mit Zitat antworten
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
Verschachteln und Erweitern von CSS? DerJo CSS 4 25.01.2010 19:07
Ich hasse CSS... neu-art.de Offtopic 24 30.08.2008 14:11
Suche einen CSS Style für mein forum DrBong CSS 10 29.08.2008 07:17
Problem mit CSS - Attribute für hover tzepf CSS 0 09.12.2006 17:56
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 12:39


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