Solved

CSS - Placing an Image over a Header

Posted on 2011-09-08
2
189 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
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Box Model and Styling 12 34
Making my existing website "mobile friendly"... 10 35
jquery add something to a div 4 38
highcharts wont fix inside a bootstrap modal window 6 29
"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
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…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

910 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now