Search Results

Search found 11217 results on 449 pages for 'css postioning'.

Page 177/449 | < Previous Page | 173 174 175 176 177 178 179 180 181 182 183 184  | Next Page >

  • 3 column html template - content overflows though there is clear both and height is 100%

    - by MeltingDog
    I have 3 divs within a wrapper: <div id="wrapper"> <div id="leftbar"> Lorem ipsum dolar sit amet </div><!--LEFTBAR--> <div id="middle"> Lorem ipsum dolar sit amet </div><!--middle--> <div id="rightbar"> Lorem ipsum dolar sit amet </div><!--RIGHTBAR--> </div><!--wrapper--> Both 'leftbar' and 'middle' are floating left, whilst 'rightbar' is floating right. 'wrapper' has height:100%; clear:both; set. However, if there is a large amount of text or content in 'middle' it overflows the 'wrapper' div. I am struggling to figure out why this is occurring. My CSS is: #wrapper { width: 1000px; height: 100%; margin:auto; padding: 30px; margin-top: 40px; background-color:#FFF; color:#000; border: 2px solid #828fc4; clear:both; } #leftbar { float:left; width: 150px; min-height: 450px; padding: 5px; } #middle { float:left; height: 100%; width: 580px; padding-left: 20px; padding-right: 20px; border-right: 1px dotted #2B308C; border-left: 1px dotted #2B308C; } #rightbar { float:right; width: 200px; min-height: 450px; padding: 5px; } Any advice is appreciated! EDIT: here is the issue on a test server: http://host.pixelframe.net.au/~pptestco/index.php?id=20

    Read the article

  • Need help with tweaking a Dropdown with three options, user selects one - a hidden div appears with correct fields

    - by Jack
    Hello Again, I posted a question on here and got an answer within minutes I'm hoping the wizards on here can help me again. Okay so I'm using a script I found online to try and add this function to a shopping cart form. Here's the setup. I have a payment method dropdown with Visa, Mastercard and Bank Withdrawal as the options. For the credit cards I have one hidden div with a certain set of fields, and for the bank I have another hidden div. Each of the divs have named ID's - #payCredit and #payBank The css for both have margin: 0px and display: none; Here's a peice of javascript I used successfuly on a shipping address checkbox `function toggleLayer( whichLayer ) { var elem, vis; if( document.getElementById ) // this is the way the standards work elem = document.getElementById( whichLayer ); else if( document.all ) // this is the way old msie versions work elem = document.all[whichLayer]; else if( document.layers ) // this is the way nn4 works elem = document.layers[whichLayer]; vis = elem.style; // if the style.display value is blank we try to figure it out here if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined) vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none'; vis.display = (vis.display==''||vis.display=='block')?'none':'block'; }` I was hoping I could change it slightly to meet my needs. Here's the dropdown <label>Payment Method:</label> <select name="payment" id="payment" class="dropdown3" style="width:8em"> <option selected="selected">Select</option> <option value="Visa" onclick="javascript:toggleLayer('payCredit');">Visa</option> <option value="MasterCard" onclick="javascript:toggleLayer('payCredit');">Mastercard</option> <option value="Direct" onclick="javascript:toggleLayer('payBank');">Direct Withdraw</option> </select></li> The current result is that it kinda works. I can open the dropdown and select Visa and it appears, if I select Visa again it disappears, if I select Visa and then select bank, both appear. You can see what i'm working on here - http://test.sharevetcare.com/bestfriends/cart3.html

    Read the article

  • ASP.NET Grid with CSS in Rows and Columns

    - by user1089173
    I have the following code List<Department> depts = new List<Department>(); Department.Add(new Department() { DNo = 1, DName = "Accounting", DFloor="6" }); Department.Add(new Department() { DNo = 2, DName = "FInance", DFloor="3" }); I want to bind this data to a GridView, so that it outputs the following. Observe the classes on each th and tr. How can I achieve this in ASP.NET? <thead> <tr> <th class="DNo">DNo</th> <th class="DName">DName</th> <th class= "DFloor">DFloor</th> </tr> </thead> <tr> <td class="DNo">1</td> <td class="DName">Accounting</td> <td class="DFloor">6</td> </tr> <tr> <td class="DNo">2</td> <td class="DName">FInance</td> <td class="DFloor">3</td> </tr>

    Read the article

  • Jquery Text Slide in Effect

    - by user3718016
    I want to make text animation like this slide in from left. There are three text fields Sports Cargo Bag $14 Sale $25 I want these text to be set from jquery and slide in from the left like this link. This is my code JsFiddle html <div id="mainContainer"> <div id="logdo"> <img src="http://i.share.pho.to/7346a9ca_o.gif"/> </div> <div id="images"> <img id="introImg" src="http://i.share.pho.to/9064dfe4_o.jpeg"/></div> <div id="headlineText"> <p id="headline1Txt" ></p> <p id="headline2Txt" ></p> <p id="headline3Txt" ></p> </div> <button class="btn btn-primary" id="ctaBtn" type="button">SHOP NOW</button> </div> css * { margin:0; padding:0; } #mainContainer{ text-align: center; width:160px; height:600px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:5px solid #BACAE4; overflow: hidden; position: fixed; } #images{ position:absolute; top:200px; left:3px; right:1286px; Width:130px; height:152px; } #introImg{ position:absolute; top:40px; left:7px; right:11px; } #headlineText p { text-align: center; position: absolute; top:60px; left:-120px; Width:120px; height:269px; line-height:1.0; overflow:hidden; } #ctaBtn{ position:absolute; top:540px; left:26px; right:0px; Width:106px; height:28px; }

    Read the article

  • allignment issue of div tag

    - by Quasar the space thing
    I am trying to create a web page where on click of a button I can add div tags. What I thought to do was that I'll create two div tags within a single div so that over all presentation will be uniform and similar to a table having two columns and multiple rows and the first column contains only label's and second column will contain textbox. Here is the JS file : var counter = 0; function create_div(type){ var dynDiv = document.createElement("div"); dynDiv.id = "divid_"+counter; dynDiv.class="main"; document.body.appendChild(dynDiv); question(); if(type == 'ADDTEXTBOX'){ ADDTEXTBOX(); } counter=counter+1; } function question(){ var question_div = document.createElement("div"); question_div.class="question"; question_div.id = "question_div_"+counter; var Question = prompt("Enter The Question here:", ""); var node=document.createTextNode(Question); question_div.appendChild(node); var element=document.getElementById("divid_"+counter); element.appendChild(question_div); } function ADDTEXTBOX(){ var answer_div = document.createElement("div"); answer_div.class="answer"; answer_div.id = "answer_div_"+counter; var answer_tag = document.createElement("input"); answer_tag.id = "answer_tag_"+counter; answer_tag.setAttribute("type", "text"); answer_tag.setAttribute("name", "textbox"); answer_div.appendChild(answer_tag); var element=document.getElementById("divid_"+counter); element.appendChild(answer_div); } Here is the css file : .question { width: 40%; height: auto; float: left; display: inline-block; text-align: justify; word-wrap:break-word; } .answer { padding-left:10%; width: 40%; height: auto; float: left; overflow: auto; word-wrap:break-word; } .main { width: auto; background-color:gray; height: auto; overflow: auto; word-wrap:break-word; } My problem is that the code is working properly but both the divisions are not coming in a straight line. after the first div prints on the screen the second divisions comes in another line. How can I make both the div's come in the same line ? Thank You. PS : should I stick with the current idea of using div or should I try some other approach ? like tables ?

    Read the article

  • Tooltip arrow right

    - by Tabatha M
    I'm trying to make this tooltip arrow point to the right towards the link. CSS .tooltipside { position: relative; cursor: help; display: inline-block; outline: none; } .tooltipside span { visibility: hidden; position: absolute; bottom: -22px; z-index: 999; width: 52px; margin-left: -63px; padding: 2px; border: 1px solid #80a7ba; background-color: white; -moz-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; text-shadow: 0 1px 0 rgba(255,255,255,.4); } .tooltipside:hover { border: 0; /* IE6 fix */ } .tooltipside:hover span { visibility: visible; } .tooltipside span:before, .tooltipside span:after { content: ""; position: absolute; z-index: 1000; bottom: -7px; left: 50%; margin-left: -8px; border-top: 8px solid #80a7ba; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 0; } .tooltipside span:before { border-top-color: #ccc; bottom: -8px; } ? The html is <a href='#' class='tooltipside'><span> <img src='http://cdn2.iconfinder.com/data/icons/32pxmania/misc_57.png' border='0' width='52' height='52'></span>LINK</a> TEST TEST TEST</b>? It currently points down in the center of the tooltip I need it to point right towards the link. How would I do this? Thanks

    Read the article

  • JQuery validation using is() and multiple CSS classes

    - by Alex
    Hi Folks, Trying to debug something that basically .trim()'s, .val()'s and .length's a textarea input as HTML below (truncated): <form id="Kontaktanfrage" method="post" action="tests/testform/"> ... <textarea cols="50" rows="8" id="el_12" name="FORM[Kontaktanfrage][el_12]" title="Ihre Nachricht: *" class="textarea required"></textarea> ... </form> JavaScript: function validateField(formId, fieldId) { if (fieldId) { var element = "form#"+formId+" input#"+fieldId; var fieldValue = jQuery.trim(jQuery(element).val()); var fieldLength = fieldValue.length; var fieldError = ""; if ($(element).is('.textarea.required') && fieldLength == 0) { fieldError = "error message"; } } } The above if check is never true. Using JQuery: 1.4.1. Having seen other examples online, I can't see what the difference should be. Feel free to test it in FireBug at (http://www.initiat.de/tests/testform/). Any help appreciated, can't see what I'm doing wrong.

    Read the article

  • jQuery center multiple dynamic images in different sized containers

    - by JVK Design
    So I've found similar questions but none that answer all the questions I have and I know there must be a simple jQuery answer to this. I've got multiple images that are being dynamically placed in their own containing div that have overflow:hidden, they need to fill their containing divs and be centered(horizontally and vertically) also. The containing divs will be different sizes as well. So in short: multiple different sized images fill and center in containing div. containing divs will be different sizes. will be used multiple times on a page. Hopefully this image helps explain what I'm after. Click here to view the image. HTML I'm using but can be changed <div class="imageHolder"> <div class="first SlideImage"> <img src="..." alt="..."/> </div> <div class="second SlideImage"> <img src="..." alt="..."/> </div> <div class="third SlideImage"> <img src="..." alt="..."/> </div> </div> And the CSS .imageHandler{ float:left; width:764px; height:70px; margin:1px 0px 0px; } .imageHolder .SlideImage{ float:left; position:relative; overflow:hidden; } .imageHolder .SlideImage img{ position:absolute; } .imageHolder .first.SlideImage{ width:381px; height:339px; margin-right:1px; } .imageHolder .second.SlideImage{margin-bottom:1px;} .imageHolder .second.SlideImage, .imageHolder .third.SlideImage { width: 382px; height: 169px; } Ask me anything if this doesn't make sense, thanks in advance

    Read the article

  • aligning divs in <td> to top of <td>

    - by twitter
    update: added jsfiddle: http://jsfiddle.net/WgzgF/11/ I have a table with a bunch of <td>. Each td has a div .tdcont which is like a wrapper of all content in that td. In .tdcont, I have 2 groups of divs .alwaystop and .below-at. <td class="table-td"> <div class="tdcont"> <div class="alwaystop"> <div class="at1">at1</div> <div class="at2">at2</div> <div class="at3">at3</div> </div> <div class="below-at"> <div class="bat1">bat1</div> <div class="bat2">bat2</div> <div class="bat3">bat3</div> </div> </div> </td> The problem I'm having is that alwaystop is supposed to align itself to the top border of the cell and below-at is supposed to come right under it like this _____________________________________________________ at1 at2 at3 | at1 at2 at3 | at1 at2 at3 | bat1 bat2 bat3 | bat1 bat2 bat3 | bat1 bat2 bat3 | small image here | big image here | | | is taking lots | | | of space | | __________________|_________________|________________| What I'm finding is that alwaystop and below-at center themselves vertically like you see in this fiddle http://jsfiddle.net/WgzgF/11/ so if one of the adjacent cells in this row is long, alwaystop centers itself to this row's height like this _____________________________________________________ | at1 at2 at3 | | | bat1 bat2 bat3 | | at1 at2 at3 | big image here | at1 at2 at3 | bat1 bat2 bat3 | is taking lots | bat1 bat2 bat3 | small image here | of space | | __________________|_________________|________________| What I want to do is make alwaystop always start from the top of the cell regardless of adjacent cells' heights, then the below-at comes under it. How can I do this? I should add that I have the content of alwaystop is floated left, so is the content of below-at, so they're supposed to be like 2 rows inside that td. .at1, .at2, .at3{ float:left; } .bat1, .bat2, .bat3{ float:left; } The css for alwaystop and below-at is empty. I tried a whole bunch of stuff like vertical-align and absolute positioning, but nothing worked and I just gave up and deleted them. .alwaystop{ } .below-at{ }

    Read the article

  • Customize SharePoint list using InfoPath2010 form Part4

    - by ybbest
    Customize SharePoint list using InfoPath2010 form Part1 Customize SharePoint list using InfoPath2010 form Part2 Customize SharePoint list using InfoPath2010 form Part3 In this post, I’d like to show you how to create print functionality in InfoPath for SharePoint list. The print functionality is provided out of box in InfoPath form library; however it is not available in SharePoint list. Here are the steps to create the print functionality.You can download the new form here. 1. Create print page in the list by first copy and paste the displayifs.aspx and rename the file to Printifs.aspx. 2. Open the page in the SharePoint designer and copy the following javascript to the PlaceHolderTitleAreaClass ContentPlaceHolder. <script type="text/javascript"> $(document).ready(function(){ $("[id^='Ribbon']").hide(); $(".s4-title").hide(); $("[id='s4-leftpanel']").hide(); $("[id='s4-ribbonrow']").hide(); $("[id='s4-titlerow']").hide(); $("[id='s4-titlerow']").css("height", "0px"); $("body").css("background-color", "white"); $("body").css("zoom", "135%"); $("[id='MSO_ContentTable']").css("margin-left", "0px"); $("[id='MT-BodyContent']").css("width", "900px"); $(".MT-BodyArea").css("width", "900px"); $("[id='MT-Layout']").css("width", "900px"); $(".ms-bodyareacell").css("width", "900px"); $(".s4-wpTopTable").css("border", "none"); $("[id$='XmlFormView']").css("margin-left", "-80px"); $("body").css("margin-top", "-30px"); $(":contains('CAPEX')").css("border", "5px solid #FFCC00"); window.print(); }); </script> 3. Open InfoPath form for the list and create a field called PrintLink 4. Set the default value of printLink that points to the print page I just created before with the query string id.You can download the formula for the default value here. 5. Add a new image that looks like Print button on the display view, then I can set the url to the Print link Field. (The reason I did not use button is that you cannot set the navigate url for the button). 6.Set the url of the image to the PrintLInk field. 7.Next , create the print view. 8. Copy the contents from the display view to print view 9. Finally, go to the printifs.aspx and edit the InfoPath web part to set the view to PrintView. 9. Republish you form you will see the form as shown below 10. If you click the Print button, you will see the print page and print dialog,you can also add the company logo in the print page using css as well. 11.To deploy the customization,you can use the backup and restore content database approach , you can get more details from my previous blog post here.

    Read the article

  • jquery ui autocomplete positioning wrong

    - by mattRo55
    using jquery ui 1.8 trying autocomplete Everything works apart from that the ui-menu isn't positioned under my input element, but rather in the top left corner. Has anyone come across this problem? Here's my html: <div id="search"> <div id="searchFormWrapper"> <form method="post" name="searchForm" id="searchForm" action="/searchresults"> <label for="searchPhrase" id="searchFor"> Search for</label> <input name="searchPhrase" id="searchPhrase" type="text" /> <label for="searchScope" id="searchIn"> in</label> <select name="searchScope" id="searchScope"> <option value="">All Shops</option> ... </select> <input type="image" name="submitSearch" id="submitSearch" src="/images/buttons/search.gif" alt="Search ..." /> </form> <br class="clear" /> </div> </div> and here's my css: #search { width:100%; margin:0; padding:0; text-align:center; height:36px; line-height:36px; background:#666 url(/images/interface/info_bar_bg.gif) repeat-x top left; overflow:hidden; font-size:12px; } #searchFormWrapper { width:520px; height:36px; overflow:hidden; margin:auto; padding:0; } label#searchFor { display:block; float:left; width:80px; padding:0 5px 0 0; margin:0 0 0 0; text-align:right; } label#searchIn { display:block; float:left; width:20px; padding:0 5px 0 0; margin:0 0 0 0; text-align:right; } #searchPhrase { display:block; float:left; width:120px; margin:7px 0 0 0; padding:0; } #searchScope { display:block; float:left; width:120px; margin:7px 0 0 0; padding:0; } #submitSearch { display:block; float:left; margin:7px 0 0 10px; padding:0; } and here's my javascript: $(document).ready(function() { $("#searchPhrase").autocomplete( { source: "/search?json", minLength: 2 }); });

    Read the article

  • Validatation error "Value Error : background-position Too many values or values are not" How to so

    - by metal-gear-solid
    Why validation giving this error. How to solve? ul#navigation li#navigation-3 a.current Value Error : background-position Too many values or values are not recognized : -164px -164px -36px -164px -164px -36px This is error screen. CSS ul#navigation { height: 36px; left: 300px; list-style-image: none; list-style-position: outside; list-style-type: none; position: relative; top: 74px; width: 603px; } ul#navigation li { display: inline; } ul#navigation li a { height: 36px; float: left; text-decoration: none; } ul#navigation li a:link, ul#navigation li a:visited {font-family:Arial; color:#595959; font-size:1.1em; font-weight:bold } ul#navigation li a:hover, ul#navigation li a:active {color:#404040} ul#navigation li a span { display:block; float:left; padding-left:8px; padding-top:14px;} ul#navigation li#navigation-1 a { width: 53px; background: url(../images/menu-sprite.jpg) no-repeat 0px 0; } ul#navigation li#navigation-1 a:active, ul#navigation li#navigation-1 a:hover { background-position: 0px -36px; } ul#navigation li#navigation-1 a.current { background-position: 0px 0px -36px; } ul#navigation li#navigation-2 a { width: 111px; background: url(../images/menu-sprite.jpg) no-repeat -53px 0; } ul#navigation li#navigation-2 a:active, ul#navigation li#navigation-2 a:hover { background-position: -53px -36px; } ul#navigation li#navigation-2 a.current { background-position: -53px -53px -36px; } ul#navigation li#navigation-3 a { width: 78px; background: url(../images/menu-sprite.jpg) no-repeat -164px 0; } ul#navigation li#navigation-3 a:active, ul#navigation li#navigation-3 a:hover { background-position: -164px -36px; } ul#navigation li#navigation-3 a.current { background-position: -164px -164px -36px; } ul#navigation li#navigation-4 a { width: 100px; background: url(../images/menu-sprite.jpg) no-repeat -242px 0; } ul#navigation li#navigation-4 a:active, ul#navigation li#navigation-4 a:hover { background-position: -242px -36px; } ul#navigation li#navigation-4 a.current { background-position: -242px -242px -36px; } ul#navigation li#navigation-5 a { width: 88px; background: url(../images/menu-sprite.jpg) no-repeat -342px 0; } ul#navigation li#navigation-5 a:active, ul#navigation li#navigation-5 a:hover { background-position: -342px -36px; } ul#navigation li#navigation-5 a.current { background-position: -342px -342px -36px; } ul#navigation li#navigation-6 a { width: 96px; background: url(../images/menu-sprite.jpg) no-repeat -430px 0; } ul#navigation li#navigation-6 a:active, ul#navigation li#navigation-6 a:hover { background-position: -430px -36px; } ul#navigation li#navigation-6 a.current { background-position: -430px -430px -36px; } ul#navigation li#navigation-7 a { width: 77px; background: url(../images/menu-sprite.jpg) no-repeat -526px 0; } ul#navigation li#navigation-7 a:active, ul#navigation li#navigation-7 a:hover { background-position: -526px -36px; } ul#navigation li#navigation-7 a.current { background-position: -526px -526px -36px; }

    Read the article

  • How to make jQuery animate upwards

    - by ivannovak
    Hey there, I've got some jquery running fairly well, howeever when I hover over the element in question, the bottom expands downward which is not unexpected but is not the desired effect. I'd like the bottom of the element to remain stationary with the top of the element expanding upwards. If you'd like to see what I currently have, you may navigate to http://demo.ivannovak.com/mobia/ Any help would be greatly appreciated. Here is my code: HTML <div class="button"> <h3>Product Quality</h3> <div>Duis tristique ultricies velit sit amet adipiscing.</div> <img src="<?php bloginfo('template_url'); ?>/assets/img/INgravatar_subernova.png" alt="placeholderImage" height="70" /> <p><a href="#">Learn More &gt;</a></p> <div class="bottom"></div> </div> CSS div#buttons {} div#buttons .button { background: url(assets/img/bg_blue_top.jpg) #206094 no-repeat top left; padding: 5px 10px 0; width: 209px; float: left; margin-right: 5px; position: relative; height: 50px; } div#buttons .button h3 { font-weight: normal; color: #fff; text-transform: uppercase; } div#buttons .button:hover div, div#buttons .button:hover img { /* display: block; */ } div#buttons .button div { width: 120px; padding-right: 20px; float: left; color: #bbb; display: none; } div#buttons .button img { float: right; display: none; } div#buttons .button p { position: absolute; bottom: 10px; left: 10px; z-index: 9; font-weight: bold; text-transform: uppercase; } div#buttons .button p a { color: #7bc143; text-decoration: none; } div#buttons .button p a:hover { text-decoration: underline; } div#buttons .button .bottom { background: url(assets/img/bg_blue_bottom.jpg) no-repeat bottom left; height:26px; position: absolute; display: block; width: 229px; right: 0px; padding:0; bottom: 0; } jQuery $(document).ready(function() { $('.button').mouseenter(function() { $(this).closest('div').animate({ height: "150px", }, 400, "swing"); }); $('.button').mouseleave(function() { $(this).closest('div').animate({ height: "50px", }, 400, "swing"); }); });

    Read the article

  • 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

  • Pyramind of DIVs

    - by sebastian
    Hi there, I'm trying to build a pyramid that's made of 4 DIVs. The layout looks like this: ------ | #1 | ------ ---------------- | #2 | #3 | #4 | ---------------- Moreover I need 3 additional DIVs starting at the center DIV (#3) and containing either #1, #2 or #3 additionally. These DIVs are used the build a sliding effect with jQueryUI later on. It's supposed to look like #1, #2 and #4 slide out of #3. The margin between the DIVs is supposed to be 2 pixels. I also want the whole block to be centered. Even with display: inline; and position: absolute; enabled on the visible and invisible DIVs I can't get the layout right. I used some negative margins and when it looked ok for the first time I saw that my top DIV was positioned outside of the html body. I suppose there is a more simple and elegant way to achieve what I want. Thanks in advance Sebastian Here's what I've got so far: HTML: <div id="centerbox"> <div id="main">main</div> <div id="rail_top"> <div id="top">top</div> </div> <div id="rail_left"> <div id="left">left</div> </div> <div id="rail_right"> <div id="right">right</div> </div> </div> CSS: #centerbox { height: 602px; width: 904px; margin-top: 640px; margin-left: auto; margin-right: auto; } /* blue */ #main { background-color: #33F; height: 300px; width: 300px; margin: 2px; z-index: 9999; position: absolute; display: inline; margin-left: 302px; } /* green */ #top { background-color: #3F0; height: 300px; width: 300px; z-index: 1; position: absolute; display: inline; } /* pink */ #left { background-color: #F06; height: 300px; width: 300px; z-index: 1; } /* orange */ #right { background-color: #FC0; height: 300px; width: 300px; z-index: 1; margin-left: 302px; } #rail_top { height: 602px; width: 300px; display: inline; position: absolute; margin-top: -300px; margin-left: 302px; } #rail_left { height: 300px; width: 602px; float: left; position: absolute; display: inline; margin-top: 2px; } #rail_right { height: 300px; width: 602px; float: right; position: absolute; display: inline; margin-left: 302px; margin-top: 2px; }

    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

  • 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

  • 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

< Previous Page | 173 174 175 176 177 178 179 180 181 182 183 184  | Next Page >