What is going on here, I has tried floating the spans to the left, I have tried displaying them inline-block, inline ect... nothing seems to be working, I want any spans in the "filters" div to all go next to each other on a horizontal line!
HTML:
<div class="filters">
<span style="background-image:url(images/filters/grayscale.jpg)">Grayscale</span>
<span style="background-image:url(images/filters/smooth.jpg)">Smooth</span>
<span style="background-image:url(images/filters/contrast.jpg)">Contrast</span>
<span style="background-image:url(images/filters/brightness.jpg)">Brightness</span>
<span style="background-image:url(images/filters/colorize.jpg)">Colorize</span>
</div>
CSS:
.filters {
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
}
.filters span {
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
float:left;
}
you have to change your code in the following way,
.filters {
position:relative;
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
}
then for each span, you have to change left: 0px to the amount you want the filter effect to move from the left side.
.filters span {
position:absolute;
left: 0px;
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
float:left;
}
I have added position:relative; on filter box,
and position: absolute; and left: 0px;
Change the width from 100% to a larger value (in % or px) and a containing div if you want the user to scroll horizontally through the spans.
SEE JSFIDDLE EXAMPLE
.container {
width:300px;
height:8em;
overflow-x:scroll;
overflow-y:hidden;
}
.filters {
background-color:#1a1a1a;
height:8em;
width:1000px;
border-radius:0px 0px 15px 15px;
}
<div class="container">
<div class="filters">
...
</div>
</div>
Edit: Solution
Here is you fiddle working: Working jsFiddle here
Original Answer
Use white-space: nowrap; css for surrounding container. If you want to get rid of autospaces between the spans as well concatenate them with <!-- --> html comments.
HTML:
<div class="filters">
<span>Grayscale</span><!--
--><span>Smooth</span><!--
--><span>Contrast</span><!--
--><span>Brightness</span><!--
--><span>Colorize</span>
</div>
CSS:
.filters {
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
white-space: nowrap; /* added */
}
.filters span {
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
/*float:left; removed*/
}
Related
Hello I have a question about centering a frame div inside a parent div.
I would like to center the frame inside the page, which is 70% wide, but I just cant make it work. I woud like the frame to be inside the parent div WRAP and the WRAP div inside the MAINWRAPPER which is 70% wide.
Please help :)
html{
background-color:#EEE;
font-family: 'Lato',Calibri,Arial,sans-serif;
font-size:16px;
color:#888;}
body{
position:absolute;
width:100%;
margin:0px;
padding:0px;
}
#MAINWRAPPER {
min-height:100%;
position:absolute;
right: 0;
left: 0;
margin:0 auto;
padding:0;
width:70%; /* page width */
background-color: #39f;
border:1px solid #959595;
}
#WRAP {
position:relative;
display:block;
margin:0 auto;
border:1px solid red;
}
.frame {
width:100%;
height:300px;
position:relative;
float:left;
background-color:#fff;
display:block;
border:1px solid #959595;
border-radius:4px;
text-align:center;
margin:2%;
}
.frame a{
display:block;
width:100%;
height:100%;
color:#333;
}
.frame a:hover{
display:block;
color:#FFF;
}
.title {
display:block;
position:absolute;
overflow:hidden;
top:0;
background-color:#ccc;
padding:3px 0;
width:100%;
height:auto;
border-bottom:1px solid #959595;}
div.price {
display: block;
position: absolute;
bottom: 1px;
right: 0;
height: 1.6em;
width: 3em;
background-color: #33CCFF;
border-radius:5px;
border:2px solid #FFF;
color:#FFF;
font-size:1.2em;
font-weight:bold;
text-align:center;
}
<body>
<div id="MAINWRAPPER">
<div id="WRAP">
<div class="frame"><a href="#">
<object class="title">TITLE</object></a><div class="price">50</div></div>
</div>
</div>
</div>
</body>
Remove width and float from .frame and try like this: Demo
.frame {
height:300px;
position:relative;
background-color:#fff;
display:block;
border:1px solid #959595;
border-radius:4px;
text-align:center;
margin:2%;
}
How to center a div inside a page container in your HTML page :-
Just add following bootstrap class to do this in your HTML page :-
text-center col-md-offset-2
Description :-
Here offset value is the margin from the left hand side so by increasing decreasing the value of the offset you can set the margin.
Following HTML, displays a picture in the background and text nhs subscription written over it. Now when I give class="nhs_head" margin-top text along with image moves down. Why is it so ?
How can I just give text the margin ?
<body>
<div class="image_holder">
<div class="nhs_head"> NHS SUBSCRIPTION </div>
</div>
</body>
CSS:
.image_holder {
position:relative;
background-image:url(bg2.jpg);
height:768px;
width:1366px;
}
.nhs_head {
display:block;
width:60%;
margin:0 auto;
border:2px solid white;
font-family:Calibri;
font-weight:800;
font-size:30px;
color:white;
}
Demo
If you want to apply margin-top to text you can position absolute the text in relatively positioned image div.
css
body, html {
margin:0;
}
.image_holder {
position: relative;
background-image:url('http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg');
height:768px;
width:1366px;
}
.nhs_head {
width:60%;
margin:0 auto;
border:2px solid white;
font-family:Calibri;
font-weight:800;
font-size:30px;
margin-top: 30px;
color:white;
position: absolute;
left:0;
right:0;
margin-top: 30px;
}
I need to show two <div>s next to each other and with different backgrounds.
Unfortunately, the background-color of the second <div> is ignored. I have read some posts and people suggest to add clear:both;. Unfortunately, it doesn't help. Is there any way how to get a background-color for .div2?
CSS:
.div1 {
margin-top:10px;
float:left;
background:blue;
width:382px;
padding:0 5px 10px 10px;
}
.div2 {
margin-top:10px;
width:374px;
background:red;
padding:0 10px 10px 0;
}
.clear {
clear:both;
}
HTML:
<div class="div1">DIV1</div>
<div class="div2">DIV2</div>
<div class="clear"></div>
Ok think i understood your problem. You want the element's next to each other.
Here is a CSS for this:
.div1 {
float:left;
background:blue;
width:382px;
padding:0 5px 10px 10px;
}
.div2 {
/* div1 will follow this */
margin-top:10px;
/* width of div1 + it's paddings */
margin-left:397px;
width:374px;
background:red;
padding:0 10px 10px 0;
}
.clear {
clear:both;
}
And here is a demo: http://jsfiddle.net/rvuyH/2/
just add float:left for div2 css like below to display both divs next to each other with background color
.div2{margin-top:10px;width:374px;float:left;background:green;padding:0 10px 10px 0;}
I have just changed the code given by #user3401335
JS FIDDLE DEMO. Please check it out
HTML:
<div class="div1">DIV1</div>
<div class="div2">DIV2</div>
<div class="clear"></div>
CSS:
.div1 {
margin-top:10px;
float:left;
background:blue;
width:50%;
padding:0 5px 10px 10px;
}
.div2 {
margin-top:10px;
width:45%;
background:red;
padding:0 10px 10px 0;
float:left;
}
I have read through countless threads on here and others, but have yet to find one that works for me. I am trying to get this darn div to center on the bottom of my page. It is kind of like a footer, but not exactly.
HTML :
<div id="menucontainer">
<div id="menu">
<ul>
<li><img style="width:270px; height:150px; padding-right:25px; padding-top:15px;" src="style/images/UAH.png"></li>
<li>another big test</li>
</ul>
</div>
</div>
CSS :
#menucontainer{
position:fixed;
bottom:0;
}
#menu{
position:fixed;
padding-top:5px;
padding-bottom:15px;
background-color:rgba(0,0,0,0.5);
bottom:0px;
height:200px;
width:1218px;
border:3px solid #000000;
box-shadow:0px -5px 5px #888888;
}
li{
float:left;
margin-left:-10px;
margin-right:-10px;
text-align:center;
list-style:none;
height:190px;
width:300px;
border-left:2px solid #FFFFFF;
border-right:2px solid #FFFFFF;
}
This should be all you need:
#menucontainer {
position: fixed;
bottom: 0;
width: 100%; /* ADD - make sure this container spans the entire screen */
text-align: center; /* Align contents to the center */
}
#menu {
/* remove position: fixed */
display: inline-block;
margin: 0 auto; /* Centers the block */
text-align: left; /* Reset the text alignment */
... /* The rest stays the same */
}
<style>
#menucontainer{
position:absolute;
bottom: -420px;
height: 200px;
margin: 0 auto;
position: relative;
width:1218px;
}
#menu{
position: relative;
padding-top:5px;
padding-bottom:15px;
background-color:rgba(0,0,0,0.5);
bottom:0px;
height:200px;
border:3px solid #000000;
box-shadow:0px -5px 5px #888888;
}
li{
float:left;
margin-left:-10px;
margin-right:-10px;
text-align:center;
list-style:none;
height:190px;
width:300px;
border-left:2px solid #FFFFFF;
border-right:2px solid #FFFFFF;
}
</style
DEMO
I've made some fundamential changes.
Firstly, your #menucontainer. You don't need fixed position - we can use 'sticky footer' technique to make it allways be hitched to the bottom; as we know the width, margin: 0 auto; will help us center it horizontally.
#menucontainer{
position:relative;
width: 1218px;
height:200px;
margin: 0 auto;
}
Secondy, I've added some fake content (.fake-content div) to help you get the idea how this all will look on site.
I've also added clearfix method for proper height rendering of an elements with floated children. More info here (also easy to find anywhere else).
Sticky footer technique has been taken from CSS Tricks site
Any questions? Is that what you was looking for?
I'm trying to make responsive design.
DEMO http://jsfiddle.net/tbuU8/
It should be something like this image.
There are mainly 2 section such as Left and Right.
Left section is fixed with 300px width.
About Right section, it can be shrink(narrow) down to 300px.
When if it's narrower than that, right section should be shown on the bottom just like the image below.
right section should stay in right, unless width is narrowed down to under 300px.
when if it's under 300px, it should be shown in the bottom.
It needs break at the edge of right section when if it's long length text
In my demo, it shows right section on the bottom when the length of the character is long.
it needs break and starts at new line. It always try to show that in 1 line.
How can I show right section on the right part, and text in that needs break.
Output that I want
July 22, 2013 11:34 Helloooooooooooooooooooooooooooooooooooooooooooooo <= need break!
John Smith ooooooooooooooooooo!
Avatar
HTML
<div class="Row">
<div class="Box">
<div class="Left">
<div class="posted_at">July 22, 2013 11:34</div>
<div class="user">John Smith</div>
<div class="avatar">avatar</div>
</div>
</div>
<div class="Box">
<div class="Right">
<div class="body">Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</div>
<div class="image"></div>
</div>
</div>
</div>
CSS
div.Row{
border:1px solid rgb(0, 0, 0);
min-width: 300px;
width: 100%;
background-color:#ffffff;
margin-bottom: 20px;
margin-right: 20px;
float:left;
display:block;
}
div.Box{
padding:0px;
text-align:center;
float:left;
}
div.Left{
width:300px;
padding-top:5px;
padding-bottom:15px;
text-align:center;
color:#000000;
clear:both;
}
div.LeftImage{
margin: 15px 15px 15px 15px;
}
div.Right{
padding-top:15px;
padding-right:10px;
text-align:left;
color:#000000;
clear:both;
min-width: 300px;
word-break: break-all;
}
div.posted_at{
padding:5px;
}
div.icon{
display:inline-block;
padding: 10px;
}
div.icon img{
width:100%;
height:100%;
}
use this
.Row{
border:1px solid rgb(0, 0, 0);
width: 300px;
background-color:#ffffff;
margin-bottom: 20px;
margin-right: 20px;
float:left;
display:block;
}
.Box{
width:700px;
padding:0px;
text-align:center;
float:right;
}
try this
div.Row
{
border:1px solid rgb(0, 0, 0);
min-width: 300px;
width: 100%;
background-color:#ffffff;
margin-bottom: 20px;
margin-right: 20px;
float:left;
display:block;
}
div.Box
{
padding:0px;
text-align:center;
float:left;
}
div.Left
{
width:300px;
padding-top:5px;
padding-bottom:15px;
text-align:center;
color:#000000;
clear:both;
}
div.LeftImage
{
margin: 15px 15px 15px 15px;
}
div.Right
{
padding-top:15px;
padding-right:10px;
text-align:left;
max-width:300px; word-wrap:break-word;
}