Google doesn't give me good answers so it is time to ask to the community how to do !
I am a beginer in web development, and it is just for me, to show all my job experiences.
I want to do a bottom section which contains some buttons. This section must be always present (visible) during scrolling, and at the end of page, be under the footer... This section must have a auto size for height and centered in the page.
This is an begining of the work I done : http://jsfiddle.net/52VtD/1250/
It begins at line 102 :
<div id="base_bottom" class="IL_BASE" style="position: fixed; z-index: 9999999; width: 100%; /* height: 150px; */ /* left: 50%; */ border-top-width: 1px; /* border-top-style: solid; */ border-top-color: rgb(0, 51, 102); border-left-width: 0px; border-right-width: 0px; border-right-style: solid; background-color: rgb(255, 255, 255); bottom: 0px;margin-top: 5px;">
If someone can give me some advices, it will be great ;)
Thanks by advance,
Nicolas
You can add empty div before your bottom block
<div style="height:150px"></div>
Related
Sorry for the title...I don't know how to really express it. Anyway, I have a simple flex box page that has little content. The issue is in tablet, if I touch-move the screen, the content moves. It shows no horizontal scroll and I see no empty gaps. Since there is no extra content to show horizontally, I don't want it to move horizontally at all.
Screens follow:
The page on load fully shown
Tho content is small, I can move the div and hide it to the left and pull it back again.
What I expect is the element not to move around since there is no content to move around.
My display is outright from this except no header/footer. For convenience:
CSS:
*, *:before, *:after
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body
{
width: 100%;
height: 100%;
left: 0 !important;
top: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body
{
background: #444444;
color: #cccccc;
font-size: 14px;
/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.flexbox-parent
{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
background: rgba(255, 255, 255, .1);
}
.flexbox-item
{
padding: 0px;
}
.flexbox-item-grow
{
flex: 1; /* same as flex: 1 1 auto; */
}
.flexbox-item.content
{
background: rgba(0, 0, 255, .1);
}
.fill-area
{
display: flex;
flex-direction: row;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
}
.fill-area-content
{
background: rgba(0, 0, 0, .3);
border: 1px solid #000000;
/* Needed for when the area gets squished too far and there is content that can't be displayed */
overflow: auto;
}
HTML:
<div class="flexbox-parent">
<div class="flexbox-item fill-area content flexbox-item-grow">
<div class="fill-area-content flexbox-item-grow">
Content
<br /><br />
Emulates height 100% with a horizontal flexbox with stretch
<br /><br />
Content continues
</div>
</div>
</div>
I'm a newbie to html and css, and I was wondering if this is possible in pure css.
So I made 3 divs, all fitted perfectly to my screen size. What I am wondering is if you make the "Menu" fixed so it scrolls along, can you change the starting position of it?
<div class="red"></div>
<div class="blue">
<h1>Menu</h1>
</div>
<div class="green"></div>
This is the CSS that goes along with it:
.red{
background-color: red;
width: 100%;
height: 1080px;
}
.blue{
background-color: blue;
width: 100%;
height: 1080px;
}
.green{
background-color: green;
width: 100%;
height: 1080px;
}
h1{
font-size: 100px;
position: fixed;
top: 0;
}
So what I basically mean is can "Menu" be fixed from when I scroll across the blue div and downwards while it's not visible yet on the red div? (so the 'starting position' of it is actually on the blue div)
Sorry if the question is poorly explained, english is not my native language. Thank you in advance.
You can just hide "Menu" on red and green divs using z-index.
CSS:
.red{
background-color: red;
width: 100%;
height: 1080px;
z-index:3;
position: relative;
}
.blue{
background-color: blue;
width: 100%;
height: 1080px;
z-index:1;
}
.green{
background-color: green;
width: 100%;
height: 1080px;
z-index:3;
position: relative;
}
h1{
font-size: 100px;
position: fixed;
top: 0;
z-index:2;
}
Example: http://jsfiddle.net/3k3wyscL/
But with this solution problematically would be to add another text visible only on red or green div.
Edit: as you want to see "Menu" on green div too, you can delete green class z-index and position parameters in css.
I know you mentioned you want the solution in pure css, but if you would like to use JQuery that will be a solution.
make the menu absolute:
.persist-menu
{
position: absolute;
}
right a function to update the position of the menu
function UpdateMenuPosition() {
var el = $(".blue"),
offset = el.offset(),
scrollTop = $(window).scrollTop(),
floatingHeader = $(".persist-menu", el)
if (scrollTop > offset.top) {
floatingHeader.css({top:(scrollTop)});
} else {
};
}
and call it while scrolling
$(function() {
$(window)
.scroll(UpdateMenuPosition)
.trigger("scroll");
});
Check the demo: http://jsfiddle.net/wfff74w9/4/
What i have
If I have two images (one includes frame and another includes the picture),
My question
can I show it in the same image by using Polymer? I think it looks like bitmap in android and I want to do in web but I really don't know how
Here is one example on how to place a picture over a picture. Since I didn't have any pictures i "faked" them with span tags. Plunkr
<style>
.pic-one{
background: red;
position: absolute;
height: 30px;
width: 30px;
}
.pic-two{
background: blue;
position: absolute;
margin: 5px 5px;
height: 20px;
width: 20px;
}
</style>
<div class='container'>
<span class='pic-one'></span>
<span class='pic-two'></span>
</div>
I'm working some css and encountered a weird problem. Two elements are inline-block staying in the same container. Both of them have the width, height, and line-height.
But if we set the first element an empty content, the layout will be disordered (vertical alignment).
You can see the problem here
<div class="part">
<div class="foo"></div>
<div class="bar">bar</div>
</div>
.part {
width: 400px;
height: 80px;
background-color: #ddd;
margin-bottom: 100px;
}
.foo {
display: inline-block;
width: 100px;
height: 80px;
line-height: 80px;
background-color: red;
}
.bar {
display: inline-block;
width: 100px;
line-height: 80px;
height: 80px;
background-color: green;
}
I know empty content is always a bad smell of html code. But I just want to know why this is and how to solve this problem.
I found a similar question. People say we could use a   instead of empty content. Is this the only way we could solve it? Or we have other better solution?
Thanks.
use 'vertical-align: middle;' to the inline-block element
vertical-align: middle;
http://jsbin.com/ajexab/1/edit
What I am trying to achieve is a shadow ONLY in the middle of a div. What I have now is:
<body style="background-color: #ccc;">
<div style="padding: 30px;
-webkit-box-shadow: inset 0px 0px 0px 20px #000;">
Some text in the box</div>
</body>
Which looks like (#1):
But I want to achieve (#2):
Question A: Is it possible to achieve #2 using only CSS?
Question B: If yes to Question A, how should #2 be modified to achieve the effect only on the top and the bottom, leaving the sides shadowed all the way from left to right (#3)?
Clarification: The intent is to use a 50% shadow that shows up only in the middle of a div, but I CANNOT change any HTML, only CSS. Also, The code posted here is oversimplified. There are several elements inside the div, including images. I cannot change their BG.
I have achieved your #3 using this html:
<body>
<div id="shadow">Some text in the box</div>
</body>
and this css:
body, html {
margin: 0;
padding:0;
background-color: #ccc;
}
div#shadow {
margin-top:20px;
padding: 15px 30px;
background-color: #000;
color:white;
}
you can see it here: http://jsfiddle.net/quPB5/
Edit:
Here is only the modified CSS:
<body style="background-color: #ccc;margin: 0;padding:0;"><div style="margin-top:20px;padding: 15px 30px;background-color: #000;color:white;">Some text in the box</div></body>
You can use "box-sizing" to move the padding and borders etc, inside the div and in this way - keep the div size despite changes in padding or shadow. In this case I have box-sizing on the wildcard, *
I put it on everything, but you can just put it on the elements you want as well.
Also add inset to your shadow.
HTML
<div class="box box-shadow">inset shadow</div>
CSS
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* this moves padding and borders and such inside the div instead of outside */
.box {
width: 300px;
height: 100px;
padding: .5em;
background-color: rgba(255,255,255,.1);
}
.box-shadow {
-webkit-box-shadow: inset 0px 0px 50px 5px #f06; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
box-shadow: inset 0px 0px 50px 5px #f06; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}
HERE is a jsfiddle with it in action:
As far as your last question I'm a little unsure of what you want. shadow just on top and bottom? That would be cool... could use some pseudo elements maybe --- ? ? ?