I am new to CSS and so still finding my way a little...
I am trying to add a row of images at the bottom of my development website
This works fine for the desktop browser but I want to hide all but the Trustwave logo on mobile devices.
My theme is responsive and the following code works fine in jFiddle but not on my website. Please could someone point out where I have missed something?
I know that I need to move the inline styling out to the CSS file but was first trying to find why display:none is not working properly.
HTML:
<div id="ft">
<div class="ftI">
<div class="ftT">
<?php echo $this->getChildHtml('newsletter') ?>
<?php echo $this->getChildHtml('cms_footer_links') ?>
</div>
<div class="ftB">
<span class="copr"><?php echo $this->getCopyright() ?></span>
<?php echo $this->getChildHtml('footer_links') ?>
</div>
</div>
<?php /** ADD LOGOS TO FOOTER */ ?>
<div class="ftLogos" style="width:80%; height:56px; margin:0 auto;">
<div class="ftFb" style="float:left; width:20%; text-align:center; margin:0 auto;"><img src="<?php echo $this->getSkinUrl() ?>images/logos/footer-facebook.png" alt="Find us on FaceBook" /></div>
<div class="ftTw" style="float:left; width:20%; text-align:center; margin:0 auto;"><img src="<?php echo $this->getSkinUrl() ?>images/logos/footer-twitter.png" alt="Follow us on Twitter" /></div>
<div class="ftSt" style="float:left; width:20%; text-align:center; margin:0 auto;"><img src="<?php echo $this->getSkinUrl() ?>images/logos/footer-stripe.png" alt="Secure Card Payments by Stripe" /></div>
<div class="ftPp" style="float:left; width:20%; text-align:center; margin:0 auto;"><img src="<?php echo $this->getSkinUrl() ?>images/logos/footer-paypal.png" alt="Pay Securely by PayPal" /></div>
<div class="ftTr" style="float:left; width:20%; text-align:center; margin:0 auto;"><script type="text/javascript" src="https://sealserver.trustwave.com/seal.js?style=normal"></script></div>
</div>
CSS (in the section for small screens only):
.ftFb {display:none;}
.ftTw {display:none;}
.ftSt {display:none;}
.ftPp {display:none;}
I'm happy to learn if there are better ways to format and ask questions on here :-)
Thanks,
Hugh
Your issue looks to be you hiding it for all. You will need to remove it from media=all
media="all"
.ftTw {
display: none;
}
Looking through the css using chrome inspection. It looks like your media queries are doing the following. So for all except ftTr, they are hidden using the following code.
media="all"
#media screen and (min-width: 768px)
.ftPp {
display: none;
}
media="all"
.ftPp {
display: none;
}
The only icon i see is ftTr and its always shown. The rest are always hidden. I would suggest reviewing how your creating the media css.
Related
I'm trying to align an a tag to the top of my div in bootstrap. This is the current code I have:
<div class="authorAvatar">
<img src="<?php echo $author->avatar;?>" style="width:auto;height:50px;">
<a href="profile.php?id=<?php echo $author->user_id;?>">
<?php echo $author->username;?>
<?php echo $author->points;?>
</a>
</div>
What I am trying to achieve is the user's avatar being displayed, and then next to it, the username and the user's points directly below it. I have tried used the following CSS code:
.authorAvatar {
display:inline-block;
float:right;
height:50px;
}
.authorAvatar a {
display:inline;
vertical-align: text-top;
}
But the a href is centered in the div. I have also tried adding a position:relative to the authorAvatar and a position:absolute; and top:0px; to the a tag, but then the image is underneath the a href tag.
Here is a plunkr:
http://plnkr.co/edit/9HVQ4U3UjjqaiHzlxqkO
How can I achieve something of this effect:
image username
image points
image
If you are using bootstrap, try using the boostrap's css classes instead of your own css.
<img class="img-responsive pull-left"src="http://worldofdtcmarketing.com/wp-content/uploads/2014/05/Apple-logo.jpg" style="height:50px">
<a class="pull-right"href="#">blabla</a>
.authorAvatar {
display:inline-block;
float:right;
height:50px;
}
.authorAvatar img{
display: inline-block;
}
.authorAvatar a {
display: inline-block;
vertical-align: top;
}
<div class="authorAvatar">
<img src="http://lorempixel.com/100/100/nature/" style="width:auto;height:50px;">
<a href="profile.php?id=<?php echo $author->user_id;?>">
<?php echo $author->username;?><br>
<?php echo $author->points;?>
</a>
</div>
Check whether this effect fits what you need.
http://plnkr.co/edit/bdzuVhgAqaP6Bi6pLqOW?p=preview
html:
<link rel="stylesheet" href="style.css">
<div class="authorAvatar">
<img src="http://worldofdtcmarketing.com/wp-content/uploads/2014/05/Apple-logo.jpg" style="width:auto;height:50px;">
<a href="profile.php?id=1>">
<div>blahblahblah</div>
<div>blahblahblah</div>
</a>
</div>
css:
.authorAvatar {
height:50px;
}
.authorAvatar a {
display:inline-block;
vertical-align: top;
}
Please firstly visit my webpage tristans.ml/.. and make your browser window less that 1000px wide, then open the menu and there you have my issue.
I don't know a good way to solve this problem. The code is as follows:
First the media queries in css:
#media all and (max-width:1000px){
#nav_holder{
width:100%;
height:54px;
z-index:2;
}
nav{
}
.first_menu{
display:none;
background:#161619;
}
.logo_b{
top:0;
float:right;
display:block;
}
#logo{
padding:0;
}
#ttrgovina{
width: 200px;
}
#container{
margin-top:54px;
}
}
Then there is the html code (sorry if it's a mess):
<div id="nav_holder">
<div id="logo">
<span class="logo_b" id="nav_button"><img width="55" height="55" src="style/images/menu.png" alt="Menu"></span>
<span class="logo_b" id="cart_button"><img width="55" height="55" src="style/images/cart.png" alt="Cart"></span>
</div>
<nav>
<span id="ttrgovina">Tshop</span>
<ul class="first_menu">
<li>
<a id="menu_1" href="javascript:void();">Komponente</a>
<ul class="second_menu"></ul>
</li>
</ul>
</nav>
</div>
NOTE: the code has been shortened. just li elements removed.
Would you please help me with this issue cause I am hanging on it for quite some time now. I tried also creating 2 menus, but I think this is a waste of time. If you need more data or anything else, just comment the post.
I have a video loaded in jwplayer and a small video queue with thumbnails positioned right alongside it. For some reason, when my player loads, it pushes the entire queue down below the player, despite it being right next to it otherwise. It is behaving as if the container is too small, but if I make the videoWrapper larger I get the same behavior.
HTML:
<div id="videoWrapper">
<div id="video"></div>
<script type='text/javascript'>
jwplayer('video').setup({
file: <?php echo '\''.$sex.'\''?>,
width: '750',
height: '420',
primary: 'flash',
autostart: 'false'
});
</script>
<div id="queueList">
Up Next
<input type="image" src=<?php echo $thumbs[0]; ?> class="thumb" />
<input type="image" src=<?php echo $thumbs[1]; ?> class="thumb" />
<input type="image" src=<?php echo $thumbs[2]; ?> class="thumb" />
<input type="image" src=<?php echo $thumbs[3]; ?> class="thumb" />
</div>
</div>
CSS:
#videoWrapper{
display:block;
width:872px;
height:420px;
margin-top:40px;
margin-left:auto;
margin-right:auto;
}#queueList{
width:120px;
height:420px;
float:right;
}.thumb{
margin-top:7px;
width:120px;
height:auto;
background:black;
}#video{
width:750px;
height:420px;
background:black;
color:purple;
float:left;
}
If anyone can provide any sort of reason why this is happening or a work around I would very much appreciate it.
A live look at what I am talking about can be seen here: http://porndoraone.com/test2.php
The orange boxes should be inside the black border, adjacent to the video.
Solution seems to be very simple. All what you have to do is style #video_wrapper, created by jwplayer, like this:
#video_wrapper {
float: left;
}
See this JSFiddle with working demo.
I'm dynamically adding select dropdowns with jquery into a div. I would like to begin with the div centered and then as the new dropdowns are added to move out from the center outwards.
Here is the CSS for the divs:
#pageMiddle{
width:940px;
margin:0 auto;
text-align: left;
position:relative;
}
#searchBar{
background: red;
width:500px;
margin: 0 auto;
}
#searchwrapper{
width:850px;
background: blue;
}
#searchwrapper form {
display:inline ;
margin: 0 auto;
}
and the actual HTML:
<div id="pageMiddle">
<div id="holder">
<div id="searchBar">
<div id="searchwrapper">
<form name="search_input">
I am looking for a
<div id="sBar1" style="display:inline;">
<select id="search_level" class="selectSearchBar" name="search_level">
<?php echo "<option>Level</option>";
while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){
echo "<option value=".$row['id'].">".$row['level']."</option>";
}?>
</select>
</div>
<div id="sBar2" class="selectSearchBar"></div>
<div id="sBar3" class="selectSearchBar"></div>
tutor in
<input type=text class="searchbox" id="location" value="Location"/>
<input type=image src="images/search_icon.png " class="searchbox_submit" name="searchbox_submit" onclick="searchLocations()" value=""></form>
</div>
</div>
</div>
</div>
I assume you mean something like this?
Notice the blue section is centered in the red section. This was done with the table display, which allows something of indefinite size to be centered via automatic margins. Otherwise, it must be a block element and have a definite size.
#searchwrapper
{
display: table;
margin: 0 auto;
}
<?php echo "<option style="text-align:center;">Level</option>";
while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){
echo "<option value=".$row['id'].">".$row['level']."</option>";
}?>
Let me know if this works please.
There are several method on the web to set height of columns equal. One of the best, I think, is "Equal Height Columns with Cross-Browser CSS".
But there's a problem to apply that method on Joomla module structure and I couldn't figure out how to get it to work.
I used rounded module chrome (with one main background for module and another background image for inner DIV to wrap modules bottom) on Joomla template source so each module renders this way:
<div class="module_menu">
<div>
<div>
<div>
<h3>Main Menu</h3>
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</div>
</div>
</div>
</div>
and I use 3 modules in a row that wrapped in a parent DIV.
This is the code:
<div style="width:904px; margin:20px; float:left; overflow:hidden; position:relative;">
<div style="width:904px; float:left; position:relative;">
<div style="width:904px; float:left; position:relative;">
<div style="float:left; width:288px; height:100%; margin-right:20px;">
<jdoc:include type="modules" name="user4" style="rounded" />
</div>
<div style="float:left; width:288px; height:100%; margin-right:20px;">
<jdoc:include type="modules" name="user5" style="rounded" />
</div>
<div style="float:right; width:288px; height:100%;">
<jdoc:include type="modules" name="user6" style="rounded" />
</div>
</div>
</div>
</div>
And finally there's css related to the Joomla module's style:
div.module-gallery, div.module, div.module_menu {
width:291px;
background:url(../images/module-bg.png) no-repeat 50% bottom;
}
div.module div div div, div.module_menu div div div {
padding-right:15px;
padding-left:15px;
background:url(../images/module-bg-bottom.png) no-repeat 50% 100%;
padding-bottom:15px;
min-height:230px;
}
div.module div div div div, div.module_menu div div div div {
background:none;
}
How can I set modules height equal automate/dynamically with saving Module background style.
You need to take a look in templates/system/html/modules.php.
You can then create a copy of module chrome to output your module structure, which would be more beneficial since you code is kinda outrageous to read and isn't very semantic. i.e.
function modChrome_myModuleName($module, &$params, &$attribs)
{
$doc =& JFactory::getDocument();
$css = ".moduleOuter { your style }";
$css .= ".moduleInner{ your style }";
$doc->addStyleDeclaration($css);
?>
<div class="moduleOuter">
<div class="moduleInner">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
</div>
<?php
}
You'd then guess call the module with a style, like so:
<jdoc:include type="modules" name="left" style="myModuleName" />
From then on, you'll have a more semantic way of calling your modules and making it easier to get your CSS heights to work.