After practicing some of the CSS i have been learning i have encountered a problem and despite trying numerous things i cant seem to get what i want. I transformed the text to fit in the grey divs vertically, but i cant seem to get it so the words are all displayed on one line. How do i acheive this? I think once i get that it should be easy to position them centrally.
http://jsfiddle.net/#&togetherjs=DGHlFmn0Hg
You should center the text first using transform and absolute positioning. Then just apply the rotate transform (around the center point by default):
#headline .buttons {
height:100%;
width:50px;
background:#a5a5a5;
float:right;
margin-right:3px;
color:#fff;
/* add this */
position:relative;
}
#headline .buttons p {
margin:0;
text-align:center;
position:absolute;
width:260px;
top:50%;
left:50%;
transform: translate(-50%, -50%) rotate(-90deg);
}
Jsfiddle demo.
Note that the width of the <p> element will just fill the width of the containing button which is just small (hence the text wrapping). So you have to set the width explicitly as large as possible (it does not really matter) so that the text will span on a single line.
Good approach to vertical text that is placed in one line and takes as much vertical space as needed is described in this article: http://kizu.ru/en/fun/rotated-text/
The 1st example there seems to be exactly your case (compact table headers).
Related
I've found HTML/CSS combinations that do one or multiple of these things but none that do all of them together. Basically I want:
a tile-style menu with six tiles
each tile to be a fixed height and width (maybe 10em - square)
wrapped text without creating a bigger tile (line-height has this problem)
background colour for the tiles but whitespace (margins) to the right and below
all text centred vertically and horizontally
wrapped tiles for smaller displays
Basically I'm looking for something like the collapse by rows option here but with centred text (and WordPress doesn't seem to recognise the #breakpoint rule, so it doesn't work for me). I've tried various methods with display:table/table-cell, display:inline-block, position:absolute/relative and different element types (div, a, p, tables...) but can't get anything to fulfil all the criteria listed above. Anyone got a solution (ideally with just standard HTML and CSS to make it easy to implement in WordPress)?
Below are examples of one of the methods I've tried. Example one shows how I'd like it to look (with a nicer colour scheme and proper link styling), except with smaller tiles and wrapped text. Example two has wrapped text, but because of using line-height the tiles with wrapped text double in height.
.big a {
display:inline-block; width:15em; line-height:15em; text-align:center; background-color:#FFC107; padding:10px; margin-bottom:10px; margin-right:10px;
}
.small a {
display:inline-block; width:10em; line-height:10em; text-align:center; background-color:#FFC107; padding:10px; margin-bottom:10px; margin-right:10px;
}
<p><strong>Example one</strong></p>
<div class="big"><a><strong>Language change</strong></a><a><strong>Language diversity</strong></a><a><strong>Language and the media</strong></a><a><strong>Language and gender</strong></a><a><strong>Child language acquisition</strong></a><a><strong>Discoures and attitudes</strong></a></div>
<p><strong>Example two</strong></p>
<div class="small"><a><strong>Language change</strong></a><a><strong>Language diversity</strong></a><a><strong>Language and the media</strong></a><a><strong>Language and gender</strong></a><a><strong>Child language acquisition</strong></a><a><strong>Discoures and attitudes</strong></a></div>
How about something like this... using display:flex and align-items: center;
NB: may not be compatible with some older web browsers.
.small{
display:flex;
flex-wrap:wrap;
}
.small a {
display:flex; align-items: center; height:10em; width:10em; text-align:center; background-color:#FFC107; margin-bottom:10px; margin-right:10px; padding:30px; box-sizing:border-box;
}
<p><strong>Example two</strong></p>
<div class="small">
<a><strong>Language change</strong></a>
<a><strong>Language diversity</strong></a>
<a><strong>Language and the media</strong></a>
<a><strong>Language and gender</strong></a>
<a><strong>Child language acquisition</strong></a>
<a><strong>Discoures and attitudes</strong></a>
</div>
a tile-style menu with six tiles
I would suggest a <div> with six display:inline-block <div> children.
each tile to be a fixed height and width (maybe 10em - square)
So of course we give your <div> children width:10em; height:10em;
wrapped text without creating a bigger tile (line-height has this
problem)
First we give each <div> child an overflow:hidden; so even if the content is larger than the tile, it will be cut. Then, since we know that the child is 10em high, if you can fix the number of lines of the text, you can define line-height as, say, 2em or even 20% which will be 20% of 10em.
background colour for the tiles
That's easy-peasy: background-color:#00FF00;
but whitespace (margins) to the right and below all text centred
I suggest you use border instead: border-width:0px 0px 0.5em 0.5em;. If you do it well, nobody will be able to tell it's border and not margin.
vertically and horizontally wrapped tiles for smaller displays
Inline block will do this for you. Since each <div> child is 10em wide, you can give the container <div> max-width:30em and it will shrink on small screens making the inline-block children skip to the next line.
Hope this gives you some useful ideas at least.
I need to create HTML rows where there is a text (with variable width), a line (or an hr) and an image.
Text is with a variable length, and the image have a fixed width.
I need something like:
VARIABLETEXT----------------------------------IMAGE
and this rows may be always 100% width.
I tried with the same CSS, but without result.
How I can do it?
Thanks
I've done this before by making the line go 100% of the width and floating the end elements. Using position you can then place the line behind the other two.
Set the background-color of the two floated elements to the same color of parent background such that it doesn't show the line behind them, and will appear like the line is expanding/contracting
Here an example https://jsfiddle.net/0sqL5bc9/2/
There are several ways to achieve this
Follow this thread you may find answer How to repeat a character in HTML?
Example
<div class="line">
<span ><label for="text">VARIABLETEXT</label></span>
<span class="image">image</span>
</div>
CSS:
.line{
border-bottom:1px dotted black;
position:relative;
height:16px;
}
.line span{
display:inline-block;
position:relative;
background:white;
bottom:-2px;
height:100%;
padding:0 5px;
}
.line .image{
position:absolute;
right:0;
}
Link here for fiddler
I'm working on a mobile version of my website, and I'm having trouble vertically-centering two divs. Since it is a mobile site, my css needs to work on any type of screen resolution, so this is where I'm having the problem. Also, different images will be used depending on what page you are on, so the resolution of the image is not static either. I need a way to center both my image div and text div no matter their height or width.
I've made a fiddle here to start out with. As you can see, I chose the green area to be the "screen" for the phone, and I want both the picture to center vertically, and the text to be on top of the picture and center vertically as well. Any help?
What I have so far... (in my jsfiddle)
HTML:
<div id = "screen">
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
<div class = "overlay" id = "text">This is where the text would appear</div>
CSS:
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
.overlay {
position:absolute;
top:0;
left:0;
}
#picture {
}
#picture img{
width:100%;
}
#text {
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}
For vertically centering you can set margin top/bottom to auto.
If I understand where you want the text, this should work.
Html
<div id = "screen">
<div class = "overlay" id = "text">This is where the text would appear</div>
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
</div>
and css
#screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}
#picture {
margin: 0 auto;
}
#picture img{
width:100%;
}
#text {
position: absolute;
top:50%;
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;
}
So it doesn't seem like there is a pure css way to do it, so I ended up using jQuery instead. I made a fiddle in case you want to see how I did it, but the jist of it was this.
On document load, find any item with class "overlay" and apply a negative margin-top of half it's height to center it. Because it already has a position of absolute and top:50%, this will vertically center the item.
$(document).ready(function(){
$(".overlay").each(function(){
$(this).css("margin-top", $(this)[0].scrollHeight/2*-1);
});
});
It's pretty simple, and I wish there was a way to do it in pure css, but this way works as well. Thanks for all the help.
After the discussion in the comments I've determined this question is not nearly thought out well enough to attempt to answer and so this will stay simply in hopes that someone else that finds this page is helped by the answer
:::Initial answer:::
This question is easily much more difficult than you've made it seem. If it's a matter of fitting the image to the viewport of the device there is no single css solution and a javascript solution will be needed.
Let me explain, if the image is much taller than it is wide then to fit the image to the screen you'd want to set the height to something like 90% of the height (give some padding for the text etc). however since the image is variable size if the width is the greater value you'll want the width to something like 90%. Herein lay the problem, you wont want both the height and the width of the image to be 90% as that would distort the image. So there will need to be some javascript to flop around some classes here.
After that the css gets a bit hairy also, if you're looking for an overlay to display the same based on any position the user clicks on an image (assuming this is a sort of gallery) rather than an absolute positioned item at the top and left of the document you'll want a position: fixed; element which is positioned on the viewport.
All described before would need a bit of javascript again because there is no easy way to center something that is fixed without using negative margins of half its width/height.
An example of such a thing is here:
http://jsfiddle.net/5hHMa/2/
Here we have the css for the very fixed case which you have presented.
.overlay {
position:fixed;
top:50%;
left:50%;
margin-top: -150px;
margin-left: -150px;
}
#picture img{
width: 300px;
}
#text {
background-color:#000;
opacity:0.5;
color:#fff;
}
Ideally what you would do is instead of using a fixed value for the margins and width as I have you would determine these values and set them using javascript.
It is hard to form a complete solution for your problem with the limited information given, however hopefully this gives you a push in the correct direction.
I just want the div to be in the center of the page, equal spacing from top to bottom and I need to use percents because the div content varies. I tried bottom:50% but this does not work.
Thanks for the answers! Mine's a little different and it is my mistake for not adding this, visit my blog to view the issue.
Hey everyone, thanks for using your time to answer such a stupid question, but I found that the easiest way is to just use padding:
padding-top:X%;
padding-bottom:X%;
Then just mess with it to see what your result is. If you have anything better PLEASE DO SHARE because this is obviously probablly not the most reliable.
Your answer of using percentages in padding doesn't work in all situations. This is because padding percentages are based on the width of the element you are adding padding to and not the height of it. Plus, it's not at all based on the container you want the element centered within. So if you were to decrease the width of your browser window, your DIV would move to a location that is no longer centered within the browser window because the width of the DIV has changed, causing the percentage value of your padding to change as well.
To truly center your DIV no matter the browser window dimensions, the code below should help tremendously:
.div {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#mydiv {
position:absolute;
top:20%; bottom:20%
}
See also Understanding Vertical Align.
vertical-align:center for vertically aligning
then text-align:center for horizontal
#div{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
height:100px;
width:100px;
}
this code aligns either bottom to top,or left to right but you have to set width and height.
Or use this:
#div{
display:flex;
align-items:center;
}
Take a lok at this site: http://www.naaf.no/fersking
If you hover the mouse over the three article boxes, you will see that both text and image changes.
I've placed the text in a DIV which floats above anothe div (image) with opacity set to 60%. But can anyone explain to me why the first article is approx 5px lower than the two other boxes? The first article is aligned with the bottom - it should be 5px higher up.
Here is the CSS for the text box:
#articleImageList .introText {
background-color:#000000;
color:#FFFFFF;
height:50px;
margin:0 2px;
opacity:0.6;
overflow:hidden;
padding:5px 20px;
position:relative;
top:-75px;
z-index:0;
}
Make all your images the same size. Resize /upload/Ferskingen/COLOURBOX1021676.jpg (the image in the first article box) so it´s 440x239px (like the other images, it´s 430x239 atm).
The image makes the div.articleImage higher then the other two hence makes your position: relative; bottom: -75px; not render the result you want (but it behaves right).
Or:
remove min-width in the #articleImageList img-selector in main.css line 439.