What I am trying to do is when you hover mouse over div1 it will effect links div
When hovering div1:
div .div1:hover ~ linksdiv:after {
display:inline-block;
transition-duration: all 1s;
color:#FFF;
padding-left:50px;
content:"index";
linksdiv without hover:
display:inline-block;
position:relative;
transition-duration:1s;
transition-property:margin;
transition-delay:2s;
float:left;
margin-left:100px;
width:500px;
height:100px;
font-size:100px;
font-weight:900;
top:-230px;
content: string;
The purpose of this code is to have the text go white on a red background while giving a moving effect.
But all it does is display a white text.
This worked when I did not use "content" but instead had a finished written text in the div. :(
edit:
html
<div id="surrounding">
<div id="left">
<div class="div1">
index
</div>
<div class="div2">
media
</div>
<div class="linksdiv">
</div>
</div>
<div id="header">
</div>
<iframe id="content" src="">
</iframe>
</div>
Related
I have a section inside which there is an image of a fixed height and a div which has some text and a background color in it. I want to make the height of the div and the image same and the div with the background color to overlap the image so that only text and background color are seen and not the image but the height should be of the image.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section>
<img src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" class="img-responsive">
<div style="background-color:blue">
<h2>ABCD</h2>
</div>
</section>
The image has a bootstrap class of img-responsive so that on resize it shrinks and also the div along with it. How can I do this?
position properties will work same as you want. section will take img's height and by setting height:100%; and position:absolute to div, it will take same height as img
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
section {
position: relative;
}
div {
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
}
</style>
<section>
<img src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" class="img-responsive">
<div style="background-color:blue">
<h2>ABCD</h2>
</div>
</section>
Please have a link of your solution
http://codepen.io/santoshkhalse/pen/pNWpYd
<section>
<img class="img-height" src = "https://openclipart.org/image/2400px/svg_to_png/28688/skotan-Thumbs-up-smiley.png" class = "img-responsive">
<div class="content-text">
<h2> Your text will render here </h2>
</div>
</section>
.img-height{
height:100px;
position:absolute;
}
.content-text{
width:100%;
height:100px;
background:green;
padding-left:120px;
}
img{ display:block; max-width:100%; height:auto;}
section{ position:relative}
.overlap-text{background:rgba(0,0,0, 0.5); color:#fff; position:absolute; left:0; top:0; height:100%; width:100%;}
<section>
<img src="https://s-media-cache-ak0.pinimg.com/originals/2a/94/e3/2a94e33f7afe6600fe9c97eda3a386b3.jpg" class="img-responsive"/>
<div class="overlap-text">
<h2>Lorem Ipsum dummy text</h2>
</div>
</section>
I have created a group of images in a tiles format like 10 images in a row in a square box of 3 rows. Now i want my tiles of images to be in background and also be transparent. I want to place one more div element over the top of the tiles of images. for ex: I want my page to be like as : www.befunky.com
Where there are images arranged in tiles and over it a plain screen is present. The background tiles images are visible. I know they might have used an image for this but my requirement i want to do it using css.
My code is as follows:
<div class="in-section">
<div class="tiles tile1">
</div>
<div class="tiles tile2">
</div>
<div class="tiles tile3">
</div>
<div class="tiles tile4">
</div>
<div class="tiles tile5">
</div>
<div class="tiles tile6">
</div>
<div class="tiles tile7">
</div>
<div class="tiles tile8">
</div>
<div class="tiles tile9">
</div>
<div class="images">
</div>
</div>
My Css is:
.in-section{
margin-top:10px;
height:470px;
width:470px;
background-color:red;
margin-left:380px;
}
.tiles{
height:150px;
width:150px;
background-color:grey;
float:left;
border: 1px solid green;
}
.tile1, .tile2, .tile3, .tile4, .tile5, .tile6, .tile7 , .tile8, .tile9{
padding:2px;
margin:3px;
}
Add these CSS styles. Use z-index to send your images behind the in section div.
.tiles{
position: relative;
z-index: -50;
}
.in-section{
background-color:rgba(255,0,0,.8); //rgba color for red with some transparency.
};
Example (with "OR" as text):
The idea is that on collapse of columns—i.e.: view on mobile sized-screen—it will appear betwixt submit and Click me.
How do I add some text onto the divider between rows?
Why don't you use a .span between your two forms ?
<div class="container">
<div class="row">
<div class="span5">
form 1
</div>
<div class="span2">OR</div>
<div class="span5">
form 2
</div>
</div>
</div>
Demo (jsfiddle)
<style>
.wrapper{
width:900px;
margin:0 auto;}
.left{
min-height:300px;
width:400px;
background-color:#9F0;
float:left;}
.right{
min-height:300px;
width:400px;
background-color:#9F0;
float:right;}
.mid{
padding-top:150px;
padding-left:40px;
min-height:150px;
width:60px;
float:left;
background-color:#C00;}
</style>
<body>
<div class="wrapper">
<div class="left">SUBMIT CONTENT HERE</div>
<div class="mid">OR</div>
<div class="right">CLICK ME CONTENT HERE</div>
</div>
I think this can help you. now you can style it if you want to add vertical bar on mid you can add that bar as a background image
then you can style it or add any DIV tags to it Its your wish.. ;)
I want to make two columns page with box one (box1) and box two(box2). Then just after h2, I want to make two columns inside box2 with box2.1 and box2.2.
Here is my HTML code
<body>
<div id="box1">
<h1>Here is the box one.</h2>
</div>
<div id="box2">
<h2>Here is the box two.</h2>
<div id="box21">
<p>Here is the box2.1</p>
</div>
<div id="box22">
<p>Here is box 2.2</p>
</div>
</div>
</body>
And here is my CSS part.
#contentLeft{
float:left;
width:300px;
After that, I have no idea what to do. Tried number of ways, it didn't work. Could you please help here?
It may help you:
HTML:
<div id="box1">
<h1>Here is the box one.</h2>
</div>
<div id="box2">
<h2>Here is the box two.</h2>
<div id="box21">
<p>Here is the box2.1</p>
</div>
<div id="box22">
<p>Here is box 2.2</p>
</div>
</div>
CSS:
#box1{
float:left;
widht:50%;
background:#FF0000;
}
#box2{
float:left;
width:50%;
background:#00FF00;
}
#box21{
float:left;
width:50%;
background:#0000FF;
}
#box22{
float:left;
width:50%;
background:#e4e4e4;
}
Just for your reminder, don't use dot(.) in id or class name. You can also simplified the CSS by using the same class name in all div.
.box{
float:left;
width:50%;
}
OR the following code:
#box1, #box2, #box21, #box22{
float:left;
width:50%;
}
See the example : http://jsfiddle.net/N4hMw/2/
I have 1 div wrapping h2 and image wrapped in div with class img. h2 is float:left and img float:right.
img div has image inside. What I want is
if image is height and width 100px than its not vertical-align:middle. Help please.
Tested with vertical-align:middle
CSS
.ver-mainbox{float:left; width:898px; border:1px solid #c3c3c3; padding:0px; height:122px; margin-bottom:15px; background-color:#ffffff;}
.ver-mainbox h2{font-size:18px;color:#000; padding-left:10px; margin:0px; vertical-align:middle; width:500px; float:left; padding-top:42px;}
.ver-mainbox .img{float:right; padding:0px; width:186px; height:122px;}
HTML
<div class="mainbox-area">
<!-- Box start v1 -->
<div class="ver-mainbox">
<h2>Immunizations</h2>
<div class="img"><img src="../../Content/images/v1.gif" alt="" title="" /></div>
</div>
<!-- Box start v1 -->
</div>
vertical-align is only applicable to table cells. You'll need to rethink how you go about this or use the display:table-* properties.
<div style="display:table">
<h2 style="display:table-cell;vertical-align:middle">Immunizations</h2>
<div style="display:table-cell;vertical-align:middle">
<img src="../../Content/images/v1.gif" alt="" title="" />
</div>
</div>