I'm sure someone's done this before, but I can't come up with a good enough search query to find anything about it.
I'd like to align the baseline (not the bottom of the text element, the baseline of the text itself) to the top of another div. This also means I'd like the descenders to intersect with the other div below it.
HTML looks something like this:
<div id="text">text</div>
<div id="box"></div>
So I want .text to have its baseline directly on top of the top edge of .box, and I want the descenders (like "g") to intersect into .box. I was trying to use the vertical-align property in CSS but it wasn't working. I have a feeling that's what I need though. Any ideas? Thanks!
See this image, the gray box would be .box and the text part is .text. Notice the descenders going down into the box and the baseline having full contact with the box.
Like this, using line-height?
#box{
display:block;
width:100%;
height:200px;
background-color:#ccc;
}
#text{
text-align:center;
font-size:48px;
line-height:30px;
}
<div id="text">TEXT<em>pgjiq</em></div>
<div id="box"></div>
The difficulty is that the height of the font isn't determined by, say, the height of the capital letter T -- it also includes the ascenders and descenders.
There's no way to make CSS cognizant of the amount of space taken up by the ascenders and descenders. Nudging it pixel-by-pixel is your best bet.
If you're worried about this being preserved on different screens and on zooming in and out, it should be fine: browsers are very good at preserving the proportions among dimensions.
That said, the only way to be 100% certain is to use an image or an SVG.
Try this:
<!DOCTYPE html>
<html>
<head>
<style>
* {font-family: tahoma; font-size: 14px;}
#text {margin-bottom: -3px;}
#box {background-color: #ddd; width: 100%; height: 100px;}
</style>
</head>
<body>
<div id="text">TEXT gjipq</div>
<div id="box"></div>
</body>
</html>
The way I was able to accomplish what your image is displaying is by using a negative margin on the bottom box.
*{
margin: 0;
}
.text{
background: lightgrey;
font-size: 24px;
}
.box{
background-color: tomato;
width: 100%;
height: 40px;
margin-top: -12px;
}
Codepen
Related
I'm making a website with the title in a div box at the top of the page. The issue is that when i put a heading in the box it doesn't stay in the box
<div style="width:1000px;height:40px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;">
<h1 style="text-align:center;">
Welcome To A Website
</h1>
</div>
When you create a HTML file, each browser interpret the elements on its way. For example: some browsers have an extra margin config at an <p> or some different line-height property. Because of that, normally, the developers use a Reset CSS (example: http://meyerweb.com/eric/tools/css/reset/). It reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
In your case, h1 by default have some configs that make it go out of the div box (margin and padding, as I checked). You can solve it using: margin: 0; padding: 0; at <h1> element. My suggestion for future projects: use a Reset CSS and you'll have more control in things like that.
Another suggestion: use a CSS file to organize your own styles. Inline styling isn't a good thing when you've a common thing to modify and have to go file by file to do that. With CSS you only change the file and it reflects at all HTML that uses it.
Well, my CSS fix suggestion is:
HTML:
<div>
<h1>Welcome to a Website </h1>
</div>
CSS:
div {
/* Make title go to entire screen*/
width: 100%;
display: block;
/* You visual config */
height:40px;
background:grey;
border:3px solid;
border-radius:10px;
opacity:0.85;
overflow:hidden;
line-height:40px;
}
div h1 {
margin: 0;
padding: 0;
text-align:center;
}
I used width:100%;display:block instead of width:1000px because I assumed that you want a block that occupies 100% width from screen. Working demo: http://jsfiddle.net/brunoluiz/NyLAD/
Well, good luck with HTML and CSS studies!
You can set the margin of your h1 to 0, also note that you should place the styles in some CSS file or right inside the page (between the <style> tags):
div {
width:1000px;
height:40px;
background:grey;
border:3px solid;
border-radius:10px;
opacity:0.85;
overflow:hidden;
line-height:40px;
}
div h1 {
margin:0;
}
Working demo.
Because you specified a specific height for the box in the style. Try removing the "height:40px;" part.
Now the div style looks like this:
style="width:1000px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;"
Fiddle
It looks like the height of the size of the header is too big for the height you set on your div. Try taking out the height from the div's style, like so:
<div style="width:1000px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;">
<h1 style="text-align:center;">
Welcome To A Website
</h1>
</div>
I want to align some text using div align= "right" but I don't want it all the way to the right. Is there any way to specify how far right I want the text to be. It seems simple enough but I wasn't able to find out how to do this.
Thank you.
Use this:
.divClass {
padding-right: 50px;
text-align: right;
}
The padding will push everything inside the div to the left whatever distance you would like. You can also specify in %, pt, em, in, cm...
You can set text-align: right in the CSS, and padding-right: 30px on the element so it doesn't appear on the extreme right of the element.
If you don't want your element to grow by the padding, you can use box-sizing: border-box on it so the padding is included in its width.
For customizing the div align = 'right' tag in HTML, you can use CSS class in HTML code. So, you can try this :
<html>
<head>
<style>
p.first {
padding-right: 100px;
text-align:right;
background-color: gray;
color:red;
}
</style>
</head>
<body>
<h2>Embedding CSS Classes</h2>
<p class="first">This is the p.first paragraph</p>
<div align ="right">This isnot formatted Sentence</div>
</body>
</html>
I Hope you got what you'd needed!
I have a div with a thick border of 10 px. Inside the div there is a pic and some text.
The pic is slightly moved on the border (is a must, should be above the border).
<style>
#main
{
border:10px solid red;
width:400px;
}
.img-to-border
{
margin-left:-10px;
margin-top:-10px;
position:relative;
float:left;
}
.text{
border:1px solid blue;
text-align:right;
padding-right:30px;
}
</style>
<div id="main">
<img src="https://www.google.by/logos/2012/slalom_canoe-2012-sr.png" alt="" class="img-to-border">
<p class="text">DCBA padding-right of text is always 30px </p>
</div>
Here is a working code:
jsFiddle
The problem is if text is one to four symbols longer, it falls down. But, I want it go above the image (above I mean z-indexed, not from uppper side of the screen to the lower side of the screen).
P.S. The padding-right is always 30px.
So, it goes absolutely the same way like you type numbers on the calculator - from right to the left and above the image, in one line. How to do that for my example?
Again, sorry I repeat that, The pic is slightly moved on the border (is a must, should be above the border).
you can make #main position:relative and the image position:absolute so the text goes over it. Check the updated jsfiddle here http://jsfiddle.net/85Zk5/2/ (actually you don't need the float in .img-to-border this way, you can remove it from the jsfiddle should be the same)
I can't get your problem properly. I tried with 1 to lots of letters and the text is always placed on the sameline, so it is the image. If you are having any trouble with the image by itself, you could work on
#main {position: relative;} /* Keep it just the same */
img {
position: absolute;
top: -10px; left: -10px;
}
The image would take no place at the page, but would still be visible and with no bumps with the textbox.
Here is a working fiddle: http://jsfiddle.net/BDFJM/
sorry if I get your question the wrong way.
I have been trying to do the following. I have a <div> element
which spans the whole width of its parent div. Inside of this
I would like to place A. some text and B. an image.
A. some text (either loose text or text enclosed in a <p>, <h2>,
or <span>, or <div> element), on the left.
B. an image defined via an <img> element whose both height and width
are known.
Other requirements:
There must be 12px of space between the text and the <img> element.
Important: both the text from A. and the image from B. must be
centered as a group.
The text from A. must be vertically centered in its enclosing space.
How can I achieve this effect? I have tried different things but cannot
manage to place the image to the right of the text and cannot manage to
have the text A. vertically centered.
Anyone know how to solve this simple problem?
Thank you all for your answers, seems CSS makes simple things so hard,
anyways:
div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }
Is this what you are trying to achieve? http://dabblet.com/gist/3130292
Is this about right?
http://jsfiddle.net/89twb/2/
For aligning text, check this out.
And for placing elements next to each other, this.
This should work:
<div class="my-outer-container">
<div class="my-inner-container">
<div class="my-text">Here is my text, it is lovely text.</div>
<img src="my-image.jpg" alt="" class="my-image" />
</div>
</div>
.my-outer-container {
width:auto;
text-align:center;
}
.my-inner-container {
width:XXXpx; /* enter whatever the width you want here is */
margin:0 auto;
overflow:auto;
}
.my-text {
width:XXXpx; /* enter whatever the width you want here is */
float:left;
margin-right:12px;
}
.my-image {
width:XXXpx; /* enter whatever the width you want here is */
height:XXXpx; /* enter whatever the height you want here is */
float:left;
}
Then maybe use the vertical centering tip on the link provided above by #biziclop
The most intuitive way would be using 'vertical-align:middle;' but it often tends not the way you want it to work.
I did some research and found this code from here. http://phrogz.net/css/vertical-align/index.html
Hope this helps!
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
In order to center a div, it has to have a fixed width. If it spans the width of its parent div, you can only then center things inside it. So it sounds to me like the best solution would be to place your text in a fixed-width left-floated div, and do the same for your image, and then place those both in a fixed-width holder div, which is centered with margin:auto;
Here's an example: http://dabblet.com/gist/3130148
Edit- I vertically centered the text by placing it in a table. Tables are the only surefire way to vertically center something cross-browser.
I've used Blueprint to prototype a very simple page layout...but after reading up on absolute vs. relative positioning and a number of online tutorials regarding vertical positioning, I'm not able to get things working the way I think they should.
Here's my html:
<div class="container" id="header">
<div class="span-4" id="logo">
<img src="logo.png" width="150" height="194" />
</div>
<div class="span-20 last" id="title">
<h1 class="big">TITLE</h1>
</div>
</div>
The document does include the blueprint screen.css file.
I want TITLE aligned with the bottom of the logo, which in practical terms means the bottom of #header.
This was my first try:
#header {
position: relative;
}
#title {
font-size: 36pt;
position: absolute;
bottom: 0;
}
Not unexpectedly, in retrospect, this puts TITLE flush left with the left edge of #header...but it failed to affect the vertical positioning of the title. So I got exactly the opposite of what I was looking for.
So I tried this:
#title {
position: relative;
}
#title h1 {
font-size: 36pt;
position: absolute;
bottom: 0;
}
My theory was that this would allign the h1 element with the bottom of the containing div element...but instead it made TITLE disappear, completely. I guess this means that it's rendering off the visible screen somewhere.
At this point I'm baffled. I'm hoping someone here can point me in the right direction. Thanks!
don't go changing positioning or floating of the blueprint classes. That will mess up the framework.
What you are trying to do is going to be difficult, because what you are trying to do (I assume) is align the baseline of the type with the bottom of the image. There is no easy way to determine the baseline of type via CSS. So getting them aligned is going to be entirely dependent on the particular font that loads for your user. If your image is 50px high, you could start by setting the line height of your h1 to 50px and then tweak from there. But understand that there will be variance from browser to browser, font to font.
You're probably better off making your headline part of the image then use some image replacement techniques to hide the text.
Give this a go and let me know if it is what you are trying to achieve?
HTML:
<div id="container">
<div class="logo">Logo here</div>
<h1>TITLE</h1>
</div>
CSS:
#container{
background-color:#ccc;
position:relative;
width:300px;
height:200px;
}
.logo{
width:110px;
height:40px;
background-color:#ff0000;
margin: 0 auto;
}
#container h1{
font-size:120%;
font-weight:bold;
text-align:center;
}
Here's a live demo: http://jsfiddle.net/jrLL2/