23 replies [Last post]
smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 26 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Can someone tell me exactly how you would postion a background image appropriately. Here is the css code I have:
background:#DADACE url(../images/browse-articles.gif) no-repeat right;

I still need the background image to have about 10 to 15px padding from the right but everytime I add padding to this code like (ie. 0 50% ) the image dissapears. I guess I'm not understanding the concept?

Kehfera
Offline
Regular
Virginia
Last seen: 15 years 15 weeks ago
Virginia
Timezone: GMT-5
Joined: 2007-02-28
Posts: 27
Points: 0

More to your coding...

I am assuming this is a css file or not? Is there any html where we can see how you coded the information?

This is a problem I recently came across myself.

Cheers,
Kehf

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

smk2007 wrote:Can someone

smk2007 wrote:
Can someone tell me exactly how you would postion a background image appropriately. Here is the css code I have:
background:#DADACE url(../images/browse-articles.gif) no-repeat right;

I still need the background image to have about 10 to 15px padding from the right but everytime I add padding to this code like (ie. 0 50% ) the image dissapears. I guess I'm not understanding the concept?



Positioning of background url's is by x-pos and y-pos. These can be absolute with reference to the page, or relative to the top left.

What you want is to be relative to the top right. No can do. However, you can position the div it is in from the right by adding margin-right to it and then the bg image can be placed absolutely inside this at the right.

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 26 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Sure. Here is the full css

Sure. Here is the full css code being called from an external file:
.newsletterBg {
background:#DADACE url(../images/browse-articles.gif) no-repeat right;
border-bottom:1px dashed #BBB6B4;
border-right:1px dashed #BBB6B4;
padding:10px;
color:#B1431C;
text-align:left;
font-family:Times New Roman, Times, serif, Verdana;
font-weight:bold;
font-size:110%;
height:40px;

And here is the html code:

NEWSLETTER SIGNUP

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

background images display in

background images display in the padding area. You could margin the space you need, or add transparency to the image, or size it accordingly.

edit/ man that CT is fast (must be that kron 1664 Planet Rock stuff)

Kehfera
Offline
Regular
Virginia
Last seen: 15 years 15 weeks ago
Virginia
Timezone: GMT-5
Joined: 2007-02-28
Posts: 27
Points: 0

FAST... you aren't kidding...

I learn by helping and no sooner had I gotten some of it in my head, he was jolly on the spot!

Maybe I can help some other time.

Kehf

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 26 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Sorry -- I know you guys are

Sorry -- I know you guys are having fun but I'm not understanding the solutions?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Dya listen to Planet Rock?

Dya listen to Planet Rock? If not tune in right now. It is awesome (on broadband at planetrock.co.uk

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

put a right margin on

put a right margin on .newsletterBg {margin-right: 15px;}

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

ClevaTreva wrote:Dya listen

ClevaTreva wrote:
Dya listen to Planet Rock? If not tune in right now. It is awesome (on broadband at planetrock.co.uk

No, never heard of it before, but I'm in the US and it seems I'd need a UK postcode anyway...
Have you tried Pandora.com?

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 26 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Why listen to Planet Rock

Why listen to Planet Rock when you can build your own station? PANDORA.COM

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I'll try it if you will

I'll try it if you will Smile

planetrock.co.uk

Click listen now. Pure classic rock. I'm a sixties (born 59) child, but not the Beetles me. Oh no. Genesis, Deep Purple, Black Sabbath, you know it. I teach, so my kids get this or Kerrang radio, also excellent. Light my Fire is on right now.

Yeh baby

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 26 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

put a right margin on

put a right margin on .newsletterBg {margin-right: 15px;}

Thanks but if I do this then my whole div tag comes in from the right.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

smk2007 wrote:Why listen to

smk2007 wrote:
Why listen to Planet Rock when you can build your own station? PANDORA.COM

Well, find your music? I have. Planet Rock. So very very few ads. Very little chat. Pure rock. Not diddy tracks, Full album or even live versions. Oh yes.

DJ's? They really know their stuff. Often tehy are the band members doing a guest slot. Great competions. Win Jethro Tull tickets. Come on, Jethro Tull!

Jefferson Airplane just been on (last saw them at the Genesis re-union concert at Knebworth 1978).

Tune in and tell me you like it.

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 26 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Thanks ClevaTreva but I'm

Thanks ClevaTreva but I'm not really a classic rock person... More alternative, blues, jazz, & perhaps new age...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Yeh, some of my kids say

Yeh, some of my kids say that too Smile But they signed up for two year courses. Ha ha.

Surprising how many get to like it. Even my 8 year old nead nags along in the car. Tells her mom (in the back, my ex) to be quiet when she ask me to turn the v loud music down. Life is gooooood

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

smk2007, can you show us a

smk2007, can you show us a pic of what you want so we can more properly direct you?

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 26 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Sure. See attachment of the

Sure. See attachment of the design. I went ahead and made the actual background image to have more padding color on the right so that fixed my initial problem without worrying about padding in my div but now I have the next problem and that is where you see "BROWSE PREVIOUS NEWS ARTICLES" -- I'm trying to place a div inside this so that I can place that content as a text link but the alignment wants to fall to the bottom right even if I position the div tag to the right as relative...

BROWSE PREVIOUS
NEWS ARTICLES

ANY THOUGHTS? Sad

AttachmentSize
sample.gif 4.87 KB
wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

can you show us all the

can you show us all the related html/css? I think you may be going about this in a roundabout way.

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 26 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

ok here is the html <div

ok here is the html

NEWSLETTER SIGNUP

BROWSE PREVIOUS
NEWS ARTICLES

And here is the css:

.newsletterBg {
background:#DADACE url(../images/browse-articles.gif) no-repeat right top;
border-bottom:1px dashed #BBB6B4;
border-right:1px dashed #BBB6B4;
padding:10px;
margin:0;
color:#B1431C;
text-align:left;
font-family:Times New Roman, Times, serif, Verdana;
font-weight:bold;
font-size:110%;
height:40px;

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Is this the sort of thing

Is this the sort of thing you wanted?

Your Page Title Here

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}
input,select{
margin:0;
padding:0;
}
body{
font-family:verdana,arial,sans-serif;
font-size:100.1%;
}
strong,b{
font-weight:bold;
}
p{
font-size:90%;
line-height:1.1em;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */

.newsletterBg {
background:#DADACE url(../images/browse-articles.gif) no-repeat right top;
border-bottom:1px dashed #BBB6B4;
border-right:1px dashed #BBB6B4;
padding:10px;
margin:0;
color:#B1431C;
text-align:left;
font-family:Times New Roman, Times, serif, Verdana;
font-weight:bold;
font-size:110%;
height:40px;
}

NEWSLETTER SIGNUP

BROWSE PREVIOUS
NEWS ARTICLES

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 26 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Thanks. This may sound like

Thanks. This may sound like a silly question - but what is the .floatcontainer class code for? It doesn't appear to be in use? And also why did you include a lable code to "NEWS LETTER SIGNUP"? That was already in a right position and basically was being called from the newslettBG class code...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Oh I used a basic blank

Oh

I used a basic blank page that I always use to make pages. It has that in. A container that has floats in in FF won't contain them unless you add that class to them (or another hack). Imagine you have a floated element 200px high, inside a div with a 1px border. In IE, the outer div will look like a box aroud the float, but in FF it will be a 2px high div (the top and bottom border) with the float extending out by 198px.

If you have an input box, what goes in it? Usually, a label says what goes in. If that text isn't prompting you to type in that input box, make it a hx (maybe h2 or h3) tag instead. It needs to be in something to style it (needs to float you see). You can't just put text on the page. It needs to be in something. The form tag isn't designed for text, so maybe a label, maybe a hx tag.

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 26 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

I got it now. Thanks so

I got it now. Thanks so much for your help!