I've been playing around with websites to figure out how they work. By downloading them and opening the in dream weaver cs6. But when I open the downloaded html file in my browser everything displays fine except the green background which is replaced with a default white one. Have a look.
http://www.bintrasher.com/index.html
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0036)http://www.bintrasher.com/index.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="./Bintrasher1_files/style.css">
<title>Bintrasher</title>
<style type="text/css"></style></head>
<body>
<div id="container">
<div id="top_banner"><img src="./Bintrasher1_files/dragons_den.gif" alt="dragons den"></div>
<div id="nav">
<ul>
<li>home</li>
<li>|</li>
<li>domestic</li>
<li>|</li>
<li>commercial</li>
<li>|</li>
<li>videos</li>
<li>|</li>
<li>shop</li>
<li>|</li>
<li>contact us</li>
</ul>
</div>
<div id="content">
<div id="left_column">
<h1 class="header_home">Gain 40% more space in your wheelie bin!</h1>
<p>
Now with the Bin Trasher you can compact up to 40% of your waste to reduce overfilling and littering.
</p><p>
The sheer amount of waste produced by each household every week is increasing and the dangerous task of standing in your bin to squash your rubbish may be over!
</p><p>
We might just have the answer to your problem. The Bin Trasher is a simple gadget that compacts the waste and gives you 40% more space in your wheelie bin.
</p>
</div>
<div id="right_column"><p>Watch our demonstration video now…</p>
<object width="360" height="290"><param name="movie" value="http://www.youtube.com/v/7aHbTdhtrho&hl=en&fs=1"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/7aHbTdhtrho&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="290"></object>
</div>
</div>
<div id="footer">
<div id="col1">
<p>
<strong>Trade Enquiries Welcome</strong><br>
<strong>Tel:</strong> 059 91 57629<br>
<strong>Mobile:</strong> 087 206 9546<br>
<strong>Email:</strong> info#bintrasher.com</p>
</div>
<div id="col2">
<p>
<strong class="firstline">Great Value at only </strong><br>
<strong>€49.95</strong><br>
<strong class="lastline">Including VAT</strong>
</p>
</div>
<div id="col3"><img src="./Bintrasher1_files/buynow.gif"></div>
</div>
<p class="lower_left">Bin Trasher. 2010. All rights reserved </p>
<p class="lower_right">Terms & Conditions | Privacy Policy | Site Map<br>
<img src="./Bintrasher1_files/headers_26.gif"></p>
</div>
</body></html>
css:
#charset "UTF-8";
/* CSS Document */
img{border:0;}
body {text-align:center; margin:23px 0; background:url(../images/bgr.gif); font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.8em; line-height:1.4em;}
p a{color:#CC0000;}
p a:hover{color:#3c671e;}
#container {width:931px; margin-left:auto; margin-right:auto; text-align:left;}
#top_banner {height:149px; background:url(../images/top_banner.gif) bottom no-repeat; text-align:right;}
#nav {height:35px; background:url(../images/top_ban_bit.gif) no-repeat right #4a4a30; color:#FFFFFF;}
#nav ul{list-style-type:none; margin:0; padding:0 0 0 10px;}
#nav li{float:left; padding:6px 0.9em 0 0.9em; font-size:1.2em;}
#content{background:#FFFFFF; overflow:hidden; border-bottom:dotted 2px #006633;}
#left_column{ float:left; width:460px; padding:30px 30px;}
#right_column{margin-left:520px; padding:30px 20px;}
#footer{clear:both; background:#FFFFFF; overflow:hidden; padding:10px 20px 10px 30px; }
#footer div{float:left; width:33%;}
#col1 strong {color:#3c671e; text-transform:uppercase; font-weight:normal;}
#col2 strong {color:#5c8424; font-size:4em; line-height:1.2em;}
#col2 .firstline{color:#333333; font-size:1.6em;}
#col2 .lastline{font-size:1em; color:#333333;}
#col3 {text-align:right; padding-top:30px;}
.main_link {color:#FFFFFF; text-decoration:none;}
.main_link:hover, .selected{color:#669b41; text-decoration:none;}
p.lower_left{float:left; font-size:0.8em; color:#FFFFFF;}
p.lower_right{float:right; font-size:0.8em; color:#FFFFFF; text-align:right;}
.header_home{background:url(../images/heading_home.gif) no-repeat; width:456px; height:73px; text-indent:-5000px;}
.header_industrial{background:url(../images/heading_industrial.gif) no-repeat; width:456px; height:73px; text-indent:-5000px;}
There is probably a very easy answer because I'm very new to web development.
Thanks in advance.
instead of
background:url(../images/bgr.gif);
you need to write
background:url(http://www.bintrasher.com/images/bgr.gif);
A reference (the css file) is missing, I guess. Do you have the same file structure like on the server? I bet it will work then.
Related
I am a newb here. I have been attempting to fix this code for the past couple days to no avail. I am trying to create a page that is reactive. It was working well before I added media queries and made some other small changes. I currently can not get the images to appear on the schedule and classes pages (#lounge , #mat). I also cannot get the nav bar to no longer be stuck in two columns.
index.html page
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href =yoga.css>
<title>Path of Light Yoga Studio</title>
<div id="wrapper">
<head>
<meta name="viewport"content="width-device-width,initial-scale=1.0">
</head>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<header class="home">
<h1>Path of Light Yoga Studio</h1>
</header>
<main>
<h2>Find Your Inner Light</h2>
<p><span class="studio">Path of Light Yoga Studio</span> welcomes all to experience a yoga practice in a tranquil,<br> peaceful
enviroment.Our studio offers classes at every level, from beginner to <br> advanced. Whether you are new to yoga
or have been practicing for years,<br> our dedicated instructors can modify a practice to help you improve your well-<br>being.
Let your inner light shine at the <span class="studio">Path of Light Yoga Studio</span>.</p>
<ul>
<li>Hatha, Vinyasa, Restorative Yoga classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<div class="clear">Path of Light Yoga Studio<br>612 Serenity Way<br>El Dorado, CA 96162
<br><br>
<a id="mobile" href="tell:888-555-555">888-555-5555</a>
<span id="desktop">888-555-5555</span>
</div>
</main>
<br><br>
<br><br>
<footer>Copyright © 2020 Path of Light Yoga Studio<br>
amanda#alcottherr.com
</footer>
</div>
schedule.hmtl
<!DOCTYPE html>
<html lang="en">>
<link rel="stylesheet" href =yoga.css>
<title>Path of Light Yoga Studio</title>
<head>
<meta name="viewport"
content="width-device-width,initial-scale=1.0">
</head>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<header class="content">
<h1>Path of Light Yoga Studio</h1>
</header>
<div id="wrapper">
<main>
<div id="loungehero"></div>
<h2>Yoga Schedule</h2>
<p> Mats, blocks and blankets provided. Please arrive 10 minutes before your class begins.
Relax in our Serenity Lounge before or after your class.
</p>
<div id="flow">
<section >
<h3>Monday - Friday</h3>
<ul>
<li>9:00am Gentle Hatha Yoga</li>
<li>10:30am Vinyasa Yoga</li>
<li>5:30pm Restorative Yoga</li>
<li>7:00pm Gentle Hatha Yoga</li>
</ul>
</section>
<section >
<h3>Saturday & Sunday </h3>
<ul>
<li>10:30am Gentle Hatha Yoga</li>
<li>Noon Vinyasa Yoga</li>
<li>1:30am Gentle Hatha Yoga</li>
<li>3:00pm Vinyasa Yoga</li>
<li>5:30pm Restorative Yoga</li>
</ul>
</section>
</div>
</main>
<br><br>
<footer>
<small><i>Copyright © 2020 Path of Light Yoga Studio<br>
amanda#alcottherr.com
</i>
</small>
</footer>
</div>
classes.html
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href =yoga.css>
<title>Path of Light Yoga Studio</title>
<div id="wrapper">
<head>
<meta name="viewport"content="width-device-width,initial-scale=1.0">
</head>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<header class="content">
<h1>Path of Light Yoga Studio</h1>
</header>
<main>
<div id="mathero"></div>
<h2>Yoga Classes</h2>
<div id="flow">
<section>
<h3>Gentle Hatha Yoga</h3>
<p> A 60 minute class of poses and slow movement that focuses on asana(proper alignment
and posture), pranayama (breath work), and guided meditation to foster your mind and body connection.
This class is intended for beginners and anyone wishing a grounded foundation in the practice of yoga.</P>
</section>
<section >
<h3>Vinyasa Yoga</h3>
<p>A 60 minute class that focuses on breath synchronized movement - you will inhale and exhale as you
flow energetically through yoga poses. While intended for intermediate to advanced students,
beginners are welcome to join in this class.</p>
</section>
<section >
<h3>Restorative Yoga</h3>
<p>A 90 minute class that features very slow movement and long poses.Restorative yoga is useful in
relieving stress and fostering a sense of well-being. This clamins, restorative experience is suitable
for students of any level of experience</p>
</section>
</div>
</main>
<br><br>
<footer>
<small><i>Copyright © 2020 Path of Light Yoga Studio<br>
amanda#alcottherr.com
</i>
</small>
</footer>
</div>
yoga.css
* { box-sizing: border-box;}
nav ul {display:flex;
flex-flow:row wrap;
margin:0;
font-size:1.2em;
list-style:none;}
nav li {
width:40%;
padding:0 1em 0 1em;
display:inline;}
nav{position:fixed;
top:0;
left:0;
width:100%;
padding-top:0.5em;
padding-right:0;
margin:0;
text-align:right;
background-color: white;
z-index:9999;}
nav a{display: block;
text-decoration:none;}
nav a:link{color:#3F2860;}
nav a:visited{color:#497777;}
nav a:hover {color: #A26100;}
header {background-color: #40407A;
background-image:url(sunrise.jpg);
background-size:100% 100%;
color:white;
font-size:90%;
margin-top:50px;
min-height:200px;
text-decoration:none;}
header a:link{color:#FFF;text-decoration:none;}
header a:visited{color:#FFF;text-decoration:none;}
header a:hover{color:#EDF5F5;text-decoration:none;}
h1 {text-decoration: none;}
.home {height:20vh;
padding:2em 0 0 10%;}
.content {height:20vh;
padding:2em 0 0 10%;}
#wrapper{background-color: #F5F5F5;
padding:2em;}
body {background-color: #3F2860;
color:#40407A;
font-family: Arial,
'Segoe UI',
Tahoma,
Geneva,
Verdana,
sans-serif;
margin:0}
.studio {font-style: italic;}
#mathero{background-image:url(yogamat.jpg);
background-repeat: no-repeat;
background-size:300px ;
display:none;}
#loungehero{background-image:url(yogalounge.jpg);
background-repeat: no-repeat;
background-size:300px ;
display:none;}
section {padding:0 .5em 0 .5em;}
footer {
font-size:0.6em;
font-style: italic;
text-align:center;}
#mobile{ display:inline;}
#desktop{display:none;}
#media (max-width:600px){
nav ul {display:flex;
flex-flow:row nowrap;
justify-content:flex-end;}
nav li { width:7em;}
section{ padding:0 2em 0 2em;}
#mathero{ display:block;
padding-bottom:1em;}
#loungeher0{ display:block;
padding-bottom:1em;}
#flow{display:flex;
flex-flow:row;}
#mobile{display:none;}
#desktop{display:inline;}
}
#media(min-width:1024px){
header {font-size:120%;}
.home {height: 50vh;
padding:5em 0 0 8em;}
.content {height:30vh;
padding:1em 0 0 8em;}
#wrapper {margin:auto;
width:80%;}
}
About your navbar:
You have the width of each li set to 40%, this means the 40% of your window width.
nav ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));
}
nav li {
padding:0 1em 0 1em;
}
As for your pictures, the containers #loungeheroand #mathero (if you remove the display:none;) have 0 height.
So I want it to float to the right, but I want the text and one image (which I haven't turned to links yet) to be in one line.
HTML code:
<html>
<title>Home - Welcome to Micro Skills!</title>
<head>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
<div id="header" class="header">
<div class="container">
<div class="logo">
<h1><img src="microskills_logo.jpg" width="275" height="106" alt="Logo - Micro Sills"></h1>
</div>
<div class="navBar">
<ul>
<b>
<li><img src="home_icon.jpg" width="256" height="256" alt="Home" class="home_icon"></li>
<li>About Us</li>
<li>Events</li>
<li>Get Involved</li>
<li>Contact Us</li>
</b>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
<p>Welcome to the Community MicroSkills Development Centre website.
Since 1984, we have been serving communities in the Greater Toronto Area. As a non-profit, charitable organization, we strive to achieve excellence in our service delivery to women, newcomers to Canada, youth and other community members who trust us to support them in improving their economic and social well-being.
Community MicroSkills Development Centre is a multi-cultural, non-profit, community based organization committed to assisting the unemployed, with priority to women, racial minorities, youth and immigrants. Recognizing barriers that immigrants, racial minority, youth and women face in their efforts towards self-sufficiency, MicroSkills aims to enable them to participate more fully in Canadian society and assist them in acquiring the skills needed to achieve self-determination and economic, social and political equality.
Our programs are designed to assist the unemployed, with priority to women, racial minorities, youth and immigrants achieve career and personal goals. Clients can choose as many services as required to help them on their way to becoming self-reliant and economically self-sufficient.</p>
</div>
</div>
</html>
CSS code:
#charset "utf-8";
/* CSS Document */
body{
width:100%;
margin:auto;
}
.container{
width:85%;
margin:auto;
}
.header{
background-color:#900;
width:100%;
height:17%;
top:0;
position:fixed;
text-decoration:none;
}
.logo{
float:left;
}
.navBar{
float:right;
height: 10px;
}
li{
float:left;
margin-left:2%;
padding-top:20px;
color:#FFF;
text-transform:uppercase;
font-size:12px;
font-stretch:ultra-condensed;
padding-right:0;
}
.content{
padding-top:20%;
}
.home_icon{
height:50px;
width:50px;
}
I want the same positioning, but I want to move the text and image in the "navBar" slightly to the left to fit everything in one line.
You should add a width property to your .navBar CSS.
http://codepen.io/calebanth/pen/KrZBXo
.navBar {
float: right;
height: 10px;
width: 30%;
}
Take a look at my code and tell why things don't work out please. The blue line should be on the bottom of the page. The body seems to be really small even though I used clear divs. If you find what went wrong please explain the solution. I'm new in coding so an explanation will be really useful to me. Thank you on advance.
#charset "utf-8";
/* CSS Document */
.clear {
clear:both;
}
.wrapper {
width:80%;
margin: 0 auto;
}
header {
margin-top:40px;
border-bottom:1px solid black;
padding-bottom:10px;
}
header img {
float:left;
width: 250px;
}
#socialmedia {
float:right;
padding:0;
margin-top:-2px;
}
#socialmedia li {
float:left;
list-style-type:none;
padding-left:10px;
}
li img {
width:40px;
}
#listmenu {
float:left;
margin-top:80px;
margin-right:5px;
}
#listmenu li {
display: block;
margin-bottom:40px;
font-family:Arial;
Font-size: 30px;
border-right:1px solid black;
}
#leftmenu li:first-child {
color:#3598db;
}
#right {
float:right;
width:60%;
}
#signupline {
background-color:#3598db;
height:50px;
width:auto;
}
button {
float:left;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<header>
<div class="wrapper">
<img src="logo.png" alt="logo"/>
<ul id="socialmedia">
<li><img src="facebook.png" alt="facebook" /></li>
<li><img src="twitter.png" alt="twitter" /></li>
<li><img src="youtube.png" alt="youtube" /></li>
</ul>
<div class="clear"></div>
</div>
</header>
<div id="leftmenu">
<div class="wrapper">
<ul id="listmenu">
<li>Home</li>
<li>What's e-friendship</li>
<li>Lanching Day</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<div class="clean"></div>
</div>
</div>
<div id="right">
<h1>Welcome to e-Freindship</h1>
<p>e-Friendship is the new unbelievable website where you can make new friends from all over thr world. Reading is a complex cognitive process of decoding symbols in order to construct or derive meaning (reading comprehension). Reading is a means of language acquisition, of communication, and of sharing information and ideas. Like all languages, it is a complex interaction between the text and the reader which is shaped by the reader’s prior knowledge, experiences, attitude, and language community which is culturally and socially situated. The reading process requires continuous practice, development, and refinement. In addition, reading requires creativity and critical analysis. Consumers of literature make ventures with each piece, innately deviating from literal words to create images that make sense to them in the unfamiliar places the texts describe. Because reading is such a complex process, it cannot be controlled or restricted to one or two interpretations. There are no concrete laws in reading, but rather allows readers an escape to produce their own products introspectively. This promotes deep exploration of texts during interpretation.[1] Readers use a variety of reading strategies to assist with decoding (to translate symbols into sounds or visual representations of speech) and comprehension. Readers may use context clues to identify the meaning of unknown words. Readers integrate the words they have read into their existing framework of knowledge or schema (schemata theory).</p>
<div class="clear"></div>
</div>
<div id="signupline">
<p id="signuptext">Take your place and sign up</p>
<button>Sign Up</button>
</div>
</body>
</html>
Try move the clear div out of the right div:
<div id="right">...</div>
<div class="clear"></div>
I recently began construction of my first website, I'm still a beginner in html. My site has three buttons on the side, "Games", "Chat", and "About". They all have custom pictures, but it seems like there is a very small hyperlinked "-" in the bottom right of the button. Like a hyperlink, it turns red when clicked. Here is a picture of my clicking the "Games" button: As you can see, there is a small "-" hyperlink on the bottom right of the button.
Here is ALL my code for the games page:
<html>
<header>
<title>CBgames.com</title>
</header>
<body bgcolor=#474747 text=#FFFFFF>
<center>
<img src="siteimages/title.gif">
</center>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/games.html">
<img src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" />
</a>
<br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/chat.html">
<img src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" />
</a>
<br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/about.html">
<img src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" >
</a>
<br>
<br>
<table Align="left" Border="1" Width="300">
<tr>
<td><center>Our Newest Games:</center></TD>
</tr>
<tr>
<td>
<center>Game</center>
<center>Game</center>
<center>Game</center>
</td>
</tr>
</table>
<style type="text/css">
body {
margin:0px;
padding-bottom:25px;
}
#footer {
color:white;
font:George, "Times New Roman", Times, serif;
font-size:16px;
width:1920px;
height:20px;
line-height:20px;
background-color:#474747;
text-align:center;
position:fixed;
bottom:0px;
}
</style>
<head>
<body>
<div id="footer">
COPYRIGHT © 2015 CB-GAMES.NET [SA] - ALL RIGHTS RESERVED
</div>
</body>
</body>
</html>
I'm still a newbie at this, sorry for any troubles.
This is the syntax for adding a URL in HTML
link text
An example of adding "Example" website URL would be like the following
Click here to direct to Example site
You have spaces between the start tag for the anchor and the image inside of it (and between the image and the end tag).
Spaces are text.
Text in a link gets underlined.
Reformat your HTML to remove the spaces.
There is still an awful lot wrong with your markup but here is a quick attempt of moving you along in the right direction:
<!doctype html>
<html>
<head>
<title>CBgames.com</title>
<style type="text/stylesheet">
BODY {
background-color:#474747;
color:#FFF;
margin:0;
padding-bottom:25px;
}
.titleimage { text-align:center; }
.buttons {
margin-bottom: 2em;
}
.buttons A { display:block; }
.table1 { text-align:left; border:solid 1px #000; width: 300px; }
#footer {
color:white;
font:George, "Times New Roman", Times, serif;
font-size:16px;
height:20px;
line-height:20px;
background-color:#474747;
text-align:center;
position:fixed;
left:0;right:0;bottom:0;
}
</style>
</head>
<body>
<dIv class="titleimage"><img src="siteimages/title.gif"></div>
<div class="buttons">
<a href="games.html"><img
src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" /></a>
<a href="chat.html"><img
src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" /></a>
<a href="about.html"><img
src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" ></a>
<div>
<table class="table1">
<tr><td>Our Newest Games:</td></tr>
<tr>
<td>
<div>Game</div>
<div>Game</div>
<div>Game</div>
</td>
</tr>
</table>
<footer id="footer">
COPYRIGHT © 2015 CB-GAMES.NET [SA] - ALL RIGHTS RESERVED
</footer>
</body>
</html>
I'm trying to stylise my text in CSS and here's what gets displayed.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<title></title>
</head>
<body class="wrapper">
<!-- header for: ALL PAGES --->
<header id="header">
</header>
<!-- end header for: ALL PAGES --->
<!-- navigation bar for: ALL PAGES --->
<nav>
</nav>
<!-- end navigation bar for: ALL PAGES --->
<!-- paragraph for: THIS PAGE ONLY --->
<section id="welcome_p">
</section>
<!-- end paragraph for: THIS PAGE ONLY --->
<!-- images for: THIS PAGE ONLY --->
<section id="plan_options">
</section>
<!-- end images for: THIS PAGE ONLY --->
<!-- footer for: ALL PAGES --->
<footer id="footer">
<div id="left_side_footer">
<p class="footer_heading">About</p>
</br></br>
<a href="#" class="footer_link">
<span class="footer_paragraph">Get to Know John</span>
</a>
<a href="#" class="footer_link">
<span class="footer_paragraph">Moon Lit Disco's</span>
</a>
</div>
<div id="middle_of_footer">
<p class="footer_heading">Terms and Policies</span>
</br></br>
<a href="#" class="footer_link">
<span class="footer_paragraph">Cookie Policy</span>
</a>
<a href="#" class="footer_link">
<span class="footer_paragraph">Terms and Conditions</span>
</a>
<a href="#" class="footer_link">
<span class="footer_paragraph">Privacy Policy</span>
</a>
<a href="#" class="footer_link">
<span class="footer_paragraph">Copyright and Trademark</span>
</a>
</div>
<div id="right_side_footer">
<p class="footer_heading">Website</p>
</br></br>
<a href="#" class="footer_link">
<span class="footer_paragraph">Feedback</span>
</a>
</div>
<div id="copyright">
<p class="legal_paragraph">Logo / site design: Trey Taylor and Charlie Wubs</p>
<p class="legal_paragraph">©2014 Moon Lit Disco's</p>
<p class="legal_paragraph">Version:2014.1.0</p>
</div>
</footer>
<!-- end footer for: ALL PAGES --->
</body>
</html>
any my CSS:
/* SECTIONS */
/* CLASSES */
.legal_paragraph{
font-family:"Helvetica", "Arial", sans-serif;
text-align:right;
font-size:10px;
color:black;
padding:1px;
}
.footer_paragraph{
font-family:"Helvetica", "Arial", sans-serif;
font-size:1em;
color:black;
display:block;
text-decoration:none;
}
.footer_link{
text-decoration: none;
}
.footer_heading{
display:inline;
font-family:"Century Gothic";
font-size:17px;
color:black;
text-decoration:underline;
background-color:white;
display:inline;
width=100%;
}
.fp{
text-decoration:none;
color:black;
font-size:1em;
display:block;
font-family:"Helvetica", "Arial", sans-serif;
}
/* STYLE */
a{
text-decoration:none;
}
#footer a.footer_link:hover span{
border-bottom:1px solid black;
border-top:1px solid black;
width:100%
}
#line_break{
}
#left_side_footer{
display:table-cell;
float:left;
padding-right:360px;
padding-bottom:30px;
}
#right_side_footer{
display:table-cell;
float:right;
}
#middle_of_footer{
display:table-cell;
float:center;
}
What I want:
The text to be not underlined, same size and font (for some reason it doesn't do that)
get it so it is all inline
get that legal stuff below it all
Any help would be must appreicated!
Without doing all the work for you something like this should work.
Will need some styling from here, suggest looking at http://www.codecademy.com/
HTML
<footer>
<ul class="left">
<li>About</li>
<li>Get to know John</li>
<li>Moon Lit Disco's</li>
</ul>
<ul class="left">
<li>About</li>
<li>Get to know John</li>
<li>Moon Lit Disco's</li>
</ul>
<ul class="left">
<li>About</li>
<li>Get to know John</li>
<li>Moon Lit Disco's</li>
</ul>
<div class="clearLeft">
<p>Logo / site design: Trey Taylor and Charlie Wubs</p>
<p>© 2014 Moon Lit Disco's</p>
<p>Version:2014.1.0</p>
</div>
</footer>
CSS
.left{
float:left;
}
.clearLeft{
clear:left;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
Should get you started :)
If you want the text not to be underlined, then you need to style the anchor.
Example:
footer a {
text-decoration:none;
}
.footer_link a {
font-size:1em;
}
Since your footer is an HTML5 element, you don't really need an ID of #footer. Semantically, anyway.
You also don't need spans. You can just use the parent class to style the font size.
You're also missing a closing paragraph tag, which might be why it's not taking the paragraph styles.
Cleaning up your code, your HTML should be more like this (head area is removed, but it's fine):
<body class="wrapper">
<!-- header for: ALL PAGES --->
<header></header>
<!-- end header for: ALL PAGES --->
<!-- navigation bar for: ALL PAGES --->
<nav></nav>
<!-- end navigation bar for: ALL PAGES --->
<!-- paragraph for: THIS PAGE ONLY --->
<section id="welcome_p"></section>
<!-- end paragraph for: THIS PAGE ONLY --->
<!-- images for: THIS PAGE ONLY --->
<section id="plan_options"></section>
<!-- end images for: THIS PAGE ONLY --->
<!-- footer for: ALL PAGES --->
<footer>
<div class="column">
<p class="footer_heading">About</p>
<ul>
<li>Get to Know John
</li>
<li>Moon Lit Disco's
</li>
</ul>
</div>
<div class="column">
<p class="footer_heading">Terms and Policies</p>
<ul>
<li>Cookie Policy
</li>
<li>Terms and Conditions
</li>
<li>Privacy Policy
</li>
<li>Copyright and Trademark
</li>
</ul>
</div>
<div class="column">
<p class="footer_heading">Website</p>
<ul>
<li> Feedback
</li>
</ul>
</div>
<div id="copyright">
<p>Logo / site design: Trey Taylor and Charlie Wubs
</p>
<p>© 2014 Moon Lit Disco's</p>
<p>Version:2014.1.0</p>
</div>
</footer>
</body>
And CSS:
.column {
font-family:"Helvetica", "Arial", sans-serif;
font-size:1em;
color:black;
display:block;
text-decoration:none;
float:left;
margin-right:13px;
width:30%;
}
.column a {
text-decoration: none;
color:black;
}
.column ul {
list-style:none;
margin-left:-40px;
}
.footer_heading {
font-family:"Century Gothic";
font-size:17px;
color:black;
text-decoration:underline;
background-color:white;
}
#copyright {
clear:both;
font-family:"Helvetica", "Arial", sans-serif;
text-align:right;
font-size:10px;
color:black;
padding:1px;
}
#copyright a {
text-decoration:none;
color:black;
}
See Fiddle: http://jsfiddle.net/v6o9wg43/