I'm trying to place an image behind my navigation bar and I want it fixed on the top right side of the page but I'm having a hard time trying to do so.
Here's what I want the page to look like:
This is my HTML:
<div class="navbarcn">
<div class="navbar">
<img src="bamboo.png">
<nav class="header">
<a class="active" href="javascript:;">HOME</a>
<a class="headl" href="menu.html">MENU</a>
<a class="headl" href="about.html">ABOUT</a>
</nav>
</div>
The CSS:
.navbarcn{
margin:0;
height:120px;
position:fixed;
width:100%;
}
.navbar{
float:right;
text-align:right;
width:100%;
height:200px;
}
.navbar img{
width:250px;
float:right;
}
.navbar a{
padding:10px;
text-decoration: none;
font-size:1.4em;
font-weight: bold;
}
First, you should not use an img for this kind of styling. Use CSS. (Here I have commented out the image).
<div class="navbarcn">
<div class="navbar">
<!-- <img src="bamboo.png"> -->
<nav class="header">
<a class="active" href="javascript:;">HOME</a>
<a class="headl" href="menu.html">MENU</a>
<a class="headl" href="about.html">ABOUT</a>
</nav>
</div>
Next, add some background properties to target your navbar.
.navbarcn{
margin:0;
height:120px;
position:fixed;
width:100%;
}
.navbar{
float:right;
text-align:right;
width:100%;
height:200px;
background-image: url(https://placekitten.com/100/50);
background-repeat: no-repeat;
background-position: top right;
}
/*.navbar img{
width:250px;
float:right;}
*/
.navbar a{
padding:10px;
text-decoration: none;
font-size:1.4em;
font-weight: bold;
}
Fiddle: https://jsfiddle.net/Lf4exsv7/
Using IMG vs CSS background-image: When to use IMG vs. CSS background-image?
Give .navbarcn background image
.navbarcn{
margin:0;
height:120px;
position:fixed;
width:100%;
background-image:url('bamboo.png');
}
.navnarcn's parent must explicitely have the css property position defined.
There are two solutions
Best way
.navbarcn{
background: url('path to your image')
}
Alternative way
.navbar img{
height: 35px
}
.navbarcn{
margin-top: -35px
}
using background would be a better solution but this is also fine
use absolute position for the image
.navbar{
position:relative;
}
img{
position: absolute;
top:5px;
right:5px;
display block;
z-index:-1;
}
Related
Hi guys I'm starting to build my first site in html5+css3 beign responsive as a goal but I have a problem trying to add a video after the header. Thing is I need my video fills the total website width. I try with "width:100%" it doesn't works.
It works when I remove "display:flex;" of #body, but I think I will need this property since I'm planning to add flexible boxes inside of #body, and if I want put flexible boxes inside #body I need set it to "display:flex" right? Im new in html5&css3 so please correct me if I'm wrong.
If anybody could help me that would be great. Thanks!
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<div id="logo">
<img src="imagenes/logo.png"/>
</div>
<nav id="menuP">
<ul>
<li>ALL PRODUCTS</li>
<li>SERVICES</li>
<li>ABOUT</li>
<li>SAMPLES</li>
<li>QUOTE</li>
</ul>
</nav>
<nav id="menuS">
<ul>
<li id="account">ACCOUNT</li>
<li id="shop">SHOP</li>
<li id="contact">CONTACT</li>
</ul>
</header>
<section id="body">
<section id="slide">
<video loop id="videoSlide">
<source src="eu4_ost.webm" type="video/webm">
</video>
</section>
</section>
<footer>
</footer>
</body>
</html>
CSS
* {
margin:0px;
padding:0px;
}
header, section, footer, aside, nav, article, hgroup{
display:block;
}
html{
width:100%;
background:white;
height:100%;
font-family:Helvetica;
}
body {
display:flex;
background:gray;
justify-content:center;
max-width:2000px;
flex-direction:column;
}
/* -------------------------------- HEADER ------------------------------------ */
header{
width:100%;
background:#fabe06;
display: flex;
justify-content: center;
height:70px;
}
header nav ul{
list-style:none;
}
/* ----------------------------------- LOGO ------------------------------------- */
#logo{
margin:0px 0px 0px 32px;
width:260px;
display:flex;
align-items:center;
}
#logo img{
width:100%;
}
/* ----------------------------- MENU PRINCIPAL ---------------------------------- */
#menuP{
display:flex;
font-family:Patua One;
font-size:17px;
flex:2;
margin:0 50px;
justify-content:center;
align-items:center
}
#menuP ul li{
display:inline-block;
margin:0 15px;
}
#menuP ul li a{
text-decoration:none;
color:black;
}
/* ----------------------------- MENU SECUNDARIO ---------------------------------- */
#menuS{
flex:1;
display:flex;
justify-content:flex-end;
}
#menuS ul{
display:flex;
}
#menuS ul li a{
height:70px;
width:70px;
display:inline-block;
border-left:solid 1px;
border-color:#eab309;
text-indent:-99999px;
/*background:yellow;*/
}
#menuS ul li a{
}
header nav ul li#account a{
background-image:url(imagenes/account.png);
background-repeat:no-repeat;
background-size:contain;
background-position:center;
background-size:20%;
}
header nav ul li#shop a{
background-image:url(imagenes/shop.png);
background-repeat:no-repeat;
background-size:contain;
background-position:center;
background-size:25%;
}
header nav ul li#contact a{
background-image:url(imagenes/contact.png);
background-repeat:no-repeat;
background-size:contain;
background-position:center;
background-size:25%;
}
/*---------------------------- BODY -------------------------*/
#body {
width:100%;
background:yellow;
display:flex;
flex-grow:1;
}
#videoSlide{
width:100%;
}
Alright, so pretty simple, the thing is that even though the video has the width: 100% property, its parent does not. The percentage unit is used based on the parent's width or height, so if the parent is not full page width it won't work.
Just add this to your style.css:
#slide
{
width: 100%;
}
Also, just noticed you never closed the <nav> element .menuS so I'd do that if I were you to avoid further trouble.
Good luck.
Use two divs in the body and remove flex from body.
First div is video
Second is flex with main content
This question have been asked a lot on the web. But each try don't suceed
For a Website I need to make a header, I'm using django + boilerplate (I think that's boilerplate should be the cause, as copy paste of my code in js fiddle works, while it doesn't on local).
Here is the HTML I use:
<div id="topbar">
<div id="networking">
<div id="title">
EasyMusik
</div>
<div id="logo">
<img src="{% static "img/icons/myzik.svg" %}" />
</div>
</div>
</div>
And here is the CSS:
#topbar{
display:block;
background-color : #29A329;
position: relative;
float: top;
}
#tobbar div{
height: 100%;
display:inline-block;
}
#networking{
padding-left:25%;
}
#networking div{
display:inline-block;
}
#title{
position: relative;
height:100%;
font-size: 24px;
}
#logo img{
width:100%;
display:block;
float:left;
}
#logo{
position: relative;
height: 100%;
padding-left:15px;
background-color : #FF0000;
}
And I got this result
I want the Red area to fullfill the green one. Wich property should i add/remove to achieve that?
EDIT: Finally managed to get a fiddle:
Fiddle here
This did the worked for me. Though its not your CSS.
CSS:
.parent
{
width:100%;
background-color:Green;
height:50px;
text-align:center;
font-size:24px;
}
.sub
{
width:50px;
background-color:Red;
height:50px;
display: inline-block;
}
.img
{
vertical-align:middle;
padding-top:15px;
}
HTML:
<div class="parent">
Easy Muzik
<div class="sub">
<img alt="" class="img" src="style/img.png" />
</div>
</div>
Give #topbar a height. If you want your child container to be 100% height or width, your parent container has to have a height or width specified. Good luck!
#topbar{
display:block;
background-color : #29A329;
position: relative;
float: top;
height: 200px
}
Please I have an image as a link to another page and I have a menu of 2 text options (using ul&li) When I use only my image, it works, but when I try to put everything together, my image doesn't link, only the menu works. My code run in Chrome and Explorer, I can't see where the problem is. Someone please help me.
Thanks!
Here my html code:
<body>
<div id="container">
<div id="header">
<div id="home">
<img id="flores" src="images/flores.jpg" alt="home" />
</div>
<div id="connexion">
<section id="formulario">
<p id="titulo">Mi cuenta</p>
<form action="" method="get">
...
</form>
</section>
</div>
<div id="contenido">
<div id="contenido_menu">
<ul>
<li>Rosa</li>
<li>Jasmin </li>
</ul>
</div>
</div>
</div>
</div>
</body>
My css code:
#container{
position: relative;
margin:auto;
margin-top:150px;
width:1024px;
height:768px;
background-color: grey;
}
#header{
margin:auto;
margin-top:0px;
width:1024px;
height: 150px;
}
#home{
position:absolute;
width:624px;
height:150px;
}
#flores {
margin-top:0px;
width:100%;
height:100%;
}
#contenido{
position:absolute;
margin: auto;
width:1024px;
height:438px;
background-color: pink;
}
#contenido_menu{
position: absolute;
margin-top:5px;
background-image: url("img/rosas.jpg");
background-size: 100% 100%;
width:619px;
height:95px;
line-height:95px;
float:left;
}
#contenido_menu ul{
margin: 0 auto;
}
#contenido_menu li{
display:inline;
padding-top: 50%;
padding-bottom: 5px;
}
#contenido_menu a:link, #contenido_menu a:visited{
font-family: Arial;
font-size:19px;
font-weight:bold;
color:#1a53ff;
height:40px;
padding:30px 50px;
text-decoration:none;
}
Only thing I can imagin is that some div or the menu is over the picture. Try to check it with an tag inspector from your debugging tools.
Check your code properly.
In the html you have given the location of flores.jpg as "images/flores.jpg".
While for the other image rosas.jpg, in your css you typed the location as "img/rosas.jpg".
Check whether both images are in their respective folders, or you might have typed one of them wrong.
The problem comes from the below declaration. Remove padding-top:50%. I hope by mistake you put % instead px.
#contenido_menu li{
display:inline;
padding-top: 50px;
padding-bottom: 5px;
}
Also remove position:absolute from #home class.
#home{
/*position:absolute;*/
width:624px;
height:150px;
}
DEMO
You positioned the home and the menu div absolute, if I remove absolute it works fine:
http://jsfiddle.net/2m8rmvuh/
Edit: Linked to an old fiddle, now its the correct one ;)
#home{
width:624px;
height:150px;
}
#contenido{
margin: auto;
width:1024px;
height:438px;
background-color: pink;
}
#contenido_menu{
margin-top:5px;
background-image: url("img/rosas.jpg");
background-size: 100% 100%;
width:619px;
height:95px;
line-height:95px;
float:left;
}
I dont know if thats the look you want, but if you give them the attribute absolute, they are overlapping, if you use a large picture.
____________________________________________________________
| logo_icon page_Tittle |
------------------------------------------------------------
I want to make a header of my phonegap app like this one. On the left of the header there should be a logo(img) and on center there should be page tittle(text). Now I have already try this one.
<div data-role="header" >
<div class="logo" > <img src="img/logo.png" /> </div>
<h1 id="tittle">Main Page</h1>
Exit
</div>
and the css its css is:
.logo {
vertical-align: left;
}
.tittle{
text-align: center;
display: inline-block;
vertical-align: middle;
}
Kindly help me how it will be work? I am new in css.
<div data-role="header" class="header" >
<div class="logo" > <img src="img/logo.png" /> </div>
<h1 id="tittle">Main Page</h1>
Exit
</div>
the css:
.header{display:inline-block;
padding:5px 15px;
text-align:center;
width:100%;
}
.logo{float:left;}
.header h1 {font-size:15px;
width:80%;
text-align:center;}
basically, by adding the text align property of the header div as center, and setting the float property of the logo element to left, should solve your problem
check out the js fiddle link :)
http://jsfiddle.net/Q2Hkj/
This should work for you:
.logo {
float:left;
}
.tittle{
text-align: center;
width:75%; margin:0 auto;
vertical-align: middle;
}
I recommend you to do that with max number of % size and position in your css and use a JavaScript function for center the elements depending of the window size.
Anyway I created a fiddle example for you, take a look and some ideas.
HTML:
<div id="top_bar">
<img id="logo_top_bar" src="../img/logo_top_bar.png">
<section id="title">App title</section>
</div>
CSS:
html,body{
position: relative;
padding: 0px;
margin: 0px;
width: 100%;
max-width: 100%;
height: 100%;
max-width: 100%;
overflow:hidden;
}
#top_bar{
position:relative;
float:left;
height: 60px;
width:100%;
left:0;
top:0;
overflow:hidden;
background-color:rgb(46, 42, 42);
}
#logo_top_bar{
position:absolute;
height:30px;
width:70px;
left:4%;
top:15px;
}
#title{
position:absolute;
left:45%;
top:16px;
font-size: 1.5em;
color:white;
}
I've tried numerous of things to fix this. I cannot seem to get the nested div inside the parent div without having to use margin. I'm trying to get it in the regular way which is position:relative on parent and position:absolute on nested. It's not working though, anybody know why?
HTML
<div class="header">
<div class="logo">
<img src="/images/logo.png" width="96" height="82">
</div>
<div id="nav">
Portfolio
About
Contact
</div>
<div id="headerPro">
</div>
</div>
CSS
.header {
position:relative;
background-color: #2C2E31;
border-bottom: #242426 2px solid;
height: 182px;
}
.logo {
text-align: center;
padding-top: 35px;
}
#nav {
position:absolute;
bottom: 0;
width: 100%;
text-align:center;
text-decoration:none;
font-size:20px;
font-family:raleway-regular;
}
#nav a {
border-bottom:#FFFFFF 2px solid;
color:#FFFFFF;
text-decoration:none;
margin-left: 8px;
margin-right:8px;
}
#headerPro {
position:absolute;
float:right;
width:100px;
height:100px;
background-color:red;
}
It's hard to tell what exactly you want it to look like, but maybe I got you right:
I revised your HTML code to use ul for the nav which is best practice:
<div class="header">
<div class="logo">
<img src="/images/logo.png" alt="logo"/>
</div>
<ul id="nav">
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="headerPro">
</div>
</div>
With that your css code could look like that:
.logo > img {
display: inline-block;
width: 96px;
height: 82px;
}
#nav {
position:absolute;
list-style-type: none;
bottom: 0;
width: 100%;
text-align:center;
text-decoration:none;
font-size:20px;
font-family:raleway-regular;
}
#nav > li {
display: inline;
}
#headerPro {
position:absolute;
top: 35px; /* assuming you want this to line up with the logo */
right: 0;
width:100px;
height:100px;
background-color:red;
}
Here is a demo.
See this fiddle
Example
I have made two changes added a float:left to the logo css:
.logo {
float:left;
}
and removed the position:absolute from the header pro css
Your div is flowing outside the header block because of the logo div, if you make that float left (as I have done in the fiddle) the Red Div will move up.
It would help if you could explain exactly where you want the #HeaderPro div..
Apparently the browser positions your div#headerPro just below the previous(sibling) div. If you want it to be part of the parent div, add top:2% to position the red div in the top right corner of the black div.
#headerPro {
position:absolute;
float:right;
width:100px;
height:100px;
background-color:red;
top: 1%;
}