Old 04-04-2008   #1 (permalink)
Registered User
 
Join Date: Oct 2007
Posts: 43

Send a message via MSN to Neo824
[CSS] Question on moving an element.

I would like some help, notice the 'log in' box on this page: http://neo-productions.com

I would like to know how to move it to the top right corner of the page, without using margins. Any help would be greatly appreciated! I've provided the code below.

stylesheet.css
Code:
div#log_inHolder {
background: url('image/log_inHolder.png') no-repeat;
height: 136px;
width: 264x;
margin: 0px;
padding-top: 30px;
padding-left: 6px;
font-family: Tahoma;
font-size: .90em;
}
index.html
Code:
        <input id="log_inSubmit" type="submit" value="Log In" onMouseOver="this.style.color='white'"; onMouseOut="this.style.color='black'">

Last edited by Neo824; 04-04-2008 at 08:58 PM.
Neo824 is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 04-04-2008   #2 (permalink)
Registered User
 
Join Date: Aug 2004
Posts: 105

Add
Code:
float: right;
to the CSS.
Jolt is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 04-04-2008   #3 (permalink)
Registered User
 
Join Date: Oct 2007
Posts: 43

Send a message via MSN to Neo824
Look at the outcome:

http://neo-productions.com

-----

=[ It moved it to the right, cutting out some of the background image.

Also, after I move it to the right how do I get it to the top?
Neo824 is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 04-05-2008   #4 (permalink)
Registered User
 
Join Date: Aug 2004
Posts: 105

Link looks the same here.

In any respect... add the float: right; to the CSS then move the login HTML above the Sidebar code in the HTML (Right after the content div opening tag).
Jolt is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 04-05-2008   #5 (permalink)
Registered User
 
Join Date: Oct 2007
Posts: 43

Send a message via MSN to Neo824
:[ It moves it to the extreme upper right, cutting out some of the image.

Result: http://www.neo-productions.com
Neo824 is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 04-06-2008   #6 (permalink)
Registered User
 
Join Date: Aug 2004
Posts: 105

It moves to the exact top right edge. It doesn't cut out any part of any image here. You said you didn't want to use margins. But if you put margins on it for the top and right it'll move inward on the page a bit.
Jolt is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 04-06-2008   #7 (permalink)
Registered User
 
Join Date: Oct 2007
Posts: 43

Send a message via MSN to Neo824
Quote:
Originally Posted by Jolt View Post
It moves to the exact top right edge. It doesn't cut out any part of any image here. You said you didn't want to use margins. But if you put margins on it for the top and right it'll move inward on the page a bit.
It does cut the image out.

Right click the image and click 'View Background Image.'
Neo824 is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 04-06-2008   #8 (permalink)
Registered User
 
Join Date: Aug 2004
Posts: 105

Oh I see. Your CSS has an error in the width property for the login box. Fix that.
Jolt is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 04-06-2008   #9 (permalink)
Registered User
 
Join Date: Oct 2007
Posts: 43

Send a message via MSN to Neo824
Quote:
Originally Posted by Jolt View Post
Oh I see. Your CSS has an error in the width property for the login box. Fix that.
That isn't the problem, I changed the width and it wouldn't fix it.
Neo824 is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 04-06-2008   #10 (permalink)
Registered User
 
Join Date: Aug 2004
Posts: 105

Look again. I swear to you there is an error in the CSS width property of the login box. Honest. It's the problem. I could tell you exactly what the error is, but you'll never learn that way. It's even present in the code you posted in your initial post here.

Last edited by Jolt; 04-06-2008 at 06:42 AM.
Jolt is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 04-07-2008   #11 (permalink)
Registered User
 
Join Date: Oct 2007
Posts: 43

Send a message via MSN to Neo824
Thanks! I found the problem, I was missing a 'p.' Thanks for all of your help!

How did you know that I had to move the log in div above the sidebar div?
Neo824 is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 04-07-2008   #12 (permalink)
Registered User
 
Join Date: Aug 2004
Posts: 105

Most often when you float something to the right, the HTML needs to be before any left side content.
Jolt is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 04-07-2008   #13 (permalink)
Registered User
 
Join Date: Oct 2007
Posts: 43

Send a message via MSN to Neo824
Alright, thanks!

I appreciate all of your help!
Neo824 is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 04-08-2008   #14 (permalink)
Be Unique. Be Heard.
 
Jacorre's Avatar
 
Join Date: Jul 2006
Location: USA
Posts: 468

If you float that to the right your content will have to float to the left. Watch the width, margin, and padding settings you use because you may run into issues where one div ends up being underneath the other. This is because there was no more space available so it pushes one of the divs down. Again, make sure the total width takes into account the width, margin, and padding of the divs in question.

Another option is absolute positioning. This also "floats" a div but it acts a little differently. You'll have to add margin/padding to the content div to move it from appearing underneath your positioned div. When you absolutely position a div it actually pulls it out of the flow of the page. It's like the div is floating over the page and anything else after it will end up pushing right underneath it. So you'll have to push those things away by using margin/padding.
__________________

Jacorre Studios Blog
Jacorre is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Another CSS question... Neo824 HTML / PHP / ASP / JS 12 01-28-2008 04:42 PM
CSS Question. Neil_8_24_93 HTML / PHP / ASP / JS 3 08-10-2006 05:32 AM
making moving spotlights LimitLess Flash & Dynamic Media 0 08-06-2005 11:27 PM
Moving around the image using shortcut keys tdh Adobe Photoshop 1 04-26-2005 06:45 PM


All times are GMT +1. The time now is 09:16 AM.
Content Relevant URLs by vBSEO 3.2.0 RC7

Design & Content © BioRUST 2007 :: PRIVACY STATEMENT :: LEGAL INFORMATION :: ADVERTISING MEDIA KIT