Search Results

Search found 11663 results on 467 pages for 'css designs'.

Page 10/467 | < Previous Page | 6 7 8 9 10 11 12 13 14 15 16 17  | Next Page >

• CSS and jQuery slider height/positioning question

  - by wilwaldon

  TEST SITE If you look at the example above the slider on the right has 2 images. The first one is smaller than the second. The second is around 500px high. What I'm looking to do is expand the slider vertically depending on the height of the images inside. I believe the js is setting the height of the image when it is called from the server and I can't find a way to override it with the CSS. Any help would be very appreciated. Thank you!

  Read the article

• css to display three coloumn content

  - by arpymastro

  I am trying to get three column output using <div> for each. Right now my div on the left is lined properly even the middle one, but when I try to put right it is just clipping down. CSS /* left div */ #left-sidebar, #right-sidebar { width:15%; height:700px; float: left; padding-left: 15px; padding-top: 20px; } /* middle div */ #mid-content { width:75%; padding-left: 30px; padding-top: 20px; } /* right div */ #right-sidebar { float:right; }

  Read the article

• CSS file pathing problem

  - by Alan Harris-Reid

  Hi there, When designing a HTML template in my favorite editor (TextPad at the moment) I can view my code in a browser by pressing F11 or the appropriate toolbar button. I have my common css rules in a separate file so my HTML contains the code: <link rel="stylesheet" href="commoncss.css" type="text/css"> This works when the .css file is in the same folder as the .html file, or if I fully path the .css file in the href property, eg. ///c:/mycssfolder/commoncss.css However, in a 'live' situation I want the .css file to reside in a common folder which is accessible from a number of .html files (eg. href='css/commoncss.css', where the css folder is configured at web-server level). How can I achieve this design vs. live dilemma without copying css file to all .html folders (and all the maintenance headaches that comes with it)? I am using Python 3.1 with Jinja2, but I guess this problem is applicable across any language and template-engine. Any help would be appreciated. Alan

  Read the article

• CSS Trouble, Why does it move itself?

  - by Patrick

  Hello! I am stuck on the CSS part, am helping a friend to implement one thing on her webpage. Its a dropdown menu and i got everything working the way i want it to. My problem is that it moves itself to the beginning of the row? http://gazet.se/TestPages/Test.aspx Its just below the logo and as you can see, its on the correct line but not in the correct position (should be between the purple "Nyhetsbrev" and the black "Experthörnan"-images, but it ends up on the beginning of the row instead? Any ideas?

  Read the article

• CSS selector for grouped iterations

  - by snaken

  Hi, I have a number of elements that i want to loop through as groups. Consider this HTML: <input class="matching match-1" /> <input class="matching match-1" /> <input class="matching match-2" /> <input class="matching match-2" /> <input class="matching match-2" /> <input class="matching match-3" /> <input class="matching match-3" /> // etc I want a CSS selector that would allow me to loop through these as groups so there would be - using this example - 3 iterations of the loop (one for match-1, one for match-2 and one for match-3). The 1,2,3 etc is a variable used for grouping but this is not fixed so it cannot rely on hard coding of these values. Is this even possible? I'll be using jQuery or prototype not that that should matter really. Thanks

  Read the article

• CSS size transition to stay inside parent div

  - by IlyaD

  I want to have an image frame that when I hove over it the image inside will zoom in a little (I am using size transition), but the frame will stay the same size. What happens now that even if the frame has a fixed width and height it is stilled zoomed with the image HTML: <div class="img-wrapper"> <img class="thumbnail" src="http://placekitten.com/400/200"> </div> and CSS .img-wrapper { width: 400px; } .thumbnail { width: 400px; } .thumbnail { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .thumbnail:hover { width: 500px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } http://codepen.io/pen/KCJny

  Read the article

• Use some CSS properties in many selectors without editing HTML or using JS

  - by OrB

  CSS: .bananaTrans { -moz-transition : all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; transition : all 1s ease-in-out; } .bananaClass { color: yellow; } HTML: <div class="bananaClass">Banana Banana Banana</div> The objective is to make every element that has class "bananaClass" inherit the properties of "bananaTrans" without editing the HTML or using JavaScript. It ("bananaTrans") don't need exactly to be a class, it's just a bunch of properties to be used amongst other selectors.

  Read the article

• Altering CSS for nav bar images to accomodate IE

  - by Kim

  My horizontal nav bar is populated with images for the links that are coming from one image that includes all the sub-images; each nav item image is identified by the pixel location within the larger image. This works perfectly fine in Firefox and Safari, but in IE, all of the images are misplaced too low within the nav bar (can only barely see the tops of the words). Two questions: How do I fix this in the css so it is back-compatible with the more recent versions (and current versions) of IE Do I need a separate IE stylesheet? Thanks!

  Read the article

• How to maximize a floating div width when one div is removed or hidden?

  - by Maju

  I have two div columns sidebar(left) and page-content(right). I toggle removing and adding 'sidebar' using jquery but unable to maximize '#page-content' to take up the empty space when sidebar is removed.I tried removing 'margin-left:250px;' but the #page-content is going to the bottom. In short i want Toggle before | sidebar | page-content | Toggle after | page-content                | but it happens like | sidebar | | page-content                | Please help. Here is the css and jquery used. Thanx css #sidebar { float:left; width:185px; color:#333; padding:25px 25px; } #page-content { margin-left:250px; padding:25px 35px 25px 25px; color:#333; } jQuery $(document).ready(function() { $('a#side-toggle').click(function() { $('#sidebar').toggle(400); return false; }); });

  Read the article

• css - set max-width for select

  - by Patrick

  I have a form with a drop down list of venues and a submit button. They are supposed to be on the same line, but since the list of venues is dynamic, it could become too long and push the button down. I was thinking of setting a max-width property to the select, but I'm not clear whether this will work in all browsers. Do you have any suggestions on a workaround? form action="http://localhost/ci-llmg/index.php/welcome/searchVenueForm" method="post" class="searchform"><select name="venue"> <option value="0" selected="selected">Select venue...</option> <option value="1">venue 0</option> <option value="2">club 1</option> <option value="3">disco 2</option> <option value="4">future test venue</option> </select> <input type="submit" name="" value="Show venue!" class="submitButton" /> </form> css: .searchform select { max-width: 320px; } .searchform input.submitButton { float: right; }

  Read the article

• Positioning Layers and text gradients with css

  - by Kenji Crosland

  I'm a CSS newbie trying to get some text gradients going on. I tried this code here but it didn't work for me, most likely because the h1 object is nested within a #header div. I imagine there's something to do with layers that I don't know about. Either I get a gradent block that is in front of everything or it's not appearing at all. In this particular instance this code makes a big gradient bar appear in front of everything: #header { clear:both; float:left; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#080E73 url(../images/header-background.png) repeat-x left 0px; width:100%; max-height: 175px; color: #080E73; } #header h1 { margin-bottom: 0; color: #000; position: relative; } #header h1 span { background:url(../images/headline-text.png) repeat-x; display: block; width: 100%; height: 100%; position: absolute; } Here is the HTML (I'm using ruby on rails hence the notation) <div id="header"> <% unless flash[:notice].blank? %> <div id="notice"><%= flash[:notice] %></div> <% end %> <%= image_tag ("header-image.png") %> <h1><span></span>Headline</h1> <strong>Byline</strong> ... #navbar html... </div> I tried playing with z-index but I couldn't come up with any good results. Any ideas?

  Read the article

• Tricky CSS Layout

  - by Meep3D

  So I am making a website with quite a problematic layout. There are four corner images TL, TR, BL and BR indicated by black blocks. The dark orange area is the main content (to a width of 960px), with the outside area denoted by the green arrow as the browser window. See diagram: The top image represents the site at its narrowest possible - it shouldn't be allowed to be narrower than this (960px) if it is larger than the defined area there should be no scrollbars. The bottom two images represent different widths of browser. The bottom left and right black blocks (images) should be at the bottom left and right of the screen at all times, unless the width falls to 960px, in which case the BL and BR images should poke into the main area slightly. If the site is shrunk to, say 200px, the BR image should not still be poking in the right corner. At this point I don't really care about it working exactly in IE6 (I can get it roughly working) but I can't even figure out how to do it fully without Javascript or extremely experimental CSS. Currently I am using absolutely positioned div's which sort of work, but don't work quite right. I think I'd be willing to accept a bit of JS if there is no other way but I'd rather not. Answer very appreciated!

  Read the article

• CSS background-images and Z-Index problem

  - by dscher

  Hope someone has an easy answer on this. I have a header image which is just a 75px high gradient with a fade on the bottom. I have it set as the background image on my header and I want to throw in a left-sidebar on my page. There is a transparency on the header image and when I have my sidebar I can't get it to sit behind the header. You can see in this screenshot: link text The green sidebar won't "sit" behind the header. I have the header z-index set to 99 and the sidebar to 1. I tried the reverse to make sure I didn't mix up my numbers but that didn't work. Both are absolutely positioned. I'm attaching their CSS selectors in the hopes someone has an easy answer. Am sure I'm missing something basic: div.header { z-index: 99; background: transparent; background-image: url(images/header_bg.png); position: absolute; height: 85px; width: 100%; font-family: Helvetica, Verdana, Arial, sans-serif; } div#leftsidebar { height: 400px; border-right-style: dashed; border-right-width: 1px; z-index: -1; margin-top: 75px; width: 200px; position: absolute; background-color: #66ff66; } Thanks.

  Read the article

• horizontal table layout using css

  - by fusion

  instead of the usual vertical table data layout something like this: i'd like to display it like this in css: any ideas? my php/html code: <div class="center_div"> <table> <tr> <th>Author</th> <th>Quotes</th> <th>Arabic</th> <th>Reference</th> </tr> <?php while ($row= mysql_fetch_array($result)) { ?> <tr> <td width="150"><?php h($row['vAuthor']) ?></td> <td><?php h($row['cQuotes']) ?></td> <td><?php h($row['cArabic']) ?></td> <td><?php h($row['vReference']) ?></td> </tr> <?php } ?> </table> </div></div>

  Read the article

• CSS : z-index failed to make popup container ?

  - by justjoe

  i got this css stylesheet code #nav li ul { position: absolute; visibility: hidden; float: none; top: 42px; left: 0px; width: 150px; margin: 0; padding: 5px 10px 6px 10px; z-index: 10000; border: 1px solid #C0ACB2; border-bottom-width: 2px; border-bottom-color: #AF9DA3; border-top: 0; background-color: #fff; opacity: 0.97; } #nav li:hover ul, #nav li.iehover ul { visibility: visible; } i want to make every #nav to be hidden and then displayed when cursor hover around it. But the problem is everytime is show, it's overlapped by other div. it's seem z-index is not working to make the #nav li ul becoming the front container. i'm testing it in firefox and flock.

  Read the article

• css positioning

  - by bsreekanth

  Hello, I have uploaded a part of my screen below (link: http://yfrog.com/0d30127380p) It is part of a forum, so there are elements above and below it. The "Response Req.. Date" has a label, a date picker, and two drop down select control for time. I tried setting the width of the datepicker element, and a right margin so that the time selectors would position next to it. But it always sit below it. I'm not good in css positioning, so any suggestion would be highly appreciated. <div class="wrapper "> <label for="responseRequiredDate"> Response Required Date <span class="indicator">*</span> </label> <input type="hidden" name="responseRequiredDate" value="struct" /><div class="datetimepicker"> <div class="datePicker"> </div> <script> ...</script> <div class="timepicker"><select .... </div> </div> the date picker insert a script tag, would that cause a problem. probably not.

  Read the article

• CSS position absolute doesn't work in IE7

  - by Syom

  i have the following simple script, but it doesn't work in IE7 <div id="content"> <div id="left"></div> <div id="right"></div> <div id="bottom_menus">any text here...</div> </div> and CSS #content { margin: 0 auto; padding: 0; width: 980px; background-color: lime; height: 800px; overflow: hidden; position: relative; } #left { width: 275px; float: left; background-color: olive; margin: 0px 0px -5000px 0; padding: 0 0 5000px 0; min-height: 400px; } #right { width: 704px; float: left; background-color: red; margin: 0px 0px -5000px 0; padding: 0 0 5000px 0; min-height: 400px; } #bottom_menus { background-color: orange; height: 15px; position: absolute; bottom: 0px; width: 100%; } why position absolute doesn't work? thanks in advance

  Read the article

• Variable-width inline underline effects in CSS

  - by sidereal

  I need to simulate the look of a typical paper form in CSS. It consists of a two-column table of fields. Each field consists of a field name (of variable width) followed by an underline that continues to the end of the column. The field might be populated, in which case there is some text centered above the line, or it may be blank. If that isn't clear, he's a rough idea in manky ASCII art: Name: _______Foo_______ Age: _____17______ Location: __Melbourne__ Handedness: _Left_ (except that the underline would continue under any text) To implement the underline without text, I assume I should use a border-bottom rather than a text-decoration: underline. Additionally, I need the bordered element to take up the full available space. Both of those argue for a block-level element. However, I can't find any way to get the block level element (either a div, an li, or a span set to display: block or inline-block) to remain on the same line as the label. As soon as I give it a width: 100%, it newlines. I've tried various combinations of floats, and I'm not inclined to do anything ridiculous with absolute positioning. Any recommendations?

  Read the article

• Blueprint CSS & Boks: strange behavior with prepend and append in FF and Chrome

  - by Shyam

  Hi, I am working a bit with Blueprint CSS framework and I stumbled upon Boks. I am pretty unfamiliar with the BPCSS framework, but it seems that when using prepend and append, Firefox and Chrome (both) are not liking the input. I generated the code from Boks and for my newbe eye-sight, I can't directly see what went wrong in the export. Even though the span-sizes are correct, they are mutated :S Please help me! <div class="container showgrid"> <!-- first row --> <div class="span-3 prepend-2" id="bar-menuitems"> </div> <div class="span-6 prepend-4" id="banner-logo"> </div> <div class="span-3 prepend-4 append-2 last" id="bar-socialmedia"> </div> <!-- second row --> <div class="clear span-20 prepend-2 append-2 last" id="pane-graphics"> </div> <!-- third row --> <div class="clear span-5 prepend-2" id="banner-xx1"> </div> <div class="span-5" id="banner-xx2"> </div> <div class="span-5" id="banner-xx3"> </div> <div class="span-5 append-2 last" id="banner-xx4"> </div> <!-- last row --> <div class="clear span-6 prepend-9 append-9 last" id="bar-footer"> </div> </div>

  Read the article

• css div positioning question

  - by SoulieBaby

  Hi all, I have three divs with the following css: div#container { width: 780px; } div#photos { width: 780px; height: 300px; } div#content { position: relative; top: -106px; width: 780px; } <div id="container"> <div id="photos">photos are here</div> <div id="content">content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer</div> </div> My problem is that because I've set the content layer to be top:-106px there's a big gap underneith, when I wanted the "container" div to end immediately after the "content" div. I tried setting margin-bottom: -106px on the "container" div but that didn't change the height of the "container" div.. The "content" div will have varied height as it's obviously for text, etc. Is there any way of making this work? Thanks in advance :)

  Read the article

• Attempting to use CSS top property on a SWF file, but it's not working

  - by ben

  Hey guys, I'm trying to position my Flex app so that it's further down the page, but I can't get it working. It's still appearing in the top left. Here is the HTML, any help would be greatly appreciated! <html lang="en"> <head> <title>Page</title> <style type="text/css"> body { margin: 0px; overflow: hidden; } #swf {top:50%;} </style> <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <script type="text/javascript"> swfobject.embedSWF( "link_to_the_swf", "swf", "100%", "100%", "10.0.0", "playerProductInstall.swf", flashVars, params ); </script> </head> <body scroll="no"> <div id="swf"> <p>Alternative content</p> </div> </body> </html>

  Read the article

• CSS: "float:left" doesn't work as expected

  - by Patrick

  hi, I want to display 2 columns of images using "float:left", and I dunno why the 3rd image is on the right. See screenshot:http://dl.dropbox.com/u/72686/imagesFloat.png See HTML: <div class="field-item odd"> <img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%202.png" title=""><br> <span>description1</span> </div> <div class="field-item even"> <img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%203.png" title=""><br> <span>description2</span> </div> <div class="field-item odd"> <img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%204.png" title=""><br> <span>description3</span> </div> <div class="field-item even"> <img alt="" class="filefield-imagecache-galleryImage" src="http://localhost/bernardi/sites/default/files/Picture%205.png" title=""><br> <span></span> </div> see CSS: .field-field-image .odd { padding-right:20px; } .field-field-image .even { padding-left:20px; } .field-field-image .field-item { float:left; } thanks

  Read the article

• Animate opacity and delay transition CSS

  - by user1876246

  I have a series of DIVS, I want DIV 1 & DIV 3 to fade out and then DIV 2 and DIV 4 to slide left to take their place, 1 second after the fade. So far I have gotten them to fade out but I cannot figure out how to delay the sliding. Follows is my CSS, ignore the lack of vendor prefixes for this question please. .slide-show{ -webkit-animation: fadeShow 0.25s 1 normal forwards ease-out; animation: fadeShow 0.25s 1 normal forwards ease-out; visibility: visible; } .slide-hide{ -webkit-animation: fadeHide 0.25s 1 normal forwards ease-out; animation: fadeHide 0.25s 1 normal forwards ease-out; //I need the following to be delayed for 1 second visibility: hidden; position: absolute; } @keyframes fadeHide{ 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeShow{ 0% { opacity: 0; } 100% { opacity: 1; } }

  Read the article

• 7 Web Design Tutorials from PSD to HTML/CSS

  - by Sushaantu

  Some time back when I was looking for some tutorials to create a website from scratch i.e. the process from designing the PSD to slice it and CSS/XHTML it, then not many quality results appeared. But that was like almost an year back and a lot of water has flown down the river Thanes since [...]

  Read the article

• TinyFluidGrid – a clean and lightweight css framework

  - by Guy Harwood

  I've been using the 960 Grid system for a while on some of my personal projects and if like me you are no css ninja its convenient for sidestepping the usual nightmare of a good cross browser layout, and allows you to move on to the nitty gritty code and functionality. I just stumbled across a new layout generator that looks rather snazzy and has the functionality to back it up.  TinyFluidGrid generates exactly that – a tiny fluid grid! Worth a look.

  Read the article

< Previous Page | 6 7 8 9 10 11 12 13 14 15 16 17  | Next Page >