I am having trouble creating this component for a project I'm working on. The requirements include a vertical bar where the text is rotated 90deg, horizontally centered within the bar, and aligned to the bottom of the bar. The screenshot below is what it's supposed to look like. I've linked to a codepen at the bottom to show you what I have so far.
Other Notes
I'd like to try and avoid absolute positioning if possible
The width of the actual title itself needs to be variable
When the window is made smaller I'd prefer it to cutoff from the bottom not the top (not a deal breaker)
Also keep in mind that I've set overflow-y: hidden on the <html> and <body> tags to keep vertical scrolling from happening.
Codepen example
This layout is a bit tricky to achieve without absolute positioning.
Check out the solution - https://codepen.io/trentmrand/pen/KvPgXY
I've removed the content container, so your resulting HTML is now as follows,
<div class="c-key">
<div class="c-key__label">Some label</div>
<h1 class="c-key__title">
Milestones
</h1>
</div>
I've also updated your SCSS to use absolute positioning, as follows,
.c-key {
width:600px;
height: 600px;
position: relative; // make container use relative positioning
background: #000;
&__label {
background: #fff;
border-right: 1px solid #000;
font-size: 13px;
padding: .25rem .5rem;
text-transform: uppercase;
}
&__title {
color: #fff;
font-size: 5rem;
transform: translateX(46px) rotate(-90deg); // rotate text and translate half of the text height to center
transform-origin: left bottom; // rotate from bottom-left
position: absolute; // use absolute positioning with this element
bottom: 0; // position at bottom of parent element
left: 50%; // position at middle of parent element
margin: 0 !important; // remove default padding from header tag
}
}
Related
This is my css:
.triangle-topright {
width: 0;
height: 0;
border-style: solid;
border-width: 100vh 20vw 0vw 50vw;
border-color: rgba(255,255,255,0.5) rgba(255,255,255,0.5) rgba(255,255,255,0.5) transparent;
position: relative;
float: right;
}
Here is my html:
<div class="triangle-topright" >
<h1>here</h1>
</div>
"here" appears under the div, but I want it to appear in the div, let's say in the middle, or wherever I choose. Help!
The div is height: 0;, so nothing can really appear "in" it. However, you're building a CSS triangle, so to heck with convention!
If you're saying you want the h1 to appear in the middle of the div's top border, you could add this style rule and adjust the top property as necessary:
.triangle-topright h1 {
position: absolute; // Works because .triangle-topright is position: relative
top: -50vh; // Half of your vertical border space
line-height: 1rem; // Make sure line height is predictable
margin-top: -.5rem; // Center element on its Y axis (assuming only one line of text is involved)
// You might need to zero out some margins or padding to achieve your desired result
}
I am learning some frontend development and came across this webpage example
It's a simple web page with the body made solely out of divs
This below is a fixed div, when I say fixed I mean when I resize the browser from the bottom or the left, right the div is not adjusted and it goes out of view.
<div style="background-color: #292929; color: white; position: absolute; left: 0px; top: 80px; width: 100px; height: 300px; padding: 5px; padding-right: 20px;">This will be the navigation 'column', which will run down the left of the page.</div>
while the one below is moving
<div style="position: absolute; left: 10px; bottom: 100px; background-color: #0099CC; padding: 5px; color: white; border: 5px white groove; font-size: 13pt;">I could go on, but I think you see the brilliance of these things.</div>
both the divs have absolute positioning but the first or the fixed div has positioning for top defined as `
The only difference that I see is that first or the fixed as
top: 80px \\for fixed div
while it's
bottom: 100px \\for the moving div
My question is why only bottom attribute in css for this div puts it in another layer while top doesn't do the same for the fixed div? Or maybe there is something else to it?
Absolute positioning is dependent on its parent element. If the div is nested within another div with any positioning besides static(the default) then it will be displayed absolute to that div not the body or page. I am not sure what you mean by "layering". If you want to layer divs you can use z-index to put one above the other.
EDIT:
The top left corner of a browser always remain at 0,0 the only thing that changes on a resize is the bottom right coordinates
just got a question regarding relative & absolute positioning and applying clearfix to the main container cos I've written the code and it's not behaving as I expected.
Structure-wise this is a simple page about product history. nav-bar with drop-down menu at the top across the screen, then a big hero image across the screen, followed by a few paragraphs and a simple footer, that's it.
here's my problem:
I need to put 3 components in the hero image area - the hero image itself, one title word on the top left corner and one logo on the top right corner. What I've done is: I created a div and used the hero image as background image. I set the position value of the div to relative. I created another div to hold the title word and set the position to absolute, using top and left to give it a location. Following the same logic, I created another div to hold the logo and set it to float right, with position set to absolute and top and right to give a location. I've applied clearfix to the main div and everything looks ok on my screen (resolution 1280 x 1024) until I saw it on the wide screen(1680 x 1050) --- the logo is not on the hero image! It's to the right side of the hero image.
What caused this? I thought by putting 2 divs inside the main div and applying clearfix, the three will "get together" and act as one and won't separate... Is it because I haven't written any code for responsive layout? Or was it because I shouldn't have used the hero image as the background? Would this problem be solved if I used z-index instead to specify the stack order of hero image, logo and title word?
Below is my code and any help would be much appreciated!
<div id="history-content" class="clearfix">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px;
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp img {
width: 10%; /*not sure I'm doing the right thing here either*/
height: 40%; /*not sure I'm doing the right thing here either*/
float: right;
position: absolute;
right: 100px;
top: 20px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
Few things:
Absolutely positioned elements are taken out of normal flow, hence doesn't affect the size of their parent.
Since they're out of normal flow, float has no effect on them (as far as i know)
Absolutely positioned elements shrink wraps to fit it's contents unless width and height is set explicitly or stretched using the top, right, bottom & left properties.
Now your parent div #history-content doesn't have any height set, and all of it's content of are absolutely positioned, So it's not visible (height 0)
applying a proper height for the parent seems to fix the issues for me.
Side note: unlike what you think, you don't have two absolutely positioned<div>'s, #stamp img absolutely positions the <img> inside div#stamp, for the same reason mentioned above, div#stamp is also invisible (height 0) you'll get the same result with and without it. And without floats
As others have said, float doesn't have an effect on absolute positioned elements, and so technically you don't need clearfix in this case.
I'm not exactly sure why your logo is positioned outside the outermost container #history-content, but you could try to put a border around the #history-content to further troubleshoot.
EDIT: Maybe check your hero image dimension, is it smaller than 1608px in width?
<div id="history-content">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
I've changed your CSS below
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px; /*set whatever minimum height you wish*/
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp {
display: block;
position: absolute;
right: 100px;
top: 20px;
width: 10%; /*set width of image in containter instead*/
height: auto;
}
#stamp img {
max-width: 100%; /*image width will not stretch beyond 100% of container*/
height: auto;
}
JSFiddle: http://jsfiddle.net/5L9WL/3/
I have the following:
HTML:
<div class="banner-success">
<span class="banner-text">
You were successful! Yay! Some long reason what your success
implies goes here.
</span>
</div>
CSS:
/*Add future banners to this style, this is generic banner styling*/
.banner-success
{
background-position: 5px 5px;
background-repeat: no-repeat;
min-height: 42px;
padding-left: 47px;
margin-bottom: 10px;
}
/*Create a new entry in this section for each banner, with appropriate image and
colors*/
/*----------------------------------------------------------------------*/
.banner-success
{
color: #004400;
background-color: #DDF2E4;
background-image: url("../Images/Success.gif");
}
/*----------------------------------------------------------------------*/
.banner-text
{
position: relative;
top: 5px;
}
This allows for a standard banner, each with an image and arbitrary lines of text, assuming a consistent image size. My issue is that the div is being sized as if the text within isn't being pushed down, and so the bottom line of the text reaches outside of the div.
Is there a way to tell a div, or any container element, 'be as big as your constituent elements are, AFTER they've been relatively positioned to you'?
Apply overflow:hidden to the .banner-success.
I made a couple of tweaks to even out the padding around your text (and subbed a background
image so you could see it working w/ an image in place):
http://jsfiddle.net/qTsgL/
Cheers!
I'm trying to place a button. I have its position set to absolute, so I can't figure out how to place it properly.
Its the button that says "Is this your product?"
See an example here: (removed)
I want it to be placed right on top of the widget in the right sidebar with 5px spacing all around. How do I do that?
I originally took the button from here: http://cssdeck.com/t/uHhhprW6
Appreciate the help.
if your Button will be always in same place so you can do it with:
.but {
position: absolute;
width: 80px;
height: 25px;
background-color: #DEDEDE;
right: 0;
margin: 5px;
}
And just edit your right or top whatever you want. little example
The quickest way I could get it to work was remove the top, left, float, and margin-left declarations from your .email rule, and change its position to relative.
.email {
position: relative; /* not absolute */
width: 220px;
height: 30px;
font: .75em "lucida grande", arial, sans-serif;
margin: 0 0 5px 0;
}
I would imagine there are much cleaner/simpler ways to make this particular button - there seems to be a lot of absolute positioning going on with the containing element and its children. But the changes I have suggested seem to work as a quick fix.
When an element has position: absolute, you have to position it using left, right, top and bottom. The values you use on this properties should be relative to the closest positioned ancestor (a "positioned" element being one with a position value other than blank or static).
Consider, for example, the following HTML:
<div id="container">
<div id="position_me"></div>
</div>
And the following CSS:
#container {
width: 500px;
height: 500px;
position: relative;
border: 1px solid green;
}
#position_me {
width: 20px;
height: 20px;
position: absolute;
left: 100px;
top: 100px;
border: 1px solid red;
}
The red box will be 100 px from the top border of the container, and 100px from the left border of the container.
See working example.
If you use position: absolute on the button, you can specify it's location using the top, right, bottom and left properties. For example, to position an element with the id button to the top right of a page, with 5px spacing both on top and at the right, you could use this CSS code:
#button {
position: absolute;
top: 5px;
bottom: 5px;
}
If you just want the element to go to the right side of the parent element, you should use float: right. Then you can use margin-top, margin-right, margin-bottom and margin-left to make sure the element gets some margin around it.
See my example Fiddle for the difference. Note that both 'buttons' are within the same div in the HTML code, but the absolute positioned one appears to be outside of that block.
Have a look at this article for more information on CSS positioning.