I'm puzzled by the following problem. I wish to (absolutely) position the baseline of some piece of HTML text at a certain y-coordinate, while the text should be starting at a certain x-coordinate. The following diagram clearly demonstrates the issue.
So I basically want to control where the point (x,y), henceforth called the "basepoint", in the diagram is located on the screen, relative to the top-left corner of the BODY of the document or some DIV. Important: I don't know beforehand what the font-family or font-size of the text is. This is important, because I don't want to change all the positions in my CSS whenever I change fonts.
In the following code, I try to position the basepoint at (200,100), but instead it positions the top-left of the DIV at that point.
<html>
<style>
BODY
{
position: absolute;
margin: 0px;
}
#text
{
position: absolute;
top: 100px;
left: 200px;
font-family: helvetica, arial; /* may vary */
font-size: 80px; /* may vary */
}
</style>
<body>
<div id="text">css=powerful</div>
</body>
</html>
So how should I modify this code? Should I use the vertical-align property of the enclosing DIV? (I tried, but couldn't get the desired result).
Thanks for any useful replies.
Hacky solution based on this blog post.
HTML:
<body>
<div id="text">css=powerful</div>
</body>
CSS:
body {
margin: 0;
}
#text {
font-size: 30px;
line-height: 0px;
margin-left: 100px;
}
#text:after {
content: "";
display: inline-block;
height: 120px;
}
JsFiddle. The basepoint is aligned to (100, 120).
jsFiddle Goofy (and crazy ugly/hacky), but it works.
<body>
<div id="spacer"></div>
<div id="text">
<img src="http://placehold.it/10X100" id="baseline">css=powerful</div>
</body>
...
body {
margin: 0px;
}
#spacer {
float: left;
width: 190px;
height: 100px;
background-color: red;
}
#baseline {
visibility: hidden;
}
#text {
float: left;
background-color: yellow;
font-family: helvetica, arial; /* may vary */
font-size: 60px; /* may vary */
}
Edit
I guess, really, it's all about the image. So you could just simplify and use a transparent spacer gif. Still stupid hacky, I know.
jsFiddle
By default inline-block/inline and text in block are baseline vertical-aligned. Create an pseudo element inside the block you want to move in Y and defining the height of this spacer.
/**
Create a vertical spacer. It will be aligned with the parent's content baseline:
**/
.text::before{
content: "";
/*the Y value:*/
height: 100px;
width: 0px;
display: inline-block;
}
/**
The rest (only for this demo)
**/
body{
font-family: sans-serif;
font-size: 60px;
margin: 0;
}
body::before{
content: "";
display: block;
position: absolute;
top: 100px;
width: 100%;
height: 2px;
margin: -1px 0;
background-color: #00D500;
z-index: 1;
}
body::after{
content: "";
display: block;
position: absolute;
top: 100px;
left: 200px;
height: 8px;
width: 8px;
margin: -4px;
border-radius: 50%;
background-color: #FF0077;
z-index: 1;
}
.text {
margin: 0;
position: absolute;
/*the X value:*/
left: 200px;
}
<p class="text">css=powerful</p>
Try this :
HTML :
<div id="text-holder">
<div id="text-holder-position"></div>
<div id="text">css=powerful</div>
</div>
<div id="heightJudger"></div>
CSS :
BODY
{
position: absolute;
margin: 0px;
}
#text
{
position: relative;
margin-top:-0.938em;
left:0px;
font-family: helvetica, arial;
font-size: 80px;
/*You can remove this*/
background: yellow;
opacity: 0.5;
}
#text-holder
{
position: absolute;
height: 200px;
left: 200px;
}
#text-holder-position {
position: relative;
height: 200px;
width: 200px;
background: green;
}
#heightJudger {
position:absolute;
height:200px; width:200px;
background:red;
top:0; left:0;
}
if you want to change the position, change the "height" and the "left" parameters of the #text-holder
This way you will be able to control your basepoint position.
I put the height judger and some color so you can see if it's what you exepct.
EDIT : Changed the #text margin unit to em.
JSFiddle
Related
I am trying to understand the position in html and css by playing around with an example I have made up. In this example what I have created 3 divs which show color blocks. I am trying to make the first 2 blocks span the width of the screen and the third do just sit as it is on screen. I am trying to have all 3 blocks just stacked on top of each other.
in my html i have created 3 classes:
<div class="color-stripred">
</div>
<div class="color-stripblue">
</div>
<div class="color-stripgreen">
</div>
In my css i have defined the colors, shapes and positions of these blocks:
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
position: static;
top: 0;
left: 0;
}
.color-stripblue {
display: block;
height: 20px;
width: 100%;
background-color: blue;
left: 0;
}
.color-stripgreen {
display: block;
height: 20px;
width: 100%;
background-color: green;
left: 0;
}
The red block is on top followed by blue then green. It looks like the following picture:
The problem comes when I try and change the positioning in order to make red and box span the width of the screen. i change the red box css as follows:
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
}
what happens is the redbox spans the width of the screen but the other two boxes shift upwards. how can i stop the blue box and the green box from shifting upwards?
The problem is caused by position: fixed; which you don't even need.
I think what you actually want is to set body { margin: 0; }.
According to W3Schools:
Most browsers will display the <body> element with the following
default values:
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
You can see in the snippet below, that if you add this to your CSS (i.e., remove the margin from the body), all three boxes become full viewport width (even though the width is set to 100%!).
See the snippet below.
body {
margin: 0;
}
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
top: 0;
left: 0;
}
.color-stripblue {
display: block;
height: 20px;
width: 100%;
background-color: blue;
left: 0;
}
.color-stripgreen {
display: block;
height: 20px;
width: 100%;
background-color: green;
left: 0;
}
<div class="color-stripred"></div>
<div class="color-stripblue"></div>
<div class="color-stripgreen"></div>
you could add margin-top:20px; to .color-stripblue
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
}
.color-stripblue {
margin-top:20px;
display: block;
height: 20px;
width: 100%;
background-color: blue;
left: 0;
}
.color-stripgreen {
display: block;
height: 20px;
width: 100%;
background-color: green;
left: 0;
}
<div class="color-stripred">
</div>
<div class="color-stripblue">
</div>
<div class="color-stripgreen">
</div>
In order to design with html and css the following way to display numbers ( it's an image counter related to a caroussel )
I'm facing a problem which is putting a sort of line break in "content" so that the .down_numb (36) can be a little bit under the slash like a previous image.
This is my code:
#container{
width: 150px;
height: 150px;
background-color :black;
margin-left: auto;
margin-right: auto;
position: relative;
}
/*Similar parameters between the 2 classes*/
.up_num , .down_num{
position: absolute;
font-size: 25px;
width: 10px;
height: 10px;
color: white;
}
/*Position of up num*/
.up_num{
top:20%;
left: 45%;
}
/*Position of down num*/
.down_num{
top:40%;
left: 45%;
}
/*Pseudo class of down_num with content "/" */
.down_num:before{
content : ' \002F ';
}
<div id="container">
<div class="up_num">1</div>
<div class="down_num">36</div>
</div>
Thanks everyone.
I would apply display: inline-block; and position: relative to the inner DIVs (i.e. putting them into one line and using top settings to offset them from that line), apply position: absolute to the before element containing the / and adjust settings approximately as in my snippet:
#container {
width: 150px;
height: 150px;
background-color: black;
margin-left: auto;
margin-right: auto;
position: relative;
box-sizing: border-box;
padding-top: 34px;
padding-left: 52px;
}
#container>div {
display: inline-block;
position: relative;
}
.up_num,
.down_num {
font-size: 25px;
color: white;
}
.up_num {
top: 20%;
}
.down_num {
top: 35%;
left: 0.2em;
}
.down_num:before {
content: ' \002F ';
position: absolute;
top: -30%;
left: -0.3em;
}
<div id="container">
<div class="up_num">1</div>
<div class="down_num">36</div>
</div>
You can do it using pseudo elements. Simmilar issue is solved in this answer.
Thanks to transform: rotate(angle); you can rotate the line as you want and it doesn't interfere with other elements as it is essentially a part of the element you assign it to. You will still need to play with it for a bit though.
Here is my html
<div class="container">
<img src="something" class="avatar"/>
<div class="edit_photo">Edit</div>
</div>
"edit_photo" has an image on it's background. the img tag dimensions is not set so it could be anything. But I want the "edit_photo" div to always be on the bottom right corner of the img. Is this possible with css? I can't think of a way to do this. the img tag needs to always be an img tag and I can't change it to a div.
Thank you!
I think this may be possible:
CSS:
.container{
position: relative;
display: inline-block;
}
img{
background: red;
height: 120px;
width: 250px;
}
.edit_photo{
position: absolute;
bottom: 0;
right: 0;
background: blue;
height: 25px;
width: 25px;
}
Here's a JSFiddle to see: http://jsfiddle.net/gW9PK/
You might need to play around with the .edit_photo and nudge it up a little bit.
The container should be position: relative; and the edit_photo position: absolute; like this:
.container {
position: relative;
/* inline-block for 100% of child width */
display: inline-block;
border: 3px solid #ddd;
}
img {
/* for 100% height of the container */
display: block;
}
.edit_photo {
position: absolute;
right: 5px;
bottom: 10px;
/* Some color */
background: red;
padding: 2px 4px;
border-radius: 3px;
color: white;
}
UPDATED DEMO WITH MULTIPLE IMAGES: http://jsfiddle.net/HYQLQ/3/
write this code in css
.container{
position: absolute;
}
.edit_photo{
position: absolute;
bottom:0px;
right:0px;
widht:20px;
height:20px;
}
edit_photo
{
bottom:-600
top:30px;
right:5px;
}
play with the numbers.
I have to centralize an image in both axis and then add a linkable area to that image's top left area. This works great for webkit and ff but ie fails. My html code is this:
<body>
<div class="content">
<img src="images/main_image.jpg" />
Logo
</div>
</body>
and my css code this:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
position: relative;
top: -50%;
}
div.content a {
width: 14%;
height: 9%;
display: inline-block;
position: absolute;
top: -42%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
}
this doesn't work for ie because i use an a tag displayed as inline-block positioned accordingly. Our friend ie doesn't show the linkable part in the screen at all because the text-indent. Can someone help a little bit? Thanks. This demo shall help you more i think.
Take a look at this demo (or results only here)
HTML is not changed. I assume that image has the same height/width as content div
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
padding: 0;
border:solid 1px blue;
width: 1001px;
height: 626px;
/*below will center div on screen */
top: 50%;
margin: -313px auto 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
border:solid 1px white;
/*top:-50% removed. Assuming that image has the same height/width as content div*/
}
div.content a {
width: 14%;
height: 9%;
position: absolute;
/* top: -something changed. Remember that absolutely positioned div is always positioned from closest parent relative div*/
top: 10%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
border:solid 1px green;
}
It looks a like you're creating a container, moving it to the bottom of the screen and then moving the image outside of it to the top-left corner of the screen. This last step is exactly what will fail in many cases. Child-elements usually will be hidden or cutted away when leaving their parent container. IE is more restrictive but correct in this case.
You can achieve your goal easier when you'll place the image outside the container. Keep in mind that body is a container by itself that is allways 100% wide and high (and cannot be changed to be 50% or whatsoever).
Here's the result on js-fiddle
The Html:
<body>
this is the body
<img class="my_image" src="images/main_image.jpg" />
<div class="content">
This is the container
<a href="#" >Logo</a>
</div>
</body>
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
color:silver;
}
div.content {
color:black;
background-color: silver;
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
.my_image {
width:160px;
height:60px;
border:1px solid red;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
left:0;
}
div.content a {
color:red;
font-size:14px;
display: inline-block;
position: absolute;
top: 20%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
}
In general it's the best to avoid negative values. They're misinterpreted in many browsers and produce problems.
I have some code as follows where I think my layering is causing a rendered link to be unclickable. Some of this example I've converted to styles from external CSS classes for ease of writing this up as a small use case. This is currently being testing on modern browsers (latest stable FF and Chrome).
<body>
<!-- whole container needs to be at z-index of -1 -->
<div id="container">
<div class="corner" id="backgroundTopLeft"></div>
<div class="corner" id="backgroundTopRight"></div>
<div class="corner" id="backgroundBottomLeft"></div>
<div class="corner" id="backgroundBottomRight"></div>
<!-- whole container needs to be at z-index of 1 -->
<div id="container2">
<div id="headerSection"><img src="images/jClarity_logo.png" alt="logo" /></div>
<div id="navigationSection">
<a class="selected" href="#">Introduction</a><span class="menuDivider">|</span>About
</div>
</div>
</div>
</body>
And the CSS
#charset "utf-8";
/* Default margin, padding and font-family */
*
{
font-family: Arial;
margin: 0px;
padding: 0px;
}
/* All images should have no borders by default */
img
{
border: none;
}
/* Global styling for links, uses black as the color */
a
{
color: #000000;
text-decoration: none;
}
a.selected
{
font-weight: bold;
}
a:hover
{
color:#FF00FF;
}
#container
{
position: relative;
z-index: -1;
height: 100%;
}
.corner
{
position: absolute;
height: 100px;
width: 100px;
background-color: #172944;
z-index: -1;
}
#backgroundTopLeft
{
top: 0px;
left: 0px;
}
#backgroundTopRight
{
top: 0px;
right: 0px;
}
#backgroundBottomLeft
{
bottom: 0px;
left: 0px;
}
#backgroundBottomRight
{
bottom: 0px;
right: 0px;
}
#container2
{
position: relative;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.8;
filter:alpha(opacity=80);
background-image:url('../images/groovepaper.png');
}
/* The headerSection div, designed to fit in a centered logo */
#headerSection
{
margin-left: auto;
margin-right: auto;
padding-bottom: 70px;
padding-top: 54px;
height: 70px;
width: 250px;
}
/* The navigationSection div, designed to fit in the menu */
#navigationSection
{
padding-bottom: 15px;
margin-left: auto;
margin-right: auto;
width: 600px;
text-align: right;
}
.menuDivider
{
color: #666666;
padding-left: 5px;
padding-right: 5px;
}
It all looks fine (lots of other purely color/font-size type styling is applied), but foobar.html is not clickable.
I'm pretty sure I've done something wrong with the layering, but I thought the use of z-indices would sort me out..
Working fine http://jsfiddle.net/hPkTu/, if the problem is with IE8, use z-index:1; IE8 is known to be buggy with this particular problem of z-index's.
UPDATE You changed your question, here is the working jsFiddle of your updated problem http://jsfiddle.net/VjTXu/2/. I changed z-index of container to O, -1 was making it go below body and that's why your link was not clickable, now it is.