I am currently using some font-awesome to embed some image like resources into my site.
I would like to create a hyperlinked icon that can be clicked to prompt making a call. I currently have the icon floated top right but I am unable to make this usable. I only want the icon to be the hyperlink and do not want any text surrounding this. I want to use the font awesome icon instead of an image so that i can be scaled up if the user zooms in.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DB Plumbing | About</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://use.fontawesome.com/3a2264e344.js"></script>
<script src="html9shiv.js"></script>
<link rel="shortcut icon" type="image/png" href="wrench.png"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="desciption" content = "Darran Brady Plumbing">
<meta name="keywords" content = "Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
<meta name = "author" content ="DB, Darran, Brady, Darran Brady">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav" id="myTopnav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Coverage</li>
<li>Contact</li>
<li class="icon">
☰
</nav>
</div>
</header>
<div class="container">
<div class="dark">
<div class="callus"><i class="fa fa-phone fa-3x" ></i> </div>
<h2>Our Story | Our Family</h2>
</div>
</div>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">Our Journey</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna. Nam eget eros non orci consectetur congue at ac augue. Proin eget arcu in enim feugiat ultricies. Curabitur maximus metus nec metus pretium viverra at et orci. Integer hendrerit ante ut placerat cursus.
</p>
<p class="dark">
Aliquam eget pharetra diam. Nulla placerat lorem at turpis tempor, vel ultrices dui tincidunt. Proin quis egestas lorem. Mauris vehicula lectus odio, sit amet dictum justo feugiat a. Praesent id dictum lacus. Sed ullamcorper id erat ut dictum. Fusce porttitor lorem sapien, in aliquet sapien convallis et. Donec nec mauris nulla. Curabitur cursus semper odio, et hendrerit ante. Nunc at cursus ante. Maecenas gravida ligula ut efficitur suscipit. Nulla id turpis varius, pretium nunc sed, fermentum sem. Sed lacinia nunc non interdum pellentesque.
</p>
</article>
<aside id="sidebar">
<div class="dark">
<h3>What We Do</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna</p>
</div>
</aside>
</div>
</section>
<footer>
<p>Darren Brady Plumbing Copyright © 2017</p>
</footer>
</body>
</html>
You need to wrap the <i> tag in a hyperlink <a> tag. All of the child elements of the <a> will take you to the hyperlink on click.
<div class="callus"><i class="fa fa-phone fa-3x" ></i></div>
Using Fontawsome to show the icone and using href="tel:911" to creat the phone call see code snippet
.callus {
position:fixed;
right:10px;
top:0px;
width:30px;
height:30px;
cursor:pointer;
}
.callus i {
color:green;
transition:all 1s ease-out
}
.callus:hover i {
transform:scale(1.3);
opacity:0.8;
transition:all 1s ease-out
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav" id="myTopnav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Coverage</li>
<li>Contact</li>
<li class="icon">
☰</li></ul>
</nav>
</div>
</header>
<div class="container">
<div class="dark">
<div class="callus"><i class="fa fa-phone fa-3x" ></i> </div>
<h2>Our Story | Our Family</h2>
</div>
</div>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">Our Journey</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna. Nam eget eros non orci consectetur congue at ac augue. Proin eget arcu in enim feugiat ultricies. Curabitur maximus metus nec metus pretium viverra at et orci. Integer hendrerit ante ut placerat cursus.
</p>
<p class="dark">
Aliquam eget pharetra diam. Nulla placerat lorem at turpis tempor, vel ultrices dui tincidunt. Proin quis egestas lorem. Mauris vehicula lectus odio, sit amet dictum justo feugiat a. Praesent id dictum lacus. Sed ullamcorper id erat ut dictum. Fusce porttitor lorem sapien, in aliquet sapien convallis et. Donec nec mauris nulla. Curabitur cursus semper odio, et hendrerit ante. Nunc at cursus ante. Maecenas gravida ligula ut efficitur suscipit. Nulla id turpis varius, pretium nunc sed, fermentum sem. Sed lacinia nunc non interdum pellentesque.
</p>
</article>
<aside id="sidebar">
<div class="dark">
<h3>What We Do</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna</p>
</div>
</aside>
</div>
</section>
Related
I want to link the project class into the nav item. How can I link the class name into the href?
code of nav item
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
code of projects
<div class="projects">
<h4>--Projects--</h4>
.....
</div>
both of the codes are in the same HTML file.
In order to obtain this behavior, you're going to have to use IDs instead of classes. IDs can only be used once per page. Now from what I understand you want the nav item to jump to a particular part of the page. In this example, you would give your <a href="#projects" to where you want your page to jump. So in this example, once you click the nav item "Projects" you will jump to the div id="projects" portion of the page.
<li class="nav-item">
Projects
</li>
I want to link the project class into the nav item. How can I link the class name into the href?
code of nav item
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
code of projects
<div id="projects">
<h4>--Projects--</h4>
.....
</div>
You can set a tags to scroll to an element using IDs, like <a href="#id-of-target-element">. See example below.
.container {
margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<ul class="nav navbar-nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
</ul>
</nav>
<div class="container">
<h1>This is a filler container</h1>
<p>The purpose of this container is to take up space between the navbar and the element to which you want to scroll. Using an href to scroll to a specific element is called "Anchor Tags." You can google it and read more about it, but it's a pretty easy concept. Just put <code><a href="#element-id">Some Text</a></code>.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, nisl quis tincidunt cursus, lectus velit facilisis erat, a lacinia eros diam quis massa. Donec pellentesque euismod lacus a egestas. Duis non orci purus. Phasellus at felis et nunc sodales placerat vulputate id ex. Nunc consequat varius dolor, nec bibendum ligula fermentum vel. Morbi aliquam eu turpis sit amet molestie. Nulla luctus eu enim a porta. In maximus et nibh sed accumsan.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, nisl quis tincidunt cursus, lectus velit facilisis erat, a lacinia eros diam quis massa. Donec pellentesque euismod lacus a egestas. Duis non orci purus. Phasellus at felis et nunc sodales placerat vulputate id ex. Nunc consequat varius dolor, nec bibendum ligula fermentum vel. Morbi aliquam eu turpis sit amet molestie. Nulla luctus eu enim a porta. In maximus et nibh sed accumsan.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, nisl quis tincidunt cursus, lectus velit facilisis erat, a lacinia eros diam quis massa. Donec pellentesque euismod lacus a egestas. Duis non orci purus. Phasellus at felis et nunc sodales placerat vulputate id ex. Nunc consequat varius dolor, nec bibendum ligula fermentum vel. Morbi aliquam eu turpis sit amet molestie. Nulla luctus eu enim a porta. In maximus et nibh sed accumsan.</p>
</div>
<div class="container" style="border: 1px solid black;">
<div class="projects" id="projects">
<h4>Projects</h4>
<p>This is the container you want to scroll to.</p>
</div>
</div>
<div class="container">
<h1>This is another filler container</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, nisl quis tincidunt cursus, lectus velit facilisis erat, a lacinia eros diam quis massa. Donec pellentesque euismod lacus a egestas. Duis non orci purus. Phasellus at felis et nunc sodales placerat vulputate id ex. Nunc consequat varius dolor, nec bibendum ligula fermentum vel. Morbi aliquam eu turpis sit amet molestie. Nulla luctus eu enim a porta. In maximus et nibh sed accumsan.</p>
</div>
I am HTML programming newbie so I apologies if this question is too elementary.
I want to wrap the contents of an article around the table of contents. Here is my HTML web-page. That is I would like the table of contents to be on the left, and the article itself directly to start to the right of it. If possible, I would like to do this in a separate CSS file.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>How to Win Friends and Influence People</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="content">
<h1 class="title">How to Win Friends and Influence People</h1>
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li>1. Introduction</li>
<li>2. Section 2
<ul>
<li>2.1. Subsection 3</li>
</ul>
</li>
<li>3. Section 4</li>
</ul>
</div>
</div>
<div id="outline-container-sec-1" class="outline-2">
<h2 id="sec-1"><span class="section-number-2">1</span> Introduction</h2>
<div class="outline-text-2" id="text-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis
ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
</p>
<div class="figure">
<p><img src="test-asy.svg" alt="test-asy.svg" width="600" align="right" />
</p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis
ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
</p>
</div>
</body>
</html>
You should try using css Flexbox or css floats.
HTML:
<div class="container">
<div class="table-contents">
<h3>
Table of Contents
</h3>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.</p>
</div>
</div>
CSS:
.container{
display: flex;
}
.table-contents, .content{
padding: 10px;
}
.table-contents{
flex: 1 0 auto;
width: 150px;
}
Here is a fiddle: http://jsfiddle.net/wkszuvLm/1/
Hope this helps.
body tag is already there wrapping around everything, you could use it as well as adding another div inside body to wrap everything else.
There are multiple ways to place elements within a container. Learn about using css display property set to grid or flex. Both come with their own subset of properties.
use link tag to use an external css file.
<link rel="stylesheet" type="text/css" href="css_file_url_here">
You can do it by putting those in two different div and then style them as required.
.divLeft {
width:100px;
display:block;
float: left;
}
.divRight {
width:100px;
display:block;
float: right;
}
You can put the above in css file and call in your <head> tag or you can also use it as below:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>How to Win Friends and Influence People</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.divLeft {
width:100px;
display:block;
float: left;
}
.divRight {
width:100px;
display:block;
float: right;
}
</style>
</head>
<body>
<div id="content">
<div class="divLeft">
<h1 class="title">How to Win Friends and Influence People</h1>
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li>1. Introduction</li>
<li>2. Section 2
<ul>
<li>2.1. Subsection 3</li>
</ul>
</li>
<li>3. Section 4</li>
</ul>
</div>
</div>
</div>
<div class="divRight">
<div id="outline-container-sec-1" class="outline-2">
<h2 id="sec-1"><span class="section-number-2">1</span> Introduction</h2>
<div class="outline-text-2" id="text-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
</p>
<div class="figure">
<p><img src="test-asy.svg" alt="test-asy.svg" width="600" align="right" />
</p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
</p>
</div>
</div>
</body>
</html>
Having trouble with columns. Trying to get an column with an image and a column with text and background next to each other.
Here is the result I would like
Here is what I am getting (fail)
.primary-content,
.main-header,
.main-footer {
text-align: center;
}
.primary-content {
padding-top: 25px;
padding-bottom: 95px;
}
<div class="primary-content">
<p class="intro">
Austin, Texas is not only the capital.<br>It's a hub for awesome live music, out of this world art, a booming tech scene as well as a favorite foodie destination.
</p>
<div id="container2">
<div id="container1">
<div id="About">
<h2>About</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ante pellentesque, ullamcorper sapien vel, sagittis tellus. Aenean vulputate nisl eu eros blandit euismod. Sed sagittis id nunc laoreet eleifend. Integer aliquet massa vitae auctor rhoncus. Etiam vel diam euismod elit varius faucibus. Aenean sit amet orci fringilla, egestas eros ornare, dignissim magna. Duis commodo felis sit amet lacus congue fermentum. Pellentesque tincidunt semper nibh vel posuere. Integer tempus leo ut diam scelerisque fermentum in id tortor. Vestibulum et condimentum arcu. Morbi vitae sem nec lectus egestas tristique. Cras hendrerit maximus purus eu tempus. Suspendisse nec nisi ipsum.
</p>
<!-- Column one end -->
</div>
<div id="Capitalbuilding">
<!-- Column two start -->
<img src="https://image.ibb.co/e90Vhw/419796506_db7f02aedd_b.jpg" alt="picture of the Capital Building">
<!-- Column two end -->
</div>
</div>
</div>
</div><!-- End .primary-content -->
You could use flexbox here to get started.
Add...
#container1 {
display: flex;
}
Guide to flexbox here.
fiddle
.primary-content,
.main-header,
.main-footer {
text-align: center;
}
.primary-content {
padding-top: 25px;
padding-bottom: 95px;
}
#container1 {
display: flex;
}
<div class="primary-content">
<p class="intro">
Austin, Texas is not only the capital.
<br>It's a hub for awesome live music, out of this world art, a booming tech scene as well as a favorite foodie destination.
</p>
<div id="container2">
<div id="container1">
<div id="About">
<h2>About</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ante pellentesque, ullamcorper sapien vel, sagittis tellus. Aenean vulputate nisl eu eros blandit euismod. Sed sagittis id nunc laoreet eleifend. Integer aliquet massa vitae auctor rhoncus.
Etiam vel diam euismod elit varius faucibus. Aenean sit amet orci fringilla, egestas eros ornare, dignissim magna. Duis commodo felis sit amet lacus congue fermentum. Pellentesque tincidunt semper nibh vel posuere. Integer tempus leo ut diam
scelerisque fermentum in id tortor. Vestibulum et condimentum arcu. Morbi vitae sem nec lectus egestas tristique. Cras hendrerit maximus purus eu tempus. Suspendisse nec nisi ipsum. .
</p>
<!-- Column one end -->
</div>
<div id="Capitalbuilding">
<!-- Column two start -->
<img src="https://image.ibb.co/e90Vhw/419796506_db7f02aedd_b.jpg" alt="picture of the Capital Building">
<!-- Column two end -->
</div>
</div>
</div>
</div>
<!-- End .primary-content -->
If you don't want to use any framework(like bootstrap) just add float to your container and add overflow:hidden to the parent container.
<div class="wrapper">
<div class="col-1">Your content here</div>
<div class="col-2">Your content here</div>
</div>
.wrapper {
overflow:hidden;
}
.col-1, .col-2 {
float:left;
width: 50%;
}
Here you go. Tested and works perfect:
<div class="primary-content">
<p class="intro">
Austin, Texas is not only the capital.<br>It's a hub for
awesome live music, out of this world art, a booming tech
scene as well as a favorite foodie destination.
</p>
<div id="container2">
<div style="display: flex" id="container1">
<div style="flex: 1" id="About">
<h2>About</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
id ante pellentesque, ullamcorper sapien vel, sagittis tellus.
Aenean vulputate nisl eu eros blandit euismod. Sed sagittis id
nunc laoreet eleifend. Integer aliquet massa vitae auctor
rhoncus. Etiam vel diam euismod elit varius faucibus. Aenean
sit amet orci fringilla, egestas eros ornare, dignissim magna.
Duis commodo felis sit amet lacus congue fermentum.
Pellentesque tincidunt semper nibh vel posuere. Integer tempus
leo ut diam scelerisque fermentum in id tortor. Vestibulum et
condimentum arcu. Morbi vitae sem nec lectus egestas
tristique. Cras hendrerit maximus purus eu tempus. Suspendisse
nec nisi ipsum. .
</p>
<!-- Column one end -->
</div>
<div style="flex: 1" id="Capitalbuilding">
<!-- Column two start -->
<img src="https://image.ibb.co/e90Vhw/419796506_db7f02aedd_b.jpg" alt="picture of the Capital Building">
<!-- Column two end -->
</div>
</div>
Flexbox is a good solution to this. Just set the container1 to display: flex
.primary-content,
.main-header,
.main-footer {
text-align: center;
}
.primary-content {
padding-top: 25px;
padding-bottom: 95px;
}
#container1 {
display: flex;
background-color: #E9CCA9;
}
#Capitalbuilding {
background-color: #4e4e4e;
width: 40%;
}
<div class="primary-content">
<p class="intro">
Austin, Texas is not only the capital.<br>It's a hub for awesome live music, out of this world art, a booming tech scene as well as a favorite foodie destination.
</p>
<div id="container2">
<div id="container1">
<div id="About">
<h2>About</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ante pellentesque, ullamcorper sapien vel, sagittis tellus. Aenean vulputate nisl eu eros blandit euismod. Sed sagittis id nunc laoreet eleifend. Integer aliquet massa vitae auctor rhoncus. Etiam vel diam euismod elit varius faucibus. Aenean sit amet orci fringilla, egestas eros ornare, dignissim magna. Duis commodo felis sit amet lacus congue fermentum. Pellentesque tincidunt semper nibh vel posuere. Integer tempus leo ut diam scelerisque fermentum in id tortor. Vestibulum et condimentum arcu. Morbi vitae sem nec lectus egestas tristique. Cras hendrerit maximus purus eu tempus. Suspendisse nec nisi ipsum. .
</p>
<!-- Column one end -->
</div>
<div id="Capitalbuilding">
<!-- Column two start -->
<img src="https://image.ibb.co/e90Vhw/419796506_db7f02aedd_b.jpg" alt="picture of the Capital Building">
<!-- Column two end -->
</div>
</div>
</div>
</div><!-- End .primary-content -->
Hi I am trying to show my background image for the div called #container but it is not working why?
When I try to set the background color it works perfectly... I have tried to use
'/pics/coffey.jpg'
pics/coffey.jpg
"/pics/coffey.jpg"
"../pics/coffey.jpg"
But the picture is lying like this /css/pics/coffey.jpg
And my style file is in the css folder so it should work with /pics/coffey.jpg but it doesn't anyone help??
CSS:
#container {
width : 740px;
height:200px;
margin-left : auto;
margin-right : auto;
margin-top : 20px;
line-height: 1.7em;
background-repeat:no-repeat;
background-image: url("/pics/coffey.jpg");
}
#topbar {
height:20px;
width:740px;
float:right;
font-size:10px;
font-family:Verdana;
font-style:italic;
padding:0px;
background:#644C37;
}
HTML
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Lorem Ipsum</title>
<link rel="stylesheet" href="css/basic.css" />
</head>
<body>
<div id="container">
<div id="topbar">
"Quisque sit amet justo"
</div>
<div id="menu">
Skip navigation
<ul>
<li class="active">hem</li>
<li>projekt</li>
<li>information</li>
<li>kontakt</li>
<li>hitta till oss</li>
</ul>
</div>
<div id="content">
<div id="maincontent">
<h1>Lorem Ipsum</h1>
<img src="pics/info.jpg" alt="Bubblande kaffe" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque tincidunt volutpat nunc. Curabitur id dolor sed massa volutpat mollis. Duis lorem diam, vestibulum pharetra, consequat ac, semper ac, nibh. Integer vel pede ac purus aliquet nonummy. In hendrerit. Praesent posuere, tellus eget nonummy pellentesque, tellus eros bibendum erat, non hendrerit erat eros sed lorem. Sed pretium quam sed lacus. Maecenas turpis tellus, feugiat a, ultrices a, porta ac, nisi. Donec convallis neque. Nam lobortis nibh sit amet metus tincidunt faucibus. Sed nec leo. Aliquam mattis.</p>
</div>
<div id="subcontent">
<h1>Quisque</h1>
<p>Quisque sit amet justo. Maecenas eu nibh ut est tincidunt congue. Vivamus quis diam. Curabitur lobortis pede eu turpis. Nulla adipiscing. Phasellus risus arcu, malesuada eu, molestie et, cursus vel, nisl. Aliquam at est. Nullam nec lacus. Nulla vitae justo. Donec volutpat elit ut orci.</p>
<h2>Read more:</h2>
<ul>
<li>http://www.saadsa.fds</li>
<li>http://www.llsd.seafa/seas</li>
<li>http://consecyt.hg</li>
</ul>
</div>
<div id="bottomcontent">© Linnéuniversitetet, Institutionen för datavetenskap</div>
</div>
</div>
</body>
</html>
/css/pics/coffey.jpg
is the correct path
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="uft-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></head>scipt?
<![endif]-->
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
</head>
<style>
#container{
margin: auto;
width: 800px;
padding-top: 50px;
}
#menu ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
position: fixed;
background-color: blue;
top:0;
left:0;
right:0;
margin:0;
overflow:hidden;
}
#menu a
{
float:left;
text-decoration:none;
color:black;
padding:0.2em 0.6em;
border-right:1px solid white;
}
#menu a:hover {color: blue;}
#menu li a {display:inline;}
</style>
<div id="menu">
<ul>
<li>Home</li><br>
<li>Categories</li><br>
<li>Admin Panel</li><br>
<li>Log Out</li><br>
</ul>
</div>
<h2></h2>
<div id="container">
<body>
<div id="header">
<h1> Welcome To My Own Personal Blog</h1>
</div>
<article>
<hr />
<h4><div id="date">10th<br>Oct</div></h4>
<h2>My Seventh Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=7'> .. Read more</a></p>
<p>Category: Uncatagorised</p>
</article>
<article>
<hr />
<h4><div id="date">2nd<br>Oct</div></h4>
<h2>My Sixth Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=6'> .. Read more</a></p>
<p>Category: Uncatagorised</p>
</article>
<article>
<hr />
<h4><div id="date">01st<br>Oct</div></h4>
<h2>My Fifth Post! </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=5'> .. Read more</a></p>
<p>Category: review</p>
</article>
<article>
<hr />
<h4><div id="date">18th<br>Sept</div></h4>
<h2>My Forth Post!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=4'> .. Read more</a></p>
<p>Category: Uncatagorised</p>
</article>
<article>
<hr />
<h4><div id="date">14th<br>Sept</div></h4>
<h2>My Third Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=3'> .. Read more</a></p>
<p>Category: review</p>
</article>
<article>
<hr />
<h4><div id="date">12th<br>Sept</div></h4>
<h2>My Second Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nulla neque, adipiscing vitae convallis in, varius vitae enim. Vestibulum sollicitudin eu justo id placerat. Donec viverra vestibulum dictum. Suspendisse potenti. Integer quis dolor luctus diam molestie blandit. Proin tristique lacus nec tellus euismod imperdiet. Fusce gravida in augue<a href='post.php?id=2'> .. Read more</a></p>
<p>Category: Uncatagorised</p>
</article>
<a href='index.php?p=2'>Next</a></div>
</body>
</html>
I can't stop the menu from producing a staircase affect. The menu in a separate file works correctly.
Im thinking that something else is triggering it to do this. Thank you for your help. The idea is that the menu will look similar to the Facebook menu and be fixed to the top of the screen.
UPDATE
Fiddle of OP's code
The issue seems to result from erroneous <li style="list-style: none"><br></li> items between each <li>
Updated fiddle