Can anyone help me with aligning my two divs? What did I do wrong? I have two inline blocks as my divs and am trying to align them at the highest point of the element side by side.
<body>
<ul id="navbar">
<li>Skills</li>
<li>Work</li>
<li>Contact<li>
</ul>
<div id="intro">
<p>HELLO</p>
</div>
css:
#navbar {
display:inline-block;
margin-left:25%;
list-style-type:none;
vertical-align:top;
width:12%;
}
#intro {
display:inline-block;
width:40%;
vertical-align:top;
}
Add margin-top: 0 or any other preferred size (ie margin-top: 20px;) to both IDs.
Ex. http://jsfiddle.net/K9K2X/6/
<ul id="navbar">
<li>Skills</li>
<li>Work</li>
<li>Contact</li> <!-- Forgot to close the element -->
</ul>
#navbar li{
display:inline-block;
margin-left:25%;
list-style-type:none;
vertical-align:top;
width:12%;
}
The links are side-by-side now.
http://jsfiddle.net/K9K2X/8/
Related
Background: The current design that I am working on, requires a logo followed by menu in one line. What I want is that the logo and the menu (which consist of two parts which are two unordered list here) to appear in one row or as one section.
Parts of the header: The header consist of Logo Image, menu left and menu right. The menu left and menu right are unordered list items in code.
Problem faced: I am trying to add the logo image and menus in one div element to bring them together in one line. But the image is appearing on top and followed by the menu element. I have tried using the display:inline to bring the logo image on one side and menu starting after the logo image but it didnot work.I am sharing my code. Can the image be positioned and aligned along with the menu items without using position absolute? There is only HTML5 and CSS3 in the code. There is no javascript in the code.
.header{
position:relative;
margin:0;
padding:0;
}
.top{
height:20%;
border:1px solid #000;
}
.logo{
height:100%;
display:inline;
}
.element{
clear:both;
border:1px solid #000;
float:left;
}
.leftc{
display:inline;
}
.leftc li{
list-style:none;
display:inline-block;
}
.rightc{
display:inline;
}
.rightc li{
list-style:none;
display:inline-block;
}
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<header class="header">
<div class="top">
<div class="log">
<img src="http://thegamecorner.net/wp-content/uploads/2016/06/playstation-blue-background-logo-1920x1080-1.jpg" alt="logo" class="logo"/>
</div>
<div class="element">
<ul class="leftc">
<li>Buy</li>
<li>Rent</li>
<li>Sell</li>
<li>Mortgages</li>
<li>Agent finder</li>
<li>More</li>
</ul>
</div>
<div class="right">
<ul class="rightc">
<li>List your rental</li>
<li>Advertise</li>
<li>Sign in</li>
<li>Join</li>
<li>Help</li>
</ul>
</div>
</div>
</header>
</body>
</html>
Explanation in comments of CSS where the changes are made.
Give height to header
Making height of top to 100% as it to cover the whole header height can be adjusted accordingly.
Properties to be added to div with class log
.top>.log{
height: 100%;
margin: 0;
width: 200px;
display: inline;
float: left;
}
.header{
position:relative;
margin:0;
padding:0;
height:30vh;/*giving height to header*/
}
.top{
height:100%;/*making it to cover complete header*/
border:1px solid #000;
}
.logo{
height:100%;
display:inline;
}
/* properties to be added to log div*/
.top>.log{
height: 100%;
margin: 0;
width: 200px;
display: inline;
float: left;
}
.element{
/*removing the clear property*/
border:1px solid #000;
float:left;
}
.leftc{
display:inline;
}
.leftc li{
list-style:none;
display:inline-block;
}
.rightc{
display:inline;
}
.rightc li{
list-style:none;
display:inline-block;
}
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<header class="header">
<div class="top">
<div class="log">
<img src="http://thegamecorner.net/wp-content/uploads/2016/06/playstation-blue-background-logo-1920x1080-1.jpg" alt="logo" class="logo"/>
</div>
<div class="element">
<ul class="leftc">
<li>Buy</li>
<li>Rent</li>
<li>Sell</li>
<li>Mortgages</li>
<li>Agent finder</li>
<li>More</li>
</ul>
</div>
<div class="right">
<ul class="rightc">
<li>List your rental</li>
<li>Advertise</li>
<li>Sign in</li>
<li>Join</li>
<li>Help</li>
</ul>
</div>
</div>
</header>
</body>
</html>
Hello I'm currently working on a website where I want the logo of the business to overlap into the content.
Similar to this website: http://www.menzies.com.au/
I'm not really sure how to approach this problem, I tried using negative margin, and z-index, but it just felt like the wrong approach
Example Code of what i've tried
<div class="container">
<ul class="nav nav-pills">
<img src="logo.jpg" style="float: left; z-index: 3;">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Home</li>
</ul>
<img src="http://all4desktop.com/data_images/original/4172874-nordic-landscapes.jpg" style="z-index: -1; margin-top: -50px;">
</div>
What's occurring is that the second image is overlapping the logo image. It also just feels like a clunky way to approach the problem as I've never seen people advocate using negative margin unless absolutely necessary
Could anyone with experience in doing this point me in the right direction?
Basically what you need do is set the logo position to absolute, then it will be over the other elements. I did a example to you, look at this HTML:
<div id="menu">
<div class="logo"></div>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
The menu div has 75px of height, but his child can have more than this, and if they do, a overflow will occur, that is what you wanna. If it doesn't occur, as I said, you can try set the position to absolute. So, you set the logo div to something like 130px of height, and the nav to 100% height. I changed the height of logo to 130px, but it doesn't affect the other menu child. So, the nav height will be the menu height: 75px. Complete code:
#menu {
width:100%;
height:75px;
background-color:#333;
}
ul {
list-style:none;
}
ul li {
display:inline-block;
}
.logo {
width:150px;
height:130px;
background-image:url('http://placehold.it/150x130');
float:left;
position:absolute;
margin-left:25px;
}
nav {
color:#fff;
float:right;
font-size:1.3em;
line-height:75px;
margin-right:10px;
height:100%;
}
nav ul {
margin-top: 0px;
}
nav ul li {
margin-right:10px;
}
<div id="menu">
<div class="logo"></div>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
This problem is very relative, but with a simple CSS like this one, you can contour this.
I have a row with columns on my main content section and i gave it a width of 1000px and centered it with margin:0 auto. Currently my title of the header is all the way to the left of course and i want it to line up right where the row will begin. How can i achieve this?
http://jsfiddle.net/zck9c8ud/
<header>
<nav>
<ul>
<h1>title of page</h1>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
</ul>
</nav>
</header>
<div class="row">
<div class="col">col1</div>
<div class="col">col1</div>
<div class="col">col1</div>
</div>
*{
margin:0px;
padding:0px;
}
header{
background:orange;
color:white;
padding:10px;
}
header h1{
display:inline;
position:relative;
left:200px;
}
nav ul{
display:inline;
}
nav ul li{
display:inline-block;
color:white;
position:relative;
left:70px;
}
.row{
width:1000px;
margin:0 auto;
}
.col{
background:#999;
width:33%;
float:left;
margin:10px;
padding:10px;
color:white;
height:400px;
}
I'm not sure if I understood your question properly, but here's how I tried to solve it:
TLDR: Just check out this fiddle: http://jsfiddle.net/arnellebalane/LLzmseoq/
First, I just wrapped the header and the row in a separate container called .wrapper, which I gave a width of 1000px.
<div class="wrapper">
<h1>title of page</h1>
<div class="row">
<div class="col">col1</div>
<div class="col">col1</div>
<div class="col">col1</div>
</div>
</div>
Then I changed the width of .row to 800px and the the width of h1 to 200px (adjust these values if you want`.
Then I floated them to separate directions so that they will sit beside each other.
I have a div floated left, and a div floated right with a variable gap in between the 2 (responsive).
I need to be able to fill the gap in the middle with a colour, but only the gap in the middle (it can not flow behind the other 2 divs, as these divs have transparent backgrounds)
how can I achieve this with html structure like:
html
<div class="nav-wrap">
<ul class="nav">
</ul>
<div class="filler"></div>
<ul class="nav right">
</ul>
</div>
css
.nav-wrap{
float:left;
width:100%;
}
.nav{
float:left;
height:50px;
width:200px;
margin:0;
padding:0;
}
.nav.right{
float:right;
}
.filler{
?????
}
For filler, give it a margin that is equal to the width of the navs:
.filler{
margin: 0 200px;
background-color: blue;
}
To make this work, put both navs before the div in the HTML:
<div class="nav-wrap">
<ul class="nav">
</ul>
<ul class="nav right">
</ul>
<div class="filler">X</div>
</div>
Fiddle: http://jsfiddle.net/yyZz6/1/
You can use table layout of this purpose.
.nav-wrap{
width:100%;
display:table;
table-layout:fixed;
}
.nav{
display:table-cell;
height:50px;
width:200px;
margin:0;
padding:0;
}
.filler{
display:table-cell;
background: ?;
height:50px;
}
Example
You can use the following html:
<div class="nav-wrap">
<ul class="nav left">
</ul>
<div class="filler"></div>
<ul class="nav right">
</ul>
</div>
With the following styles:
.nav-wrap{
padding:0 200px;
overflow:auto;
}
.nav{
height:50px;
width:200px;
margin:0;
padding:0;
}
.nav.right{
float:right;
margin-right:-200px;
}
.nav.left{
float:left;
margin-left:-200px;
}
.filler{
width:100%; float:left;
}
Example
Consider using flex-grow of CSS flexbox
.filler{
background: SaddleBrown; flex-grow: 1;
}
Fiddle
If you are trying to achieve responsive design you should not use fixed width. Instead i suggest you try this:
<div class="nav-wrap">
<ul class="nav">
</ul>
<div class="filler">
</div>
<ul class="nav">
</ul>
</div>
<style type="text/css">
.nav-wrap{
float:left;
width:100%;
}
.nav, .filler{
border: 1px solid black;
}
.nav{
float:left;
height:50px;
width:13%;
margin:0;
padding:0;
}
.filler{
float: left;
width: 64%;
}
<style>
I've been having trouble applying clearfix to a number of divs, I've followed several tutorials, found here and here, but still my div named Bar will not expand to hold both the logo and nav divs.
Here is my markup, any and all advice would be greatly appreciated.
I have made the divs some strange colours to help see where they are ending and help with trying to see what is going on exactly.
<div id="bar" class="group">
<div id="nav">
<ul>
<li>Home</li>
<li>What We Do</li>
<li>Our Work</li>
<li>Our People</li>
<li>Contact Us</li>
</ul>
</div>
<div id="logo">
<img src="images/logo.png" title="" alt="" />
</div><!--Close Logo-->
CSS:
body{
margin:0;
}
.group:after {
content: "";
display: table;
clear: both;
}
#bar{
background-color: #e2871a;
width:100%;
}
/*NAVIGATION */
#nav{
color:#fff;
float:right;
margin-right:50px;
background-color:chartreuse;
}
#nav>ul{
list-style:none;
padding:0;
margin:0;
}
#nav>ul li{
display:inline;
}
#nav>ul a>li {
color:#fff;
padding-bottom:100px;
background-color:blue;
margin-right:15px;
}
#nav>ul a>li:hover{
border-bottom:3px solid white;
}
#logo{
float:left;
width:15%;
margin-left:5%;
background-color:red;
}
Problem is:
#nav>ul li{
display: inline;
}
Top/bottom padding or margin doesn't affect the height of inline elements relative to their parent. Make it block or inline-block