I want to align the header text (blue background) to the right/bottom corner of the header so that it is ALWAYS in that position no matter the device (responsive). So far it looks different on every device I've tested on, so I'm stumped. I've spent ALL DAY on this and gotten nowhere. Can anyone help?
Thank you!
[URL removed for privacy]
P.S. I have read CSS Positioning relative to corner of Div and tried to implement it, but am still stuck!
You can give position: relative to the parent and position: absolute; right: 0; bottom: 0; to the child element and the child will be positioned relatively to the parent (it will be at the bottom right corner). Here is an example:
.wrapper {
width: 100%;
height: 150px;
position: relative;
background-color: violet;
}
.target {
position: absolute;
width: 100px;
height: 100px;
background-color: black;
color: white;
text-align: center;
line-height: 100px;
right: 0;
bottom: 0;
}
<div class="wrapper">
<div class="target">TARGET</div>
</div>
Related
I have the a page that looks like this:
What I want to do is that when I scroll the page, only the bottom half should move. I did it but because of the padding it makes it like this:
This is my css file:
.sites-list {
height: 40%;
width: 100%;
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 400px;
padding-left: 18rem;
padding-top: 5%;
background-color: #ffffff;
text-align: left;
font-size: 30px;
line-height: 40px;
color: #396aba;
}
When I inspect it in browser and uncheck top and padding-top it works fine:
How should I change it to make the white border be there if there is no scrolling but when I scroll to make the text go beneath the blue part as in the last picture?
I don't know exactly how your bars look like in CSS, but here is a working example that uses position: fixed.
.Bar {
position: fixed;
left: 0;
width: 100%;
height: 20vh;
z-index: 10;
background: #175f8f;
}
.Bar-top {
top: 0;
}
.Bar-bottom {
bottom: 0;
}
.Content {
position: relative;
z-index: 0;
padding-top: calc( 20vh + 100px ); /* set to the same height as the bar would be */
/* If you want to increase the padding and mix relative with absolute dimensions, use calc. Otherwise just add them up for a slightly better performance */
height: 2000px; /* we cheat a bit so we have something to scroll */
}
<div class="Bar Bar-top"></div>
<div class="Content">
Having your content here.
</div>
<div class="Bar Bar-bottom"></div>
You could set the blue bar to the following:
Position: fixed;
top: 0px;
z-index: 1;
And then set the element which you want the bar
to go over to:
z-index: 2;
This basically means that the blue bar is 'Fixed' to the top of the browser at all times. The nav element underneath it may require a margin-top of however tall the blue bar is to push it below the blue bar before it has been scrolled.
For a new Wordpress template, I designed (in Photoshop) a round-ish header that overlaps the image beneath.
The Design:
My try:
Code:
Right now, I'm using a border radius, since I want to do it in CSS rather than cutting out an image (also for responsive reasons).
border-radius: 100% / 100%;
No matter how I change the values, the border won't become nicely rounded.
The website so far: http://voorbeeld.website/19/
Maybe I was a little too creative in Photoshop, but nothing is impossible! Right?
Use a pseudo element, in this case I used the :before
Make sure the .wrapper's elements also have a position, relative or absolute, or you need to set z-index: -1 to the :before
.wrapper {
position: relative;
height: 200px;
overflow: hidden;
}
.wrapper:before {
content: '';
position: absolute;
top: -200px;
left: -10%;
width: 120%;
height: 400px;
background: lightgray;
border-radius: 50%;
}
.content {
position: relative;
padding: 20px;
text-align: center;
}
<div class="wrapper">
<div class="content">
Put your content here
</div>
</div>
I'm trying to create a layout where there is a fixed width and fixed position sidebar on the left.
The problem is setting the width of the main content area - it stretches off the screen to the right. Here's what I've got:
<body>
<div class="left-sidebar">
sidebar
</div>
<div class="main-content">
main
</div>
</body>
CSS:
body {
position: relative;
}
.left-sidebar {
position: fixed;
top: 0;
left: 0;
width: 220px;
}
.main-content {
position: absolute;
top: 0;
left: 220px;
background: #f0f0f0;
width: 100%;
}
How can I have the main content div start at 220px from the left, but only fill the window width?
Try setting the main content to appear fully left but give it a margin-left to make room for the sidebar.
.main-content {
position: absolute;
top: 0;
left: 0px;
margin-left: 220px;
background: #f0f0f0;
width: 100%;
}
Edit:
I've had a bit of time now to try out the code. I suggested margin-left instead of padding-left because it fits better with what you want to do. Using margin gives you the option of putting a border around your content. Also, if you actually do want padding in the content you can set it as normal. if you used a padding to indent for the sidebar you'd have to add the 220px to whatever actual padding you wanted.
This is what I came up with to get it working with margins instead of padding.
body {
margin: 0;
padding: 0;
border: 0;
}
.left-sidebar {
position: absolute;
top: 0;
left: 0;
width: 220px;
border: 1px solid green;
}
.main-content
{
position: fixed;
top: 0;
left: 0px;
right: 0px;
margin-left: 220px;
background: #f0f0f0;
border: 1px solid red;
}
I also agree with the anser referencing dynamic drive. One of the best ways to learn CSS initially is to have a go with a working stylesheet and customise it for your needs. The big advantage is it will already be cross browser compatible. Just use Google to find a bit of inspiration.
I have something pretty simple I want to do. I'm still working through all the gotchas of CSS, so bear with me. I want to essentially take a div, put it position: absolute; left: 10px; right: 10px; bottom: 10px, then take its children and center them horizontally within the browser. This is my attempt at doing so:
HTML:
<div class="notificashun-holder">
<div class="alert-message info notificashun">
<p>Hello, World!</p>
</div>
</div>
CSS:
.notificashun-holder {
display: block;
bottom: 10px;
left: 10px;
right: 10px;
position: absolute;
}
.notificashun {
display: inline-block;
margin: 0 auto;
}
The thing is, I'm using Bootstrap and the alert-message class makes items display: block, so I need to "shrink" them down to normal size (to fit only the size of their contents).
Can anyone help me do this? I simply need to make notificashun-holder be ten pixels from the left, right, and bottom of the browser, and notificashun be only as big as it needs to be and be centered within notificashun-holder.
Since you're using an inline-block element for the .notificashun, it can be affected by the text-align property, so to make it centered, just apply the text-align: center; property to your .notificashun-holder:
.notificashun-holder {
display: block;
bottom: 10px;
left: 10px;
right: 10px;
position: absolute;
/*New property:*/
text-align: center;
}
My site, http://hivechatter.com/, is super sexy for Firefox, Chrome, IE8, you name it:
But then along comes IE7, who mauls her divs so bad that they nearly run off the screen! And for whatever reason the content within the divs is centered. What the heck is going on here? It seems to be something to do with the way IE7 interprets the left: percentage margins, but I can't figure it out.
For convenience and posterity's sake, below are the relevant portions of my css, with text formatting and other nonsense removed. #container is the overall page container, #blue_box is the main content box, #left and #right are the columns in the blue box, #divider is the white line that separates them, #links is the light blue nav hovering below #blue_box.
#background {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -9999;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: no-repeat #222933;
overflow: hidden;
}
#container {
position: relative;
left: 34%;
top: 10%;
width: 50%;
min-width: 450px;
max-width: 700px;
overflow: auto;
padding: 0;
}
#blue_box {
position: relative; /* so that divider has appropriate height */
width: 94%;
padding: 3%;
overflow: auto; /*needed so that div stretches with child divs*/
}
#left {
position: relative;
float: left;
width: 44%;
margin: 0;
padding: 0;
}
#right {
position: relative;
float: right;
width: 49%;
margin: 0;
padding: 0;
}
#divider{
position:absolute;
left:49%;
top:6%;
bottom:6%;
border-left:1px solid white;
}
#links {
float: right;
width: 16em;
overflow: auto;
}
Change your position from relative to absolute for the container CSS.
Your problem is your image is just there with the container coming after it with a relative positioning.
IE7 is centering your container because you've set your body to text-align:center, then you're setting your container left:34%. IE is just adding those together for some reason. This is probably why your stuff is being centered in IE. You could do a conditional stylesheet for IE7 and remove the text-align.
Can't test at the moment if this will solve the issue but using margins on the blue box to position it instead of position: relative usually makes things a lot easier in the dark world of ancient Internet Explorers.