I'm having a problem with placing the 'navigation' div (within 5 buttons) to the right side of the page in the '#header' div. The 'navigation' div is still next to the 'logo' div.
Can someone help me to get it to the right side of the page?
CSS code:
body {
background-color: #000000;
margin:0;
padding:0;
}
#header {
width: 100%;
height: 100px;
background-color: 222423;
margin-bottom: 5px
}
#logo {
float: left;
}
#navigation {
display: inline-block;
vertical-align: middle;
}
#content {
height: auto;
}
.knop {
margin-right: 7px;
margin-left: 20px;
vertical-align: middle
}
.plaatje {
position: fixed;
width: 628px;
height: 300px;
margin: -150px auto auto -319px;
top: 50%;
left: 50%;
text-align: center;
}
.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}
HTML code:
<html>
<head>
<link typte="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="header">
<div id="logo">
<img src="images/logo.png" width="90px">
</div>
<div id="navigation">
<img class="knop" src="images/buttonhome.png">
<img class="knop" src="images/buttonoverons.png">
<img class="knop" src="images/buttonproduct.png">
<img class="knop" src="images/buttonmedia.png">
<img class="knop" src="images/buttoncontact.png">
</div>
<div class="DivHelper"></div>
</div>
<img class="plaatje" src="images/headimage.png" >
fkfddkfd
</div>
<div id="footer">
</div>
</body>
</html>
There are multiple approaches to this, and you might have to experiment what works for you.
First of all, there's the position property, if you wanted to place the navigation to the right you'd get:
#navigation
{
position: absolute; /*or fixed*/
right: 0px;
}
This approach is very situational and might break. In some cases even breaking the entire lay-out. Best practices dictate to use this one as little as possible, but sometimes there's no other choice.
The other way, which may or may not work, again, is to use the float property
#navigation
{
float: right;
}
Do like this (use float & dont forget the clear in content div) :
#navigation {
display: inline-block;
vertical-align: middle;
float: right;
}
#content {
clear:both;
height: auto;
}
#navigation {
display: inline-block;
vertical-align: middle;
float: right;
padding-right: 50px;
padding-top: 50px;
}
adjust padding right and top px if u want....
You need to use float in navigation div and some width.
#navigation {
display: inline-block;
vertical-align: middle;
float:right;
}
Update this class and check it should work
Youri,
There are a few ways to accomplish this effect, here is one.
Take a look at this:http://jsfiddle.net/legendarylion/8jKUP/1/
THE HTML
<body>
<div id="header">
<div id="logo">
<!--You may wish to eliminate the "width" property here and use the css to style the image... also, I'm assuming you're going to want to wrap this image in an anchor tag that points back to index.html (or default.html, whatever your homepage is...-->
<img class="example-logo" src="images/logo.png" width="90px">
</div>
<!--Your image code in your original source did not have anchor tags. If you want those to function as a nav, you might as well mark it up like I have it below, wrapping the image inside of a 'nav' element, ul, li, and anchor tag. Also see the CSS comments for ideas on sprite images and sticky menus-->
<nav>
<ul>
<li><!--add your image code back here-->Home
</li>
<li><!--add your image code back here-->Overons
</li>
<li><!--add your image code back here-->Product
</li>
<li><!--add your image code back here-->Media
</li>
<li><!--add your image code back here-->Contact
</li>
</ul>
</nav>
</div>
<div class="DivHelper"></div>
</div>
<div id="footer"></div>
</body>
</html>
THE CSS
/* Make the header relative so we that the 'asbolute' positioning uses it as a reference, also, let's give that header an outline so we can see what we're doing */
#header {
position:relative;
border:1px dashed green;
}
/* Make the nav position asboslute to place it to the right */
nav {
position:absolute;
top:0px;
right:0px;
border:1px dashed blue;
}
/*So what happened? The parent element "header" is referenced by "nav" and "nav" is positioned absolutely relative to that parent in the top right hand corner. Nav will stay there even if the parent container has more elements added to it.
Also, it's worth asking I think... Did you want the menu static, or fixed as the page scrolls? That might be worth looking into as well. Look to the trusty W3C to help you out there: http://www.w3.org/Style/Examples/007/menus.en.html*/
/* Style the Nav (You can add your images right back into the html if you prefer, though you may want to look up how to make a sprite image with the css background property and positioning so they load as one file call, but hey, first thing is first right? */
nav ul li {
list-style-type:none;
display:inline-block;
margin:0 10px;
}
nav ul li a {
text-decoration:none;
}
.example-logo {
height:50px;
width:50px;
background:blue;
}
What we're doing here is declaring a parent element relative, and the element you want styled in the top right corner absolute to that relation.
Also take a look in my comments in that code for some other ideas that I think might be helpful to you.
I used margin-left property like this:
#navigation {
display: inline-block;
vertical-align: middle;
margin-left: 70%;
}
The margin-left will create space out side of element. You can get the left side of element with enough space, then your element will be the right side of the page.
Reference:
https://www.w3schools.com/css/css_margin.asp
Related
I'm trying to put the following two <div> elements on the same row. How should I do this?
<nav>
<div class="logo" style="background:#00f; margin-right:100px; margin-left:1150px;">
<img src="jiasaz-4.png" width="100px" height="100px">
</div>
<div class="menu" style="background:#f00;">
<img src="jiasaz-4.png" width="100px" height="100px">
</div>
</nav>
Here you go, Use this css
.logo, .menu{ display:inline-block'}
You can use table for that. If you don't want to use table then use CSS float property.
float : left;
position: Relative;
display:inline;
Hope it will help.
I will try to keep it short ;). There are multiple ways of doing that. Main part is trying to keep it simple and understand each step you take. Then step by step everything (CSS & HTML) makes sense.
.logo {
display: inline-block;
width: 100px;
}
.logo img {
max-width: 100%;
}
.menu {
display: inline-block;
height: 80px;
}
/* just to color up things */
header { background-color: tomato }
.logo { background-color: firebrick }
.menu { background-color: wheat }
<header>
<div class="logo">
<img src="http://www.jiasaz.com/wp-content/uploads/2015/08/jiasaz-4.png">
</div>
<nav class="menu">
<ul>
<li>Item1</li>
<li>Item1</li>
</ul>
</nav>
</header>
Just a one suggestion. Separate CSS from HTML. This will make it a lot easier to read and maintain when project becomes bigger - trust me ;).
Take look on HTML:
We have two elements - logo and menu which are wrapped by header.
The header element represents a container for introductory content
or a set of navigational links.
.. maybe this is too long .. I'll create another post
Try this:
.logo{ float: left;
display: inline;
width: 25%;}
.menu{ float: left;
display: inline;
width: 60%;}
/* you can use the 15% remaining for padding in menu and logo class*/
nav{
padding: ;/* try different value */
}
I want to create a webpage but encountered a problem in making the logo appear near the heading. I have tried the following code but this does not produce expected results.
I have the following code:
.line .box .header img {
float: left;
}
.line .box.header h1 {
position: relative;
top: 1px;
left: 10px;
}
<div class="line">
<div class="box">
<div class="s-6 l-2">
<div class="header">
<img src="img/hrcimg.jpg" alt="logo">
<h1>United Nations Human Rights Council</h1>
</div>
</div>
</div>
</div>
WEBSITE SCREEN
You need to increase the width of .l-2 element.
Setting this element's width to 100% will result in the layout the title of your question eludes to.
When reaching lower resolutions, you'll need to adjust these styles accordingly so that the structure is maintained to a point.
Once the resolution reaches mobile proportions, consider displaying them in their own lines. This can be done by setting the logo to display as block with width: 100%; & height: auto;, you'll also need to kill the float rule at this point.
So i made a little something, correct me if i am wrong where the logo needs to be :)
.line img {
float: left;
}
.line h1 {
position:relative;
float:left;
top: 1px;
left: 10px;
}
https://jsfiddle.net/3an65dfp/3/
Try this out:
img, h1 {
display: inline-block;
vertical-align: middle;
}
<header>
<img src="http://placehold.it/100x100">
<h1>COMPANY NAME</h1>
</header>
I haven't used CSS quite often. I always get stuck even when it get's to the simplest layout questions. Even though I am reading a book I cannot figure out how the following works:
I want to design a website which has a header on top, then menu bar and then content. Menu bar and content are working quite good. But I want to have a header with some header text on the left and a logo on the right.
So I have taken this approach:
<div id="headline">
<div id="headertext">Some title<br/>some more title text</div>
<div id="logo"><img src="somelogo.png" /></div>
</div>
And for the CSS:
#headline { overflow: hidden;
height: 224px;
text-align: left;
padding: 0px 80px 0px 80px;
}
#headertext { font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 20pt;
color: #000000;
float: left;
font-weight: bold;
}
#logo {
float: right;
}
So I made the text on the left float: left and the logo on the right float: right. So far so good. Now I want to align both elements to the vertical middle of the parent <div> that has a certain height.
This is what I want it to look like (the blue rectangle is the logo):
I have tried using vertical-align: middle but this does not work out. I have also stumbled across display:table-cell and display: inline but I must have used it in a wrong way or it also does not work. Do I have to use another "wrapper" <div> inside the headline element?
Edit: thanks for the hint about fiddle; I tried to edit one: http://jsfiddle.net/f5vpakdv/
Thank you for your help!
You can achieve this using display: table and display: table-cell, together with vertical-align: middle.
I've removed some irrelevant bits from your original CSS to make it easier to see what's different.
To make it work perfectly after you add padding or margin, check this link: Box Sizing | CSS-Tricks.
<div id="headline">
<div id="headertext">
Some title<br/>some more title text
</div>
<div id="logo">
<div id="fakeImg"></div>
</div>
</div>
...
#headline {
width: 100%;
height: 224px;
background: yellow;
display: table;
}
#headertext {
text-align: left;
}
#headertext,
#logo {
display: table-cell;
width: 50%;
vertical-align: middle;
}
#fakeImg {
width: 100px;
height: 100px;
background: blue;
float: right;
}
Demo
You can use some CSS to accomplish this. Also check for vendor-specific transforms.
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Here is a fiddle, and I added another div wrapper.
http://jsfiddle.net/5o3xmfxn/
Updated version of your fiddle:
http://jsfiddle.net/f5vpakdv/1/
I have updated your fiddle here. I simply added display:table; to your wrapping div and gave both inner divs a style of:
display:table-cell;
vertical-align:middle;
I also made a version using flexbox here
I just added the following styles to your wrapping div:
display:flex;
align-items:center;
justify-content:space-between;
I would go for something easier like this. Just put wrapper around the content that you want to center and use a margin-top: http://jsfiddle.net/f5vpakdv/2/
<div id="headline">
<div id="wrapper">
<div id="headertext">Some title some
<br/>more title text</div>
<div id="logo"><img src="somelogo.png" width="198px" height="120px" />
</div>
</div>
</div>
CSS
#wrapper {
margin-top: 60px;
}
I am trying to float my four links so that it is lineal and one next to the other. I am fairly new to CSS, so please bear with me. I have endlessly tried different positions properties and yet can not achieve what I want. Thanks
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin: 1px;
background:green;
}
. topbar
{
background:url(topbar.gif);
position:absolute;
top: 5px;
right: 15px;
margin: 2px;
width: 1200px;
height: 100px;
}
.navbar
{
position:absolute;
float:right;
width:1200px;
height:100px;
border-style:groove;
}
a:link {text-decoration:none;color:yellow;}
a:hover{color:red;}
#titlename
{
position:relative;top:10px;
text-align:center;
}
</style>
</head>
<body>
<div class="topbar">
</div>
<div id="titlename">
</div>
<img src="title.gif" alt="title">
</div>
<div class="navbar">
<div class="button">HOME
<div class="button">ABOUT
<div class="button">LINKS
<div class="button">CONTACT
</div>
</body>
</html>
I don't know if you've noticed since posting your question, but each of your button DIVs is missing it's closing DIV tag. This means that any CSS applied will not have the expected effect. Once you've fixed the HTML, you can use the following CSS to have each navigation item on the same line, spaced out equally, with the menu occupying the full width:
.button {
float: left;
width: 25%;
}
If you don't want the menu to occupy the full width, use padding or margin instead of specifying 25% for the width attribute, e.g:
.button {
float: left;
padding: 0 20px;
}
There are various methods to inline the elements.
1. using Flex Method
2. using table method
3. using float method
4. using display method.
Here you can check the Demo link. includes all possibility.
You can use either use float: left; or display: inline to achieve what you want.
DEMO
Just add following style to your anchor tags:
.navbar a {
float:left;
margin-right: 15px;
}
Working Fiddle
.button{
display:inline-block;
}
The problem is that the border of div#content also appears in div#navigation?
<html>
<head>
<title>WUI</title>
<style type="text/css">
div#header {
}
div#navigation {
float: left;
padding-right: 20pt;
}
div#content {
border: 5px groove;
}
</style>
</head>
<body>
<div id="header">
<h1>WUI</h1>
</div>
<br />
<div id="navigation">
<ul>
<li>Home</li>
<li>Login</li>
</ul>
</div>
<div id="content">
<p>I like when you ride with that booty on me!</p>
</div>
</body>
</html>
EDIT: I want the left side (navigation) to appear as a sidebar to the left and the content after that (to the right). I'm applying the border to the content but that border also appears in div of navigation. I hope it is clear now.
You need an overflow: auto; for your div#content. It's magical, hence no explanation will be given:
div#content {
border: 5px groove;
overflow: auto;
}
Well, after your edit, I can see your border isn't the problem. I usually do this:
html
{
background-color: white;
}
body
{
padding-left: 200px;
background-color: green;
}
#navigation
{
position: fixed;
width: 200px;
left: 0px;
top: 0px;
}
It makes you navigation static, and the content just magically works. The downside is that you have to use pixel-based layouts, which I don't really like doing. It's your choice.
Here's a semi-relevant thing I made a while back. See if it works for you: http://jsfiddle.net/dDZvR/12/
navigation is floating, which means it's taken out of the document flow, and the next element (content) moves up to take it's place.
However, navigation still has to float somewhere, so it's taking up space inside content.
To avoid this, either float content as well, or put a left margin on it equivalent to the width of navigation.
edit: after seeing your edit, I'd say the left margin idea would definitely be the better one.
you need to give float to the content because you give float to the navigation.
use this example:
<style type="text/css">
div#header {
}
div#navigation {
float: left;
padding-right: 20pt;
}
div#content {
float: left;
border: 5px groove;
}
</style>
It's because of how floats work. You're going to have to put a margin on #content or something like that.
It can be corrected by adding a left margin to the div#content. The corrected code is here - http://jsfiddle.net/sparky/vctcN/
you can add a
float: left;
in content and set the width yourself
This one may works:
WUI
<style type="text/css">
div#header {
display:block;
}
div#navigation {
width:150px;
float:left;
}
div#content {
border: 5px groove;
margin-left:160px;
}
</style>
</head>
<body>
<div id="header">
<h1>WUI</h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>Login</li>
</ul>
</div>
<div id="content">
<p>I like when you ride with that booty on me!</p>
</div>
</body>