Member Avatar for Lukas Larsson

Hello,

I have been trying to code my first HTML / CSS site from a layout I designed in the GIMP. The layout can be found here (watermarked): http://admins.co.cc/watermarked.png

Now, I have been trying to code this layout through HTML and CSS. My problem is that I can't get the Images to display through the CSS. I know it's a pretty simple problem (I think), but I can't seem to find here.

Here are my CSS and HTML codes:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="assets/asf.css" media="all"  />
<html lang="en">
<head>
    <title>New Layout - Lukas</title>
</head>
<body>
        <div id="header">
            <div id="logo"></div>
            <div id="name">LukasLarsson.com</div>
            <div id="tagline">TEST TEST 123</div>
    <div id="menu">
    </div>
        </div>
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

/* 	
	Template Name: 
	Author: Lukas Larsson
	Website: www.admins.co.cc | www.lukaslarsson.com
*/

/* Body */

body {
	background: #fff;
	margin: 0;
	font: 100%/150% Geneva, Arial, Helvetica, sans-serif;
	color: #000;
}

h1 {
	color: #000;
	font-size: 20px;
}

h1 a:hover {
	color: #000;
	cursor: pointer;
}

h2 {
	color: #000;
	font-size: 17px;
}

h2 a:hover {
	color: #000;
	cursor: pointer;
}

h3 {
	color: #000;
	font-size: 15px;
}

h3 a:hover {
	color: #000;
	cursor: pointer;
}

a, a:visited {
	color: #006699;
	text-decoration: none;
}

a:hover {
	color: #000;
	text-decoration: underline;
}

/* Header */

#header {
	height: 94px;
	width: 998px;
	background: url(Images/header.png) no-repeat;
}

#name {
	color: #000;
	font-size: 30px;
	padding-top: 13px;
	padding-left: 20px;
	width: 800px;
}

#tagline {
	color: #000;
	font-size: 15px;
	padding-left: 20px;
	width: 800px;
}

#logo {
	height: 94px;
	width: 94px;
	float: left;
	background: url(Images/logo.png) no-repeat;
}

/* Menu Class */

#menu {
	height: 59px;
	width: 998px;
	background: url(Images/menu.png) no-repeat;
}

I think the problem is in the Header, Logo, and Menu classes of the CSS. The url(image/name.ext) when used in the HTML doesn't appear on the site when I load it (localhost).

If I set in the CSS a color before the "url(image/name.ext)" it makes a color appear, but it's not following the sizes I have declared.

I hope this all makes sense.

Lukas Larsson

  • 5 Contributors
  • 8 Replies
  • 135 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by cfajohnson
Member Avatar for pritaeas

Most common problem is that the images are resolved from the css folder. If you have assets/Images your css will work, otherwise try using ../Images instead.

Member Avatar for macneato

Lukas Larsson,

To be honest, I think you having issues with linking your images. Cause everything should be working fine (including widths and heights). Ensure your css image link is relative to where the css file is saved.

Member Avatar for cfajohnson


First, fix the HTML errors.

Why are you using XHTML, and why transitional?

Member Avatar for macneato

Hi cfajohnson,

Don't see what's the problem with XHTML, it ensure's proper coding principles.

As for the errors, here is if you would like your document strict

<!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" />
        <link rel="stylesheet" type="text/css" href="assets/asf.css" media="all" />
        <title>New Layout - Lukas</title>
    </head>
    <body>
        <div id="header">
            <div id="logo">
            </div>
            <div id="name">
                LukasLarsson.com
            </div>
            <div id="tagline">
                TEST TEST 123
            </div>
            <div id="menu">
            </div>
        </div>
    </body>
</html>

and Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="assets/asf.css" media="all" />
        <title>New Layout - Lukas</title>
    </head>
    <body>
        <div id="header">
            <div id="logo">
            </div>
            <div id="name">
                LukasLarsson.com
            </div>
            <div id="tagline">
                TEST TEST 123
            </div>
            <div id="menu">
            </div>
        </div>
    </body>
</html>

Both are valid.

Member Avatar for cfajohnson

Don't see what's the problem with XHTML,


There's no problem with XHTML (though there is no shortage of articles which argue that there are problems) , but there's no advantage to it, either.

it ensure's proper coding principles.


A quick look at web sites using XHTML would show that it doesn't ensure anything. There are as many invalid XHTML pages as there are HTML pages.

Member Avatar for opsryushi

Lukas,

I think I have a solution for you - Whenever you define an image in CSS, it should be placed in single quotes:

background: url('Images/header.png') no-repeat;

I think missed or misused quotation marks are probably responsible for at least half of the problems people experience with (X)HTML and CSS. Oh, and stick to your XHTML. It's a better way to build. :)

Hope this helps,
Kyle

Edited by opsryushi because: n/a
Member Avatar for macneato

Wow, Nicely played opsryushi :) didnt even notice

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.