I want to put a navigation under my banner, but when I try to do that it just goes behind my banner (it pretends it isn't there. This is solved by removing position: absolute; but when I do that my banner wont be on top left anymore.
<img class="banner" src="images/banner.png">
<nav class="navigation">
<ul>
<li>Home</li>
<li>Prijzen</li>
<li>Examen</li>
<li>Leerlingen</li>
</ul>
</nav>
css:
.banner
{
width: 100%;
top: 0;
left: 0;
position: absolute;
}
.navigation
{
}
I suggest to use a container for your banner and for your menu like this:
html
<div class="navCont">
<div class="banner">BANNER</div>
<nav class="navigation">
<ul>
<li>Home</li>
<li>Prijzen</li>
<li>Examen</li>
<li>Leerlingen</li>
</ul>
</nav>
</div>
css
.banner
{
width: 100%;
height: 50px;
position: relative;
background: yellow;
float: left;
}
.navigation{
float:left;
}
Also i suggest to use position:relative and float instead of position:absolute.
Take a look to this example:
fiddle
You need to add position: relative to .navigation
Demo
.navigation {
position: relative;
}
Related
I'm very, very new to HTML and CSS, so sorry for my ignorance! I'm trying to add an image to my header, to go to the left and above the navigation. Any help anyone can give would be amazing!!
I have tried two ways of adding the image, the first using , but it did not show (I could see the image 'content' highlighted in blue on the page when i was in the console, but i couldn't see the image. The second way I used a , then the css below:
body {
background-color:#4A4849;
margin: 0 auto;
font-family:Arial, helvetica, sans-serif;
}
.Logo {
display: inline;
float:left;
width: 100%;
height: 100%;
background-image: url('../Images/Logo.png');
}
header {
text-align: center;
width: 100%;
height: 15%;
background-color: white;
margin: 0;
}
My full CSS includes the below...i feel like the problem is to do with the , as in the console the dimensions show as 1304x0 (but I am able to see the navigation) I therefore tried adjusting the header, which is why it duplicates with the .topnav.(see below) :)
.topnav {
font-weight: bold;
background-color: white;
overflow: hidden;
position: fixed;
top: 0;
left 0;
width:100%;
height:15%;
}
.topnav ul {
list-style-type:none;
overflow: hidden;
margin:0;
padding: 0;
}
.topnav li {
display:inline;
padding: 0px;
margin: 0px;
}
.topnav a {
float: right;
color: #4A4849;
text-align: center;
padding: 20px 10px;
text-decoration:none;
width:10%;
}
It would be great if anyone could help, as I've tried different things based on resources i've found online!
*HTML, in case you need it:
<body>
<header>
<div class="Logo"></div>
<nav>
<div class="topnav">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>GRAPHIC DESIGN</li>
<li>MARKET</li>
<li>HOME</li>
</ul>
</div>
</nav>
</header>
There are a few things that can be changed with how you are setting things up:
I would recommend not making your logo the background-image on a div, when an <img> tag will work better in your case (<img src="path/to/your/logo.png">).
If you do use it as a background-image on a div, you have to remember that background images do not affect the height of an element.
Setting a % height on the .Logo div will also not work, since a percentage height needs to be relative to a containing element and you also set it to an inline element (height will not apply). Since, its parent (header) has as height of 15%, but that element also has no reference to 15% - e.g. 15% of what? The body tag would need to have a height set to 100%.
Only for your logo, I would simply do this:
<header>
<img src="your logo link">
<nav>
<div class="topnav">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>GRAPHIC DESIGN</li>
<li>MARKET</li>
<li>HOME</li>
</ul>
</div>
</nav>
</header>
If you absolutely want to make it a background-image:
.Logo {
height: whatever your logo height is;
display: block;
background-image: url( ../Images/logo.png );
background-repeat: no-repeat;
}
<header>
<div class="Logo"></div>
<nav>
<div class="topnav">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>GRAPHIC DESIGN</li>
<li>MARKET</li>
<li>HOME</li>
</ul>
</div>
</nav>
</header>
Kinda new to HTML, want to edit my navigation bar so that it has an image behind it and the nav bar sits at the bottom of the image. How do I do this?
After looking at a few forum posts, this is what I tried:
#cover {
background-image: url("Images\FB Cover.png");
}
<div id="cover">
<div>
<nav>
<li>Home</li>
<li>About DRC</li>
<li>Our Products</li>
<li>Contact</li>
</nav>
</div>
</div>
#cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://lorempixel.com/800/600) no-repeat 50% 50% / cover;
}
menu {
position: absolute;
left: 20px;
bottom: 20px;
}
a {
color: #fff;
}
<div id="cover">
<menu>
<li>Home</li>
<li>About DRC</li>
<li>Our Products</li>
<li>Contact</li>
</menu>
<div>
simple example
to place image as background of DOM element you can use, background-image css property.
For example
background-image: url('https://static.pexels.com/photos/87646/horsehead-nebula-dark-nebula-constellation-orion-87646.jpeg');
W3School has great documentation about css properties.
here is the link
I'm trying to get my menu working with an image on the left side. For some reason whenever I try to align the image in same line with the menu it's not working out. This is what the html looks like, I can't get the CSS working at all. It's either throwing the menu under the image or the background disappears and the content overlaps the menu but the image is in the right place. The image is 50px in height as well so it shouldn't be a problem.
HTML:
<div>
<img src="logo_small2.png" alt="" id="banner">
<nav>
<ul>
<li class="selected">Main page</li>
<li>Classes</li>
<li>Game modes</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS:
header div {
height: 50px;
background: #333333;
}
#banner,
header ul li {
display: inline-block;
}
header nav > ul > li{
box-sizing: border-box;
height: 50px;
padding: 12px;
position: relative;
}
What happens now is that the banner is in place over the background of the div and the menu is under the banner and the background in a new line. If I replace the img with a simple h1 it works as a charm >.> I'm clueless, please help
Your CSS does not match the HTMl, there is no header shown.
Assuming that the div is, in fact the header, the nav needs to be inline-block too I suspect. It's currently block level and so 100% wide.
Then you can just align the elements.
header {
height: 50px;
background: tomato; /* for demo only */
}
header nav {
display: inline-block;
vertical-align: middle;
}
header nav ul {
margin: 0;
padding: 0;
}
#banner,
header ul li {
display: inline-block;
vertical-align: middle;
}
header nav > ul > li {
box-sizing: border-box;
height: 50px;
padding: 12px;
position: relative;
}
<header>
<img src="http://www.fillmurray.com/200/50" alt="" id="banner">
<nav>
<ul>
<li class="selected">Main page
</li>
<li>Classes
</li>
<li>Game modes
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
Possible reason is the width of the image not allowing the inline-block comand:
try this:
img{ float:left; width:50%; vertical-align:middle;}
ul{float:right;width:40%;vertical-align:middle;}
I have a fairly complex layout that I am building, it relies on a is affected by height, and min-height's so the usual tricks to position the footer at the bottom aren't working.
Given my JSFiddle how can I position the footer at the bottom when the content is a lot or minimal?
Here is some of the css I am currently using:
body, html, #wrapper {
height: 100%;
min-height: 100%;
}
.header {
height: 30%;
background-color: aliceblue;
}
.main {
background-color: antiquewhite;
}
.main .content {
height: 2000px;
background-color: aquamarine;
padding-bottom:80px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: beige;
}
If I understand your requirement correctly, you want the footer to sit at the bottom of the content box.
One solution is to make the content box position:relative and move the footer inside it, so that its position:absolute will bind it to the content box, and the bottom:0 will achieve the desired effect of having it sit against the bottom of said content box.
See http://jsfiddle.net/wn6uvske/5/.
HTML:
<div id="wrapper">
<div id="sidebar"></div>
<div id="body-content">
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li>Toggle Menu
</li>
</ul>
</div>
</div>
</div>
<div class="main">
<div class="content container">
<p>Content</p>
<div class="footer"> <!-- moved up into content container -->
<p>Footer</p>
</div>
</div>
</div>
</div>
</div>
(relevant) CSS:
.main .content {
height: 2000px;
background-color: aquamarine;
padding-bottom:80px;
position:relative;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: beige;
}
you can use the sticky footer trick. Wrap all of your content in a wrapper excluding the footer, set min-height:100% and margin: -(footer height) on said wrapper to keep it at the bottom:
FIDDLE
UPDATE
You can take the header section out and use CSS calc() to adjust the height:
NEW FIDDLE
I'm struggling with this problem for over an hour and can't get it right, I know these are basics but none solution from google helped, I don't understand what's the problem. I got that navigation bar and I want to vertically center logo and list elements inside it:
<nav id="mainMenu">
<img class="logo" src="images/logo.png" alt="logo" />
<ul id="menu">
<li>Home</li>
<li>About me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
css:
http://klaunfizia.pl/damian/style.css
Here's the demo: http://klaunfizia.pl/damian/
#edit:
When I put margin-top:50% for #menu why it refers to entire body instead of nav element?
Notice - the class name are different. From your existing style, remove: #mainmenu, #menu, and #menu li. Here is an example the code -> DEMO
Here is your new html:
<ul class="nav"> <img class="logo" src="images/logo.png" alt="logo" />
<li>Home
</li>
<li>About me
</li>
<li>Portfolio
</li>
<li>Contact
</li>
Here is your new CSS:
.nav {
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
background-color:red;
}
.nav li {
display:inline;
}
.nav a {
display:inline-block;
padding:10px;
text-decoration: none;
color: #000000;
}
Since your "nav" element is fixed try wrapping your "ul" element in a div and setting the css of the margin to the distance you desire.
<div style="margin-top:20px">
<ul id="menu">
<li>Home</li>
<li>About me</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
The vertical spacing of block elements can be a bit tricky as they were never intened to behave that way. So some tricks are always required.
You can center them to the middle by making the list and the logo's position relative, than giving them a 50% top and a negative margin with the half of their height. So just add these properties to the existing ones:
.logo {
position: relative;
top: 50%;
margin-top: -25px;
}
#menu {
position: relative;
top: 50%;
margin-top: -10px;
}
use this:
#mainMenu {
height: 80px;
width: 100%;
background-color: #F00;
position: fixed;
line-height: 80px; /* added */
}
#menu {
float: right;
margin-right: 16%;
display: inline-block; /* added */
}