I just want align the background with my div where I have the text.
I have this code: (Please, resize the window for see the effect)
http://jsfiddle.net/BcqLK/
.texto1Home{
width: 48.1%;
color: #58585A;
font-weight: 700;
line-height: 100%;
text-align: center;
float: left;
border: solid 1px red;
position: absolute;
display: inline-block;
top: 13.75%;
left: 25.75%
}
And I want this result: (is an image)
http://jsfiddle.net/qYVL4/
Try this out:
[EDIT] http://jsfiddle.net/BcqLK/6/
Basically you annotate the container with:
position:relative
After that position the rest of the content with an absolute positioning inside the container. Also I didn't use % but pixels for the positioning. Also it is important to set static image size, otherwise you should really use % or something like that for the alignment.
Regards
Related
I have a background that covers the entire screen. Black line is end of viewport.
Main-div is just a container (dark blue) using position absolute.
Top-div (yellow) also using position absolute.
Middle-div (red) also using positon absolute.
Why? Well I want the Middle-div (red) to completely cover the screen vertically. Also only half should be visible - needs to scroll to see it.
Everything works fine, but how can I position the Footer-div (yellow) below the Middle-div (red)?
CSS code for Yellow Footer:
#footy
{
width: 100%;
height: 100px;
position: absolute;
bottom: 0px;
border: 1px solid yellow;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
Right now it sits on the bottom, leaving too much gap above. Problem it must work on different resolutions. Setting bottom: 100px; will only work on this resolution....
Image:
You cannot position elements relative to other absolutely positioned elements unless they are children of said elements, or both children of the same element when you know the position and size of both elements.
If you make the footer a child of the middle div, you can position it absolutely within:
#footy
{
width: 100%;
height: 100px;
position: absolute;
bottom: -100px;
border: 4px solid yellow;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
I don't know all of your other CSS/HTML, but I guessed in a fiddle here, with some exaggeration of borders, etc for visual reference:
http://jsfiddle.net/jtbowden/NuG7T/
You can also create a wrapper around middle and footy:
http://jsfiddle.net/jtbowden/NuG7T/1/
I thought I had it all working. an <img>, a div.wrapper around it (with position:relative, and an <i class="icon-edit"></i> with absolute position just beneath the right top position of the <img>. something like this:
<div class="userLogo" >
<img ng-show="user.image_url" ng-src="{{user.image_url}}" /> //data from angular, doesn't make a difference here
<div class="userEdit"><i class="icon-edit hand"></i></div>
</div>
with css (less style but you can understand):
.userLogo
{
width: 233px;
height: 233px;
img {
height:233px;
}
float: left;
//border: 1px solid #borders;
position:relative;
}
.userEdit
{
background: #bajeBack;
width: 25px;
height: 25px;
line-height: 25px;
color: #lightGreen;
position: absolute;
top: 13px;
right: 13px;
z-index: 50;
font-size: 19px;
padding: 3px 2px 2px 4px;
text-align: center;
opacity: 0.7;
.icon-edit{
}
}
and then, playing with the webapp it hit me: The image size can change! since I don't want to use a set width/height (that would distort the proportion of some images) I just set the height (to fit the design) and let the browser resize the width accordingly.
My problem; A narrow image would break the design - the edit icon would be hang in air, and not on the image at all, since it's positioned according to the userLogo.
My question: how can I do the same "absolute" positioning according to the image ? since it can't be the container. please enlight me. and don't hesitate to suggest changes to the html if needed. I'll be more the happy to learn something new!
Thanks!
If i understand you correctly, you need to constrain your image to a set space. How about using max-height and max-width.
.userLogo img {
max-height: 233px;
max-width: 233px;
}
It's pretty well supported these days: http://caniuse.com/#search=max-width
I have an issue with the sliding doors technique here. The heading right after the description is floating left due to the sliding doors technique, but all I want is that is stands alone in the center, above the products.
Can you help me understanding how to do it?
Here is the CSS I used for the heading:
h3.offer-title, h3#comments, h3#reply-title {
background:url(images/offer-title-bg.png) no-repeat right bottom;
color:#434343;
display:block;
float:left;
font-size: 14px;
margin-right: 6px;
padding-right:6px;
text-decoration:none;
height: 43px;
line-height: 0;
position: relative; }
h3.offer-title span, h3#comments span, h3#reply-title span {
background:url(images/offer-title-bg.png) no-repeat;
display:block;
padding-left: 20px;
height: 43px;
line-height: 43px;
padding-right: 16px;
}
Thank you.
It's floating because you set float: left in your first CSS code block. To get rid of that behaviour you need to get rid of the float.
Once the float is gone, if you want the header's background to nicely fit the text like it did before, the element needs to have display: inline-block.
But with display: inline-block and no set width on the header (you could add a width, but then it might break if you want to change the text or font size), it's not centered. To get it centered, you need a wrapper element around it which has text-align: center.
So:
Add this block:
h3.offer-title {
display: inline-block; /* this makes the bg fit the text */
float: none; /* this overrides float:left */
}
Wrap the offer-title element in another div.
Style the wrapper with
.offer-title-wrapper {
text-align: center;
}
I imagine there is a simple solution, but it eludes me. If you look at this page you will see that only the header has a grey background. The grey background is set by the #container DIV which I would like to stretch down the entire height of the page:
#container {
padding: 0;
margin: 0;
background-color: #292929;
width: 1200px;
margin: 0 auto;
}
At the moment it is only stretching over the header section of the page, and the content below is not contained within it. I imagine that is because the main content in the #content DIV has absolute positioning, which I need in order to be able to do some animations on the positioning of this div (you can see this when you hover over the nav bar image):
#content {
font-family: Lucida sans unicode !important;
color: #CECBBB;
text-align: justify;
position: absolute;
top: 210px;
padding: 20px 40px;
}
From some research it would seem that DIVs with absolute positioning are not included in the height of parent DIVs, but I am not sure how to fix this.
I'd be grateful for some help.
Thanks,
Nick
Yes, you're right. Elements with absolute positioning are not considered anymore in layout of their parent container. To understand it better, I recommend you read CSS Positioning from A List Apart.
IMHO, you have many solutions:
Use floated layout, instead of absolute positioned layout
Hardcode the height of container element
Use JavaScript to always update the height of the container element.
If you need to have #content absolutely positioned (as you state in your question) then the best way to get the background you desire is to either put the background-color: #292929 on the #content itself (you will probably need to adjust some positioning and padding to eliminate any black).
However, if the animation is the submenu at the top that opens on hover, then I suggest setting both the menu and the content divs to position: relative, and instead of animating the top position of the #content (as your script appears to be doing), animate the height of the menu (have it zero as default and animate to something like 45px high [that's what firebug showed the height to be open]).
#content {
color: #CECBBB;
font-family: Lucida sans unicode !important;
margin-top: 40px;
padding: 20px 40px;
text-align: justify;
}
add a margin-top and remove the position absolute will do this.
Expanding a bit on Cecil's answer here.
One can position divs with margins instead, in order to make sure parent grows with child.
Se this fiddle
https://jsfiddle.net/944oahmy/10/
Where the following css is used
#parent {
border: 1px solid blue;
margin-top: -5px;
margin-left: 10px;
display: inline-block;
}
#child {
border: 1px solid red;
margin-top: 75px;
margin-left: 150px;
width: 500px;
}
I am trying to auto center text from top to bottom and from left to right, in other words text needs to be in a center of the image. The only thing i can change is css, the code tags are hard coded, so it can't be changed.
<style>
code {
background:url(http://pad1.whstatic.com/skins/WikiHow/images/header.png) no-repeat -220px 0;
width:403px;
height:56px;
line-height:1.1em;
text-align:center;
padding-top:56px;
padding-left:60px;
padding-right:40px;
}
</style>
<code>message goes here</code>
You need to set the display to block for the <code>, which is an inline element, so that width and height apply, and better do it the automatic centering way instead of hardcoding any padding sizes:
Sample in http://jsfiddle.net/bx852/7/
<style>
code {
background:url(http://pad1.whstatic.com/skins/WikiHow/images/header.png) no-repeat -220px 0;
width: 310px;
height: 66px;
line-height: 66px;
text-align: center;
display: block;
}
.notice { font-size: 50px }
</style>
<code>message goes here</code>
<code class='notice'>hi joe</code>
result:
If you know the dimensions of the image make the width the width of the image, align the text to center, make the height half the image and set the top padding to half as well. Should do the trick
code {
background:url("images/bkg.png");
width: 400px;
height: 200px;
text-aling: center;
padding-top: 200px;
}
To horizontally and vertically center text, I would set text-align: center to horizontally align. Then, I would set line-height in pixels until it vertically aligns center. Usually, this is double the font size, but it would depend on your padding and height set.
try this instead,
code {
background-image:url('images/header.png');
width: 310px;
height: 66px;
text-align: center;
}
hope you get your answer..
i can try this too,
<form action="put url here" method="get"><input type="submit" style="background-image: url(filename.gif); color: #0000cd; font-weight: bold; font-size: 13pt;"></form>