I am designing a website using HTML and CSS and there appears to be an invisible margin somewhere.
Currently, my website looks like this:
h1, h2 {
font-family: 'Righteous', cursive;
text-align: center;
}
body {
font-family: 'Roboto', sans-serif;
color: black;
border: 5px solid #375E97;
}
article, aside {
padding: 1%;
margin: 1.5% 0;
border: 5px solid #375E97;
border-left: 0;
display: inline-block;
vertical-align: top;
}
article {
width: 60%;
}
aside {
width: 30%;
background-image: url("money-stack.png");
background-size: cover;
background-position: 200px 200px;
}
h1 {
background-color: #375E97;
color: #FFFFFF;
font-size: 6.9vw;
text-transform: uppercase;
padding: 0;
margin: 0 auto 2.1% auto;
line-height: 4.9vw;
height: 5vw;
}
h2 {
color: #375E97;
font-size: 3.5vw;
padding: 0;
margin: 0;
}
p {
padding: 0;
margin: 1% 0 0 0;
font-size: 1vw;
}
.sub-heading {
font-style: italic;
text-align: center;
}
.sub-heading > span {
font-weight: 700;
font-style: normal;
}
<!DOCTYPE html>
<html>
<head>
<title>Act 1</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Righteous|Roboto:400,700,400i" rel="stylesheet">
</head>
<body>
<header>
<h1>Filler text here</h1>
</header>
<article>
<h2>More more</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</article>
<aside>
<h2>And More</h2>
<p>
<div class="sub-heading">
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
</div>
<br>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
</p>
</aside>
</body>
</html>
If you look closely at the article and aside in the middle of the screenshot, you can see that I have made their display: inline-block; and removed the border from the left of the aside (smaller one).
The Problem
The problem is that I want to actually "pin" the aside to the right of the body, not the article. I know that to make this work I would have to remove the border from the right and add it to the left.
What I Have Tried
Playing around with various values for align, text-align and all the other aligns you can think of.
Making the aside and article have no tags in between them.
Please note, I have seen other solutions for this, but I want a clean solution that makes sense.
This is what you were trying to achieve I guess.
article and aside are now floated left and right.
This is actually the solution from kukkuz in the comments. I don't know why it shouldn't work for you.
A clearfix is used instead of an additional element with clear: both
Without the surrounding element, body in this case, doesn't get the height from its content and the border around everything wouldn't display correctly.
h1, h2 {
font-family: 'Righteous', cursive;
text-align: center;
}
body {
font-family: 'Roboto', sans-serif;
color: black;
border: 5px solid #375E97;
}
body:after {
content: '';
clear: both;
display: table;
}
article, aside {
padding: 1%;
margin: 1.5% 0;
border: 5px solid #375E97;
border-left: 0;
}
article {
width: 60%;
float: left;
}
aside {
width: 30%;
border-left: 5px solid #375E97;
border-right: 0;
float: right;
background-image: url("money-stack.png");
background-size: cover;
background-position: 200px 200px;
}
h1 {
background-color: #375E97;
color: #FFFFFF;
font-size: 6.9vw;
text-transform: uppercase;
padding: 0;
margin: 0 auto 2.1% auto;
line-height: 4.9vw;
height: 5vw;
}
h2 {
color: #375E97;
font-size: 3.5vw;
padding: 0;
margin: 0;
}
p {
padding: 0;
margin: 1% 0 0 0;
font-size: 1vw;
}
.sub-heading {
font-style: italic;
text-align: center;
}
.sub-heading > span {
font-weight: 700;
font-style: normal;
}
<!DOCTYPE html>
<html>
<head>
<title>Act 1</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Righteous|Roboto:400,700,400i" rel="stylesheet">
</head>
<body>
<header>
<h1>Filler text here</h1>
</header>
<article>
<h2>More more</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</article>
<aside>
<h2>And More</h2>
<p>
<div class="sub-heading">
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
</div>
<br>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
</p>
</aside>
</body>
</html>
I hope I understood your issue. There's many ways you could achieve this, the most obvious one would be to remove your inline rule and make both aside and article float: right; and float: left; respectively, but float was intended to make text float around images and not exactly to position divs (eventhough it works). As so, what I would try is to position: absolute; both the aside and article; and use left, right, top, bottom to position elements.
article {
position: absolute;
top: 69px;
width: 60%;
}
aside {
background-image: url("money-stack.png");
background-position: 200px 200px;
background-size: cover;
position: absolute;
right: 8px;
top: 69px;
width: 30%;
}
body {
border: 5px solid #375e97;
color: black;
font-family: "Roboto",sans-serif;
min-height: 318px;
}
After, you can either set a minimum size for the container, or add a clear:both; styled element to the bottom in order to make the container stretch to the correct size.
One other thing I think you should change is the fact that you're using body as your container and applying styles to it. I think it's good practice to create an actual container div, and apply styles to that instead.
Related
I am trying to replicate this design http://www.csszengarden.com/217/ for practice purposes.
I've got almost everything right, except that the height of my body is larger than the content it contains.
this is the code
*{
list-style: none;
font-family: 'tablet-gothic-thin', sans-serif;
}*
div {
display: block;
}
html {
padding: 5%;
background-color: #daede2;
}
body {
margin: 0;
padding: 0;
background-color: #77c4d3;
display: block;
}
.page-wrapper {
margin: 0;
padding: 0;
height: auto;
box-sizing: border-box;
position: relative;
z-index: 2;
display: block;
}
.sidebar {
background: rgba(246,247,146,0.9);
position: absolute;
top: 120px;
right: 0px;
width: 30%;
padding: 1%;
z-index: 2;
display: block;
}
.preamble {
background: rgba(255, 255, 255,0.9);
position: relative;
width: 50%;
top: 100px;
left: -70px;
margin: 20px 0;
line-height: 25px;
padding-left: 120px;
padding-top: 40px;
padding-bottom: 40px;
padding-right: 40px;
}
.preamble h3 {
font-size: 40px;
margin-left: 0px;
margin-bottom: 20px;
font-weight: lighter;
}
.preamble p {
margin-top: 0;
padding: 1%;
font-family: sans-serif;
font-size: 17px;
line-height: 25px;
margin: 0.5%;
color: black;
font-weight: lighter;
}
header {
margin: 20px;
}
header h1 {
background-color: #ea2e49;
padding: 15px 15px;
text-align: center;
text-transform: uppercase;
width: 280.05px;
position: relative;
top: 50px;
left: 30px;
font-size: 30px;
font-family: 'tablet-gothic', sans-serif;
font-style: normal;
font-weight: 200;
color: white;
}
header h2 {
font-family: 'Coda Caption', sans-serif;
color: white;
letter-spacing: -7px;
font-size: 110px;
width: 700px;
line-height: 1;
position: relative;
top: 0px;
left: 30px;
}
.summary {
width: 50%;
position: relative;
}
.summary p {
position: relative;
left: 60px;
letter-spacing: 2px;
text-transform: uppercase;
color: white;
font-family: 'tablet-gothic', sans-serif;
font-size: 18px;
}
.summary p:last-child {
border-top: 1px solid #ea2e49;
margin-top: 20px;
padding-top: 25px;
}
.summary p:last-child a {
}
a {
text-decoration: none;
color: white;
border-bottom: 1px solid rgba(0,0,0,0.2);
transition: border-color 0.2s ease-in-out;
}
a:hover {
border-bottom: 1px solid #ea2e49;
}
.select {
font-size: 40px;
font-weight: lighter;
margin-top: 50px;
margin-left: 33px;
margin-bottom: 10px;
text-align: inherit;
}
.design-selection ul {
text-align: inherit;
margin-top: 5px;
margin-left: -5px;
padding-right: 30px;
}
.design-selection li {
font-size: 17px;
line-height: 35px;
color: rgba(0,0,0,0.2);
}
.design-selection li a {
color: black;
}
.archives {
font-size: 40px;
font-weight: lighter;
margin-top: 80px;
margin-left: 33px;
margin-bottom: 10px;
text-align: inherit;
}
.design-archives ul {
text-align: inherit;
margin-top: 5px;
margin-left: -5px;
padding-right: 30px;
}
.design-archives li {
font-size: 17px;
line-height: 35px;
color: rgba(0,0,0,0.2);
}
.design-archives li a {
color: black;
}
.resources {
font-size: 40px;
font-weight: lighter;
margin-top: 80px;
margin-left: 33px;
margin-bottom: 10px;
text-align: inherit;
}
.zen-resources ul {
text-align: inherit;
margin-top: 5px;
margin-left: -5px;
padding-right: 30px;
margin-bottom: 50px;
}
.zen-resources li {
font-size: 17px;
line-height: 35px;
color: rgba(0,0,0,0.2);
}
.zen-resources li a {
color: black;
}
.extra1 {
position: fixed;
z-index: 1;
width: 30%;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(51,55,69,0.9);
}
.main-supporting {
display: block;
position: relative;
padding: 1%;
}
.explanation {
display: block;
position: relative;
top: 253px;
left: 80px;
width: 39%;
padding: 1%;
}
.explanation h3 {
font-family: sans-serif;
font-weight: lighter;
color: white;
margin-left: 5px;
font-size: 30px;
}
.explanation p {
padding: 1%;
font-family: sans-serif;
font-size: 17px;
line-height: 25px;
margin: 0.5%;
color: white;
font-weight: lighter;
}
.participation {
display: block;
position: relative;
top: -265px;
left: 600px;
width: 35%;
padding: 5%;
background: rgba(234,46,73,0.9);
z-index: 3;
}
.participation p {
margin-top: 0;
padding: 1%;
color: white;
line-height: 25px;
font-family: sans-serif;
font-size: 17px;
}
.participation a:hover {
border-bottom: 1px solid white;
}
.participation h3 {
font-family: sans-serif;
font-size: 30px;
color: white;
margin left: 20px;
margin-bottom: 10px;
font-weight: lighter;
}
.benefits {
display: block;
position: relative;
width: 15%;
background: rgba(255,255,255,0.9);
padding: 5%;
top: -150px;
left: 78px;
}
.benefits p {
font-family: sans-serif;
line-height: 25px;
font-weight: lighter;
font-size: 17px;
}
.benefits h3 {
font-family: sans-serif;
font-size: 25px;
font-weight: lighter;
}
.requirements {
display: block;
background: rgba(255,255,255,0.9);
width: 59%;
position: relative;
top: -833px;
left: 381px;
padding: 2%;
}
.requirements p {
font-family: sans-serif;
line-height: 25px;
font-size: 17px;
}
.requirements p:first-child {
margin: 50px 50px 20px 50px;
}
.requirements p:nth-child(2) {
margin: 0px 50px 20px 50px;
}
.requirements p:nth-child(3) {
margin: 0px 50px 20px 50px;
}
.requirements p:nth-child(4) {
margin: 0px 50px 20px 50px;
}
.requirements p:nth-child(5) {
margin: 0px 50px 20px 50px;
padding-bottom: 3%;
}
.requirements p:nth-child(6) {
margin: 0px 50px 40px 50px;
padding-top: 5%;
border-top: 1px solid #ea2e49;
text-transform: uppercase;
}
.requirements h3 {
margin: 50px 50px 10px 50px;
font-family: sans-serif;
font-size: 25px;
font-weight: lighter;
}
.requirements a {
color: black;
}
footer {
position: relative;
display: block;
top: -834.5px;
left: 60px;
background: rgba(246,247,146,0.9);
width: 45%;
padding: 1.5%;
margin-bottom: 0px;
}
footer a {
color: black;
margin-left: 3%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Zen Garden: The Beauty of CSS Design</title>
<link rel="stylesheet" media="screen" href="style.css?v=8may2013">
<link rel="stylesheet" type="text/css" href="design.css">
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.csszengarden.com/zengarden.xml">
<link href="https://fonts.googleapis.com/css?family=Coda+Caption:800" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Dave Shea">
<meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design.">
<meta name="robots" content="all">
<!--[if lt IE 9]>
<script src="script/html5shiv.js"></script>
<![endif]-->
</head>
<!--
View source is a feature, not a bug. Thanks for your curiosity and
interest in participating!
Here are the submission guidelines for the new and improved csszengarden.com:
- CSS3? Of course! Prefix for ALL browsers where necessary.
- go responsive; test your layout at multiple screen sizes.
- your browser testing baseline: IE9+, recent Chrome/Firefox/Safari, and iOS/Android
- Graceful degradation is acceptable, and in fact highly encouraged.
- use classes for styling. Don't use ids.
- web fonts are cool, just make sure you have a license to share the files. Hosted
services that are applied via the CSS file (ie. Google Fonts) will work fine, but
most that require custom HTML won't. TypeKit is supported, see the readme on this
page for usage instructions: https://github.com/mezzoblue/csszengarden.com/
And a few tips on building your CSS file:
- use :first-child, :last-child and :nth-child to get at non-classed elements
- use ::before and ::after to create pseudo-elements for extra styling
- use multiple background images to apply as many as you need to any element
- use the Kellum Method for image replacement, if still needed.
- don't rely on the extra divs at the bottom. Use ::before and ::after instead.
-->
<body id="css-zen-garden">
<div class="page-wrapper">
<section class="intro" id="zen-intro">
<header role="banner">
<h1>CSS Zen Garden</h1>
<h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
</header>
<div class="summary" id="zen-summary" role="article">
<p>A demonstration of what can be accomplished through <abbr title="Cascading Style Sheets">CSS</abbr>-based design. Select any style sheet from the list to load it into this page.</p>
<p>Download the example html file and css file</p>
</div>
<div class="preamble" id="zen-preamble" role="article">
<h3>The Road to Enlightenment</h3>
<p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <abbr title="Document Object Model">DOM</abbr>s, broken <abbr title="Cascading Style Sheets">CSS</abbr> support, and abandoned browsers.</p>
<p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <abbr title="World Wide Web Consortium">W3C</abbr>, <abbr title="Web Standards Project">WaSP</abbr>, and the major browser creators.</p>
<p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
</div>
</section>
<div class="main supporting" id="zen-supporting" role="main">
<div class="explanation" id="zen-explanation" role="article">
<h3>So What is This About?</h3>
<p>There is a continuing need to show the power of <abbr title="Cascading Style Sheets">CSS</abbr>. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The <abbr title="HyperText Markup Language">HTML</abbr> remains the same, the only thing that has changed is the external <abbr title="Cascading Style Sheets">CSS</abbr> file. Yes, really.</p>
<p><abbr title="Cascading Style Sheets">CSS</abbr> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. Designers and coders alike have contributed to the beauty of the web; we can always push it further.</p>
</div>
<div class="participation" id="zen-participation" role="article">
<h3>Participation</h3>
<p>Strong visual design has always been our focus. You are modifying this page, so strong <abbr title="Cascading Style Sheets">CSS</abbr> skills are necessary too, but the example files are commented well enough that even <abbr title="Cascading Style Sheets">CSS</abbr> novices can use them as starting points. Please see the <abbr title="Cascading Style Sheets">CSS</abbr> Resource Guide for advanced tutorials and tips on working with <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
<p>You may modify the style sheet in any way you wish, but not the <abbr title="HyperText Markup Language">HTML</abbr>. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</p>
<p>Download the sample HTML and CSS to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your <abbr title="Cascading Style Sheets">CSS</abbr> file to a web server under your control. Send us a link to an archive of that file and all associated assets, and if we choose to use it we will download it and place it on our server.</p>
</div>
<div class="benefits" id="zen-benefits" role="article">
<h3>Benefits</h3>
<p>Why participate? For recognition, inspiration, and a resource we can all refer to showing people how amazing <abbr title="Cascading Style Sheets">CSS</abbr> really can be. This site serves as equal parts inspiration for those working on the web today, learning tool for those who will be tomorrow, and gallery of future techniques we can all look forward to.</p>
</div>
<div class="requirements" id="zen-requirements" role="article">
<h3>Requirements</h3>
<p>Where possible, we would like to see mostly <abbr title="Cascading Style Sheets, levels 1 and 2">CSS 1 & 2</abbr> usage. <abbr title="Cascading Style Sheets, levels 3 and 4">CSS 3 & 4</abbr> should be limited to widely-supported elements only, or strong fallbacks should be provided. The CSS Zen Garden is about functional, practical <abbr title="Cascading Style Sheets">CSS</abbr> and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your <abbr title="Cascading Style Sheets">CSS</abbr> validates.</p>
<p>Luckily, designing this way shows how well various browsers have implemented <abbr title="Cascading Style Sheets">CSS</abbr> by now. When sticking to the guidelines you should see fairly consistent results across most modern browsers. Due to the sheer number of user agents on the web these days — especially when you factor in mobile — pixel-perfect layouts may not be possible across every platform. That’s okay, but do test in as many as you can. Your design should work in at least IE9+ and the latest Chrome, Firefox, iOS and Android browsers (run by over 90% of the population).</p>
<p>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum, and try to incorporate unique and interesting visual themes to your work. We’re well past the point of needing another garden-related design.</p>
<p>This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see submission guidelines), but we ask you release your <abbr title="Cascading Style Sheets">CSS</abbr> under a Creative Commons license identical to the one on this site so that others may learn from your work.</p>
<p role="contentinfo">By Dave Shea. Bandwidth graciously donated by mediatemple. Now available: Zen Garden, the book.</p>
</div>
<footer>
HTML
CSS
CC
A11y
GH
</footer>
</div>
<aside class="sidebar" role="complementary">
<div class="wrapper">
<div class="design-selection" id="design-selection">
<h3 class="select">Select a Design:</h3>
<nav role="navigation">
<ul>
<li>
Mid Century Modern by Andrew Lohman
</li> <li>
Garments by Dan Mall
</li> <li>
Steel by Steffen Knoeller
</li> <li>
Apothecary by Trent Walton
</li> <li>
Screen Filler by Elliot Jay Stocks
</li> <li>
Fountain Kiss by Jeremy Carlson
</li> <li>
A Robot Named Jimmy by meltmedia
</li> <li>
Verde Moderna by Dave Shea
</li> </ul>
</nav>
</div>
<div class="design-archives" id="design-archives">
<h3 class="archives">Archives:</h3>
<nav role="navigation">
<ul>
<li class="next">
<a href="/214/page1">
Next Designs <span class="indicator">›</span>
</a>
</li>
<li class="viewall">
<a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden.">
View All Designs </a>
</li>
</ul>
</nav>
</div>
<div class="zen-resources" id="zen-resources">
<h3 class="resources">Resources:</h3>
<ul>
<li class="view-css">
<a href="style.css" title="View the source CSS file of the currently-viewed design.">
View This Design’s <abbr title="Cascading Style Sheets">CSS</abbr> </a>
</li>
<li class="css-resources">
<a href="http://www.mezzoblue.com/zengarden/resources/" title="Links to great sites with information on using CSS.">
<abbr title="Cascading Style Sheets">CSS</abbr> Resources </a>
</li>
<li class="zen-faq">
<a href="http://www.mezzoblue.com/zengarden/faq/" title="A list of Frequently Asked Questions about the Zen Garden.">
<abbr title="Frequently Asked Questions">FAQ</abbr> </a>
</li>
<li class="zen-submit">
<a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file.">
Submit a Design </a>
</li>
<li class="zen-translations">
<a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page.">
Translations </a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<!--
These superfluous divs/spans were originally provided as catch-alls to add extra imagery.
These days we have full ::before and ::after support, favour using those instead.
These only remain for historical design compatibility. They might go away one day.
-->
<div class="extra1" role="presentation"></div><div class="extra2" role="presentation"></div><div class="extra3" role="presentation"></div>
<div class="extra4" role="presentation"></div><div class="extra5" role="presentation"></div><div class="extra6" role="presentation"></div>
</body>
</html>
As you can see in the code snippet, there is extra space after the contents.
I need help with this.
Thank You.
There are postives and negatives when using relative position in this layout..
Look at the shot below
your div with id zen-requirements has been relative positioned in the layout and there is top: -833px;. take out this top and you will notice that the initial position of the div takes up that space you are trying to get rid of (not forgetting a little bit of padding somewhere).....
hmmmm....Sticking to this layout..I believe you will have to adjust the size of your div that has class page-wrapper (add an id to avoid other classes being affected)
Add these rules to id..
height: 3000px;
overflow:hidden
A Javascript approach to find computed position of last yellow footer relative to window top and auto adjust the window size might work...
I think it's because of the relative positioning of .requirements block.
See: position:relative leaves an empty space
If you add a fixed size to your container, it can fix the issue, but in general your design is different from the sample you shown. Try this:
#zen-supporting {
height: 1750px;
}
html{ padding: 5%} is the reason. It makes extra space in the bottom too.
You can set it as: html{padding: 5% 5% 0 5%}
Edit
If you, also, mean the extra space in blue color under the navigation contains, HTML, CSS, ... you may also adjust the padding of div.main:
div.main {
padding: 5% 5% 0 5%;
}
to be like the following screen shot:
I am really struggling to find what is making the grey space at the bottom of my site. This is the first time I have attempted any coding so any simply put answers would be greatly appreciated. I am sure there are numerous errors in the code / conflicting codes but
I have also been trying media queries which may also be making stuff go wrong? Any help would be really well received... Here is the code so far...
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
<style>
a:link {
text-decoration: none;
font-family: "georgia";
font-style: normal;
font-size: 20px;
font-weight:lighter;
color: #7a5131;
}
a:visited {
text-decoration: none;
font-family: "georgia";
font-style: normal;
font-weight:lighter;
color: #7a5131;
}
a:hover {
text-decoration: none;
font-style: normal;
font-family: "georgia";
font-weight:lighter;
color: #c57b43;
}
a:active {
text-decoration: none;
font-style: normal;
font-family: "georgia";
font-weight:lighter;
color: #7a5131;
}
* {
padding: 0px;
margin: 0px;
margin-top: -5px;
}
#footer {
position: fixed;
clear: both;
width: 104%;
height: 30px;
bottom: 0;
border: none;
padding: 13px 0 0 0;
text-align:
center; color: #ffffff;
background-color: #ffffff; }
body {
background-color:grey;
height: auto;
background-size: 100% 100%\9
}
}
#container {
width: 100%;
height: auto;
color:blue;
margin-left:0;
padding-left: 0;
margin-top: 0;
padding-top: 0;
position: absolute;
}
#nav {
width: 100%;
height: 100%;
text-align: center;
margin-left:0;
padding-left: 0;
padding-top: 0px;
height: 100px;
font-family: "georgia";
font-weight:lighter;
color: #7a5131;
font-size: 20px;
word-spacing: 20px;
float:left;
}
navtype {
position: absolute;
top: 60px;
left: 0;
width: 100%;
font-family: "georgia";
font-weight:lighter;
color: #7a5131;
font-size: 20px;
word-spacing: 20px;
}
#images {
position: relative;
width:100%; /* you can use % */
height: auto;
font-family: "georgia";
font-weight:lighter;
color: #7a5131;
font-size: 20px;
top: 0px;
}
#fullscreen {
position: relative;
width:100%; /* you can use % */
height: auto;
margin-left: auto;
margin-right: auto;
padding-top: 40px;
padding-bottom: 0px;
min-width: 50%;
text-align: center;
}
#test {
position: absolute;
width:100%; /* you can use % */
height: auto;
margin-left: auto;
margin-right: auto;
min-width: 50%;
text-align: center;
background-size: 100%;
background-position: top center;
background-repeat: no-repeat;
display: block;
}
#ourstory {
position: relative;
width:100%; /* you can use % */
height: auto;
margin-left: auto;
margin-right: auto;
padding-top: 40px;
padding-bottom: 50px;
min-width: 50%;
text-align: center;
background-image: url("/Users/DESIGNHAPPY04/Desktop/NEW
SCROLL DOWNSITE/images/storyback.jpg" );
background-size: 100%;
}
#type {
position: relative;
margin-left: 15%;
margin-right: auto;
max-width: 70%;
font-family: "georgia";
font-style: italic;
font-weight:lighter;
color: #5f4029;
line-height: 180%;
font-size: 15px;
}
#media all and (min-width: 601px) {
#test {background-image:url("/Users/DESIGNHAPPY04/Desktop/NEW
SCROLL DOWN SITE/images/breaker.jpg" );
width:100%;height:100%;
}
}
#media all and (max-width: 600px) {
#test {background-image:url("/Users/DESIGNHAPPY04/Desktop/NEW
SCROLL DOWN SITE/images/breakermobile.jpg" );width:100%;height:100%;
}
#type {
position: relative;
margin-left: 15%;
margin-right: auto;
max-width: 70%;
font-family: "georgia";
font-style: italic;
font-weight:lighter;
color: #5f4029;
line-height: 180%;
font-size: 10px;
}
a:link {
text-decoration: none;
font-family: "georgia";
font-style: normal;
font-size: 13px;
font-weight:lighter;
color: #7a5131;
}
a:visited {
text-decoration: none;
font-family: "georgia";
font-style: normal;
font-weight:lighter;
color: #7a5131;
}
a:hover {
text-decoration: none;
font-style: normal;
font-family: "georgia";
font-weight:lighter;
color: #c57b43;
}
a:active {
text-decoration: none;
font-style: normal;
font-family: "georgia";
font-weight:lighter;
color: #7a5131;
}
* {
padding: 0px;
margin: 0px;
margin-top: -5px;
}
#nav {
width: 100%;
text-align: center;
margin-left:0;
padding-left: 0;
padding-top: 0px;
height: 60px;
font-family: "georgia";
font-weight:lighter;
color: #7a5131;
font-size: 20px;
word-spacing: 20px;
position:relative;
}
navtype {
position: absolute;
top: 30px;
left: 0;
width: 100%;
font-family: "georgia";
font-weight:lighter;
color: #7a5131;
font-size: 20px;
word-spacing: 20px;
}
}
</style>
</head>
<body>
<div id="container">
<div id="nav">
<navtype><span>
Story
Testimonial
Recipes
Spreads
</span></navtype>
<a name="top"></a>
<img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/ images/headerbar.jpg"
alt="HTML5 Icon"style="width:100%;height:100%">
</div>
<div id="images">
<img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/ images/landscape.jpg"
alt="HTML5 Icon"style="width:100%;height:100%">
</div>
<div id="ourstory">
<a name="storyanchor"></a>
<div id="images">
<img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/ images/storypics.png"
alt="HTML5 Icon"style="width:100%;height:100%">
</div>
<div id="type">
How it all began
<br>
The emergence and growth of blogs in the late 1990s coincided with the advent o
web publishing tools that facilitated the posting of content by non tec
(Previously, a knowledge of such technologies as HTML and FTpu Indeed, bloggers do not only produce content to post on theirblogs, but also build social relations
<br><br>
Click Here For More Recipe ideas
</div>
</div>
<a name="testimonial"></a>
<img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/images/breaker.jpg"
alt="HTML5 Icon"style="width:100%;height:100%">
</div>
<div id="ourstory">
<a name="ourspreads"></a>
<div id="images">
<img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/ images/jars.png"
alt="HTML5 Icon"style="width:100%;height:100%">
</div>
<div id="type">
Our Spreads and Jams
<br>
The emergence and growth of blogs in the late 1990s coincided with the advent of ` web publishing tools that facilitated the posting of content by non-technical users. (Previously, a knowledge of such technologies as HTML and FTP had been required to publish ;content on the Web.)Indeed, bloggers do not only produce content to post on their blogs, but also build social relations
</div>
<div id="fullscreen">
<a name="recipes"></a>
<div id="images">
<img src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/ images/recipes.jpg"
alt="HTML5 Icon"style="width:100%;height:100%">
</div>
</div>
<div id="test">
</div>
</div>
<div id="footer">
Back to top</p>
</div> <!--END OFCONTAINER browser-->
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/Users/DESIGNHAPPY04/Desktop/NEW SCROLL DOWN SITE/java/smoothscroll.js"></script>
</body>
</html>
Congratulations on coding your own site. Here are some things that could be causing the odd gap:
Two default CSS styles that will effect spacing
Small space under an image, and this may be your bug. One quick fix is to change the image to display:block;. Another solution is to use vertical-align: bottom;, as demonstrated in this easy article: http://salman-w.blogspot.com/2012/10/remove-space-below-images-and-inline-block-elements.html
Margin Collapse happens when a top or bottom margin from one html element (divs, headings...) touch another without a border, padding or anything else in-between. One margin is deleted or the margins are added together, and will only be applied to one element. Please see this article for more info: http://www.sitepoint.com/web-foundations/collapsing-margins/
Potential problems within your code:
As Sable Foste suggested, run your code through the validator, and concentrate on the code errors. (You may not be able to fix everything the validator suggests.) Remember to fix the errors mentioned in the comments above, along with fixing the missing opening <p> tag in the footer, and removing the extra closing brackets } in the css under the body and navtype. Add the additional media query closing brackets } (they need 2: one for the actual style and one to close the media query). Remember to fix * {padding: 0px; margin:0px; margin-top:-5px;} by removing the margin-top:-5px, and assign this only to the styles that need a -5px top margin. These may seem trivial, but coding errors can wreak havoc on your layout.
It looks like your using <div id="test"> at the bottom to test the media queries. What you can do is use #test {display:none;} to hide the div in the regular css, and turn it back on by adding #test {display:block;} in the media queries. This may help you see if the test div is causing problems.
You asked about using a code snippet. Since this is an entire web page, perhaps a JSFiddle would be helpful.
JSFiddle Tutorial - this site lets you paste your html, css, and scripts in a separate, editable environment. It then displays the results in a small browser window. You can paste the link, and we can troubleshoot and demonstrate the fixes in a real environment. For example, the code you supplied does not show your problem, but if you had it in a JSFiddle, we could see the issue, help troubleshoot it, and offer a real example solution. If you have a JSFiddle example, people are more willing to help.
Useful Info
Developer Tools - learn how to use the built in developer tools in your browser because it'll be your best friend when troubleshooting your site. (Like the rest of us, this won't be your last bug). You can view your html and css code, and it has the added benefit of being able to turn off and even delete html elements and css styles. This helps to quickly find the offending element. It is safe to make edits in this environment because the changes are in the browser, and will not change your real code. Hit F12 in your browser to open developer tools, then use the little arrow and mouse over your elements in the browser window, and the code that displays below. Right click on the element to see more options. You can use Firefox with the downloadable Firebug extensions. This lets you edit the html and css. Lots of people like Chrome's developer tools, and you are in luck because CodeSchool offers a fun, free and easy course. It'll be well worth your time to take this because in the time it takes you to troubleshoot one bug, you could have finished this course.
When using this site, upvote the comments and answers that are helpful, and accept the answer that solves your problem. Upvoting and accepting builds your reputation and shows you are an active participant with your own questions, it builds the reputation of the people that answer your questions, and it builds the reputation of the question. If you find your own solution, it's helpful to post the fix.
I have the task of using CSS to create a stylized text box that looks like this:
I've been the server developer for many sites and occasionally do jump in to CSS, and usually figure things out in a reasonably clean way. However, I'm really stuck with this one - it's been an hours-long drag slowly working my way through things, to begin to get this going.
I have not yet begun the colorizing or borders. For now, I'm stuck trying to position the first line of text vertically. I would rather not force the height or width of any of the lines of text, as this seems to me to risk breaking if text/size is slightly changed.
Instead, I'd rather use semantics such as centering and vertical-align: top; (etc) (at least partially).
The green colorization is optional for this question. I'm much more concerned about the positioning of the text. Also, please don't be concerned about the choice of font (I'll hopefully be able to figure that out myself) - but font SIZE (and bolding) is important.
The current state of my attempted CSS is shown below - which doesn't work. My current CSS (below) leaves the image on the page looking like this:
(The blue colorization is just Chrome Web Developer highlighting, which I've provided to indicate the size of the div that includes the text of the first line. The actual background color is white.)
In the above image, I have not begun worrying about the colorization or borders. The current status of the above image is that I'm just trying to get the text "CLICK HERE for a" to appear at the TOP of its div - as noted, WITHOUT setting the height or width of the div to "collapse" onto the text, if possible.
My current trouble positioning the "CLICK HERE for a" text vertically is just one issue I've been dealing with. I would like to have a complete, working sample of the text and text positioning for this image, done "the right way" (or at least done in not a bad way). Perhaps the right way really is to set the width and height of the click-here-for-a div (see CSS below) to be nearly equal to the text dimensions, in order to force its absolute positioning (but as noted, I'd rather not unless answers here correct me, by telling me that this is a good way to do it).
Here is the HTML / CSS for the above (incorrect) image:
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.intro-offer-smooth-click-region {
position: relative;
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
}
.click-here-for-a {
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
}
.intro-offer {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.discount-description {
position: absolute;
font-size: 9pt;
height: 12px;
}
What is the right way to use CSS to create the image above - at least in terms of text formatting and positioning?
Posting as an answer at your request. It helps to add span tags around single lines of text that you want to style independently.
JSFiddle Example
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
<span>CLICK HERE</span> for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.smooth-click-region {
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
background: #cebd44;
border: inset 1px dotted;
border-style: double;
}
.click-here-for-a span {
font-weight: bold;
}
.click-here-for-a {
display: block;
text-align: center;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
font-weight: bold;
}
.intro-offer {
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
margin-left: auto;
margin-right: auto;
}
.discount-description {
font-size: 9pt;
height: 12px;
text-align: center;
}
Here you are, as simple as it gets http://jsfiddle.net/1dmhLm9c/
.smooth-click-region{
text-align: center;
width: 300px;
background: green;
padding: 10px;
}
p, h2{
margin: 0px;
}
You can style it as you want :)
You can find some site with a similar boxes that works well and inspect it with firebug. That will show you the html layout.. You can get some good ideas for how you want to create your own.
Very simple.
Demo http://jsfiddle.net/7xtf1f8m/
CSS:
.smooth-click-region {
display: inline-block;
border: 2px solid #aa6;
padding: 2px;
background-color: #cc0;
box-sizing: border-box;
text-align: center;
font-family: Arial;
}
.smooth-click-region span {
font-weight: 700;
}
.inner {
padding: 0.3em 3em;
background-color: #aa6;
}
.click-here-for-a {
font-size: 0.8em;
}
.intro-offer-on-home-delivery {
font-weight: 700;
}
.discount-description {
font-size: 0.7em;
}
HTML:
<div class="smooth-click-region">
<div class="inner">
<div class="click-here-for-a"><span>CLICK HERE</span> for a</div>
<div class="intro-offer-on-home-delivery">
Special Introductory Offer<br/>
on Home Delivery
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
</div>
You can create the multiple borders by using the CSS3 box-shadow property. HTML tags have by default some CSS attributes so you do not have to define them in your CSS. For example the tag <div> is a block level element and by default has display: block; (you defined it for div.click-here-for-a).
You do not have to write too much unnecessary css.
This is my example for you:
.smooth-click-region {
background:#acb014;
width:260px;
padding:5px;
position:relative;
box-shadow: 0 0 0 5px #FFF,0 0 0 10px #acb014;
text-align:center;
}
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer"><strong>Special Introductory Offer</strong></div>
<div class="on-home-delivery"><strong>on Home Delivery</strong></div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
I did not changed your html code but I advise you to use other HTML tags that have their default css. Use h1, h2, h3 for headlines and p for paragraphs, etc.
I have used the following tutorial to make a text block over an image: http://css-tricks.com/text-blocks-over-image/. I found it really easy actually, and quite useful, but there is one thing I could never work with, and these are span tags.
The issue I'm having is that I want to format the second part of the text in the span to have a lower font size and have a left padding. I've tried including a second span and defining it in the css file, but it doesn't really do anything, just stays where it is. I also tried extending the block until the end of the picture, but a width of 1000px on each wouldn't work.
Here's some pictures, as they speak a thousand words...
How it looks on mine...
And how I want it to look...
And here's some code...
<div class="img_destination">
<img src="<?php echo SITE_URL?>/lib/skins/gsm/images/featured_destination/gcfv.png" alt="" />
<h2 id="featured_destination"><span>>> Explore Fuerteventura<span class='spacer'></span><span class='spacer'></span>The island of natural beauty</span></h2>
</div>
CSS...
/* Featured Destination */
.img_destination {
position: relative;
width: 100%; /* for IE 6 */
}
h2#featured_destination {
position: absolute;
top: 355px;
left: 0;
width: 100%;
}
h2#featured_destination span {
color: white;
font: bold 28px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgba(00, 36, 63, 0.7);
padding: 10px;
}
h2#featured_destination span.spacer {
padding:0 5px;
background: none;
}
Here is what you posted:
<h2 id="featured_destination"><span>>> Explore Fuerteventura<span class='spacer'></span><span class='spacer'></span>The island of natural beauty</span></h2>
I would suggest a couple different things. Firstly, instead if using >> for those arrows, use the >>. Sometimes extra symbols get rendered incorrectly by the browser, so it is always safest to encode them when you want the display to be literal. Also, I would not use an empty span tag to create whitespace since it tends to clutter up the markup.
But your primary issue is that you need to change the way your span tags are nested to NOT include the ">>Explore Fuerteventura" inside any span tags so that the two sections of text are styled differently. I think your aims can be achieved by simply cleaning up your markup to something more like this:
<h2 id="featured_destination">>> Explore Fuerteventura <span class='spacer'> The island of natural beauty</span></h2>
Is this the effect you're after: jsFiddle example.
I changed the text div to:
<h2 id="featured_destination">
<span class="bold">>> Explore Fuerteventura</span><span class='spacer'></span><span class='spacer'></span>The island of natural beauty
</h2>
I wrapped the first chunk of text in its own span so you can style it with a bold font face while the rest of the text has a normal weight.
And this is the CSS I modified:
/* Featured Destination */
.img_destination {
position: relative;
width: 100%;
/* for IE 6 */
}
h2#featured_destination {
position: absolute;
top: 355px;
left: 0;
width: 100%;
background: rgba(00,36,63,0.7);
font: 28px/45px Helvetica, Sans-Serif;
color: #FFF;
letter-spacing: -1px;
}
h2#featured_destination span {
padding: 10px;
}
h2#featured_destination span.spacer {
padding: 0 5px;
background: none;
}
.bold {
font-weight: 700;
}
<div class="img_destination">
<img src="<?php echo SITE_URL?>/lib/skins/gsm/images/featured_destination/gcfv.png" alt="" />
<h2 id="featured_destination">
<span> > > Explore Fuerteventura
<span class="smaller">The island of natural beauty</span>
</span>
</h2>
</div>
and CSS:
h2 > span {
color: white;
font: bold 28px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgba(00, 36, 63, 0.7);
padding: 10px;
}
h2 span.smaller {
padding-left: 20px;
font-size: 10px;
}
Try that. Here is example: http://jsfiddle.net/8PLaB/ Is that what You are looking for?
Your spans .spacer doesn't work because they are empty and browser simply doesn't show them. I think that if You insert in them then they will do their job but it's not good solution in my opinion. Empty tags never are good solution.
Hey all I posted a question earlier here : Why am I getting white space between my HTML element? which was solved.
I have continued working on this page and have ended up with the following:
IE Screenshot:
http://postimage.org/image/2aqd5k99g/
Chrome Screenshot:
http://postimage.org/image/1xdm95138/
What I really want is basically the chrome screenshot but without the white space below my red footer. What can I do to get this desired effect for both IE and Chrome?
My HTML file is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
</head>
<body>
<img src="final.jpg" id="banner"></img>
<ul id="nav">
<li class="links">Home</li>
<li class="links">Planning</li>
<li class="links">Construction</li>
<li class="links">Evaluation</li>
</ul>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
</div>
<div id="rightcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS file is:
html{
font-family: sans-serif;
background-color:#464E54;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 5px solid black;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#mainc {
float: left;
width: 760px;
background-color: white;
margin: 0;
}
#rightcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 197px;
}
#footer {
clear: both;
background-color: red;
}
.links {
float: left;
margin: 0px;
}
a:link {
display: block;
width: 232px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 232px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
Once again cheers for everyones help - hopefully after this I will be a bit more familiar to these mysterious white lines showing up.
add the following rule
div#footer p {
margin:0;
}
Use inspect element on chrome by right clicking.
you will find the area which is blue by moving mouse over the respected area and then you can solve the problem
Have you checked it on different chrome browsers (From different PCs chrome browsers) or do you have any download manager extension installed on your browser, if yes; then disable that first and then reload your page.
Hope this works for you.
Many of these problems are solved, only by importing and using a CSS Reset. Why don't you use them?
Theory: Browsers apply some default style on HTML elements, and they are not the same in that. For example, IE might add 15px margin to p elements, while Chrome might add 13px. This means that incosistencies can exist between default styles of HTML elements across browsers. CSS Reset is technically a set of CSS rules which zero-outs these default values. For example, you can see that in CSS reset, a p is directed to have 0 margin.
p
{
margin: 0;
}