I want to have divs (.ra) whose content is:
a fixed .header
a .rcs div that contains a few or many .box divs
As one can have many of these .box divs, we need a scroll. The scroll leaves the header fixed.
It seems to be Ok, BUT I have a large empty space at the bottom of the scroll. I don't understand why.
Full code : https://jsfiddle.net/yannn/n4dk2znh/1/
HTML :
<div class="ra">
<div class="header">
<div class="ra_name">Martin, John William Harry Slobodan Junior</div>
</div>
<div class="rcs" id="ra1_rcs">
<div class="box">titre</div>
<div class="box">titre</div>
...
<div class="box">titre</div>
<div class="box">titre</div>
<div class="box">titre</div>
</div>
</div>
CSS :
.ra {
width: 28%;
height: 200px;
float: left;
border-style: solid;
margin-left: 1%;
overflow: auto;
}
.header {
background-color: white;
color: black;
height: 50px;
width: 26%;
position: absolute;
}
.rcs {
margin-top: 50px;
margin-bottom: : -50px;
height: 150px;
}
.box {
width: 60px;
height: 40px;
float: left;
background-color: black;
border-radius: 3px;
font-size:80%;
color: white;
margin: 1px;
padding: 1px;
text-align: left;
text-overflow: ellipsis;
}
There's text there:
try adding:
.box {
overflow: hidden;
}
Related
I am using float: left to stack two divs side by side. I am then using clear: block to clear the float, but a small white space appears between the floated divs and the next div.
I have added overflow: none to every element on the page because I saw that as the solution that worked for other people with a similar issue, but that didn't fix the issue.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: -60px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
EDIT: I know I can add a negative margin-top to the '#featured' box, but I would really like to understand why this problem exists.
Try changing the inline-block to inline-flex
#featured-header {
display: inline-flex;
width: 240px;
height: 30px;
}
Set font-size: 0; on the parent element. The space is a character space, so setting the font-size to zero makes the size of the space zero as well. But, you'll need to set the font size of the inline-block child elements back to your desired size.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: 0px;
font-size:0px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
font-size:18px;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
font-size:16px;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
I am making website in html and css and I have a problem. In my css file I made id "full" which set wooden background after sidebar and it should continue on all page. In my class "picture" I made 80% width white panel - so there should be 80% white background in the middle and 10% edges should be wooden. It works correctly untill my article section, where I added some images of pizzeria. Immediately there is no wooden edges, only white. I don´t understand because my "full" id and "picture" class continue untill end of the body. Could somebody see where is error please?
Image showing error
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: auto;
overflow: hidden;
width: 100%;
}
#full {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
.picture {
margin: auto;
width: 80%;
background: white;
}
#pizzaObrazok {
background-image: url("img/pizzaCompleted.png");
width: 100%;
height: 210px;
margin: 0px;
}
nav {
float: left;
margin-left: 2px;
width: 100%;
height: 32px;
}
ul {
float: left
}
li {
display: inline;
border: 4px solid black;
font-size: 24px;
padding: 10px 64px;
background-color: #990000;
color: #ffffff;
}
li a {
color: #ffffff;
text-decoration: none;
padding-top: 8px;
padding-bottom: 5px;
vertical-align: middle;
}
#imgPizza {
width: 59%;
height: 270px;
padding-left: 190px;
padding-top: 30px;
padding-bottom: 30px;
}
article p {
font-size: 120%;
font-family: fantasy;
text-align: center;
margin-right: 160px;
}
#imgPizza2 {
width: 30%;
height: 270px;
position: absolute;
transform: rotate(345deg);
margin-top: 100px;
margin-left: 50px;
border: 6px solid red;
}
#imgPizza3 {
width: 30%;
height: 270px;
position: absolute;
margin-left: 390px;
margin-top: 100px;
transform: rotate(15deg);
border: 6px solid red;
}
#phone {
border: 2px solid black;
margin-top: 150px;
margin-right: 180px;
padding: 5px;
position: absolute;
display: inline;
text-align: center;
background: #ff4d4d;
}
<header>
<div id="pizzaObrazok">
</div>
</header>
<div id="full">
<section id="navigation">
<div class="container">
<nav>
<ul>
<li>ÚVOD</li>
<li>FOTO</li>
<li>JEDÁLNY LÍSTOK</li>
<li>KDE NÁS NÁJDETE</li>
<li>NÁZORY</li>
</ul>
</nav>
</div>
 
</section>
<div class="picture">
<img id="imgPizza" src="img/pizzacheese.jpg">
<aside id="phone">
<h2>Telefónne číslo:</h2>
<h2> 0905 741 963</h2>
</aside>
</div>
 
<div class="picture">
<article>
<p>U nás dostanete najchutnejšiu pizzu z výlučne kvalitných surovín</p>
<img id="imgPizza2" src="https://cdn.vox-cdn.com/uploads/chorus_image/image/50289897/pizzeria_otto.0.0.jpg">
<img id="imgPizza3" src="https://media-cdn.tripadvisor.com/media/photo-s/09/bc/74/79/pizzeria-du-drugstore.jpg">
</article>
</div>
</div>
You have your elements "#imgPizza2" and "#imgPizza3" whit position absolute outside your "#full" wrapper. You can do various things to achive the effect you are looking for but depends of many others things.
I think the simpliest way is to put your background image in to the body and not in the warpper "#full" or change the postion of your images among others.
body {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
It looks like the wood background is 620 x 387, so my first thought is that it is big enough to cover the first section but not the articles. Maybe add background-repeat: repeat-y; to your #full class and see if the wood border spreads further down the page.
I have three divs. I want them to be in one line so I used inline-block. When I resize the window the third element (nav) stacks and then the 2nd element (searchBar). I want the 2nd element stacks first and then the 3rd one. For undoing, the 3rd element and then the 2nd element.
body {
margin: 0px;
padding: 0px;
}
header {
width: 100%;
min-eight: 48px;
position: fixed;
background: #ffffff;
padding-bottom: 5px;
border-bottom: 2px solid #fed700;
}
nav {
width: 489.7px;
height: 18px;
background: red;
display: inline-block;
}
#searchBar {
width: 330px;
height: 16px;
background: blue;
display: inline-block;
white-space: nowrap;
}
#logo {
width: 220px;
height: 32px;
background: green;
display: inline-block;
}
<header>
<div id=logo>logo
</div>
<div id=searchBar>searchBar
</div>
<nav>nav
</nav>
</header>
You could use an inline-block wrapper with a min-width, wrapping the nav and searchBar. That would give the result you wanted in with the code sample supplied, but might cause problems in the real world, depending on your requirements.
body {
margin: 0px;
padding: 0px;
}
header {
width: 100%;
min-height: 48px;
position: fixed;
background: #ffffff;
padding-bottom: 5px;
border-bottom: 2px solid #fed700;
}
.wrapper {
min-width: 50%;
display: inline-block;
}
nav {
width: 489.7px;
height: 18px;
background: red;
display: inline-block;
}
#searchBar {
width: 330px;
height: 16px;
background: blue;
display: inline-block;
white-space: nowrap;
}
#logo {
width: 220px;
height: 32px;
background: green;
display: inline-block;
}
<header>
<div id=logo>logo
</div>
<div class="wrapper">
<div id=searchBar>searchBar
</div>
<nav>nav
</nav>
</div>
</header>
I'm trying to center a text between two floating divs. The problem is, that the text does not center properly, even though I followed every step I could find online.
Here's the code I used to try to accomplish my goal:
.EditingApp-head {
background-color: #222;
width: 100%;
overflow: auto;
}
.EditingApp-head-logo {
float: left;
overflow: auto;
width: 10%;
}
.EditingApp-head-logo-image {
height: 40px;
margin-top: 4px;
float: left;
clear: none;
}
.EditingApp-head-logo-text {
float: left;
margin-left: 5px;
color: white;
}
.EditingApp-head-title {
text-align: center;
color: white;
margin-left: auto;
margin-right: auto;
}
.EditingApp-head-end {
float: right;
width: 10%;
}
<div className="EditingApp">
<div className="EditingApp-head">
<div className="EditingApp-head-logo">
<img src={logo} className="EditingApp-head-logo-image" alt="logo" />
<p className="EditingApp-head-logo-text">SyncPad</p>
</div>
<div className="EditingApp-head-end" />
<p className="EditingApp-head-title">Title</p>
</div>
<div>
<p style={{textAlign: "center"}}>center</p>
</div>
</div>
The text 'Title' centers slightly to the right, so it somehow ignores the right div.
Does anyone see the problem?
Put <center></center> around your paragraph and if i understand well it will help.
After some playing around, I got it to work. Thanks to all who tried to help me. Here's the final CSS:
.EditingApp-head {
background-color: #222;
width: 100%;
display: flex;
flex-flow: row wrap;
}
.EditingApp-head-logo {
float: left;
overflow: auto;
width: 10%;
}
.EditingApp-head-logo-image {
height: 40px;
margin-top: 4px;
float: left;
}
.EditingApp-head-logo-text {
margin-left: 5px;
color: white;
}
.EditingApp-head-title {
text-align: center;
color: white;
margin-left: auto;
margin-right: auto;
}
.EditingApp-head-end {
float: right;
width: 10%;
}
It's because of the floated content. The inline content in your p is going to wrap around the floated content, which will offset it depending on the width of the floated content. To center the title p, apply margin: 0 10% so that the inline content in the p isn't affected by the surrounding floated content.
.EditingApp-head {
background-color: #222;
width: 100%;
overflow: auto;
}
.EditingApp-head-logo {
float: left;
overflow: auto;
width: 10%;
}
.EditingApp-head-logo-image {
height: 40px;
margin-top: 4px;
float: left;
clear: none;
}
.EditingApp-head-logo-text {
float: left;
margin-left: 5px;
color: white;
}
.EditingApp-head-title {
text-align: center;
color: white;
width: 80%;
float: left;
}
<div class="EditingApp">
<div class="EditingApp-head">
<div class="EditingApp-head-logo">
<img src={logo} class="EditingApp-head-logo-image" alt="logo" />
<p class="EditingApp-head-logo-text">SyncPad</p>
</div>
<p class="EditingApp-head-title">Title</p>
</div>
</div>
I'm using this code...
<div id="app">
<div id="app-actionbar">
topbar
</div>
<div id="app-userinfo">
sidebar
</div>
<div id="app-content">
content
</div>
</div>
/** Styling **/
#app {
border:1px solid #666;
}
#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
margin-top:10px;
}
#app-content {
float: left;
color: #333;
background: #FFFFFF;
height: 350px;
width: 725px;
display: inline;
}
#app-userinfo {
color: #333;
background:#F2F2F2;
height: 350px;
width: 175px;
float: left;
}
However, it's not working like I want it to.
I want to add a border around it, but its not working (and its moving the content down).
You need to clear the floated elements in your #app . Try adding overflow:hidden; or overflow:auto; to #app. That will get the border to wrap you entire DIV.
Here's a live jsfiddle link of your above snippets with the overflow:hidden assigned:
http://jsfiddle.net/AhZAU/
The spacing at the top, "(and its moving the content down)", is being created by the margin-top:10px on the #app-actionbar. Remove the margin and the space will no longer be present: http://jsfiddle.net/AhZAU/1/
The QuirksMode Way©:
#app {
border:1px solid #666;
overflow: auto;
width: 100%;
}
http://jsfiddle.net/CePt6/
From the article:
If you want to add, say, a border
around all floats (ie. a border around
the container)...
NOTE
As far as the gap at the top, you can eliminate that by removing margin-top: 10px; from #app-actionbar.
#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
}
http://jsfiddle.net/CePt6/2/
EDIT
Now, if you mean the content block is moving down, make the width of the #app the same width as your #app-actionbar:
#app {
border:1px solid #666;
overflow: auto;
width: 900px;
}
http://jsfiddle.net/CePt6/3/
Just for giggles, tried that but with some layout changes. Check if it helps. (demo here)
<div id="app">
<div id="app-actionbar">
topbar
</div>
<div id="app-userinfo">
sidebar
</div>
<div id="app-content">
content
</div>
</div>
CSS:
#app {
border:1px solid #666;
clear:both;
position:absolute;
}
#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
margin-top:0px;
}
#app-content {
float: left;
color: #333;
background: red;
height: 350px;
width: 725px;
display: inline;
left:200px;
top:75px;
}
#app-userinfo {
color: #333;
background:#F2F2F2;
height: 350px;
width: 175px;
float: left;
top:65px;
}
this should do the trick. jsfiddle.net demo
#app {
border:1px solid #666;
height: auto;
overflow: auto;
width: 900px;
}
#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
}
#app-content {
float: left;
color: #333;
background: #FFFFFF;
height: 350px;
width: 725px;
display: inline;
}
#app-userinfo {
color: #333;
background:#F2F2F2;
height: 350px;
width: 175px;
float: left;
clear: left;
}
Here's what you can do:
Add the following lines to your #app div like this:
width:900px;
min-height: 300px;
overflow:auto;
The above is meant to auto-expand the outer div as the inner contents increase in length.
This however will be a restriction on older versions of IE since they did not have the min-height property.