Topic: CSS and Title images Pages that link to <a href="https://ozoneasylum.com/backlink?for=10819" title="Pages that link to Topic: CSS and Title images" rel="nofollow" >Topic: CSS and Title images\

 
Author Thread
Patrick
Bipolar (III) Inmate

From: Houston, Texas
Insane since: Dec 2001

IP logged posted posted 10-13-2002 04:02 Edit Quote

www.dfpunk.com/

I am trying to get the images to line up and not use a table but it won't work

here is the HTML:

code:
<html>
<head>
<title>DFpunk</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="http://www.dfpunk.com/css/index.css">
<link rel="stylesheet" href="http://www.dfpunk.com/css/font.css">
<link rel="stylesheet" href="http://www.dfpunk.com/css/header.css">
</head>

<body>
<div id="Header_01"><img src="http://www.dfpunk.com/images/header_01.gif"></div>
<div id="Header_02"><img src="http://www.dfpunk.com/images/header_02.gif"></div>
<div id="Header_03"><img src="http://www.dfpunk.com/images/header_03.gif"></div>
<div id="Header_04"><img src="http://www.dfpunk.com/images/header_04.gif"></div>
<div id="Header_05"><img src="http://www.dfpunk.com/images/header_05.gif"></div>
<div id="Header_06"><img src="http://www.dfpunk.com/images/header_06.gif"></div>
<br>

</body>
</html>



here is the CSS:

code:
#Header_01{
background-image: url("http://www.dfpunk.com/images/header_01.gif");
background-repeat: no-repeat;
background-position: top left;
width:207px;
height:169px;
}

#Header_02{
background-image: url("http://www.dfpunk.com/images/header_02.gif");
background-repeat: no-repeat;
background-position: top left;
width:213px;
height:169px;
}

#Header_03{
background-image: url("http://www.dfpunk.com/images/header_03.gif");
background-repeat: no-repeat;
background-position: top left;
width:177px;
height:169px;
}

#Header_04{
background-image: url("http://www.dfpunk.com/images/header_04.gif");
background-repeat: no-repeat;
background-position: top left;
width:86px;
height:169px;
}

#Header_05{
background-image: url("http://www.dfpunk.com/images/header_05.gif");
background-repeat: no-repeat;
background-position: top left;
width:320px;
height:139px;
}

#Header_06{
background-image: url("http://www.dfpunk.com/images/header_06.gif");
background-repeat: no-repeat;
background-position: top left;
width: 320px;
height: 30px;
}



can some one show me my problem?


Cell 650

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 10-13-2002 04:08 Edit Quote

First of all, you're using CSS inneficiently. When you have multiple things with the same style, use a *class*, not an *id*. For instance, use this HTML:

<div class="header_img"><img src="http://www.dfpunk.com/images/header_01.gif"></div>
<div class="header_img"><img src="http://www.dfpunk.com/images/header_02.gif"></div>
<div class="header_img"><img src="http://www.dfpunk.com/images/header_03.gif"></div>
<div class="header_img"><img src="http://www.dfpunk.com/images/header_04.gif"></div>
... etc ...

With this CSS:

.header_img {
background-image: url("http://www.dfpunk.com/images/header_01.gif");
background-repeat: no-repeat;
background-position: top left;
width:207px;
height:169px;
}

(unlike IDs, you can have multiple HTML elements with the same class.)

Second, the problem is that <DIV> tags are "block-level" elements. This essentially means that, by default, they appear one on top of the other. To get them to appear side to side, you must "float" them with the following property:

float:left;

try that and see how it works. It should be at least closer to the effect you're trying to acheive.

Patrick
Bipolar (III) Inmate

From: Houston, Texas
Insane since: Dec 2001

IP logged posted posted 10-13-2002 04:43 Edit Quote

It Works. I wonder, how could i get the images to change for different resolutions


Cell 650

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 10-13-2002 04:58 Edit Quote

Hmm, that would require javascript, unless you're content with specifying the images to be 100% width of the divs, and the divs a percentage width of the body (the containing element).



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu