This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to draw vertical text with CSS cross-browser?
I have some divs, supposed to be "books" on a shelf. All the div is supposed to be a link, and while in some cases they will have image backgrounds, in some others they won't and in those cases I need to put the title like if it was, well, a book, so the text should be rotated 90º. I'm not sure how to do that, rotate just the text inside the <a>, without rotating the entire div.
<div class="magazinebookcase">
<div class="books">
<a title="Mag1" style="height:286px;width:16px;" href="">Book 1
</a>
</div>
<div class="books">
<a title="Mag2" style="height:258px;width:48px;" href="">Book 2
</a>
</div>
<div class="books">
<a title="Mag3" style="height:252px;width:38px;" href="">
</a>
</div>
<div class="books">
<a title="Mag4" style="height:258px;width:50px;" href="">
</a>
</div>
<div class="books">
<a title="Mag5" style="height:284px;width:14px;" href="">
</a>
</div>
<div class="clearfix"></div>
And the CSS:
.magazinebookcase {
width: 100%;
padding: 3px;
vertical-align:bottom;
}
.magazinebookcase .clearfix {
clear:both;
}
.magazinebookcase .books {
text-align:center;
display: table-cell;
vertical-align: bottom;
}
.magazinebookcase a {
border: 1px solid #000;
display: block;
word-break: break-all;
}
.magazinebookcase a:hover {
background-color: #ccc;
}
http://jsfiddle.net/7vEdw/2/
i hope this will help you :-
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="magazinebookcase">
<div class="books">
<a title="Mag1" style="height:286px;width:16px;" href="">Book 1
</a>
</div>
<div class="books">
<a title="Mag2" style="height:258px;width:48px;" href="">Book 2
</a>
</div>
<div class="books">
<a title="Mag3" style="height:252px;width:38px;" href="">
</a>
</div>
<div class="books">
<a title="Mag4" style="height:258px;width:50px;" href="">
</a>
</div>
<div class="books">
<a title="Mag5" style="height:284px;width:14px;" href="">
</a>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>
CSS
.magazinebookcase {
width: 100%;
padding: 3px;
vertical-align:bottom;
}
.magazinebookcase .clearfix {
clear:both;
}
.magazinebookcase .books {
text-align:center;
display: table-cell;
vertical-align: bottom;
border: 1px solid #000;
}
.magazinebookcase a {
display: block;
word-break: break-all;
color: #000;
-moz-transform:rotate(30deg);
}
.magazinebookcase a:hover {
background-color: #ccc;
}
DEMO
For each link you will have make different class this is a demo for you.. as per your requirement....
Put the content in a span which you want to rotate and then you can rotate it using CSS. e.g
<span class="rotate">Book 1</span>
<span class="rotate">Book 2</span>
<span class="rotate">Book 3</span>
<span class="rotate">Book 4</span>
and the css
.rotate{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
Hope it works :)
Related
I'm trying to make a website but ran into a problem. I need to align elements from div boxes to a vertical line. Something like in the picture (don't question my paint skills)
Here's my code:
<div class="main-block">
<div class="sub-block">
<a class="part1">(light gray block)</a>
<a class="part2">(dark gray block)</a>
</div>
</div>
I need to keep the .part1 and .part2 in .sub-block div.
Table layout can do this:
.main-block {
display:table;
}
.sub-block {
display:table-row;
}
.sub-block > * {
display:table-cell;
padding:10px;
}
.part1 {
text-align:right;
}
<div class="main-block">
<div class="sub-block">
<a class="part1">aaa</a>
<a class="part2">bb</a>
</div>
<div class="sub-block">
<a class="part1">a a aaaaa</a>
<a class="part2">b</a>
</div>
<div class="sub-block">
<a class="part1">aaaaaaaaaaaaa</a>
<a class="part2">(dark gray block)</a>
</div>
<div class="sub-block">
<a class="part1">a</a>
<a class="part2">bbbbbbbbbb</a>
</div>
</div>
I'm trying to build an image gallery with description below the image. Every thing run well except when i added in a longer description, the second row goes misorder.
How to overcome this issue?
my testing site is : http://osakaairport.com/airlines/index.htm
below is the sample code: (short code due to limited by stack overflow)
<style>
#media only screen and (max-width: 500px) {
.responsive-main {
width: 100%;
}
}
*{
box-sizing: border-box;
}
.responsive1 {
padding: 0 6px;
float: left;
width: 19.99999%;
}
#media only screen and (max-width: 500px) {
.responsive1 {
width: 32%;
}
div.desc1 {
padding-top:3px;
padding-bottom:10px;
text-align: center;
font-size: 12px;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
<div class="responsive1">
<div class="gallery1">
<a href="china_airlines/index.htm">
<img src="../images/airlines/china_airlines_logo.png" alt="China Airlines"></a>
<div class="desc1">Japan Airlines Japan Airlines</div>
</div>
</div>
<div class="responsive1">
<div class="gallery1">
<a target="_blank" href="../facilities/wifi.htm">
<img src="../images/airlines/airasia_indonesia.png" alt="airasia indonesia"> </a>
<a target="_blank" href="../facilities/wifi.htm">
<div class="desc1">All Nippon Airways</a></div>
</div></div>
<div class="responsive1">
<div class="gallery1">
<a target="_blank" href="../facilities/wifi.htm">
<img src="../images/airlines/cebu_pacific.png" alt="cebu pacific">
</a>
<div class="desc1">Peach</div>
</div>
</div>
<div class="responsive1">
<div class="gallery1">
<a target="_blank" href="../facilities/wifi.htm">
<img src="../images/airlines/china_airlines_logo.png" alt="china airlines">
</a>
<div class="desc1">9 Air</div>
</div>
</div>
<div class="responsive1">
<div class="gallery1">
<a target="_blank" href="../facilities/wifi.htm">
<img src="../images/airlines/china_eastern_airlines.png" alt="China Eastern Airlines">
</a>
<div class="desc1">AirAsiaX</div>
</div>
</div>
<div class="clearfix"></div>
One way to tackle this is to set the following to class responsive1.
<style>
.responsive1{
padding: 0 6px;
width: 19.6%; // adjust your width accordingly base on your demand
display: inline-block; // behave as block elements inside, but inline elements outside, just like the behavior of characters
// no need to use float:left in this case
vertical-align: top;
}
</style>
I'm trying to get 3 divs to align horizontally in my footer. I've tried a bunch of different solutions and have been able to get them very close, but they're just not perfectly aligned.
As of right now, the "biofreeze" element is a bit too high up and the "rocktape" element slightly overlaps the "graston" element. The "graston" element is pretty much exactly where I want it, though.
Playing around with the margins also doesn't seem to work too well.
Here's the code:
#sponsors {
width: 100% vertical-align: top !important;
}
#biofreeze {
float: left;
width: 33%;
}
#graston {
float: left;
width: 33%;
}
#rocktape {
float: left;
width: 33%;
}
<div id="sponsors">
<div id="biofreeze">
<a href="http://www.biofreeze.com/">
<img src="http://placehold.it/200x200" />
</a>
</div>
<div id="graston">
<a href="http://www.grastontechnique.com/home">
<img src="http://placehold.it/200x200" />
</a>
</div>
<div id="rocktape">
<a href="http://www.rocktape.com/">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
You might consider using inline-block in this case for different heights. Also, vertical-align won't work for floated elements. Plus, there's no ; before vertical-align, so it won't even affect.
#biofreeze,
#graston,
#rocktape {
display: inline-block;
width: 33%;
vertical-align: top;
}
<div id="sponsors">
<div id="biofreeze">
<a href="http://www.biofreeze.com/">
<img src="http://placehold.it/200x200" />
</a>
</div><div id="graston">
<a href="http://www.grastontechnique.com/home">
<img src="http://placehold.it/200x275" />
</a>
</div><div id="rocktape">
<a href="http://www.rocktape.com/">
<img src="http://placehold.it/200x100" />
</a>
</div>
</div>
Or if you want all these to be aligned middle, you can use vertical-align: middle instead:
#biofreeze,
#graston,
#rocktape {
display: inline-block;
width: 33%;
vertical-align: middle;
}
<div id="sponsors">
<div id="biofreeze">
<a href="http://www.biofreeze.com/">
<img src="http://placehold.it/200x200" />
</a>
</div><div id="graston">
<a href="http://www.grastontechnique.com/home">
<img src="http://placehold.it/200x275" />
</a>
</div><div id="rocktape">
<a href="http://www.rocktape.com/">
<img src="http://placehold.it/200x100" />
</a>
</div>
</div>
100% working code
#sponsors {
width: 100%;
vertical-align: top !important;
overflow:hidden;
border:2px solid grey;
}
#biofreeze{
height:250px;
background-color:#07c;
}
#graston{
height:300px;
background-color:#cc5600;
}
#rocktape{
height:100px;
background-color:#45ba5b;
}
#biofreeze,#graston,#rocktape {
display:inline-block;
float: left;
width: 33%;
}
<div id="sponsors">
<div id="biofreeze">
Height:250px;
</div>
<div id="graston">
Height:300px;
</div>
<div id="rocktape">
Height:100px;
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to place my banner divs one below the other. I tried using different combinations of display and position properties but it doesnt work. They are displaying on top of each other.I want my output as firstly the banner,then below it the row of images and below the row the second banner.
.row div:first-child {
margin-left: 0;
}
.row div {
display: inline-block;
margin-left: 5%;
}
.row div img {
max-width: 100%;
max-height: 100%;
}
.row div a {
word-wrap: break-word;
text-decoration: none;
color: #515150;
}
.row div a:hover,
.row div img:hover {
color: black;
}
.img-container {
display: inline-block;
float: left;
padding-top: 40px;
padding-bottom: 20px;
text-align: center;
width: 150px;
}
.banner {
padding-top: 20px;
border-bottom: 2px solid black;
margin-left: 5%;
color: black;
font-size: 20px;
}
<div class="banner">
<h3>TOP SELLING</h3>
<div class="row">
<div class="img-container">
<a href="#">
<img src="martial.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="bvb.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="ars.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="lewandowski1.png">
</a>
</div>
</div>
</div>
<div class="banner">
<h3>TOP SELLING</h3>
<div class="row">
<div class="img-container">
<a href="#">
<img src="martial.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="bvb.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="ars.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="lewandowski1.png">
</a>
</div>
</div>
</div>
PS: I also tried using different ids for the banners but it doesnt work.
Either add .banner {clear:both} or remove the unnecessary float from .img-container (the display:inline-block already does that job.)
The text representing each image is currently located to the right of the image. I want the text to be centered underneath its corresponding image, how do I achieve this?
Please note that I applied display: inline-bock on the list items, so they are in a row.
#footer1 {
float: left;
width: 100%;
border: 10px solid #e3e3e3;
}
#footer1>ul>li {
padding: 0 8px;
display: inline-block;
}
#footer1 a:hover img {
border: 1px solid #5cadff;
text-decoration: none;
box-shadow: 5px 5px 2px 2px #5cadff;
}
#footer1 img {
border: 1px solid transparent;
margin-left: 110px;
}
<div id="footer1">
<h2> SOURCES </h2>
<ul>
<li>
<a href="https://www.wikipedea.com" title="wikipedia">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
w
</li>
<li>
<a href="https://www.google.com" title="google">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Google
</li>
<li>
<a href="https://www.youtube.com" title="youtube">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Youtube
</li>
<li>
<a href="https://www.nlm.nih.gov/" title="Nih.gov">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Nih
</li>
<li>
<a href="https://www.medindia.net" title="MedIndia.net">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
MedIndia
</li>
</ul>
</div>
I was able to do this without any changes to your existing HTML by doing this:
li{
display:inline-block;
text-align:center;
width:70px;
}
li img{
margin:0 10px;
}
The text-align centers all text and child elements inside the li. The width needs to be large enough that no caption will be too large to fit in that width. (If a caption won't fit in the allotted width, then the centering is wrecked.)
I added the left and right margin to the image for a little bit of future-proofing in case you later want to include a very short caption in your list. With that margin, even a very short caption will be forced to the next line (instead of next to the image) since 50 px image width + 10 margin on each side leaves no room for text.
Edited for float, keeps these inline and overflows if doesn't fit on page.
<style>
.container {
clear: both;
}
ul li {
width: 50px;
float: left;
text-align: center
}
ul li a {
text-decoration: none;
}
</style>
<div class="container">
<ul>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
</ul>
</div>
Please try this
HTML:
<div id="footer1">
<h2> SOURCES </h2>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
</div>
CSS:
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
display: block;
}
DEMO