I've got an image of a house I want to display on my navbar as the 'home' link. I've entered some CSS to implement this but it doesn't seem to work. Could anyone help me display the image? See the image and CSS code below for clarification.
The light blue box is where the little white house should be. See below for CSS
html, body
{
padding: 0;
margin-right: auto;
margin-left: auto;
}
.navbar
{
height: 48px;
width: 100%;
background-color: #294052;
text-align: center;
vertical-align: middle;
margin-bottom: 10px;
}
li
{
display: inline;
position: relative;
padding: 20px;
border-right: inset 2px white;
font-size: 20px;
font-weight: normal;
font-family: sans-serif;
vertical-align: middle;
padding-top: 31px;
padding-bottom: 14px;
}
a
{
text-decoration: none;
color: white;
}
li:hover
{
text-decoration: underline;
background-color: #447294;
}
li.home
{
background-color: #447294;
background-image: url('home.png');
}
span
{
font-weight: bold;
}
I've tried using the display:block fix but it just messes up the rest of my navbar.
And the HTML code...
<div class="navbar">
<ul>
<li class="home"></li>
<li>ABOUT</li>
<li>CyMAL: MUSEUMS, ARCHIVES AND LIBRARIES</li>
<li>CONTACT</li>
</ul>
</div>
To start debugging, I'd first try to use absolute URL to make sure that the image can be loaded.
li.home
{
background-color: #447294;
background-image: url('full_path_to_image/home.png');
}
Also, please provide HTML code, ideally make a ready demo at http://jsfiddle.net/ (or any other similar service). That way you'll we can help you better.
EDIT: After you have added the HTML code, the problem seems to be indeed the path to your image.
Here is a working demo: http://jsfiddle.net/tBNSU/
Your background image is present in li.home; but li.home isn't wide enough to display anything. Background images are like background color - they won't change the shape of the content.
Try adding some content:
<li class="home">home</li>
Or change the alignment of your bg image to center center to perhaps see it more clearly.
Related
Navbar component-
body {
margin-top: 0;
padding: 0;
font-size: 18px;
}
.container {
width: 95%;
margin: 0 auto;
}
header {
margin-top: 0;
background: blue;
padding: 1em;
}
a {
color: white;
text-decoration: none;
}
a.logo {
font-weight: bold;
}
nav {
float: right;
}
ul {
list-style-type: none;
margin: 0;
display: flex;
}
li:hover {
filter: brightness(50%);
}
li a {
padding: 1em;
}
<header class="head">
<div class="container">
Home
<nav>
<ul>
<li> hello</li>
<li> whatsup</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<router-outlet></router-outlet>
</div>
I am using chrome I notice a thin white strip of space at the top and the left and the right of the header component containing the navbar. How can i remove this such that the white space is replaced by navbar color ie. blue.
I am new at css, and Would be good if an explanantion of the cause could be provided.
Thanks
body {
display: block;
margin: 8px;
margin-top: 8px;
margin-right: 8px;
margin-bottom: 8px;
margin-left: 8px;
}
Added the css that displays on the inspect element for further clarity
I changed the margin-top:0 with the margin:0 for the body.
I hope it would work.
body {
margin: 0;
padding:0;
font-size: 18px;
}
Styling inline for body was one workaround that worked incase the browser doesnt recognize body css(assuming there wasnt any errors in the css ofcourse) and applies default styling.
From the update in your question where you show us the CSS being applied, as seen in the element inspector, we can see that your CSS is not being picked up by the browser at all.
Its difficult to tell why, but here are a few things that can help you fix it:
If it is in an external CSS file, check that the file is being included
Check for typos in the CSS for the body
Check for typos or misplaced } in any CSS before the body CSS - an error in preceding CSS could prevent the rest of the CSS in that file from being applied
Try adding that CSS directly into the HTML in a style tag to see if it works there... if so:
Try deleting the CSS and retyping it manually - Very occasionally I've seen issues where code copied from the internet or elsewhere can have hidden characters that cause problems.
so I'm creating a gallery of images with captions and I'm confused as before I've never had it happen but now when I set the background color of the p element it sets the background behind the element too. I've tried several things so far such as setting the background color of the image to none and other things, but nothing has worked, any help would be greatly appreciated! Here is my code snippet, I will gladly update any more information needed.
HTML
<div id="wrapper">
<ul id="products">
<li><a href="ambco.html"><img src="img/650a.jpg" alt=""><p>Hello I am Jacob
and I'm confused as hell and this doesn't make sense...</p></a></li>
<li><p>Hello I am Jacob and I'm confused as hell and this doesn't
make sense...</p></li>
<li><p>Hello I am Jacob and I'm confused as hell and this doesn't
make sense...</p></li>
</ul>
</div>
CSS
#products {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#products li {
width: 95%;
margin: 2.5%;
float: left;
}
#products img {
margin-bottom: 15px;
}
#products p {
background-color: black;
color: brown;
}
#products a {
text-decoration: none;
}
Because you have float: left; for the <li> everything after the <li> is collapsing - try switching for display: inline-block; on the <li> elements, this might work.
I'm trying to enlarge a smaller picture. I have a small and a large version of the pictures. I've searched on the internet, the one i'm using is the best i've found.
I know this would be much easier with 'Lightbox2' or other javascript things, but the purpose is to only use html & css.
Here you can find the link (dropbox, .zip file) to the website' folder --> https://dl.dropboxusercontent.com/u/61634717/Website.zip
It would be nice if someone could find the problem why my smaller pictures aren't enlarged when hovering over. The website is only showing the small pictures when hovering over them.
Here is the html code (for one picture):
<div class="ienlarger"><a href="#nogo"><img src="Pictures/Artists/PeopleTalkTechnoSmall.png" alt="thumb" class="resize_thumb" /><span>
<img src="Pictures/Artists/PeopleTalkTechno-Large.png" alt="large" /><br />Some text can go here.</span></a>
</div>
Here is the css code:
.ienlarger {
float: left;
clear: none;
padding-bottom: 5px;
padding-right: 5px;
}
.ienlarger a {
display:block;
text-decoration: none;
cursor:default;
}
.ienlarger a:hover{
position:relative;
}
.ienlarger span img {
border: 0px solid #FFFFFF;
margin-bottom: 8px;
}
.ienlarger a span {
position: absolute;
display:none;
color: #FFCC00;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #2E2E2E;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img {
border-width: 0;
}
.ienlarger a:hover span {
display:inline-table;
top: 50px;
left: 90px;
z-index: 100;
}
.resize_thumb {
width: 170px;
height : auto;
}
NOTE: Do not pay attention to the background colors :D. I know they are weird, but it is just for me to see the different < div > (they will be changed when the website is closer to being completed).
Alright, I downloaded your code and messed around with it.
Removing max-width: 100%; from the img CSS seems to have fixed it (line 25). In the future, please post the code along with your question, or if there are a lot of parts to it, a JSFiddle is also acceptable.
Thanks.
In your css you have all images set to a max-width of 100% probably to make it responsive, which is good. But that is also your problem. The images can only be 100% of their container and no bigger. If you remove img {max-width: 100%} from your css that fixes your issue.
But is also makes it not repsonsive. :-(
So your solution is to add a class="larger" to the bigger image and add another line to your css. You would end up with something like this:
img {
max-width:100%;
height:auto;
}
img.larger {
max-width: 500px; /* the maximum size you would allow for larger images */
}
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;
}
This is what the weird view looks like, in Chrome on OS X on first load:
That blue bar running right across the screen is actually the navigation bar that should be at the top of the screen. See below.
This is what the original view looks like, and this is what it reverts to - once I scroll down (so that portion of the screen disappears) and scroll back up:
Edit1: I don't even know what code to post, if any because it is kinda random. If you ask some questions though, maybe something might jump out and I will know what code to either post or look at.
Thanks.
Edit2: Here is the code for the div#navigation:
<div id="navigation">
<div id="quota-info">
Plan: Chameleon<br />
# of Projects: 2 / 20<br />
# of Clients: 2 / 15<br />
Storage: 10.8 MB / 10.0GB <br />
</div>
<div id="user-info">
<span class="username">Hi Test</span><br />
Name: Test User<br />
Email: test#abc.com<br />
Last Logged In: about 2 hours ago<br />
</div>
<ul>
<li><img src="logo.png" /></li>
<li id="dashboard">Dashboard</li>
<li id="settings">Settings</li>
<li id="logout">Logout</li>
</ul>
</div>
Here is the CSS:
#navigation {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
background: #2d343f;
background-image: url('../images/nav-textured-bg.png');
background-repeat: repeat;
padding: 5px 5px;
margin: 0px auto;
position: relative;
height: 75px;
}
#navigation a {
text-decoration: none;
padding: 10px 15px;
display: inline;
height: 35px;
line-height: 35px;
color: #c6c8cb;
}
#navigation ul {
width: 100%;
margin: 0 auto;
text-align: center;
}
#navigation li {
width: 100%;
display: inline;
list-style-type: none;
}
#navigation li img {
position: relative;
top: 15px;
}
Edit 3:
Here is another screenshot of how it looks when I scroll up. The top navigational bar is still there. This blue thing is not even the menu, it's like a screenshot of it. When I hover over the menu links, they don't work.
You have to create a reduction. Start with a copy of the actual page and then remove stuff not related to the problem, one by one, until it disappears. Then you'll see what's causing it, whether it's a browser bug and what you can do to fix it.
PS: If it's a browser bug, don't neglect to report it. It's a web developer's responsibility.
I would start by cleaning up some of your CSS.
#navigation {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
background: #2d343f;
background-image: url('../images/nav-textured-bg.png');
background-repeat: repeat;
padding: 5px 5px;
margin: 0px auto; <--- see below
position: relative;
height: 75px;
}
this should be margin:0 since it's a block element. Block elements take up the entire line, so trying to center it makes no sense.
#navigation a {
text-decoration: none;
padding: 10px 15px;
display: inline; <--- conflict (see below)
height: 35px; <--- conflict (see below)
line-height: 35px;
color: #c6c8cb;
}
Inline elements can't have a width or height applied to them, but some browsers when you try to will automatically convert any inline element to inline-block for you. If that is what you want, you should specify it, otherwise drop the height.
#navigation ul {
width: 100%;
margin: 0 auto; <-- see below
text-align: center;
}
Centering an item with 100% width does not make sense here
#navigation li {
width: 100%; <--- conflict
display: inline; <--- conflict
list-style-type: none;
}
#navigation li img {
position: relative;
top: 15px;
}