Anzeige

Formatierungsproblem?

Formatierungsproblem? | PSD-Tutorials.de

Erstellt von Smax, 01.05.2008.

  1. Smax

    Smax Aktives Mitglied

    Dabei seit:
    25.07.2006
    Beiträge:
    525
    Geschlecht:
    männlich
    Formatierungsproblem?
    Hallo,

    so jetzt habe ich noch ein Problem für das ich nicht mal weiß ob es eine Lösung dafür gibt... Und zwar hab ich hier ein paar Links auf der Seite... Kräuter, Sammelzeit, Wilde Genüsse, Wildkräuter, Wanderungen, wandern und Gourmettipps aus dem Bayerischen Wald, Bayerwald, Hotel Bärnriegel - Links

    Mal ist der Text kürzer als die Höhe des Bildes und mal umgekehrt... sieht jetzt mit dem grauen Hintergrund bei dem Text ein wenig komisch aus wenn das Bild eine größere Höhe als die Box in der der Text ist hat...

    Besser wäre es doch so wie ich das hier mal grafisch gemacht habe...
    [​IMG]


    Nur wie bekomme ich das hin?
     
    #1      
  2. kleeaar

    kleeaar zwo-eins-risiko!

    1
    Dabei seit:
    26.03.2008
    Beiträge:
    2.766
    Geschlecht:
    männlich
    Kameratyp:
    Samsung GX 1L
    Formatierungsproblem?
    AW: Formatierungsproblem?

    machs doch so...
    Code (Text):
    1. CSS:
    2. .cont{
    3. height:200px;
    4. background-color: rgb(223, 223, 223);
    5. width:100%;
    6. }
    7.  
    8. html:
    9. [B] <div class="cont">[/B]<div><img src="links.php-Dateien/landhotel_baernriegel.jpg" ></div></a>
    10. <div style="padding: 5px; width: 375px; float: right; background-color: rgb(223, 223, 223);"><a href="http://www.landhotel-baernriegel.de/">Landhotel Bärnriegel in Finsterau</a><br>
    11. Das Hotel bietet einen kleinen aber sehr feinen Wellnessbereich,
    12. traditionelle Küche......<br>
    13. <em>Wir freuen uns auf Sie Ihre Familie Schuster</em></div>[B]<div>[/B]
    14.  
    15.  
    dann geht der graue Balken halt ganz durch, ist aber genau so hoch wies Bild.


    grüße
     
    #2      
  3. Smax

    Smax Aktives Mitglied

    Dabei seit:
    25.07.2006
    Beiträge:
    525
    Geschlecht:
    männlich
    Formatierungsproblem?
    AW: Formatierungsproblem?

    Aber verhindere ich damit auch, dass wenn der Text höher ist als die Höhe des Bildes nicht unterm Bild das grau zum vorschein kommt? :)
     
    #3      
  4. Neigruschka

    Neigruschka Noch nicht viel geschrieben

    Dabei seit:
    03.02.2008
    Beiträge:
    9
    Geschlecht:
    weiblich
    Software:
    Photoshop
    Kameratyp:
    Canon EOS 350 D
    Formatierungsproblem?
    AW: Formatierungsproblem?

    und wenn du für das bild und für den text jeweils ein Container erstellst? dann mit float arbeiten und in ein gemeinsames container packen, wie schon kleeaar geschrieben hat.

    dann in CSS:
    Code (Text):
    1.  
    2. .cont
    3. {
    4.   width:100%;
    5.   height:auto;
    6.   background-color:#ffffff;
    7. }
    8. .bild
    9. {
    10.   float:left;
    11.   width:200px;
    12.   height:auto;
    13. }
    14. .text
    15. {
    16.   float:right;
    17.   width:370px;
    18.   height:auto;
    19.   padding:5px;
    20.   background-color:rgb(223,223,223);
    21. }
    22.  
    in der HTML-Datei dann
    Code (Text):
    1.  
    2. <div class="cont">
    3.   <div class="bild">
    4.      <img src="links.php-Dateien/landhotel_baernriegel.jpg" >
    5.   </div>
    6.   <div class="text">
    7.       <a href="http://www.landhotel-baernriegel.de/">
    8.        Landhotel Bärnriegel in Finsterau</a><br>
    9.        Das Hotel bietet einen kleinen aber sehr feinen Wellnessbereich,
    10.        traditionelle Küche......<br>
    11.        <em>Wir freuen uns auf Sie Ihre Familie Schuster</em>
    12.   </div>
    13. </div>
    14.  
    habe jetzt nicht ausprobiert, ob es geht, aber theoretisch soll ja so sein.
     
    #4      
  5. Neigruschka

    Neigruschka Noch nicht viel geschrieben

    Dabei seit:
    03.02.2008
    Beiträge:
    9
    Geschlecht:
    weiblich
    Software:
    Photoshop
    Kameratyp:
    Canon EOS 350 D
    Formatierungsproblem?
    AW: Formatierungsproblem?

    habe gerade gemerkt, dass es doch nicht richtig ist, was ich geschrieben habe, aber mit ein paar änderungen funktioniert es doch - habe sogar ausprobiert :)

    in der CSS:
    Code (Text):
    1.  
    2. .cont
    3. {
    4.   width:580px;
    5.   height:auto;
    6.   background-color:rgb(223,223,223);
    7. }
    8. .bild
    9. {
    10.   float:left;
    11.   width:200px;
    12.   height:auto;
    13.   background-color:#ffffff;
    14. }
    15. .text
    16. {
    17.   float:right;
    18.   width:370px;
    19.   height:auto;
    20.   padding:5px;
    21.   background-color:rgb(223,223,223);
    22. }
    23.  
    in HTML:
    Code (Text):
    1.  
    2. [COLOR=red]<div class="cont">
    3. [/COLOR]  [COLOR=blue]<div class="bild">[/COLOR]
    4.      <img src="[URL]http://www.wilde-genuesse.de/media/bookmarks/landhotel_baernriegel.jpg[/URL]" >
    5.   [COLOR=blue]</div>
    6. [/COLOR]  [COLOR=lime]<div class="text">[/COLOR]
    7.       <a href="[url=http://www.landhotel-baernriegel.de/]Landhotel Bärnriegel Urlaub in Finsterau Bayern, Bayerischer Wald am Nationalpark Bayrischer Wald, Kräuter sammeln, Sammelzeit[/url]">
    8.        Landhotel Bärnriegel in Finsterau</a><br>
    9.        Das Hotel bietet einen kleinen aber sehr feinen Wellnessbereich,
    10.        traditionelle Küche......<br>
    11.        <em>Wir freuen uns auf Sie Ihre Familie Schuster</em>
    12.   [COLOR=lime]</div>[/COLOR]
    13.   [B]<p style="clear:both;width:100%;height:1px;background-color:#ffffff;margin:0;padding:0;"></p>
    14. [/B][COLOR=red]</div>[/COLOR]
    15.  
    den letzen Absatz (<p>) jedes mal einfügen.
     
    #5      
  6. Smax

    Smax Aktives Mitglied

    Dabei seit:
    25.07.2006
    Beiträge:
    525
    Geschlecht:
    männlich
    Formatierungsproblem?
    AW: Formatierungsproblem?

    @Neigruschak:

    Also erst mal Danke für deine tolle Hilfe hier...
    Was ich vergessen habe zu sagen ist, dass ich die Seite ja mit einem CMS verwalte... gehen deine Änderungen dann auch? Denn ich müsste die ja global im BAckend machen und dann müsste das für jeden Link den ich im Backend hinzufüge klappen oder?
     
    #6      
  7. Neigruschka

    Neigruschka Noch nicht viel geschrieben

    Dabei seit:
    03.02.2008
    Beiträge:
    9
    Geschlecht:
    weiblich
    Software:
    Photoshop
    Kameratyp:
    Canon EOS 350 D
    Formatierungsproblem?
    AW: Formatierungsproblem?

    Ich kenn mich leider mit CMS nicht so gut aus.
    Aber du muss ja irgendwo dein Code für die Formatierungen eingeben, oder nicht? Dann müsste es ja eigentlich gehen
    Sonst müssen hier die anderen helfen, díe sich mit CMS auskennen
     
    #7      
  8. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Formatierungsproblem?
    AW: Formatierungsproblem?

    Ich gehe mal davon aus, dass die Links dynamisch generiert werden.

    Füge diese Änderungen in dem Modul ein, das die Links generiert und den CSS in die globale CSS-Datei und die Sache hat sich erledigt ;)
     
    #8      
  9. Smax

    Smax Aktives Mitglied

    Dabei seit:
    25.07.2006
    Beiträge:
    525
    Geschlecht:
    männlich
    Formatierungsproblem?
    AW: Formatierungsproblem?

    @Neigruschka:

    Hallo,

    hab jetzt deinen Vorschlag mal in die Tat umgesetzt und siehe da es passt bei fasst allen Links nur für die Links wo bei denen der Text mehr (höher) als das Bild ist passt es wieder nicht und sieht eher schlechter aus oder?
    Was meint ihr/du?
     
    #9      
  10. Neigruschka

    Neigruschka Noch nicht viel geschrieben

    Dabei seit:
    03.02.2008
    Beiträge:
    9
    Geschlecht:
    weiblich
    Software:
    Photoshop
    Kameratyp:
    Canon EOS 350 D
    Formatierungsproblem?
    AW: Formatierungsproblem?

    hallo, Smax,
    ja, du hast recht - es sieht dann doch nicht so schön aus - den Fall habe ich gar nicht vorher berücksichtigt.
    also mir fällt hierfür nur die Lösung mit einem Hintergrundbild für den .cont-Div. Du arbeitest ja mit festen Breiten, so kannst Du eine Grafik erstellen - Größe z.B. 580px breit und 5px hoch. Die linke Seite - 200px - ist weiss, die rechte dann entsprechend deiner Wunschfarbe. Und dann im Code die Hintergrundgrafik ergänzen und in y-Richtung wiederholen lassen.

    sonst fällt mir keine andere Lösung ein
     
    #10      
  11. Smax

    Smax Aktives Mitglied

    Dabei seit:
    25.07.2006
    Beiträge:
    525
    Geschlecht:
    männlich
    Formatierungsproblem?
    AW: Formatierungsproblem?

    Hallo Neigruschka,

    ok dann werde ich das auch nochmal probieren, aber erst morgen oder am Montag, meld mich dann aber auf jeden Fall nochmal ob es geklappt hat, eins muss ich schon jetzt sagen, auf die Idee das mit Background zu machen bin ich nicht mal gekommen... d.h. wieder was gelernt, danke!
     
    #11      
  12. Neigruschka

    Neigruschka Noch nicht viel geschrieben

    Dabei seit:
    03.02.2008
    Beiträge:
    9
    Geschlecht:
    weiblich
    Software:
    Photoshop
    Kameratyp:
    Canon EOS 350 D
    Formatierungsproblem?
    AW: Formatierungsproblem?

    Hallo, Smax,
    es funktioniert aber wirkllich nur, wenn du mit fixen Größen arbeitest.
    Viel spaß beim Ausprobieren - ich hoffe, es klappt, sonst müssen wir eine andere Lösung suchen, aber mir fällt im Moment nichts anderes ein.
     
    #12      
  13. Smax

    Smax Aktives Mitglied

    Dabei seit:
    25.07.2006
    Beiträge:
    525
    Geschlecht:
    männlich
    Formatierungsproblem?
    AW: Formatierungsproblem?

    Hm ok dann werd ich das nochmal probieren und mein Ergebnis dann hier posten... Danke für deine tolle Unterstützung... :)
     
    #13      
x
×
×