I'm having a problem with this: http://jsfiddle.net/1904837j/
As you can see, when I hover over an image, the text that goes visible is the one under the next image.
What I want is have the text show up under the image being hovered over.
Here is the code:
HTML:
<div class="header">
<div class="cats">
<div class="adminmenu"><img src="<?php echo $host ?>/img/admin/ipban.png"><div class="undername">Test</div></div>
<div class="adminmenu"><img src="<?php echo $host ?>/img/admin/ban.png"><div class="undername">Test</div></div>
<div class="adminmenu"><img src="<?php echo $host ?>/img/admin/smiley.png"><div class="undername">Test</div></div>
<div class="adminmenu"><img src="<?php echo $host ?>/img/admin/gear.png"><div class="undername">Test</div></div>
<div class="adminmenu"><img src="<?php echo $host ?>/img/admin/forums.png"><div class="undername">Test</div></div>
<div class="adminmenu"><img src="<?php echo $host ?>/img/admin/quit.png"><div class="undername">Test</div></div>
</div>
</div>
CSS:
.header .cats{
margin-top:15px;
text-align:center;
}
.header img{
margin-left:10px;
margin-right:10px;
}
.adminmenu{
display:inline-block;
}
.adminmenu:hover + .adminmenu .undername{
opacity: 1;
filter: alpha(opacity=100);
}
.adminmenu .undername{
font-size: 10px;
color:white;
opacity: 0;
filter: alpha(opacity=0);
}
You're targeting .adminmenu child, so use:
.adminmenu:hover .undername{
opacity: 1;
filter: alpha(opacity=100);
}
JSFiddle
Explanation: with .adminmenu:hover + .adminmenu .undername you are targeting the next in level .adminmenu elements child element that has .undername class, and that's why in your fiddle it works for the next element.
Related
What I want:
1:
What I want is that the echo '<span class="badge bg-red">Denied</span>'; is directly under the echo '<b> '</b>'; and that the img is the full height. And if I use the <br> it puts the text under the img and not next to it. Because I need the image to be always on the left with the text next to it.
2: The second thing that I want is that there is a small line under the
echo '<b> '</b>';
echo '<a> - ' . $topic['voornaam'] . '</a>';
How it looks like now.
The code:
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title"><b>Topics</b></h3>
</div><!-- /.box-header -->
<div class="box-body">
<?php
$toppic = $app->get_topics();
foreach($toppic as $topic){
echo '<div id="topic">';
if(file_exists('assets/images/profielfotos/'.$topic['klant_id'])) {
echo '<img style="height:100%;"class="img-circle" src="/assets/images/profielfotos/'.$topic['klant_id']src="###.'/'.$topic['foto'].'"###'" />';
} else {
echo '<i class="fa fa-fw fa-user img-circle"></i>';
}
echo '<b> '.$topic['topicnaam'].'<$####'</b>';
echo '<a> - ' . $topic['voornaam'] ####. " " . $topic['achternaam']#### . '</a>';
echo '<span style="float:right;"class="fa-stack"><span class="fa fa-comment-o fa-stack-2x"></span><strong class="fa-stack-1x" style="font-size:10px;">999</strong></span>';
echo '<span class="badge bg-red">Denied</span>';
echo '</div>';
}
?>
</div><!-- /.box-body -->
<div class="box-footer text-center">
</div><!-- /.box-footer -->
</div><!-- /.box -->
The custom css:
#topic a {
color: black;
margin-left: 1%;
}
#topic {
padding: 10px;
}
#topic i{
font-size: 2.3em;
width: 33px;
}
One of the alternatives is by using the list tag
Here is an example for your convenience:
HTML:
<ul>
<li>
<img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" class="pic">
</li>
<li>
<h2>Title</h2>
<p>description declined</p>
</li>
</ul>
CSS:
.pic{
max-width:150px;
max-height:150px;
margin-right:50px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
ul {
list-style-type: none;
}
.pic{
max-width:150px;
max-height:150px;
margin-right:50px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
ul {
list-style-type: none;
}
<ul>
<li>
<img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" class="pic">
</li>
<li>
<h2>Title</h2>
<p>description declined</p>
</li>
</ul>
Adjust it accordingly with your code. Have fun :)
First of all, there's some sintax errors at the php code in the <div class="box-body">, check it out because the compiler can throw an error.
At the css part, i would use position: relative to the DOM elements inside the <div class="topic"> and later adjust it with top, bottom, left, right (Check this out for more info about the positioning properties in css).
Also, i would set the image full height with height: 100%, but, just as a recommendation, try using height: auto, with this property the img height adjusts to the DOM and it MAYBE get a height you like(Here's some info about height property).
Finally, you could get the small line with the <u> html tag or with the css text-decoration: underline. You can see both here.
Hope this answer helps you, if it does, please vote it up so that people can get helped if needed :)
i'm developing this website : www.sfitnesscenter.com
i'm trying to make the 4 boxes below the slider to be horizontally aligned 2 by 2 to the center. i've tried using margin:auto, but nothing changed.
here's the html
<section id="wrapsecond">
<div class="container">
<div class="services-wrap">
<?php if( get_theme_mod('shortinfo_sb') ) { ?>
<?php echo get_theme_mod('shortinfo_sb'); ?>
<?php } else { ?>
<?php echo '<h2>What We Do</h2>
<p>We are passionate about our clients results.</p>'; } ?>
<div class="space50"></div>
<!-- Home Boxes Section -->
<div class="home_boxes">
<?php
for($bx=1; $bx<5; $bx++) {
if( get_theme_mod('page-setting'.$bx)) {
$bxquery = new WP_query('page_id='.get_theme_mod('page-setting'.$bx,true));
while( $bxquery->have_posts() ) : $bxquery->the_post();
?>
<div class="one_third <?php if($bx%4==0){ ?>last_column<?php } ?>">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?>
<h4><?php the_title(); ?></h4><?php echo fitnesslite_content(22); ?>
<span class="ReadMore"><?php _e('Read More','fitness-lite');?> </span>
</a>
</div>
<?php endwhile; }else{?>
<div class="one_third <?php if($bx%4==0){ ?>last_column<?php } ?>">
<a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/thumb_0<?php echo $bx; ?>.jpg"><h4><?php _e('Page Title','fitness-lite'); ?><?php echo $bx; ?></h4><p><?php _e('Phasellus viverra aliquet magna quis interduming. Sed quis fringilla massa. In ut porttitor felis necing iaculis mi. Proin tempo...','fitness-lite');?></p><span class="ReadMore"><?php _e('Read More','fitness-lite');?></span>
</a></div>
<?php }}?>
</div>
<!-- Home Boxes Section -->
</div><!-- services-wrap-->
<div class="clear"></div>
</div><!-- container -->
</section><div class="clear"></div>
and here's the css
/* = Services section css
-------------------------------------------------------------- */
#wrapsecond{ background-color:#272727; color:#fff; padding-bottom:100px; }
.services-wrap, #FrontBlogPost .BlogPosts{ visibility:hidden;}
.one_third{ margin:0 5% 3.5% 0; float:left; padding:25px; border:2px solid #fff;}
.one_third:hover{ border-color:#ff4e1c;}
.one_third:hover .ReadMore{ background-color:#ff4e1c;}
.one_third img{ width:100%;}
.one_third h4{font:600 18px/22px 'Roboto',sans-serif; padding:20px 0; margin:0; text-transform:uppercase; color:#fff;}
.one_third h4 span{ color:#ff4e1c; font-weight:300;}
.one_third h4 span::after{content:" ________"; display:inline-block;}
.one_third p{ margin-bottom:20px; color:#fff;}
.last_column{clear:right; margin-right:0 !important; }
#media (max-width: 992px) {
.one_third { min-width: 45% }
}
#media (min-width: 992px) {
.one_third { max-width: 40% }
}
#wrapsecond h2{ font-size:40px; color:#fff; font-weight:600; margin-bottom:0; text-transform:uppercase; }
#wrapsecond h2 span{ color:#ff4e1c; font-weight:300; }
NB :
actually, the layout should be like this
top left : aerobic class,
top right : bellydance class,
bottom left : yoga class,
bottom right : zumba class
it was horizontally and vertically paralled, until my client put the contents the other day. nothing's change even after the photos was removed. so, i don't think it was caused by the dimension of those photos
Change the display of the boxes to inline-block and reduce the margin a bit. And remove the float .
Change the .one_third class to the following
.one_third {
margin: 0 3% 3.5% 0;
padding: 25px;
display: inline-block;
border: 2px solid #fff;
}
Avoid using floats . its a messy thing to deal with.
I am trying to make some divs responsive.It's a joomla module actually. But it isn't responsive. My template is responsive. I put that module in a position but if resize the screen it gets bigger and it goes outside that position.
I started with the first div (YJYC container) and I set the width to 100%. This is a good start, becouse I noticed that if I resize the screen, the result is "good". But I have to do this at the other divs, right?.
How should I continue?
Here is the html
<div id="YJYSC_container<?php echo $container_poz ?>" style="height:<?php echo $slider_height ?>px; width:<?php echo $slider_width ?>px;">
<!-- navigator -->
<div id="navigator_outer" style="height:<?php echo $slider_height ?>px; width:<?php echo $thumb_width +30 ?>px;">
<ul id="navigator">
<?php foreach ($yousclides as $youscslide):?>
<li class="element" style="height:<?php echo $slider_height / $visibleItems ?>px">
<div class="inner" style="width:<?php echo $thumb_width + 30 ?>px;height:<?php echo $slider_height / $visibleItems ?>px">
<div class="inner_over" style="width:<?php echo $thumb_width +30 ?>px;height:<?php echo $slider_height / $visibleItems -12 ?>px">
<div class="border_out" style="height:<?php echo $slider_height / $visibleItems -20 ?>px;width:<?php echo $thumb_width + 0 ?>px;">
<div class="border_in" style="height:<?php echo $slider_height / $visibleItems -20 ?>px;width:<?php echo $thumb_width + 0 ?>px;">
<?php if($youscslide['img_url'] != "") echo $youscslide['img_tumb']; ?>
</div>
</div>
</div>
</div>
</li>
<?php endforeach;?>
</ul>
</div>
<!-- end of navigator, start slides -->
<div id="slides" style="height:<?php echo $slider_height ?>px; width:<?php echo $slider_width ?>px;">
<?php foreach ($yousclides as $youscslide):?>
<div class="slide" style="height:<?php echo $slider_height ?>px; width:<?php echo $slider_width ?>px;"> <a href="<?php echo $youscslide['link'] ?>" title="">
<?php if($youscslide['img_url'] != "") echo $youscslide['img_out'] ?>
</a>
<div class="long_desc" style="width:<?php echo $intro_desc_width ?>;height:<?php echo $intro_desc_height ?>;<?php echo $intro_desc_pozi ?>">
<h1><?php echo $youscslide['title'] ?></h1>
<?php echo $youscslide['intro'] ?> <?php echo JText::_('YOUSC_READ') ?> </div>
</div>
<?php endforeach;?>
</div>
</div>
Use this:
#media screen and (max-width: 900px) {
#YJYSC_container, #YJYSC_container_l {
width: 100% !important;
height: auto !important;
}
#YJYSC_container_l #navigator_outer {
position: relative !important;
width: 100% !important;
height: auto !important;
margin-bottom: 20px;
}
#YJYSC_container #slides, #YJYSC_container_l #slides {
width: 100% !important;
}
#YJYSC_container #slides div.slide, #YJYSC_container_l #slides div.slide {
width: 100% !important;
}
#YJYSC_container #navigator li.element div.inner, #YJYSC_container_l #navigator li.element div.inner,
#YJYSC_container #navigator li.element div.inner_over, #YJYSC_container_l #navigator li.element div.inner_over,
#YJYSC_container_l #navigator li.element div.inner div.inner_over .border_out,
#YJYSC_container #navigator li.element div.inner div.inner_over .border_in, #YJYSC_container_l #navigator li.element div.inner div.inner_over .border_in,
#YJYSC_container #navigator li.element div.inner div.inner_over .border_in, #YJYSC_container_l #navigator li.element div.inner div.inner_over .border_in img{
width: 100% !important;
height: auto !important;
float: none !important;
}
#YJYSC_container #navigator li.element, #YJYSC_container_l #navigator li.element {
float: left;
width: 33% !important;
height: auto !important;
clear: none !important;
}
#YJYSC_container #navigator, #YJYSC_container_l #navigator {
overflow: auto !important;
}
}
This code triggers on devices with width under 900px. It still needs more work, but responsivity is starting to make sense.
Updated jsfiddle:
http://jsfiddle.net/gg9mvtrt/1/
Ok, I have a list of links in my top menu of my website that each of them is inside a class div. I want to set the border of the active link(current page) to none; but I seem to have some problems in the code!
the top menu links
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/general';?>" >General</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/contact';?>" >Contact</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Relations';?>" >Relations</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Work';?>" >Work</a></div>
my CSS:
.emp_details_link{
border:1px solid #000000;
width:100px;
height:20px;
float:left;
}
.emp_details_link a{
text-decoration:none;
}
.emp_details_link > a:active{ // poiting to the parent div
border:1px solid red;
border-bottom:none;
}
what you want to achieve, can be done this way.
create a separate class .active
.active
{
border:none;
}
and apply it to the anchor that you clicked, through jQuery/javascript ( and remove from the previous one):
see fiddle
You need Jquery to solve this problem, use some class for active link and use jquery for remove the active class this is one method example is following
Script
$('.emp_details_link a').on('click',function(){
$('div').removeClass('active');
$(this).parent().addClass('active');
});
PHP
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/general';?>" >General</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/contact';?>" >Contact</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Relations';?>" >Relations</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Work';?>" >Work</a></div>
css
.emp_details_link{
border:1px solid #000000;
width:100px;
height:20px;
float:left;
}
.emp_details_link a{
text-decoration:none;
}
.emp_details_link > a:active{ // poiting to the parent div
border:1px solid red;
border-bottom:none;
}
.active
{
border:none;
}
and another method with out using jquery, is directly use the class in appropriate page, like I assume now contact is active page
css
.emp_details_link{
border:1px solid #000000;
width:100px;
height:20px;
float:left;
}
.emp_details_link a{
text-decoration:none;
}
.emp_details_link > a:active{ // poiting to the parent div
border:1px solid red;
border-bottom:none;
}
.active
{
border:none;
}
php
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/general';?>" >General</a></div>
<div class="emp_details_link active"><a href="<?php echo base_url().'index.php/hr/employee_details/contact';?>" >Contact</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Relations';?>" >Relations</a></div>
<div class="emp_details_link"><a href="<?php echo base_url().'index.php/hr/employee_details/Work';?>" >Work</a></div>
Use a class for the current page instead.
:active will only work when you click the link - so that the link is now active..
you can use border:none; .it will solve your problem
There is currently no way to select the parent of an element in CSS.
give border to a so that it can remove its own styling
.emp_details_link{
width:100px;
height:20px;
float:left;
}
.emp_details_link a{
text-decoration:none;
border:1px solid #000000;
}
.emp_details_link a:active{
border:1px solid red;
border-bottom:none;
// something like this
}
or make a separate class for this and add it to that element with JS
Give main border to a tag instead of div
.emp_details_link{
width:100px;
height:20px;
float:left;
}
.emp_details_link a{
text-decoration:none; border:1px solid #000000; display:block
}
.emp_details_link > a:active{ // poiting to the parent div
border:1px solid red;
border-bottom:none;
}
DEMO
if you have including the link file to all the page follow like this
general
<?php
$general='active';
include('link.php');
?>
contact
<?php
$contact='active';
include('link.php');
?>
link
<div class="emp_details_link <?php if(isset($general)) echo $general;?>"><a href="<?php echo base_url().'index.php/hr/employee_details/general';?>" >General</a></div>
<div class="emp_details_link <?php if(isset($contact)) echo $contact;?>"><a href="<?php echo base_url().'index.php/hr/employee_details/contact';?>" >Contact</a></div>
<div class="emp_details_link <?php if(isset($Relations)) echo $Relations;?>"><a href="<?php echo base_url().'index.php/hr/employee_details/Relations';?>" >Relations</a></div>
<div class="emp_details_link <?php if(isset($Work)) echo $Work;?>"><a href="<?php echo base_url().'index.php/hr/employee_details/Work';?>" >Work</a></div>
This is how my website looks in Google Chrome and nearly all browsers except some versions of IE.
This is how it looks in IE8, IE9 and probably in IE6.
The funny thing is that the website looks ABSOLUTELY ok in IE7. I want you to help me solve the problem, but I don't really know which data to server you, but if you ask, I can provide everything you need.
Here's the header code:
<div id="header">
<div id="headercont">
<div id="headerlogo">
<img src="<?php echo dir;?>css/images/headerbg.png" class="header" />
</div>
<div id="menu">
<div id="mpointshighlight">
<div id="menupoints">
<?php echo menuSpace; ?>
<div id="menumain">Main</div>
<?php echo menuSpace; ?>
<div id="menuabout">About</div>
<?php echo menuSpace; ?>
<div id="menublog">Blog</div>
<?php echo menuSpace; ?>
<div id="menuphotos">Photos</div>
<?php echo menuSpace; ?>
<div id="menuvideos">Videos</div>
<?php echo menuSpace; ?>
<div id="menumusic">Music</div>
<?php echo menuSpace; ?>
<div id="menuprojects">Projects</div>
</div>
</div>
</div>
</div>
</div>
Here's the header CSS:
#header {
background-color:#00a2ff;
background-image:url('images/menubg.png');
background-repeat:repeat-x;
background-position:bottom;
width:100%;
min-width:1100px;
height:243px;
}
#headercont {
margin:auto;
width:1100px;
}
#headerlogo {
margin:auto;
width:1000px;
}
#menu {
width:100%;
height:44px;
}
#menupoints {
position:relative;
width:1000px;
font-size:24px;
font-family:verdana;
height:44px;
}
#mpointshighlight {
margin:auto;
width:1000px;
margin-bottom:10px;
background-repeat:no-repeat;
}
#menupoints a:link {
color:white;
text-decoration:none;
text-shadow: black 2px 2px 3px;
}
#menupoints a:visited {
color:white;
text-decoration:none;
text-shadow: gray 2px 2px 3px;
}
#menupoints a:hover {
color:white;
text-decoration:none;
text-shadow: black 2px 2px 3px, white 0 0 1em;
}
#menupoints a:active {
}
#menumain {
display:inline
}
#menuabout {
display:inline
}
#menublog {
display:inline
}
#menuphotos {
display:inline
}
#menuvideos {
display:inline
}
#menumusic {
display:inline
}
#menuprojects {
display:inline
}
Hard to be certain what the problem is without going into depth, but something that might help is to look into compatibility modes in IE:
http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx
Specifically, tell IE8 and higher to emulate IE7:
Ensure this is the first HTML tag in the head.
As for IE6, depending on your target audience, you might be able to get away with ignoring it, otherwise it's a trawl through CSS I'm afraid!