I'm trying to put the logo to overlap the background image (see screenshot below) div with
position: absolute;
for the .header div and
position: relative;
for the .logo-svrs div
It seems that the external div will not overlap the .bg-banner. The overflow: visible didn't work either. No success.
I had to show the header of the logo by putting the
display: visible;
to be able to see the location of the logo. On the screenshot below, the right screenshot is what I need.
HTML
<div class="header">
<img src="imgs/logo-svrs.png" class="logo-svrs" alt="Sorenson VRS">
</div>
<div class="bg-banner">
<div class="notice-wrapper">
<div class="notice-overlay">
<div class="notices effect">
<div class="box-left-bad">
<img src="imgs/exclamatory.png" alt="Warning! - Sorenson VRS">
<p class="good">WARNING!</p>
</div>
<div class="box-right-bad">
<p>We are currently experiencing a technical difficulty that may be impacting our service. You may want to try restarting your device (VP, VP2, PC, Mac or mobile device) to see if this resolves the issue. At this time, we do not know when the technical difficulty will be resolved. We are working to quickly resolve the problem. This message will no longer appear on this page when the issue is resolved.</p>
<p>Thank you for your patience.</p>
</div>
</div>
</div>
</div>
CSS
#media screen and (max-width:732px) and (min-width:425px) {
.logo-svrs {
position: relative !important;
display: block !important;
width: 114px;
height: 29.5px;
margin: 0 auto;
z-index: 9999;
border: solid #ff0000 3px !important;
overflow: visible !important;
}
.header {
display: visible;
}
.bg-banner {
position: absolute !important;
background-image: url(../imgs/apply_header.jpg) !important;
background-repeat: no-repeat;
background-size: 100% 40% !important;
z-index: 0;
}
.notices {
position: relative !important;
width: 370px !important;
height: 350px !important;
text-align: center;
margin: 0 auto;
margin-top: 200px !important;
z-index: 9999;
border-radius: 5px !important;
box-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
-o-box-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
}
You could move the .header div inside the .bg-banner div and add this
css:
.header {
display: visible; /*this is not valid*/
position: absolute;
top: 60px;
left: 0px;
right: 0px;
}
Here is a possible solution:
https://jsfiddle.net/kd91t26L/3/
Related
I need to remove box-shadow just under the transparent png. Now you can see box shadow under that transparent half circle. Can I do it somehow?
Here is demo.
Problematic part is under the logo.
header {
border-bottom: none;
height: 50px;
padding: 20px 0 20px 0;
background: rgba(255,255,255,0.9);
z-index: 10 !important;
-webkit-box-shadow: 0px 0px 6px 5px rgba(0,0,0,0.22);
box-shadow: 0px 0px 6px 5px rgba(0,0,0,0.22);
position: fixed;
top: 0px;
width: 1000px;
margin:0 auto 0 auto;
left:0px
}
<html>
<header>
<img src="https://png.pngtree.com/element_our/sm/20180518/sm_5aff6089d3e02.png" style="height:80px;margin-left:200px">
<img src="http://vitezslavlorenc.cz/obloucek2.png" style="width: 51px;
height: 8px;
/* position: relative; */
bottom: -8px;
position: absolute;
left: 215px;">
</header>
<div style="height:1000px; width: 1000px;
;
position:relative;">
<img src="https://wpshindig.com/content/uploads/2018/02/Feature-Header-Image.png" style="position:absolute;top:0px;width:1000px;z-index:-1" >
</div>
https://codepen.io/korwinus/pen/bZJOgM
Have a look at this codepen link
https://codepen.io/hoonin/pen/OqYVRr
While you can't "hide" the box-shadow in just that portion you can make the image have a higher z-index value than the element with the box shadow. This means it will appear "above" it. Adding a background-color and some bottom padding to the image creates the illusion that the box-shadow disapears in that area.
Here is the code for the class I made for the image (removed the inline styles to):
.ig-logo {
background-color:#fff;
border-radius:50%;
z-index:9999;
height:80px;
margin-left:200px;
padding-bottom:5px;
}
box shadows are basically your shape blurred.
that means that at the edges the shadow is curved up.
what if you don't want that? what if your shadow is for a top bar and you don't want it to seems like it ends?
issue:
desired effect :
how do I obtain this?
html :
<div class="TopBar"> </div>
css :
.TopBar {
box-shadow: 0 4px 28px black;
}
Am I supposed to use an absolute positioned element that's bigger than screen width or something?
You can add a spread parameter to the shadow (not exactly the same appearance, but at least it does what you ask for):
html,
body {
margin: 0;
}
.TopBar {
height: 40px;
background: #444;
box-shadow: 0px 4px 24px 16px black;
}
<div class="TopBar"></div>
Fake it! You can use linear gradient and a pseudo element to get the effect you want:
.TopBar {
height: 50px;
background: gray;
position: relative;
}
.TopBar::after {
content: "";
background: linear-gradient(to bottom, rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 100%);
position: absolute;
width: 100%;
height: 20px;
top: 100%;
}
<div class="TopBar"> </div>
You can add a pseudo-element (:before) to extend it beyond your original container and therefore, get a wider shadow :
html, body { margin:0; padding: 0 }
.TopBar {
height: 50px;
position: relative;
}
.TopBar:before {
content: "";
display: block;
position: absolute;
height: 100%;
width: 100%;
background: #454545;
box-shadow: 0 4px 28px #000;
transform: scaleX(1.1);
z-index: -1;
}
.TopBar .content {
color: #add8e6;
}
<div class="TopBar">
<div class="content">Here's some text inside my top bar</div>
</div>
I'm a general newbie running into a problem on my hand-coded site.
I intended for a div to change to an arrow when hovered over with the div being an anchor link. It seems simple enough but somewhere along in my build only the paragraph of the div started reacting to a mouse hover. The image does not react to the hover which is what I intended. I have no idea what's causing it. (Or the jumpiness that occurs when the larger images are hovered over.)
The page is here: http://www.tarynblake.com/projects/webapps.html
Here's the related HTML:
<a href='/projects.html'>
<div class="two-sides">
<img id="coding" class="top" src="/img/projects/code-blue-gray.png">
<img class="bottom arrow" src="/img/projects/arrow-red.png">
<p class="title">Web Apps<br> </p>
</div>
</a>
Here's the CSS:
.top {
max-height: 300px;
max-width: 90vw;
opacity: .65;
filter: alpha(opacity=30);
box-shadow: 10px 10px 10px 0 #3f3f3f;
}
.two-sides:hover .bottom {
display: block;
}
.two-sides:hover .top {
display: none;
}
.two-sides:hover img[src*="arrow"] + .title {
visibility: hidden;
}
.bottom {
display: none;
max-height: 300px;
max-width: 90vw;
margin: 0;
padding: 0;
opacity: .65;
}
.arrow {
height: 40px;
max-width: 100px;
margin: 2.5vh 0 2.6vh 1vw;;
padding: 10px 13px;
border: 3px hidden #973c13;
opacity: .8;
}
If you're just looking to swap out the image on hover, then you have possibly over-coded your solution.
What you want to do is take your .top class and add the image using CSS like so:
.top {
background-image: url ('/img/projects/code-blue-gray.png');
background-repeat: no-repeat;
max-height: 300px;
max-width: 90vw;
opacity: .65;
filter: alpha(opacity=30);
box-shadow: 10px 10px 10px 0 #3f3f3f;
}
Then for the hover state, add the next image in the sequence.
.top:hover {
background-image: url ('/img/projects/arrow-red.png');
background-repeat: no-repeat;
max-height: 300px;
max-width: 90vw;
opacity: .65;
filter: alpha(opacity=30);
box-shadow: 10px 10px 10px 0 #3f3f3f;
}
You could add CSS animation transitions or other effects to swap out the image, but this is a very basic overview. Hopefully this helps.
I found the simplest way of doing an image swap on hover is through the CSS.
<div class="image-swap"></div>
.image-swap {
width: 200px;
height: 200px;
background-image: url(images/stradegy-image-hover.jpg);
background-position: 0 0;
}
.image-swap:hover {
background-position: 0 100%;
}
Here's a way to do with CSS3 but remember that IE doesn't play well with CSS3. http://jsfiddle.net/gd8ba/
The "jumping" in your site could be from different size images and or from removing the words "web apps". Also, I noticed you have a js error. TypeError: Cannot set property 'innerHTML' of null http://www.tarynblake.com/js/myScripts.js:17
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to create an html page exactly like the demo image:
I have created all three buttons using anchor tag with data-role=button with corresponding color and text. But now what i want is to align those circles in the way the image is shown and bring them in center of the html page. Please help me.
Thanks in advance.
Working example: http://jsfiddle.net/Ey6Yb/1/
HTML :
<div id="button-container">
<a data-role="button" id="btn_gotohomepage" class="button_eclipse">My account</a>
<a data-role="button" id="btn_gotologinpage" class="button_eclipse">Services</a>
<a data-role="button" id="btn_gotolistpage" class="button_eclipse">Offers</a>
</div>
CSS:
#button-container {
width: 145px;
height: 255px;
margin:0 auto;
}
.button_eclipse {
width: 100px !important;
height: 100px !important;
border-radius: 50% !important;
color: rgb(255,255,255) !important;
}
.button_eclipse .ui-btn-inner {
border-radius: 50% !important;
height: 80% !important;
}
.button_eclipse .ui-btn-inner .ui-btn-text {
display: block !important;
margin: 28px 0 0 -17px;
width: 95px !important;
height: 20px !important;
text-align: center !important;
/* TEXT CHANGES */
font: 14px Calibri,Arial !important;
text-shadow:1px 1px #AD4816 !important;
}
#btn_gotohomepage {
background: rgb(247,107,33) !important;
}
#btn_gotologinpage {
background: rgb(255,165,33) !important;
margin: -30px 0 0 40px;
}
#btn_gotolistpage {
background: rgb(157,16,33) !important;
margin: -30px 0 0 0;
}
EDIT :
Here's a solution centered horizontally and vertically : http://jsfiddle.net/Ey6Yb/3/
Change in your css file with below script:
.ui-content {
border-width: 0;
margin: 0 auto;
overflow-x: hidden;
overflow-y: visible;
padding: 15px;
width: 150px;
}
.btn_eclipse_services {
background: none repeat scroll 0 0 #FFA521 !important;
border: 0 none !important;
border-radius: 50% 50% 50% 50% !important;
color: #FFFFFF !important;
height: 100px !important;
margin-left: 35px;
margin-top: -30px;
width: 100px !important;
}
.btn_eclipse_offers {
background: none repeat scroll 0 0 #9C1021 !important;
border: 0 none !important;
border-radius: 50% 50% 50% 50% !important;
color: #FFFFFF !important;
height: 100px !important;
margin-top: -30px;
width: 100px !important;
}
Demo:
and for more you can check this link How to Center Anything With CSS
I have two sections, results on the left and main on the right which reside in html > wrapper > container.
Now, the heights of both of these are not fixes and would want them to stretch to 100% depending on their contents. On some occasions, results are longer than main and vice versa. I've used 100% height, but it just doesn't seem to work. Please help!
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
width: 100%;
}
#container {
width: 1007px;
padding: 130px 0 0 0;
display: block;
}
.results {
width: 383px;
float: left;
background:
#fff;
display: block;
-webkit-box-shadow: -2px 0px 8px -6px #000;
-moz-box-shadow: -2px 0px 8px -6px #000;
box-shadow: -2px 0px 8px -6px #000;
padding-bottom: 60px;
}
.main {
width: 606px;
float: left;
padding: 15px 0 0 16px;
position: relative;
background: url(images/pattern.png) repeat;
height: 100%;
bottom: 0px;
}
<html lang="en>
<head></head>
<body>
<div id="wrapper">
<div id="container" class="clear fix">
<section class="results">
</section>
<section class="main">
</section>
</div>
</div>
</body>
</html>
Try to use "absolute" in instead of "relative" in position attribute.
I did here and worked.
For example:
.main {
width: 606px;
float: left;
padding: 15px 0 0 16px;
position: absolute;
background: url(images/pattern.png) repeat;
height: 100%;
bottom: 0px;
}
Hugs,
Vinicius.
In many cases the problem arises when one states the height should be 100% but you need to ask the question, "100% of what?". That answer is the parent of that element so the next question is, "What is the parent's height set to?". If you don't have a height set to the parent, then 100% of nothing is nothing.