Jump to content
Stef's Coding Community
Karen

<p> tag rule will not show margin

Recommended Posts

Hi, everyone!

 

Hoping you can help me. I'm working on a project and created a new CSS rule for <p> to have 10 px margin on all sides. For some reason, it's still smashed up against the sides of the div. I've looked at it a bunch to no avail. I've done this successfully before, but I wonder if I inadvertently did something differently. CSS file is attached.

 

Thanks a bunch in advance!

 

Karen

style.css

Share this post


Link to post
Share on other sites

Can we see the html, too - or better yet, do you have a link to the page?

Share this post


Link to post
Share on other sites

Your divisions are out of whack - put a background color to the p tag, just for demonstration purposes, and you'll see where your tag lands. I don't have time to upload the page right now, but maybe this will help you out until I can look at it closer.

Share this post


Link to post
Share on other sites

This is the first time I've had the sidebar div going all the way to the top. If I have a vertical navbar, it's usually under the header div. I guess that's what's messing me up. I tried adding a background color to the p tag, but it didn't really help me. Thanks for your help!

 

Karen

Share this post


Link to post
Share on other sites

For example, I'm working on this site and everything worked beautifully... Like I said, the different layout is playing with me. Funny thing is that this is a revamp of my own site. I feel like a dork for not being able to figure it out.

Share this post


Link to post
Share on other sites

You need to look at the layout of the website first, and decide how you're going to flow the divs.

 

The sidebar obviously should be floated left, however #header shouldn't float right. You need to wrap #header and #content in a container div, and float that container div to the left, so #sidebar and that container div stack to the left. Then you don't need to float #header or #content as they will just stack on top of each other because they're block elements.

 

I set a 1 px padding on #content because the <p> tags margin was overflowing from the #content div making a gap.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GuppyFish Web Design - Affordable Web Solutions for Business and Non-Profits</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css">
#content, #sidebar { zoom: 1;}
</style>
<![endif]-->
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
background-color: #096;
text-align: center;
}
#sidebar ul li {
text-align: left;
list-style-type: none;
text-indent: 20px;
font-size: 16px;
color: #FFF;
line-height: 30px;
display: block;
height: 30px;
padding-top: 0px;
}

#container {
background-color: #FFF;
text-align: left;
width: 850px;
position: relative;
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
}
#sidebar {
float: left;
text-align: center;
background-image: url(../images/navbkgrd.png);
background-repeat: repeat-y;
width: 158px;
margin-bottom: 10px;
padding-bottom: 10px;
background-color: #053968;
}
#container #sidebar img {
margin: 5px;
}

#header {
background-color: #074368;
height: 205px;
text-align: center;
background-image: url(../images/banner.png);
width: 692px;
background-repeat: no-repeat;
background-position: center center;
}
#content {
font-family: Verdana, Geneva, sans-serif;
color: #000;
background-color: #FFF;
float: none;
padding:1px;
}

p {
margin: 10px;

}
#sidebar ul li:hover {
font-style: italic;
text-decoration: underline;
}
#sidebar ul li a {
color: #FFF;
text-decoration: none;
display: block;
}

.container2 {
float:left;
}
</style>
</head>

<body>
<div id="container">
<div id="sidebar">
	<img src="images/fish-mouse.png" width="134" height="196" />
	<p>  </p>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About Karen</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Testimonials</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div><!--end sidebar div -->
<div class="container2">
	<div id="header">

	</div><!--end header div -->

	<div id="content">
		<p>content  </p>
	</div>
</div>
</div><!--end container div -->
</body><!--end body div -->
</html>

  • Upvote 1

Share this post


Link to post
Share on other sites

THANK YOU so much! I wrapped header and content in their own div and floated it left, then put 1px padding on content like you said, and all is well now! I really appreciate it!!

 

Karen

Share this post


Link to post
Share on other sites

Wondering if you may help me again... not sure if I should start a new topic. I'd like the color for the sidebar to remain the same all the way through to the bottom. I've tried several things... I created an image to use as the background, and in worked perfectly when repeated in the background of the navbar div. I had thought that making it as the background of the container (positioned left and repeating) would cause it to go all the way to the bottom of the page. When I used it as the bg of the container, it wouldn't even repeat, despite all attempts. I tried using a solid color as the background of the container, and that won't work either. Any thoughts?

 

BTW, I'm working on doing CSS the "right" way. Before I had been drawing AP Divs and making everything fixed, which is how I got around this before. Thanks again for helping!

 

Karen

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...