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 */
}
Related
When I useclass="top-menu" and class="pull-right" these two together I get the result is the image is pull-right but the background color does not change to black, What is wrong with my code?
If I delete the class="pull-right" the background color becomes black
.top-menu {
background-color: black;
}
.pull-right {
float: right;
}
<header>
<div class="header-top">
<div class="container-fluid top-menu">
<img src="..." alt="Awsome_Ticket_Logo" class="pull-right">
</div>
</div>
</header>
When you float something, it is no longer part of its parent's bounding box. Since there is nothing else in your top-menu parent, the bounding box will be considered empty and it will have a height of 0.
A common solution to this is to add a clearfix to the parent. This will make it include whatever space was taken up by its floated children:
.top-menu {
background-color: black;
}
.pull-right{
float: right;
}
.top-menu:after {
content: "";
clear: right;
display: table;
}
<header>
<div class="header-top">
<div class="container-fluid top-menu">
<img src="https://via.placeholder.com/150" alt="Awsome_Ticket_Logo" class="pull-right">
</div>
</div>
</header>
That's because when things float the container becomes empty, you can use a clearfix: https://jsfiddle.net/wwWaldi/nrysp61w/18/
.clearfix::after {
content: "";
clear: both;
display: table;
}
I see a lot of developers has this problem with their code. Normally, This issue comes with bad styling of your page structure. Also, the first solution that many developers come with is to use clear: both; styling in pseudo. But, I think if you learn how to style like a good developer you will never need to use clear. Just start to write your page in a normal and standard way.
When you give a float to the child of a parent which doesn't have a float property, The parent will lose its height (if its the only child of that parent). The best way to avoid this happening its to divide the sections of your page and give them a good floating. This way you'll never need to use clear styling.
header,
.header-top,
.top-menu {
width: 100%;
float: left;
}
.top-menu {
padding: 5px;
background-color: red;
}
img{
width: 100px;
height: 100px;
display: block;
float: left;
background: blue;
}
<header>
<div class="header-top">
<div class="container-fluid top-menu">
<img src="" alt="Awsome_Ticket_Logo" class="pull-right">
</div>
</div>
</header>
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>
For some reason my image is centered when the browser width is less than 1015px width-wise, but when I go over that it moves completely to the left, with no padding against the side of the page. I'm doing:
HTML
<div id="nav">
<div id="logo">
<img src="../img/logo.png" alt="logo" style="height:100px; width:100px;" />
</div>
<ul>
<li>How It Works</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
<li>Jobs</li>
</ul>
</div>
<img class="center" src="../img/laptop.png" alt="laptop-pic" style="height:500px; width:500px;" />
CSS
#nav {
margin-bottom: 100px;
}
#nav ul li {
display: inline-block;
}
#nav ul {
position: relative;
float: right;
right: 60px;
bottom: 30px;
}
#nav li {
padding-right: 20px;
font-size: 20px;
color: white;
}
.canvas-wrap {
min-height: 100%;
margin-bottom: -30px;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
Edit
The problem is somewhere in the markup/styling of my navigation bar. When I remove the markup for the navigation bar, it centers correctly. I've edited the question to include the HTML and CSS for the nav bar. I don't see what's wrong with it.
I don't see an issue when viewing in Firefox. Your markup and CSS however are very simplistic. I assume this is only because you don't want to post your entire solution here.
What you may want to consider is adding a clearfix just before the closing #nav in the markup. As in the following:
<div id="nav">
<div id="logo">
<img src="img/logo.png" alt="logo" style="height:100px; width:100px;" />
</div>
<ul>
<li>How It Works</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
<li>Jobs</li>
</ul>
<div class="clear"></div>
The CSS for the clear needs the absolute basics, although you can make your clearfix as complex as you wish:
.clear { clear: both; }
You can also add overflow as an option to your #nav, but this is definitely not advised for a container holding a navigation because it will hide items like subnavs. But to add the overflow: hidden, you do the following:
#nav {
margin-bottom: 100px;
overflow: hidden;
}
What I would do with your .center image is remove the inline styling, and then do the following with the CSS declaration/and HTML markup:
<img class="center" src="img/laptop.png" alt="laptop-pic" style="" />
img.center {
display: block;
margin: 0 auto;
width: 100%; /* For responsive */
max-width: 500px; /* For responsive */
height: auto; /* For responsive */
}
Your inline-block for #nav ul li will not work because you've applied float: right to #nav ul. You also have right: 60px within the same ul declaration. If your intent is inline-block for the li elements, you need to remove the aforementioned.
The final thing I'll mention in my response is your use of display: inline-block; Make sure that you remove whitespace from this. There are several methods upon how to do this - none of which are pretty. You can't really remove the whitespace with CSS, so the best approach is to fix it in the markup. Below are 2 solutions of many:
Solution 1 for inline-block:
<ul>
<li>How It Works</li
><li>Portfolio</li
><li>Team</li
><li>Contact</li
><li>Jobs</li>
</ul>
Solution 2 for inline-block:
<ul>
<li>How It Works</li><!--
--><li>Portfolio</li><!--
--><li>Team</li><!--
--><li>Contact</li><!--
--><li>Jobs</li>
</ul>
I don't know which browser you're using. When I run your code on Chrome everything works fine, but IE is no good.
I'm thinking this is related to a known problem about IE not rendering display: block and display: inline-block correctly.
I did a different approach to get it done. Just wrapped the image with a div and centered the contents. Its not the more elegant answer though.
See below:
HTML
<div class="divCenter">
<img src="../img/laptop.png" alt="laptop-pic" style="height:500px; width:500px;" />
</div>
CSS
.divCenter {
width:100%;
text-align:center;
}
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
not sure why, but I can't get the icons centered on the page without using padding-left:130px;
Which isn't ideal of course because the icons don't center properly when you re-size the browser window. Maybe I need more coffee, but I could use some stacker help this morning!
http://towerdive.net/
HTML
<div id="center2">
<div id="social_icons">
<p>
Thanks for your interest in our blog!
You can also find us here, as well as subscribe to our newsletter:
</p>
<ul>
<li id="facebook">
<img src="img/icon_facebook.png" alt="Facebook"/>
</li>
<li id="twitter">
<img src="img/icon_twitter.png" alt="Twitter"/>
</li>
<li id="newsletter">
<img src="img/icon_newsletter.png" alt="Newsletter"/>
</li>
</ul>
</div>
</div>
CSS
#center2 {
width: 100%;
}
#social_icons {
margin: 0 auto;
width: 400px;
height: 250px;
text-align: center;
}
#social_icons p {
color: #e3cda4;
}
#social_icons ul {
margin: 0 auto;
list-style: none;
text-align: center;
}
#social_icons ul li {
float: left;
padding-right: 10px;
}
Let me know if you guys need the full HTML or CSS!
You can use display:inline-block for this. Write Like this:
#social_icons ul li {
display: inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
vertical-align:top;
padding-right: 10px;
}
You currently use floats to display your navigational list horizontally. You can't align the list-items in the middle of the unordered lists because of the floats.
Another technique is instead of float: left; using display: inline-block;. The list-items will be displayed horizontally but also all extra white-space will taken into account. You'll get extra margins between the items (like 4px). Now you can use text-align: center; on the UL to center the list-items.
There are several (easy) workouts described in this article by Chris Coyier:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/