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;
}
Related
I am creating a navigation bar. I want the bottom border line to appear at the bottom of the navigation bar, like this:
But what i am getting out of my code is this:
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>batman</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<a href="#" class="logo">
<img src="./img/bat_logo.png" alt="batman" />
</a>
<nav>
<ul style="list-style-type: none;">
<li> Villains </li>
<li> Identity </li>
<li> Movies </li>
</ul>
</nav>
</div>
</body>
</html>
My CSS:
.logo {
float: left;
height: 50px;
}
#header {
padding: 5px 0px;
border-bottom: 1px solid;
}
Use flex with justify-content: space-between on the parent and you can also use align-items to vertically align things. Also changed <div id="header"> to <header id="header">, because it seems like a more semantically appropriate element.
img {
max-width: 50px;
}
.logo {
height: 50px;
display: block;
}
#header {
padding: 5px 0px;
border-bottom: 1px solid;
display: flex;
justify-content: space-between;
align-items: center;
}
nav li {
display: inline-block;
}
<header id="header">
<a href="#" class="logo">
<img src="https://images.coplusk.net/projects/19697/steps/33014/normal_big_cartoon_batman_symbol_1250787261.jpg" alt="batman" />
</a>
<nav>
<ul style="list-style-type: none;">
<li> Villains </li>
<li> Identity </li>
<li> Movies </li>
</ul>
</nav>
</header>
Yoy should use width and float on #header which is main wrapper. With that you should add ul li{float:left}
.logo {
float: left;
height: 50px;
}
#header {
padding: 5px 0px;
border-bottom: 1px solid;
display:block;
float:left;
width:100%;
}
ul li{float:left}
Codepen link: https://codepen.io/bravotanmoy/pen/qjZEbb
I'm recreating an article I found on The Economist and I'm having trouble creating the header. Please keep in mind I'm doing this without recreating their code verbatim. I'm trying to create my own implementation.
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
}
.header__left-content {
display: inline;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
<html>
<body>
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
</body>
</html>
I'm having trouble getting the paragraph element, and ultimately its container to sit to the right as shown in the article.
Thoughts on this?
You can use display: flex; justify-content: space-between; on the element that wraps the the left/right portions of the header to put those in a row separated by the available space left over. And you can use align-items to align that content vertically.
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__left-content {
display: inline;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
This is happening due to your class="header__site-functions" is ablock element and is taking the 100% of the width, so it doesn't fit in a line. You can use a floating element to fix it:
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
}
.header__left-content {
display: inline-block;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
.header__site-functions{
float:right;
}
<html>
<body>
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
</body>
</html>
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>
I'm having some issues with one of my div. The page is set to full screen top to bottom left to right and everything is fine until I start adding some content into the div "top_nav" which seems to push the entire "header_wrapper" downward. My CSS will tell you everything thats going on as well.
<div id="wrapper">
<!-- header Section -->
<div id="header_wrapper">
<div id="header_content">
<div id="top_nav">
<ul>
<li class="cg">Login/Register</li>
<li class="cg">Shopping</li>
<li>
<form action="http://www.example.com/login/">
<input name="search" placeholder="Enter keyword" type="search"><input type="submit" value="Search">
</form>
</li>
</ul>
</div>
<div id="logo"></div>
<div id="bottom_nav">
<ul>
<li class="cg">
News
</li>
<li class="cg">
Videos
</li>
<li class="cg">
Photography
</li>
<li class="cg">
Our Magazine
</li>
<li class="cg">
Environment
</li>
<li class="cg">
Travel
</li>
<li class="cg">
Kids
</li>
<li class="cg">
Television
</li>
</ul>
</div>
</div>
</div>
</div>
#html,body {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
padding: 0;
background-color: #DDDAD4;
}
#header_wrapper {
width: 100%;
height: 110px;
background-color: #383838;
overflow: hidden;
}
#header_content {
width: 1000px;
height: 110px;
background-color: #ffc0cb;
margin: auto;
}
#top_nav {
width: 1000px;
height: 30px;
background-color: green;
}
#top_nav li {
display: inline;
color: #fff;
}
#logo {
width: 80px;
height: 80px;
background-color: #000;
float: left;
}
#bottom_nav {
width: 920px;
height: 80px;
background-color: red;
float: right;
}
#bottom_nav li {
display: inline;
}
#bottom_nav a {
color: #fff;
}
Looks like it's because of the margin in your <ul>. Here's a JSFiddle where I removed the margins: https://jsfiddle.net/jameson5555/wrzLcz3L/
ul {
margin: 0;
}
I have created 3 boxes. With UL/LI. But it doesn't seem to horizontally line up itself.
I have tried, float:right; and display: inline-block; both of which does not align it.
Preview Image
This is my code
#box1 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}
#box2 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}
#box3 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}
.boxy {
list-style: none;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="UTF-8">
<title>Askar Photography</title>
</head>
<body>
<header>
<h1 class="logo"><img src="Assets/logo.png"></h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
<div class="content">
<ul class="boxy">
<li>
<div id="box1"></div>
</li>
<li>
<div id="box2"></div>
</li>
<li>
<div id="box3"></div>
</li>
</ul>
</div>
</body>
<!--<div id="box2"></div> -->
</html>
Basically, This boxes will be filled with content and must be aligned horizontally with equal spaces in between. I tried googling and following step by step guide, But to no avail.
use below code: it will help u
<style>
#box1 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block;
margin-right:10px;
}
#box2 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block;
margin-right:10px;
}
#box3 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}
.boxy{
list-style: none;
display: flex;
width:100%;
}
</style>
The problem is that you're not changing the display type of those <li> tags. It is them which need to be set as display: inline-block;.
So basically you can take the display property off from #box1, #box2 and #box3. Instead, add the following:
.boxy > li { display: inline-block; }
You need to do the following:
.boxy {
display: flex;
justify-content: space-between;
}
#box1, #box2, #box3 {
display: inline-block;
}
Check out https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more detail on flex and it's uses. It is quite a neat little tool to use when you need responsive, evenly spaced items on your page.
All you need to do is add the following to .boxy:
text-align:center;
and change the property display:inline-block to display:block in .boxy
See for yourself, I have edited the above in your code, and its working perfectly.
#box1 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}
#box2 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}
#box3 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}
.boxy {
list-style: none;
display: block;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="UTF-8">
<title>Askar Photography</title>
</head>
<body>
<header>
<h1 class="logo"><img src="Assets/logo.png"></h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
<div class="content">
<ul class="boxy">
<li>
<div id="box1"></div>
</li>
<li>
<div id="box2"></div>
</li>
<li>
<div id="box3"></div>
</li>
</ul>
</div>
</body>
<!--<div id="box2"></div> -->
</html>
You need to have your li tags display as inline-blocks, this is because browsers default all li's to block type element.
.boxy > li {
list-style: none;
display: inline-block;
}