mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 09.12.2016 12:56 Benutzername: Passwort: Auto-Login

Thema: CSS Problem mit Bildern vom 15.02.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS Problem mit Bildern
Seite: 1, 2  Weiter
Autor Nachricht
Braininsider
Threadersteller

Dabei seit: 18.11.2003
Ort: Halle
Alter: 35
Geschlecht: Männlich
Verfasst Di 15.02.2005 10:43
Titel

CSS Problem mit Bildern

Antworten mit Zitat Zum Seitenanfang

Hi Mg`s,

ich habe ein Problem bei dieser Seite, wenn ein bild länger ist als der Text schiebt sich das bild (welches man grade nicht sieht) über meinen Contentbereich hinaus. Hier noch der Code bzw. Codeschnipsle:

Codeschnipsel Contetnbereich hat geschrieben:

<div id="contentBox">
<div id="inhaltBorder">
<div class="artikel_ueberschrift">Die PDF-Datei</div>
<div id="inhalt">
<!-- Einleitung anfang -->

<!-- Einleitung ende -->
<!-- autor anfang -->



<!-- autor ende -->
<p><b><img style="WIDTH: 150px; HEIGHT: 1450px" height="491" alt=" " hspace="4" src="http://burg-apotheke.braincms.com/media/bilder/test.jpg" width="150" align="left" vspace="4" border="0" />Aufgabe:</b></p>
<p>Die PDF-Datei stammt von der PostScript und ist somit Plattformunabhängig.<br />Die wesentlichsten eigenschaften einer PDF-Datei sind, das alle inhalte eines Dokumente mit allen eingebundenen Elementen (Schriften, Farben, Grafiken und Bildern) präzise wieder gegebenwerden, ohne dass diese einzeln <img hspace="4" src="admin/xeditor/smilys/testbild.GIF" align="middle" vspace="4" border="0" />mitgeliefert werden müssen. Eine PDF-Datei kann mit den komprimierungsverfahren JPG und LZW stark komprimiert werden. Das PDF-Format bietet praktische Zusatzfunktionen wie Kommentare, Verknüpfungen,Inhaltsverzeichnisse, Video und Audio Formate.</p>
<p></p>

<p><b>Aufbau:</b></p>
<p><br />Der Aufbau einer PDF-Datei ist streng strukturiert. Im Header steht vermerkt, um welche PDFVersion<br />es sich handelt. Dann kommt der Body mit den Beschreibungen der Objekte und den<br />Kommentaren, anschließend die Cross Referece Table mit den Informationen über die einzelnen<br />Objekte und am Schluss ein Trailer mit der Information, wo sich in der Datei die Cross Reference<br />Table befindet. Die Beschreibung der Objkte im Body geschiet durch die Boxen-Geometrien. </p>
<p>Definitionen der verschiedenen PDF-Boxen</p>
<p><i>MediaBox (Medien-Rahmen)</i><br />Die MediaBox zeigt die Größe des nicht beschnittenen PDFs. Diese ist zugleich die PostScript-Seitengröße, sofern das PDF über den Distiller erzeugt wurde. Die MediaBox ist stets die größte aller Boxen und schließt alle anderen Boxen vollständig ein.</p>
<p><i>CropBox (Masken-Rahmen)<br /></i>Dieser Masken-Rahmen beschneidet das PDF-Dokument für die Darstellung innerhalb des AdobeReaders oder in Acrobat, das heisst dass in den PDF-Betrachtungs-Programmen diese Box das gesamt sichtbare Dokument zeigt.<br />Die Elemente außerhalb der CropBox werden jedoch nur ausgeblendet; bei einer nachträglichen Vergrößerung des Masken-Rahmens können diese Elemente wieder sichtbar gemacht werden. Die CropBox beschreibt auch die Druckfläche des PDF<br />oder wie diese in eine EPS-Datei exportiert wird.</p>

<p><i>TrimBox (Endformat-Rahmen)<br /></i>Die TrimBox definiert das Endformat der Seite. Bei der Ausgabe einer A4-Seite mit Anschnitt und Druckmarken wäre die TrimBox A4. Da das Ausgabeformat für Beschnitt und Druckmarken größer sein muss, wäre es z. B. A4 Extra. Die MediaBox wäre also somit A4 Extra, die TrimBox hingegen A4.</p>
<p><i>BleedBox (Anschnitt-Rahmen)<br /></i>Dieser Rahmen beschreibt das Endformat (TrimBox) plus Beschnitt. Die BleedBox für eine A4-Seite mit 3 mm Anschnitt an allen Seiten wäre also 216 mm x 303 mm.</p>
<p><i>ArtBox (Objekt-Rahmen)<br /></i>Sie ist der kleinstmögliche Rahmen, der alle Elemente beinhaltet, die sich auf der entsprechenden PDF-Seite befinden.</p>
<p>Außer der CropBox ist keine andere Boxeninformation im AdobeReader sichtbar.</p>
<p>Der Zweck der Boxeninformationen ist, PDF-Dateien leichter automatisiert weiterverarbeiten zu können, da diese zusätzlichen Seiten-Informationen ausgelesen und weiterverwendet werden können.</p>
<p></p>
<p>&nbsp;</p><p>
&nbsp;<a href="javascript:history.back()" class="intro_weiter">zurück</a>

</p>


</div>
</div>
<div id="contentFussImg"> </div>
</div>
</div>
</div>








Codeschnipsel CSS Contetnbereich hat geschrieben:

/*** Inhalt ***/
#content{background-color:#FFFFFF;float:left;display:block;}

#contentBox{
width:530px;
margin:0px 27px 0px 1px;
_margin-right:14px; /* be nice to IE */
float:right;
clear:right;
display:block;
}

#inhaltBorder{
border:1px solid #7B92DF;
border-top:1px solid #7B92DF;
border-bottom:1px solid #FFFFFF;
min-height:280px;
display:block;
}

#inhalt, #inhaltIntro, #inhaltSuche{
padding:0px 15px 0px 15px;
}

#inhaltIntro{margin-top:15px;}
#introContent{padding-top:10px;}


.artikel_ueberschrift{
background-color:#D2DAF4;
border-bottom:1px solid #7B92DF;
font-weight:bold;

font-size:15px;

color: #A21518;
padding:3px 0px 3px 15px;
}

.intro_ueberschrift{color: #A21518;border:1px solid #7B92DF; background-color:#D2DAF4;}

#contentFussImg{
background: url(images/content_fuss.gif) no-repeat bottom left;
height:20px;
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
mööp

Dabei seit: 29.08.2003
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 15.02.2005 12:28
Titel

Antworten mit Zitat Zum Seitenanfang

ich wär dafür dass du den fehler mal explizit anzeigst, weil das die sache vereinfachen würde.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Braininsider
Threadersteller

Dabei seit: 18.11.2003
Ort: Halle
Alter: 35
Geschlecht: Männlich
Verfasst Di 15.02.2005 12:38
Titel

Antworten mit Zitat Zum Seitenanfang

Ok das stimmt hab versucht an alles zu denken aber naja.

Hier:


  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
eskimojane

Dabei seit: 12.02.2005
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 15.02.2005 13:04
Titel

Antworten mit Zitat Zum Seitenanfang

beschwerdepunkt 1: der css-code ist unübersichtlich, durcheinander, mal so mal so geschrieben, viel zu viele verschiedene margin/padding-optionen.

beschwerdepunkt 2: das bild bekommt seinen style direkt im quelltext zugewiesen --> in großbuchstaben? mir dünkt, dass gerade css sowas nicht leiden kann. könnte probleme machen.

beschwerdepunkt 3: das bild steht im gleichen <p>-tag wie die überschrift "aufgabe", falls ich mich nicht verlesen habe. ein blocklevel-element und text in einem blocklevel-element. wirkt unsauber. möglicherweise auch ein grund

ansonsten etwas bonbonige seite, aber irgendwie süß. der apotheke gefüllt's sicherlich. *zwinker*
  View user's profile Private Nachricht senden
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Di 15.02.2005 13:31
Titel

Antworten mit Zitat Zum Seitenanfang

ich hab mir diesen übersichtlichen code gerade mal nich durchgelesen. aber sieht für mich so aus als hättest du a) ne feste höhe für den div container angegeben, oder b) dem bild n float: left zugewiesen.

lösung für a) aus height: xx einfach min-height: xx machen
lösung für b) unter das bild n <br style="clear: left" /> einfügen.

eine der beiden lösungen wirds sein. entscheide selbst!


Zuletzt bearbeitet von beeviZ am Di 15.02.2005 13:32, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
calvin

Dabei seit: 30.11.2004
Ort: Frankfurt am Main
Alter: -
Geschlecht: Männlich
Verfasst Di 15.02.2005 14:18
Titel

Antworten mit Zitat Zum Seitenanfang

min-height funktioniert nicht im ie, clear könnte schon eher funktionieren, anosnten sieht mir das nach klassischem "absolut positionierte elemente wachsen nicht mit"-problem aus, ohne jetzt denen quelltext-wust angeschaut zu haben
  View user's profile Private Nachricht senden
Braininsider
Threadersteller

Dabei seit: 18.11.2003
Ort: Halle
Alter: 35
Geschlecht: Männlich
Verfasst Di 15.02.2005 15:16
Titel

Antworten mit Zitat Zum Seitenanfang

Ok ich habs.

Hier der neue Code:


HTML:
Code:
<div id="contentBox">
   <div id="inhalt">
          "CONTENT"    
   </div>                     
</div>


CSS:
Code:


#contentBox{
 width:530px;
 float:right;
 clear:right;
 margin-right:18px;
 background: url(images/content_fuss.gif) no-repeat  bottom left;
}

#inhalt{
 width:527px;
 border:1px solid #000000;
 float:left;
 margin-bottom:34px;
}


Danke Forum!!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Di 15.02.2005 19:26
Titel

Antworten mit Zitat Zum Seitenanfang

calvin hat geschrieben:
min-height funktioniert nicht im ie, clear könnte schon eher funktionieren, anosnten sieht mir das nach klassischem "absolut positionierte elemente wachsen nicht mit"-problem aus, ohne jetzt denen quelltext-wust angeschaut zu haben


nein. im IE funktionierts aber wenn man nur _height: xx angibt. Der Container wächst dann fälschlicherweise mit.


was war denn jetzt genau der fehler braininsider?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Problem mit CSS und Bildern im IE
CSS-Problem mit border-bottom - will es nicht bei Bildern
Vorladen von Bildern im CSS
Css- Hover mit 3 Hinergrund-Bildern
Schlagschatten mit Css aus zwei Bildern
[CSS] Listennavigation nur mit Bildern?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.