Used this code around every image
<div class="side-by-side"> <a href="http://example.com ....> (include ALL the code for the image here) </div>
This is the CSS snippet
.side-by-side { float: left; margin-right: 5px }
It works... I mean images are on one line
But unfortunately the images align left, and I want them centered, all together.
Wrap your images in a div and set the text-align:center; then you dont need the extra div to wrap your a tags in you can just style the a tag itself. Like so:
<div class="centered-content">
<a href="#" class="side-by-side">
<img src="http://placehold.it/100x100"/>
</a>
<a href="#" class="side-by-side">
<img src="http://placehold.it/100x100"/>
</a>
<a href="#" class="side-by-side">
<img src="http://placehold.it/100x100"/>
</a>
</div>
And Css:
.centered-content{
text-align:center;
}
.side-by-side{
margin-right:5px;
display:inline-block;
}
I would use Flexbox to do it. Wrap your div in a container
<div class="container">
<div class="side-by-side">
</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
Related
i have 4 different icons and based on which icon i hover i want to change the background image in a div. The html is like so
<div class="col side">
<i id="icon1"></i>
<i id="icon2"></i>
<i id="icon3"></i>
<i id="icon4"></i>
</div>
<div class="col">
<img src="img1" id="img1" class="content" alt="" />
<img src="img2" id="img2" class="content" alt="" />
<img src="img3" id="img3" class="content" alt="" />
<img src="img4" id="img4" class="content" alt="" />
</div>
So when i hover icon1 i want to display img1 and so on. I know how to do it with jquery/javascript but is it possible with pure css?
it is not possible but try with adding background image on hover to each icon
#icon1:hover
{
background: url("path to img1");
}
like wise add this to all icons but i think it will result in bad alignment on hover
You can try some thing like
.content {
display: none;
}
#icon1:hover + #img1{
display: block; // or inline-block
}
#icon2:hover + #img2{
display: block;
}
#icon3:hover + #img3{
display: block;
}
#icon4:hover + #img4{
display: block;
}
It can be done with changed html-structure as someone has already mentioned in the comments. For example,
.content {
display: none;
}
#icon1:hover ~ .col img#img1 {
display: block;
}
#icon2:hover ~ .col img#img2 {
display: block;
}
<div class="col side">
<i id="icon1">First Icon</i> <i id="icon2">Second Icon</i>
<div>Images:</div>
<div class="col">
<img src="https://themcrazycats.files.wordpress.com/2020/11/1ce50-b8480db4-5bda-4912-84e4-3f8d79cae545.jpeg?w=400&h=200&crop=1" id="img1" class="content" alt="" />
<img src="https://themcrazycats.files.wordpress.com/2020/11/a66f0-4c055b18-860a-46b6-95a2-967b72e3547b.jpeg?w=400&h=200&crop=1" id="img2" class="content" alt="" />
</div>
</div>
The key here is to make possible usage of css ~ selector by placing .col inside .side. Why? There is no parent selector as of now in css as pointed out here.
I have this JSFiddle: https://jsfiddle.net/96urhqcz/
There are 4 divs in a row - the HTML looks like this:
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link1/">
<div style="margin:10px; padding: 30px 0px; background:#E74C3C" class="app">
<i class="fa fa-3x fa-comments-o" width="50%" style="display:block; margin:auto" src="/static/launcher/comments-o"></i>
Link Number 1
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link2/">
<div style="margin:10px; padding: 30px 0px; background:#9D55B8" class="app">
<i class="fa fa-3x fa-paper-plane" width="50%" style="display:block; margin:auto" src="/static/launcher/paper-plane"></i>
Link Number 2
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link3/">
<div style="margin:10px; padding: 30px 0px; background:#3395DD" class="app">
<i class="fa fa-3x fa-street-view" width="50%" style="display:block; margin:auto" src="/static/launcher/street-view"></i>
Link 3
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link4/">
<div style="margin:10px; padding: 30px 0px; background:#00838F" class="app">
<i class="fa fa-3x fa-line-chart" width="50%" style="display:block; margin:auto" src="/static/launcher/line-chart"></i>
Link 4
</div>
</a>
</div>
The CSS for g-1-4 looks like this:
.g-1-4{
width: 25%;
}
As you can see in the JSFiddle - the margins between the boxes are 'linked' to the appropriate box.
Ultimately I'm trying to have a 4-across layout, but have the margins not linked. When a user mouses between the boxes I want it to be a regular mouse with no clickability.
I'm sure it's something really simple I'm missing - but I can't seem to correct it.
Any thoughts or ideas?
You can set a fixed width to your divs, and using flexbox they will be automaticaly displayed with space which is not 'linked'.
Hope this little code will help you.
.flex {
display : flex;
justify-content : space-around;
}
.div1, .div3 {
width : 120px;
height : 120px;
background-color : red;
}
.div2, .div4 {
width : 120px;
height : 120px;
background-color : blue;
}
p {
margin : 0;
color : white;
line-height: 120px;
font-size : 12px;
text-align : center;
}
<div class="flex">
<a href="#" class="div1">
<p>LINK 1</p>
</a>
<a href="#" class="div2">
<p>LINK 2</p>
</a>
<a href="#" class="div3">
<p>LINK 3</p>
</a>
<a href="#" class="div4">
<p>LINK 4</p>
</a>
</div>
Take the margin off of the <div> and add it to the <a> that's wrapping the div. Also add style="display:block:" to the <a>.
This CodePen has the updates.
The issue is coming from your using the table cell display method.
.g > div,
.g-m > div {
display: table-cell;
vertical-align: top;
}
I also support the flex box usage as pointed out by Louis.
What is happening is that the link element is expanding to the 100% of the container div to get some space you could set a specific width for the a tag or you could add some padding to the container element, you will have to play with padding and width to make it look good though.
https://jsfiddle.net/96urhqcz/1/
.g-1-4{
width: 25%;
padding: 10px;
}
I am trying to build a form to add new users to some kind of entity. The idea is to have user avatars in a line and on the end of the line there is a input-field with a typeahead to insert new users.
I tried this some years ago and ended up using javascript as I was not able to do this in plain css (2).
The big question: is this somehow possible in css3?
Basic idea of code:
<div class="availableWidth">
<div class="list">
<ul>
<li><div class="avatar">...</div></li>
...
</ul>
</div>
<div class="form">
<div class="typeaheadField">
<input ...>
</div>
<button>+</button>
</div>
</div>
CSS:
.list ul li {
list-style-type:none;
display:inline-block;
}
button {
width:50px;
}
Basic Idea is that the box .availableWidth has some width (100%) the box .list grows in width (when new li items are added) as the box .form should shrink in width. Right to the input is a some pixels wide button. The input should take the remaining space.
Is that possible in css3 or will I need Javascript?
You can use flexbox, or you can use display table attributes in CSS. Take a look:
.container {
display: table;
width: 100%;
position:relative;
}
.avatar {
width: 50px;
height: 50px;
display: table-cell;
}
.input {
height: 50px;
display:table-cell;
vertical-align: middle;
}
.input input {
width: 100%;
box-sizing: border-box;
padding: 5px;
}
<div class="container">
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
<div class="container">
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="avatar">
<img src="http://dummyimage.com/50x50/000/fff&text=Avatar"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
You can add all the avatars that you want at left side and the input rearrange automatically.
You want to make input 100% width relative to some container from avatars to button. You can get it by using table, flexboxes or formatting contexts and floats.
Here is last one http://jsfiddle.net/53f0yzeL/
Notice overflow:hidden rule for .avatars-wrapper, it make container to fit exactly between floated elements and .avatars side so you can make input 100% wide.
HTML :
<a href="">
<img class="center" src="">
</a>
CSS :
.center { display: block; margin: 0 auto; }
That centers the image, but the problem is any extra white-space around the image is also clickable. Is there a way to fix that?
(Images vary in size)
You could just wrap a div around it and center the that div rather than the image itself.
<div class="center">
<a href="">
<img src="">
</a>
</div>
And then add a style definition for the div.
.center { margin: 0 auto; }
The only option I see would be putting the anchor in a div (non -clickable, with the size and style of your current anchor) and sizing the anchor based on the image:
HTML:
<div class="container">
<a href="" class="anchor">
<img src="http://placehold.it/350x150" />
</a>
</div>
CSS:
.container {
width: 100%;
text-align:center;
}
JSFIDDLE:
http://jsfiddle.net/Atumra/0jncgxkb/
How about doing this
<a href="" class="center">
<img src="">
</a>
In the theme which i'm using has this code
<div id="header">
<div class="container section header clearfix">
<a id="logo" class="logo" rel="home" title="Home" href="/xx/">
<img alt="Home" src="http://192.168.1.1/xx/sites/default/files/logo_0.png">
</a>
<div id="user-links" class="clearfix"></div>
<div id="name-and-slogan">
</div>
<div class="region region-header">
</div>
</div>
</div>
I just need move the logo on to the left side bit. using css
please advice;
did you try:
#logo {
display: block;
width: 100px;
height: 100px;
margin: 10px;
float: left;
}
. clearfix {
clear: both;
}
You'll need to replace the width, height and margin values with whatever your logo size is. You can adjust the margin to whatever you like.