I'm a complete noob with programming. I am working on a project and I can't figure out the last piece. I am using bootstrap to create a jumbotron and I want to create an overlay with text information. Below is my code.
Thanks.
<div class="jumbotron" style="background-color: white;" >
<img class="img-responsive" src="images/sanDiegFallback.png">
<div class="overlay">
<h1>ReCon 2015</h1>
<div class="fadeInDown">
<p>October 14-16, 2015</p>
</div>
<div class="fadeInDown2">
<p>Marriott Marquis<br />San Diego, CA</p>
</div>
<div class="fadeInDown3">
<p>Registration open now<br />
<span style="font-size: 14px; line-height: 18px;">(Watch your inbox for details)</span>
</div>
<div class="fadeInDown4">
<a class="cta" href="https://twitter.com/intent/tweet?text=Save+the+date+for+%23ReCON2015+in+San+Diego%3A+October+14-15+http://is.gd/FkQv3k+%40SVISanDiego" style="background-color:none;
background-image: src(images/twitter_bg.png);
border:2px solid #ffffff;
border-radius:25px;
color:#ffffff;
display:inline-block;
font-family: 'proxima_nova_rgregular', Helvetica, Arial, sans-serif;
font-size:18px;
line-height: 18px;
text-decoration:none;
padding: 15px 35px;
text-indent: 20px;
" target="_blank">Share on Twitter</a>
</div>
</div>
</div>
You're not really clear, but if I get you right, you could just make the overlay position: absolute and add top: 0; left: 0; right: 0; bottom: 0;. If it's not already, your jumbotron has to be position: relative;.
With this technique your overlay will be the same size as your jumbotron. Depending on what you are really trying to do, you could have to add a higher z-index to the overlay.
How about adding a class to the jumbotron like
.jumbotron .withImage{
background: url(../pathToImage);
background-size:contain;
}
that way whatever you put over it will be over your image.
Related
Bottom text of the image is shifting the image up in the list of thumbnails.
I saw some link about Mozilla firefox shifting images up and the solution is given was to use
vertical-align: top;
or
vertical-align: bottom;
The problem was half solved as the text is extending beyond its normal height to another image below it instead of pushing the image down to maintain a general form.
Here is my CSS code
.flex-cover{
width:100%;
display:flex;
justify-content: center;
}
.flex-child{
text-align: center;
}
.flex-head{
font-size: 20px;
margin-top: 10px;
color: #ce7842;
text-shadow: #aaa 0 0 1px;
font-weight: bold;
padding:10px;
text-align: center;
}
.flex-body{
color:#969c84;
}
.flex-box{
display: inline-block;
width:140px;
height:140px;
margin:10px;
vertical-align: top;
text-align: center;
}
.flex-pics{
height:120px;
width:100%;
}
.flex-box .flex-pics{
background-size: 100% 100%;
}
Here is the html code
<div class="flex-cover">
<div class="flex-child">
<div class="flex-head"> Recent Articles</div>
<div class="flex-body">
<div class="mycover flex-box">
<div class="pull-left flex-pics" style="background-image: url("/images/im/imm20.jpg");"></div><br>
My Article 1
</div>
<div class="mycover flex-box">
<div class="pull-left flex-pics" style="background-image: url("/images/im/imm20.jpg");"></div><br>
My Article 2 with some more content added to it
</div>
<div class="mycover flex-box">
<div class="pull-left flex-pics" style="background-image: url("/images/im/imm20.jpg");"></div><br>
My Article 2
</div>
<div class="mycover flex-box">
<div class="pull-left flex-pics" style="background-image: url("/images/im/imm20.jpg");"></div><br>
My Article 4
</div>
</div>
</div>
</div>
Original View When Browser Not Folded
Image After Browser was folded
As you can see, some text is going under instead of pushing the image down. I also do not want to use:
float:left
because it seems impossible to shift the image to center when the float is used. So, a good answer will be duly awarded. Thanks in anticipation.
You can delete the height: 140px; for .flex-box. That's why it happens.
This is a page from my blog.
I have created a gray colored box titled Journal entries.
The Point 1 reads as For recording...
As you can see, the text starting from the word For is slightly below the level of the number 1.
Same is the case with Point 2.
Please suggest what changes should I make to the code.
My code:
<div style="background-color: #F0F0F0; display: table-cell; vertical-align: middle; border-radius: 15px;">
<div style="margin-left: 10px; margin-right: 100px; margin-top: 15px; margin-bottom: 15px;">
<div style="text-align: center;"><span style="font-family: georgia; font-size: 17px; font-weight: bold;">Journal entries</span></div>
<br>
<div style="font-family: serif; font-size: 17px; margin-left: 30px;">
<div style="float: left;">1. </div>
<div>For recording 1<sup>st</sup> aspect, asset value is reduced period-wise by crediting its account:</div>
<div style="margin-left: 20px;">Depreciation A/c ...Dr.
<br>
To Asset A/c</div>
<br>
<div style="float: left;">2. </div>
<div>For recording 2<sup>nd</sup> aspect, the depreciation for the period is transferred to the Profit & Loss Account:</div>
<div style="margin-left: 20px;">Profit and Loss A/c ...Dr.
<br>
To Depreciation A/c</div>
</div>
</div>
</div>
Based on your comment, you don't want the text to go below the number at all. One option would be to place the number within the text div and then position it absolutely in the corner. Then add a bit of padding to the div to move the text over.:
<div class="text">
<div class="num">
1.
</div>
stuff
</div>
.text{
position: relative;
padding-left: 20px;
}
.num{
position: absolute;
width: 20px;
top: 0;
left: 0;
}
http://jsfiddle.net/THYga/1/
Use SPAN instead of DIV elements. if you can't change the html then assign display: inline to those DIV elements using CSS. and also don't use float: left to the numbering element.
The UI of my page currently shows an Image in backgroud and text on left hand top corner of the page. Following is the code I am using for the image.
<div>
<div style= "z-index: 1; position: absolute; text-align: left; border: 1px solid black;">
<img src="slide1.jpg" alt="alt text" style="height:220px;width:500px;border-width:0px;" />
</div>
<div id="curtain" style="z-index: 2; position: absolute; padding-left: 10px;">
<div style="background-color: transparent; font-weight: bold; font-size: 1.8em; padding-top: 5px;">
Profile
</div>
<div style="font-size: 1em; width: 215px; color: #cccccc;">
He is a good citizen and a great teacher.
</div>
</div>
</div>
I want to add 2 small icons aligned vertically on the right hand side of this image.
Can someone help me with the css ?
Something like this?
http://jsfiddle.net/7KTEQ/
Just add <div id="smallImages"><img src='ONE' /> <img src='two' /></div> inside second div
and css for it is:
#smallImages {
position:absolute;
margin-left:400px;
}
change margin-left for css depending on second div width and image sizes..
I am making an image gallery, and I need to display images in a grid like layout. I don't want to use any frameworks, and would prefer to do things from scratch. Also, I would prefer not to use tables for the layout, since it will be a pain to add images to the table dynamically.
The layout consists of divs, like:
<div id="gallery">
<div class="uPic">
<img src="1.png">
<p> description </p>
</div>
<div class="uPic">
<img src="2.png">
<p> description </p>
</div>
....
......
....
</div>
to achieve the grid look, I simply "float"-ed all .uPics to left....and given some padding and margin to the #gallery. So far everything works great.
The PROBLEM starts, when I try to give a hover effect to the images. initially the <p> is hidden, and I use jQuery to show it on hover. but on doing so, the images below the one I am hovering over, shifts towards the right instead of moving down. Any ideas?
If the height of your divs is variable then I would recommend either using clear:both on the first element of each new row OR putting each row in its own container div. Otherwise, as you've noticed, the divs under the selected one will probably be pushed to the side of the higher div instead of shifting down.
I'd also consider Matt's solution as divs moving around on mouseover imho gives a very chaotic look to a page.
But if you're set on doing it this way, check out this example:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#gallery .image p').hide();
$('#gallery .image').hover(
function() { $(this).find('p').show() },
function() { $(this).find('p').hide() }
);
});
</script>
<style>
#gallery {
width: 800px;
}
#gallery .image {
width: 200px;
float: left;
background: #eee;
margin-bottom: 10px;
}
#gallery .image.newline {
clear: both;
}
#gallery .image .placeholder {
width: 180px;
height: 200px;
margin: 10px;
background: #ccf;
}
#gallery .image p {
margin: 10px;
background: #fcc;
}
</style>
</head>
<body>
<div id="gallery">
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<!-- NOTE the added "newline" class where the new line starts! -->
<div class="image newline">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
</div>
</body>
</html>
The w3schools has a sample image gallery all in CSS. They add a border on hover of the image.
I would maybe set the width and height of the paragraph, and fix it using absolute positioning relative to the enclosing uPic div. That way you can have the paragraph of description appear "above" the image on hover without disturbing the flow. So, add position: relative; to the uPic, add something along the lines of position: absolute; left: 0px; top: 0px; to the <p>, and then adjust other things to suit.
I suggest that you choose a fixed height and width for your div :
It may fix your problem
It is not convenient for the user when a whole part of the grid is moving just to show up a little description, whether it is downward or to the right
I think this may be helpful
<style type="text/css" ><!--
#gallery_box{
width:728px;
height:545px;
border:solid #cccccc 1px;
margin:20px auto 0px;
padding:5px;
-moz-box-shadow:0px 18px 40px #ccc;
-webkit-box-shadow:0px 14px 40px
#ccc;
box-shadow:0px 5px 30px #ccc;
}
#thumbnail{
width:160px;
height:160px;
background:#f6f6f6;
border:solid #cccccc 1px;
border:solid #cccccc 1px;
margin:5px;
padding:5px;
float:left;
text-align:center;
position: relative;
line-height: 156px;
-moz-box-shadow:4px 4px 4px
#ccc;n-webkit-box-shadow:4px 4px 4px #ccc; box-shadow: 4px 4px 4px #ccc; } img {
border:none;
-moz-box-shadow:0px 8px 10px #ccc;
-webkit-box-shadow:0px 8px 10px #ccc; box-shadow: 0px 8px 10px #ccc; }
a{
color:#0066FF; text-decoration:none;
} a:hover{
color:#0099FF; }
--></style><pre>
<div id="gallery_box" >
<div id="thumbnail">
<a href="" ></a>
</div>
</div>
It doesn't stay where I want it, look at this:
<div style="float: left; width: 30%">
<img src="{avatar}" alt="" />
</div>
<div style="float:right; width: 70%; text-align: left">
{message}
</div>
<div style="clear:both"></div>
Internet Explorer:
Mozilla Firefox:
I want the text to be in the top (tried vertical-align: top), and i'd like the image to be in the white box in IE.
Hope someone more skilled can help me out.
Thanks!
Can't figure out the problem :/
Edit: Added whole code
* { padding: 0; margin: 0; }
body {
font: 11px Geneva, "Trebuchet MS", Arial, Verdana, sans-serif;
width: 999px;
background: #EFEFEF;
}
#content {
width: 400px;
}
.thread-content {
padding: 5px;
border: 1px solid #CECFCE;
background: #FFF;
}
div.header {
border: 1px solid #CECFCE;
background: #FFF;
margin-bottom: 10px;
}
<div id="content">
<div class="header">{title}</div>
<div class="thread-content">
<div style="float: left; width: 30%; padding: 5px">
<img src="{avatar}" alt="user avatar" />
</div>
<div style="float: right; width: 70%; text-align: left">
{message}
</div>
<div style="clear:both"></div>
</div>
</div>
Be sure the margin of both are set to 0:
<img src="{avatar}" alt="" style="float: left; width: 30%; margin: 0px"/>
<div style="float:right; width: 70%; text-align: left; margin: 0px">
{message}
</div>
<div style="clear:both"></div>
As css can be really tricky, some other solutions to try:
Let both float left, should make no difference.
Make sure the border doesn't increase the size.
Descrease the width of one a bit, IE is stubborn.
This happens because the sum of the (external) widths of the two floating divs is larger than the internal width of the external box, so they don't fit in the same row.
Try increasing the width of the external div, decreasing its padding, decreasing the width or margin or padding of the internal boxes.
Code works fine when I tried it. You sure there isn't any padding or margin on the image or the text? That would mess up the percentages you're using. If you have it examine the image and text in Firebug to see what styles are being applied.
When you say width: 30% or width: 70% it implies the width of the content inside the div excluding the padding, border and margin of the div. Looking at the images I am sure you have added some padding etc to both divs. Also I do not see any 'background: #fff' in your code, so I am not sure which one is the 'white' box.
Ok, did I get voted down because I used a table?
I am not by trade a designer, I am actually a programmer and I know there are hard-core css designers that cringe at the idea of using a table layout but it seems to works for me. The graphic designers that I work with give auto generated table layout from fireworks to work with which is a real pain.
Anyway the way I personally would try to accomplish the dersired effect though pure css would be more like.
<html>
<head>
<title>SandBox</title>
<style type="text/css">
#outerDiv
{
margin:0;
background-image:url(myImage.gif);
background-position:top left;
background-repeat:no-repeat;
padding-left:30%;
min-height:200px;
background-color:#777777;
}
#innerDiv
{
background-color:#333333;
}
</style>
</head>
<body>
<div id="container" style="width:500px;">
<div id="outerDiv">
<div id="innerDiv">content goes here</div>
</div>
</div>
</body>
Note: I am not a designer. I also made this a wiki. So please edit or at least leave a comment if you going to vote down.