...

View Full Version : Ticker Width Problem



far2many
02-20-2011, 03:35 PM
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

Excavator
02-20-2011, 05:02 PM
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 -
#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;*/

}

far2many
02-20-2011, 06:23 PM
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

Excavator
02-20-2011, 06:27 PM
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;

far2many
02-20-2011, 06:36 PM
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

Excavator
02-20-2011, 06:50 PM
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 -
<!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>

far2many
02-20-2011, 07:20 PM
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

far2many
02-20-2011, 07:33 PM
hello

how is this semantically? does it work at all?

Thanks
Peter

Excavator
02-20-2011, 07:43 PM
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.

far2many
02-20-2011, 07:51 PM
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

Excavator
02-20-2011, 07:59 PM
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.

far2many
02-20-2011, 09:00 PM
Thanks and Thanked

Peter



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum