how do I position an element using CSS

Page 1 of 1

11 Replies - 643 Views - Last Post: 10 September 2012 - 08:13 AM

#1 Addio569  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 316
  • Joined: 26-November 08

how do I position an element using CSS

Posted 10 September 2012 - 03:21 AM

Hi,

I am trying to learn css and I am trying to move a picture where ever I want so I can start to understand how it all works. I tried it myself but it didn't work.

this is a screenshot to explain:

http://minus.com/lbvaaxnPAUiZ5y

this is where the pic is currently, I want it here:

http://minus.com/luuiToayST9jH

my css and html is below:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    

    <title>Forensic Tool Teacher</title>


       <link href="ftt.css" type="text/css" rel="stylesheet" />


</head>



<body>

<div class="main-wrapper">

 <div class="header-wrapper">

   		<div class="main-header">    	

            <div class="logo">

              <a href="index.php"><img src="images/logo.png" name="logo" border="0" alt="" width="310px" height="80px"/></a>

            </div>   

        

        <div id="main-nav">

            <ul>    

                <li  class='selected'  ><a href="index.php">Home</a></li>

                <li  ><a href="..">Search</a></li>

                <li  ><a href="..">Videos</a></li>

                <li  ><a href="..">Contact</a></li>      

                <li  ><a href="logout.php">Logout</a></li>    				

            </ul>

    	</div>

    	<!--end main-nav-->

    

       		</div>

   		<!--end main-header--> 

            

      </div>

      <!--end header-wrapper-->      

<div class="content-wrapper">

          <div class="content">

             <div id="contentleft" style="float:left; width:100%; border:2px solid rgb(0, 0, 0); text-align:justify;">
			 
			 <div id="form">
	<form name="simple_bar" method="POST" action="formprocess2.php">
  <table width="275"  cellpadding="5">
    <tr>
      <td>
       <p class="search">
        <input type="text" name="Search" value="">
        <input type="submit" name="Submit" value="Search">
      </p>
      </td>
    </tr>
  </table>
</form>

            
            </div>

<br><br>
<div id="picture">
              <img src="images/magnifying glass.jpg" alt="magnifying glass" width="100px" height="100px" style="padding:5px;" align="left"/>  
</div>
			  
			  		<br><br><br><br><br><br>

			 
			 <p>text goes here</p>




		        

              </div>

           
<br style="clear:both;" />

          </div>

          	<!-- end content -->

      </div>

      <!--end content wrapper -->

      

     <div id="footer">          

          <div class="container">

              <div id="contactFooterColumn">

                  <span id="footer-header">© 2012 Adam Oram</span><br /><br />

                  <span style="line-height:15px;">

                  </span>                  

              </div>

              <!-- end contactFooterColumn -->

             

             
              </div>

              

          </div>

          <!--end Container -->          

      </div>

      <!-- end Footer --> </div>

<!-- end main-wrapper -->          

</body>

</html>


CSS snippet

	#picture
{


	position:absolute;
	left:100px;
	top:150px;
}


sorry for such a long post but this is the only way I could explain it

thanks in advance

Is This A Good Question/Topic? 0
  • +

Replies To: how do I position an element using CSS

#2 BenignDesign  Icon User is offline

  • Angel of Death
  • member icon




Reputation: 4695
  • View blog
  • Posts: 8,926
  • Joined: 28-September 07

Re: how do I position an element using CSS

Posted 10 September 2012 - 03:55 AM

You have it aligned to the left in your HTML. And positioned 100px from the left in your CSS. Unless you switched your screenshots, it looks like you want it centered.

This: 

margin: 0 auto;


Might be a good place to start when seeking an answer.

My advice, however, try to put ALL of your CSS in your CSS file instead of randomly throughout your code.

<img src="images/magnifying glass.jpg" alt="magnifying glass" width="100px" height="100px" style="padding:5px;" align="left"/>


Can be this:

<img class="test" src="images/magnifying glass.jpg" alt="magnifying glass" />




img.test {width:100px;height:100px;padding:5px;}

Was This Post Helpful? 1
  • +
  • -

#3 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 994
  • View blog
  • Posts: 3,547
  • Joined: 05-June 09

Re: how do I position an element using CSS

Posted 10 September 2012 - 04:59 AM

View PostBenignDesign, on 10 September 2012 - 11:55 AM, said:

This: 

margin: 0 auto;


Might be a good place to start when seeking an answer.

Ah, but don't forget that this requires a block-level element, so you'd also need:
display: block;


Since imgs are inline, you could stick it in a paragraph (or some other form of container) and use text-align: center to align it centrally.
Was This Post Helpful? 2
  • +
  • -

#4 Addio569  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 316
  • Joined: 26-November 08

Re: how do I position an element using CSS

Posted 10 September 2012 - 05:04 AM

View PostBenignDesign, on 10 September 2012 - 04:55 AM, said:

You have it aligned to the left in your HTML. And positioned 100px from the left in your CSS. Unless you switched your screenshots, it looks like you want it centered.

This: 

margin: 0 auto;


Might be a good place to start when seeking an answer.

My advice, however, try to put ALL of your CSS in your CSS file instead of randomly throughout your code.

<img src="images/magnifying glass.jpg" alt="magnifying glass" width="100px" height="100px" style="padding:5px;" align="left"/>


Can be this:

<img class="test" src="images/magnifying glass.jpg" alt="magnifying glass" />




img.test {width:100px;height:100px;padding:5px;}


tried changing it to what you said but it hasn't moved, it just stays in the same position.

View PostRudiVisser, on 10 September 2012 - 05:59 AM, said:

View PostBenignDesign, on 10 September 2012 - 11:55 AM, said:

This: 

margin: 0 auto;


Might be a good place to start when seeking an answer.

Ah, but don't forget that this requires a block-level element, so you'd also need:
display: block;


Since imgs are inline, you could stick it in a paragraph (or some other form of container) and use text-align: center to align it centrally.


I'd like to learn it the hard way, work arounds are cool but I want to understand the fundamentals of it first. I added block to the css but the picture just stays in the same place! is absolute even what I need?
Was This Post Helpful? 0
  • +
  • -

#5 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3115
  • View blog
  • Posts: 4,675
  • Joined: 08-June 10

Re: how do I position an element using CSS

Posted 10 September 2012 - 05:57 AM

First of all, Addio569, you should really try to format your code better. Proper indentation will make it so much easier to read, which makes it far easier to spot simple syntax errors or mismatched tags.

Here is your code, with the indentation fixed: (Courtesy of the Netbeans auto-format feature.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Forensic Tool Teacher</title>
        <link href="ftt.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div class="main-wrapper">
            <div class="header-wrapper">
                <div class="main-header">    	
                    <div class="logo">
                        <a href="index.php"><img src="images/logo.png" name="logo" border="0" alt="" width="310px" height="80px"/></a>
                    </div>
                    <div id="main-nav">
                        <ul>    
                            <li  class='selected'  ><a href="index.php">Home</a></li>
                            <li  ><a href="..">Search</a></li>
                            <li  ><a href="..">Videos</a></li>
                            <li  ><a href="..">Contact</a></li>      
                            <li  ><a href="logout.php">Logout</a></li>    				
                        </ul>
                    </div>
                    <!--end main-nav-->
                </div>
                <!--end main-header--> 
            </div>
            <!--end header-wrapper-->      
            <div class="content-wrapper">
                <div class="content">
                    <div id="contentleft" style="float:left; width:100%; border:2px solid rgb(0, 0, 0); text-align:justify;">
                        <div id="form">
                            <form name="simple_bar" method="POST" action="formprocess2.php">
                                <table width="275"  cellpadding="5">
                                    <tr>
                                        <td>
                                            <p class="search">
                                                <input type="text" name="Search" value=""/>
                                                <input type="submit" name="Submit" value="Search"/>
                                            </p>
                                        </td>
                                    </tr>
                                </table>
                            </form>
                        </div>
                        <br/><br/>
                        <div id="picture">
                            <img src="images/magnifying glass.jpg" alt="magnifying glass" width="100px" height="100px" style="padding:5px;" align="left"/>  
                        </div>
                        <br/><br/><br/><br/><br/><br/>
                        <p>text goes here</p>
                    </div>
                    <br style="clear:both;" />
                </div>
                <!-- end content -->
            </div>
            <!--end content wrapper -->
            <div id="footer">          
                <div class="container">
                    <div id="contactFooterColumn">
                        <span id="footer-header">© 2012 Adam Oram</span><br /><br />
                        <span style="line-height:15px;">
                        </span>                  
                    </div>
                    <!-- end contactFooterColumn -->
                </div>
            </div>
            <!--end Container -->          
        </div>
        <!-- end Footer -->
        <!-- end main-wrapper -->          
    </body>
</html>

Note, also, that I've fixed several invalid elements in there. When you define you page as an XHTML page, you must abide by XML rules. XML requires you to close tags. You cant just do <input> or <br>. It must be either: <br></br> or <br/> to be valid in XHTML. (The latter is the correct way to do that for both these elements.)

View PostAddio569, on 10 September 2012 - 12:04 PM, said:

tried changing it to what you said but it hasn't moved, it just stays in the same position.
...
I added block to the css but the picture just stays in the same place! is absolute even what I need?

You can do this using both relative and absolute positioning. Both will work, it just depends on how you want to do this.

With relative positioning, BenignDesign and RudiVisser have already suggested two methods that will work: Making the image a block element with a defined width, and positioning it with margins; or keeping the image an inline element, wrapping it in a new block element (like <p> or <div>) with the text-align: center style. - By the way, you already seem to have your HTML set up for the second method. The #picture div is a block element surrounding the img element. Just remove the absolute positioning on it, and the "align" attribute on the img itself. (It's not supposed to be there in any case.)

With absolute positioning, you can make the element that the image is supposed to be positioned within (the #content div, in your case if I'm not mistaken) relatively positioned, and then position the image itself absolutely to have a left value of 50%, and a margin-left value that is a negative value matching half the image width. (The left style would align the left side of the image at the half the width of the container, and the margin would pull the image half the image width further to the left, effectively centering it.)

It would be a good idea to study the differences between the different position values. You can't really design websites properly without a proper understanding of that.
Was This Post Helpful? 0
  • +
  • -

#6 Addio569  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 316
  • Joined: 26-November 08

Re: how do I position an element using CSS

Posted 10 September 2012 - 06:19 AM

ok thanks for the help, I'm just learning at the moment, I did read up on the different types of positioning and absolute seem the logical choice.

is there any good websites you'd recommend to learn CSS apart from 3w schools?

This post has been edited by Addio569: 10 September 2012 - 07:15 AM
Reason for edit:: Please use [code] tags when posting code. Also, I removed the unnecessary quote.

Was This Post Helpful? 0
  • +
  • -

#7 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3115
  • View blog
  • Posts: 4,675
  • Joined: 08-June 10

Re: how do I position an element using CSS

Posted 10 September 2012 - 07:01 AM

Yea, that should do it, except you have a couple of errors in the margin style.

The short-hand syntax for margins is:
margin: top right bottom left;

There are no commas between the values, and the values must have units. So, for example:
margin: 0 0 0 -50px;


But unless it's important to keep the zeros for the other sides, you could just define the left side:
margin-left: -50px;


Also note that you don't have to keep the <div> around the <img>. If you are absolutely positioning the elements like that, you may as well just position the img element itself.

Quote

edit: I have it centered but its massive,I guess thats why its centered...

Unless you specify the dimensions on the <img> element, the browser will show the image in it's original size. Right now you're just specifying the dimensions of the <div> containing the <img>.

Some would also argue that it is a good idea to specify the old-school width and height attributes on the img element. Normally you should avoid HTML styling tags and attributes, but in the case of images, having those two attributes defined can stop the page from "jumping" as it loads. Without the attributes defined the browser's default behaviour will be to collapse the element and display the surrounding elements as if it's not there until the image loads, at which time it will display the image and rearrange everything around it. If you define the width and height on the element, it won't be collapsed like that. - Of course, CSS dimensions also play a part in this, but the CSS can also take some milliseconds to load, causing the same "jittery" effect.
Was This Post Helpful? 0
  • +
  • -

#8 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 994
  • View blog
  • Posts: 3,547
  • Joined: 05-June 09

Re: how do I position an element using CSS

Posted 10 September 2012 - 07:16 AM

Dude no don't use absolute.

Regarding it being massive, you can simply set a width and height attribute either on the image or in your CSS to stop it being so big. However, the best course of action would be to simply resize the image.
Was This Post Helpful? 0
  • +
  • -

#9 Addio569  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 316
  • Joined: 26-November 08

Re: how do I position an element using CSS

Posted 10 September 2012 - 07:22 AM

ok so I worked it out eventually, but I was confusing myself as I kept editing my post, sorry about that.

I eventually went with:

<img class="test" src="images/magnifying glass.jpg" alt="magnifying glass" />



img.test
{
	position: absolute;
	left:48%;
	width:100px;
	height:100px;
	margin:50px 0px 0px 0px;
}


this was suggested earlier I just didn't read it properly.

I also noticed errors in my CSS, (missing a bracket) and that was screwing it up.

I will also try the above suggestion as it will help me understand it further. what I don't currently quite understand is the benefits of absolute and relative, why shouldn't I use absolute?
Was This Post Helpful? 0
  • +
  • -

#10 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 994
  • View blog
  • Posts: 3,547
  • Joined: 05-June 09

Re: how do I position an element using CSS

Posted 10 September 2012 - 07:43 AM

No no no no, nobody suggested this?!

You shouldn't use position for this at all, there is simply no need.

See this code, it will centre your element just fine:
CSS
#picture
{
    text-align: center;
}
#picture img {
    width: 100px;
    height: 100px;
    padding: 5px;
}

HTML
<div id="picture">  
    <img src="images/magnifying glass.jpg" alt="magnifying glass" />
</div>


position shouldn't really be used for inline elements (of which img is one), and for most situations, shouldn't be used at all, there's simply no need. The only exception would be position: fixed, which provides an element at a fixed point relative to the screen at all times. absolute positioning is bad when not combined with relative, because the offset of bottom: 100px could be 10px from the top of the page, 100px from the top, or 1000px from the top. It all depends on the screen size and what's around it. Using position: relative allows you to set the top/right/bottom/left offsets more effectively as they are relative to the location of the parent element, but there's still generally no need to do so whatsoever.
Was This Post Helpful? 0
  • +
  • -

#11 Addio569  Icon User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 316
  • Joined: 26-November 08

Re: how do I position an element using CSS

Posted 10 September 2012 - 08:01 AM

View PostRudiVisser, on 10 September 2012 - 08:43 AM, said:

#picture
{
text-align: center;
}
#picture img {
width: 100px;
height: 100px;
padding: 5px;
}[/code]
HTML
<div id="picture">  
    <img src="images/magnifying glass.jpg" alt="magnifying glass" />
</div>


and this is acceptable to use? seems like a workaround? I changed absolute to relative as I now know what absolute means, relative works well but...

edit: I tried your way and got this:

http://i.minus.com/ibhrOze8ZJuxbq.png

so I created a margin for the div:

#picture
{
    text-align: center;
}

#picture img {
    width: 100px;
    height: 100px;
    padding: 5px;
    margin: 50px 0px 0px 280px;
}


and got this:

http://i.minus.com/isPrvvGGsGyDA.png

why didn't it centre and why did it need such a big margin?

This post has been edited by Addio569: 10 September 2012 - 08:18 AM

Was This Post Helpful? 0
  • +
  • -

#12 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 994
  • View blog
  • Posts: 3,547
  • Joined: 05-June 09

Re: how do I position an element using CSS

Posted 10 September 2012 - 08:13 AM

View PostAddio569, on 10 September 2012 - 04:01 PM, said:

and this is acceptable to use? seems like a workaround?

A workaround to what?

Based on your HTML, that is the safest non-hacky and most standardised way to do it. I would even go so far as to say it's exactly the "best" way to do it.

EDIT: Based off your edit, see this -> http://rudiv.se/dic/addio569.htm
That demonstrates both methods working perfectly fine.

Quote

edit: I tried your way and got this:

http://i.minus.com/ibhrOze8ZJuxbq.png


From this, that suggests that #picture (or it's container) isn't full width to your inner page container, so it's not going entirely central. Did you remove all existing styling from #picture before trying this?

EDIT2: Just saw you edited before you marked it with edit! Sneaky! Remove any position whatsoever, you don't need it on this. Just 2 brand new shiny elements with no prior styling attached is what you need for this.

This post has been edited by RudiVisser: 10 September 2012 - 08:25 AM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1