This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Rounding the sides of a big image contained in a small division not working in Chrome
What I'd like to do is have a 'vault' that opens when the user mouses over the inner wrap element. The problem I've run into is that (in Chrome at least) the 'doors' aren't being hidden under the border-radius area of the inner wrap element. Is there any CSS-only way to rectify this, or am I going to have to look at something a bit more complex?
HTML:
<div class="vault-wrap-1">
<div class="vault-wrap-2">
<div class="vault-door-1"></div>
<div class="vault-door-2"></div>
</div>
</div>
CSS:
div.vault-wrap-1 {
height:600px;
width:600px;
border-radius:9999px;
background:green;
margin:auto;
padding:30px;
}
div.vault-wrap-2 {
height:600px;
width:600px;
border-radius:9999px;
background:blue;
overflow:hidden;
}
div.vault-door-1, div.vault-door-2 {
height:600px;
width:300px;
background:red;
}
div.vault-door-1 {
float:left;
}
div.vault-door-2 {
float:right;
}
This seems to be a problem only in Webkit browsers when trying to round corners on positioned elements.
The solution, as shown in this answer, is to add a -webkit-mask-image to the element with the border-radius:
div.vault-door-1, div.vault-door-2 {
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
Related
I found this effect on material.io: https://material.io/gallery/
The Image is fixed and is overwritten by the blackish one, but the z-index must be smaller than it, because the first bg is covering it.
In my pov its only working, when another div, without any opacity, blocks the first image.
Is that somehow possiboe or are they using a different method?
Edit: This is similar to parallax but not exactly parallax. If you inspect the html,you will see that the image/svg section doesn't scroll but the text does. By giving the svg sections different z-index values this is possible. The images are different in different sections, it's just that those are not moving along with text so it appears as if the images are repeating.
I would suggest you to go through their css to get a better understanding.
This effect is called parallax effect.
You can use a library like http://materializecss.com/parallax.html
to create it or you can create your own https://www.w3schools.com/howto/howto_css_parallax.asp
the two graphic elements are position:fixed each row that contains those graphics are incrementally positioned higher in the z-index and they have overflow:hidden set
body {
margin:0;
}
section {
height:100vh; position: relative; overflow:hidden;
}
section div {
position:fixed; top:50%; left:100px; width:100px; height:100px; border:2px solid white; margin-top:-50px;
}
section.red { z-index:1; }
section.blue { z-index:2; }
.red { background:red; }
.blue { background:blue; }
<section class="red">
<div class="blue"></div>
</section>
<section class="blue">
<div class="red"></div>
</section>
simplified example code: https://codepen.io/saetia/pen/mwBypp
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 8 years ago.
I have a very simple layout that I am trying to achieve in CSS, but I am not having any luck. All I want to do is (horizontally) center a div that contains a link. The size of the div should be based on the size of its content.
I have tried a bunch of combinations of auto margins, text alignments, and display types, but can't seem to figure it out (I am a CSS noob). I have cooked up a very simple case (and the best I can do)
HTML:
<body>
<div class="myDiv">
google.com
</div>
</body>
CSS:
.myDiv
{
background:lightblue;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.myDiv a
{
text-decoration:none;
}
I have made a Fiddle as well. Is this type of layout possible without complicated HTML/CSS /hacks?
You just can do this:
.myDiv
{
display:table;
margin:auto;
}
View the demo http://jsfiddle.net/VvL6M/9/
Why not just apply the styles to the anchor tag itself;
Fiddle
.myDiv {
text-align:center;
}
.myDiv a {
text-decoration:none;
background:lightblue;
padding: 5px;
}
How about this:
#container
{
text-align:center;
}
.myDiv
{
background:lightblue;
display:inline;
}
.myDiv a
{
text-decoration:none;
}
And:
<body>
<div id="container">
<div class="myDiv">
google.com
</div>
</div>
</body>
Check out this JFiddle: http://jsfiddle.net/VvL6M/11/
I know this has been asked somewhere else, but I can't find the solution. I have a simple layout. A container Div with two floating divs inside. The left div holds the navigation and has a background image. The right div has a solid background and is dynamic based on the content of each page. I am not having issues with the content div. My problem is I want the left div to "stretch" vertically to match the height of the content div. What is happening is the left is only stretching to the min-height value. Here is my CSS:
#containerTemp {
margin-left:auto;
margin-right:auto;
width:1000px;
min-height:100px;
height:auto;
}
#containerNavigation {
width:210px;
float:left;
background-image:url(../images/template/linkbgd.gif);
background-repeat:repeat-y;
min-height:500px;
height:100%;
}
#containerContent {
width:790px;
background:#FFFFFF;
background-repeat:repeat-y;
float:right;
min-height:500px;
height:100%;
}
You can see the issue by visiting this page: http://www.athensfireandrescue.org/?pid=7
I am sure it's something simple, but I can't put my finger on it. Sorry for the redundant question, but my searches just didnt' turn up viable solutions.
Heights can be a bit tricky. However the goal is to make sure the parent containers have 100% height.You have a lot of stuff going on in your web page. So I created an isolated demo to demonstrate how this works.
HTML
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
CSS
html, body {height:100%;}
.wrapper {
width:400px;
height:100%;
margin:0 auto;
}
.left {
width:198px;
border:1px solid black;
float:left;
height:100%;
}
.right {
width:198px;
border:1px solid red;
float:left;
height:100%;
}
DEMO:
http://jsfiddle.net/nFdtT/
SOME OTHER STUFF I NOTICED:
If I can offer some advice I would suggest the following:
Don't use tables unless it is tabular data. Your NAV should be constructed using a list.
Remove all inline styles and place them in a separate stylesheet.
<meta> and <style> tags should be in the <head> of your document. (For some reason you have a partial doctype heading nested inside of your <head>)
And if you aren't already, I would suggest using a CSS reset.
I have a Footer that spans the width of the page. Within the footer there is an which is essentially acting as a footer background image that fills the entire width of the footer / page. However, in IE, there is some white space under the footer, when it should just be flush with the bottom of the page. Seems fine in Firefox, Safari, etc. Here's what I have, any recommendations on something to try?
<body>
<div id='container'>
<div id='content'></div
</div>
<div id='footer'></div>
</body>
CSS Is:
html {
font:62.5% 'Helvetica Neue';
color:#777676;
margin:0;
padding:0;
}
body {
font-size:1.8em; /* 18 px */
line-height:1.2em;
margin:0;
padding:0;
width:100%;
}
#container {
width:906px;
margin:0 auto;
height:100%;
position:relative;
z-index:10;
}
#content {
padding-top:20px;
}
div#footer {
position:relative;
bottom:0;
clear:both;
width:100%;
z-index:1;
}
div#footer img {
width:100%;
border:0 none;
}
Add display:block; on the image, that should fix it...
(and use code highlighting in your question if you want <tags> to be visible in your text...)
That could be a very involved answer. I have ran into this before and I forget now how I solved it. First, I should ask which version of IE your testing in, it could be old. I don't think this is as much of an issue in IE 8 and above. Next, is your DOCTYPE set. Then try setting the height and/or line-height on the footer. Make sure all sibling and parent elements have their "position", "top", and "left" set.
Have you tried positioning it "absolute" and if that doesn't work remove all other elements in the body, adding them back in one at a time till it breaks and then figure out what is wrong with the element you added.
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
Im creating a new website and i need to know something(will show with example).
Lets say i did this:
html;
<div id="center-in-bar">
<ul>
<li>content..</li>
<li>content..</li>
<li>content..</li>
<li>content..</li>
</div>
and css:
#center-in-bar {
list-style:none;
display:inline-block;
/*what to do to make all the li elements centered both horizontal and vertical? in the center-in-bar element*/
}
What do I do to make all the li elements centered both horizontal and vertical? In the center-in-bar element?
Any help would be appriciated :))
Try this CSS snippet:
#center-in-bar ul {
...
text-align:center; /* center horizontally */
vertical-align:middle; /* center vertically */
...
}
#center-in-bar li {
...
display:inline; /* you might want to use this instead of "inline-block" */
...
text-align:center; /* center horizontally */
vertical-align:middle; /* center vertically */
...
}
Somehow, there's still no standard for doing this, but in my experience the following is probably the most reliable solution overall:
<style type="text/css">
#container {
display:table;
border-collapse:collapse;
height:200px;
width:100%;
border:1px solid #000;
}
#layout {
display:table-row;
}
#content {
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div id="container">
<div id="layout">
<div id="content">
Hello world!
</div>
</div>
</div>
Here's another technique that utilizes relative and absolute positioning to simulate centered-middle position. This technique is not exact, but it should be compatible with any browser (even the early ones):
<style type="text/css">
#vertical{
position:absolute;
top:50%; /* adjust this as needed */
left:0;
width:100%;
text-align:center;
}
#container {
position:relative;
height:200px;
border:1px solid #000;
}
</style>
<div id="container">
<div id="vertical">
Hello world!
</div>
</div>
Important note:
When this question gets asked someone always seems to suggest line-height as a solution, but I would implore you to steer clear of that suggestion. It looks good when you're demonstrating something simple like "Hello World," but line-height breaks horribly when the text wraps.
HOW TO HORIZONTALLY CENTER A BLOCK ITEM (LIKE A DIV) OR INLINE ITEM (LIKE TEXT)
Let's say you wanted to center a document on a browser page, so that no matter how big you resize your browser the element is always centered:
body {
margin:50px 0px; padding:0px;
text-align:center;
}
#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
write this HTML for centering something horizontally in between your body tags:
<body>
<div id="Content">I am a centered DIV</div>
</body>
This will horizontally center block level elements. To center text, spans, or other inline elements all you would need to add is:
#Content {
width:500px;
margin:0px auto;
text-align:center; /* THIS IS THE ONLY CHANGE FROM ABOVE */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
HOW TO VERTICALLY CENTER A BLOCK ITEM (LIKE A DIV) OR INLINE ITEM (LIKE TEXT)
Note: Do not use line-height to vertically center elements, as it will only work for one line of text and nothing more.
As for vertically centering items, there are 3-5 methods you can use depending on what it is you are trying to center.
This site describes each method easily for you:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
Best of luck!
You should give same value to line-height and height.
#center-in-bar li
{
height: 30px
line-height: 30px;
text-align: center;}
also look at this: Text align vertical within li