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>
Related
i have two div . from second div a:hover i want to add opacity on img
<div class="hide">
<img src="/img.png">
</div>
<div class="onhover">
<a class=""onhover_change>
</div>
If anyone have idea let me know.
I am not getting how to apply css on above div
Change Your HTML Like
.wrapper{
display:flex;
flex-direction:column;
}
.onhover{order:1}
.hide{order:0}
.onhover:hover + .hide{
opacity:0.3;
}
<div class="wrapper">
<div class="onhover">
<a class=""onhover_change>dsd</a>
</div>
<div class="hide">
<img src="/img.png">
</div>
</div>
https://jsfiddle.net/lalji1051/w40jxaf5/3/
I have a lot of links in a navbar. Most of the links are positioned to the left. I want to position some of the links to the right (right-side-login-cart). The part that is giving me trouble is that I can get the links to the right, but then cannot get the links to vertically align.
I've tried a bunch of different things to get it to work. For instance, I have float:right;, used transform to translate Y, and tried to used vertical align.
Some different attempts:
HTML
<div class="links-at-top">
<div class="links-div">
<a href="/">
<img src="example.com/img">
</a>
Link1
Link2
</div>
<div class="right-side">
<div class="positioning">
<a id="right-link-1">RightLink1</a>
<a id="right-link-2">RightLink2</a>
</div>
</div>
</div>
Attempt 1:
CSS:
.right-side {
padding-right: 50px;
display: inline-block;
}
.positioning {
position: absolute;
right: 0;
transform: translateY(-50%);
}
Attempt 2:
CSS:
.right-side {
padding-right: 50px;
display: inline-block;
}
.positioning {
vertical-align: middle;
}
Add your .right-side div into the same div as your other links so that they'll be on the same line. Then you can just float right.
.links-div {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="links-at-top">
<div class="links-div">
<div>
Link1
Link2
</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" alt="" />
<div>
<a id="right-link-1">RightLink1</a>
<a id="right-link-2">RightLink2</a>
</div>
</div>
</div>
You can consider using flex-box
.links-at-top{
display: flex;
justify-content:space-between;
align-items:center;
}
<div class="links-at-top">
<div class="links-div">
Link1
Link2
</div>
<div class="right-side">
<div class="positioning">
<a id="right-link-1">RightLink1</a>
<a id="right-link-2">RightLink2</a>
</div>
</div>
</div>
make .links-div and .right-side both display:inline-block, and float the right-side to right.
<div class="links-at-top">
<div class="links-div">
Link1
Link2
</div>
<div class="right-side">
<ul class="positioning">
<li> <a id="right-link-1">RightLink1</a></li>
<li> <a id="right-link-2">RightLink2</a></li>
</ul>
</div>
.right-side {
display: inline-block;
float:right;
}
.links-div{
display:inline-block;
}
What I want to do is have the images on this site change in width and height (they should be equal) between 50-60px. However between them they all need to have a minimum padding of 5px. This can vary depending on the size of the images, this is the case as the two end images need to fit to the edges of the parent div, to align with an image about it. The height/width/padding should all change to ensure the images are still properly aligned when then screen size changes.
If you look at this page you will be able to see what I mean. The images that need to change are the grey squares at the bottom.
http://media.gaigo.org/work2.html
This is my html:
<div class="smallImages">
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
<div><img src="static/img/smallImage.png"></div>
</div>
and my css is as follows:
smallImages div {
display: inline-block;
padding: 5px;
}
.smallImages div img {
max-width: 60px;
min-width: 50px;
max-height: 60px;
min-height: 50px;
}
Sorry if this seems confusing. Just ask if you need me to explain more.
One option is to set percentage widths, however that number percentage is dependent upon the number of images in your row. See this example:
* {
box-sizing:border-box; /* You need this so that heights and widths are inclusive of padding and border */
}
.container {
width:400px; /* set this to whatever you like, it should work still */
padding:5px;
border:1px solid;
}
.row {
width:100%;
padding:0 5px;
}
.row img {
padding:5px;
}
.row.one img {
width:100%;
}
.row.two img {
width:50%;
}
.row.three img {
width:33.33%;
}
.row.four img {
width:25%;
}
<div class="container">
<div class="row one">
<img src="http://placehold.it/150x150">
</div>
<div class="row two">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
<div class="row three">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
<div class="row four">
<img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150"><!--
--><img src="http://placehold.it/150x150">
</div>
</div>
Putting HTML comments between lines means there's no white space between the images.
This is what you are after.
Display inline-block wont let the images behave in that manner you need to use table.
You should just check the source code of the site you are working from..
.row {
display: table-row;
}
.smallImages {
padding-left: 0px;
margin-bottom: 0px;
display: table;
text-align: center;
}
.smallImages .row div {
display: table-cell;
padding: 5px;
}
.smallImages .row div:first-child {
padding-left: 0;
}
.smallImages .row div img {
max-width: 100%;
}
img {
border: 0;
}
<div class="smallImages">
<div class="row">
<div>
<a href="#item-1">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-2">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-3">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-4">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-5">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-6">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-7">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-8">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-9">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-10">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-11">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
<div>
<a href="#item-12">
<img src="http://media.gaigo.org/static/img/smallImage.png">
</a>
</div>
</div>
</div>
im making a container that contains 3 images and three "text bits"
My problem is that I cant seem to get the text to appear on the right side of each image.
Here a SS: http://imgur.com/ujBIjYC
The html:
<div class="textandimg">
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/caprocatforside.png" alt="caprocatforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
<div class="image">
<a href="#">
<img src="img/granhotellforside.png" alt="granhotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>
and the css:
.textandimage{
clear:both;
}
.image{
float:left;
width: 100%;
margin-left: 10px;
}
.text{
float:left;
}
If I put :
.text{
float:right;
}
The text appears on the right side. But its still inline with the picture. And I want the text to be side by side.
Appreciate any help. Thanks.
If your div with image class has setted width: 100% it take 100% of the width. So you can remove it or set to an value in "px".
Delete all that CSS and just put this:
.image{
float: left;
margin-left: 10px;
}
All you want is just to float the images to the left of the text divs, so that's all you need.
http://jsfiddle.net/M8CQD/
Edit: From your comment, it also looks like you need to put each image and text div together in a div in order to push the images down below the preceding image.
<div class='row'>
<div class="image">
<a href="#">
<img src="img/belahotellforside.png" alt="belahotellforside">
</a>
</div>
<div class="text">
<p>asdfer</p>
</div>
</div>
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 :)