For a site I am making I want to have a nice rotated "navigation" bar, just simple links really at the top of the page.
The code I have got:
div.home
{
position: absolute;
top: 0px;
left: 700px;
height: 150px;
width: 40px;
background-color: #313131;
-webkit-transform: rotate(45deg);
margin-top: -36px;
text-transform: rotate(45deg);
}
And:
<div class="home">
Home
</div>
This makes the text bunch up at the top of the element. Ideally I want it to be at the bottom of the element,
I don't Know what exactly you want but these maybe helpful
<div class="home">
<div class="text">
Home
</div>
</div>
div.home
{
position: absolute;
top: 30px;
left: 700px;
height: 150px;
width: 40px;
background-color: #313131;
-webkit-transform: rotate(45deg);
margin-top: -36px;
-webkit-text-transform: rotate(90deg);
}
.text{
margin-top:100px;
font-size:26px;
-webkit-transform: rotate(-90deg);
color:white;
}
DEMO
Don't transform the text. transform (and -ms-transform, -webkit-transform and so on) include rotating text with it and receive mouse events in the new position.
I don't know if this is exactly what you're having trouble with but change the top value to something like '30px'.
Demo
Related
I want to create rectangles on my web page to replicate lasers. I have tried to put it at the bottom of the page:
.laser {
width: 5px;
position: absolute;
transform: translate(-100%, -100%);
bottom: 0px;
}
<div class='laser' style='color: red; left: 10%; height: 200px;'></div>
<div class='laser' style='color: green; left: 20%; height: 150px;'></div>
but it does not show up on my screen. My best guess is that the div is aligned via the top left corner so the box is under the screen? Yet when I try to translate it nothing happens as well.
change color to background-color
.laser {
width: 5px;
position: absolute;
//transform: translate(-100%, -100%);
bottom:0;
}
<div class='laser' style='background-color: red; left: 10%; height: 200px;'></div>
<div class='laser' style='background-color: green; left: 20%; height: 150px;'></div>
I need help with creating shapes in HTML/CSS as separators between one section of a website to another.
this is how it should look like :
There's an image at the top and content at the bottom and I need to draw those shapes.
help please :)
The way you have asked this question really isn't the best however this should help you head in the right direction:
https://jsfiddle.net/m6aoLw9f/5/
HTML
<div class="bluebox"></div>
<div class="blueline"></div>
css
.bluebox {
position: absolute;
top: 10%;
left: 10%;
height: 20px;
width: 200px;
background-color: blue;
opacity: 0.5;
transform: skew(-5deg, -5deg);
}
.blueline{
position: absolute;
top: 12%;
left: 8%;
height: 2px;
width: 250px;
background-color: blue;
opacity: 0.5;
transform: skew(-5deg, -5deg);
}
I have a problem with my exit page element. I create a big "X" on the right side of my page. This is clickable element for exit from current content.
There is a code of this element:
.section-modal .close-modal {
position: fixed;
top: 25px;
right: 25px;
width: 75px;
height: 75px;
background-color: transparent;
cursor: pointer;
}
.section-modal .close-modal:hover {
opacity: .3;
}
.section-modal .close-modal .lr {
z-index: 1051;
width: 5px;
height: 75px;
margin-left: 35px;
background-color: #222;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.section-modal .close-modal .lr .rl {
z-index: 1052;
width: 5px;
height: 75px;
background-color: #222;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
I have a logo image on the top middle of the page. Here is a code:
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<img src="img\Logo2.png" class="img-responsive" style="margin: 0 auto; z-index: -1" alt="...">
When I narrow the page I have "X" near my logo but I can not click and return to main page. I can not solve this solution. Please help.
If You need some more info please tell me I'll edit a question.
it's hard to tell from your code, but I'm guessing the problem is that the logo is overlapping the 'x' button. To make sure , right click the 'x' and choose 'Inspect element'.
If the element tab is opened focused on the img tag and not on the 'x' then that is your problem., to solve it, give it a z-index:
.section-modal .close-modal {
position: fixed;
top: 25px;
right: 25px;
width: 75px;
height: 75px;
background-color: transparent;
cursor: pointer;
z-index: 100
}
This might be a stacking context issue.
More infos for a complete understanding of z-index behaviors :
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
I have a situation like this: http://jsfiddle.net/uqhwt1wj/
HTML:
<div class="activity_rounded">
<img class="image" src="http://i.imgur.com/059cOzT.png?1" />
</div>
CSS:
.activity_rounded{
width: 165px;
height: 165px;
border-radius: 165px;
-moz-border-radius: 165px;
overflow: hidden;
margin: 0 auto;
position: relative;
margin-bottom: 30px;
background: #FFDE15;
}
.image{
max-width: 226px;
height: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
}
It works all good in all browsers, however in safari it seems like overflow: hidden ignores border radius of the block and hides overflow only for full div block(square). Tried to Google around, but haven't seen any solutions with horizontal centering that would work properly in my case.
Any suggestions, links or comments would help a lot.
in this case cross-browser solution that I decided to use was: using image as background image of a div instead of wrapping image element inside a div.
So now code looks like this(DEMO):
HTML:
<div class="activity_rounded"></div>
CSS:
.activity_rounded{
width: 165px;
height: 165px;
border-radius: 165px;
-moz-border-radius: 165px;
overflow: hidden;
margin: 0 auto;
position: relative;
margin-bottom: 30px;
background: url('http://i.imgur.com/059cOzT.png?1') no-repeat center #FFDE15;
}
Hope this helps to anyone as well.
I am trying to achieve this effect in my webpage..
The red box is where I will be placing a menu, I would like the bottom of the red box to be slanted. The section on the right of the slant needs to be transparent as there may be an image in the background where the grey color is.
The only thing I can come up with is to rotate the element but that would also rotate the contents of the element which I do not want.. Only the bottom bg of the red element (which will be a solid color) should be slanted.
you can do it like that, just highlighted the rotated part blue, that you see what happens ;)
you might have to play with the top: and left: values if you change the size
edit: added a small menu example (really small ^^)
jsfiddle link
here is the html part:
<div id="menucontainer">
<ul>
<li>some</li>
<li>menu</li>
<li>here</li>
</ul>
</div>
<div id="rotatedDiv">
</div>
<div id="background"></div>
and here the css part:
#menucontainer{
position: relative;
z-index: 100;
background: red;
height: 100px;
}
#menucontainer ul {
position: absolute;
bottom: 0px;
left: 30px;
}
#menucontainer li {
list-style: none;
margin-left: 10px;
background: #123;
display: inline-block;
}
#rotatedDiv {
z-index: 99;
background: blue;
position: absolute;
top: 14px;
left: -5px;
height: 90px;
width: 200%;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}
#background {
background: green;
}
you might want to modify it in any way you can think of, but the main part should be clear i think ;)
You can do it with a transparent border:
html
<div class="bgone">
<div class="content">This is where the menu would go.</div>
</div>
<div class="bgtwo"></div>
css
.bgone {
height: 100px;
background: black;
position: relative;
}
.bgtwo {
height: 50px;
border-top: 100px solid black;
border-right: 1000px solid transparent;
}
.content {
position: absolute;
top: 10px;
left: 10px;
color: #FFF;
}