14 Replies - 337 Views - Last Post: 07 May 2013 - 10:08 PM

#1 am0n  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 40
  • Joined: 22-January 13

Placing the <div> element on the <div> element

Posted 07 May 2013 - 01:16 PM

Hello everybody, I made a rectangular bar where I want to place my custom icon
But I noticed that I can't seem to do that.
Here's my HTML code
<!DOCTYPE HTML>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="xul.css"/>
	<title>#1</title>
	
</head>
    <body>
    	<div id="hdr"></div>
    	<div id="hicon"><img src="icon.png"  width="25px" height="25px"></div>

    </body>

</html>

and my CSS code
#hdr{
	height:50px;
	width:100%;
	background:blue;

}
#hicon
{
	top:5px;
}


Thanks

Is This A Good Question/Topic? 0
  • +

Replies To: Placing the <div> element on the <div> element

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3530
  • View blog
  • Posts: 10,172
  • Joined: 08-June 10

Re: Placing the <div> element on the <div> element

Posted 07 May 2013 - 01:18 PM

where do you want to place the icon?
Was This Post Helpful? 0
  • +
  • -

#3 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3718
  • View blog
  • Posts: 5,988
  • Joined: 08-June 10

Re: Placing the <div> element on the <div> element

Posted 07 May 2013 - 01:25 PM

View Postam0n, on 07 May 2013 - 08:16 PM, said:

I made a rectangular bar where I want to place my custom icon

The first step would be to actually put the icon into the rectangular bar. Right now your "#hicon" div with the icon image is below the "#hrd" div, not inside it where it would have to be if it is supposed to be a part of it.
Was This Post Helpful? 0
  • +
  • -

#4 am0n  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 40
  • Joined: 22-January 13

Re: Placing the <div> element on the <div> element

Posted 07 May 2013 - 01:25 PM

In the left corner of blue bar.
Was This Post Helpful? 0
  • +
  • -

#5 am0n  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 40
  • Joined: 22-January 13

Re: Placing the <div> element on the <div> element

Posted 07 May 2013 - 01:30 PM

View PostAtli, on 07 May 2013 - 01:25 PM, said:

View Postam0n, on 07 May 2013 - 08:16 PM, said:

I made a rectangular bar where I want to place my custom icon

The first step would be to actually put the icon into the rectangular bar. Right now your "#hicon" div with the icon image is below the "#hrd" div, not inside it where it would have to be if it is supposed to be a part of it.

So I should place my "#hicon" inside "hrd" div class?
Like this?
<div id="hdr">
    	<div id="hicon"><img src="icon.png"  width="25px" height="25px"></div>
        </div>

Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3530
  • View blog
  • Posts: 10,172
  • Joined: 08-June 10

Re: Placing the <div> element on the <div> element

Posted 07 May 2013 - 01:31 PM

I would place just the <img> element in the blue bar.
Was This Post Helpful? 0
  • +
  • -

#7 am0n  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 40
  • Joined: 22-January 13

Re: Placing the <div> element on the <div> element

Posted 07 May 2013 - 01:33 PM

View PostDormilich, on 07 May 2013 - 01:31 PM, said:

I would place just the <img> element in the blue bar.

and if I were to do that? Could I say..move that <img> element within the blue bar?
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3530
  • View blog
  • Posts: 10,172
  • Joined: 08-June 10

Re: Placing the <div> element on the <div> element

Posted 07 May 2013 - 01:34 PM

try it out ...
Was This Post Helpful? 0
  • +
  • -

#9 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3718
  • View blog
  • Posts: 5,988
  • Joined: 08-June 10

Re: Placing the <div> element on the <div> element

Posted 07 May 2013 - 01:36 PM

View PostDormilich, on 07 May 2013 - 08:31 PM, said:

I would place just the <img> element in the blue bar.


I agree. Unless you have a reason to use a div, then don't. (Same goes for all elements, in fact.) No need to complicate matters unnecessarily.

This post has been edited by Atli: 07 May 2013 - 01:36 PM

Was This Post Helpful? 0
  • +
  • -

#10 am0n  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 40
  • Joined: 22-January 13

Re: Placing the <div> element on the <div> element

Posted 07 May 2013 - 01:36 PM

It's not working
<div id="hdr">
    	<img src="icon.png"  width="25px" height="25px" top="5px" left="5px"/>
        </div>

Was This Post Helpful? 0
  • +
  • -

#11 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3530
  • View blog
  • Posts: 10,172
  • Joined: 08-June 10

Re: Placing the <div> element on the <div> element

Posted 07 May 2013 - 01:42 PM

View Postam0n, on 07 May 2013 - 10:36 PM, said:

It's not working

that’s too vague a description to make any of it.

nevertheless, top and left are invalid attributes for <img> elements and hence ignored.

This post has been edited by Dormilich: 07 May 2013 - 01:43 PM

Was This Post Helpful? 0
  • +
  • -

#12 am0n  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 40
  • Joined: 22-January 13

Re: Placing the <div> element on the <div> element

Posted 07 May 2013 - 01:44 PM

View PostDormilich, on 07 May 2013 - 01:42 PM, said:

View Postam0n, on 07 May 2013 - 10:36 PM, said:

It's not working

thatís too vague a description to make any of it.

nevertheless, top and left are invalid attributes for <img> elements and hence ignored.

Ohh..I see, thanks.
How would I go on moving the icon(the image file) within the blue box? How can I edit it in the css file?
I tried like this
img{top:5px;

But it's not working
Was This Post Helpful? 0
  • +
  • -

#13 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3530
  • View blog
  • Posts: 10,172
  • Joined: 08-June 10

Re: Placing the <div> element on the <div> element

Posted 07 May 2013 - 01:47 PM

top/bottom/left/right are used in conjuction with the CSS position property. alternately you can play with the parent <div>ís padding.
Was This Post Helpful? 1
  • +
  • -

#14 am0n  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 40
  • Joined: 22-January 13

Re: Placing the <div> element on the <div> element

Posted 07 May 2013 - 02:00 PM

Thanks
Was This Post Helpful? 0
  • +
  • -

#15 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Re: Placing the <div> element on the <div> element

Posted 07 May 2013 - 10:08 PM

Here's the trick to using images and icons like that: text-indent.

What you're going to want to do is set the image as the background image for the area, and indent the text to where they no longer overlap. A quick and simple CSS trick that I tend to use, especially on h tags for titles.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1