I have this code in a blade file currently, and its so CLOSE to what I need. However, I can't quite get the sidebar element to have color all the way down, as in a column.
*edited, html was removed in earlier version
<style>
ul.products li {
width: 200px;
display: inline-block;
vertical-align: top;
}
body{
background: white;
}
#wrapper { overflow:auto; }
#content {
float: right; width: 80%;
margin:5px 0 5px 0;
}
#sidebar {
float: left;
width: 20%;
background: #F9F8F2 repeat-y;
}
</style>
<body>
<div id="wrapper">
<div id="sidebar">
<ul>
<li>Sidebar stuff.</li>
<li>Sidebar stuff.</li>
<li>Sidebar stuff.</li>
</ul>
</div>
<div id="content">
<ul class="products">
<li>
<a href="#">
<img src="logo.png">
<h4>text</h4>
<p>$20.00</p>
</a>
</li>
<li>
<a href="#">
<img src="logo.png">
<h4>text</h4>
<p>$25.00</p>
</a>
</li>
</ul>
</div>
</div>
</body>
Try this
#sidebar {
float: left;
width: 20%;
background-color: #F9F8F2;
}
"background" set different background properties in one declaration. Often if you miss a property or make a typo it will not display correctly. You can check the documentation here:
http://www.w3schools.com/cssref/css3_pr_background.asp
Add display: flex to #wrapper:
http://codepen.io/anon/pen/vgLWQL
The height of the container/page can be dynamic here, it adjusts to whichever of the two elements has more content, but both will have the same height.
ADDITION:
I added min-height: 100vh; to the #wrapper to make it at least as high as the window.
I can't quite get the sidebar element to have color all the way down, as in a column.
1. Flexbox solution (recommended):
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: white;
}
#wrapper {
height: 100%;
overflow: auto;
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
}
#sidebar {
/* float: left; */
flex: 1;
width: 20%;
background: #F9F8F2;
}
ul li {
/*width: 200px;*/
display: inline-block;
vertical-align: top;
}
ul {
padding: 5px;
}
<div id="wrapper">
<div id="sidebar">
<ul>
<li>Sidebar stuff.</li>
<li>Sidebar stuff.</li>
<li>Sidebar stuff.</li>
</ul>
</div>
</div>
2. Without altering #sidebar position property solution:
html,
body {
background: white;
height: 100%;
}
#wrapper {
overflow: auto;
height: 100%;
}
#sidebar {
float: left;
width: 20%;
background: #F9F8F2 repeat-y;
height: 100%;
}
<div id="wrapper">
<div id="sidebar">
<ul class="products">
<li>Sidebar stuff.</li>
<li>Sidebar stuff.</li>
<li>Sidebar stuff.</li>
</ul>
</div>
</div>
3. With absolute position #sidebar solution:
body {
background: white;
}
#wrapper {
overflow: auto;
}
#sidebar {
/* float: left; */
position: absolute;
top: 0;
bottom: 0;
width: 20%;
background: #F9F8F2;
}
ul li {
/* width: 200px;*/
display: inline-block;
vertical-align: top;
}
ul {
padding: 5px;
}
<div id="wrapper">
<div id="sidebar">
<ul>
<li>Sidebar stuff.</li>
<li>Sidebar stuff.</li>
<li>Sidebar stuff.</li>
</ul>
</div>
</div>
Related
Here is my code:
.row {
width: 800px;
}
.menu {
display: inline-block;
display: flex;
list-style: none;
padding: 0;
}
li {
width: 100%;
}
.test {
width: 800px;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
</div>
<div class="test">
<p> </p>
</div>
I want the menu to fill the full width of the div. The distances are the same and the elements are to coincide with the edges of div test.
This is what it would look like:
Test
Best Regards and Thank You
justify-content is what you probably look for : see https://css-tricks.com/snippets/css/a-guide-to-flexbox/#justify-content
This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
demo
.row {
width: 800px;
}
.menu {
display: flex;
list-style: none;
padding: 0;
justify-content:space-between;
}
.test {
width: 800px;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
</div>
<div class="test">
<p> </p>
</div>
.row {
width: 800px;
overflow-x: hidden;
}
.menu {
display: inline-block;
display: flex;
list-style: none;
width: 100%;
padding: 0;
}
li {
width: 100%;
text-align: center;
}
.test {
width: 100%;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
<div class="test">
<p> </p>
</div>
</div>
Try this😊
.menu {
display: inline-block;
display: flex;
list-style: none;
padding: 0;
width: 100%;
}
This should fix your problem
display: flex; and justify-content: space-between; get you there.
I also added:
* {
margin: 0;
padding: 0;
}
I also removed (commented):
li {
width: 100%;
}
to get rid of the default margin and padding on the body element.
* {
margin: 0;
padding: 0;
}
.row {
width: 800px;
}
.menu {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
}
/*
li {
width: 100%;
}
*/
.test {
width: 800px;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
</div>
<div class="test">
<p> </p>
</div>
You need to configure your flex better. Here is a solution
* {
margin: 0;
padding: 0;
}
.row {
width: 800px;
}
.menu {
display: flex;
list-style: none;
padding: 0;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: stretch;
justify-content: space-between;
}
.test {
width: 800px;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
</div>
<div class="test">
<p> </p>
</div>
I want something like this:
+-------------------------------------------------------------------+
| |
| LOGO Search_box... ITEM_1 ITEM_2 ITEM_3 |
| |
+-------------------------------------------------------------------+
The LOGO is an image. Search_box is an input text and ITEM_X an orizontally list item.
I tried this, but the logo doesn't stay where I want: https://jsfiddle.net/mna4de2n/
Note: I did not implement the input text yet.
CSS:
header{
width: 100%;
height: auto;
text-align: center;
display: inline-block;
}
header ul {
list-style-type: none;
text-align: center;
padding: 0.5vw;
overflow: hidden;
}
header li {
display: inline;
}
header li a{
display: inline-block;
color: #262626;
text-align: center;
padding: 0.5vh 0.5vw;
text-decoration: none;
}
header .left {
padding-left: 15%;
float: left;
}
header .right {
float: right;
padding-right: 25%;
}
header img {
width: 10%;
}
HTML:
<header>
<div class="left">
<li><img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png"></li>
</div>
<div class="right">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</header>
Why not use flexbox?
header {
width: 100%;
height: auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
header img {
width: 50%;
}
header .left {
width: 30%;
}
header .right {
width: 70%;
display: flex;
justify-content: flex-end;
}
header ul {
list-style-type: none;
padding: 0.5vw;
overflow: hidden;
display: flex;
}
header li a {
color: #262626;
padding: 0.5vh 0.5vw;
text-decoration: none;
}
header input {
height: 30px;
align-self: center;
}
<header>
<div class="left">
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>
<div class="right">
<input type="search">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</header>
<header>
<div class="right">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class=""> <!-- You do not need this class here, now all you need to do is work on centering your menu. -->
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>
I moved your logo after the right floated menu. and removed the li tag from the logo and the class for that div (float left is not needed.).
You need to set the image width to pixels, instead of percentage, this is making the parent of the image to take the full width of the header. Which is causing the issue. Also removing the li tag wrapping the image, since it is of no use.
Before:
header img {
width: 10%;
}
<div class="left">
<li><img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png"></li>
</div>
After:
header img {
width: 100px;
}
<div class="left">
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>
Note: Please view the demo in full screen to see the change.
header {
width: 100%;
height: auto;
text-align: center;
display: inline-block;
}
header ul {
list-style-type: none;
text-align: center;
padding: 0.5vw;
overflow: hidden;
}
header li {
display: inline;
}
header li a {
display: inline-block;
color: #262626;
text-align: center;
padding: 0.5vh 0.5vw;
text-decoration: none;
}
header .left {
padding-left: 15%;
float: left;
}
header .right {
float: right;
padding-right: 25%;
}
header img {
width: 100px;
}
<header>
<nav>
<div class="left">
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>
<div class="right">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</nav>
</header>
I have kept the li under ul, instead of div and changed the image size to pixels.
<div class="left">
<ul>
<li>
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</li>
</ul>
</div>
header {
width: 100%;
height: auto;
text-align: center;
display: inline-block;
}
.left ul{
padding:0;
}
header ul {
list-style-type: none;
text-align: center;
padding: 0.5vw;
overflow: hidden;
}
header li {
display: inline;
}
header li a {
display: inline-block;
color: #262626;
text-align: center;
padding: 3vh 0.5vw;
text-decoration: none;
}
header .left {
padding-left: 15%;
float: left;
}
header .right {
float: right;
padding-right: 25%;
}
header img {
width: 80px;
}
<header>
<nav>
<div class="left">
<ul>
<li>
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</li>
</ul>
</div>
<div class="right">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</nav>
</header>
I am using the rem to create a mobile web project.Now I am facing a problem.
My code is below:
<head>
<style type="text/css">
body {
background-color: green;
}
#top {
/*height: .9rem;*/
}
#top::after,
#top::before {
/*content: '';
display: block;
clear: both;
visibility: hidden;*/
}
ul {
list-style: none;
padding-left: 0;
}
#data-item {
margin-top: 4rem;
}
#data-item .image-list {
width: 4.5rem;
display: flex;
flex-flow: row wrap;
background-color: yellow;
}
#data-item .image-list .image-list .div-image {
width: 1.4rem;
height: 1.4rem;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #6641E2;
}
</style>
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<section id="top">
<div id="addImage" style="height: .90rem; width: 1.60rem; float:right ; padding-top: .20rem; position: relative;background-color: red; z-index: 999;">
<span style="display: inline-block; margin-right: .20rem;">ADD</span>
</div>
</section>
<section id="data-item">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="title"><img src="images/vip.png" alt="" /><span class="date">6月１日</span></div>
<p class="item-description"></p>
<ul class="image-list">
<li>
<div class="div-image"></div>
</li>
<li>
<div class="div-image"></div>
</li>
<li>
<div class="div-image"></div>
</li>
<li>
<div class="div-image"></div>
</li>
</ul>
</li>
<li class="mui-table-view-cell">Item 2</li>
<li class="mui-table-view-cell">Item 3</li>
</ul>
</section>
</body>
I look the result in the chrome console, I choose the mobile device iPhone5.
The screen is like this:
I check the element in the Elements tab.
I see that the #top section is 320*0.
My question is why the #addImage div has the margin-top too. I set the margin-top for the #data-item section?
Why does not the red div at the top-right corner?
add this style to the parent:
#top{
overflow: auto;
}
Fixed div is getting down when I give margin-top to the div below it...why?
* {
margin: 0;
padding: 0;
}
.header_bg {
width: 100%;
height: 100px;
position: fixed;
background: black
}
.container {
width: 960px;
height: auto;
margin: 0 auto
}
ul.menu {
list-style: none;
}
ul.menu li {
display: inline-block
}
ul.menu li a {
text-decoration: none;
color: white
}
.content {
margin-top: 140px
}
<div class="header_bg">
<div class="container">
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>Service
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">
/* Content Goes here*/
</div>
</div>
you need to add top:0 to your .header_bg, see more about position
* {
margin: 0;
padding: 0;
}
.header_bg {
width: 100%;
height: 100px;
position: fixed;
background: black;
top:0
}
.container {
width: 960px;
height: auto;
margin: 0 auto
}
ul.menu {
list-style: none;
}
ul.menu li {
display: inline-block
}
ul.menu li a {
text-decoration: none;
color: white
}
.content {
margin-top: 140px
}
<div class="header_bg">
<div class="container">
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>Service
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">
/* Content Goes here*/
</div>
</div>
I've been trying to create a navigation bar which consists of three pieces, a list to the left of the centered logo, the logo itself and a list to the right of the logo. I've tried absolutely positioning the logo and floating the lists however this leads to the logo overlaying the lists when the width of the browser is altered.
Any suggestions would be much appreciated, JSFiddle included below :-).
JSFiddle
HTML
<div class="navigation">
<div class="container-1020">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
<li>Blog</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60"/>
</div>
<ul>
<li>01234 123456</li>
</ul>
</div>
</div>
CSS
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
margin: 0;
list-style-type: none;
}
li {
display: inline;
margin-right: 10px;
}
li:last-child {
margin-right: 0 !important;
}
.logo-container {
width: 200px;
height: 60px;
}
This might work for youFIDDLE
css:
* {
margin: 0;
}
a {
color: #ffffff;
text-decoration: none;
}
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
list-style-type: none;
display: inline-block;
width: 30%;
}
ul:last-child {
text-align: right;
}
.nav-logo {
display: inline-block;
width: 30%;
}
html:
<div class="navigation">
<div class="container-1020">
<ul class="left">
<li>Home
</li>
<li>Work
</li>
<li>Contact
</li>
<li>Blog
</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60" />
</div>
<ul class="right">
<li>01234 123456</li>
</ul>
</div>
</div>
well for one, correct your class name for the logo, is it .nav-logo or .logo-container
then set your ul's and whichever logo container class you decide on to display:inline-block