[Solved] div background image not displaying properly, using external CSS

[Marty-Woodcock]

This is my HTML code:

div class=”logo”>text links here /div>

What I want:

Using CSS, my websites logo in the upper left corner of the page, with some text links to my other folders/directories, centred with the logo, and on the right of the logo.

My CSS:

div.logo
{
background-image: url(“../images/Logo.png”) no-repeat;
width: 212px;
height: 212px;
}

My logo is exactly 212px in both height and width.

The problem:

The logo only displays the top sliver of the image, and the text aligns to the left of the page, going straight through where the image would/should go, if it displayed properly.

My directory structure:

[main dir
[folder
Index.html]
[folder
Index.html]
[folder
Index.html]
[css
main.css]
Index.html
]

What am I doing wrong and how do I correct it? For any interested, here is my website: http://www.martysmegapixels.pro. What’s up is almost what I want, but I want the entire image to be displayed.

[nixnerd]

[main dir
[folder
Index.html]
[folder
Index.html]
[folder
Index.html]
[css
main.css]
Index.html
]

So you have 4 index.html files then?

What am I doing wrong and how do I correct it?

At the moment I’m not sure because I could not be more confused by your directories.

[Ricky55]

Presumably he’s using index files within folders for clean URL’s. Although I don’t see how the folder structure is relevant.

Your logo appears to view for me, Firefox 30.

What browser are you using?

[Marty-Woodcock]

NIX, I’m not sure why or how you are confused.

Within the main directory, I have several folders/directories.

Within each, I have a single html file called index.html.

At the moment I’m not sure because I could not be more confused by your directories.

[Marty-Woodcock]

Ricky55

What browser are you using?

I’m testing this with Firefox, SeaMonkey and Chrome

[Marty-Woodcock]

wolfcry911

there’s no div classed logo on the page?

Yes. The div class is logo

we can start with your logo background image question, but we need to see the code.

I thought I supplied the code in my original query. I tried submitting it a few times, but for some reason, the html didn’t show up, so I had to delete the first < for my code to be visible.

Currently, the image isn’t loading because you haven’t used the correct url – filenames are case sensitive (logo.png is different than Logo.png).

I am using the correct file name. The logo is named “Logo.png”, and is in the images folder, in the main directory. The CSS file is in a folder called “stylesheets”, named “main.css”.

The link attributes on the body are deprecated.

What do you mean by “deprecated”? Why are they not appreciated?

The use of iframes (or frames) for loading pages is very old school. The use of pipe characters to divide the menu is also old – usually an image, border, or other method is used.

It has been over six years since I coded a website/page, so I’m using what I know/remember. I have a few photo-blogs I want displayed in my site (in their respective pages/directories). How can I accomplish this, without using iframes? I’m not sure what you mean by “pipe characters”, so cannot comment on that.

Inline styling should be avoided.

I agree. That’s why I didn’t put any in. The program (SeaMonkey’s composer put in any that are their. Once I get the logo thing figured out (and possibly replacing the iframes with something “better” to display an external webpage [my blogs]), then I should be fine. Its a very basic site, with very few images on the website itself. 99% of the images will be on my external blogs, brought into the site.

If just for testing purposes, it’s still better to separate the styling into the head of the page, but a stylesheet is best.

Thats why I’m using an external stylesheet.

The big element is no longer supported. Further, to nest it 4 times (and then use a small?) is just bad – use css for the anchors directly.

I didn’t put any “big” elements in. It must have been from SeaMonkey. I can clean all that crap code up in notepad later. What I mainly want right now though, is to have the logo displayed properly. I can worry about replacing the crap code (generated by SeaMonkey), later, as with replacing the iframes, with something more “modern”.
Regarding iframes – what do you recommend I replace them with, and what would the code be?

I’m trying not to be a dick, and if I’m coming across as one, I apologize. It has been over 6 years since I’ve done anything like this, and I need to be “updated” as to what is used today. Based on my replies to you and others, can you or someone babystep me, as to precisely how to do what I want my site to do please? Thank you in advance.

Marty.

[Marty-Woodcock]

wolfcry911, to save a lot of grief on both our parts, here is the direct URL to my stylesheet: http://martysmegapixels.pro/stylesheets/main.css

It should be noted, that I am not using a template on my site. I should, but don’t know how with (mainly) coding. When I had my Mac, (over six years ago), I was using Dreamweaver for that. Now I only have a PC, and can’t afford the cloud versions. (until I build my client list up for photography that is). I hope this will clear some things up.

Marty.

[Paulie_D]

Seems he went the h1 route as it’s now loaded.

[Author]

Posts