new flirts and editing

[moylo]

Hi
   An annoying side effect of editing our flirts and adding new ones is that the tick box appears above the flirt instead of beside it after saving.  can someone tell me how to place the tick box beside the flirts?   

  cheers Mark

[admin2]

From what you say it seems like a design problem. Ask your designer about it. Of course, I can have a look too but I need access.

[maverick]

Hi Dan;

I think maybe what moylo is asking is how to format the flirts selections from a users aspect when sending a flirt.

When viewing flirts from the admin side of things the edit/delete buttons are centered to the left of the flirts, whereas from the users end the radio button to select a flirt sits above each flirt rather than centered to left like in the admin.

The admin side uses basic tables to accomplish this whereas on the user side it uses the list format located in "skins_site/def/styles/flirt_send.css".

From what I understand I think he wants to left float the radio button so it's inline with the flirt message instead of being above it. Besides editing the "flirt_send.css" file it would also require some editing to the actual code used to display the flirts to assign the appropriate CSS elements, but I'm not sure where the actual flirt display code is located.

[admin2]

There's no need to change the html code. Simply using this code in flirt_send.css would do the trick:

Code:

.flirts_list li input {
    float: left;
}

[moylo]

Hi. yes,  It the members view of flirts thats not showing correctly . will try dans code when I can finally ftp. internet today is rubbish here.

                     will let you know

                                                   cheers mark

[moylo]

The added code didn't make any difference.

This is a sample of the flirts listed below from
view-source:http://www.ourwebsite.com/etano/flirt_send.php?to_id=17876&return=home.php



<li><input type="radio" name="flirt_id" id="flirt_id_20" value="20" /><label for="flirt_id_20">have you been to my country?</label></li>

The Above flirt is showing correctly the ones below are showing under the check box, not beside it.

<li><input type="radio" name="flirt_id" id="flirt_id_23" value="23" /><label for="flirt_id_23"><p>Are you interested in having a relationship with me?</p></label></li>
<li><input type="radio" name="flirt_id" id="flirt_id_61" value="61" /><label for="flirt_id_61"><p>What will you do tonight?</p></label></li>
<li><input type="radio" name="flirt_id" id="flirt_id_63" value="63" /><label for="flirt_id_63"><p>I will go out to bar tonight, Do you want to come with me?</p></label></li>

any Ideas what is causing this and how to fix?

        regards Mark

[maverick]

Hi Mark;

try this ...

Code:

.flirts_list li input {
    display: inline;
    float: left;
}

[admin2]

Aaarghhh, the problem happens because of the extra <p> in the flirt text which is added by tinymce when you add/edit a flirt in admin.
Add this css instead of the previous suggested ones:

Code:

.flirts_list li p {
display: inline;
}

[maverick]

Code:

.flirts_list li p {
display: inline;
}

Yes that will work as long as your flirts contain only text. Now that the <p> tag has been changed to be an inline tag rather than it's natural block tag format, the <p> tags will no longer stack therefore if you include images the text will run in-line with the image rather than below or above the image. The same goes if you want several separate lines of text.

One workaround would be, when you create your flirts in the TinyMice editor is to manually edit the HTML and use the <br /> tag in place of the <p> tags, which would be a bit of a pain.

If you're including images in all your flirts this hack works reasonably well.

Code:

.flirts_list li input {
    display: inline;
    margin-top: 50px;
    width: 50px;
    float: left;
}

When floating blocks, text will naturally wrap around the content of the floated block, but it still looks ok. There's hacks that can be used to stop text from wrapping around floated blocks, however they are kind of complex and can be quirky in some browsers.

As great as CSS is, there are still some instances where tables can make life a lot easier, maybe this is one of those instances, especially given the fact that the HTML is created by TinyMice.

I always use CSS as the primary structure for developing a site, however there are certain things within the CSS structure I will still use tables for (tables styled with CSS). One example is creating something like a "Feature Comparison Chart" where you have multiple rows and columns that you want to be structured very tight and specific. Sure it can be done using just CSS, but it's not all that easy and can sometimes be very frustrating, and the flirt selections is somewhat similar to a feature comparison chart.

Having the radio selection button centered to the left of the flirts is probably the most aesthetically pleasing way to have it, however I personally don't have any real problems with the radio selection button appearing directly above the flirts. I just made the separator line between flirts a little bolder and more distinctive so there's no chance of any confusion for the user.

[moylo]

Hi Again
             Thanks for the help guys.  Now the flirts are showing the way we want.

                      Cheers Mark