1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Header box with text input - what is wrong?

Discussion in 'CSS' started by ridesign, Sep 24, 2008.

0
  1. #1
    Hi everyone :)

    I am trying to create this header box with a html area in the centre and a text input box on the right for the email.
    I am trying to acheive something like the first image.

    However I can not get the right email box over the image properly, it goes below the background image.

    I have uploaded it here:
    http://www.newdesignworld.com/test2/

    <html>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:24px;
	top:44px;
	width:980px;
	height:115px;
	z-index:1;
}
#apDiv2 {
	position:relative;
	left:621px;
	top:25px;
	width:374px;
	height:93px;
	z-index:2;
}
#apDiv3 {
	position:absolute;
	left:656px;
	top:21px;
	width:329px;
	height:54px;
	z-index:3;
}
#apDiv4 {
	position:absolute;
	left:197px;
	top:53px;
	width:425px;
	height:95px;
	z-index:3;
}
.middlebox {
	background-image: url(images/deal-day-3.gif);
	background-repeat: no-repeat;
}
#apDiv2 {
	background-image: url(images/deal-day-2.gif);
	background-repeat: no-repeat;
}
.newsletterTextInput{ width:165px;
left: 200px; }

.newsletterContainer{
	width:270px;
	position: relative;
	left: 95px;
	top: 26px;
}
-->
</style>
<body>
<div class="middlebox" id="apDiv1"></div>
<div id="apDiv2">
		<div class="newsletterContainer" id="ajaxNewsletter">
			<form name="newsletterForm" id="newsletterForm" method="post">
		<div class="rightAlign" id="newsletterFormDiv">
			<input
				class="newsletterTextInput"
				onblur="if(this.value==''){this.value='Enter your email'}"
				onfocus="if(this.value=='Enter your email'){this.value=''}"
				type="text" name="email"
				value="" />
			<input type="hidden" id="newsletter" name="newsletter" value="true" />
		    <input class="submit" type="submit" name="newsletterSub"
				value="Subscribe" />
		</div>
	</form>
		</div>
		<div style="display:none" id="newsletterLoading"><img src="loading.gif" alt="Loading..." title="Loading..." /> Loading ...</div>
</div></div>
</div>
<div id="apDiv4">
  <p>This is the centre content</p>
  <p>&nbsp;</p>
</div>
</body>
    HTML:

     

    Attached Files:

    ridesign, Sep 24, 2008 IP
  2. ridesign

    ridesign Peon

    Messages:
    294
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    ridesign, Sep 24, 2008 IP
  3. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You could try this:

    1. Make the black/yellow border it's own image. There should be nothing but white inside.
    2. Make the right orange gradient it's own image as well, if it isn't already.
    3. Now make a div with the black/yellow image that was made in #1 as it's background.
    4. Create 3 divs inside the previously created div and give them all "float: left". Size them the way you did initially. You may have to reduce widths a bit if they start going to the next line. The 3rd one should have the orange gradient from #2 as it's background.
    5. Do the right most div with the form inside the same way you did initially.

    I probably made this out to be more complicated than it really is, but this is one way that I know will work for you.

    Hope that works for you.
     
    rikun, Sep 24, 2008 IP
  4. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Ok well you beat me to the post. I guess just do #4 and #5 then :p

    You might want to consider taking out the input textfield and go button from the image as well.
     
    rikun, Sep 24, 2008 IP
  5. ridesign

    ridesign Peon

    Messages:
    294
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I created new divs but it is not looking proper in ie7 when it looks right in firefox
    http://www.newdesignworld.com/test2/

    CSS
    #apDiv5 {
	
	left:33px;
	top:0px;
	width:981px;
	height:119px;
	z-index:4;
	background-image: url(images/deal-day.gif);
background-repeat: no-repeat;
}
#apDiv6 {
	position:absolute;
	left:36px;
	top:120px;
	width:161px;
	height:116px;
	z-index:5;
float: left;
}
#apDiv7 {
	position:absolute;
	left:201px;
	top:120px;
	width:422px;
	height:115px;
	z-index:6;
float: left;
}
#apDiv8 {
	position:absolute;
	left:600px;
	top:85px;
	width:385px;
	height:101px;
	z-index:7;
float: left;
	background-image: url(images/deal-email.png);
	background-repeat: no-repeat;
}
    Code (markup):

    HTML

    <div id="apDiv5"></div>
<div id="apDiv6">b</div>
<div id="apDiv7"><br>
This is new html code here</div>
<div id="apDiv8"><form name="newsletterForm" id="newsletterForm" method="post">
		<div class="rightAlign" id="newsletterFormDiv">
			<input
				class="newsletterTextInput"
				onblur="if(this.value==''){this.value='Enter your email'}"
				onfocus="if(this.value=='Enter your email'){this.value=''}"
				type="text" name="email"
				value="" />
			<input type="hidden" id="newsletter" name="newsletter" value="true" />
		    <input class="submit" type="submit" name="newsletterSub"
				value="Subscribe" />
		</div>
	</form></div>
</div>
    Code (markup):
     
    ridesign, Sep 24, 2008 IP
  6. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Oh, you have to remove the position: absolute; and all the top:#px and left:#px stuff. Sorry, I wasn't clear the first time.

    And your html should probably look something like:

    
<div id="apDiv5">
	<div id="apDiv6">b</div>
	<div id="apDiv7"><br>
	This is new html code here</div>
	<div id="apDiv8"><form name="newsletterForm" id="newsletterForm" method="post">
		<div class="rightAlign" id="newsletterFormDiv">
			<input
				class="newsletterTextInput"
				onblur="if(this.value==''){this.value='Enter your email'}"
				onfocus="if(this.value=='Enter your email'){this.value=''}"
				type="text" name="email"
				value="" />
				<input type="hidden" id="newsletter" name="newsletter" value="true" />
			    <input class="submit" type="submit" name="newsletterSub"
				value="Subscribe" />
			</div>
		</form></div>
	</div>
</div>
    Code (markup):
     
    rikun, Sep 24, 2008 IP
  7. ridesign

    ridesign Peon

    Messages:
    294
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I removed the relative, top and leftpx, but it seems like there is no change.

    #apDiv5 {
	
	width:981px;
	height:119px;
	z-index:4;
	background-image: url(images/deal-day.gif);
background-repeat: no-repeat;
}
#apDiv6 {
	
	width:161px;
	height:116px;
	z-index:5;
float: left;
}
#apDiv7 {
	
	width:422px;
	height:115px;
	z-index:6;
float: left;
}
#apDiv8 {
	
	width:385px;
	height:101px;
	z-index:7;
float: left;
	background-image: url(images/deal-email.png);
	background-repeat: no-repeat;
}
    Code (markup):
     
    ridesign, Sep 24, 2008 IP
  8. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Add margins to the top of the 3 inner divs to move it down far enough so that the yellow/black border can be seen.

    Add a similar left margin to the first inner div as well.

    Increase the width of the second div so that it pushes the third div more to the right. Make it wide enough so that there is no more white space between the border and the third div.

    Also, either the yellow/black border is too tall, or the orange gradient image in the third div is too small. So either make the border shorter, or the orange image taller.
     
    rikun, Sep 24, 2008 IP
  9. ridesign

    ridesign Peon

    Messages:
    294
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    added the margins, and made the background smaller, now it is all perfect in firefox, but in ie there is a gap above the header and also the last image (the email one) is coming over the background.

    http://www.newdesignworld.com/test2/
     
    ridesign, Sep 25, 2008 IP
  10. 007c

    007c Peon

    Messages:
    611
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I din't look at the code at all but why dont you just put everything in a div on top of the orange background, make sure everything floats left in that div, wrap span tags around your text with a full width use display block for your spans and add bottom padding if needed make your go button as image submit button, should float left too so assign an id to your text input and input button, float those left and use background transparent plus your background image source and remove borders on your text input. voila and remove all that mumbo jumbo z index and abosulte and relative crap oh and make sure you reset
    margins and padding on your form elements before starting.
     
    007c, Sep 25, 2008 IP
  11. ridesign

    ridesign Peon

    Messages:
    294
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Sorted out the overlapping image, my mistake with the image size, but still I can't figure out how to remove the gap in ie.

    I am using one div with 3 divs inside it.
     
    ridesign, Sep 25, 2008 IP
  12. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #12
    What header are you referring to? Do you mean the orange image on the right? The border still looks a bit tall for me. Maybe you could consider making all of the images as one image, and just using that as apDiv5's background. That should get rid of the gaps in between the images for certain. Either do that or reduced the height of the border some more, both are fine.

    Also, replace apDiv5's margin with "margin: 0 auto" to center it.
     
    rikun, Sep 25, 2008 IP
  13. ridesign

    ridesign Peon

    Messages:
    294
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #13
    thanks,
    sorry I mean the gap between navigation bar and the yellow/black box.
     

    Attached Files:

    ridesign, Sep 26, 2008 IP
  14. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #14
    add a clear div after your "wrap" div, i.e. <div class="clear"></div>.

    Then assign the following css to it:

    
div.clear {
    clear: both;
}
    Code (markup):
    Then remove the margin-top from your "apDiv5" div or set it to 0px.

    Also, set your margin for your list "tpmenu" to "auto".

    That should get rid of the gap.
     
    rikun, Sep 30, 2008 IP
  15. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #15
    I've had gaps after menus with floated thingies in them in IE, and overflow: hidden magically made them go away.

    I found this out by accident as the floats were indeed already getting cleared by the next element underneath, and no matter what I did with margins and padding the gap of just a few pixels remained.

    Though whenever i get mysterious gaps on a page I start adding temporary ugly background colours so I can see where everyone is in all browsers... then you can see if it's someone's padding or a margin or something.
     
    Stomme poes, Oct 1, 2008 IP
  16. ridesign

    ridesign Peon

    Messages:
    294
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #16
    thanks its looks fine now :)
     
    ridesign, Oct 2, 2008 IP