I'm trying to, of course, build something in HTML.
However, I am running into some serious issues with positioning!
I'm trying to get elements in the website to be centered, but I cannot do that without sacrificing (somehow) controls such as z-index, and width on those elements -- In some cases, vice versa.
Theoretically, I should be able to make something be centered, set it's width, AND set it's Z index all at once.
Can anyone help?
To center something, set it's margins to auto. To set an objects width, set it's width, to set an object's z-index, set it's position to relative to maintain it's centreness, and set it's z-index accordingly.
div {
width:40%;
position:relative;
z-index:5;
margin:auto;
background-color: red;
}
Example: http://jsfiddle.net/wDzkd/
Related
First of all, I am searching for a pure CSS solution. I can do it really easily with JavaScript, so don't bother giving me hint on how to do it in JS.
I have a web page with 3 container. 2 of them are fixed, the other one is static.
I want to give the static container a padding top and bottom equal to the fixed container.
The first fixed element have a fixed height, so that's not a problem, i give a padding equal to the height :
#header{
height : 100px;
position : fixed;
}
#content{
padding-top : 100px;
}
But the second fixed element is dynamic since we are using a CMS. Some element can be added by the client and we want the layout to adjust automatically.
You can easily see what i'm trying to do in this Fiddle, just uncomment the JS to see the desired Result.
P.S.: I support iE8 and older.
P.P.S.: I am totally aware that it may be impossible w/o JS. If so, just tell me in comment.
Since #header and #footer are fixed positioned, they are taken out of the document flow and have no relationship to #content anymore.
Therefor you have to options (imho).
1) give the footer a fixed height, so you can do the padding trick, same as with your header.
2) use Javascript, since there is no pure CSS solution (except for 1. point).
I'm confused in some CSS trick. The scenario is painted below. In the 2nd container is a plugin like http://workshop.rs/projects/coin-slider/
I want to move that 2nd container up (the green one), to be connected with the menu bar. The purpose is, I want the Image Logo overlaping the 2nd container. How can I achieve that ?
I tried simply set the negative value of the margin-top property of the 2nd container but it causes that the div's are moved.
This should do it:
#container-2 {
display:block;
position:relative;
top:-0px /* <-- Put actual value here */
}
It would be easier if you could post you css code.
Somes possibilites:
set "image logo" margin-bottom to a negative value and make sure container#1 height isn´t preventing the bottom container go up.
or set both containers position: absolute and then set property top to match the desired result.
I would go for a position: absolute for the image logo.
The problem I'm having is I have two divs at the top of my page, one contains a repeating blue background, the other contains a background image.
I have to set the height of both divs in order for them to expand vertically, the don't expand with the content. I have that form on the right hand side set to overflow. Which I believe is what's causing the problem.
I have tried not having the height css in the code, but it still won't expand vertically.
In order to get the backgrounds to even show up I have to manually set the height.
This is the page: http://www.repipespecialists.com/landing/google/repiping.html
This is the CSS code:
#top_container {
width:100%;
height:1040px;
background-image:url(../images/top_bg_repeat.jpg);
background-repeat:repeat-x;
background-color:#83b4e9;
}
#top_header {
width:1200px;
height:1040px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-color:#83b4e9;
margin: 0 auto;
}
I agree with WDan in that the issue you are having is due to your use of float: left and float: right on the left_content and right_content div elements.
When you use float on an element, you are basically removing it from the normal flow of the document. By default, elements will appear on the page in whatever order you specify in the markup. Using float (or things like position: absolute) will remove the element from this "order", or "document flow", such that the floated element will be ignored when placing other elements in their default position on the page.
Since the space used by these floated elements are ignored, the top_header div does not take the floated element's size into account when determining its own size. This is why your div is not automatically expanding.
Another alternative to float is to use display: inline-block. Here are some links you can read to learn more about the differences:
http://www.ternstyle.us/blog/float-vs-inline-block
http://www.onderhond.com/blog/work/inline-block-vs-float/
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I think the problem is you use float in 'left_content' and 'right_content'
Use “overflow: hidden” in the wrapper div.
Or i have been building web pages for too long without a break or something really weird happened.
<div style="background-color:#0F0; margin:5px; height:5px;"></div>
Will result in a long bar of 5 height across the width of the parent div. This should normally not be visible since i gave the div no width.
I tried everything, messed up my whole CSS layout and nothing seemed to get rid of it. I even check some divs of me in that same project that still work like this.
So i opened a new project and just filled in that line above to make sure there wasn't some style setting messing things up. But still there is a green bar showing.
I just want my div to be the size of the text in it.
Again, i could be seeing things but this happened all of a sudden and i'm really clueless...
use display:inline because a div element automatic get the display:block
Your div must have display:block either in your code or inherited from your browser.
change it to display:inline for your desired outcome.
Example here.
http://jsfiddle.net/Hn2xP/1
Break the document flow
By default, div element has it's style display property set to block, what makes it's width to fill the dimensions of parent.
You have two options to make it clip to text, position: absolute or float: left (right works also, depends), as in:
<div style="background-color:#0F0; margin:5px; height:5px; position: absolute;"></div>
or:
<div style="background-color:#0F0; margin:5px; height:5px; float: left;"></div>
For more information, see CSS Floats and/or CSS Positions.
P.S. Bear in mind, that absolute position and/or floated element will remove it from document flow.
span instead of div (display: inline)
If you want to keep the document flow, use span instead of div - it's display property is inline by default, as Blowsie suggested.
<span style="background-color:#0F0; margin:5px; height:5px;"></span>
display: inline-block
There is also an option with display property set to inline-block, but it's compatibility is limited. See CSS Display property information for more details.
<div style="background-color:#0F0; margin:5px; height:5px; display: inline-block;"></div>
Usually a padding issue. Difficult to diagnose without seeing code or example of site error.
try:
div {padding: 0px;}
in your css
By default, the width of a div is auto, meaning that it will fill the entire available content. To have "no width" as you seem to want, set the width to zero explicitly. Or, use one of the other answers...
imax is a div element.
#imax {
width:222px;
height:222px;
}
#imax img {
width:222px;
height:auto;
}
if either way I tried auto on width or height, the images with different orientation will result in distort in either scale. How could I fix to display with ratio-aspect?
Leave out the height:
#imax img {
width:222px;
}
And the browser will take care of the aspect ratio calculation.
The image is distorted since you put restrictions on it's parent. If you specify just one of the size attributes, the other should scale according to proportions - unless it's limited/affected by its container. Might work differently if you used max-height/width on the container
Cannot be done with CSS only.
You could use Javascript to do this: Get either height or width of the full size image, then calculate the correct smaller size.