I have been working on a site, found here, and it looks fine on my monitor (1440 x 900) however it looks very plain when displayed on an oversized monitor. I give the outer box an absolute height and width and this is obviously the reasoning for my issue but what could I do to fix this problem when the images are all a fixed height and width?
I read somewhere that I could do a check to see what dimensions the monitor is on page load - would anyone recommend this?
On a larger monitor there is a lot of blank space to the left and right, and also below the outer box.
thank you for any help!
-Evan
You can do it using two ways:
CSS 3 Media Queries
Fluid Layout
Since you said you will be supporting IE too, CSS 3 Media queries won't be working below IE 9, so lets use fluid layout. For this, you can do a few stuffs:
CSS Changes
#full-height-template-container {width: 1225px;}
#navigation-menu-container {width: 149px;}
#static-frontpage-padding {width: 855px;}
Replace it to:
#full-height-template-container {width: 90%;}
#navigation-menu-container {width: 20%;}
#static-frontpage-padding {width: 80%;}
A few adjustments might be necessary.
CSS 3 Media Queries
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices – without changing the content.
Example & Demo for CSS 3 Media Queries
HTML Markup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Media query Resolution Dependent Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stylesheets/master.css" />
</head>
<body>
<div id="container">
<h1>
Site name
</h1>
<div id="nav">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div id="content">
<h2>
Main heading here
</h2>
<p>
<img class="feature-image" src="fern.jpg" alt="fern" />Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
<div id="extras">
<h3>
Related info
</h3>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>
CSS code
/* ----------------------------
simple reset
---------------------------- */
html, body, ul, ol, li, form, fieldset, legend
{
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
fieldset,img { border: 0; }
legend { color: #000; }
li { list-style: none; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
table
{
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td
{
text-align: left;
vertical-align: top;
font-weight: normal;
}
input, textarea, select
{
font-size: 110%;
line-height: 1.1;
}
abbr, acronym
{
border-bottom: .1em dotted;
cursor: help;
}
body
{
margin: 20px;
color: #000;
background: #fff;
font: 90%/1.3 "DejaVu Sans", "URW Gothic L", "Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
}
#container
{
float: left;
width: 1000px;
background: #bbb;
}
#nav
{
float: left;
width: 200px;
background: lime;
}
#content
{
float: left;
width: 550px;
margin: 0 0 0 25px;
background: yellow;
}
#extras
{
float: right;
width: 200px;
background: gray;
}
.feature-image
{
float: right;
margin: 0 0 10px 10px;
}
#media screen and (max-width:999px)
{
#container { width: 800px; }
#extras
{
clear: left;
float: none;
margin: 0 0 0 225px;
width: 550px;
}
}
#media screen and (max-width:480px)
{
#container { width: 400px; }
#nav
{
float: none;
width: auto;
}
#content
{
float: none;
width: auto;
margin: 0;
}
#extras
{
float: none;
width: auto;
margin: 0;
}
.feature-image { display: none; }
}
Demo
You can find a working demo at CSS3 Media query layout example. Enjoy!
Related
I need some help with a practice project I'm working on. I've got my content divs (.primary, .secondary and .tertiary) sat within a wrapper that's currently set to 100% width (for the sake of debugging).
I want it so that .primary and .secondary appear next to each other side by side at a screen size of 779px and above with tertiary set at 100% of the wrapper's width below them.
All three content divs also have the class col which I've floated left so in theory, I should be able to set .primary and .secondary to 50% and they should happily sit next to each other, right?
Wrong.
They sit as blocks below each other. Both have a width of exactly half of the wrapper (used dev tools in google chrome to check) but they won't sit next to each other until I sit their widths to 48% and then they leave a gap to their immediate right.
I honestly can't make heads or tails of it. I'm going to include the full code below for anyone that wants to just copy and paste to see the weirdness. I should note as well, there is a normalize file on there, downloaded from: https://necolas.github.io/normalize.css/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dragon Ball Fan Site</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">
</head>
<body>
<header class="main-header clearfix">
<div class="container">
<h1 class="title">Dragon Ball Fan Site</h1>
<ul class="main-nav">
<li>Main</li>
<li>Manga</li>
<li>Anime</li>
<li>Video Games</li>
<li>Register</li>
</ul>
</header>
<div class="banner">
<img src="img/main-img.png" alt="Main Image, Goku" class="main-img">
<h1 class="name">Dragon Ball Fansite</h1>
<span class="tagline">A Site For Fans, By Fans</span>
</div>
</div>
<div class="wrapper clearfix">
<div class="secondary col">
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac. Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem. Praesent eleifend dignissim ligula. Nunc enim lectus, fringilla at odio vel, sagittis volutpat velit. Integer pretium ac nisl eget volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="primary col">
<h2>About Dragon Ball</h2>
<img src="img/cast.png" alt="Main Cast" class="cast">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac. Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem.</p>
</div>
<div class="tertiary col">
<h2>About Us</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac.</li>
<li>Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem.</li>
</ul>
</div>
</div>
</div>
<footer class="main-footer">
<span class="copyright"> ©Dragon Ball Fan Site 2018</span>
</footer>
</body>
</html>
/* =========
Fonts
========= */
#font-face {
font-family: 'Roboto', sans-serif;
}
##font-face {
font-family: 'saiyain-sans';
src: url(font/Saiyan-Sans.ttf);
}
/* =========
Elements
========= */
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', helvetica, sans-serif;
font-size: 1.25em;
}
h1 {
margin: 0;
font-weight: 400;
font-size: 2.441em;
}
h2 {
font-size: 1.953em;
padding-bottom: 1em;
padding-left: 0;
padding-right: 0;
}
p {
line-height: 1em;
margin: 0;
padding: 0;
}
div {
margin: 0;
}
/* =========
Classes
========= */
.main-header {
text-align: center;
color: #f85b1a;
margin-bottom: 1em;
padding-top: 2em;
}
.title {
padding-bottom: 1em;
}
.main-nav li {
padding-bottom: 0.5em;
font-weight: 400;
}
.main-nav a {
text-decoration: none;
color: #f85b1a;
display: block;
}
.banner {
text-align: center;
background-color: #f85b1a;
color: #fff;
padding: 1em;
margin-bottom: 2em;
}
.main-img {
border-radius: 50%;
border: 3px solid #000;
margin-bottom: 2em;
}
.name {
font-family: 'saiyain-sans', 'Roboto', sans-serif;
margin-bottom: 0;
}
.wrapper {
margin: 0 auto;
width: 90%;
}
.col {
border: 1px solid red;
}
.primary,
.secondary {
margin-bottom: 1em;
}
.cast {
width: 100%;
padding: 0;
margin: 0 auto;
}
.main-footer {
background-color: #072083;
text-align: center;
padding: 1em;
margin-top: 1em;
}
.copyright {
font-size: 0.8em;
color: #8a9294;
}
/* =========
media queries
========= */
#media (min-width: 779px) {
.container {
margin: 0 auto;
}
.main-header {
padding: 1em;
}
.title,
.col {
float: left;
}
.title {
padding-top: 0;
padding-bottom: 0;
font-size: 1.25em;
}
.main-nav {
float: right;
}
.main-nav li {
display: inline-block;
float: left;
list-style: none;
font-size: 1.25em;
padding: 0 0.2em;
border-right: 1px solid #8a9294;
}
.main-nav li:last-child {
border-right: none;
}
.name {
padding-bottom: 0.5em;
}
.tagline {
font-size: 1.5em;
}
.wrapper {
width: 100%;
padding: 0;
}
.secondary,
.primary {
width: 50%;
}
.copyright {
padding: 2em;
}
/* =========
Clearfix
========= */
.clearfix::after {
content: " ";
display: table;
clear: both;
}
}
I finally figured it out. It was the border box property. Adding any padding and things like that were pushing it to be bigger than the wrap. I had the border property added to test where it was going wrong and that was just adding to the problem.
Thanks to everyone that took the time to look.
I've got a simple page with a header element consisting of a logo image within an anchor tag nested in a h1 element and a nav element with 4 links. Below that I've got two elements each holding an image and text. I'm wondering why my header breaks apart when I resize the browser window, and why the text is not wrap around their respect images and landing to the right of them. I've also noticed that when I hover passed the logo there's a slight area where it is still a link where it shouldn't be. I'd really appreciate any assistance here, as I'm looking to understand what's happening under the hood with the css.
http://s27.postimg.org/7eyff3ivn/header_break1.png
http://s28.postimg.org/fwg9lohjh/header_break2.png
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Acme</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="layout.css">
</head>
<body>
<header>
<h1><img src="images/logo.png" alt="Respond"></h1>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
</header>
<section class="first">
<h2>Image 1</h2>
<figure>
<img src="images/featured.png" alt="Image 1" />
</figure>
<p>Lorem ipsum dolor sit amet, et eum vocibus neglegentur, id nisl quidam<br>
melius nam. Agam inani vel ei, reque putent oportere qui ad. Cum<br>
autem veniam in, soluta everti volumus no ius. Utinam tritani est ex,<br>
mei decore putent vidisse ne, an justo nulla eirmod duo. Te liber<br>
libris adolescens eos, id regione gloriatur neglegentur pri. Mei sanctus deleniti repudiandae<br>
at, sit tritani fabulas dissentias et, salutandi vituperata vim ex.</p>
</section>
<section class="second">
<h2>Image 2</h2>
<figure>
<img src="images/featured.png" alt="Image 2" />
</figure>
<p>Lorem ipsum dolor sit amet, et eum vocibus neglegentur, id nisl quidam
melius nam. Agam inani vel ei, reque putent oportere qui ad. Cum<br>
autem veniam in, soluta everti volumus no ius. Utinam tritani est ex,<br>
mei decore putent vidisse ne, an justo nulla eirmod duo. Te liber<br>
libris adolescens eos, id regione gloriatur neglegentur pri. Mei sanctus deleniti repudiandae<br>
at, sit tritani fabulas dissentias et, salutandi vituperata vim ex.</p>
</section>
<footer>
<p id="copyright">© 2014 ACME</p>
</footer>
</body>
</html>
CSS
/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 16px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Structure */
body {
font-family: Helvetica Neue, Helvetica, Arial;
background: white;
color: #555;
}
header {
width: 100%;
overflow: auto;
border-bottom: 1px solid black;
}
/* Logo H1 */
header h1 {
float: left;
}
header h1 a {
display: block;
text-decoration: none;
margin-top: .5em;
margin-left: 5.5em;
width: 25%;
}
/* Navigation*/
nav {
width: 75%;
overflow: auto;
}
ul {
float: right;
list-style-type: none;
margin: 0;
padding: 0;
margin-right: 20em;
}
ul li {
float: left;
}
ul li a {
display: block;
text-decoration: none;
margin: 5px;
margin-top: 1.5em;
padding: 2px;
font-size: 1.2em;
}
ul li a:hover {
border-bottom: 1px solid #6FC36E;
}
/* Content*/
section {
text-align: center;
margin: 0.625em auto;
overflow: auto;
}
section h2 {
margin-top: 1em;
margin-bottom: 1em;
}
section img {
max-width: 100%;
}
.first {
width: 45%;
float: left;
margin-left: 2%;
}
.first figure {
width: 75%;
}
.second {
width: 45%;
float: left;
margin-left: 2%;
}
.second figure {
width: 75%;
}
/* Footer*/
footer {
clear: both;
text-align: center;
}
This answer only addresses the problems you are having with your navigation.
I would remove the following properties from ul in your css.
float: right;
margin-right: 20em;
You don't need to float the menu to the right and the margin decreases the available space for your menu. The 75% width you set in your CSS should do enough to constrain your menu size.
The only wrapping of your nav that will occur is when the width of nav is less than the width of the elements in your menu. If you want to prevent this you can enlarge the width of the nav or take a different approach.
Hope this helps.
I'm working on an advanced database manager in PHP (essentially phpMyAdmin for dummies, giving only Administrators the ability to create tables, then admins create forms for users to input data). For most of this applications I'm more concerned with the back-end than the appearance, so I've been borrowing jQuery-UI to speed up coding.
As I was creating the administrative dashboard I ran into an issue. I used the default implementation of jQuery-UI tabs and the ui-tab-nav stretched itself to fill the page vertically.
I've traced the error to the following CSS rule of mine:
#sidebar { float:left; }
This shows the error that I'm having:
$(function() {
$("#tabs").tabs();
});
html,body {
height: 100%;
margin: 0;
padding: 0;
}
#sidebar {
float: left;
height: 100%;
width: 200px;
margin: inherit;
padding: inherit;
overflow: auto;
border-right: solid 1px #000;
}
#sidebar .menu {
margin: 10px;
padding: inherit;
list-style: none;
}
.title {
font-size: 1.5em;
font-weight: bold;
margin: inherit;
padding: inherit;
}
#sidebar .menu .nav-section {
font-size: 1.5em;
font-weight: bold;
border-bottom: solid 1px #000;
margin: 20px 0;
padding: inherit;
}
#content {
position: relative;
margin-left: 201px;
/* 200px width + 1px border */
padding: inherit;
}
#header {
margin: inherit;
padding: inherit;
background: #FF9;
}
#header label {
margin-left: 20px;
}
#myForm th {
background-color: #999;
border: 1px #000 solid;
}
#myForm td {
border: 1px #000 solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="sidebar">
<h2 class="title">DBManager: <em>Administrators</em></h2>
<ul class="menu">
<li class="nav-section">Forms</li>
<li>Demos - Edit</li>
<li class="nav-section">Reports</li>
<li>School Copy - Edit</li>
<li class="nav-section">Actions</li>
<li>phpMyAdmin</li>
<li>Dashboard</li>
<li>Logout</li>
</ul>
</div>
<div id="content">
<div id="tabs">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
</div>
JSFiddle Demo
With this rule commented out the jQuery-UI tabs display properly, however the entire content box is pushed below my sidebar. Options?
Float the #tabs div left as well: http://jsfiddle.net/UCeLf/
#tabs { float:left; }
I just wrote a sample page with a corner banner and tool tip. Everything is working just fine with firefox. But in IE things are not working correctly. I surfed the internet and found that IE doesn't support position: fixed.
So does anyone know how to work around this problem ?
Here is my source code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
.tooltip {
width: 200px;
position: fixed;
top:auto;
bottom:70px;
right:70px;
left:auto;
font-family: Verdana, Geneva, sans-serif;
font-size: xx-small;
}
#cornerbanner {
position: fixed;
top:auto;
left:auto;
right:0px;
bottom:0px;
}
.tooltip .tooltip_top {
background-image: url(images/Box_BG_01.png);
height: 34px;
background-repeat: no-repeat;
background-position: center top;
line-height: 45px;
text-align: right;
padding-right: 30px;
vertical-align: text-bottom;
font-size: xx-small;
font-weight: normal;
overflow: hidden;
}
body {
background-color: #F90;
}
.content p {
font-family: Verdana, Geneva, sans-serif;
color: #000;
font-size: x-small;
text-align: justify;
padding: 15px;
border: 1px solid #FFF;
}
.tooltip .tooltip_top a {
text-decoration: none;
color: #333;
}
.tooltip .tooltip_con {
background-image: url(images/Box_BG_03.png);
background-repeat: repeat-y;
padding-right: 20px;
padding-left: 20px;
display: block;
clear: both;
text-align: justify;
letter-spacing: normal;
}
.content {
width: 800px;
margin-right: auto;
margin-left: auto;
}
.tooltip .tooltip_bot {
background-image: url(images/Box_BG_05.png);
height: 24px;
background-repeat: no-repeat;
background-position: center bottom;
}
.tooltip .tooltip_con #tooltip_link {
text-align: right;
color: #666;
text-decoration: none;
margin-top: 10px;
}
.tooltip .tooltip_con #tooltip_link a {
color: #666;
text-decoration: none;
}
.tooltip .tooltip_con img {
float: right;
margin-right: 5px;
margin-left: 5px;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tooltip").fadeOut(0);
$("#cornerbanner").mouseover(function(){
$(".tooltip").fadeIn("slow")
});
$("#close_tooltip").click(function(){
$(".tooltip").fadeOut();
});
});
</script>
</head>
<body>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel ligula
leo, ac aliquet ante. Sed ut elit et purus ultricies ornare. Sed eu justo sem.
Suspendisse convallis elementum eros, vitae consequat lorem sollicitudin vitae.
Phasellus bibendum, libero ac semper lobortis, orci tellus lacinia nisl, eget
luctus risus felis sed dolor. Phasellus commodo imperdiet neque vitae elementum.
Ut iaculis vestibulum velit cursus blandit. Cras ornare iaculis velit, vitae
malesuada mi mattis tempor. Ut consequat dapibus massa eget scelerisque. Quisque
sed suscipit sapien. Duis metus urna, consequat tempor feugiat sit amet, placerat
non lorem. Integer eget urna elit, et ullamcorper libero. In iaculis aliquet</p>
<div id="tooltip_link">Click here</div>
</div>
<div class="tooltip_bot"></div>
</div>
</body>
</html>
Do you mean "doesn't work in IE6"? The following fixed position CSS works fine for me to anchor a footer to the bottom of a page in IE7 and IE8:
Div.Footer { background-color: #f8f7ef; position:fixed; margin: 0px; padding:4px; bottom:0px; left:0px; right:0px; font-size:xx-small; }
The problem is that the most popular most used browser - Internet Explorer for Windows - does not understand it, and instead of reverting to position: absolute; which would be better than nothing, it reverts to position: static; as specified by the CSS standard. This has the same effect as having no position at all. Note that IE 7 from beta 2 upwards does support position: fixed; (if you use a document type declaration that triggers strict mode) so I will exclude IE 7 from this fix.
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
right: expression(0+((e=document.documentElement.scrollRight)?e:document.body.scrollRight)+'px');
This would float the element in the very top right corner. If you wanted to position it elsewhere, change the 0 in expression(0+( for either value
Internet Explorer 6 understands position:absolute, which is a good basis for this working. The similarity between absolute and fixed positioning is that it removes it from the flow of the normal content. So then you use the top and right positionings normally, with a little bit of javascript in there. I'm not sure how it reads the javascript. But who cares. It works ;)
You can sort of hack it in using JavaScript/jQuery.
E.g. What is the simplest jQuery way to have a 'position:fixed' (always at top) div?
Given the following html
<div class="module">
<div class="header">
<h1>Test Heading</h1>
edit
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu lacus at augue tristique dignissim. Nunc vitae porta lorem. Nullam eu nunc sit amet arcu dictum convallis. Vestibulum quis purus quis sem rhoncus imperdiet eget at nisl. Fusce non metus libero, vel viverra purus. Quisque ullamcorper congue risus vel adipiscing. Quisque vehicula ante in quam malesuada at porta diam gravida. Aenean sagittis, ipsum eget egestas malesuada, turpis neque aliquam metus, lobortis congue ligula nisi quis purus. Integer nec dui et elit suscipit ultrices et sit amet enim. Nulla euismod commodo metus, eget luctus urna dignissim in.</p>
</div>
</div>
and the following css
body { font-family: Helvetica, Arial, "Lucida Sans Unicode", Tahoma, Verdana, Arial, Helvetica, sans-serif; }
h1 { margin: 0; padding: 0; border-bottom: 3px solid #333333; color: #333333; font-size: 40px; font-weight: normal; letter-spacing: 0; line-height: 1.3em; }
.module { }
.module .header h1 { }
.module .header a { }
I'm having a tough time figuring out how to float the "edit" link to the right of the h1 tag, but keeping the h1 tag as a block element so that it has its underline (border-bottom)
Can anyone offer me some advise ... done this before? Thank you in advance
There are different strategies to achieve this. You could either float a container to fix a float or use generated content to clear a float. I'll attempt to explain both w/ code. For both you can keep your markup, but need to move the underline from the h1 to the .header class. Then float the header to the left, edit to the right and fix the floats by floating the .header class as well. This technique has the disadvantage of depending on what comes after, but works for your isolated piece of code:
h1 {
margin: 0;
padding: 0;
color: #333333;
font-size: 40px;
font-weight: normal;
letter-spacing: 0;
line-height: 1.3em;
}
.header { border-bottom: 3px solid #333333; }
.module .header h1 { float: left; }
.module .header a { float: right; }
.module .header { float: left; width: 100%; }
The imho nicer solution is to use CSS-generated content to clear the opposing floats instead of floating the .header container. But be aware that this will cause trouble on less CSS capable browser versions.
h1 {
margin: 0;
padding: 0;
color: #333333;
font-size: 40px;
font-weight: normal;
letter-spacing: 0;
line-height: 1.3em;
}
.header { border-bottom: 3px solid #333333; }
.header:after { content: "."; display: none; clear: both; }
.module .header h1 { float: left; }
.module .header a { float: right; }
.module .header { width: 100%; }
For more information on the first method see Eric Meyer's article http://www.complexspiral.com/publications/containing-floats/. The second method is documented in http://www.positioniseverything.net/easyclearing.html.