PDA

View Full Version : Div tag postion


rico1931
04-20-2010, 01:04 PM
Good morning everyone,

I know this is prob going to be easy but it has been giving me a hard time. If you head over to web.dmiccom.com I am trying to get a div tag to "sit" right of the banner. I just want it to be positioned to the right of the txt. It'll be my log in box. Here is the following code for the page it self


<div id="Container">
BODY
<div id="Banner">
<a href="http://www.dmic.com" title="Home" id="Home_Logo">DMIC HOME PAGE </a>

<div id="LogIn">
LogIn
</div>


</div>
</div>


Then here is the CSS

body {
background-color: #e6e6e6;
z-index: 0;
background-image: url(images/body_background.jpg);
background-repeat: repeat-x;
}

#Container {
background-color:#e6e6e6 ;
/* background-image:url("/Simple1_images/DMIC_GREY_BOARDER.gif");*/
background-repeat:repeat-y;
width:900px;
margin:auto;
min-width:300px;
overflow: visible;
font-family: sans-serif;
}

#Banner {
width:900px;
height:100px;
z-index:1;
background-image: url(images/FinalBanner-3.jpg);
background-repeat:no-repeat;
min-width:300px;
float:left;

/*margin-top:-5px;*/

}
#Home_Logo {
/*background-image: url(images/FinalBanner-3.jpg);*/
display:block;
height:100px;
width:200px;
text-indent:-999px;
}
#LogIn {
width:250px;
height:100px;
z-index:1;
float:right;
min-width:140px;
position: relative;

}


I know this is prob going to be easy but I just can't get it and thank you for your help ahead of time.

gentleone
04-20-2010, 02:37 PM
Your #container div is 900px wide and your #banner div inside has already a total width of 900px, so it's logical that there is no space left for your 250px wide #login div.

rico1931
04-20-2010, 02:53 PM
right but is there any way to make this div just float in the right side of the banner? it's just that I want to keep the background of the graphic in the div of the login box..

Corrosive
04-20-2010, 02:55 PM
Set the banner background in the div and then put the login form code in the same div but add padding until positioned where you need it. One div, simple :)

rico1931
04-20-2010, 03:04 PM
ok i'll try it out that way but this is going to sound stupid but what should I add the style tag to the login code? should I add a <p> tag? it's just difficult because the link I made is in block format and messes stuff up.. here is what i have so far and not sure where to add the style tag...


<div id="Banner">
<a href="http://www.dmic.com" title="Home" id="Home_Logo">DMIC HOME PAGE </a>

Login Stuff here


</div>

rico1931
04-20-2010, 03:28 PM
so it didn't work because of the code I have to click on the logo to go to the home page... the CSS has it display of block and wont let it up to the same position...

Corrosive
04-20-2010, 04:26 PM
So you want the logo to be a link? I'm assuming this is logo on the left that needs to be clickable and then log-in on the right?

Can you draw this or something as I'm having trouble following you?

rico1931
04-20-2010, 04:48 PM
Hi Corrosive.. you are 100% correct.. the whole banner is a background image.. I found thru google searching that CSS background images can only have a clickable link by doing the following on the page

<a href="http://www.dmic.com" title="Home" id="Home_Logo">DMIC HOME PAGE </a>


then the CSS for id"Home_Logo" to have the following CSS

#Home_Logo {
display: block;
height:100px;
width:200px;
text-indent:-999px;
}


this works fine and makes the left side of the banner clickable. Then the right side where the gradient fades grey will contain a div that has log in information which is only some txt.

Sorry I tried to be clear let me know if you need any more explaing! Thanks again Corrosive

Corrosive
04-20-2010, 05:30 PM
Maybe have a div with the banner as a background and then place an image inside (that will automatically sit left) and link it. Then add right margin to the image until the log-in is where you want it.

Or try three divs. One two 'wrap' it, one floated left for clickable image and one right for the log-in form.

There should be a number of ways to achieve this.

rico1931
04-20-2010, 05:48 PM
Yup and you were correct the first time. I just put the left clickable image as a background image in the Banner tag then put the a href in the Banner on the source page. Here is the code


<div id="Banner">
<a href="http://www.dmic.com" title="Home" id="Home_Logo">DMIC HOME PAGE </a>
<font style=" padding-left:450px; float:left; font-size:12px;">
Log In Here<br /> Here is some more random txt <br /> Here is some more random txt<br /> Here is some more random txt<br /> Here is some more random txt<br /> Here is some more random txt
</font>
</div>


This is the CSS

#Banner {
width:900px;
height:100px;
z-index:1;
background-image: url(images/FinalBanner-3.jpg);
background-repeat:no-repeat;
min-width:300px;
}
#Home_Logo {
/*background-image: url(images/FinalBanner-3.jpg);*/
display:block;
height:100px;
width:200px;
text-indent:-999px;
float:left;
}


Thanks for your help Corrosive!

Corrosive
04-20-2010, 05:52 PM
OK, cool. Don't forget that when you finally put your log-in box there it will be in a form tag which has defaults. You'll need to adjust your CSS to suit. I also trust you'll be getting rid of those inline styles? ;)