I am trying to put nav and img elements next to each other on top of the page.
I am putting both elements in the top_bar container.
I have tried setting the top_bar to display: inline-block;, reducing the width of nav and floating it to left and also floating the img to right. Then I have tried combinations of those, but nothing gives me the result I want. Either the elements start to jump around or the logo is put below the top_bar border.
How can I have nav and img inline and both above the top_bar bottom border?
EDIT: I also want the nav element to be positioned left-most of the page, and img right-most.
<!DOCTYPE HTML>
<html>
<head>
<style>
#top_bar {
border-bottom: 1px solid silver;
}
nav ul li {
display: inline-block;
}
img {
width: 130px;
height: 30px;
}
</style>
</head>
<body>
<div id="top_bar">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<img src="cs_logo.png" alt="Image not found"></img>
</div>
</body>
</html>
Add display: flex; to #top_bar
#top_bar {
border-bottom: 1px solid silver;
display: flex;
justify-content: space-between;
}
nav ul li {
display: inline-block;
}
img {
width: 130px;
height: 30px;
}
<div id="top_bar">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<img src="cs_logo.png" alt="Image not found"></img>
</div>
<!DOCTYPE HTML>
<html>
<head>
<style>
#top_bar {
border-bottom: 1px solid silver;
display: flex;
flex-direction: row;
align-items: center;
}
nav ul li {
display: inline-block;
}
img {
width: 130px;
height: 30px;
}
</style>
</head>
<body>
<div id="top_bar">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<img src="cs_logo.png" alt="Image not found"></img>
</div>
</body>
</html>
We can use CSS flex properties to achieve this. But please make sure that you are using vendor prefixes for cross browser compatability.
Your code is missing some declarations.
At first your class #top_bar should have a width declaration.
To make things easyier you could use a class instead of only declare
the image size.
Here´s a fiddle of your code that i´ve modified: https://jsfiddle.net/Thorske/nyv6mwgz/
Modified css:
* {
margin : 0:
padding : 0;
}
#top_bar {
margin : 0 auto;
width : 100%;
border-bottom: 1px solid silver;
}
.clear {
clear : both;
}
nav {
float : left;
width : 80%;
}
nav ul li {
display: inline-block;
}
.img_container {
float : right;
width : 20%;
}
.img_conatiner img {
width: 130px;
height: 30px;
}
Modifed html:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="top_bar">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<div class="img_container">
<img src="cs_logo.png" alt="Image not found" />
</div>
<div class="clear"></div>
</div>
</body>
</html>
There only simple changes:
the #top_bar has now a defined width.
nav has now a defined width and float.
added the class "img_container" with defindet width and float
which contains the image.
the class clear keeps everything were it is supposed to be.
Since i don´t know if you want to make your code "responsiv" you´ve
to set your values for "width" yourself.
Related
I am trying to achieve a simple layout with three vertical sections:
Small header on top of the page.
Main content, expanded if necessary so that the footer remains at the bottom of the page.
Footer at the bottom of the page.
The main content section should be further divided in two sections: a very small form with an input box and a button and a 5-row-max table showing some tabular data. The table should take up as much vertical space as needed, an the small form should be centered in the remaining vertical space.
I've tried using flex boxes but there is something I am doing wrong; I cannot manage to vertically center the tiny form in the available space. This is a simplified version of what I've done so far (best viewed in full screen):
body {
margin:0;
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
}
main {
flex:1;
display:flex;
flex-direction:column;
}
main>form {
flex:1;
}
<body>
<header>header</header>
<main>
<form>
<h1>Form with inputs</h1>
<label>Inputs</label>
<input type="text">
<button>Button</button>
</form>
<div>
<h1>Other content</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</main>
<footer>footer</footer>
</body>
I have tried multiple combinations of justify-content, align-content, align-items and align-self but the more I try, the less I seem to understand what I am doing :-(
Can anyone who does, provide me with any hints as to what I am doing wrong?
EDIT: If I could use fixed heights for some elements, I might do something like this (which also illustrates what I am after, better viewed in full screen):
* {
box-sizing:border-box;
}
html {
height:100%;
}
body {
margin:0;
height:100%;
position:relative;
}
header {
height:40px;
background-color:#E6ECC1;
}
main {
height:calc(100% - 80px);
background-color:#dfd;
}
h1 {
margin:0;
padding:10px 0;
}
main>form {
height:calc(100% - 150px);
background-color:#C1E4EC;
}
main>form:before {
content:"";
display:inline-block;
height:100%;
vertical-align:middle;
}
main>form>div {
display: inline-block;
vertical-align: middle;
width: calc(100% - 4px);
text-align: center;
}
main>div {
padding:0 20px;
height:150px;
position:absolute;
bottom:40px;
}
footer {
position:absolute;
height:40px;
width:100%;
bottom:0;
background-color:#fdd;
}
<body>
<header>header</header>
<main>
<form>
<div>
<h1>Form with inputs</h1>
<label>Inputs</label>
<input type="text">
<button>Button</button>
</div>
</form>
<div>
<h1>Other content</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</main>
<footer>footer</footer>
</body>
I thought I would be able to implement this more cleanly using two nested flex boxes; an outer one providing room for the header at the top, the footer at the bottom and a mid section that can grow to fill all available space in between, and an inner one dividing the outer mid section into two; a bottom one with a constant but unknown height and a top one taking up all remaining space in the mid section. The content of this block, much smaller than the available area when the page is viewed in a large display, should be centered both horizontally and vertically in the available area.
When I only use an outer flex box (the <body> element in my original snippet) the content is centered vertically between the header and the footer. But when I try to split the mid section (the <main> element in my original snippet), the form is pushed upwards. It is as if the height of the flex:1 element in the outer box were not available to its children elements.
Thank you very much, have a good day.
Your centering (justify/align-content) isn't inherited so you have to restate it for each flex-container.
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
header {
background: green
}
main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: pink;
}
main>form {
background: orange;
}
<body>
<header>header</header>
<main>
<form>
<h1>Form with inputs</h1>
<label>Inputs</label>
<input type="text">
<button>Button</button>
</form>
<div>
<h1>Other content</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</main>
<footer>footer</footer>
</body>
I thank everyone who answered, although the answers did not quite do what I was trying to do. In the end, I have managed what I was after by wrapping the form inside an extra div to which I applied the flex attributes:
body {
margin: 0;
background-color: #F3F3F3;
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background-color: #fdd;
}
main {
flex: 1;
display: flex;
flex-direction: column;
}
div.form {
background-color: #dfd;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 20px;
}
div.other {
background-color: #fdb;
padding: 0 10vw;
}
footer {
background-color: #ddf;
}
<body>
<header>header</header>
<main>
<div class="form">
<form>
<h1>Form with inputs</h1>
<label>Inputs</label>
<input type="text">
<button>Button</button>
</form>
</div>
<div class="other">
<h1>Other content</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</main>
<footer>footer</footer>
</body>
I hope this can help someone else with a similar problem in the future!
Get rid of align-items: center; because it turns block elements into inline-blocks, use text-align: center instead.
both html and body would require a defined height of 100%
If you want the form inside main to take most space, then simply apply flex: 1 to it.
Working simplified demo:
html, body {margin: 0; padding: 0; height: 100%; text-align: center;}
body { width: 100%; display:flex; flex-direction:column; }
header { padding: 1em; background: lightblue; }
footer { padding: 1em; background: gray; }
main { flex:1; display:flex; flex-direction:column; background: lightyellow; overflow: auto;}
main > form { border-bottom:1px dashed gold; flex:1; }
#data { padding: 1em; }
main ul { margin: 0; padding: 0; display: inline-block }
<header>header</header>
<main>
<form>
<h1>Form with inputs</h1>
<label>Inputs</label>
<input type="text">
<button>Button</button>
</form>
<div id="data">
<h1>Other content</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</main>
<footer>footer</footer>
jsFiddle: https://jsfiddle.net/azizn/hLse4wa7/
The picture below shows what I would like to get.
It is a menu within a container, where the menu may wrap to multiple lines when the window/screen gets too narrow for all menu items to fit in. At the same time I would like the menu to have a background which expands to full screen in width, while expanding in height with the menu when it gets wrapped to multiple lines. Currently I think this is not possible with CSS, but I am also just a CSS amateur. My current solution involves #media queries to set the height of the menu background for resolutions where wrapping appears. This does not take into account that font-size could change, thus making each line of menu higher.
Here is a jsFiddle with a basic setup, which does NOT what I want:
https://jsfiddle.net/n3jmyq2f/3/ (Edited, was not the final version)
Here is the code:
<div class="container">
<div class="menu_wrap">
<div class="menu_bg"></div>
<div class="menu">
<ul>
<li>item 1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</div>
</div>
<div class="content">It's me, Mario!</div>
CSS:
.container {
width:50%;
margin: 0 auto;
background:lightgreen;
height:300px;
}
.menu_bg{
position: absolute;
background: #afafaf;
width: 100%;
left:0;
height:30px;
z-index: -1;
}
ul {
height:30px;
background: #afafaf;
}
li {
display:inline-block;
}
The first option is the simplest.
Stop thinking of the .container as something that must contain everything. It's just a class that can be reused as and when required.
If you take the menu div out of the "container" but put a .container div inside you get the effect you are looking for.
JSfiddle Demo
*,
body {
padding: 0;
margin: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
}
.menu {
background: #afafaf;
}
ul {
border: 1px solid green;
}
li {
display: inline-block;
}
.content {
height: 300px;
}
<div class="menu">
<div class="container">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">It's me, Mario!</div>
</div>
2nd Option
Use a pseudo-element
*,
body {
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
height: 300px;
}
ul {
background: #afafaf;
position: relative;
border: 1px solid green;
}
ul:before {
content: '';
position: absolute;
height: 100%;
background: inherit;
width: 100vw;
left: 50%;
transform: translateX(-50%);
z-index: -1
}
li {
display: inline-block;
}
<div class="container">
<div class="menu">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
<div class="content">It's me, Mario!</div>
</div>
JSfiddle Demo
if in .container you change
width:50%;
to
width:100%;
it will do it
fiddle
you could also use the .menu-wrap class (which I've seen in your markup) to do this
On this page, I have a footer menu #menu-footer-menu; "About - Select Your City - How Walks Work..." generated by Wordpress.
<div class="menu-footer-menu-container">
<ul id="menu-footer-menu" class="menu">
<li id="menu-item-143">About</li>
<li id="menu-item-151">Select Your City</li>
<li id="menu-item-162">How Walks Work</li>
<li id="menu-item-160">FAQs</li>
<li id="menu-item-166">Blog</li>
<li id="menu-item-153">Partners</li>
<li id="menu-item-154">Press</li>
<li id="menu-item-144">Privacy Policy</li>
<li id="menu-item-145">Site Map</li>
<li id="menu-item-146">Terms & Conditions</li>
</ul>
</div>
I want to center this menu.
I tried the following CSS but it didn't work:
div.menu-footer-menu-container {text-align:center;}
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: inline-block !important;
}
ul#menu-footer-menu li {
display: inline-block !important;
margin-right: 14px;
margin-right: 1rem;
}
Use following css instead of what you have.
I just changed display for ul#menu-footer-menu.menu to block nothing else.
div.menu-footer-menu-container {text-align:center;}
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: block !important;
}
ul#menu-footer-menu li {
display: inline-block !important;
margin-right: 14px;
margin-right: 1rem;
}
You need to add one wrapper element with a width of 100% to center your div in.
Like:
<div class="wrapper">
<div class="menu-footer-menu-container">
...
</div>
.wrapper{ width:100% }
Use display:block instead of inline-block
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: block !important;
}
Try to add CSS Style :
.menu-footer-menu-container
{
text-align: center;
}
You have two ways to do it
width degradation center tag
<center>
<ul>
...
</ul>
</center>
Create another div to force the center
.center { margin: auto; text-align: center; }
<div class="center">
<ul>
...
</ul>
</div>
Note: The tag must be inline-block.
width text-align:center;
ul{ text-align: center; }
<center>
<ul>
...
</ul>
</center>
Add one more style text-align:center to #footer-menu in css.
Currently I have the following code...
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
<link href="verna.css" type="text/css" rel="stylesheet" />
</head>
<body>
<section id="devices">
<h1>Gruppen</h1>
<div class="group">
<h2>Gruppe 1</h2>
<ul>
<li class="device">Schalter 1</li>
<li class="device">Schalter 2</li>
<li class="device">Schalter 3</li>
</ul>
</div>
<div class="group">
<h2>Gruppe 2</h2>
<ul>
<li class="device">Schalter 1</li>
<li class="device">Schalter 2</li>
<li class="device">Schalter 3</li>
</ul>
</div>
</section>
</body>
</html>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
#devices {
background-color: yellow;
}
#devices .group {
background-color: gray;
}
#devices .group ul {
text-align: center;
}
#devices .group .device {
background-color: green;
display: inline-block;
margin: 5px;
max-width: 200px;
width: 100%;
}
... which looks like this:
But I want that the green <li>-elements floats in columns. It should look like this:
Please note: The number of the green <li>-elements is variable, there can be more or less than three elements and there can be more than two columns! I want to order the <li>-elements "column-wise" and center them...
Thanks for help :-)
The thing that is centering "Schalter 3" is text-align: center;. We can fix this by removing
#devices .group ul {
text-align: center;
}
and adding:
#devices .group ul {
margin-left: 50px;
}
#devices .group li {
text-align: center;
}
in its place. This centers the text in the li element, instead of centering the li element inside the ul. And it adds the margin to the left to get the indent you wanted.
Working Fiddle.
Restructure your html so that each "column" is it's own container (div) which has an appropriate width. Alternatively, if you hate yourself, use a table.
Check out this fiddle.
The trick was to turn the lis back into block-level elements so that they could have width. Then set width: 40%; (40% leaves a little room for the 5px margin) and float: left;. Also adding overflow: auto; to the ul so that it would contain its floated lis.
This is a pure html/css Question, here it goes..
I have a floating div to the right of my page layout, I need it to disappear if my screen size is too small (or if resize the browser window to a smaller setting). Let's say it's something as simple as this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Layout test</title>
<link href="simple.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<h1>Welcome</h1>
<div id="right-div">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
<div id="main">
<p>Some content goes here!</p>
</div>
</body>
</html>
let's say it has this simple CSS too:
#main {
border: 1px solid black;
width: 800px;
height: 500px;
padding: 7px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 10;
}
#right-div {
border: 1px solid black;
float: right;
width: 200px;
position: relative;
z-index: 9;
}
As of now, if I reduce window size, the div with id of right-div starts to overlap with the "main" div. I need to know how to make it disappear or hide if the screen size is small (or getting smaller).
How can I accomplish this?
Thank you all in advance for your help,
J.
Use Media Queries. Example:
#media all and (max-width: 300px) {
.floated_div { display: none; }
}
jsFiddle Example. Resize the output area until it is smaller then 300px to see the effect.
See this answer for IE compatibility.
Here is a solution if you have a fixed width layout. http://jsfiddle.net/uMVMG/
<div id="container">
<div class="inner">
<div id="right-div">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
<div id="main">
<p>Some content goes here!</p>
</div>
</div><!-- .inner end -->
</div><!-- #container end -->
#container {
overflow: hidden;
max-width: 500px;
min-width: 300px;
}
#container .inner {
width: 500px;
}
#right-div {
float: right;
width: 200px;
background: green;
}
#main {
width: 300px;
height: 200px;
background: red;
}