www.webdeveloper.com
Results 1 to 5 of 5

Thread: Image link in XML/HTML text forces new line

  1. #1
    Join Date
    Nov 2006
    Posts
    593

    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

  2. #2
    Join Date
    May 2012
    Posts
    14
    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;cursorointer;" onclick="openSite('1')"></div>
    <div style="background-image:url(image2_src);display:inline;float:left;cursor:hand;cursorointer;" onclick="openSite('1')"></div>
    <div style="background-image:url(image3_src);display:inline;float:left;cursor:hand;cursorointer;"
    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;cursorointer -> 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

  3. #3
    Join Date
    Nov 2006
    Posts
    593
    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 -->

  4. #4
    Join Date
    Aug 2006
    Posts
    1,943
    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 &#169; 2012, Hotel Lab Consultants.</span><a target.....
    Dave

  5. #5
    Join Date
    Nov 2010
    Posts
    15
    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
  •  
HTML5 Development Center



Recent Articles