Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    73
    Thanks
    12
    Thanked 2 Times in 2 Posts

    Ticker Width Problem

    Hello,

    I cannot thank you all enough for this forum and the help your members have given me.

    I have used jquery with the newsticker plugin. I have placed an image as a background to the ticker but need it to be 100% width. Im figuring i cannot set a % width to a background image? Can anyone help?

    I can easily do this all fixed width but my site has to be fluid.

    http://www.bushcottages.co.uk/purecss1.htm

    Thanks
    Peter

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Good morning far2many,
    Are you talking about butt.png? The words 'News Articles' aren't even going to be readable if you stretch them the width of #ticker. Also, since it is part of the content, it can be semantically presented from the markup - that way you can have a background image that repeats on the x axis.

    Would a background color be easier?
    Like this -
    Code:
    #ticker
    {
    width: 90%;
    height: 22px;
    margin-left: 5%;
    border: 0px solid #000066;
    white-space: nowrap;
    overflow: hidden;
    background: #00f url('images/ticker/butt.png') no-repeat;
    /*background-repeat: no-repeat;*/
    
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Feb 2011
    Posts
    73
    Thanks
    12
    Thanked 2 Times in 2 Posts

    Confused about the issue

    Hi thanks for the reply. I can blank out the news articles text and position some text there later absolutely. So if we imagine that that butt.png is just a blue box how can i get it so that the ticker displays in the white area?

    I am pickign up more advanced concepts of css easily but this background image vs img src thing has my mind blown.

    Is it possible to set the width in percentage of the background image or does it have to be in the markup section.

    Any further help woudl be appreciated.

    Thanks
    Peter

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by far2many View Post
    So if we imagine that that butt.png is just a blue box how can i get it so that the ticker displays in the white area?
    What happens when you repeat it like this - background: url('images/ticker/butt.png') repeat-x;
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    73
    Thanks
    12
    Thanked 2 Times in 2 Posts

    No change to the layout at all

    Thanks for that i tried it but it made no difference. The image butt.png is larger than the 90% space of the container but i need it to shrink and be 100% inside it. I think its something to do with multiple divs inside a container or a src img attached to a div set to width="100%".

    As i said im picking it all up very easy but im confused at to this problem (which i asked about a menubar earlier and decided against). I dont think a background image in the css can be set to 100% width inside a container?

    Any more help would be superb

    Peter

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    I think you are trying to do things with an image that would be much easier to do by just styling the elements in question.

    Have a look at this example -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fff;
    }
    #container {
    	width: 90%;
    	margin: 30px auto;
    	padding: 50px 0 500px;
    	background: #ccc;
    }
    #ticker {
    	height: 20px;
    	width: 90%;
    	margin: 0 auto;
    	background: #fff;
    	border: 1px solid #000066;
    }
    #ticker h4 {
    	width: 200px;
    	margin: 0;
    	padding: 0;
    	background: #000066;
    	color: #fff;
    	text-align: center;
    }
    </style>
    </head>
    <body>
        <div id="container">
        	<div id="ticker">
            	<h4>News Articles</h4>
            <!--end ticker--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Feb 2011
    Posts
    73
    Thanks
    12
    Thanked 2 Times in 2 Posts

    Nearly there

    Thanks for the help. I have yet to check out that last response as i was working on this. I have the image 100% but the text wont go on top of it. I feel we are close.

    test page at http://www.bushcottages.co.uk/purecss12.htm

    Peter

  • #8
    New Coder
    Join Date
    Feb 2011
    Posts
    73
    Thanks
    12
    Thanked 2 Times in 2 Posts

    Got text on does it work?

    hello

    how is this semantically? does it work at all?

    Thanks
    Peter

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by far2many View Post
    hello

    how is this semantically? does it work at all?

    Thanks
    Peter
    News Articles stretches out of proportion, it also compresses out of proportion.
    Ticker text goes over News Atricles too.
    Attached Thumbnails Attached Thumbnails Ticker Width Problem-clipboard01.jpg  
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    far2many (02-20-2011)

  • #10
    New Coder
    Join Date
    Feb 2011
    Posts
    73
    Thanks
    12
    Thanked 2 Times in 2 Posts

    Thats wierd behaviour

    Excavator

    I have thanked you for your continued support. I can correct the news articles but the behvaiour of the ticker is odd to say the least. Have you seen anything like this before? Any possible solutions?

    Do you think the three div solution im working on is a good solution or should i alter it.

    On a personal note do you think im better avoiding a fully fluid site?

    Peter

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    The news ticker just needs to be moved over from the left side of it's relative parent. It's already absolutely positioned, you just don't position it anywhere yet.

    Your 3 div method seems to be working for you. If you don't mind the image based words getting proportions skewed in different resolutions then go with it.
    I think I would prefer the method I posted in my example.

    I have said before, but maybe not to you, that I prefer more control over my content than a completely fluid site allows. Fluid backgrounds and containers are fine but I don't usually want a box of text changing sizes.
    That's just me though, a fluid site may suit you fine.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    far2many (02-20-2011)

  • #12
    New Coder
    Join Date
    Feb 2011
    Posts
    73
    Thanks
    12
    Thanked 2 Times in 2 Posts

    Spot on

    Thanks and Thanked

    Peter


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •