I have a wrapper with absolute positioing and a bunch of divs inside it:
<div class="wrapper">
<div class="f inactive" style="width:12.5%"></div>
<div class="f" style="width:9.722222222222223%"></div>
<div class="f" style="width:9.722222222222223%"></div>
<div class="f" style="width:9.722222222222223%"></div>
<div class="f" style="width:9.722222222222223%"></div>
<div class="f" style="width:9.722222222222227%"></div>
<div class="f" style="width:9.722222222222227%"></div>
<div class="f" style="width:9.722222222222227%"></div>
</div>
.wrapper {
position: absolute;
width: 100%;
top: 0px;
background-color: #000;
padding:0;
margin:0;
}
i {
background-color: #83b209;
width: 100%;
}
div.f {
font-size: 0;
height: 12px;
position: relative;
display: inline-block;
background-color: #83b209;
}
div.f.inactive {
background: red;
opacity: 1;
}
The jsfiddle is here. As you can see, for some reason the wrapper is bigger than the inner divs when I want it to be same height as inner divs. You shouldn't be able to see the black bacground...
You can set line-height to 0 in your wrapper to solve this.
.wrapper {
line-height: 0;
}
Put height: 12px; on your .wrapper and put height: 100%; on your div.f
I've updated your Fiddle by setting a height on the wrapper and matching that in your divs.
Does that achieve what you wanted?
<div class="wrapper">
<div class="f inactive" style="width: 12.5%"></div>
<div class="f" style="width: 9.722222222222223%"></div>
<div class="f" style="width: 9.722222222222223%"></div>
<div class="f" style="width: 9.722222222222223%"></div>
<div class="f" style="width: 9.722222222222223%"></div>
<div class="f" style="width: 9.722222222222227%"></div>
<div class="f" style="width: 9.722222222222227%"></div>
<div class="f" style="width: 9.722222222222227%"></div>
</div>
.wrapper {
position: absolute;
width: 100%;
top: 0px;
background-color: #000;
padding:0;
margin:0;
height:15px;
}
i {
background-color: #83b209;
width: 100%;
}
div.f {
font-size: 0;
height: 15px;
position: relative;
display: inline-block;
background-color: #83b209;
}
div.f.inactive {
background: red;
opacity: 1;
}
I will just write this little answer.
display: inline-block; is causing this problem. You may want to go read up about what it does but you look like you have tried to solve it by keeping the <i></i> together and using font-size: 0;. Clearly not working for you tho.
So solution one, is to put font-size: 0; on the wrapper as you have it to low to affect the output.
CSS:
.rangeslider-wrapper {
position: absolute;
width: 100%;
top: 0px;
background-color: #000;
font-size: 0;
}
Demo here
Another solution is to use float: left; and not bother with display: inline-block;.
CSS:
.rangeslider .rangeslider-bg i {
font-size: 0;
height: 12px;
position: relative;
float: left;
}
Demo Here
Related
I want to have css style like in image. I could not find it in Bootstrap and can not remember what it is called in css style. Can anyone tell me how to style it?
Thanks.
<!DOCTYPE html>
<html>
<body>
<h1>The legend element</h1>
<form action="/action_page.php">
<fieldset style="height:200px;">
<legend>Personalia:</legend>
</fieldset>
</form>
</body>
</html>
This design can be achieved using tag in HTML.
To know more about the Legend tag, see the link below.
https://www.w3schools.com/tags/tag_legend.asp
Example of Legend Tag.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_legend
You can even do it with some Math+CSS.
body {
margin: 0px;
padding: 0px;
}
.outer {
margin: 20px;
height: 100px;
width: 300px;
border: 2px solid gray;
position: relative;
}
.block {
width: max-content;
height: 20px;
padding: 0 5px;
position: absolute;
top: -10px;
background: white;
}
.left {
left: 10px;
}
.right {
right: 10px;
}
.center {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<div class="outer">
<div class="block left">Left Title</div>
</div>
<div class="outer">
<div class="block center">Center Title</div>
</div>
<div class="outer">
<div class="block right">Right Title</div>
</div>
I've got the below div structure
<div id="news">
<div id="innerNews">
<div id="newsLeft" style="width:10%; height:100%"></div>
<img id="newsThumb" src="nwes.png" width="80%" />
<div id="newsRight" style="width:10%; height:100%"></div>
</div>
</div>
#news{
width:30%;
position: relative;
}
#innerNews{
position: absolute;
width: 100%;
height: 100%;
}
How can I get #newsLeft to be aligned to the left and #newsRight to be aligned to the right of #news?
CSS Table
Because of your structure I'd recommend to use display: table; thereby you'll get equal column height. Also depending on what you are trying to do you can substitute middle column by another div and set a background to it, so you would be able to place some content in it.
#news {
display: table;
height: 150px;
}
#innerNews {
display: table-row;
}
#newsLeft, #newsThumb, #newsRight {
display: table-cell;
}
#newsLeft, #newsRight {
background-color: firebrick;
width: 11%
}
<div id="news">
<div id="innerNews">
<div id="newsLeft"></div>
<img id="newsThumb" src="http://placehold.it/350x150" />
<div id="newsRight"></div>
</div>
</div>
Floating
Another way to do that is using float: left;. There is no point to use float: right; on the third div because you have total width of three blocks equal 100%: [10%][80%][10%].
#innerNews {
height: 150px;
width: 400px;
}
#newsLeft, #newsThumb, #newsRight {
float: left;
}
#newsThumb{
width: 80%;
height: 100%;
}
#newsLeft, #newsRight {
background-color: firebrick;
width: 10%;
height: 100%;
}
<div id="news">
<div id="innerNews">
<div id="newsLeft"></div>
<img id="newsThumb" src="http://placehold.it/350x150" />
<div id="newsRight"></div>
</div>
</div>
You can remove width from ##innerNews to achieve certain effect, but again - it depends on what you want.
Position
If you'd like to stick with position
#innerNews {
height: 150px;
width: 400px;
position: relative;
}
#newsLeft, #newsThumb, #newsRight {
position: absolute;
top: 0;
}
#newsLeft {left: 0;}
#newsThumb {left: 10%;}
#newsRight {left: 90%;}
#newsThumb{
width: 80%;
height: 100%;
}
#newsLeft, #newsRight {
background-color: firebrick;
width: 10%;
height: 100%;
}
<div id="news">
<div id="innerNews">
<div id="newsLeft"></div>
<img id="newsThumb" src="http://placehold.it/350x150" />
<div id="newsRight"></div>
</div>
</div>
You can use the css float, like
#newsLeft {
float: left;
}
#newsRight {
float: right;
}
Here is how you can do it. Use position attribute as required.
#news{
width:50%;
height:200px;
position: relative;
background:#ccc;
margin-left:100px;
display:inline-block;
}
#innerNews{
position: absolute;
width: 100%;
height: 100%;
}
#newsLeft
{
position:absolute;
height:200px;
width:200px;
left:-30px;
background:#444;
display:inline-block;
width:30%; height:100%
}
#newsRight
{
position:absolute;
height:200px;
width:200px;
left:230px;
background:#444;
display:inline-block;
width:30%; height:100%
}
<div id="news">
<div id="innerNews">
<div id="newsLeft" >newsleft</div>
<img id="newsThumb" src="nwes.png" width="80%" />
<div id="newsRight" >newsright</div>
</div>
</div>
Having some trouble getting the desired effect on an image overlay with responsive image. What I want is upon hovering over the image, the colour block and text to appear as shown, but for the text to be in the vertical centre of the div. I have tried vertical-middle but it doesn't seem to be working. Can't make the width and height set value as need to collapse and expand. If anyone can help i'd appreciate it. Thanks
Code, CSS below
.overlay-box {
position: relative;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(38,150,198,0.5);
}
.overlay p {
color: #ffffff;
text-align: center;
}
.overlay-box:hover .overlay {
display: block;
}
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3" style="margin-bottom: 20px;">
<div class="overlay-box">
<a href="#" target="_blank">
<div class="overlay">
<p>1st line<br>2nd line<br><br>
3rd line</p>
</div>
<img src="http://placehold.it/2000x2000" class="img-responsive "/></a>
</div>
</div>
</div>
img{
max-width: 100%;
height: auto;
}
.overlay-box {
position: relative;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(38,150,198,0.5);
}
.overlay:before {
content: '';
display: inline-block;
width: 1px;
height: 100%;
vertical-align: middle;
border: 1px solid;
}
.overlay p {
color: #ffffff;
text-align: center;
display: inline-block;
vertical-align: middle;
width: 90%;
}
.overlay-box:hover .overlay {
display: block;
}
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3" style="margin-bottom: 20px;">
<div class="overlay-box">
<a href="#" target="_blank">
<div class="overlay">
<p>1st line<br>2nd line<br><br>
3rd line</p>
</div>
<img src="http://placehold.it/2000x2000" class="img-responsive "/></a>
</div>
</div>
</div>
You need to wrap the overlay with another div(since tables seem to ignore their height and width when they're absolute) and add position:absolute to it. Then add dislpay:table and dislpay:table-cell; vertical-align:middle for the child divs.
Check out this fiddle: https://jsfiddle.net/65cvzcev/
I'm desperately trying to format two images side by side using CSS.
I want the first one to be fixed-size and the second one to take up the remaining width (but it should stop growing when it has the same height as the first one). This is my code:
<span style="height:80px; width:100%">
<img src="images/navicon.png" style="width:60px; height:60px; padding:10px 10px 10px 10px; "/>
<img src="images/logo.png" style="max-height:60px; padding: 10px 10px 10px 10px;" />
</span>
But instead of the second image shrinking (maintaining aspect-ratio) when there is not enough space, the line breaks.
Thanks for any help!
This possible solution requires CSS calc(), see the demo follows.
div {
height: 100px;
overflow: hidden;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
}
span:nth-child(2) {
width: calc(100% - 100px);
}
span:nth-child(2) img {
width: 100%;
height: auto;
}
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/100/100" /></span>
</div>
JSFiddle: http://jsfiddle.net/Low7k16d/
HTML:
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/160/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/100/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/60/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
</div>
<div class="image-container">
<div class="image"><img src="http://lorempixel.com/1000/60/abstract/1"></div>
<div class="image image-auto"><img src="http://lorempixel.com/1500/600/abstract/1"></div>
</div>
CSS:
.image-container {
width: 100%;
display: flex;
align-items: flex-start;
}
.image {
margin: 10px;
padding: 0;
flex-shrink: 0;
}
.image img {
width: 100%;
margin: 0;
padding: 0;
max-height: 80px; /*Line added to limit height*/
}
.image-auto {
flex-shrink: 1;
height: auto;
}
And I updated the Pen: http://codepen.io/czoka/pen/XbJXVO
I don't completely understand your question but this is what I thought you mean.
NOTE: this is my updated version of sdcr's answer.
CSS:
div {
height: 80px;
font-size: 0;
}
span {
display: inline-block;
vertical-align: top;
padding:10px;
}
span:nth-child(1) img {
max-height: 60px;
}
span:nth-child(2) img {
width: 100%;
HTML
<div>
<span><img src="http://lorempixel.com/100/100" /></span>
<span><img src="http://lorempixel.com/output/people-q-c-924-67-9.jpg" /></span>
</div>
See jsfiddle:
http://jsfiddle.net/Low7k16d/4/
I know this is probably totally against the whole idea of the grid system and the responsiveness but let's just assume I want to do the following anyway:
I have the layout that you can see in the picture below.
The problem is initially the whole image+text part takes col-md-9 and the twitter feed takes col-md-2 span on a 1920x 1080 screen. However when displayed on a screen of smaller resolution like 1280x800, I can keep the SAME LAYOUT by changing the image+text part to take up col-md-5 span. So my question is, is it possible to change the element's col-md class using media queries ? I know CSS cannot touch an elements classes but I thought maybe bootstrap came along with a solution. Otherwise I know I can use JavaScript to get the window size and swap the classes.
Here is some code should you need. I didnt want to post any code that is not relevant but if you guys need the whole thing, I can set up a jsfiddle prob.
Thanks ! 1
HTML:
<div class="newsfeed">
<div class="container">
<div class="row">
<div class="col-md-11 mainfeed">
<div class="row top-buffer">
<div class="col-md-3">
<img src="images/chris.jpg" width="190px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Some text here</h2>
<p id="bodypart">Some more text here </p>
</div>
</div>
<div class="row top-buffer topborder">
<div class="col-md-3">
<img src="images/city.jpg" width="190px" height="280px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Text text text</h2>
<p id="bodypart">Text....</p>
</div>
</div>
<div class="row top-buffer topborder">
<div class="col-md-3">
<img src="images/alex.jpg" width="190px" height="280px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Some news text </h2>
<p id="bodypart">xxxxxxxxxxx
</p>
</div>
</div>
</div>
<div class="col-md-1 pull-right">
<!-- Tweet RRS-->
<div class="tweets pull-right">
<a class="twitter-timeline" href="https://twitter.com/sinanspd" data-widget-id="540693554432323584"
width="380px" data-chrome="transparent noscrollbar">Tweets by #sinanspd</a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],
p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","twitter-wjs");
</script>
</div>
</div>
</div>
</div>
</div>
Relevant CSS:
/* ----------COMMON STYLING ------ */
body{
background-color: black !important;
}
.container{
width: 100%;
}
.jumbotron{
height: 340px;
background-size: cover;
background-image: url("images/banner.jpg");
background-repeat: no-repeat;
background-position: center;
}
.nav li{
display: inline;
margin-right: 130px;
}
#nomarginleft{
margin-right: 0px;
}
.nav a{
font-family: "Crimson Text";
font-size: 28px;
font-weight: bold;
z-index: 2;
text-decoration: none !important;
}
.pull-left{
margin-left: -350px;
margin-top: -30px;
}
.pull-right{
margin-right: -300px;
margin-top: -30px;
}
.nav{
background-color: black;
width: 100%;
}
.fixed {
position: fixed;
top: 0px;
height: 50px;
z-index: 1;
background-color: black;
}
/*--------------------- HOME PAGE ---------------- */
#display{
width: 960px;
height: 420px;
overflow: hidden;
margin: 30px auto 0px auto;
border-radius: 4px;
background-color: white;
}
#display ul{
position: relative;
margin: 0;
padding: 0;
height: 960px;
width: 420px;
list-style: none;
}
#display ul li{
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 960px;
height: 420px;
}
#head > p{
font-family: "Crimson Text";
font-size: 30px;
font-weight: bold;
}
#head{
margin-top: 30px;
margin-left: 220px;
}
.newsfeed{
width: 86%;
height: 800px;
margin-left: -160px;
}
.mainfeed{
margin-left: 130px;
}
.pullup{
margin-top: 0px;
}
.top-buffer{
margin-top: 20px;
}
.topborder{
border-top: 1px solid white;
}
.tweets{
background-color: rgba(247,12,12,0.3);
border: 1px solid white;
margin-left: 50px;
border-color: white;
}
#media (min-width: 1000px) and (max-width: 1300px){
.jumbotron{
height: 250px;
}
.nav li{
margin-right: 50px;
}
.nav a{
font-size: 25px;
}
.pull-left{
margin-left: -60px;
}
.pull-right{
margin-right: -40px;
}
#display{
width: 700px;
height: 350px;
}
#head > p{
font-size: 25px;
}
#head{
margin-top: 30px;
margin-left: 80px;
display: block;
}
.newsfeed{
width: 86%;
}
.newsfeed h2{
font-size: 20px;
}
.mainfeed{
margin-left: 230px;
}
.newsfeed h2, .newsfeed p{
margin-left: 0px;
}
.top-buffer{
width: 800px;
}
.newsfeed .pull-right{
margin-right: -120px;
}
.tweets{
margin-right: -500px;
}
}
Why don't you change your code like below
<div>
<div class="col-lg-9 col-md-5">
<h2 class="pullup">Text text text</h2>
<p id="bodypart">Text....</p>
</div>
<div class="col-lg-3 col-md-5">
<img src="images/alex.jpg" width="190px" height="280px" />
</div>
</div>
So now, on bigger screens the screen will we divided 9 cols and 3 cols, on smaller screen sizes it will be 5 cols each.
If you want to change the layout for smaller screen i.e. tablets and screen just user col-sm-xx and col-xm-xx respectively.