4 Replies - 514 Views - Last Post: 14 September 2009 - 01:34 PM

#1 huggen  Icon User is offline

  • New D.I.C Head

Reputation: 8
  • View blog
  • Posts: 32
  • Joined: 23-May 09

Need some help with bg image!

Posted 14 September 2009 - 10:59 AM

Hey I made a site now, and got a problem when I use this code:
site.html
				<div id="meny">
					<div id="menyheader">
					</div>
					<div id="menybox">
					<p>Login and access more features!</p>
						<form name='login' action='' method="post">
							<p>
							<input type="text" name="username" value="username" class="login" />
							<input type="password" name="password" value="username"  class="login" />
							<input type="submit" value="Login" />
							</p>
						</form>
					</div>

site.css
#meny{
font-size:14px;
width: 180px;
text-align:center;
top: 170px;
left: 10px;
position:absolute;
}
#menyheader{
font-size:20px;
width: 180px;
height: 30px;
text-align:center;
top: 0px;
left: 0px;
position:relative;
background-image:url('image/newlayout/smallheader.png');
background-repeat: no-repeat;
}

#menybox{
width:180px;
background-image:
url('image/newlayout/smallboxmiddle.png');
background-repeat:repeat-y;
}
#menyboxbottom{
width:180px;
height: 10px;
background-image:
url('image/newlayout/smallboxbottom.png');
background-repeat:repeat-y;
}


it looks like this:Posted Image

but like you see the borders donīt go all te way up, what Iīm doing wrong ( itīs something about the <p> tag becouse it only happens when using it. )

NOTE: I only tested in Firefox

Is This A Good Question/Topic? 0
  • +

Replies To: Need some help with bg image!

#2 tommyflint  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: Need some help with bg image!

Posted 14 September 2009 - 11:25 AM

try adding this to your css
.no_spacing
{
	 	margin-bottom: 0;
	margin-top:0;
}


and then changing your html to this
				<div id="meny">
					<div id="menyheader">
					</div>
					<div id="menybox">
					<p class="no_spacing">Login and access more features!</p>
						<form name='login' action='' method="post">
							<p class="no_spacing">
							<input type="text" name="username" value="username" class="login" />
							<input type="password" name="password" value="username"  class="login" />
							<input type="submit" value="Login" />
							</p>
						</form>
					</div>



tommyflint
Was This Post Helpful? 0
  • +
  • -

#3 huggen  Icon User is offline

  • New D.I.C Head

Reputation: 8
  • View blog
  • Posts: 32
  • Joined: 23-May 09

Re: Need some help with bg image!

Posted 14 September 2009 - 11:31 AM

okey, tested and it did the same like not having any <p> tag so added this instead:
#menybox{
width:180px;
background-image:
url('image/newlayout/smallboxmiddle.png');
background-repeat:repeat-y;
padding-top: 1px;
padding-bottom:1px;
}

and it worked....but thanks anyway
Was This Post Helpful? 0
  • +
  • -

#4 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 209
  • View blog
  • Posts: 989
  • Joined: 28-February 09

Re: Need some help with bg image!

Posted 14 September 2009 - 12:13 PM

This is happening because you are using paragraph tags which want you to space the content. I would look into reading about classes if I where you. That way you can have the top boreder with its rounded corners blending into the content.
You could also just resort to using the moz pack to make your rounded edges.
Was This Post Helpful? 0
  • +
  • -

#5 przemass  Icon User is offline

  • D.I.C Head

Reputation: 30
  • View blog
  • Posts: 166
  • Joined: 18-July 09

Re: Need some help with bg image!

Posted 14 September 2009 - 01:34 PM

Try:
p {margin:0;padding:0}

at the top of CSS file
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1