Search Results

Search found 11623 results on 465 pages for 'css positioning'.

Page 185/465 | < Previous Page | 181 182 183 184 185 186 187 188 189 190 191 192  | Next Page >

  • To divide the big text into columns.

    - by kalininew
    Problem: There is a big piece of the text: <div class="cont"> <p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, </p> <p> consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et </p> <p> accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, </p> <p> facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p> <p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, </p> <p> consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et </p> <p> accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, </p> <p> facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p> </div> It is necessary: To divide it on two columns. On page it should be divided on two about identical (on height) columns. If it is possible: at change of the sizes of the container of the text, a column should remain identical height. Whether probably to set number "n" - on how many columns to divide the big piece of the text. That is to divide the text into any number of columns. Is available: php, xslt, css, pure javascript (without jQuey). What tool is better for using? As it to make, that the decision was ?ross browser compatible.

    Read the article

  • TableView Cells Use Whole Screen Height

    - by Kyle
    I read through this tutorial Appcelerator: Using JSON to Build a Twitter Client and attempted to create my own simple application to interact with a Jetty server I setup running some Spring code. I basically call a get http request that gives me a bunch of contacts in JSON format. I then populate several rows with my JSON data and try to build a TableView. All of that works, however, my tableView rows take up the whole screen. Each row is one screen. I can scroll up and down and see all my data, but I'm trying to figure out what's wrong in my styling that's making the cells use the whole screen. My CSS is not great, so any help is appreciated. Thanks! Here's my js file that's loading the tableView: // create variable "win" to refer to current window var win = Titanium.UI.currentWindow; // Function loadContacts() function loadContacts() { // empty array "rowData" for table view cells var rowData = []; // create http client var loader = Titanium.Network.createHTTPClient(); // set http request method and url loader.setRequestHeader("Accept", "application/json"); loader.open("GET", "http://localhost:8080/contactsample/contacts"); // run the function when the data is ready for us to process loader.onload = function(){ Ti.API.debug("JSON Data: " + this.responseText); // evaluate json var contacts = JSON.parse(this.responseText); for(var i=0; i < contacts.length; i++) { var id = contacts[i].id; Ti.API.info("JSON Data, Row[" + i + "], ID: " + contacts[i].id); var name = contacts[i].name; Ti.API.info("JSON Data, Row[" + i + "], Name: " + contacts[i].name); var phone = contacts[i].phone; Ti.API.info("JSON Data, Row[" + i + "], Phone: " + contacts[i].phone); var address = contacts[i].address; Ti.API.info("JSON Data, Row[" + i + "], Address: " + contacts[i].address); // create row var row = Titanium.UI.createTableViewRow({ height:'auto' }); // create row's view var contactView = Titanium.UI.createView({ height:'auto', layout:'vertical', top:5, right:5, bottom:5, left:5 }); var nameLbl = Titanium.UI.createLabel({ text:name, left:5, height:24, width:236, textAlign:'left', color:'#444444', font:{ fontFamily:'Trebuchet MS', fontSize:16, fontWeight:'bold' } }); var phoneLbl = Titanium.UI.createLabel({ text: phone, top:0, bottom:2, height:'auto', width:236, textAlign:'right', font:{ fontSize:14} }); var addressLbl = Titanium.UI.createLabel({ text: address, top:0, bottom:2, height:'auto', width:236, textAlign:'right', font:{ fontSize:14} }); contactView.add(nameLbl); contactView.add(phoneLbl); contactView.add(addressLbl); row.add(contactView); row.className = "item" + i; rowData.push(row); } Ti.API.info("RowData: " + rowData); // create table view var tableView = Titanium.UI.createTableView( { data: rowData }); win.add(tableView); }; // send request loader.send(); } // get contacts loadContacts(); And here are some screens showing my problem. I tried playing with the top, bottom, right, left pixels a bit and didn't seem to be getting anywhere. All help is greatly appreciated. Thanks!

    Read the article

  • Why are these divs not aligned and space between?

    - by acidzombie24
    Why isnt everything aligned? No yellow should be visible and no orange should be visible except for the right side and bottom left where theres space for another image. Basically my images are pretty much aligned to the center (i have other pics not in this example which is easier to see). However in this case when i have 150px height image the 150 width seems start lower. Also why are there spaces in between <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ldfk;sd</title> <style type="text/css"> div.ImgGallery { max-width: 630px; background: orange; } .ImgGallery div { display: inline; } /* http://www.brunildo.org/test/img_center.html */ .ImgGallery div div { display: table-cell; text-align: center; background: gray; width: 150px; height: 150px; } .ImgGallery div{ background: yellow; vertical-align: middle; } //.ImgGallery div div :nth-child(2n+1) { background: red; } .ImgGallery * { vertical-align: middle; } .ImgGallery a { display: block; } .ImgGallery a * { border-style: none; } </style> </head> <div class="smallGallery"> <div class="ImgGallery"> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="b.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="b.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> <div><div><a href="http://google.com"><img src="a.jpg" alt="a.jpg"></a></div></div> </div></div> </body></html>

    Read the article

  • Which part of this simple script is breaking internet explorer?

    - by user961627
    I'm writing a simple virtual keyboard for Arabic (indic) digits. Just links that, when clicked, produce the corresponding Unicode Indic character. The following is my HTML, in the body tag: <a href="#" id='start'>Start</a> <div id='vkb' style='padding:20px;font-size:16pt; border:2px solid #eee; width:250px' dir='ltr'> <a class='key' href='#' id='0'>&#1632;</a> <a class='key' href='#' id='1'>&#1633;</a> <a class='key' href='#' id='2'>&#1634;</a> <a class='key' href='#' id='3'>&#1635;</a> <a class='key' href='#' id='4'>&#1636;</a><br /> <a class='key' href='#' id='5'>&#1637;</a> <a class='key' href='#' id='6'>&#1638;</a> <a class='key' href='#' id='7'>&#1639;</a> <a class='key' href='#' id='8'>&#1640;</a> <a class='key' href='#' id='9'>&#1641;</a> <br /> <a href="#" id='stop'>Stop</a> </div> <div id='output' /></div> This is my CSS: a { text-decoration:none; } .key { padding:7px; background-color:#fff; margin:5px; border:2px solid #eee; display:inline-block; } .key:hover { background-color:#eee; } And this is my javascript: <script type="text/javascript" src="js/jquery.js"></script> <script> $(document).ready(function(){ var toprint = ""; $('#vkb').hide(); $('#start').click(function(e){ toprint = ""; $('#vkb').show(); }); $('#stop').click(function(e){ $('#vkb').hide(); ret = ar2ind(toprint); $('#output').text(ret); toprint = ""; }); $('#vkb').click(function(e){ var $key = $(e.target).closest('.key'); var pressed = $key.attr('id'); if(pressed === undefined){ pressed = ""; } toprint = toprint + pressed; }); }); function ar2ind(str) { str = str.replace(/0/g, "?"); str = str.replace(/1/g, "?"); str = str.replace(/2/g, "?"); str = str.replace(/3/g, "?"); str = str.replace(/4/g, "?"); str = str.replace(/5/g, "?"); str = str.replace(/6/g, "?"); str = str.replace(/7/g, "?"); str = str.replace(/8/g, "?"); str = str.replace(/9/g, "?"); return str; } </script> It seems simple enough but it's crashing in IE9. (Might be crashing in earlier versions too but haven't been able to check.)

    Read the article

  • Customize jquery ui progress bar

    - by P. Sohm
    I'd like to add some values under the jquery progress like My current code is : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"> </script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> <style type="text/css"> .ui-progressbar { height:2em; text-align: left; overflow: hidden; } .ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; } .ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; } .ui-widget-content { border: 1px solid #dddddd; background: #EDEFF1 50% top repeat-x; color: #333333; } .ui-widget-content a { color: #333333; } .ui-widget-header { border: 1px solid #e78f08; background: #AB3B3B 50% 50% repeat-x; color: #ffffff; font-weight: bold; } .ui-widget-header a { color: #ffffff; } .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } #progressbar { float: right; margin-right: 100px; width: 120px; margin-top: -30px } #progress { position: relative} </style></head> <body> <script type="text/javascript"> $().ready(function() { $("#progressbar").progressbar({ value: 29 }); }); </script> <div id="progressbar"></div> </body></html> I didn't find how to have this result ... Another possibility would be to add some text at the right of the progress bar (I tryied with a but it comes in the line after)

    Read the article

  • margin:0 auto IE6 problem

    - by senzacionale
    Can someone please tell me ehy in IE 6 div is not in center. I use margin: 0 auto; Problem is only in IE6! HTML <div id="center"> <div id="top_menu"> <a href="/Default.aspx">Domov</a> · <a href="/EnterSite.aspx">Vpišite stran</a> · <a href="/About.aspx">O nas</a> · <a href="/Help.aspx">Pomoc pri iskanju</a> · <a href="/Marketing.aspx">Oglaševanje</a> · <a href="/Info.aspx">Splošni pogoji in pravila</a> </div> <a href="http://www.viamura.si"><img src="/images/viamura_logo.png" width="294" height="95" border="0" alt="viamura" /></a> <div id="tabs"> <ul> <li><asp:LinkButton ID="btnWeb" runat="server" CssClass="web_selected" onclick="btnWeb_Click">Web</asp:LinkButton></li> <li><asp:LinkButton ID="btnMap" runat="server" CssClass="map" onclick="btnMap_Click">Zemljevidi</asp:LinkButton></li> <li><asp:LinkButton ID="btnWeather" runat="server" CssClass="weather" onclick="btnWeather_Click">Vreme</asp:LinkButton></li> <li><asp:LinkButton ID="btnImages" runat="server" CssClass="images" onclick="btnImages_Click">Slike</asp:LinkButton></li> <li><asp:LinkButton ID="btnConverter" runat="server" CssClass="converter" onclick="btnConverter_Click">Converter</asp:LinkButton></li> </ul> </div> CSS: center { width:520px; margin:0 auto; } tabs { width:400px; margin:0 auto; } tabs ul li a.web,#tabs ul li a.map,#tabs ul li a.weather,#tabs ul li a.images,#tabs ul li a.converter,#tabs ul li a.web_selected,#tabs ul li a.map_selected,#tabs ul li a.weather_selected,#tabs ul li a.images_selected,#tabs ul li a.converter_selected { background-color:#0C0; float:left; height:18px; text-indent:-9999px; } tabs ul { float:left; width:459px; margin:10px 0 0 41px; } tabs ul li { float:left; margin:0 2px 0 0; } tabs ul li a.web { background:url(../images/tab_web.png) no-repeat; width:46px; } tabs ul li a.map { background:url(../images/tab_map.png) no-repeat; width:80px; } tabs ul li a.weather { background:url(../images/tab_weather.png) no-repeat; width:58px; } tabs ul li a.images { background:url(../images/tab_images.png) no-repeat; width:48px; } tabs ul li a.converter { background:url(../images/tab_converter.png) no-repeat; width:78px; } tabs ul li a.web_selected { background:url(../images/tab_web_selected.png) no-repeat; width:46px; } tabs ul li a.map_selected { background:url(../images/tab_map_selected.png) no-repeat; width:80px; } tabs ul li a.weather_selected { background:url(../images/tab_weather_selected.png) no-repeat; width:58px; } tabs ul li a.images_selected { background:url(../images/tab_images_selected.png) no-repeat; width:48px; } tabs ul li a.converter_selected { background:url(../images/tab_converter_selected.png) no-repeat; width:78px; }

    Read the article

  • jQuery: Div elements are not showing up

    - by Legend
    I am adapting the Coverflow technique to work with a div. Following is the html: <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> body,html { margin: 0; padding: 0; background: #000; height: 100%; color: #eee; font-family: Arial; font-size: 10px; } div.magnifyme { height: 80px; padding: 80px; position: absolute; top: 0px; left: 0px; width: 8000px; } div.wrapper { margin: 0px; height: 470px; /*border: 2px solid #999;*/ overflow: hidden; padding-left: 40px; right: 1px; width: 824px; position: relative; } div.container {position: relative; width: 854px; height: 480px; background: #000; margin: auto;} div.nav {position: absolute; top: 10px; width: 20%; height: 10%; right: 1px; } div.magnifyme div { position: absolute; width: 300px; height: 280px; float: left; margin: 5px; position: relative; border: 2px solid #999; background: #500; } </style> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="ui.coverflow.js"></script> <script type="text/javascript"> $(function() { $("div.magnifyme").coverflow(); $("#add").click(function() { location.reload(); $(".magnifyme").append("<div id=\"div5\">hello world</div>"); $("div.magnifyme").coverflow(); }); }); </script> </head> <body> <div class="container"> <div class="wrapper"> <div class="magnifyme"> <div id="div0">This is div 0</div> <div id="div1">This is div 1</div> <div id="div2">This is div 2</div> <div id="div3">This is div 3</div> <div id="div4">This is div 4</div> </div> </div> <div class="nav"> <button type="button" id="add">Add to Deck</button> </div> </div> </body> </html> The coverflow function (included as a js file in the head section) is here. When I click the button, I was expecting it to add a DIV to the already present deck. For some reason, it doesn't show the newly added DIV. I tried calling the coverflow() function after I added the new element but that didn't work either. Is there any way I can make this work?

    Read the article

  • Cordova - Scrolling with a fixed header and footer (ios)

    - by Samu Singh
    Using Cordova (phonegap) & bootstrap to make a mobile application, testing on IOS for now. Getting an issue with a header and footer bar that are fixed with scrollable content in the middle. When tapping to scroll, the header/footer bar moves down or up with the content but then snaps back to place as soon as the scrolling completes. If I use -webkit-overflow-scrolling: touch; it works as expected, but it makes it really awkward to scroll through the content, and if you scroll passed the end, it only scrolls the header or footer (with elastic overflow) until you stop for a second. here's my html for the header/footer bars: <div id="headerBar"> <div class="container-fluid" style="background-color: #1569C7"> <div class="row"> <div class="col-xs-3 text-left"> <button id="logoutButton" type="button" class="btn btn-default"> Log Out </button> <button type="button" class="btn btn-default" id="restoreQuestionFeedButton"> <span class="glyphicon glyphicon-chevron-left"></span> </button> </div> <div class="col-xs-6 text-center" style="height: 55px"> <strong id="usernameText"></strong> </div> <div class="col-xs-3 text-right"> <button id="oldCreatQuestionButton" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus"></span> </button> </div> </div> </div> </div> <div id="footerBar"> <div class="container-fluid" style="padding: 0"> <div class="row text-center"> <button id="createQuestionButton" type="button" class="btn btn-default footerButton"> <span class="glyphicon glyphicon-plus"></span> <strong>Ask a new free question!</strong> </button> </div> </div> </div> And here is the related CSS: #headerBar { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; background-color: #1569C7; } #footerBar { position: fixed; z-index: 100; bottom: 0; left: 0; width: 100%; background-color: #1569C7 !important; }

    Read the article

  • IE 6 and 7 background inheritance problem, how do I solve this?

    - by Evilalan
    When I'm trying to create a rounded shaded box it works fine on FF and IE8 but on IE6 and IE7, any div inside the box gets the last background but if you set that all divs on the level where there should not be a background have background:none it doesn't show any background on the level that comes before *The code is pointing to live images on Image Shack so you can save and run that it will work normally on Firefox but you can see what happen on IE6/7. Also I can't give a specific class for the intens inside the containet "background" because it's a CMS that I'm trying to style! the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Problem With IE6 and 7</title> <style type="text/css"> * {padding:0px; margin:0px auto;} body {font-family:Verdana, Geneva, sans-serif; color:#666; font-size:14px; text-align:justify;} .background {width:300px;} .background div {background:url(http://img6.imageshack.us/img6/5763/76022084.png) repeat-y;} .background div div {background:url(http://img253.imageshack.us/img253/444/97936614.png) top left no-repeat;} .background div div div {background:url(http://img13.imageshack.us/img13/3667/45918712.png) bottom left no-repeat;} .background div div div div {padding:15px; background:none;} </style> </head> <body> <div class="background"> <div><div><div><div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sagittis nisl. Nullam facilisis volutpat metus eu semper. Sed eleifend, mi sed rhoncus interdum, neque quam pellentesque diam, in tincidunt metus nulla in ligula. Donec dui tellus, ultricies vel venenatis vitae, aliquam et purus. Cras eu nunc urna, in placerat quam. Pellentesque lobortis pellentesque orci, a tempus diam consequat nec. Aliquam erat volutpat. Aliquam laoreet blandit tellus in mollis. Duis tincidunt, justo sit amet lacinia ultrices, nibh justo venenatis erat, non commodo libero ligula quis ante. Cras eget nulla nec est accumsan porttitor at euismod nulla. Integer pharetra lacinia malesuada. Donec commodo vestibulum est, eget pellentesque velit volutpat nec. In id erat nec ipsum consequat convallis id non libero. Sed dui nisl, molestie vel dignissim sed, mattis in est. Vestibulum porttitor posuere ipsum, id facilisis libero dapibus et. Fusce consequat malesuada nulla, vitae faucibus neque consectetur eget. Curabitur porta dapibus justo dictum porttitor. Curabitur facilisis faucibus diam, vel dapibus ipsum ornare sed. Vestibulum turpis nulla, facilisis condimentum sodales sed, imperdiet placerat mi. Cras ac risus ipsum. </p> </div></div></div> </div><!-- class background end here --> </body> </html>

    Read the article

  • In the following list, how do I prevent jQuery from interacting with part of it.

    - by kylex
    I have the following list structure: <ul> <li>One</li> <li class="topActive">Two <ul> <li class="active">Two-1 <ul> <li>Two-1-1</li> </ul> </li> <li>Two-2</li> </ul> </li> <li>Three <ul> <li>Three-1</li> </ul> </li> </ul> with the following jQuery: $("ul>li>ul").hide(); $("ul>li>ul>li>ul").hide(); $("ul>li>ul>li>ul>ul>li").hide(); $('.active').parents().show();????????? $("ul>li").hoverIntent( function(){ $(this).children('ul').slideDown('fast'); }, function(){ $(this).children('ul').slideUp('fast'); } ); $("ul>li>ul>li").hoverIntent( function(){ $(this).children('ul').slideDown('fast'); }, function(){ $(this).children('ul').slideUp('fast'); } ); What I would like is this: When an li class is topActive, everything within that class down to the current class can not be affected by the jQuery that causes the list to slide up and down. so in the case provided the following would show, along with the top level: One Two Two-1 Two-2 Three And when I mouse over either, Two, or Two-1 or Two-2 nothing happens, but if I mouse over Three, the jQuery will cause it to slide up or slide down. In this example: <ul> <li>One</li> <li class="topActive">Two <ul> <li class="active">Two-1 <ul> <li>Two-1-1</li> </ul> </li> <li>Two-2</li> </ul> </li> <li>Three <ul> <li>Three-1</li> </ul> </li> </ul> When I mouseover Two-1, it will slide down, but when I mouse out Two-1 will remain. One Two Two-1 Two-2 Three Any suggestsions for either a CSS or jQuery implementation (or mixture of the two)?

    Read the article

  • Hover/Fadeto/Toggle Multiple Class Changing

    - by Slick Willis
    So my problem is rather simple and complex at the same time. I am trying to create links that fade in when you mouseover them and fade out when you mouseout of them. At the same time that you are going over them I would like a pic to slide from the left. This is the easy part, I have every thing working. The image fades and another image slides. I did this by using a hover, fadeto, and toggle("slide"). I would like to do this in a table format with multiple images being able to be scrolled over and sliding images out. The problem is that I am calling my sliding image to a class and when I hover over the letters both images slide out. Does anybody have a solution for this? I posted the code that I used below: <html> <head> <script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-1.4.2.min.js'></script> <script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-custom-181/jquery-ui-1.8.1.custom.min.js'></script> <style type="text/css"> .text-slide { display: none; margin: 0px; width: 167px; height: 50px; } </style> <script> $(document).ready(function(){ $(".letterbox-fade").fadeTo(1,0.25); $(".letterbox-fade").hover(function () { $(this).stop().fadeTo(250,1); $(".text-slide").toggle("slide", {}, 1000); }, function() { $(this).stop().fadeTo(250,0.25); $(".text-slide").toggle("slide", {}, 1000); }); }); </script> </head> <body style="background-color: #181818"> <table> <tr> <td><div class="letterbox-fade"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/A-Letterbox-Selected.png" /></div></td> <td><div class="text-slide"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/TEST.png" /></div></td> </tr> <tr> <td><div class="letterbox-fade"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/B-Letterbox-Selected.png" /></div></td> <td><div class="text-slide"><img src="http://accidentalwords.squarespace.com/storage/sidebar/icons/TEST.png" /></div></td> </tr> </table> </body> </html>

    Read the article

  • Div width: auto and IE

    - by Andrew Heath
    I'm using the jQuery qTip to show individual users and their votes when an average rating is mousedover. qTip calls a PHP file which grabs all the users and votes for the item from the MySQL database and builds a 3 column table, which appears as the tooltip. In Firefox, the tooltip displays properly. In IE7 (haven't tested on IE8 yet), the tooltip is the proper height, but the width is only 2 or 3 characters - not the entire table. If I set the width of the div to a fixed number, say width: 300px; I can coax IE into displaying it properly. However, the length of my users' names varies considerably, and I'd rather not nail down the div to its maximum possible width and then have a crapload of whitespace when you look at an item voted on only by "Joe". Using width: auto; has no effect in IE7. Are there alternatives? Sorry if I've overlooked a similar question. I searched for a bit before posting but didn't find anything suitable. EDIT TO ADD CODE: <div style="-moz-border-radius: 0pt 0pt 0pt 0pt; position: absolute; width: 358px; display: none; top: 384.617px; left: 463.5px; z-index: 6000;" class="qtip qtip-defaults" qtip="0"> <div style="position: relative; overflow: hidden; text-align: left;" class="qtip-wrapper"> <div style="overflow: hidden; background: none repeat scroll 0% 0% white; border: 1px solid rgb(211, 211, 211);" class="qtip-contentWrapper"> <div class="qtip-content qtip-content" style="background: none repeat scroll 0% 0% white; color: rgb(17, 17, 17); overflow: hidden; text-align: left; padding: 5px 9px;"> <div id="WhoResults"> <table> <tbody> <tr> <td>guy1</td> <td>guy2</td> <td>guy3</td> </tr> <tr> <td>guy4</td> <td>guy5</td> <td>guy6</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> I have applied no CSS styling. That's all been handled by qTip. I tried to format it as best I could. Thanks for any help you can provide.

    Read the article

  • Content div not filling up the remaining space

    - by Sameer Shariff
    Basically #content is not obeying the height: auto attribute. What am i doing wrong? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title id="title" runat="server">AMIDS: Advanced Management Information Data Store</title> <style type="text/css"> #container { background-color: White; height: 100%; min-height: 100%; min-width: 600px; width: 100%; } #header { height: 50px; overflow: hidden; width: 100%; } #headerLeft { background-image: url('/Amids/App_Themes/Default/Images/HeaderLeft.jpg'); float: left; height: 50px; width: 5px; } #headerCenter { background-image: url('/Amids/App_Themes/Default/Images/HeaderCenter.jpg'); float: left; height: 50px; width: 99.2%; } #headerRight { background-image: url('/Amids/App_Themes/Default/Images/HeaderRight.jpg'); float: left; height: 50px; width: 5px; } #menu { background-image: url('/Amids/App_Themes/Default/Images/Menu.jpg'); height: 20px; width: 100%; } #content { background-color: Pink; height: auto; width: 100%; } #footer { height: 40px; overflow: hidden; width: 100%; } #footerLeft { background-image: url('/Amids/App_Themes/Default/Images/FooterLeft.jpg'); float: left; height: 40px; width: 5px; } #footerCenter { background-image: url('/Amids/App_Themes/Default/Images/FooterCenter.jpg'); float: left; height: 40px; width: 99.2%; } #footerRight { background-image: url('/Amids/App_Themes/Default/Images/FooterRight.jpg'); float: left; height: 40px; width: 5px; } * html #container { height: 100%; } * { margin: 0; padding: 0; } html, body, form { border: none; height: 100%; } </style> </head> <body> <form id="form" runat="server"> <div id="container"> <div id="header"> <div id="headerLeft"></div> <div id="headerCenter"></div> <div id="headerRight"></div> </div> <div id="menu"></div> <div id="content"></div> <div id="footer"> <div id="footerLeft"></div> <div id="footerCenter"></div> <div id="footerRight"></div> </div> </div> </form> </body> </html> Any ideas anyone?

    Read the article

  • Whatever hover not working IE6 and IE7

    - by jovialwhispers
    Below is the css for my menu #menu { position: absolute; left: 170px; top: 92px; background: #336699; float: left; z-index:50; } menu ul { list-style: none; margin: 0; padding: 0; width: 9em; float: left; } menu a, #menu h2 { font: bold 11px/20px arial, helvetica, sans-serif; display: block; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 4px 3px; } menu h2 { color: #fff; background: #336699; text-transform: uppercase; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 1px; border-right-width: 1px; } menu a { color: #fff; background: #79A3CF; text-decoration: none; } menu a:hover { color: #a00; background: #fff; } menu li { position: relative; } menu li ul li { position: relative; width: 12em; } menu ul ul { position: absolute; z-index: 500; } menu ul ul ul { position: absolute; top: 0; left: 100%; } div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul { display: none; } div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul { display: block; } Here is my html design for the menu. It is a horizontal menu with dropdown submenus <div id="menu"> <ul> <li><h2>Computers</h2> <ul> <li>subitem <ul><li>subitems</li> </li> <li>submitem</li> <li>submitem</li> </li> <li><h2>Network</h2> <ul><li>subitems</li> </li> </ul> </div> I am using the minified version of the whatever hover script. Checked few posts here on this issue but couldn't solve the problem. The submenus are not appearing on IE6 and IE7. I trid adding <!--[if lt IE 8]> but no results...

    Read the article

  • How do I get a button to show on mouseover using jQuery?

    - by sharataka
    I am trying to get a button to appear over an image when there is a mouseover event over the image. I have multiple images on the screen that I would like to have the same functionality. I'm having trouble getting this to work as the button is always present. Any advice on how to get it to work? Below is the rendered html and javascript. javascript <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> <script type = "text/javascript"> $(document).ready(function() { $('.image').mouseover(function(){ $('.munchbutton').show(); }); }); </script> css div.munchbutton{ position: absolute; bottom: 5px; right: 0px; left: 60px; } div.wrapper{ float:left; /* important */ position:relative; /* important(so we can absolutely position the description div */ padding: 5px; } html <!-- wrapper div --> <div class='wrapper'> <!-- image --> <div class="image" style="position: relative; left: 0; top: 0;"> <a href="/partners/Business/CNNMoney" > <img src="/static/CNNMoney.png" style="position: relative; top: 0; left: 0;"/> </a> <!-- partner munchbutton div --> <div class='munchbutton'> <form method='post'><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='7wq8pRYNCDkXUGRv7eU6qI1BU7RKyoT8' /></div> <input type="hidden" name="channel" id="channel" value="CNNMoney" /> <input type='submit' class = 'add' value='Add to plate'/> </form> </div> <!-- end munchbutton div --> </div> <!-- end image div --> </div> <!-- end wrapper div --> <!-- wrapper div --> <div class='wrapper'> <!-- image --> <div class="image" style="position: relative; left: 0; top: 0;"> <a href="/partners/Business/EconomistMagazine" > <img src="/static/EconomistMagazine.png" style="position: relative; top: 0; left: 0;"/> </a> <!-- partner munchbutton div --> <div class='munchbutton'> <form method='post'><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='7wq8pRYNCDkXUGRv7eU6qI1BU7RKyoT8' /></div> <input type="hidden" name="channel" id="channel" value="EconomistMagazine" /> <input type='submit' class = 'add' value='Add to plate'/> </form> </div> <!-- end munchbutton div --> </div> <!-- end image div --> </div> <!-- end wrapper div -->

    Read the article

  • Internet Explorer not loading stylesheet.

    - by Antarr Byrd
    I have a page that uses css. I works fine in firefox but when I open in IE there appears to be no styling. <!DOCTYPE html> <html> <head> <title>MySite</title> <%= stylesheet_link_tag :all %> <%= javascript_include_tag :defaults %> <%= csrf_meta_tag %> </head> <body> <p> <nav> <ul> <li> <a href="#">Login</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">Contact Us </a> </li> <li> <a href="#">Help</a> </li> <li> <a href="#">Trends</a> </li> <li> <a href="#">Your Privacy!</a> </li> <li> <a href="#">Terms of Use</a> </li> <li> <a href="#">mySite.com</a> </li> </ul> </nav> </p> <%= yield %> </body> <aside style ="float:right; font-size:x-small;background:#ffffff;"> <center> Local Areas </center> <% @states.each do |state| %> <ul> <a href= "/states"> <li> <%= state.name %> </li> </a> </ul> <% end %> </aside> <footer> </footer> </html>

    Read the article

  • Centering contentplaceholders

    - by gh9
    I have a contentplaceholder which needs to be centered (as close to absolute as possible) to the center of the page. The issue I am having is when, the browser moves to different resolutions the centering is thrown off. I have tried using divs and tables. I have switched out the precent with em units, and still no workie. Any help would be greatly appreciated. My end goal is to have the contentplaceholder always be in the center of page regardless of the resolution of the monitor <div style="width:20%"/> <div style="width:60"> contentplaceholercode </div> <div style="width:20%"/> <table> <tr > <td style="width:20%"> </td> <td style="width:60> </td> <td style="width:20%"> </td> </tr> </table> code for master and code for content page <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Master.master.cs" Inherits="WorkRecordr.Master" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script src="Assets/Scripts/Jqeury1.4.4.js" type="text/javascript"></script> <title></title> <style type="text/css"> body { background-color: #326598; } .outer { width: 100%; border: solid 1px gray; padding: 1px; } .inner { border: solid 1px gray; width: 70%; margin-left: auto; margin-right: auto; } </style> </head> <body> <div style="text-align: center"> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> </div> <form id="form1" runat="server"> <div class="outer"> <div class="inner"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </div> </form> </body> </html> <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="WorkRecordr.test" MasterPageFile="~/Master.Master" %> <asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> aaaaaaaaa***aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa***aaaaaaaaaaaaaaaa </asp:Content>

    Read the article

  • How do I get more separation between the end of the 1st div and the start of the 2nd div?

    - by user3075987
    I'm trying to get the 2nd div (the picture of the orange and copy) to go below the 1st div (the picture of the pear and copy), but see how the Orange copy is going up into the Pear copy. How can I have the Orange copy start below the Pear picture? Here's my jsfiddle: http://jsfiddle.net/huskydawgs/g8mbgr1e/4/ Here's my code: <div class="alignleft"> <p><img alt="Pear" src="http://eofdreams.com/data_images/dreams/pear/pear-01.jpg" width="144" height="150" /></p> The pear is native to coastal and mildly temperate regions of the Old World, from western Europe and north Africa east right across Asia. It is a medium-sized tree, reaching 10–17 metres (33–56 ft) tall, often with a tall, narrow crown; a few species are shrubby. The fruit is composed of the receptacle or upper end of the flower-stalk (the so-called calyx tube) greatly dilated. Enclosed within its cellular flesh is the true fruit: five cartilaginous carpels, known colloquially as the "core". From the upper rim of the receptacle are given off the five sepals[vague], the five petals, and the very numerous stamens. In ancient Egypt, artists used an orange mineral pigment called realgar for tomb paintings, as well as other uses. It was also used later by Medieval artists for the colouring of manuscripts. Pigments were also made in ancient times from a mineral known as orpiment. Orpiment was an important item of trade in the Roman Empire and was used as a medicine in China although it contains arsenic and is highly toxic. It was also used as a fly poison and to poison arrows. Because of its yellow-orange colour, it was also a favourite with alchemists searching for a way to make gold, both in China and the West. The pineapple is a herbaceous perennial which grows to 1.0 to 1.5 meters (3.3 to 4.9 ft) tall, although sometimes it can be taller. In appearance, the plant itself has a short, stocky stem with tough, waxy leaves. When creating its fruit, it usually produces up to 200 flowers, although some large-fruited cultivars can exceed this. Once it flowers, the individual fruits of the flowers join together to create what is commonly referred to as a pineapple. After the first fruit is produced, side shoots (called 'suckers' by commercial growers) are produced in the leaf axils of the main stem. These may be removed for propagation, or left to produce additional fruits on the original plant.[4] Commercially, suckers that appear around the base are cultivated. It has 30 or more long, narrow, fleshy, trough-shaped leaves with sharp spines along the margins that are 30 to 100 centimeters (1.0 to 3.3 ft) long, surrounding a thick stem. In the first year of growth, the axis lengthens and thickens, bearing numerous leaves in close spirals. After 12 to 20 months, the stem grows into a spike-like inflorescence up to 15 cm (6 in) long with over 100 spirally arranged, trimerous flowers, each subtended by a bract. Flower colors vary, depending on variety, from lavender, through light purple to red. Here's my CSS: .alignleft { float: left; margin: 0px 30px 20px 0px; } .alignright { float: right; margin: 0px 0px 20px 30px; }

    Read the article

  • center menu within the 960 grid

    - by Kyle Monti
    I have been working on 960 grid,(http://960.gs/) and I used an old style menu i've used in the past from a few years ago and for some reason with the 960 grid, the menu is floating left and I want it centered. ul#menu { width:940px; height:61px; background: url(../images/menu_bg.png) no-repeat; list-style:none; padding-top:0; padding-left:0; margin: 0; } ul#menu li { float:left; } ul#menu li a { background: url(../images/menu_splice_color.png) no-repeat scroll top left; display:block; height:61px; position:relative; } ul#menu li a.shel { width:135px; } ul#menu li a.golf { width:84px; background-position:-135px 0px; } ul#menu li a.pro { width:119px; background-position:-219px 0px; } ul#menu li a.event { width:94px; background-position:-338px 0px; } ul#menu li a.member { width:148px; background-position:-432px 0px; } ul#menu li a.bistro { width:91px; background-position:-580px 0px; } ul#menu li a.contact { width:115px; background-position:-671px 0px; } ul#menu li a span { background: url(../images/menu_splice_color.png) no-repeat scroll bottom left; display:block; position:absolute; top:0; left:0px; height:100%; width:100%; z-index:100; } ul#menu li a.shel span { background-position:0px -61px; } ul#menu li a.golf span { background-position:-135px -61px; } ul#menu li a.pro span { background-position:-219px -61px; } ul#menu li a.events span { background-position:-338px -61px; } ul#menu li a.member span { background-position:-432px -61px; } ul#menu li a.bistro span { background-position:-580px -61px; } ul#menu li a.contact span { background-position:-672px -61px; } and my generic html markup is <div class="container_16"> <!-- Navigation Start --> <div class="grid_16"> <ul id="menu"> <li><a href="#" class="shel"><span></span></a></li> <li><a href="#" class="golf"><span></span></a></li> <li><a href="#" class="pro"><span></span></a></li> <li><a href="#" class="events"><span></span></a></li> <li><a href="#" class="member"><span></span></a></li> <li><a href="#" class="bistro"><span></span></a></li> <li><a href="#" class="contact"><span></span></a></li> </ul> </div> <div class="clear"></div> </div> And I use jquery animations to roll over the images. $(function() { $("ul#menu span").css("opacity","0"); $("ul#menu span").hover(function () { $(this).stop().animate({ opacity: 1 }, "slow"); }, function () { $(this).stop().animate({ opacity: 0 }, "slow"); }); });

    Read the article

  • Hiding tables that have no data to display.

    - by Kinyanjui Kamau
    Hi Guys, I have this css styling and was wondering what I need to change in order to collapse/hide html tables that are empty. The style: <style> #search_settings { position:relative; height:25px; width:500px; } #users_table_results { border-collapse:separate; empty-cells:hide; } #events_table_results { border-collapse:separate; empty-cells:hide; } #establishments_table_results { border-collapse:separate; empty-cells:hide; } </style> My HTML: <div id="search_settings"> <table width="500" border="0"> <tr> <td height="20" class="heading_text_18">Search results</td> </tr> </table> <table id="users_table_results" max-width="500" name="users" border="0"> <tr> <td width="50" height="50"><a href="#profile.php"><img src="Images/<?php echo $row_result_users['picture_thumb_url']; ?>" border="0" height="50" width="50"/></a></td> <td width="150" class="ordinary_text_12"><?php echo $row_result_users['user_first_name']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_result_users['user_last_name']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_result_users['username']; ?></td> </tr> </table> <table id="events_table_results" width="500" name="events" border="0"> <tr> <td width="50" height="50"><a href="#profile.php"><img src="Images/<?php echo $row_event['event_thumb_url']; ?>" border="0" height="50" width="50"/></a></td> <td width="150" class="ordinary_text_12"><?php echo $row_event['event_name']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_event['event_venue']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_event['event_date']; ?></td> </tr> </table> <table id="establishments_table_results" width="500" name="establishments" border="0"> <tr> <td width="50" height="50"><a href="#profile.php"><img src="Establishment_Images/<?php echo $row_establishment['establishment_thumb_url']; ?>" border="0" height="50" width="50"/></a></td> <td width="150" class="ordinary_text_12"><?php echo $row_establishment['establishment_name']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_establishment['location_name']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_establishment['establishment_pricing']; ?></td> </tr> </table> </div> I would want it such that if there are no results for my events table, the table does not show(there is no blank space between search results where event results should be because border=0). Can you hide entire tables?

    Read the article

  • JQuery works on JsFiddle but not in project

    - by DanielNova
    Here is the JsFiddle I created: http://jsfiddle.net/ShHVy/ Everything works fine - different data is displayed in the column row to the right as I wish.. However, even having this exact code in my Project won't make it work The page in question is a popup view and it looks like this: <style type="text/css"> .highlighted { background-color: Orange; color: White; } </style> <script> var chosen = []; $("td").click(function () { var idx = $(this).index() + 1; $("td:nth-child(" + idx + ")").removeClass("highlighted"); $(this).addClass("highlighted"); chosen[idx] = $(this).parent("tr").index(); }); var data = { "Differdange": ["Differdange 1", "Differdange 2", "Differdange 3", "Differdange 4"], "Dippach": ["Dippach 1", "Dippach 2", "Dippach 3", "Dippach 4", ] }; function pushData(id, col) { $("#datachange table td:nth-child(" + 2 + ")").each(function (i, v) { $(this).html(data[id][i]) }); } $(function () { $("#datachange td").click(function () { var idx = $(this).index() + 1; $("td:nth-child(" + idx + ")").removeClass("highlighted"); $(this).addClass("highlighted"); pushData($(".highlighted").html(), 2); }); }); </script> <html> <head><title>Table Data Change</title></head> <body id="datachange" class="demo"> <table> <thead> <tr> <th>ID</th> <th>DATA</th> </tr> </thead> <tbody> <tr> <td>Differdange</td> <td></td> </tr> <tr> <td>Dippach</td> <td></td> </tr> <tr> <td>Dippach</td> <td></td> </tr> <tr> <td>Differdange</td> <td></td> </tr> </tbody> </table> </body> </html> Can anyone tell me why this small piece of JQuery doesn't work on mine (it's nothing to do with libraries as the top "td" function works 100% fine)

    Read the article

  • Cant center dropdown menu

    - by sonicboom
    I have a dropdown below ive creaeted, but im having troulbe centering the the menu. Ive tried to put <center> tags around it and also set the ul to margin auto 0 but its not working. Is there anything im missing? <style type="text/css"> ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; } ul li { display: block; position: relative; float: left; } li ul { display: none; } ul li a { display: block; text-decoration: none; color: #ffffff; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #1e7c9a; margin-left: 1px; white-space: nowrap; } ul li a:hover { background: #3b3b3b; } li:hover ul { display: block; position: absolute; } li:hover li { float: none; font-size: 11px; } li:hover a { background: #3b3b3b; } li:hover li a:hover { background: #1e7c9a; } </style> </head> <body> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Graphic Design</a></li> <li><a href="#">Logo Design</a></li> <li><a href="#">Blog Design</a></li> </ul> </li> <li><a href="#">Projects</a> <ul> <li><a href="#">This is a project</a></li> <li><a href="#">So is this</a></li> <li><a href="#">and this</a></li> <li><a href="#">don't forget this too</a></li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">Support</a></li> <li><a href="#">Quote</a></li> <li><a href="#">General Enquiry</a></li> </ul> </li> </ul> I went ahead and put it on jsfiddle Here

    Read the article

  • Drop down list in menu disappears before able to click

    - by user1834770
    I've had quite a search through forums looking for a solution for this, but since I don't know coding I'm not sure what applies to me and what doesn't. So, apologies if this is an often solved problem, but I'll greatly appreciate your help! After much trial and error, I've managed to get a drop down list of pages on my navigation bar; however, when I go to click on a sub-page, the entire menu disappears. I've read through other similar problems where there has been an issue with a margin that's too big, but I think my margins are set to '0'. The blog is at: http://swirlstwirlsblog.blogspot.com.au/ I haven't got content in the sub pages but there are there and linked in the html/javascript widget. I've also looked at it in Chrome, Mozilla, and Safari and it's the same issue. I'm also not sure if this is a javascript, css, or html problem, so please be kind in your responses--I'm only new! Thanks so much to anyone able to help me on this. Here's the script I used in the Widget: <ul id="jsddm"> <li><a href="http://swirlstwirlsblog.blogspot.com.au/">Home</a> <li><a href="http://swirlstwirlsblog.blogspot.com.au/search/label/sparkles">Sparkles</a> </li> <li><a href="http://swirlstwirlsblog.blogspot.com.au/search/label/friendship">Friendship</a> </li> <li><a href="http://swirlstwirlsblog.blogspot.com.au/search/label/humour">Humour</a> </li> <li><a href="">About</a> <ul> <li><a href="http://swirlstwirlsblog.blogspot.com.au/p/about_16.html">Us</a></li> <li><a href="http://swirlstwirlsblog.blogspot.com.au/p/contributers.html">Contributors</a> </li> <li><a href="http://swirlstwirlsblog.blogspot.com.au/p/advertising.html">Advertising</a> </li> <li><a href="http://swirlstwirlsblog.blogspot.com.au/p/privacy-policies.html">Privacy</a></li> <li><a href="http://swirlstwirlsblog.blogspot.com.au/p/contact.html">Contact</a></li> </ul> </li> </li></ul> And here's the html code I put in the template: <pre>#jsddm { margin: 0; padding: 15px; z-index:1000000000; position:relative; } #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial; } #jsddm li a { display: block; white-space: nowrap; margin:1px 3px; padding: 5px 10px; border-right: 1px color: eeeeee; text-shadow: #ffffff 0 1px 0; color: #363636; font-size: 15px; font-family: crushed; text-decoration: none; vertical-align: middle; } #jsddm li a:hover { background: #C8C8C8; } #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; } #jsddm li ul li { float: none; display: inline; } #jsddm li ul li a { width: auto; background: #ffffff; } #jsddm li ul li a:hover { background: #eeeeee; }</pre>

    Read the article

  • New line (in the code) after <li> element breaking layout

    - by BT643
    Weirdly, I've never come across this issue before, but I've just started making a site and the top navigation isn't playing nicely. I want a small amount of white space between each menu item, but when I have new lines between my <li> elements and my <a> elements in my IDE (Netbeans), the white space disappears, yet it looks fine if I have <li><a></a></li> all on the same line. I was always under the impression html ignored white space in the code. I've checked for any weird characters causing problems in other text editors and can't find anything. Here's the code... Like this the menu looks correct but code looks ugly (I know it looks fine when it's this simple, but I'm going be adding more complexity in which makes it look awful all on one line): <ul id="menu"> <li><a href="#">About</a></li> <li class="active"><a href="<?php echo site_url("tracklist"); ?>">Track List</a></li> <li><a href="<?php echo site_url("stats"); ?>">Stats</a></li> <li><a href="#">Stats</a></li> </ul> Like this the menu looks wrong but code looks fine: <ul id="menu"> <li> <a href="#">About</a> </li> <li class="active"> <a href="<?php echo site_url("tracklist"); ?>">Track List</a> </li> <li> <a href="<?php echo site_url("stats"); ?>">Stats</a> </li> <li> <a href="#">Stats</a> </li> </ul> Here's the css: #menu { float: right; } #menu li { display: inline-block; padding: 5px; background-color: #932996; border-bottom: solid 1px #932996; } #menu li:hover { border-bottom: solid 3px #FF0000; } #menu li.active { background-color: #58065e; } I'm sure it's something simple I'm doing wrong... but can someone shed some light on this for me? Sorry for the lengthy post (my first on stackoverflow).

    Read the article

  • Coloring even heighten columns

    - by verror
    I try to set different a background colors for left and right columns and to maintain the same height. So I set a background color for outer wrapper ("container" div) so it will set a color to rightBar. But this didn't work. Online Demo I want it to work on all browsers. Markup: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test</title> </head> <body> <div class="contentcontainer"> <div class="container"> <div class="mainBar"> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> </div> <div class="rightBar"> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> <p>BAR Text BAR Text BAR Text</p> </div> </div> </div> </body> </html> CSS: body { font-family: Verdana,Tahoma,Arial, "Trebuchet MS" ,Sans-Serif,Georgia,Courier, "Times New Roman" ,Serif; margin: 0px; padding: 0px; background: repeat-x scroll center bottom #C4DAE9; text-align:center; } .contentcontainer { } .container { margin-left: auto; margin-right: auto; margin-top:5px; width: 99%; text-align: left; background-color:Gray; clear:both; } .mainBar { width:70%; float:left; background-color:White; } .rightBar { width:30%; float:left; }

    Read the article

< Previous Page | 181 182 183 184 185 186 187 188 189 190 191 192  | Next Page >