Right now I am practicing on creating a header section, which contains an image which is used as a logo and and a un-ordered list which is used as a navigation menu.
Both of these elements are kept in a div element and I want to align the image to the left in the div element and the un-ordered list to the right of the div element. So how can I do it?
Second, I am willing only to use relative property. Not 'Absolute'! As I want to align the list vertically in the middle of the div element and with position absolute I am unable to vertically align the list with vertical align property.
if I am using float than the same situation is there. I am unable to vertically align the list to the middle, which I want to do.
So, I just want to know how can I position my list to the right of the div element using the relative positioning property.
<style>
.header-section {
background-color:red;
}
ul {
display:inline-block;
list-style:none;
}
ul li {
display:inline-block;
}
</style>
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="header-section">
<img src="some-image.jpg">
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
</div>
</body>
</html>
Use display:flex to parent div and give justify-content: space-between;
.header-section
{
background-color:red;
display: flex;
justify-content: space-between;
}
ul
{
display:inline-block;
list-style:none;
}
ul li
{
display:inline-block;
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="header-section">
<img src="some-image.jpg">
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
</div>
</body>
</html>
Flexbox can do that:
Support is IE10 and Up.
.header-section {
background-color: pink;
display: flex;
align-items: center;
}
ul {
list-style: none;
margin-left: auto;
}
ul li {
display: inline-block;
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="header-section">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-8.jpg">
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
</div>
</body>
</html>
You could use float like this:
ul {
display:inline-block;
list-style:none;
float: right;
}
img {
float: left;
}
Easiest solution will be using float, like the snippet below:
.header-section{
background-color:red;
}
ul{
display:inline-block;
list-style:none;
}
ul li{
display:inline-block;
}
.header-section img{
float: left;
}
.header-section ul {
float: right;
}
.header-section p {
clear: both;
}
<div class="container">
<div class="header-section">
<img src="some-image.jpg">
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
<p></p>
</div>
</div>
Notice I added a paragraph element to clear the floats.
You could do like this
.header-section {
background: red url('http://lorempixel.com/200/200/sports/2/') no-repeat left center;
background-size: contain;
text-align: right;
}
ul {
display:inline-block;
list-style:none;
}
ul li {
display:inline-block;
}
<div class="container">
<div class="header-section">
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
</div>
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>
So I have user display:table for nav, display:table-row for nav ul, display:table-cell and vertical-align:middle for nav ul li. The menu items still won't align in the middle vertically. Can anyone help?
#main_nav {
display: table;
}
#main_nav ul {
display: table-row;
}
#main_nav ul li {
padding: 10px;
display: table-cell;
vertical-align:middle;
}
<nav id="main_nav">
<ul>
<li>Blog</li>
<li>Videos</li>
<li>Almanac</li>
<li>Snippets</li>
<li>Forums</li>
<li>Shop</li>
<li>Lodge</li>
<li>Jobs</li>
</ul>
</nav>
From your statement The menu items still won't align in the middle vertically.
I presume that you want the table to be in the centre of the page.
The code you have used, vertical-align:middle; is not the same.
Check out vertical-align or this CSS vertical-align Property
Its very neatly explained with working examples.
In order to align in the centre of the page you can run the css as below
.wrapper {
display: table;
text-align: center;
}
.wrapper ul {
display: table-row;
}
.wrapper ul li {
padding: 10px;
display: table-cell;
vertical-align:middle;
}
Here is the JS Fiddle
Or Very simply and easily you could replace the whole code with
<!DOCTYPE html>
<html>
<body>
<table align="center">
<tr><td>Blog</td></tr>
<tr><td>Videos</td></tr>
<tr><td>Almanac</td></tr>
<tr><td>Snippets</td></tr>
<tr><td>Forums</td></tr>
<tr><td>Shop</td></tr>
<tr><td>Lodge</td></tr>
<tr><td>Jobs</td></tr>
</table>
</body>
</html>
This is what my page currently looks like: Here
I want the social icons to position in line with the rest of the navigation content. At the moment they are beneath the content. I thought float right would fix things. Is it because of my browser size? How can I fix this then? Here is my code:
HTML:
<div id="Nav">
<div id="NavContent">
<ul>
<li id="Title">PavSidhu.com</li>
<li>Home</li>
<li>Web Design</li>
<li>Graphic Design</li>
<li>How it Works</li>
<li>Pay</li>
<li>Contact</li>
</ul>
<img src="Images/Twitter.png" class="Social"/>
<img src="Images/Pinterest.png" class="Social"/>
</div>
</div>
CSS:
#Nav {
position:fixed;
width:100%;
background-color:#f26522;
}
#NavContent {
margin:0 auto;
width:90%;
}
ul {
margin:0;
padding:0;
}
li {
font-family: Bebas;
color:#FFF;
list-style-type:none;
margin:0;
padding:0 1%;
display:inline;
vertical-align:middle;
font-size:20px;
}
#Title {
font-size: 35px;
}
.Social {
height:35px;
float:right;
}
Thanks guys :)
The <ul> is a block element, so it wants to be 100% width by default. If you make it an inline element with display: inline; instead, there will be space for the icons to sit next to the rest of the nav bar.
ul {
margin:0;
padding:0;
display: inline;
}
You mean you want the social-media-icons higher? Next to the menu-items instead?
Try using
display: inline-block;
for your ul.
set ul to display: inline-block
As explained earlier, ul is a block element that will take 100% of the width of the parent element, so the floated elements will start on the next line.
To fix this, you can use:
ul {
margin:0;
padding:0;
border: 1px solid blue; /*for demo only */
display: inline-block;
width: inherit;
}
See demo at: http://jsfiddle.net/audetwebdesign/tAjW8/
You need to set width: inherit or else the computed width will be narrower than you might expect.
so I am starting to learn CSS and I can't wrap my head around this.
I want to make a horizontal navigation bar composed of 3 images. These are the beggining image, the "filler image", and the ending image.
Here is a picture for further reference:
I really don't know how to go about doing this and I havn't been able to find any examples on the web for this.
Thanks in advance!
I'm preparing a jsfiddle demo for you, hang on.
It's pretty ugly, but it should give you a starting point on how to tweak it so it works as you wanted. http://jsfiddle.net/T9FXD/
Markup:
<div>
<div class="first"></div>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<div class="last"></div>
CSS:
div {width:600px;height:61px;}
div.first {background-color:red; width:20px;float:left;}
li {display:inline; color: #fff}
nav {width: 500px; background:url('http://placekitten.com/g/1/61') repeat-x top; float:left;}
div.last {background-color:green; width:20px;float:left;}
I'm an hour late to this party, but most of these answers are markup overkill. An unordered list of links has all the styling hooks you need. Basically, padding left on the first li and put in the left image. Padding right on the last li and put in the right image. Main image on the a.
html:
<ul class="example">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
css:
ul.example {
margin:0;
padding:0;
font-size:0; /*this gets rid of the gaps between the items*/
}
ul.example li {
display:inline-block; /*this puts them all in a row*/
margin:0;
}
ul.example li:first-child {
padding-left:10px; /*set this to the width of your left image*/
background-image: url(http://dummyimage.com/10x61/f00/fff);
background-repeat:no-repeat;
}
ul.example li:last-child {
padding-right: 10px; /*set this to the width of your right image*/
background-image: url(http://dummyimage.com/10x61/00f/fff);
background-repeat:no-repeat;
background-position: top right;
}
ul.example li a {
font-size:16px; /*important to set this, as the ul has 0 height text*/
display:block;
height:61px;
line-height:61px;
text-align:center;
width:100px;
background-image: url(http://dummyimage.com/1x61/0f0/fff);
}
http://jsfiddle.net/EKacC/
HTML:
<div class="wrapper">
<div class="firstImage">
<!-- no content, simply assign a background-image -->
</div>
<div class="headerContent">
<div class="headerElement"></div>
<div class="headerElement"></div>
<div class="headerElement"></div>
<div class="headerElement"></div>
<!-- as many as items as you have -->
</div>
<div class="lastImage">
<!-- no content, simply assign a background-image -->
</div>
</div>
CSS:
.firstImage {
float: left;
background-color: red;
width: 50px;
height: 150px;
}
.lastImage {
background-color: blue;
float: left;
min-width: 50px;
height: 150px;
}
.headerElement {
float: left;
background-color: yellow;
width: 50px;
height: 150px;
border: 1px solid black;
}
Not the most elegant solution, but should do it for the beginning. There are - of course - more elaborate solutions... but I think this might work as well for you at the moment.
EDIT
Here is the above markup and css as a working example. I've put borders around the inner (yellow) cells for better visibility.
Stick with using <div> elements for this. Even though tables handle it well, it's more depreciated as they load slower.
It's literally as you depicted the image, with 3 main boxes.
HTML:
<div class="element1"></div>
<div class="element2">
<ul>
<li>Home</li>
<li>About</li>
<li>Forum</li>
<li>Content</li>
</ul>
</div>
<div class="element3"></div>
CSS:
When you have empty div elements, be sure to set dimensions within CSS so that it can show the image you'd like to display.
.element1, .element2 {
width:10px; height:100px;
}
For the image itself.
background:url('...') no-repeat;
I'm new to HTML & CSS and one of my first steps is creating a normal layout like
/----------------\
| Header |
|----------------|
| N | |
| a | Content |
| v | |
|----------------|
| Foot |
\----------------/
In order to be flexible, Navs width shouldn't be fixed and the Content should never float around it. In other words, Nav and Content should behave like table columns just that the use of tables for formatting are a big no no in HTML. My current code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Todo list</title>
<style type="text/css">
nav {
float: left;
padding-right: 5px;
margin-right: 5px;
background: yellow;
height: auto; /* auto | inherit | 100% */
width: auto;
}
#content {
margin: 5px;
padding-left: 5px;
}
header {
background: blue;
}
footer {
clear: both;
background: #ccc;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
</style>
</head>
<body>
<header>
Head
</header>
<nav id="main_nav">
<ul>
<li>Home</li>
<li>Contact (p)</li>
<li>Temp</li>
</ul>
</nav>
<div id="content" class="clearfix">
<h1>Test</h1>
<h2>A</h2><h2>C</h2><h2>D</h2>
</div>
<footer>
<p>[Copyright bumf]</p>
</footer>
</body>
</html>
Which results in
Most solutions I found used either a fixed width for Nav or for the Content margin, which isn't a clean. It seems that CSS Multi-column Layout Module or CSS Flexible Box Layout Module could help, but they are both "Candidate Recommendation" so I can't use them safely. What's the proper way to solve my problem?
There were some serious issues with your markup, the body tag should wrap all of the page elements, the basic markup should follow:
<!DOCTYPE html>
<html>
<head>
<!-- meta tags etc -->
</head>
<body>
<!-- page content -->
</body>
</html>
As for the style issue, the #content div just needs floated to the left as well. There are other ways, but this will probably suffice.
<!DOCTYPE html>
<html>
<head>
<title>Todo list</title>
<style type="text/css">
nav {
float: left;
padding-right: 5px;
margin-right: 5px;
background: yellow;
height: auto; /* auto | inherit | 100% */
width: auto;
}
#content {
margin: 5px;
padding-left: 5px;
float: left;
}
header {
background: blue;
}
footer {
clear: both;
background: #ccc;
}
</style>
</head>
<body>
<header>
Head
</header>
<nav id="main_nav">
<ul>
<li>Home</li>
<li>Contact (p)</li>
<li>Temp</li>
</ul>
</nav>
<div id="content">
<h1>Test</h1>
<h2>A</h2><h2>C</h2><h2>D</h2>
</div>
<footer>
<p>[Copyright bumf]</p>
</footer>
</body>
</html>
Nav and Content should behave like table columns
If you meant this literally, you could use the table layout model (as mentioned by Holf).
See this jsFiddle or the following code:
nav {
display: table-cell;
padding-right: 5px;
background: yellow;
white-space: nowrap; /* Prevent nav from ever inserting line breaks between words (like before "(p)"). */
}
#content {
display: table-cell;
padding-left: 5px;
width: 100%; /* Because of table layout, this will shrink nav to the smallest width its content can handle (similarly to how float widths work). */
}
header {
background: blue;
}
#main {
display: table;
width: 100%;
}
footer {
background: #ccc;
}
<header>
Head
</header>
<div id="main">
<nav id="main_nav">
<ul>
<li>Home</li>
<li>Contact (p)</li>
<li>Temp</li>
</ul>
</nav>
<div id="content" class="clearfix">
<h1>Test</h1>
<h2>A</h2><h2>C</h2><h2>D</h2>
</div>
</div>
<footer>
<p>[Copyright bumf]</p>
</footer>
It is now possible in CSS3 to do the equivalent of HTML-based table layouts using pure CSS alone. (see comment).
Pure CSS equivalents for HTML-based table layouts have been in the CSS spec since version 2.1. They are now supported well in most browsers. Here is a good article on this.
Support for IE7 and below is limited.
This is how I would do it:
Example: jsFiddle
HTML:
<div id="header">Header</div>
<div id="main">
<div id="nav">
<div class="wrapper">Nav</div>
</div>
<div id="content">
<div class="wrapper">Content</div>
</div>
</div>
<div id="footer">Footer</div>
CSS:
<style>
html, body{height:100%; margin:0; padding: 0; background:#ccc;}
#header{ background: #0cc; height:50px; position: absolute; width:100%;}
#main, #content, #nav{ width:100%; height:100%;}
#content{ background: #555; width:75%; float:left;}
#nav{ background: transparent; width:25%; float:left;}
.wrapper{padding: 50px 15px;}
#footer{background: #fcc; height: 50px; position: fixed; bottom: 0; width: 100%;}
</style>
Well you need a better understanding of <div> tags and the three positioning schemes - relative, absolute and fixed.
I have taken the liberty of editing your code my style, although it does not include the positioning.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body,
html {
margin:0;
padding:0;
color:#000;
background:#a7a09a;
}
#wrap {
width:750px;
margin:0 auto;
background:#99c;
}
#header {
padding:5px 10px;
background:#ddd;
}
h1 {
margin:0;
}
#nav {
padding:5px 10px;
background:grey;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
}
#sidebar {
float:left;
width:230px;
padding:10px;
background:yellow;
height:100%;
}
h2 {
margin:0 0 1em;
}
#main {
float:right;
width:480px;
padding:10px;
background:red;
}
#footer {
clear:both;
padding:5px 10px;
background:#cc9;
}
#footer p {
margin:0;
}
* html #footer {
height:1px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"><h1>header goes here</h1></div>
<div id="nav">
<ul>
<li>Options</li>
</ul>
</div>
<div id="sidebar">
<h2>Siidebar</h2>
<p>Home</p>
<p>Content</p>
<p>Content</p>
<p>Content</p></div>
<div id="main">
<h2>Main Content</h2>
<p>Hello</p>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Check out this page i think it will solve your problem.
http://www.tutorialrepublic.com/html-tutorial/html-layout.php