Image link in XML/HTML text forces new line
Hello All,
Question, in XML, can you have an image link not force a new line?
I have this code:
<copy><![CDATA[Copyright © 2012, Hotel Lab Consultants.<a target="_blank" href="http://www.facebook.com/HotelLabs"><img src="assets/global/fb-button.jpg" alt="Facebook"></a> | <a target="_blank" href="http://twitter.com/#!/hotellabs"><img src="assets/global/twitter-button.jpg" alt="Twitter"></a>]]></copy>
on a footer for this website:
Website
I wanted to add the Facebook/Twitter icons to the footer but it is causing a new line. Can that be avoided?
Thank you
Instead of creating them as anchor tags, place them inside 3 divs as background-image and give display:inline
For eg:
<div style="background-image:url(image1_src);display:inline;float:left;cursor:hand;cursor ointer;" onclick="openSite('1')"></div>
<div style="background-image:url(image2_src);display:inline;float:left;cursor:hand;cursor ointer;" onclick="openSite('1')"></div>
<div style="background-image:url(image3_src);display:inline;float:left;cursor:hand;cursor ointer;"
onclick="openSite('1')"></div>
You may have to adjust he width and height of the DIV to match the image size.
Also, onclick of DIV you should call a common method - openSite(siteId) - with some parameters (to determine the site), and open a window.open(site) from there.
cursor:hand;cursor ointer -> will give the hand symbol while we mouseover the image (exactly like anchor tag). Need to give both to make it work in all browsers.
Let me know if it helps
I don't think I can do that....I bought this as a template so this is what my settings.xml look like:
<?xml version="1.0" encoding="UTF-8"?>
<settings>
<!-- global settings -->
<global
site_width="940"
stylesheet_path="css/styles.css"
background_image="assets/global/bg.jpg"
background_color="0xFFFFFF"
website_title="Hotel Labs"
/> <!-- end global settings -->
<!-- banner settings -->
<banner
height="86"
filepath="assets/global/logo.jpg"
top_margin="0"
left_padding="0"
/> <!-- end banner settings -->
<!-- subscript settings -->
<subscript
bottom_margin="20"
horizontal_padding="0"
font_face="conduit_itc"
font_size="14"
font_color="0x484848">
<copy><![CDATA[Copyright © 2012, Hotel Lab Consultants.<a target="_blank" href="http://www.facebook.com/HotelLabs"><img src="assets/global/fb-button.jpg" alt="Facebook"></a> | <a target="_blank" href="http://twitter.com/#!/hotellabs"><img src="assets/global/twitter-button.jpg" alt="Twitter"></a>]]></copy>
</subscript> <!-- end subscript settings -->
<!-- navigation settings -->
<navigation
top_margin="50"
font_face="conduit_itc"
font_size="16"
font_color="0x484848"
horizontal_buffer="4"
vertical_buffer="1"
underline_color="0x484848"
underline_thickness="0.5"
underline_length="30"
/> <!-- end navigation settings -->
<!-- content settings -->
<content
top_margin="60"
left_padding="0"
main_heading_font_face="conduit_itc"
main_heading_font_size="24"
main_heading_font_color="0x484848"
/> <!-- end content settings -->
<!-- contact form settings -->
<contact_form
label_font_face="itc_officinaSans_book"
label_font_size="26"
label_font_color="0x4D4D4D"
label_top_margin="-5"
input_font_face="conduit_itc"
input_font_size="14"
input_font_color="0x1A1A1A"
input_horizontal_padding="8"
input_top_padding="0"
input_boxes_bg_color="0xE5E3E2"
input_boxes_alt_bg_color="0x828690"
input_boxes_height="26"
multi_boxes_height="117"
send_button_font_face="conduit_itc"
send_button_font_size="12"
send_button_font_color="0xE5E3E2"
send_button_bg_color="0x1A1A1A"
send_button_horizontal_padding="13"
send_button_vertical_padding="5"
send_button_left_margin="249"
send_button_top_margin="-4"
form_horizontal_buffer="19"
form_vertical_buffer="1"
form_label_width="95"
back_to_form_top_margin="40"
error_box_width="140"
php_file="email.php"
sent_message_font_face="itc_officinaSans_book"
sent_message_font_size="20"
sent_message_font_color="0x4D4D4D">
<back_to_form><![CDATA[back to form]]></back_to_form>
<php_failure><![CDATA[Ooops, connection to the server has failed; your message failed to send.<br /><br />Please contact our administor at <a href="mailto:hello@yomire.com">hello@yomire.com</a>]]></php_failure>
</contact_form> <!-- end contact form settings -->
<!-- white box settings -->
<white_box
navigation_font_face="conduit_itc"
navigation_font_size="17"
navigation_font_color="0x1A1A1A"
navigation_alt_font_color="0x828690"
linebreak_color="0x9B9B9B"
content_font_face="itc_officinaSans_book"
content_font_size="14"
content_font_color="0x808080"
content_line_spacing="8"
scroller_left_margin="25"
/> <!-- end white box settings -->
<!-- grey box settings -->
<grey_box
background_color="0xE5E3E2"
content_font_face="itc_officinaSans_book"
content_font_size="18"
content_font_color="0x4D4D4D"
/> <!-- end grey box settings -->
<!-- mini gallery settings -->
<mini_gallery
border_thickness="6"
border_color="0xE6E6E6"
navigation_top_margin="15"
navigation_number_font_face="conduit_itc"
navigation_number_font_size="17"
navigation_number_font_color="0x808080"
navigation_number_font_alt_size="34"
navigation_number_font_alt_color="0xe3e7f0"
navigation_number_underline_top_margin="-5"
navigation_number_underline_thickness="1.5"
/>
<!--
navigation_number_font_face="conduit_itc"
navigation_number_font_size="17"
navigation_number_font_color="0x808080"
navigation_number_font_alt_size="34"
navigation_number_font_alt_color="0x828690"
navigation_number_underline_top_margin="-5"
navigation_number_underline_thickness="1.5"
end mini gallery settings -->
<!-- portfolio settings -->
<portfolio
thumbs_vertical_buffer="15"
back_to_thumbs_font_face="conduit_itc"
back_to_thumbs_font_size="12"
back_to_thumbs_font_color="0xE5E3E2"
back_to_thumbs_bg_color="0x191919"
back_to_thumbs_top_margin="15"
back_to_thumbs_left_margin="10"
back_to_thumbs_horizontal_padding="12"
back_to_thumbs_vertical_padding="6">
<back_to_thumbs_copy><![CDATA[back to list]]></back_to_thumbs_copy>
</portfolio> <!-- end portfolio settings -->
<!-- banner rotator settings -->
<banner_rotator
content_font_face="itc_officinaSans_book"
content_font_size="14"
content_font_color="0xE5E3E2"
content_horizontal_padding="30"
content_vertical_padding="30"
arrows_top_margin="49"
arrows_horizontal_padding="21"
status_font_face="conduit_itc"
status_font_size="20"
status_font_color="0x000000"
status_right_margin="20"
status_horizontal_padding="9"
status_vertical_padding="15"
status_background_color="0xE5E3E2"
image_background_color="0xE6E6E6"
image_preloader_main_color="0x474747"
image_preloader_secondary_color="0x828690"
timer_color="0x828690"
/> <!-- end banner rotator settings -->
<!-- vertical scroller settings -->
<vertical_scroller
main_color="0x808080"
alternate_color="0x828690"
line_width="18"
line_thickness="2"
dragger_vertical_margin="10"
scroll_percentage="50"
/> <!-- end vertical scroller settings -->
<!-- preloader settings -->
<preloader
thickness="2"
horizontal_percentage="80"
/> <!-- end preloader settings -->
<!-- fullscreen settings -->
<fullscreen
allow_fullscreen="1"
border_thickness="2"
corner_radius="4"
box_width="20"
box_height="10"
box_color="0x808080"
box_alt_color="0x828690"
bottom_extra_margin="6"
/> <!-- end fullscreen settings -->
</settings> <!-- end settings -->
This isn't really an XML question, it's just styling. If you set the text to display:inline, or float:left, you'll allow the image to be on the same line.
So the xml would look something like:
Code:
<copy><![CDATA[<span style="display:block">Copyright © 2012, Hotel Lab Consultants.</span><a target.....
Dave
give the images id.
for example: <img id="fBook" src="..." /> <img id="twitter" src="..." />
<style>
#fBook
{
width:200px;
float:left;
}
#twitter
{
width:200px;
float:left;
}
</style>
basically you need to give them a size and float them left or right, then you can add margin-left or margin-right to position them.
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Posting Permissions
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Bookmarks