I know there are a lot of topics about image header; but I checked most of them, and they couldn't help me.
This is my problem: I have an image that I want to use as header. I finally found the way to place it, but then it shows with its original size. I tried max-width:100%, but the size didn't change and just stays there.
HTML:
<body>
<header id="niberus">
<img src="nib1.jpg" alt="nib1" width="1900px" height="450px"></img>
</header>
And for my CSS, I have this:
header#niberus
{
width: 100%;
}
I tried to remove the width and the height from my HTML file, but then the image stays at normal size. When I add the width and height like now, it fills the screen; but of course, when you make the window smaller, the picture doesn't change.
Here is my full HTML code:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
<title>Niberus-gaming</title>
</head>
<body>
<header id="niberus">
<img src="nib1.jpg" alt="nib1" width="1900px" height="450px"></img>
</header>
<div class="hbuttons">
<ul>
<li>-Home-</li>
<li>-News-</li>
<li>-Forum-</li>
<li>-Upcoming projects-</li>
<li>-About me-</li>
<li>-Contact-</li>
</ul>
</div>
<hr>
<table border="1" cellpadding="5px" cellspacing="10px">
<tr>
<td width="300px"><h1>Under construction</h1></td>
<td width="1300px" ><h1>Under construction</h1></td>
<td width="300px"><h1>Under construction</h1></td>
</tr>
</table>
</body>
</html>
And here is my full css code:
ul.horizontal li{
display:block;
float:left;
padding:0 10px;
width: 150px;
}
header#niberus
{
width: 100%;
}
body
{
background-color:black;
}
h1
{
color: white;
}
table
{
color: white;
text-align: left
}
.hbuttons{
float: left;
width: 100%;
background-color: #00FF00;
overflow:hidden;
position:relative;
}
.hbuttons ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
.hbuttons ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
.hbuttons ul li a {
display:block;
margin:0 0 0 1px;
padding:10px 10px;
font: 30px Impact;
color: white;
text-decoration:none;
line-height:15px
}
Currently you are targeting the header tag, you need to target the image itself. Remove the width and height attribute from the html. You can also set a max-width for the img tag if you need to
Target the image
header#niberus {
display: block;
}
header#niberus img {
width: 100%;
max-width: xxxx;
}
Related
I have a simple unordered list beside beside two other divs, all 3 contained within a parent container. Here's how it looks like: https://jsfiddle.net/f0bz4hc0/1/. If you zoom in, you can see that all 3 have borders around them, but the borders around the list items and the anchors extend beyond the container's bottom border while the two other divs are snug. Why does this happen and how can I fix it so that everything is within the container?
<!doctype html>
<html>
<head>
<title>practice</title>
<meta charset='utf-8' />
<style type='text/css'>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.page{
width:960px;
height:300px;
margin:0 auto;
border:1px solid red;
}
.row{
width:100%;
}
.header{
background-color:black;
height:40px;
}
.logo{
background-color:orange;
height:100%;
width:40px;
float:left;
display: inline-block;
}
.home{
display: inline-block;
height:40px;
width:40px;
float:left;
border:1px solid cyan;
}
.home img{
width:100%;
height:100%;
}
ul{
float:left;
height:100%;
}
ul li{
display: inline-block;
border:1px solid teal;
}
a{
display: inline-block;
color:white;
height:40px;
line-height: 40px;
border:1px solid orange;
}
</style>
</head>
<body>
<div class='page'>
<div class='header row'>
<div class='logo'></div>
<div class='home'><img src='house.png' /></div>
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</div>
</div>
</body>
</html>
If you remove the set height on .header and make it inline-block, you'll see that the borders of on your anchors remain contained in their parent.
.header {
/*height: 40px;*/
background-color:black;
display: inline-block;
}
https://jsfiddle.net/q5mxbywp/
I'm wondering if anyone can help me to sort out why my navigation menu appears to be in my main div, when it's not coded that way. I'm guessing the CSS is the problem. Lots of code I'm afraid, but I don't know where the problem is, so I can't isolate it....
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><p><img src="images/logo.png" alt="logo" /></p></div><!--header-->
<div id="navbar">
<div id="holder">
<ul>
<li>Home</li>
<li>My Approach</li>
<li>Testimonials</li>
<li>Fees</li>
<li>Contact</li>
</ul>
</div><!--holder(navbar)-->
</div><!--navbar-->
<div id="main">main</div><!--main-->
</div><!--container-->
<body>
</html>
CSS:
body {
background-image: url(images/colorful7.jpg);
}
#container {
width: 960px;
float: none;
margin: auto;
height: auto;
}
#header {
height: 350px;
width: 940px;
padding: 10px;
}
#navbar {
background: none;
height:40px;/*40*/
width:960px;
float:right;
}
#navbar #holder {
height:40px;
width:725px;/*725*/
float: right;
}
#navbar #holder ul {
list-style:none;
margin:0;
padding:0;
}
#navbar #holder ul li a {
text-decoration:none;
float:left;
line-height:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:600;
color:#660033;
border-bottom:none;
padding:10px;
width:120px;
text-align:center;
display:block;
background:#FFC;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
margin-left: 5px;
}
#navbar #holder ul li a:hover {
background:#660033;
color:#FFC;
}
#holder ul li a#onlink {
background:#660033;
color:#FFC;
}
#holder ul li a#onlink:hover {
background:#660033;
color:#white;
text-shadow:1px 1px 1px #000;
}
#main{
background-color: #FFC;
height: 400px;
width: 960px;
padding: 10;
}
Here's a live jsFiddle
Add
clear: both;
to the #main-Rule to clear the floating after the nav bar. Fiddle: http://jsfiddle.net/GGSk2/2/
If you think that the problem lies in the CSS, try to deactivate the css and see what happens. You can track down the faulty bit by adding back the css piece after piece.
I usually use Firefox with Firebug to help me find out such problems. It allows you to deactivate or modify CSS and HTML on the fly. IE and safari allows it as well I reckon.
delete float:right; from #navbar
#navbar {
background: none;
height:40px;/*40*/
width:960px;
}
http://jsfiddle.net/G26TD/10/
I have made changes to CSS & its working
Working fiddle: http://jsfiddle.net/G26TD/11/
Don't use ID inside a id to style its will slow down CSS
Here is a post how to write css efficiently: https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS
I'm trying to learn CSS/HTML at the moment so sorry if there is a really obvious solution to this. I'm just using this to practice what I've learnt at the moment, but it keeps going wrong.
After literally hours of messing around with my code, I've finally got my navigation bar to align to the right, without messing everything else up. However it now won't sit in my "header" div. My basic structure is a header div, and within that a div for the logo (aligned to the left), and a div for the navigation menu (aligned to the right).
However after finally getting them aligned correctly, I can't seem to get my menu div in the right place. Here is a picture illustrating what I mean:
http://i.stack.imgur.com/ot5ls.png
I have temporarily changed the colour of my "header" div to black, to better illustrate my problem. As you can see, my menu is underneath the header div, and also slightly to the right?
Here is my HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>T5</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="home_p">
<div id="header">
<div id="logo">
</div>
<div id="menu">
<ul id="nav">
<li id="home"></li>
<li id="about"></li>
<li id="portfolio"></li>
<li id="contact"></li>
</ul>
</div>
</div>
</body>
</html>
And here is my CSS:
body
/* T5 */
{background-color:#fff8d3; font-size:100%;}
body#home_p #home{background:url('home.gif') 0 -45px;}
body#about_p #about{background:url('about.gif') 0 -45px;}
body#portfolio_p #about{background:url('portfolio.gif') 0 -45px;}
body#contact_p #about{background:url('contact.gif') 0 -45px;}
#header {
background-color:#000000;
height:45px;
width:1200px;
margin-left:auto;
margin-right:auto;
margin-top:90px;
}
#logo {
background-image('logo.gif');
height:45px;
width:181px;
}
#menu {
width:328px;
float:right;
}
#nav
{position:absolute;}
#nav ul{
display: inline;
}
#nav li{
height:45px;
margin:0px;
padding:0px;
list-style:none;
position:absolute;
right:0px;
top:0px;
display:inline;
float:right;
}
#nav a
{height:45px;
display:block;
}
#home{left:0x; width:62px;}
#home{background:url('home.gif') 0 0;}
#home a:hover{background: url('home.gif') 0 -45px;}
#about{left:62px;width:65px;}
#about{background:url('about.gif') 0 0;}
#about a:hover{background: url('about.gif') 0 -45px;}
#portfolio{left:147px;width:98px;}
#portfolio{background:url('portfolio.gif') 0 0;}
#portfolio a:hover{background: url('portfolio.gif') 0 -45px;}
#contact{left:265px;width:83px;}
#contact{background:url('contact.gif') 0 0;}
#contact a:hover{background: url('contact.gif') 0 -45px;}
I would really appreciate any help. Thanks in advance.
CSS:
body
{
background-color: #fff8d3;
min-width: 600px;
}
body#home_p #home, body#about_p #about, body#portfolio_p #about, body#contact_p #about
{
background-position: 0 -45px !important;
}
#header
{
background-color: black;
height: 45px;
width: 90%;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 90px;
}
#logo
{
background-image: url('logo.gif');
background-color: #fff8d3;
height: 45px;
width: 181px;
}
#nav
{
position: relative;
float: right;
padding: 0;
margin: 0;
}
#nav li
{
height: 45px;
margin: 0 -2px;
padding: 0;
list-style: none;
position: relative;
display: inline-block;
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
}
#nav li:hover
{
background-position: 0 -45px;
}
#nav a
{
height: 100%;
width: 100%;
position: abosolute;
display: block;
}
#home
{
width: 62px;
background-image: url('home.gif');
}
#about
{
width: 65px;
background-image: url('about.gif');
}
#portfolio
{
width: 98px;
background-image: url('portfolio.gif');
}
#contact
{
width: 83px;
background-image: url('contact.gif');
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>T5</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="home_p">
<div id="header">
<!-- The floating elements have to go before the main content, or they will appear below. -->
<ul id="nav">
<li id="home" title="Home"></li>
<li id="about" title="About"></li>
<li id="portfolio" title="Portfolio"></li>
<li id="contact" title="Contact"></li>
</ul>
<div id="logo"></div>
</div>
</body>
</html>
By setting position:absolute on #nav but not giving it coordinates (left/top), it falls somewhere else. Add a border to it and you'll see. But let's put that aside:
You don't need the absolute position on the menu items. Set each to float:left with a margin
Set position:relative on #header, then anchor #nav to the top right with position:absolute
Since every link shares the same hover state, declare a:hover only once changing the background-position
Use an accessible image replacement method, keep the actual text in your HTML
Here's a scaffold for you to build on: http://jsfiddle.net/Pz3Q3/
I strongly recommend you to read this: http://na.isobar.com/standards/
The width you are setting on your #menu is causing havoc throughout your CSS. Your "#nav ul" isn't doing anything. But ultimately the problem is that your #logo needs to have a float: left;
All the absolute positioning is unnecessary. Use this:
#logo {
background-image('logo.gif');
height:45px;
width:181px;
float: left;
}
#menu {
float: right;
}
#nav li{
list-style:none;
display: inline;
}
Having a headache with IE. I have an image (24x24) which I'd like to display inline beside my username at the top navigation bar after logging in. It shows nicely in firefox, chrome. problem with IE version 7. The img breaks to another line, and other sibling items in the float back left.
CSS below:
#nav {
background:url("../images/nav-bg.jpg") repeat-x scroll 0 0 #FFFFFF;
height:35px;
line-height:35px;
}
#nav .menuitem{
padding: 0 7px;
cursor: pointer;
font-size: 11px;
float:left;
}
#nav .menuitem, #nav .menuitem a {
color:#CCCCCC;
}
#nav .menuitem:hover {
background-color:#333333;
}
#nav .menuitem img {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #111;
float: right;
margin-top: 4px;
margin-left: 7px;
height:24px;
width:24px;
}
#nav .right {
float:right;
}
I have tried many variations but can't seem to fix the problem. I have also tried variations of the css below, but the image still doesn't show nicely inline.
#nav .menuitem img {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #111;
float: right;
margin-top: 4px;
margin-left: 7px;
height:24px;
width:24px;
display:inline;
position:relative;
top: 0px;
line-height: 35px;
}
The HTML code as follows
<span class="menuitem right">Welcome, <a id="profile" href="http://localhost/usercp">user<img src="avatar24x24.jpg"></a></span>
I altered the css and html source. I only have IE6 to work with, but it looks consistent in Chrome and IE6. Try this:
http://work.arounds.org/sandbox/38/run
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css" media="screen">
* { margin:0; padding:0; }
#nav {
background:url("../images/nav-bg.jpg") repeat-x scroll 0 0 #FFFFFF;
height:35px;
line-height:35px;
}
#nav .menuitem{
padding: 0 7px;
cursor: pointer;
font-size: 11px;
float:left;
}
#nav .menuitem, #nav .menuitem a {
color:#CCCCCC;
}
#nav .menuitem:hover {
background-color:#333333;
}
#nav .menuitem img {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #111;
display:inline-block;
margin-top: 4px;
margin-left: 7px;
height:24px;
width:24px;
}
#nav a { display:inline-block; vertical-align:top; }
.lol { display:inline-block; }
#nav .right {
float:right;
}
</style>
<!--[if lt IE 8]>
<style>
#nav .menuitem a { display:inline; zoom:1; }
#nav .menuitem img { display:inline; zoom:1; border:1px solid red; vertical-align:top; }
</style>
<![endif]-->
</head>
<body>
<div id="nav">
<div class="right menuitem">
<span class="lol">Welcome,</span> <a id="profile" href="http://localhost/usercp">user</a> <a id="profile-img" href="http://localhost/usercp"><img src="http://cdn1.sbnation.com/profile_images/273745/battle_scars_fedor_emelianenko_by_wildestdreamz_small.jpg"></a>
</div>
</div>
</body>
</html>
This snippet suffered from the float:right width calculation bug and I had to use inline-block workaround to get it to work right.
Use a background image instead, like this:
<a style="background-image: url(avatar24x24.jpg);
background-repeat: no-repeat;
background-position: right center; padding-right: 30px;"
id="profile" href="http://localhost/usercp">user</a>
Should position it pretty well, tested it in Opera, IE8 compatability mode and Firefox. To display the entire image, tune the height of the elements around it.
You can use background-position to move the image around inside the surrounding element, there's more information on this at w3schools.com.
Alternatively, you can use margin to get more spacing (margin will create spacing that includes the background image).
My menubar show on my banner... It stacks.
Can you tell me how to put menubar below the banner?
<body>
<style type="text/css">
* { margin:0 auto;
padding:0;
}
html { background:#ffffff; }
body{
width:1600px;
height:800px;
overflow:auto;
background:#ffffff;
}
div#menu {
margin:40px 0 0 95px;
text-align:center;
position:absolute;
}
div#menu span {
font-size:22px;
padding-left:14px;
}
</style>
<?php
//include('menu.php');
include('menu_inc.htm');
?>
<img src="bannersketch.png" border="0">
</body>
Well the reason it is stacking is you have position:absolute;. Try putting the <img> tag above the php include and remove the absolute positioning and see if that helps.