Author Topic: Abgerundete Bilderboxen / rounded corners of image boxes  (Read 15875 times)

0 Members and 1 Guest are viewing this topic.

Offline bibabobu

  • Sr. Member
  • ****
  • Posts: 311
  • Technische und künstlerische Gravuren
    • View Profile
    • Technische und künstlerische Gravuren für die gesamte Metall-, Kunststoff- und Papierindustrie
Abgerundete Bilderboxen / rounded corners of image boxes
« on: September 14, 2005, 04:03:03 PM »
Habe mal eine HTML Frage.

Wie bekomme ich denn diese Bilderboxen mit abgerundeten Ecken hin, wie man sie oft auf diversen Seiten zu sehen bekommt.
Ist das eine einzige Hintergrundbilddatei?
Kann aber nicht sein oder. Die "Box" soll sich ja je nach Größe des Bildes oder Textes anpassen.

Hat mir jemand ein paar Beispiel Codeschnipsel wie man so etwas realisiert.
 :roll:
« Last Edit: August 08, 2006, 10:25:02 PM by kai »

Offline mawenzi

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: Abgerundete Bilderboxen
« Reply #1 on: September 14, 2005, 07:41:33 PM »
hi bibabobu,

diese Boxen werden als Tabellen mit diversen Hintergrundbildern erstellt und können sich so dem Boxeninhalt anpassen. Bei meinem Beispiel ist die Breite festgelegt und aus dem Text- / Bildinhalt ergibt sich dann die Boxhöhe.

Hier ein Beispiel für eine thumbnail_bit.html :


Der Quelltext für diese thumbnail_bit.html sieht dann so aus :
Code: [Select]
<style>
<!--
td  {
        font-size: 10px; color: #444444; font-family: verdana, arial, helvetica, sans-serif
}
-->
</style>
<table bgcolor="#ffffff" cellspacing="0" cellpadding="0" width="156" border="0">
<tr>
 <td height="28" background="{template_image_url}/oben.gif" colspan="3">
     &nbsp;&nbsp;&nbsp;<b>{image_name}</b>&nbsp;&nbsp;{if image_is_new}<span class="new"><small>{lang_new}</small></span></b>{endif image_is_new}
 </td>
</tr>
<tr>
 <td width="3" background="{template_image_url}/rand_pt_li.gif">
     <img src="{template_image_url}/transi.gif" width="3" height="3" border="0">
 </td>
 <td width="151">
     <center> {thumbnail} </center>
     <li><a href="{cat_url}">{cat_name}</a></li>
     <li>Dateigröße : {image_file_size}</li>
     <li>Datum : {image_date}</li>
     <li>Auflösung : {width} x {height}</li>
     <li>Bildhits : {image_hits}</li>
     <li>Rating : {image_rating}</li>
     <li>Downloads : {image_downloads}</li>
     <li>Kommentare : {image_comments}</li>
 </td>
 <td width="3" background="{template_image_url}/rand_pt_re.gif">
     <img src="{template_image_url}/transi.gif" width="3" height="3" border="0">
 </td>
</tr>
<tr>
 <td align="right" height="24" background="{template_image_url}/unten.gif" colspan="3">
     <a href={image_url}>Zum Bild</a>&nbsp;&nbsp;
 </td>
</tr>
</table>

Die verwendeten Grafikdateien für diese Box sind im Datei-Anhang als Zip-Datei zu finden ...

mawenzi
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

Offline bibabobu

  • Sr. Member
  • ****
  • Posts: 311
  • Technische und künstlerische Gravuren
    • View Profile
    • Technische und künstlerische Gravuren für die gesamte Metall-, Kunststoff- und Papierindustrie
Re: Abgerundete Bilderboxen
« Reply #2 on: September 14, 2005, 11:31:01 PM »
Vielen Dank Mawenzi für Deine Mühe,
werde das in nächster Zeit mal an einem Beispiel ausprobieren.

P.S. Karma +1 von mir was immer das heißt.

Offline KurtW

  • 4images Guru
  • *******
  • Posts: 2.778
    • View Profile
    • Malediven-Bilder ~~Dreams~~
Re: Abgerundete Bilderboxen
« Reply #3 on: September 28, 2005, 06:15:13 AM »
Hi,

kann aber auch nur mit css gesteuert werden.
Siehe Demo Style42
http://4images.malediven-bilder.de/index.php?t=Nr.42

Code: [Select]
<Fieldset></Fieldset>
Gruß
Kurt

Offline mawenzi

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: Abgerundete Bilderboxen
« Reply #4 on: September 28, 2005, 10:24:50 AM »
@ KurtW

... doch wo hat ein Fieldset abgerundete Ecken ...  :?:

mawenzi
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

Offline KurtW

  • 4images Guru
  • *******
  • Posts: 2.778
    • View Profile
    • Malediven-Bilder ~~Dreams~~
Re: Abgerundete Bilderboxen
« Reply #5 on: September 28, 2005, 05:04:00 PM »
@ KurtW

... doch wo hat ein Fieldset abgerundete Ecken ...  :?:

mawenzi

Beim IE auf alle Fälle, beim Mozilla Firefox leider nicht....

Kurt

Offline mawenzi

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: Abgerundete Bilderboxen
« Reply #6 on: September 28, 2005, 07:09:19 PM »
Beim IE auf alle Fälle ...

... das hängt aber von der Windows-Konfiguration auf deinem PC ab ... und von daher als Lösung nicht akzeptabel ...
... in meinem IE (6.0), WinXP, Design : klassisch  sind die Fieldsetecken in deinem Template Nr.42 sowas von scharfkantig ...  :wink:

mawenzi

Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

Offline mawenzi

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: Abgerundete Bilderboxen
« Reply #7 on: October 17, 2005, 03:31:01 PM »
und nochmals "runde" Ecken ...

- CSS: Runde und andere Ecken für skalierbare Boxen

mawenzi
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

Offline maikew

  • Jr. Member
  • **
  • Posts: 96
    • View Profile
    • MW PhotoWorks & Templates
Re: Abgerundete Bilderboxen
« Reply #8 on: November 18, 2005, 04:58:27 AM »
wow das sieht ja klasse aus,hab es bei mir gleich mal eingebaut  :D
werde damit mal bissl rumspielen   :mrgreen:

gruß
maike

Offline elcorazon

  • Jr. Member
  • **
  • Posts: 58
    • View Profile
Re: Abgerundete Bilderboxen
« Reply #9 on: January 31, 2006, 06:43:40 PM »
Vielen Dank Mawenzi für deine Arbeit komme ich auf dieses topic sehr gut!  :P


Offline jafori

  • Newbie
  • *
  • Posts: 19
    • View Profile
Re: Abgerundete Bilderboxen
« Reply #10 on: August 08, 2006, 10:08:30 PM »
When I finally find the best topic.. I find it in Dutch wich I dont understand =( so unlucky...

Offline mawenzi

  • 4images Moderator
  • 4images Guru
  • *****
  • Posts: 4.500
    • View Profile
Re: Abgerundete Bilderboxen
« Reply #11 on: August 08, 2006, 10:36:44 PM »
I find it in Dutch wich I dont understand

... but the topic is in german ...  :mrgreen:
... if you like rounded corners of image boxes  ...
... then only replace your old  /templates/<your_template>/thumbnail_bit.htm with the new thumbnail_bit.htm ...
... and copy all images files in /templates/<your_template>/images folder ...
Your first three "must do" before you ask a question ! ( © by V@no )
- please read the Forum Rules ...
- please study the FAQ ...
- please try to Search for your answer ...

You are on search for top 4images MOD's ?
- then please search here ... Mawenzi's Top 100+ MOD List (unsorted sorted) ...

Offline tdkpaul

  • Full Member
  • ***
  • Posts: 205
    • View Profile
Re: Abgerundete Bilderboxen / rounded corners of image boxes
« Reply #12 on: August 08, 2006, 11:11:23 PM »
lol
dutch

 :lol:

Offline jafori

  • Newbie
  • *
  • Posts: 19
    • View Profile
Re: Abgerundete Bilderboxen / rounded corners of image boxes
« Reply #13 on: August 11, 2006, 08:29:20 PM »
haha sorry guys =( i meant German :P....
my internet connection was dead for a while.. couldnt anser the replies.. but rounded edges worked =)
pretty coool