Here I am working within the edit the CSS of a wordpress plugin. The purpose of the plugin is to add a fixed position box at the top of the website where the user can read and click on a link as you scroll the site.
The issues that I am having is that I want the box to match the main sites "dark blue" band's height. Changing the CSS and using like height: 80%; isn't quite working here.
I also wanted to center the light blue box to the center ( I am also going to change the width of it to just fit the content that it holds).
This is my first time applying CSS, so I'm not sure what I'm doing here. I am not able to edit the code directly, just put in CSS "options".
My code is:
<div id="topbar" style="position:fixed; top: 20; padding:0; margin:0; width: 50%; z-index: 99999;opacity:.7; height:80%;" >
<div id="wptbheadline1" style="background-repeat: no-repeat; vertical-align:middle; family:georgia; padding-right:10px; padding-left:10px;" >Check out our Twitter
<a style="" HTML Option B</a>
</div>
</div>
I think this is what you're looking to achieve; See below.
#topbar {background: orange;color:#fff;} /* ignore this css */
<div id="topbar" style="position:fixed; top: 20; padding:7px 0; margin:0; width: 50%; z-index: 99999;opacity:.7; transform: translateX(50%); text-align: center" >
<div id="wptbheadline1" style="background-repeat: no-repeat; vertical-align:middle; family:georgia; padding-right:10px; padding-left:10px;" >Check out our Twitter
<a style="" HTML Option B</a>
</div>
</div>
Adjust the padding :7px 0; to fit the height.
Related
<div class="container">
<div class="fullscreen">
<div class="textbox">Testing</div>
</div>
</div>
I'm trying to have an image fully show up based on the size of a screen, and to have text ("Testing" in the textbox class) show up in a precise designated area in the image, as shown above.
Trying to get the above to work with this codepen, but I am defeated to admit that after an hour of fiddling with css, I am nowhere close.
It is pretty frustrating that css doesn't seem to work as expected, where the image doesn't seem to want to nest to full height etc.
I would like to suggest if you add image using img HTML tag you have better control on image in relation with "Testing" text. Please check below my snippet. You can adjust position of "Testing" by "top" position on ".textbox" class :
.container{
min-height: 100%;
margin: 0;
padding: 0;
}
.fullscreen{
width: auto;
height: 100%;
margin: 0;
padding: 0;
position:relative;
}
.textbox{
position:absolute;
top:55%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index:3;
text-align:center;
}
<div class="container">
<div class="fullscreen">
<img src="http://print.drawmaticar.com/preview.jpg" style="width:100%;"/>
<div class="textbox">Testing</div>
</div>
</div>
Try this:
background: url('path/to/img.jpg') no-repeat center center / cover;
Normally, if you call the image in background means need to add the padding-bottom in percentage.. It means the image height/width*100
css
.fullscreen {
padding-bottom: 129.411%;
}
Backgorund Image
you have to make background-size:cover instead of 100% and make height:100vh to make it visible.
I'm creating simple photo gallery (php) for a responsive site and when a photo is displayed I want to have overlay with navigation displayed on mouse hover (for desktop, taking another approach for mobile). The overlay (over photo) is supposed to be div of same width as the given photo (variable width), left navigation is 25% of left part and right one 25% on the right. When photo is displayed and mouse cursor is outside of photo nothing is visible. When mouse cursor hovers over left part big < is displayed. And > for right side. < and > should be vertically centered.
I got it working but only with absolute positioning, declaring exact position but the result is not responsive and breaks when windows is smaller:
jsfiddle.net/mwf5618r/
I tried using flex and z-index too but did not get it to work. Below is what I created with flex but does not work. I don't need to use flex as long as it is responsive.
jsfiddle.net/x1jexvb0/
Will you help me to make it cleanly and responsive? Many thanks.
I changed some HTML elements included the CSS, hopefully this will done the work for you. Check also the new Fiddle: http://jsfiddle.net/mwf5618r/1/embed/
HTML:
<div style="position: relative;">
<a href="#left" class="photo_nav left">
<div id="photo_nav">
<
</div>
</a>
<a href="#right" class="photo_nav right">
<div id="photo_nav">
>
</div>
</a>
<div style="margin:0;padding:0;width:100%;margin:auto;">
<img src="http://3.bp.blogspot.com/_w0r3cYUSD7A/Sob415afOVI/AAAAAAAABa4/-J_vkiTkITE/s1600/sunflare.jpgg" class="photo" style="width:100%;">
</div>
</div>
CSS:
a.photo_nav {
position: absolute;
width: 25%;
height:100%;
padding: 0;
margin: 0;
opacity:0;
font-size: 200px;
text-decoration:none;
background:none;
transition: 0.3s;
}
a.photo_nav:hover {
color:#fff;
opacity:0.6;
}
a.photo_nav #photo_nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
a.photo_nav.left {left: 0;}
a.photo_nav.right {right: 0;}
a.photo_nav.left div#photo_nav {left: 0;}
a.photo_nav.right div#photo_nav {right: 0;}
Well maybe this?
I am using bootstrap 3, with panel i need to create inside body of the panel opacity that user can not click on link, here is my working fiddle
http://jsfiddle.net/52VtD/9230/
The problem is that opacity always get full screen i need to be only in panel body?
I need to make that only with css, is that possible?
Here is my code so far
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
I dont want allow user to clikc on this link
</div>
</div>
CSS
.panel-body:before{
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
background: rgba(0,0,0,0.8);
}
UPDATE
I have find out better solution
.panel-body{
opacity: .7;
pointer-events: none;
}
The way I've done this in the past is by making the container (i.e. the thing you want to lay your transparent cover over) have position:relative then create a div within that container with height:100% and position:absolute. This then covers the whole of the parent div. Here's a full working example.
HTML
<div class="container">
<p>Ahoy, I'm some text</p>
<p>And I'm a link!</p>
<img src="http://placehold.it/100" alt="I'm an image"/>
<div class="cover"></div>
</div>
CSS
.container{
position:relative;
border:2px solid #663399;
padding:5px;
}
.cover {
background-color: #fff;
height: 100%;
left: 0;
opacity: 0.9;
position: absolute;
top: 0;
width: 100%;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*Yay for old IE support...*/
}
jsFiddle working example
By just using a semi transparent div covering the elements within them instantly makes them non-clickable, so no need to mess around with pointer-events, but it does require you have a relatively positioned container div.
I am trying to put some HTML text over an image that has been popped out using lightbox effect. For this i am using 3
box - the popped out div with lightbox effect
address_box - the div inside the box which is nothing but an outline image
address - i want this div to be imposed upon the address_box image
HTML:
<div class="box">
<div id="move_in_img"><img src="img/ready-to-move-in.gif" /></div>
<div id="address_box"><img src="img/address-box.png" />
<div id="address">The address text
</div>
</div>
CSS:
.box
{
position:absolute;
top:20%;
left:12%;
text-align:center;
width:940px;
height:321px;
background:#F9E5B9;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display:none;
}
.box #move_in_img{
float:left;
margin-left:20px;
margin-top:50px;
}
#address_box{
position:relative;
}
#address{
position:absolute;
}
the "box" properties are set to give it a lightbox effect and i cant change it from absolute to relative. I have searched a lot and experimented with positioning and z-index but all failed. The text simply appears below the address_box.
What i am trying to do is implement lightbox effect but dont want the text to be displayed as image. M i taking the right approach or there is a better way ??
Here is the paste bin link http://jsbin.com/anehey/1/edit
Just picked a sample image from net for the frame. I want the text to go inside the frame..
Am not getting the thing you are trying to do here as no working demo is provided, generally when you want to do such thing, use position: relative; for the container div and use position: absolute; width: 100%; & bottom: 0; for the imposed text div
HTML
<div class="container">
<img src="#" />
<div class="text"></div>
</div>
CSS
.container {
position: relative;
/*Set Height Width Accordingly*/
}
.text {
position: absolute;
bottom: 0;
height: /*Whatever*/;
width: 100%;
}
Demo (Not related to my answer but I fixed what he was asking for)
Newb question. I'm trying to use z-index, but it doesn't seem to be working the way I would expect. Here's my code:
<a id="favoritelink" href="#" style="margin-left: 600px" class="addtofavorites" title="Add to Favorites"></a>
<div class="description" style="margin-top: -18px">
Some description
</div>
In css, I have specified a z-index for .description as 1 and for .addtofavorites as 10. #favoritelink has a background image and text that is shifted way off the page (it is essentially an image link). The background of .description still sits on top of the background for .addtofavorites.
I want the .addtofavorites background to be on top.
Here's the css for .addtofavorites and for .description:
.description
{
background:#efefef;
width:600px;
max-height:500px;
padding:12px;
z-index:1;
}
.addtofavorites
{
background:url(img/plus.png) no-repeat center;
background-size:75%;
display:block;
text-indent:-9999px;
width:51px;
height:56px;
margin-right:6px;
z-index:10;
}
You have to use position: relative or position: absolute for z-index to work.
Edit: http://jsfiddle.net/GndRj/4/
Based on your code, but added position: relative and reduced margin-left on .favoritelink so that it shows up in the preview window.