Here is my site: http://mytestsite.nfshost.com/.
If you make your browser window thinner, you'll notice that the content in the page's 'body' tag overtakes the 'footer' element. Instead, I'd like it to merely push the 'footer' content down without engulfing it.
How do I do that?
Below are the relevant sections from the HTML and CSS.
<html>
<head>
-- HEAD CONTENT HERE --
</head>
<body>
<h1>U.S. Neighborhood Income Map</h1>
<h2>See how rich or poor every part of every city in America is</h2>
<div id="address-form-container">
<span id="form-pretext"> Enter a city name or address and pick a state (Or just a pick a state from the dropdown).</span>
<br>
<input id="address" type="textbox">
,
<select id="state-select">
<input type="button" value="Search">
<br>
<span id="note">(NOTE: If loading takes a while, try zooming in or out.)</span>
</div>
<div id="map-canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
-- MAP HERE --
</div>
<div id="below-map">
<p id="source-note" class="italics">
</div>
</body>
<footer>
<p id="contact">Please send all questions, comments, complaints, and suggestions to [EMAIL ADDRESS]</p>
</footer>
</html>
Here's the relevant CSS
html {
float: right;
height: 100%;
text-align: center;
width: 100%;
}
body {
background:url(./images/bg.png);
height: 85%;
position: relative;
right: 8px;
width: 100%;
}
#map-canvas {
height: 75%;
margin-top: 5px;
width: 100%;
}
footer {
margin-top: 3em;
}
footer must be inside body tag.
use css padding
footer {
padding-top: 25px;
}
Create a division with class = "clear"
css
div.clear {
clear:both
}
Use this above any division that you want to push down as page content grows. Also footer must be in body tag as Alex stated.
Related
This website doesn't seem to be using any javascript (besides something for webfont). Yet clicking a link applies a set of css rules. How does it work and what feature(s) of html/css is being used here?
As far as I can tell, data-step attribute seems to be playing some part in this. But I'm not familiar with how this works to produce the desired affects.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Web Design in 4 minutes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
...
<link rel="stylesheet" type="text/css" href="website.css">
</head>
<body>
<header id="header">
<img id="logo" src="jt.png" alt="JT logo">
<h1>Web Design in 4 minutes</h1>
<p>
by Jeremy Thomas
</p>
</header>
<main>
<section id="start">
<p>Let's say you have a product, a portfolio, or just an idea you want to share with everyone on your <em>own</em> website. Before you publish it on the internet, you want to make it look attractive, professional, or at least <em>decent</em> to look at.</p>
<p>What is the <a class="step" data-step="0" href="#content">first thing</a> you need to work on?</p>
</section>
<section id="content">
<h2>Content</h2>
<p>The purpose of <strong>design</strong> is to enhance the presentation of the content it's applied to. It might sound obvious, but content being the <strong>primary</strong> element of a website, it should not be established as an afterthought.</p>
<p>Written content, like the paragraph you're currently reading, makes up for more than 90% of the Web. Styling this textual content will go a long way.</p>
<p>Let's assume you've already finalised the content you want to publish and just created an empty <code>style.css</code> file, what is the <a class="step" data-step="1" href="#centering">first rule</a> you can write?</p>
</section>
<section id="centering">
<h2>Centering</h2>
<p>Long lines of text can be hard to parse, and thus hard to <strong>read</strong>. Setting a limit of characters per line greatly enhances the readability and appeal of a wall of text.</p>
<pre><span class="selector">body</span> {
<span class="attribute">margin</span>: <span class="number">0</span> auto;
<span class="attribute">max-width</span>: <span class="number">50</span><span class="unit">em</span>;
}</pre>
<p>After styling the text <em>blocks</em>, what about styling the <a class="step" data-step="2" href="#font-family">text itself</a>?</p>
</section>
<section id="font-family">
<h2>Font family</h2>
<p>The browser's font defaults to <code>"Times"</code>, which can look unappealing (mostly because it is the "unstyled" font). Switching to a <strong>sans-serif</strong> font like <code>"Helvetica"</code> or <code>"Arial"</code> can vastly improve the look of your page.</p>
<pre><span class="selector">body</span> {
<span class="attribute">font-family</span>: <span class="string">"Helvetica"</span>, <span class="string">"Arial"</span>, sans-serif;
}</pre>
<p><em>If you want to stick with a serif font, try <code>"Georgia"</code>.</em></p>
<p>While this makes the text more <em>appealing</em>, let's also make it <a class="step" data-step="3" href="#spacing">more readable</a>.</p>
</section>
...
CSS
/* Base styles */
a strong {
color: inherit;
}
hr {
background: none;
border: none;
border-bottom: 1px solid #d8dee9;
}
img {
height: auto;
max-width: 100%;
}
pre {
overflow: auto;
white-space: pre-wrap;
}
footer {
align-items: center;
display: flex;
justify-content: center;
margin-top: 4em;
text-align: center;
}
/* Initial state */
#visited {
background-color: white;
bottom: 0;
color: white;
display: block;
left: 0;
padding: 1em;
position: fixed;
right: 0;
text-align: center;
}
#visited:visited {
background-color: #e81c4f;
}
#logo,
section,
footer {
display: none;
}
#start {
display: block;
}
/* 00 Content */
html.step0 #content {
display: block;
}
/* 01 Centering */
html.step1 #centering {
display: block;
}
html.step1 header,
html.step1 main {
margin: 0 auto;
max-width: 50em;
}
...
The website is working on href and id concept. (same page navigation)
http://jgthms.com/web-design-in-4-minutes/
Example:
go to id
<div style="margin-top:2000px;"></div>
<a id="id">id</a>
This refers to same page navigation. By default the content is display:none and on click of it, it is visible.
Hope it helps you.
Cheers!
I'm new in html and css so i have a question.
I am messing around with some stuff but after placing some images on my page i can't click on my links anymore.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Rijschool Houben</title>
</head>
<body>
<div id="header"></div>
<div id="header-pic"><img src="image/test.png"></div>
<p>
<div id="nav-bar">
<ul>
<li>|Home|</li>
<li>Info|</li>
<li>Prijzen|</li>
<li>Acties|</li>
<li>Machtiging|</li>
<li>Theorie|</li>
<li>Begeleid rijden|</li>
<li>Bromfiets|</li>
<li>Contact|</li>
</ul>
</div>
</p>
<p>
<div id="icon-main">
<i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
<i class="fa fa-paste" style="font-size:18px;"></i><a>raymond#rijschoolhouben.nl</a><br />
<i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
</div>
</p>
<p>
<div id="img-1">
<img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
</div>
<div id="img-2">
<img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
</div>
<div id="img-3">
<img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
</div>
<div id="img-4">
<img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
</div>
<div id="img-5">
<img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
</div>
<div id="img-6">
<img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
</div>
</p>
</body>
</html>
CSS:
div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: white;
}
div#header-pic{
position: fixed;
height: 50px;
left: 500px;
}
div#nav-bar{
position: fixed;
padding-top: 130px;
left: 0;
width: 100%;
white-space: nowrap;
}
div#nav-bar ul{
list-style: none;
text-align: center;
background-color: #323232;
padding: 10px 0;
}
div#nav-bar li{
display: inline;
}
div#nav-bar li a{
text-decoration: none;
color: white;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#icon-main{
position: fixed;
color: #323232;
padding: 10px;
}
div#icon-main i{
padding: 5px;
}
div#icon-main a{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#img-1 {
position: fixed;
left: 0;
padding-top: 184px;
width: 100%;
}
div#img-2 {
position: fixed;
padding-top: 184px;
padding-left: 255px;
}
div#img-3 {
position: fixed;
padding-top: 184px;
padding-left: 915px;
}
div#img-4 {
position: fixed;
padding-top: 184px;
padding-left: 585px;
}
div#img-5{
position: fixed;
padding-top: 184px;
padding-left: 1245px;
}
div#img-6 {
position: fixed;
padding-top: 184px;
padding-left: 1575px;
}
i know the code is bad but i hope someone can help me!
Here is a fiddle.
-Ryan
I looked at your external code. Please add your HTML and CSS to your question in Stack Overflow.
From the external HTML you have the following code:
<a>046-4524501</a>
Which does not work as a link.
You have this code
Home
That works as you would expect it to.
Change this line:
<a>046-4524501</a>
to
046-4524501
Where the href="Where you want the link to go".
It's all about the value for "href"
I did notice you are doing non-responsive html which means it is not mobile friendly or will look the same in smaller browser windows.
Your code is messy but your doing okay.
First off wrap everything you are putting in the header in the header div
The images are floating up to the top over your nav due to the position:fixed
Remove all the empty <p></p> between your div's
Use floats on your images and width of a percentage of 100% plus wrap them in a container/div
If you need me to I can see if I can redo all your html and CSS but think for you would learn better to try it out for yourself.
You could always go look at the HTML5 boilerplate out there and use them to guide you on how to construct good code.
I see that you are trying to create a row of images. Instead of using a system of DIVs why don't you use the more flexible (and more responsive) structure of a list?
Then you can use float: for lining them up in a row and basic CSS to give them sizes. The images will be specified as a background for these li elements (better practice).
Like this: http://codepen.io/Attrexx/pen/KVvwXP
You are placing divs containing the images using padding. That's why you can not use links in the menu. Div blocks cover your links.
Try using something like:
selector {
position: absolute; /* or `fixed` like in your css; see below*/
top: 100px; /* pixels from the top */
left: 100px; /* pixels from the left */
/* you can also use `bottom` and `right` */
}
For example:
div#img-3 { /* or just `#img-3`; see below */
position: absolute;
top: 184px;
left: 915px;
}
Check this w3 schools article for more information on positioning.
Not related to the question:
If you are using CSS's id selector (#), I suggest not to use element selector (e.g. div). So rather than div#img-3 try using just #img-3.
Try avoiding using id selectors at all. You can use class rules, and happily after some time they will result in saving you a lot of work.
If you are using HTML5 then try using semantic elements.
Avoid using fixed position when you don't need to (your page is an example of such page).
Paragraphs (p) shouldn't be used in the same way as div. It may result in bad habit for semantic sites.
Rather than using positioning (position), experiment with float or different display types (e.g. inline-block). Use it only when it is really needed.
Read about HTML Responsive Web.
What has been done:
Have created the required Html tags as shown in the code below:
<html>
<head>
....
....
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../jquery-1.3.2.min.js"></script>
<style style="text/css">
html, body {
padding: 0;
margin: 0;
position:relative;
width: auto;
height: auto;
}
.container {
width: 150px;
align-content: center;
margin-top: 980px;
clear: both;
}
.container input {
width: 82%;
clear: both;
}
</style>
</head>
<body>
...
...
<div id="page4" align= "center" style=" background-image: url(Image/Page2.png); position: relative; z-index: 2; display:none" width="100%" height="100%" left="0px" top="0px">
<form style=" alignment-adjust: autofocus; padding: 30px" class="container" action="Page5" method="POST">
Name: <input type="text" name="name" size="15px" required><br><br>
Email: <input type="text" name="email" size="15px" required><br><br>
</form>
<input type="image" src="image/Submit.png" alt="Submit" width="100px" height="50px" onClick = "Page5()">
</div>
<script>
function Page5() {
$("#page4").hide();
$("#page5").show();
}
</script>
<div id="page5" align= "center" style=" background-image: url(Image/Page5.png);position: relative; z-index: 3; display:none" width="100%" height="100%" >
</div>
</body>
</html>
Functionality:
User is supposed to be able to view page 5 and the background image "Page 5" is being displayed, after the user has submitted the form in page 4. Hence, when user navigate from page 4 to page 5, user is suppose to the see the content of page 5 which is just the background image.
Issue
When user navigates from page 4 to 5, page 5's content is not displayed, the entire background image is not displaying. Hence, I would like to ask for help,
1.) why is this happening
2.) what is the best rectification process
NOTE
I have to input the following attribute:
display:none
Reason: I have created the following stack in the form of block, hence the individual <div> block will only appear when the <script> is implemented. Hence, please do not suggest that I need to remove the display:none as doing so will
cause the to merge and furthermore, it does nothing as well.
Thanks
first of all there is no "width" and "height" attribute to div's so move the width and height declarations to CSS. Also add height 100% to html and body otherwise the div has no basis to calculate the height upon
html, body {
padding: 0;
margin: 0;
position:relative;
width: 100%;
height: 100%;
}
#page5{
background-color: red;
width: 100%;
height:100%
}
http://jsfiddle.net/arrhyppz/
P.S. use the inspect function of your browser to see the applied css, you will find where your mistakes are
ETA: Thanks for all the help, everyone! These all worked beautifully. Thanks so much for your time!
I'm coding a newsletter (live preview here and my goal for it here) and am trying to get the navigation buttons ('Join Meet Learn Support') to sit about halfway down the logo. When I try top-margin in the navButtons class I'm not seeing any success. I suspect it's a display issue, but I'm not sure --- changing from inline to inline-block didn't really help.
<!DOCTYPE html>
<html>
<head>
<title>The Leaflet</title>
<style>
div
{
display: inline;
}
a
{
text-decoration: none;
}
p
{
text-align:left;
margin-left: 130px;
margin-right: 130px;
max-width: 600px;
}
#logo /* This sets the width for the New Leaf logo at the top. This should not change.*/
{
position:relative;
}
#navButtons
{
position:relative;
right:-240px;
}
#announcementImage
{
margin-left: 120px;
margin-right: 120px;
}
a.joinButton
{
margin-left:40%;
color:white;
background-color: #f7853e;
font-size: 30px;
}
a.navButton
{
color:#494541;
font-size: 22px;
}
</style>
</head>
<body>
<div id="logo"> <! --- Sets up the logo --->
<img src ="images/NLNewsletterLogo.png">
</div>
<div id="nav buttons"> <! --- Navigation Bar--->
<a class = "joinButton" href="url">Join</a>
<a class = "navButton" href="url"> Meet </a>
<a class = "navButton" href="url">Learn </a>
<a class = "navButton" href="url">Support </a>
</div>
<br>
<br>
<br>
<br>
<br>
<div id ="announcementImage"><! --- Lead Image-->
<img src="images/announcementGraphic.png">
</div>
<div id = "announcementText">
<p>Thrive Week is in full swing here at the Leaf. So far, we've had Sharon Perry, head of the State
College Area School District Career Center, help participants identify which of 34 traits,
including the special quality of woo, are strengths they employ in various settings so they can
work smarter. Then Anna Gokieli, owner of Tru Meditation and Yoga, got us staying present and
peaceful even in situations that often trigger stress. Will Snyder brought it home last night by
showing how making art and making money don't have to conflict.
Have a comment on a workshop you've attended or a session you'd like to see in our remaining
Design and Launch weeks? Galen would love to hear from you!</p>
</div>
</body>
Try this
#logo {
display: inline-block;
vertical-align: middle;
}
#nav {
display: inline-block;
vertical-align: middle;
width: 100%;
}
I think what your looking for is:
#logo {
vertical-align: middle;
}
Try adding bottom of something like 60px to div with id nav buttons.
Since this element is position: relative, it's placement can be controlled with left, right, top, bottom, like so:
#nav#buttons {
bottom: 50px;
}
Floating the logo left, and adding margin to the #nav will do the trick.
#logo { float: left; }
#nav {margin-top: 80px; width: 100%; display: inline-block; }
h1.title { clear: left; }
You're almost there. Inline-Block is what I'd use with absolute positioned nav, but you have a generic div {position:inline;} that applies to everything on the page inside of a div. You should be more specific for your logo and nav and just get rid of the generic styling by giving each a class like <div class="WHATEVER"> so you can target the div you want to work on.
Then try this:
#logo {
width: 240px;
display: inline-block;
#nav buttons {
margin: 0px 0px 0px 80px;
display: inline-block;
position: absolute;
top: 80px;}
This question already has answers here:
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 9 years ago.
I want to add separate opacity to my header and my div and my form button. I want the div opacity to be 0.5; which is no problem but I don't want my form button to have a opacity. When ever I try to change levels of opacity my header and the form button opacity becomes the same. For example: I want the header opacity to be 0.9 and the div opacity to be 0.5 and no opacity on the submit button, here is my HTML code:
<!DOCtype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adeventist Youth's Empowerment</title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<p> </p>
<div id="apDiv1">
<div align="center" class="apDiv1">
<h1 align="center"><cite>"Welcome to the Adventist Youth's Empowerment. At this website you can speak about your problems with others and get encouragement from seventh day adventist youth's who have had the same problems as you. This is a community that does not judge you and all information is kept confidential and only to the community of trusted members. If you are not a seventh day adventist then this website is still for you, All are welcomed!!!! -Shadowcoder </cite></h1>
</div>
<form id="form" method="get" action="Main.html">
<p> </p>
<p> </p>
<p> </p>
<p>
<input type="submit" value="Escape The World" class="button">
</p>
</form>
</body>
</html>
My css is this:
body {
background-image:url(Images/background%20image1.jpg);
background-repeat:no-repeat;
background-size:100%;
background-position:center top;
}
#apDiv1 {
position: fixed;
left: 279px;
top: 100px;
width: 817px;
height: 390px;
}
#apDiv1 .apDiv1 h1 cite {
font-family: Georgia, Times New Roman, Times, serif;
}
#apDiv1 {
background:#FFF;
opacity: 0.5;
border-radius: 20px;
}
#form {
width: 20em; margin: auto;
}
.button {
display: marker;
background-position:center;
width: 9em;
height: 1em;
border:thin;
border-radius: 20px;
padding: 0px;
text-align: center;
font-size: 2em;
line-height: 1em;
color: #FFF;
background-color: #0C0;
}
.button:hover{
color: #000;
background-color: #0C0;
}
header {
width: 100%;
background-image:url(Images/header.gif);
height: 70px;
opacity: 1;
}
* {
margin: 0;
padding: 0;
}
when ever i add opacity to the div the form automatically has that opacity and so does the header.
First off you shouldnt name your div ids and classes the same. It only leads ot confusion. If you formatted your code correctly. It would be very easy to see that oyu never close you apDiv1. You open another one with the same class name. As I mentioned above this is only going to confuse you. Close your outer div at the appropriate place and then it will get its opacity.
<div id="apDiv1">
<div align="center" class="apDiv1">
<h1 align="center"><cite>"Welcome to the Adventist Youth's Empowerment. At this website you can speak about your problems with others and get encouragement from seventh day adventist youth's who have had the same problems as you. This is a community that does not judge you and all information is kept confidential and only to the community of trusted members. If you are not a seventh day adventist then this website is still for you, All are welcomed!!!! -Shadowcoder </cite></h1>
</div>
<form id="form" method="get" action="Main.html">
<p> </p>
<p> </p>
<p> </p>
<p>
<input type="submit" value="Escape The World" class="button">
</p>
</form>
CLOSE THE DIV HERE OR EARLIER IF YOU WANT
After you fix all that... Give your outer div an opacity this way...
background: rgba(64, 64, 64, 0.5)
from your code, you have missed out the closing tag
To answer your question, you can use something like this to your div
#apDiv1 {
background: rgba(255,255,255,0.5);
border-radius: 20px;
}
where rgb is the color in rgb format, and a is for the alpha
Here you go, I have added three opacity in header, form and apDiv1 class. jsfiddle
.apDiv1{
opacity: 0.2;
}
#form {
width: 20em; margin: auto;
opacity: 0.8;
}
header {
width: 100%;
background-image:url(Images/header.gif);
height: 70px;
opacity: 0.7;
}