I'm trying to make a friend their portfolio website, and everything is simple enough, but I can't seem to get the sideways navigation to touch the content box. I've got it close, it's perhaps 50 to 75, 100 pixels at most, but they simply won't touch.
This is the code for the two div in question. I was able to twist the navigation with help from someone else's question, but they still won't sit flush. Any help at all would be greatly appreciated, thank you very much for your time.
.background {
background-image: url(textureimg.jpg);
width: 800px;
height: 1000px;
float: left;
}
.navigation {
float: left;
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Probably a margin issue. Try .navigation { margin-right: 0px; }. Unless your navigation is on the right side, then use margin-left. You may also have to adjust the margin of the content section.
All of the "content" in an element takes up only a small part of that element's screen space. The rest is for padding, border, and margin. These can each be adjusted with CSS via padding: 10px;, border: 5in;, margin: 3pt; respectively (obviously you can use whatever size values you want). You can also manipulate individual sides, such as padding-right: 10px; padding-top 5px;
If adjusting the navigation's margin doesn't give the desired result, try adjusting the border and padding as well.
(source: html.net)
There's a good intro to the HTML box model here
#content { position: relative; left: -50px; }
adjust the left to however many pixels you need till it's not too hot or too cold, but just right
Related
I'm designing a generator. Today, refactoring code I encountered a problem that I have seen several times in my path, but somehow I never penetrated into its existence. Namely - div after adding the attribute in CSS transform: translateY (-50%) loses on the quality of its elements inside, someone knows why this is happening? Elements are blurry, especially fonts and banners.
I'm using this line to center the diva vertically
If i delete this line, everything back to normal
#message {
width: 500px;
top: 50%;
transform: translateY(-50%);
left: 50%;
margin-left: -250px;
position: fixed;
background: #fff;
z-index: 201;
padding: 20px;
box-sizing: border-box;
}
I would believe that it is because og "half pixels".
You tell the div to transform -50%.
If the div has a height of 101px, the 50% will be 50.5px, and you cant have a half pixel.
You can check if this is the problem, by setting a specific height, that can be split in two, without going into halves.
I have been researching this issue for the last few days, and while have found several solutions that work well in static layouts, I am having a problem resolving in responsive design.
We have a series of banner images that we use on our home page, and are trying to get them to appear centered on the image behind text on smaller mobile screens. I can solve this for fixed widths, but we need to make this responsive.
Here is what the current rendition of my CSS code looks like:
#mainSlideshow .item img {
display: block;
width: auto !important;
max-width: none !important;
height: 350px !important;
overflow: hidden;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
#mainSlideshow .item .carouselImgHold {position: relative; }
The challenge appears to be the movement left - right now, the image just shifts to the left 50% of the img width (no surprise). How do I program the CSS to drift the image only the amount necessary to center the image in the nested div tag?
Many thanks in advance.
It would be nice if you could give us an example but lets try. :)
My suggestion is to set image as background-image instead of linking it. So that would look like:
#mainSlideshow .item{
background-image:url("path-to-image/image.jpg");
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
}
That way you will have not stretched image covering the #mainSlideshow .item .Read more about that here
You may use text-align and negative margins if IMG stands alone on its line.
http://codepen.io/anon/pen/PPpYzM
.oversizedImage {
text-align: center;
}
.oversizedImage img {
margin: 0 -100%;
}
/* demo purpose */
.oversizedImage {
width: 50%;
margin: auto;
border: solid;
box-shadow: 0 0 150px 100px white;/* you should use overflow:hidden; here it only shows how much is outside :) */
}
.oversizedImage img {
vertical-align: top;
/* instead default baseline to avoid gap under */
position: relative;
z-index: -1;
}
<div class="oversizedImage">
<img src="http://lorempixel.com/1200/200"/>
</div>
It is only a guess since we miss your HTML
I think you can achieve this to ways.
img {
display: block;
margin-left: auto;
margin-right: auto
}
Or
img {
width: 50%
left: 50%
}
I am trying to accomplish the following with CSS:
I have a code pen started here
I can easily rotate the text as I would like with the following CSS:
.Rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
However, the text ends up as shown below
I understand why it's happening, but unsure how to globally solve it. It is using the bottom left corner before you rotate it. I can individually with each widget place a fixed height/width on the .title But if at all possible. I would like to avoid that.
Can anyone provide a solution that would allow the 'rotated' text to always be located at bottom:0, left:0?
You can set the origin to bottom left, and then apply a translation to the element, prior to the rotation
-webkit-transform: rotate(-90deg) translateY(100%);
-webkit-transform-origin: bottom left;
transform: rotate(-90deg) translateY(100%);
transform-origin: bottom left;
The translation makes the top left corner be where you want it, so to speak.
It's not easy to explain how it works... just try it
I personally would just make the elements a little more intricate but singular with :before & :after. Then I'd position the text within a position absolute.
.widget {
height: 50px;
width: 250px;
background: #81a6d5;
float: left;
margin-left: 10px;
color: #084ca1;
}
.widget::before {
content: "";
position: absolute;
height: 50px;
width: 35px;
background: rgba(255,255,255,.3);
}
.widget .title {
transform: rotate(-90deg);
position: absolute;
font-size: 11px;
font-family: helvetica;
margin-top: 15px;
}
I made this pen to show the idea, it would clean up the coding a little bit also.
http://codepen.io/brycesnyder/pen/PwYdJq
I wasn't able to think of a way to universally be able to do this with CSS without positioning each one individually, but with JS it was pretty easy. If you can use JS intead, this code should take care of it on its own, without changing any of your current HTML or CSS.
$(function(){
$('.rotate').each(function(){
var thisTitle = $(this);
var w = thisTitle.outerWidth();
var h = thisTitle.outerHeight();
var newLeft = Math.abs((w - h) / 2) * -1;
var newBottom = Math.abs((w - h) / 2);
thisTitle.css('left', newLeft);
thisTitle.css('bottom', newBottom);
});
});
Codepen: http://codepen.io/supah_frank/pen/yyBxzo
I am using transform: skew to create the effect of a down arrow on my banner image using both the :before and :after tags. The result should look like the following:
However, in IE 9-11 there seems to be a rounding issue. At some heights there is one pixel from the background image that shows below the skewed blocks resulting in the following:
In my case, the banner is a percentage of the total height of the window. Here is the some sample code which should be able to reproduce the problem:
HTML
<div id="main">
<div id="banner"></div>
<section>
<h1>...</h1>
<p>...</p>
</section>
</div>
CSS
#banner {
position: relative;
background-color: green;
width: 100%;
height: 75%;
overflow: hidden;
}
#banner:before,
#banner:after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 50%;
height: 1.5em;
background-color: #FFFFF9;
transform: skew(45deg);
transform-origin: right bottom;
}
#banner:after {
right: 0;
transform: skew(-45deg);
transform-origin: left bottom;
}
body {
background-color: #333;
position: absolute;
width: 100%;
height: 100%;
}
#main {
max-width: 40em;
margin: 0 auto;
background-color: #FFFFF9;
position: relative;
height: 100%;
}
section {
padding: 0 1em 5em;
background-color: #FFFFF9;
}
And here a working example.
Yes, seems to be a rounding issue – and I don’t know of anything that one could do to fix this. It’s in the nature of percentage values that they don’t always result in full pixel values – and how rounding is done in those cases is up to the browser vendor, I’m afraid.
I can only offer you a possible workaround (resp. “cover up”) that seems to work – if the layout really is as simple as this, and the main content area has a white background, and no transparency or background-image gets involved there.
Pull the section “up” over the banner by a negative margin of -1px (eliminated top margin of h1 here as well, otherwise it adjoins with the top margin of the section – countered by a padding-top), so that its background simply covers up that little glitch:
section {
padding: 1em 1em 5em;
background-color: #FFFFF9;
position:relative;
margin-top:-1px;
}
section h1:first-child { margin-top:0; }
Well, if you look closely, that makes the corner of triangle look slightly “cut off” (by one pixel) in those situations where the rounding glitch occurs – if you can live with that (and your desired layout allows for it), then take it :-) (And maybe serve it to IE only by some means). If not – then sorry, can’t help you there.
Using transform property, z-index is canceled and appeared in the front.
(When commenting out -webkit-transform, z-index is properly working in below code)
.test {
width: 150px;
height: 40px;
margin: 30px;
line-height: 40px;
position: relative;
background: white;
-webkit-transform: rotate(10deg);
}
.test:after {
width: 100px;
height: 35px;
content: "";
position: absolute;
top: 0;
right: 2px;
-webkit-box-shadow: 0 5px 5px #999;
/* Safari and Chrome */
-webkit-transform: rotate(3deg);
/* Safari and Chrome */
transform: rotate(3deg);
z-index: -1;
}
<html>
<head>
<title>transform</title>
<link rel="stylesheet" type="text/css" href="transformtest.css">
</head>
<body>
<div class="test">z-index is canceled.</div>
</body>
</html>
How do transform and z-index work together?
Let's walk through what is occurring. To start, note that z-index on positioned elements and transform by itself create new "stacking contexts" on elements. Here's what's going on:
Your .test element has transform set to something other than none, which gives it its own stacking context.
You then add a .test:after pseudo-element, which is a child of .test. This child has z-index: -1, setting the stack level of .test:after within the stacking context of .test Setting z-index: -1 on .test:after does not place it behind .test because z-index only has meaning within a given stacking context.
When you remove -webkit-transform from .test it removes its stacking context, causing .test and .test:after to share a stacking context (that of <html>) and making .test:after go behind .test. Note that after removing .test's -webkit-transform rule you can, once again, give it its own stacking context by setting a new z-index rule (any value) on .test (again, because it is positioned)!
So how do we solve your problem?
To get z-index working the way you expect, make sure that .test and .test:after share the same stacking context. The problem is that you want .test rotated with transform, but to do so means creating its own stacking context. Fortunately, placing .test in a wrapping container and rotating that will still allow its children to share a stacking context while also rotating both.
Here's what you started with: http://jsfiddle.net/fH64Q/
And here's a way you can get around the stacking-contexts and keep
the rotation (note that the shadow gets a bit cut off because of .test's white background):
.wrapper {
-webkit-transform: rotate(10deg);
}
.test {
width: 150px;
height: 40px;
margin: 30px;
line-height: 40px;
position: relative;
background: white;
}
.test:after {
width: 100px;
height: 35px;
content: "";
position: absolute;
top: 0;
right: 2px;
-webkit-box-shadow: 0 5px 5px #999; /* Safari and Chrome */
-webkit-transform: rotate(3deg); /* Safari and Chrome */
transform: rotate(3deg);
z-index: -1;
}
<div class="wrapper">
<div class="test">z-index is canceled.</div>
</div>
There are other ways to do this, better ways even. I would probably make the "post-it" background the containing element and then put the text inside, that would probably be the easiest method and would reduce the complexity of what you have.
Check out this article for more details about z-index and stacking order, or the working W3C CSS3 spec on stacking context
Set the div you want to stay on top to position:relative
Had a similar problem where siblings were being transform: translate()'d and z-index wouldn't work.
Most straightforward solution is to set position: relative on all siblings, then z-index would work again.
Quick fix: You could just rotate the other element by 0 degrees as well.
For those who still looking for the solution, I found this article how to solve issue with transform and z-index here
Simple usage of it is by doing this:
.parent { transform-style: preserve-3d; }
.parent:before { transform: translateZ(-1em); }
I was facing the similar problem.
What i did was, I added a wrapper div around the test and gave the transform property to the wrapper div.
.wrapper{
transform: rotate(10deg);
}
here is the fiddle http://jsfiddle.net/KmnF2/16/
Set the div you want to stay on top to position:absolute