I'm trying to align the 'hot picks' tab so it sits beside the slideshow at my site http://www.loveartmusicbaby.com which works in Firefox with the float: left code as posted below. But how can I get it to work also on Chrome and IE? :/
<img src="http://img692.imageshack.us/img692/4756/tabcv.png" alt="art music fashion" style="float: left;" /><div id="s3slider"><ul id="s3sliderContent">
<li class="s3sliderImage"><img style="width:569px;height:341px;" src="http://img138.imageshack.us/img138/2513/wasex.jpg" /><span>Why we <font color="ff00ae">love </font> fashion designer, Hayley Scanlan</span></li>
<li class="s3sliderImage"><img style="width:569px;height:341px;" src="http://img832.imageshack.us/img832/1678/dollnp.jpg" /><span> The First Ladies of music feat. <font color="ff00ae">Kimbra </font> </span></li>
<li class="s3sliderImage"><img style="width:569px;height:341px;" src="http://img513.imageshack.us/img513/4583/fdaw.jpg" /><span>Meet <font color="ff00ae">Helen Green</font>, the coolest Little Monster around. </span></li>
<li class="s3sliderImage"><img style="width:569px;height:341px;" src="http://img521.imageshack.us/img521/7456/saudin.jpg" /><span> Cute as <font color="ff00ae">candy:</font> The Saudi fashion designer causing a stir</span></li>
<li class="s3sliderImage"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtosfYNI/AAAAAAAAA-o/GTCV0pnicVk/s1600/call+of+duty-11.jpg" /><span>Call Of Duty 4 : Get Here</span></li>
</ul></div>
<div class='clear'></div>
#s3slider simply does not fit to width of the parent. Try
#s3slider {
width:560px;
}
Related
My yellow-div jumps down when text in it get a little long. See imagesofproblem.
<html>
<div style="background-color:#00ff00; width:200px;">
<ul style="list-style:none;">
<li><span style="margin-right:5px;">></span><div style="display:inline-block; background-color:yellow;">Hit me! Hit me! -Hit me! -</div> </li>
</ul>
</div>
</html>
How can I make sure, that the yellow-div not jump down, when text get long. Log text should automatically get brokken to a new line.
(Is it possible to solve this problem without putting "width" to yellow div)
You can use Flexbox to achieve your desired result (if that is an option).
<div style="background-color:#00ff00; width:200px;">
<ul style="list-style:none;">
<li style="display:flex;"><span style="margin-right:5px;">></span><div style="display:inline-block; background-color:yellow;">Hit me! Hit me! -Hit me! -</div> </li>
</ul>
</div>
Edit: Here's a version with your margins in place
<div style="background-color:#00ff00; width:200px;">
<ul style="list-style:none;">
<li style="display:flex;"><span style="margin-right:5px;">></span><div style="display:inline-block; background-color:yellow; margin:2px 0 20px;">Hit me! Hit me! -Hit me! -</div> </li>
</ul>
</div>
Try to change display:inline-block to inline like this:
<html>
<div style="background-color:#00ff00; width:200px;">
<ul style="list-style:none;">
<li><span style="margin-right:5px;">> <span style="display: inline; background-color:yellow;"> Hit me! Hit me! -Hit me! -</span> </li>
</ul>
</div>
</html>
Ok so I have a few tables on a page and one of them is giving me trouble. It is the second table on the page The left column is how I want it, the other appears to be centering the data within the table row. I don't understand why, I don't think its CSS from the WordPress template because if I launch it as a raw HTML file in my browser it is doing the same thing. Here is the link to the resulting page with the tables (second table down): http://titanpropertymanagement.co/residents/utility-info/
I know this issue is probably super simple but I am still learning to code so I'm sure it's just missing a simple style tag. Thanks for any help you can provide :)
Here is the code for the second table giving me issues
<h2 style="text-align: center;">Water & Trash Service</h2>
<table width="100%">
<tbody>
<tr>
<td width="50%">
<h4>Water/Trash for Lafayette</h4>
<h5><span style="text-decoration: underline">Lafayette Utility Dept.</span> - (765) 807-1100</h5>
<ul>
<li><span style="text-decoration: underline">Download Application Here
</span>
</li>
</ul>
<h5>Lafayette Sanitation - (765) 807-1411</h5>
<ul>
<li><span style="text-decoration: underline">Request Trash/Recycle Bin</span>
</li>
</ul>
<h5>Waste Management - (800) 443-5646</h5>
<ul>
<li><span style="text-decoration: underline">Request Service Online</span>
</li>
</ul>
</td>
<td width="50%">
<h4>Water/Trash For West Lafayette</h4>
<h5><span style="text-decoration: underline">American Water</span> - (800) 492-8373</h5>
<ul>
<li>Request New Service Online
</li>
</ul>
<h5>W. Lafayette Sanitation - (765) 775-5242</h5>
<ul>
<li>Request Service Online
</li>
</ul>
</td>
</tr>
</tbody>
</table>
Add
tbody {
vertical-align: top;
}
to your stylesheet. This will override the browser's default styling of tbody, which is to vertically align the tbody to the middle (at least in Chrome).
I'm building a LHN in Sitefinity and ran into an issue styling it. When a page is set as the active page, it gets the sfsel class. Unfortunately, it also applies it to the parent page when a subpage is active. I need to get the styling so when a subpage is active, only that list item is highlighted, but when only the parent "About" page is active, it still gets highlighted.
http://jsfiddle.net/4NnaZ/1/
<div class="sfNavWrp sfNavTreeviewWrp leftnav">
<div class="k-widget k-treeview" tabindex="0" role="tree" aria-activedescendant="C001_ctl00_ctl00_navigationUl_tv_active">
<ul class="sfNavTreeview sfNavList k-group k-treeview-lines" id="C001_ctl00_ctl00_navigationUl" data-role="treeview">
<li class="k-item k-first k-last" data-uid="ceac0efa-1b50-46c7-a351-945f05a6eb87" role="treeitem" data-expanded="true" aria-expanded="true">
<div class="k-top k-bot"><span class="k-icon k-minus"></span><a class="sfSel k-in" href="../about">About</a>
</div>
<ul id="C001_ctl00_ctl00_ctl03_ctl00_childNodesContainer" class="k-group" style="display: block;">
<li class="k-item" data-uid="3b1f4e90-1945-4c93-a770-43787527d7bf" role="treeitem" id="C001_ctl00_ctl00_navigationUl_tv_active">
<div class="k-top"><a class="sfSel k-in k-state-focused" href="locations">Locations</a>
</div>
</li>
<li class="k-item" data-uid="48d48d44-55ee-4bf7-9fcd-20380c18b991" role="treeitem">
<div class="k-mid">Careers
</div>
</li>
<li class="k-item" data-uid="267e4a18-8489-45c2-bef3-1efcba63916f" role="treeitem">
<div class="k-mid">Producer Board
</div>
</li>
<li class="k-item k-last" data-uid="d75d7989-3815-49b3-856c-c4d24dcd5dc8" role="treeitem">
<div class="k-bot">Contact Information
</div>
</li>
</ul>
</li>
</ul>
</div>
isn't k-state-focused the class you should use to highlihgt only current link/page ?
I believe this is a jQuery script producing this classname.
You can modify your code to set a class for that purpose , http://www.sitefinity.com/developer-network/forums/general-discussions-/highlight-current-page
Is it possible to have a liquid navigation bar with the links having images. I am trying to have a responsive link with an image on the left and text on the right. If the size of the window changes then the button (link) will change size too. I would prefer to do this with CSS.
What I have tried so far is to have the following:
<div style="height:62px;margin-left:60px;border:solid 1px #FFFFFF;">
<ul class="main_nav">
<li>
<a href="#me">
<img src="img/avatar/me.png" alt="me">
Me
</a>
</li>
<li>
<a href="#guide">
<img src="img/avatar/spotlight.png" alt="guide">
Guide
</a>
</li>
<li>
<a href="#downloads">
<img src="img/avatar/downloads.png" alt="downloads">
Downloads
</a>
</li>
</ul>
<div>
I can't seem to figure out how to change the height of list items in a jquery mobile navbar. I've looked through all the css and tried changing everything I've found but nothing has worked so far. Hope someone can help!
Here's the code:
<div data-role="page" data-theme="a">
<div data-role="header" style="background: url('../images/stripe.gif') repeat top left;">
<div data-role="navbar">
<ul class="custom-navbar">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
Here's a link to see how it's rendering. The 7 items at the top (the days of the week), as you can see have lots of space above and below them inside their borders. I want much less space there.
<ul class="custom-navbar ui-grid-f">
<li class="ui-block-a"><span class="ui-btn-inner"><span class="ui-btn-text">Sun</span></span></li>
<li class="ui-block-b" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Mon</span></span></li>
<li class="ui-block-c" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Tue</span></span></li>
<li class="ui-block-d" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Wed</span></span></li>
<li class="ui-block-e" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Thu</span></span></li>
<li class="ui-block-c ui-block-f" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Fri</span></span></li>
<li class="ui-block-g" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Sat</span></span></li>
</ul>
There is your initialized grid. You can see that I added padding-left: -5px to all but the first <li> element to take away the space between them. I would either use a class to add the margin to the elements or if you are targeting browsers that support CSS3 then you can use the :nth-child() selector to get all but the first <li> element.
Update
Here is how to change your code so that it will look like the above code after jQuery Mobile initializes it:
<ul class="custom-navbar">
<li>Sun</li>
<li style="margin-left: -5px;">Mon</li>
<li style="margin-left: -5px;">Tue</li>
<li style="margin-left: -5px;">Wed</li>
<li style="margin-left: -5px;">Thu</li>
<li style="margin-left: -5px;">Fri</li>
<li style="margin-left: -5px;">Sat</li>
</ul>