Click to See Complete Forum and Search --> : [RESOLVED] Two Questions...
banksworld1986
01-10-2008, 09:19 AM
Hello.
I'm trying to figure out why my text isn't being positioned inline....
Here's the html code:
<style type= "text/css">
#navlinks li p {color: white;}
#navlinks ul li {display: inline; margin-left: 10px;}
</style>
<div id="navlinks">
<ul>
<li><p>Our Style</p></li>
<li><p>Our Look</p></li>
<li><p>Men Apparel</p></li>
<li><p>Women Apparel</p></li>
<li><p>Sign Up</p></li>
</ul>
</div>
Also...
I'm trying to place a background image behind the lists and my original code isn't working either. Here's the style:
#navlinks {
height: 14px;
width: 651px;
margin-left: 262px;
margin-top: 0px;
background-image: url ("images/Link-Bkgd1.gif");
background-repeat: repeat-x;
}
The width of the link background image is 130px. And the thought process was to set is as a background image for the lists and let it repeat for a width of 651px. Since it's a set size of 130px, there should be multiple images repeating (one for each list).
How do I do that?
tomasz_be
01-10-2008, 09:38 AM
Hi
For your 1st question, use float:left; instead of display:inline;
dtm32236
01-10-2008, 09:42 AM
For your 1st question, use float:left; instead of display:inline;
no, display:inline; is correct, but you need display:inline on both the <ul> and the <li>s.
Also...
I'm trying to place a background image behind the lists and my original code isn't working either. Here's the style:
#navlinks {
height: 14px;
width: 651px;
margin-left: 262px;
margin-top: 0px;
background-image: url ("images/Link-Bkgd1.gif");
background-repeat: repeat-x;
}
The width of the link background image is 130px. And the thought process was to set is as a background image for the lists and let it repeat for a width of 651px. Since it's a set size of 130px, there should be multiple images repeating (one for each list).
How do I do that?
Take the quotes out of your url address.
background-image: url (images/Link-Bkgd1.gif);
Quote from http://www.yourhtmlsource.com/stylesheets/cssbackgrounds.html:
sourcetip: You may see some sites using quote marks as well as the brackets around the URL of the image they’re using as a background, as in
background-image: url("image.png");
This is unnecessary and advised against, as it causes IE/Mac to cough and splutter. Leave the quotes out.
OctoberWind
01-10-2008, 11:49 AM
One thing I have found regarding the quotations in the url, is that when you use the css shorthand, you need the quotations.
#navlinks {...; background: url ("/images/Link-Bkgd1.gif") repeat-x;}
saves some line space, and eventually file size. :)
dtm32236
01-10-2008, 11:52 AM
One thing I have found regarding the quotations in the url, is that when you use the css shorthand, you need the quotations.
i completely disagree.... in fact - quite often IE and Macs won't display the image if it's in quotes, as RGL correctly stated.
leave quotes out, whether you're writing it shorthand or not.
banksworld1986
01-11-2008, 07:27 AM
The quotes really don't matter.
My other ID backgrounds are displaying properly. The problem is with this link background that I designed in Photoshop and I'm trying to display it as a background for the links in the code. And from some strange reason it isn't working.
#navlinks {
line-height:2em;
width: 651px;
margin-left: 175px;
margin-top: 5px;
background-image: url(images/Link_Bkgd1.png);
background-repeat: repeat-x;
background-color: #1219aa;
}
The image for some strange reason just doesn't want to show. I've used the same formula for my background #header and #content and it's showing perfectly. For those two ID's, I sliced the background and let it repeat-x.
The difference is that the Link Background is an actual image. So I didn't think I needed to slice this image. I've attached the image to this post. Also, I've tried it as a .gif and .png and neither is working. Ignore the bkgd-color..I just put it there as a test.
banksworld1986
01-11-2008, 08:11 AM
You can take a look at the site here:
www.ibtestsite.info
dtm32236
01-11-2008, 08:36 AM
first:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
this is only for xml/xhtml - take this out... make it just <html>
also, take this out: <meta name="JRStudios Fashion" content="My First Site" /> ... that doesn't mean anything. But if you're gonna leave it for whatever reason, name can only contain one word - make it JRStudios_Fashion or something.
Also, you're using HTML doctype - not XHTML, so you don't need to close tags with />
<link rel="stylesheet" type="text/css" href="styles/default3.css" />
that last "/", take those out - of every tag you have it in.
then, when you're page is validated (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.ibtestsite.info%2F), try doing the background like:
background:#1219aa; url(images/Link_Bkgd1.png); repeat-x;
and are you absolutely positive that you're referencing the image correctly? it's uploaded on your server to that location.
and is this a transparent .png? - IE tends to have many problems with these...
banksworld1986
01-11-2008, 08:52 AM
Okay..
I made the changes and still nothing happened. (www.ibtestsite.info)
#navlinks {
line-height:2em;
width: 651px;
margin-left: 175px;
margin-top: 5px;
background: #1219aa; url(images/Link-Bkgd1.gif); repeat-x;
}
The images are being referenced correctly. I go into the properties option to make sure the name is referenced right and still nothing.
Maybe it has something to with the whole repeat-x thing.
When I sliced the other images and just saved a 1 px image, repeat-x tiled it perfectly.
But I didn't slice the link background because I didn't think I had to. The image itself should tile to whatever width I give it right?
banksworld1986
01-11-2008, 09:00 AM
And it passed the validation. Go figure.
dtm32236
01-11-2008, 09:01 AM
i'm sorry - i messed that up...
background: #1219aa; url(images/Link-Bkgd1.gif); repeat-x;
take out those extra ;s
background: #1219aa url(images/Link-Bkgd1.gif) repeat-x;
that's GOTTA work...
But I didn't slice the link background because I didn't think I had to. The image itself should tile to whatever width I give it right?
yeah, you're right there.
OctoberWind
01-11-2008, 09:18 AM
semi-dumb question, simply because i don't know your setup, or your system. but is the Link-Bkgd1.gif [RGB] and not [CMYK]?
my MS host doesn't have problems with CMYK images (for the most part), but the UNIX system at work and at home doesn't display CMYK. Seems like a minor issue, but depending on how you made your image (it looks like there are transparencies?), that could pose a problem.
banksworld1986
01-11-2008, 09:24 AM
background: #1219aa url(images/Link-Bkgd1.gif) repeat-x;
Done.....and nothing. www.ibtestsite.info
I got rid of all copies of index.html and index.css off of my harddrive so one wouldn't override the other and nothing happened.
I'm clueless.
Maybe, it has to have something to do with the way it's saved...?
banksworld1986
01-11-2008, 09:25 AM
To Octoberwind...
Yes the background for the image is transparent. It's a graphic over a transparent background.
OctoberWind
01-11-2008, 09:56 AM
i think i might have found a solution.
1) is your 'styles' and 'images' folder in the [root] of your webhost?
I got the images to show up with this code
background: url(../images/link-bkgd1a.gif) repeat-x ;
HTML (from your site): http://www.octoberwind.com/webdeveloper/011108/strange-image.html
CSS (from your site):
http://www.octoberwind.com/webdeveloper/011108/styles/default3.css
Image (from you, saved as GIF64-dithered):
http://www.octoberwind.com/webdeveloper/011108/images/link-bkgd1a.gif
is this what you were aiming for?
dtm32236
01-11-2008, 09:59 AM
you're getting a css error (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.ibtestsite.info%2F) for the background property... i don't understand why.
where are you, webjoel, toiken, centauri, etc? :)
Zoidal
01-11-2008, 12:19 PM
Check the name structure and location of your image files EG:
Link_Bkgd1.png vs Link-Bkgd1.png