I'm trying to resize a div with an id of "homeLink". I'll start by stating that I'm a n00b to CSS and I'm looking to be thrown a bone, only because I know this is so simple. I'm also sure that it would explain something fundamental to usage of CSS that I don't understand, so any pointers to links that will help would be appreciated.
I saw this post, but I'm not sure that I understand why I can't do what I'm trying to.
I did RTFM (the one I could find), and I still don't get it. I would like to avoid invoking js for this, but maybe I wouldn't need to regardless.
Thanks for any help; code below.
<html>
<head>
<style>
#homeLink {
/*this doesn't work */
// width: 50%;
position:absolute;
left:10px;
top: 770px;
}
/* nor does this */
#homeLink a {
width: 10%;
}
</style>
</head>
<body>
<div id="homeLink"><img src="homebutton.png"/></div>
</body>
</html>
As #Mr D stated, You need to resize the image itself not the div.
This part:
#homeLink a {
width: 10%;
}
is actually wrong in terms of CSS as a has no width property. You can preformat certain behaviors or links using CSS, such as underline whilie hovering mouse over link and changing the color of visited links:
a.hover {text-decoration: underline}
a.visited {color: #999999}
<img class="image" src="homebutton.png"/>
then in your css style it:
.image {
height: 200px;
width: 300px;
}
this is not resizing because of image in container div that may be larger than the container widht and height
you can achive this by adding overflow hidden to container div.
or using following css
#homeLink,#homeLink a img {
width: 50%;
position:absolute;
left:10px;
top: 770px;
}
or
#homeLink{
width:50%;
position:absolute;
left:10px;
top:770px;
overflow:hidden;
}
Related
I know I can make an element as high as it is wide using padding-top/bottom
#element {
width: 40%;
padding-top: 40%;
}
The reason the above works is because, when giving padding-top/bottom a percentage value, it is relative to the width of the parent, not the height.
how can i do the same thing, just making it as wide as it is high instead of the other way around?
It needs to be responsive, and the solution should work in all major browser including IE8+
Well, I found a unique hack, though it's only a half-answer (it might answer certain cases). Maybe someone with a few more wits can extend it and find a full solution. :-)
Based on the fact that <img> tags retain their proportion when scaling only one dimension, I put together a test that embeds a 1x1 spacer, and scales it to fit the height.
It does work well. Sadly, the downside is the image needs to be contained in an element which is a sibling to the content generating the height, and the width of the actual element with the content does not change.
Thus, if you're able to duplicate your content, it might actually work.
Here's a JSFiddle to demonstrate it. And, here's the commented code:
<style type="text/css">
#outer {
position:relative; /* limit the absolutely positioned #box */
}
#box {
background-color:red;
position:absolute;
height:100%; /* make this box fill the height of #outer */
display:block;
z-index:-1; /* put it behind the content box generating height (maybe not if you want to hide / copy it) */
}
img {
height:100%; /* generate the proportional square */
}
#inner {
position:absolute;
top:0; bottom:0; left:0; right:0; /* make the inner box just fill the box generated by the image */
}
.centered {
text-align:center;
margin-top:50%;
transform:translateY(-50%); /* quick vertical-centering css */
}
#box-text {
color:white;
}
#height-box {
display:inline-block; /* make the box width fit to the content - not vital either way */
}
</style>
<div id="outer">
<div id="box">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<div id="inner">
<p id="box-text" class="centered">Box</p>
</div>
</div>
<div id="height-box" contenteditable="true">is<br>this<br>actually<br>possible?</div>
</div>
You might need javascript
using jquery it should be something like:
$('#element').css({
width: + $('#element').height()
})
but the above is very rough I didn't even test it
Update it works- see my fiddle:
fiddle for above
or I think I might been a bit sloppy if you prefer:
var el=$('#element');
el.css({
width: + el.height()
});
this
From here:
<div class='box'>
<div class='content'>Aspect ratio of 1:1</div>
</div>
.box{
position: relative;
width: 50%; /* desired width */
}
.box:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
I''m looking to move an image of a saw in between two borders so it is looks likes this.
I believe I have centered the image correctly but it appears I haven't and I am loathe to use padding if that is not right way, as I want this to be semantic as possible for a responsive design. I also need it to be placed within the two borders with one border stacked in front. Presumably I need use z-index to do that but I haven't got that far.
JsFiddle
Are you looking for something like this:
See Demo: http://jsfiddle.net/rathoreahsan/Fcn96/
Hi Played with positioning and tried to make the results as per your referred image requirement. I hope this will help you.
CSS
#logo-container .saw {
left: 50%;
margin: 0 auto;
position: relative;
top: 46px;
}
#tag-container {
border: 2px solid #00AC9D;
height: 150px;
margin-bottom: 5px;
position: relative;
width: 1140px;
}
see the demo:- http://jsfiddle.net/RJVXE/16/
You need to utilize both z-index and positioning.
.line
{
height:1px;
width:100%;
background:#000;
position:absolute;
left:0px;
}
.item1
{
top:5px;
z-index:5;
}
.item3
{
top:25px;
z-index:15;
}
<div style="width:100%; position:relative">
<div class="line item1"></div>
<div style="position:absolute; top:0px;left:50px;z-index:10">
<img src="saw.png" />
</div>
<div class="line item3"></div>
</div>
(example uses both inline & blocked CSS references only for brevity. Stay away from inline CSS).
You could tryo what AlphaMale suggestes here: How to center image in a div horizontally and vertically
Before your image include a 'span' tag. Then add this properties to 'saw' class:
#logo-container .saw {
text-align: center;
margin-bottom:-50px!important;
}
The !important is to override margin: 0 auto that actually has.
http://jsfiddle.net/2EKWS/1/
What I wanted to achieve was centering a string meanwhile forcing it to the bottom of the container div, but the following produces 3 different outcomes in different browsers.
<style>
#outer {
position: relative;
background-color:blue;
height: 50px;
text-align: center;
}
#inner {
bottom: 0px;
position: absolute;
background-color:red;
}
</style>
</head>
<body>
<div id="outer">
<span id="inner">
aaaaaaaaaaaaaaaaaaaaaaa
</span>
</div>
</body>
Chrome centers the #inner perfectly.
Firefox start outputting the string from the perfect center to the right, so somehow it looks a little shifted, the longer the string, the more obvious to the eye.
IE starts outputting the text from the left.
Is there any workaround for this? Which behaviour complies with the standard?
Hey i think you should give left and right :0 in your css as like this
#inner {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: red;
}
Put the text-align: center; on the div#inner, and remove it from the div#outer.
Your inner should have a negative margin that is 1/2 your element's width.
#inner{
position:absolute;
left:50%;
width:500px;
margin-left:-250px;
}
Positioning your inner element vertically centered in combination with absolute positioning is only possible, if you declare a width on it, which only has effect, if it is a non inline-element.
so you need this additional rules:
#inner{
display:inline-block;
width:<yourWidth>px;
margin-left:-<yourWidth/2>px;
left:50%;
}
alternatively, you could do the following:
#inner{
display:block;
left:0;
text-align:center;
}
side note: according to spec 0 may never have a unit, so always write top:0; instead of top:0px;
Well, you could use jQuery if CSS is going wacky. First hide the content using CSS, then have jQuery center it and unhide it when the content is loaded. Something like this should work:
$(document).ready(function() {
var newWidth = ($('#outer').width() - $('#inner').width()) / 2;
$('#inner').css({'visibility': 'visible', 'margin-left': newWidth});
});
This is untested but should work for any condition.
Beginning to wonder if I am missing something obvious but I have been searching for days now and still haven't been able to find a definitive answer.
What I am looking for is a Source ordered Content CSS layout for a two column page (menu to right) with header and sticky footer, and preferably no nasty hacks. Preferable Source order of:
{content}
{rightmenu}
{footer}
{header}
Like I say I'm not getting too far in trying to build this for myself, nor have I been able to find a suitable example anywhere. Any suggestions?
Thanks
content right, with sidebar left is perhaps the easiest floated layout to make, just float the content right with a width, let the left fill the space with overflow to avoid wrapping. footer goes below by clearing.
As for the header put a fake header div first in the source, presuming there may be a logo or something to go in it, even though you might not want hordes of links up there if there is a big dropdown menu to go in there or something like that. Anyway I'd make the "fake" header tall enough to create the space you need then put any actual content in it, then put the content you want to appear top only in a div at the bottom and absolutely position it.
here's a fiddled mockup
This is the best I can come up with at the moment. Bit of a mixture of relative and absolute positioning but seems to work. Can anyone see any problems with this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.container {
min-height: 100%;
/*height: auto !important;*/
height: 100%;
margin: 0 auto -2em;
}
.content{
float: left;
width: 80%;
}
.menu{
margin-left: 80%;
}
.header{
position: absolute;
top: 0px;
height: 3em;
width: 100%;
}
.clearheader{
height: 3em;
}
.footer, .clearfooter {
height: 2em;
clear: both;
}
.container {
background: grey;
}
.header{
background: cyan;
}
.clearheader{
background: cyan;
}
.footer{
background: blue;
}
.clearfooter {
background: lightblue;
}
</style>
<link rel="stylesheet" href="NJC layout2.css" ... />
</head>
<body>
<div class="container">
<div class="clearheader"></div>
<div class="content">Content</div>
<div class="menu">menu</div>
<div class="clearfooter"></div>
</div>
<div class="header">header</div>
<div class="footer">Footer</div>
</body>
</html>
If I understand your question right, this should be your answer:
http://www.positioniseverything.net/ordered-floats.html
I actually think this article is explaining everything quite nice.
I don't want to center a div, I want the contents of a div to be centered. I would like horizontal and vertical alignment.
Sorry, if this is too easy or whatever, but this is kind of a hassle to get it right.
Grae
I am using IE7
If you know the height and width of your image, position it absolutely, set top/left to 50% and margin-top/left to negative half the height/width of your image.
#foo {
position:relative; /* Ensure that this is a positioned parent */
}
#foo img {
width:240px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-120px;
margin-top:-100px;
}
Live example: http://jsfiddle.net/Zd2pz/
I know you've said that dont want to center a div but to achieve your requirement in a cross browser way would be easier using a jquery plugin and a fake div that contains your element to be centered.
I have successfully centered almost anything using this very small plugin that can center any block element.
The only other way I know are the answer that you already received from #simshaun & #Prhogz
EDIT: As per comment request
Include the script in your head tag
<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/jquery.center.min.js" )%>"></script>
Now if you have a DIV that you want to center inside your markup simply use it as
$(document).ready(function() {
$("#myDIV").center({ vertical: false });
});
although the following is obsolete, it still works for almost all browsers
<center>
<div>
your html
</div>
</center>
however, visit this link
http://www.110mb.com/forum/vertical-horizontal-alignment-of-image-within-div-t31709.0.html
For horizontal alignment, use text-align:center;
For vertical alignment, see for example the W3 style guide
If you know the inner element's height beforehand,
CSS:
.container {
text-align: center; /* Center horizontally. */
/* For demo only */
border: 1px solid #000;
height: 500px;
margin: 20px;
width: 700px;
}
.container img {
margin-top: -167px;
position: relative;
top: 50%;
}
HTML:<div class="container">
<img src="http://farm6.static.flickr.com/5004/5270561847_7223069d5e.jpg" width="500" height="334" alt="">
</div>
Example