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:


« Backwards — Onwards »

Show Forum Drop Down Menu