The secure CMS.

Welcome to Geeklog, Anonymous Sunday, December 22 2024 @ 12:39 pm EST

Geeklog Forums

Trouble placing image in story

 New Topic  Post Reply
 01/05/07 02:50pm (Read 1,802 times)  
Status: offline

jastanle84

Forum User
Chatty
Registered: 12/17/06
Posts: 36
I'm having trouble placing an image in my story (sorry, i'm new at this html thing). This is my code:
Text Formatted Code
[image1_left]<font size="3" face="Arial"><b>Our Mission</b></font> is to provide the highest quality computer systems and services to businesses through superior customer responsiveness and competitive prices.
<br /><br><font size="3" face="Arial"><b>Specializations:</b></font></br>
Microsoft Windows Services and Web Content Management Systems Services.
</br>
I would like the image to be placed on the left of the text, but also have spacing between the image and text. Right now the image runs into the text. What do I have to add in order to have the image on the left with with a defined space between the text?
 Quote
 01/05/07 03:35pm  
Status: offline

Dirk

Site Admin
Admin
Registered: 01/12/02
Posts: 13073
Location:Stuttgart, Germany
Try something like
Text Formatted Code
<p>[image1_left] Our mission ...</p>
and then define the spacing in the stylesheet.

Assuming you're using the Professional theme, something like
Text Formatted Code
.story-body img {
  padding: 8px;
}
should should add 8 pixels of whitespace around the image (untested - adjust as necessary).

bye, Dirk
 Quote
 01/05/07 04:04pm  
Status: offline

jastanle84

Forum User
Chatty
Registered: 12/17/06
Posts: 36
I'm actually using the Axonz Red 3.4 Version of the style.css. The story block of this reads:
Text Formatted Code
====================================================================================
STORY OPTIONS
====================================================================================
*/

#story-block {
}


.story-header {
       
        height: 25px;
        border-bottom-color: #999999;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        margin-bottom: 4px;
}

        .story-date {
                color: #888888;
                font-size: 10px;
                font-family: "Lucida Grande", arial, sans-serif;
                white-space: nowrap;
                float: left;
                vertical-align: middle;
        }
       
        .story-options {
                color: #888888;
                font-size: 10px;
                font-family: "Lucida Grande", arial, sans-serif;
                text-align: right;
                white-space: nowrap;
                float: right;
        }


.story-body {
        white-space: nowrap;
}

.story-image {
        width: 50px;
        float: left;
        margin-top: -2px;
}

.story-text {
        color: #888888;
        font-size: 11px;
        font-family: "Lucida Grande", arial, sans-serif;
        margin-top: 5px;
        margin-left: 50px;
        white-space: normal;
}

.storytitle {
        color: #000000;
        font-size: 18px;
        font-weight: bold;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
}

.storybyline {
        font-size: 11px;
        font-family: "Lucida Grande", arial, sans-serif;
}

.storycontent {
        color: #333333;
        font-size: 11px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        line-height: 16px;
        padding-top: 10px;
        padding-bottom: 20px;
}

.storyinfo {
        color: #888888;
        font-size: 11px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
}


.featuredstorytitle {
        color: #CC0000;
        font-size: 18px;
        font-weight: bold;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        padding-top: 3px;
}



.welcomeblock {
        color: #000000;
        font-size: 11px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        padding-top:2px;
        padding-bottom:2px;
        padding-left:2px;
        padding-right:2px;
}

.story-footer {
        font-size: 11px;
        font-family: Arial, Helvetica, sans-serif;
        background-color: #F3F3F3;
        padding-top: 3px;
        padding-left: 5px;
        padding-bottom: 3px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #666666;
}
I tried many scenarios with this, but no such luck, maybe someone can figure out how to create padding with the story image.
 Quote
 01/05/07 04:09pm  
Status: offline

jastanle84

Forum User
Chatty
Registered: 12/17/06
Posts: 36
ok, did what dirk said, as usual:
Text Formatted Code
.story-body img{
        white-space: nowrap;
        padding: 8px;
}
i did not need to add the

tags, though. Thanks, Dirk

 Quote
 New Topic  Post Reply
All times are EST. The time is now 12:39 pm.
  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content