Solved

CSS - Placing an Image over a Header

Posted on 2011-09-08
2
193 Views
Last Modified: 2012-05-12
Hi Folks,

I have a H2 Header with a 3px Border at the bottom that stretches the full width of the page.  On the right-hand side I'm trying to place 6 small transparent images.  The positioning of these is fine at the moment, however the H2 border is being cut off (see image attached).  I've tried increasing the bottom-margin of the images, without success.

I've attached my CSS & HTML Code below (or rather, snippets of).

At this point, I'm slightly at a loss of which direction to take, so any pointers much appreciated!

 
/* CSS */

article .article-container {
	display:block;
	overflow:hidden;
}
article header {
	height:27px;
	border-bottom:3px solid;
	padding-bottom:8px;
	margin-bottom:20px;
}
article header h2 {
	font-size:167%;
	float:left;
}
article header nav { float:right; }

.social { border:none; }

/* HTML */

<div class="article-container">
<header>
<h2>H2 Header</h2>
					
<nav>
<a href=""><img src="/img/social/email.png" class="social" rel="tooltip" title="Email to a Friend"></a>
<a href=""><img src="/img/social/rss.png" class="social" rel="tooltip" title="RSS Feed"></a>
<a href=""><img src="/img/social/twitter.png" class="social" rel="tooltip" title="Tweet This"></a>
<a href=""><img src="/img/social/facebook.png" class="social" rel="tooltip" title="Post to Facebook"></a>
<a href=""><img src="/img/social/google.png" class="social" rel="tooltip" title="Post to Google+"></a>
<a href=""><img src="/img/social/delicious.png" class="social" rel="tooltip" title="Bookmark with Delicious"></a>
</nav>
</header>
</div>

Open in new window

Screenshot
0
Comment
Question by:RedBullLee
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 16

Accepted Solution

by:
SSupreme earned 500 total points
ID: 36506060
Try this:
<html>
<head>
<style type="text/css">
article .article-container {
	display:block;
	overflow:hidden;
}
article header {
	height:27px;
	border-bottom:3px solid;
	padding-bottom:8px;
	margin-bottom:20px;
}
article header h2 {
	font-size:167%;
	float:left;
}
article header nav { float:right; }

.social { border:none; }
header, h2, nav {margin:0;padding:0;}
header {width:900px;border-bottom:3px solid grey; overflow:hidden;}
h2 {width:500px; float:left;}
nav {width:200px;float:right;}
</style>
</head>

<body>


<div class="article-container">
<header>
<h2>H2 Header</h2>
					
<nav>
<a href=""><img src="/img/social/email.png" class="social" rel="tooltip" title="Email to a Friend"></a>
<a href=""><img src="/img/social/rss.png" class="social" rel="tooltip" title="RSS Feed"></a>
<a href=""><img src="/img/social/twitter.png" class="social" rel="tooltip" title="Tweet This"></a>
<a href=""><img src="/img/social/facebook.png" class="social" rel="tooltip" title="Post to Facebook"></a>
<a href=""><img src="/img/social/google.png" class="social" rel="tooltip" title="Post to Google+"></a>
<a href=""><img src="/img/social/delicious.png" class="social" rel="tooltip" title="Bookmark with Delicious"></a>
</nav>
</header>
</div>
</body>

</html>

Open in new window

0
 

Author Comment

by:RedBullLee
ID: 36506197
Thanks, SSupreme,

I've just had a play around with that and it works perfectly simply by adding;

header {overflow:hidden;}

Thanks for your help, much appreciated!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question