Like the title says I wan't to create a clickable list, in which each element contains an image on the left and two lines of text on the right.
Right now I've manage to implement the elements with the following code:
HTML:
<div class="verticalListItem">
<a href="#">
<div class="verticalItemImage"><img src="images/vdfLogo.png" width="80" height="80" /></div>
<div class="verticalItemText">
<p>Pop/Rock</p>
<p>0</p>
</div>
</a>
</div>
CSS:
.verticalListItem {
border: 1px solid #333;
}
.verticalItemImage {
float: left
}
.verticalItemImage img {
display: block;
}
The result I have now is this:
However, my red image is not centered vertically and worst: the area bellow the image and the second label, so as the area above the first label (I've marked those areas with green on second element) is not clickable. What am I doing wrong here, can you help me please?
Thanks in advance!
here is the solution - http://jsfiddle.net/SaRnR/
Not sure without testing, but this should work for you.
.verticalListItem {
border: 1px solid #333;
}
.verticalListItem a {
overflow: auto;
}
.verticalItemImage {
float: left;
}
.verticalItemImage img {
display: block;
}
.verticalItemText {
float: left;
display: block;
line-height: 40px;
}
Related
This is the example:
I want to align the image along side with the name but somehow the image just floats up a little higher. Any help?
UPDATE:
#profile_name_header {
background-color: #006400;
font-family: Century Gothic;
color: #FFFFFF;
font-size: 20px;
padding-bottom: 12px;
padding-top: 12px;
padding-left: 10px;
}
<div id="profile_name_header">
<img src=< ?php echo "./img/".$genderprofile. ""; ?> style = "height:30px; margin-bottom:0px;" >
<?php echo $fullname; ?>'s Profile
</div>
Thank you.
Use vertical-align on the img since it's adjacent inline content.
img {
vertical-align: middle;
}
<img src="https://lh4.googleusercontent.com/-EK1g7sBpX74/AAAAAAAAAAI/AAAAAAAAABU/AzsjRnL3mKk/photo.jpg?sz=32"> #Dranreb
A fancier way is to use flexbox, but it's overkill for your use case. If you wanted to do that, just give them a parent, and use align-items to affect vertical alignment.
div {
display: flex;
align-items: center;
}
<div>
<img src="https://lh4.googleusercontent.com/-EK1g7sBpX74/AAAAAAAAAAI/AAAAAAAAABU/AzsjRnL3mKk/photo.jpg?sz=32"> #Dranreb
</div>
There is a CSS Property called vertical align, which can be used to align several html elements in respecr to the text baseline. I'd suggest you set it to center, but try and see what fits best.
(Some further reading about the conflicts among devs.)
Assign one class name to the image. For e.g.
<img class="backgroundImg" src="images/bg.jpg" />
Then use these css properties:
.backgroundImg {
position: relative;
top: 5px; // or 10px
}
Based on your text leveling, just adjust the "top" value.
Note:You can also use "id" and assign the same css properties.
Try this code with proper HTML Markup......
*{
margin: 0;
padding: 0;
}
figure{
width:620px;
display: block;
margin:0 auto;
}
figure img{
display: block;
width: 100%;
height: auto;
}
figcaption{
text-align:center;
}
<figure>
<img src="https://unsplash.it/600/280" alt="">
<figcaption>
<small>Image Caption goes here</small>
</figcaption>
</figure>
I am trying to align these four separate spliced images from an original image. I am doing this because each portion of the image has a separate link.
I have the images align. Now all I want to do is shrink the size of the images via width: #%;
For some reason this just isn't seeming to work.
Any help would be appreciated.
Here is a link to the CodePen: http://codepen.io/anon/pen/pvGgdp
.split,
.split2,
.split3,
.split4 {
display: inline-block;
margin: -2px;
}
.spliter {
margin-top: -3px;
}
<div class="splitWrapper">
<div class="split">
<a href="#">
<img src="http://i.imgur.com/Jnah8Y0.png" title="source: imgur.com" />
</a>
</div>
<div class="split2">
<a href="#">
<img src="http://i.imgur.com/mGftOCN.png" title="source: imgur.com" />
</a>
</div>
<div class="spliter"></div>
<div class="split3">
<a href="#">
<img src="http://i.imgur.com/ZooSwpU.png" title="source: imgur.com" />
</a>
</div>
<div class="split4">
<a href="#">
<img src="http://i.imgur.com/sMsHX14.png" title="source: imgur.com" />
</a>
</div>
</div>
You could use background images and assign them to the a tags. I have amended your codePen here > http://codepen.io/anon/pen/YPBwJX
However, it may be better to just use one image, and overlay transparent a-tags, set them to display block and then you don't have to worry about the image lining up! Anyways, please see the code below for the question asked =)
.splitWrapper {
width: 850px;
margin: auto;
}
a.split1 {
background: url('http://i.imgur.com/Jnah8Y0.png');
}
a.split2 {
background: url('http://i.imgur.com/mGftOCN.png');
}
a.split3 {
background: url('http://i.imgur.com/ZooSwpU.png');
}
a.split4 {
background: url('http://i.imgur.com/sMsHX14.png');
}
a.split{
width: 417px;
height: 300px;
float: left;
margin: 0;
padding: 0;
display: block;
background-size: 417px 300px;
}
.clear { clear: both; }
<div class="splitWrapper">
<div class="clear"></div>
</div>
I don't think you quite understand how % works in CSS. % means that percentage of the parent element. Also, for it to work, the parent element has to have a defined width. Here's the CSS changes you need:
.splitWrapper {
width: 100%;
}
.split, .split2, .split3, .split4 {
display: inline-block;
margin: -2px;
width: 25%;
}
.split img,
.split2 img,
.split3 img,
.split4 img {
max-width: 100%;
}
.spliter {
margin-top: -3px;
}
http://codepen.io/anon/pen/KwJVGQ
You'll need to adjust your margins accordingly. You should use percentage margins since you're working with percents. Just divide the width of the margin by the width of the element and multiply it by 100 to get your margin percentage.
I've successfully centred an inner div in a parent div but the elements contained in the inner div are not horizontally in line.
For my approach see demo.
I'm aware of the two most common apprroaches with centering a div in a div i.e. using HTML below:
HTML:
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
Centering method 1:
#inner {
width: 50%;
margin: 0 auto;
}
Centering method 2:
#outer {
text-align: center;
}
#inner {
display: inline-block;
}
Correct me if I'm wrong but:
Method 1 seems suitable if the inner div is to have a set width.
Method 2 seems suitable if the width of the inner div is fluid and say
contains only one element as multiple elements aren't horizontally in line.
EDIT:
What I describe in method two above is the issue I'm having i.e. rather than the outcome as seen in my demo this is what I'm trying to achieve.
<< < March - 2016 > >>
I'm looking for the best way to remedy this whilst making sure the width of the centred div is dynamic.
Simply align the inner elements as you did with the outer ones? What's the issue?
#calendarmonthcontrols > div, #calendarmonthcontrols > a {
display: inline-block;
}
You need to add inline-block, that will position the elements in center.
Working example:
Updated Fiddle
/* Wrapper div. That makes the inner div into an inline element that can be centered with text-align.*/
#calendaroverallcontrols {
text-align: center;
}
/* This is a fluid div as width will be changing */
#calendarmonthcontrols {
display: inline-block;
}
#btnPrevYr {
text-decoration: none;
font-size: 35px;
}
#btnPrev {
text-decoration: none;
font-size: 35px;
margin-left: 20px;
}
#monthandyear {
vertical-align: bottom;
padding:0 10px;
}
#btnNext {
text-decoration: none;
font-size: 35px;
margin-right: 20px;
}
#btnNextYr {
text-decoration: none;
font-size: 35px;
}
#calendarmonthcontrols a {
position:relative;
top:10px;
}
#calendarmonthcontrols a,
#calendarmonthcontrols div {
display: inline-block;
}
<div id="calendaroverallcontrols">
<!-- <div id="year"></div> -->
<div id="calendarmonthcontrols"> <a id="btnPrevYr" href="#" title="btnPrevYr"><span><<</span></a>
<a id="btnPrev" href="#" title="btnPrev"><span><</span></a>
<!-- <input type="button" src="images/btnprevmonth.png" alt="Submit" id="btnPrev"/>-->
<!-- <div id="month"></div>-->
<div id="monthandyear">MARCH - 2015</div>
<!--<input type="button" src="images/btnnextmonth.png" alt="Submit" id="btnNext"/>--> <a id="btnNext" href="#" title="btnNext"><span>></span></a>
<a id="btnNextYr" href="#" title="btnNextYr"><span>>></span></a>
</div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Could anyone help me by describing how etc. I do to makes for a function as illustrated.
What I want is that when I mouse over a product box (have not fixed height),
I want to get a box with the buy button, etc. that looks like the picture.
Know that I do not put up the code or, but I do not know where to begin.
So if anyone has any tips or so, I'd be grateful!
Try
button {
display: none;
}
li:hover > button {
display: block;
}
<ul>
<li>Description 1<button>Buy</button></li>
<li>Description 2<button>Buy</button></li>
</ul>
The idea here is to use the > operator to tell CSS to change something in our target. The target being the Buy button inside the li tag.
http://jsfiddle.net/beautifulcoder/kj2XA/
1) First of all: make your items fixed size. This prevents later issues (in layout) and allows you to create effect you described. Like:
HTML (not complete):
<div class="item-wrapper">
<div class="item-content">
<!-- item images etc here -->
</div>
<div class="item-actions">
<button class="buy">Buy</button>
</div>
</div>
CSS:
.item-wrapper {
width: 200px;
overflow: visible;
float: left;
background: #999999;
margin: 5px;
position: relative;
border: 2px solid #fff; /* without this you have unwanted size effects on hover*/
}
.item-content {
width: 200px;
height: 300px;
}
.item-actions {
display: none;
position: absolute;
background: #888;
top:300px;
z-index: 10;
left: 0px;
width: 200px;
height: 100px;
}
2) create javascript with jquery for your items like:
$('.item-wrapper').hover(function () {
// Change css on hover .. this could be done also by changing class
$(this).css({'border':'2px solid #880088'});
$(this).find(".item-actions").slideDown("fast");
}, function(){
$(this).css({'border':'2px solid #fff'});
$(this).find(".item-actions").slideUp("fast");
});
Here is fiddle: http://jsfiddle.net/h23mY/
This is also nice effect: http://jsfiddle.net/ww53e/
lets say the item is enclosed by div tag, now use css hover on
<script>
//on document load item1-buy.hide(); dont forget to use jquery
</script>
<div id="item1">
//item goes here.
<input type="submit" id="item1-buy" value="Buy">
</div>
css:
#item1:hover {
//here you can style how ever you want. Add orange border and so on...
}
now on hover unhide the buy button using jquery #item1-buy.show();
Check the DEMO
I've made a simple markup to show you the idea:
<div class="item">
<img src="http://lorempixel.com/200/200/" alt="" />
<span>15$</span>
<div class="buy">BUY</div>
</div>
And the CSS:
.item {
float: left;
padding: 10px;
border: 1px solid #ccc;
margin: 10px 10px 0 0;
}
span{
display: block;
}
.buy {
padding: 5px;
background: green;
display: none;
}
.item:hover {
border: 1px solid yellow;
}
.item:hover .buy {
display: inline-block;
}
Update: still an issue with the last image in a row, but hope it helps: DEMO 2
<div class="item">
<img src="http://lorempixel.com/200/200/" alt="" />
<span>15$</span>
<div class="buy">
<span class="button">BUY</span>
</div>
</div>
Basically I'm making a navigation bar and due to Jquery doing a lot of resizing to make a website look 'pretty' I don't want to use a horizontal list and so each button is created like so:
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
(yes they're all image buttons for good reason)
but the only problem is they're fixed and set to "top 0" at the top of the page and as a result cannot sit next to each other but rather overlap, any idea on how I can I still keep the position to fixed and they top to 0 yet keep them next to each other?
HTML
<div id="top">
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
</div>
CSS
#top a.button { position: fixed; top: 0; padding: 12px; background: url('glacial_ice.jpg'); text-decoration: none; color: black; border-radius: 0px 0px 25px 25px; }
#top { position: relative; top:0; padding-left: 25px; }
Init function (runs on $(document).ready())
$('a.button').animate({
height: '+=5px',
}, 20, function() {
$('a.button').animate({
opacity: 0.6,
height: '-=5px',
}, 20);
});
Thanks
Put them all in a container, i.e. id="header", give the header position:fixed;top:0;etc...
Then, for each of the link/buttons give them:
position:relative;display:inline-block;float:left;
if you want them centered, then in the #header use text-align:center; and remove float:left from the links
So the container will be fixed, but the buttons inside will be relative and not overlap.
hope this helps!
very crude example
http://jsfiddle.net/6SCTZ/
<div id="header">
<div class="button">button1</div>
<div class="button">button2</div>
<div class="button">button3</div>
</div>
CSS:
#header { position:fixed;top:0;width:100%;height:30px;background:black; text-align:center }
.button {position:relative;display:inline-block;color:white;margin:0 5px 0 5px;}
Just put whatever elements need to be fixed within a container element (in this case, I'll use a div with an ID of "top_fixed").
Consider the following html:
<div id='top_fixed'>
<a href='http://google.com'>Google</a>
<a href='http://yahoo.com'>Yahoo</a>
</div>
<div id='tall'></div>
Now, the following CSS:
a { display: inline; }
#top_fixed { position: fixed; top: 0; left: 0; width: auto; }
#tall {height: 2000px; background: #000;}
DEMO: http://jsfiddle.net/mHKNc/1/