I tried to make a text inside a div, I made code saying: text-align:center; and padding:30px 0px; but padding is NOT working..the text just stays at the top of the div, but should be in the center..(from top to bottom).
Maybe is it because of the div's position absolute??
I don't know, please help me
Since the div's position is absolute, You can use the top, bottom, left, and right attributes to add a padding around the div.
text-align: center; is used for horizontal alignment.
For vertical alignment, there are other methodologies you should use. Take a look at this link, it gives you all different bits and pieces:
https://css-tricks.com/centering-css-complete-guide/
.container {
position: absolute;
text-align: center;
padding : 30px 0;
}
Your css may be look like above css code. If you given absolute position for the div you are removing the flow of the div from the dom tree. so its width may be shrink to the content of the text width. So you need to mention the width for the div as below. it will work jsfiddlelink
.container {
position: absolute;
text-align: center;
padding : 30px 0;
width: 100%;
}
Why don't you use line-height: [height of div]?
.container {
position: absolute;
height: 100px; (or anything else)
line-height: 100px; (must be the same as the height)
text-align: center;
}
Then it should be centered. I Hope I helped! :-)
Related
So I've been told (maybe this is wrong) that if you want to overide (go beyond) the margins of a parent div simply make the child position:absolute. The problem with this is that it will overlap text that is set below that div.
Is there a way to;
Override the margins of the parent div and have that div still push down the adjacent text?
Can this be executed by not applying a margin-top: to the first block of text? This solution seems sloppy, the layout would blow up while in mobile view.
Thanks for you help / opinion on this one.
The page in question can be found here.
remove the image background for the div has the position absolute and put the image as a background for the parent div with the following selector:
.entry-content {
padding: 0 40px 40px;
background: url('http://www.gridviper.com/phelan/wp-content/uploads/back-blue-top4.jpg') no-repeat;
background-size: 100% 219px;
}
and change the absolute div css to be as the following:
.content-masthead {
max-width: 100%;
min-height: 219px;
position: relative;
left: 0;
right: 0;
margin-left: 0px;
padding-left: 0px;
}
Few hinds to help you fixing this:
This this not the parent, but the first positioned ancestor (with position other than null, can be "relative").
You can define the size of this element in percentage relative to this ancestor.
You can use padding instead of margin to keep the space.
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/
My header holds a logo image as well as my nav element. I would like my nav to sit at the bottom of the header, but without using absolute positioning or specific top/left pixels because I would like this to be responsive.
Here is my code so far
http://jsfiddle.net/Aiedail/86ZGd/
I had tried adding like a
nav{margin-top: 50%;}
but that used the full page height rather than the containing div height.
Any suggestions or help would be appreciated.
I do think the best way for you to solve this, is to set your parent container to
position: relative;
and in your nav, use
position: absolute;
bottom: 0;
right: 0;
this way, your nav is always in the rightbottom corner of your header, but your header is still relative, so you don't lose the responsiveness.
JSFiddle Here
Basically, I took your logo and the nav and made them both display: inline-block; Removed the float styles.
Then you can use the vertical-align: bottom; for the nav element.
I forked your jsfiddle here http://jsfiddle.net/tQg8d/1/
img{
#extend .layout;
padding: 10px;
width: 30%;
height: auto;
max-width: 300px;
display: inline-block;
}
nav{
position: relative;
margin: 0;
padding: 0;
width: 69%;
height: auto;
border: 5px solid $red;
bottom: 0px;
display: inline-block;
vertical-align: bottom;
I also had to make the width of the nav a little smaller so changed it to 69% so that it shows up to the right of the logo. Might be because of the border.
Hope this is will help, if like to increase header height and and nav width may fine for you
nav { width :100% }
and
header { max-height : 200px; }
I would honestly suggest you follow the position:absolute model that Jamie detailed, but if you want a different way, you can use some negative margins.
For this, though, you need to be able to specify the height of the nav element (use ems, as they work better with responsive designs).
So you would just clear the float after the image--then you can set the top margin to -xxx (whatever the height of the element is).
Here is an example:
http://cdpn.io/bfoyj
Not as pretty as using the absolute positioning, but also works.
Here's what I'd like to do: have a banner across the top of a website which stretches all across. On the left is a menu, and on the right a logo image; the menu floats left, the image floats right.
The problem is the resizing of the browser window. Because the image floats right, it correctly moves as the window gets smaller. However, at some point it begins to float into the menu. Here is a Fiddle that illustrates this effect with two floating images. Resize the browser window to see how the two images overlap.
Setting
body {
min-width: 800px;
}
I can now make sure that the scrollbar appears as the browser window reaches a certain minimum width. However, that doesn't hinder the right-floating image to keep moving as the browser window keeps getting smaller. I tried to change position: relative but that didn't work. I tried to use Javascript to fixate the images once the browser window reaches its min-width but that didn't seem to have an impact either. Using min-width on the DIV and making the images children of the DIV didn't work either.
My question is: how can I make sure that, starting at a certain window size, the right-floating image stays put instead of floating into the left-floating menu?
EDIT: Oh dear, I forgot to mention a rather important detail: the menu bar at the top needs to be sticky. That is why I used the position: fixed property for the DIV. The other page content is supposed to scroll under that menu and out of the window, see the modified fiddle here which is based on ntgCleaner's answer. This kind-of changes the whole thing, doesn't it! Sorry about that...
Thanks!
A couple things I changed:
I made your banner DIV a container instead of just a free floating div. Probably not necessary.
I gave that banner div a min-width:280px and made it overflow:hidden;
I made the images just float left and right, not positioned relatively or absolute (since it's in the div container now).
#banner {
left: 0px;
top: 0px;
width: 100%;
height: 60px;
background-color: lightblue;
z-index: 1;
opacity: 0.8;
overflow:hidden;
min-width:280px;
}
#left {
float:left;
margin:5px;
height:40px;
}
#right {
float:right;
margin:5px;
height:40px;
}
Here's the fiddle
EDITED FOR THE EDITED QUESTION:
You will just need to place all of your content under your header into a div, then give that div a top margin of the height of your fixed div. In this caes, it's 60px.
Add this to your HTML
<div id="content">
this <br>
is <br>
some <br>
test <br>
text <br>
</div>
then add this to your CSS
#content {
margin:60px 0px 0px 0px;
}
Here's the new fiddle
Is this what you are after? http://jsfiddle.net/9wNEx/10/
You are not using the position: fixed correctly. Fixed means 'positioned relative to the viewport or browser window', and that is exactly what you are experiencing.
I removed the position: fixed from the images, and placed them inside the div. This should keep them always on top of the page, as they are inside the div that is still positioned fixed.
Also I tweaked some of the other styling to replicate your example. Note that i removed the fixed height of the head and replaced it by a padding bottom. This way the height will follow the content whenever the screen size becomes to small and the images are forced underneath each other.
The css looks like this now:
#banner {
left: 0px;
top: 0px;
width: 100%;
padding-bottom: 15px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8;
}
#left {
float: left;
margin-left: 10px;
margin-top: 5px;
height: 40px;
}
#right {
float: right;
margin-right: 10px;
margin-top: 5px;
height: 40px;
}
I changed your HTML to put the <img> tags inside the banner, and added the min-width to the #banner since it has position: fixed. You'll still need to add min-width to the body or a container that wraps all other elements if you want there to be a min-width of the entire page.
http://jsfiddle.net/Wexcode/s8bQL/
<div id="banner">
<img id="left" src="http://www.google.com/images/srpr/logo3w.png" />
<img id="right" src="http://www.google.com/images/srpr/logo3w.png" />
</div>
#banner {
width: 100%;
min-width: 800px;
height: 60px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8; }
#left {
float: left;
margin: 5px 0 0 10px;
height: 40px; }
#right {
float: right;
margin: 5px 10px 0 0;
height: 40px; }
When I look at your Fiddle I think your problem isn't the floats at all. position:fixed supersedes float. Those two elements aren't floating at all, they're in a fixed position (similar to an absolute position), which is why they overlap when they don't have enough room.
Take out float:left and float:right, the result will be the same. Also, top, left, bottom, and right don't work on non-positioned elements. So they are superfluous on your banner.
If you use floats, however, when there is not enough room the right image will wrap underneath the left. See http://codepen.io/morewry/pen/rjCGd. Assuming the heights on the images were set for jsfiddle testing only, all you need is:
.banner {
padding: 5px; /* don't repeat padding unnecessarily */
min-width: ??; /* to keep floats from wrapping, set one */
overflow: hidden; /* clearfix */
}
.right { float: right; } /* only need one float, don't over-complicate it with two */
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.