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..
Related
I need to create an image gallery as shown below. It's working fine but I need to put a title below the image (each and every image has a title). When I have tried like below - that title is not showing correctly. Can you show me how to do that?
Html
<ul id="thumbnailsList">
<li *ngFor="let image of datasource">
<img src="{{image.url}}" class="tn" data-toggle="modal" data-target="#selectedImageModal" (click)=setSelectedImage(image)>
<div class="myClass"><strong>{{image.title}}</strong></div>
</li>
</ul>
css
.myClass {
position: absolute;
}
Result :
Update :
When I removed the .myClass it shows like below.But I need to show images horizontally and text bottom of the image.
To make it work using position:absolute, you need to give a parent container a position property doing:
#thumbnailsList li
position: relative
I have done it using Bootstrap responsive design.
HTML
<div class="row">
<div *ngFor="let image of dataCollection" class="col-md-3 col-sm-4 col-xs-6">
<img class="img-responsive tn" src="{{image.blobFileUrl}}" data-toggle="modal" data-target="#selectedImageModal" (click)=setSelectedImage(image) />
<div class="desc">{{image.name}}</div>
</div>
</div>
CSS
div.desc {
padding: 15px;
text-align: center;
}
.tn {
margin: 2px 0px;
box-shadow: #999 1px 1px 3px 1px;
cursor: pointer;
width: 100% !important;
height: 200px !important;
}
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.
I'm trying to center 4 divs inside a bigger div with equal margin between them, and it doesn't seem to work.
I've looked at other answers and tried margin: 0 auto but it didn't work for me.
here's the HTML:
<div id="footer_frame">
mail#gmail.com
<span id="phone">044-1234567</span>
<div id="footer_icons">
<div class="icon_div">
<img src="images/youtube.png" alt="Watch our work at our YouTube page" class="icon" />
<p>YouTube</p>
</div>
<div class="icon_div">
<img src="images/email.png" alt="Contact us" class="icon" />
<p>Email</p>
</div>
<div class="icon_div">
<img src="images/googleplus.png" alt="Join our circle # Google+" class="icon" />
<p>Google+</p>
</div>
<div class="icon_div">
<img src="images/facebook.png" alt="Join our Facebook page" class="icon" />
<p>Facebook</p>
</div>
</div>
And the CSS:
#footer_frame {
position: absolute;
background-color: rgba(0,0,0,0.8);
width: 25%;
height: 16%;
top: 83%;
left: 37.5%;
}
#footer_icons {
width: 90%;
clear:both;
margin-top:12%;
}
#footer_icons .icon_div {
display: inline-block;
text-align: center;
font-size: 0.9em;
color: white;
}
#footer_icons .icon_div p {
margin: 0.2em;
}
Now it looks like this, but what I want is that the 4 icons will be centered inside the black div.
Thanks.
Wrap all four inner divs with a single DIV and then set a fixed width and use margin: 0 auto on that one.
When I do things like this I try to use flexboxes as often as possible. The above answer works perfectly but I just thought you might want to try these two options out.
#footerIcons{ display: inline-flex;} .iconDiv{ display: -webkit-flexbox;
-webkit-flex-pack: center;
-webkit-flex-align: center;
}
This should work. For more info visit this link. Before you try to use flexbox in your code make sure you have a ll the right vendor prefixes.
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.
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.