css layouts - Page 22 - Developer IT

Need help from CSS purist!

- by Darcy

I'm beginning to use CSS more and more but I'm not sure if I'm using it as intended in all cases. I have classes named things like 'box' that will wrap the content inside it with a border, which seems like good CSS to me. On the other hand I have classes like 'margin-right-5' and 'float-left' that sets the css to margin-right: 5px and float:left respectively. I'm wondering if this is good practice. Then in my markup I'd do something like: <div class="box float-left margin-right-5">  </div> Sometimes I may want to float right or not have a margin at all and still use the 'box' class, so I use several classes in order to make the css more flexible. Am I destroying the principles of CSS?

Read the article

CSS-Friendly Menu adapter that emits the same markup as .NET 4.0

- by Joe

For .NET 2.x/3.x there exists a CSS-Friendly Adapter on CodePlex that emits markup for an ASP.NET Menu Control as an ul. The .NET 4.0 Menu control will also emit an ul, but the CSS class names are different from those emitted by the CSS-Friendly Adapter 1.0 on CodePlex. In the interests of having a single version of CSS for .NET 2/3/4 sites, I want to create a version of the CSS-Friendly menu adapter that emits the same markup as the .NET 4.0 Menu control. Before doing so, I thought I'd ask here to see if it's already been done, so I don't reinvent the wheel. Anyone?

Read the article

Serving CSS from a static domain

- by Saif Bechan

I want to serve my css and images from a static cookieless domain. Now my problem is how to point to the images from within my css files. I don't want to program my domain hard within the css file, for example: http://static.com/image.png I would rather have a variable pointing to the the image, so it works for every static domain i use. What is the best way for achieving this. Should i run the whole css file trough php and add the static domain in front of all the png references. A downside in this is that i have to place the whole css in html. Or is there another more optimized way of doing this.

Read the article

Changing all CSS styles with a property via Jquery

- by Joe

On a page I include some css eg: <style type='test/css'> .myBox{ color:#000000; border:#FFFFFF; padding:4px; } .myBox2{ color:#000000; border:#FFFFFF; padding:4px; } </style> I want to then change the "color" property set within both myBox and myBox2 in jquery, without knowing the actual name (myBox, myBox2) of the css style. In otherwords, I want to update ALL css styles on the page where color = certain value, and then also update border where = certain value. An example (not valid code) might be: $("all css [color:#000000]").html("#FF0000"); How could this be possible using jquery?

Read the article

Should all presentational images be defined in CSS?

- by Grant Crofton

I've been learning (X)HTML & CSS recently, and one of the main principles is that HTML is for structure and CSS for presentation. With that in mind, it seems to me that a fair number of images on most sites are just for presentation and as such should be in the CSS (with a div or span to hold them in the HTML) - for example logos, header images, backgrounds. However, while the examples in my book put some images in CSS, they are still often in the HTML. (I'm just talking about 'presentational' images, not 'structural' ones which are a key part of the content, for example photos in a photo site). Should all such images be in CSS? Or are there technical or logical reasons to keep them in the HTML? Thanks, Grant

Read the article

save jQuerry changes to css file on server

- by KrisRogo

I'm developing a system that allows for changing some of the css parameters without accessing the code. To achieve that I have jQuerry objects like sliders and draggers which influence how the site looks user side, eg. $("#MainContent").css("width", "55%");. Now I need a way to append those changes to a .css file on the server. Let me clarify that this is sort of a CMS system, and only administrator of the system would have this option, not the visitors of user-end site. I realise that .css is one for all users. Ideal solution would connect to the server every time user makes a change, and replace only one line of css code. But I have no idea how to do it efficiently or if it at all possible.

Read the article

What is the REGEX of a CSS selector

- by user421563

I'd like to parce a CSS file and add before every CSS selector another selector. From: p{margin:0 0 10px;} .lead{margin-bottom:20px;font-size:21px;font-weight:200;line-height:30px;} I'd like: .mySelector p{margin:0 0 10px;} .mySelector .lead{margin-bottom:20px;font-size:21px;font-weight:200;line-height:30px;} But my CSS file is really complex (in fact it is the bootstrap css file) so the regex should match all CSS selectors. For now I have this regex: ([^\r\n,{};]+)(,|{) and you can see the result here http://regexr.com?328ps but as you can see there are a lot of matches that shouldn't match for example: text-shadow:0 -1px 0 rgba(0, matchs positive but it shouldn't Does someone have a solution ? THX

Read the article

how to combine widget webapp framework with SEO-friendly CSS and JS files

- by Ali

Hi guys, I'm writing a webapp using Zend framework and a homebrew widget system. Every widget has a controller and can choose to render one of many views if it chooses. This really helps us modularize and reconfigure and reuse the widgets anywhere on the site. The Problem is that the views of each widget contain their own JS and CSS code, which leads to very messy HTML code when the whole page is put together. You get pockets of style and script tags everywhere. This is bad for a lot of different reasons as I'm sure you know, but it has a profound effect on our SEO as well. Several solutions that I've been able to come up with: Separate the CSS and JS of every view of every widget into its own file - this has serious drawbacks for load times (many more resources have to be loaded separately) and it makes coding very difficult as now you have to have 3-4 files open just to edit a widget. combine the all the widget CSS into a single file (same with JS) - would also lead to a massive load when someone enters the site, mixes up the CSS and the JS for all widgets so it's harder to keep track of them, and other problems that I'm sure you can think of. Create a system that uses method 1 (separate CSS and JS for every widget), when delivering the page, stitches all CSS and JS together. This obviously needs more processing time and of course the creation of such a system, etc. My Question is what you guys think of these solutions or if there are pre-existing solutions that you know of (or any tech that might help) solve this problem. I really appreciate all of your thoughts and comments!! Thanks guys, Ali

Read the article

CSS Table Formatting to a HTML Table

- by Rurigok

I am attempting to provide CSS formating to two HTML tables, but I cannot. I am setting up a webpage in HTML & CSS (with the CSS in an external sheet) and the layout of the website depends on the tables. There are 2 tables, one for the head and another for the body. They are set up whereas content is situated in one middle column of 60% width, with one column on each side of the center with 20% width each, along with other table formatting. My question is - how can I format the tables in CSS? I successfully formatted them in HTML, but this will not do. This is the CSS code for the tables - each table has the id layouttable: #layouttable{border:0px;width:100%;} #layouttable td{width:20%;vertical-align:top;} #layouttable td{width:60%;vertical-align:top;background-color:#E8E8E8;} #layouttable td{width:20%;vertical-align:top;} The tables in the html document both each have, in respective order, these elements (with content inside not shown): <table id="layouttable"><tr><td></td><td></td><td></td></tr></table> Does anyone have any idea why this CSS is not working, or can write some code to fix it? If further explanation is needed, please, ask.

Read the article

Client-side user custom CSS single file for overriding multiple domains

- by Cawas

This is for using in Safari, though it could probably be used on Firefox as well. In Chrome you have to add a plugin anyway (which generally allow for custom CSS per domain), and Opera already allows this to be done without needing any CSS. But while it's for customizing on the client-side, it's also a pure CSS question. So I'm using no plugins here. So, again, I got a custom CSS code (easily) working for all domains. Now I want to get specify CSS code for each domain. All with just 1 CSS file that's being loaded by Safari. Over the web and googling, I've found two ways to supposedly do this, but none actually worked. They're both documented on userstyles.com: @-moz-document domain("your-domain.com") { }. This would be perfect, since I can have several tags like that and just choose which style will be loaded for which domain. It just doesn't work. @namespace is quite confusing and I've tried every variation I could think of. None worked.

Read the article

Eliminate horizontal scrolling in div in favor of horizontal scrolling in browser window

- by Casey Flynn

I have a div, set to 800px wide, that will automatically scroll horizontally if the browser window is resized to < 800px. The behavior I would like, is to have the browser window scroll instead of the div. It would seem simple but for some reason I'm getting hung up on it. Any ideas? The page in question: http://www.caseyflynn.com/game/ The div CSS: div#main_container { border: 1px solid #FFF; width:800px; margin-left:auto; margin-right:auto; padding:0px; background-color:#FFF; overflow:hidden; } The BODY CSS: html, body { background-color:#000; border:0px; margin:0px; padding:0px; font-family : Arial, Helvetica, sans-serif; font-size : 62.5%; overflow:auto; } I'm assuming anyone looking at this will have the ability to see the HTML and the CSS. Thanks!

Read the article

Can't Prevent Nested Div's from Overflowing when using Percent Sizes and Padding in CSS?

- by viatropos

I want to be able to layout nested divs with these properties: width: 100% height: 100% padding: 10px I want it to be such that, the children are 100% width and height of the remaining space after padding is calculated, not before. Otherwise, when I have a document like the below example, the child makes the scrollbars appear. But the scrollbars are not the main issue, the fact that the child stretches beyond the width of the parent container is. I can use all position: absolute declarations, but that doesn't seem right. Here is the code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=7"> <title>Liquid Layout</title> <style> body, html { width:100%; height:100%; margin:0; padding:0; background-color:black; } #container { position:relative; width:100%; height:100%; background-color:red; opacity:0.7; } #child1 { position:relative; width:100%; height:100%; padding:10px; background-color:blue; } #nested1 { position:relative; background-color: white; width:100%; height:100%; } </style> </head> <body> <div id="container"> <div id="child1"> <div id="nested1"></div> </div> </div> </body> </html> How do I make it so, using position:relative or position:static, and percent sizes, the percents size the children according to the parent's width/height minus padding and margins? Do I have to resort to position:absolute and left/right/top/bottom? Thanks for the help, Lance

Read the article

CSS Vertical Spacing Issue (Margin?) - Vertical Space Between Two Divs

- by Sootah

I've got the layout of my site mostly done. On the domain I'm testing this layout on - http://networkgenius.org/ - there is a vertical space separating the content-wrapper div and the menu div. I have the margins set to 0px for the vertical spacing, and this is the only area that is separated like it is. I'd like the white content area to be pressed up right against the bottom of the menu, so that none of the body's background shows between them. What am I doing wrong?

Read the article

Can I use the CSS :visited pseudo class on 'wildcard' links?

- by rabidpebble

Let's say I have a site with multiple links as follows: www.example.com/product/1 www.example.com/product/2 www.example.com/product/3 I also append tracking info to links from time to time so that I can see how my site is being used, e.g, if somebody visits the products page from the product browser I would set a ref parameter: www.example.com/product/1&ref=pb www.example.com/product/2&ref=pb www.example.com/product/3&ref=pb The problem with this is that if the user visits a link of the first type and then views a link of the second type then the :visited pseudo class doesn't seem to apply because the browser only seems to match on exact URLs. Is there any way to have "wildcards" apply to links in this sense, so that when the user sees either the first type or the second type of link that it is highlighted? Note: I cannot change this "ref" architecture; it is inherited.

Read the article

CSS Jquery - When I change background color the text becomes fuzzy in IE6 ?

- by Gublooo

Hey guys I was playing around with this script of auto scrolling text. You can check out the code here: http://jqueryfordesigners.com/simple-jquery-spy-effect/ Then I changed the background color to white - and all the text started looking fuzzy and messed up - If I change it to any light color - it appears all messy. This is the portion where I changed the background color in the code: #sidebar { color: grey; background: #FFF; float:left; margin:0 0 24px; padding:15px 10px 10px; width:500px; } I have noticed this in one other site even on IE7. Any idea why a simple change in background color messes up the text. Thanks

Read the article

In CSS, how to not float a 300px wide Div to the next line?

- by Jian Lin

Say, there is a bar that is styled at the bottom of the viewport, using position: fixed; bottom: 0; left: 0; width: 100%; height 50px; overflow: hidden and then there are 4 Divs inside it, each one floated to the left. Each Div is about 300px wide or can be more (depending on the content) Now, when the window is 1200 pixel wide, and we see all 4 Divs, but when the window is resize to be 1180 pixel wide (just 20 pixels less), then the whole 300px wide Div will disappear, because it is "floated" to the next line. So how can this be made so that, the Div will stay there and showing 280px of itself, rather than totally disappear? By the way, white-space: nowrap won't work as that probably has to do with not wrapping inline content. I was thinking of putting another Div inside this Div, having a fixed width of 1200px or 2000px, so that all Divs will float on the same level in this inner Div, and the outer Div will cut it off with the overflow: hidden. But this seems more like a hack... since the wide of all those Divs can be dynamic, and setting a fixed width of 1200px or 2000px seems like too much of a hack.

Read the article

is there a rule in CSS that says class="one two" vs class="two one" and the second will override the

- by Jian Lin

Right now, there seems to be no such effect. Example: both divs are orange in color on Firefox <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> .one { border: 6px dashed green } .two { border: 6px dashed orange } </style> </head> <body> <div class="one two"> hello world </div> <div class="two one"> hello world </div>

Read the article

CSS renders Input in firefox mac diffrent then firefox PC. can i detect OS via javascript? or maybe

- by adardesign

I have a input[type="text"] the that has padding applied to it behaves differently in firefox PC then on a mac. Any hacks that can target firefox PC? These styles are what its seen on firefox PC firebug .searchContainer input { border-color:#7C7C7C #C3C3C3 #DDDDDD; border-style:solid; border-width:1px; color:#555555; float:left; height:12px; padding:3px; } These styles are what its seen on firefox Mac firebug .searchContainer input { border-color:#7C7C7C #C3C3C3 #DDDDDD; border-style:solid; border-width:1px; color:#555555; float:left; height:12px; padding:3px; } No other styles are applied to these inputs. Here is a snapshot of FF PC http://tinyurl.com/2wdxmq5 Here is a snapshot of FF mac http://tinyurl.com/2u7f2nl any suggestions?

Read the article

Why can't I put a jquery-ui progressbar inside a div with fixed position?

- by Matthew

I started the source from this progressbar example, and it works fine. My only change was to set the width of the progressbar to "20%". <!DOCTYPE html> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#progressbar").progressbar({ value: 37 }).css({ width : "20%"}); }); </script> </head> <body style="font-size:62.5%;"> <div id="progressbar"></div> </body> </html> I then put the progressbar inside another div, and used css to fix that div in the upper-right-hand corner. <!DOCTYPE html> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <style type="text/css"> #testContainer { position : fixed; top : 6; right : 6; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#progressbar").progressbar({ value: 37 }).css({ width : "20%"}); }); </script> </head> <body style="font-size:62.5%;"> <div id="testContainer"> <div id="progressbar"></div> </div> </body> </html> The progressbar becomes a slim vertical line on the left side of the screen. What am I doing wrong? I'm new to web development in general, and jquery in particular, so please forgive me if this is a stupid question.

Read the article

how can I change top-margin the right way if multiple css class assigned?

- by Radek

I assigned these classes menu second_menu menu_about_author to ul so the html code looks like <ul class="menu second_menu menu_about_author"> I wanted this ul to have the same properties like menu and second_menu and then I wanted to move the menu_about_author little bit down. I did so by .menu_about_author { margin-top:40px; } but it didn't work any idea why the margin-top:40px; is crossed? the link to the image is [1]: http://img153.imageshack.us/img153/882/58daeef0c3c846e4a8d6321.png

Read the article

Using CSS how do you move text down when a floated image is above a certain width?

- by Peter Kelley

I have a text block with an image floated left. The images can be of variable width. If the image is say greater than 2/3 the width of the block I want the text to drop down below the image but if not I want it beside the image. All of this is in Drupal if that matters.

Read the article

CSS/Jquery How can I display a div directly under button?

- by user342391

I have a button that when hovered displays a div. How can I postion this div to appear directly under the button when displayed??? <script type="text/javascript"> $(document).ready(function(){ $(".plans").hover(function() { $("#planssubnav").show("slow"); }, function(){ $("#planssubnav").hide("slow"); }); }); </script> <a href="/plans" style="font-size:14px;" class="plans fg-button fg-button-icon-right ui-state-default ui-corner-all"><span class="ui-icon ui-icon-circle-triangle-s"></span>Plans</a> <div id="planssubnav" style="display:none"> <h1> content</h1> </div>

Read the article

CSS: position:absolute inside position:relative, but not affecting parent?

- by JP

Read the article

how can i achieve this 100% height effect with divs rather than tables in pure css?

- by significance

Read the article

My webpage ignores changes in CSS file

- by Pavel

No matter what I change in my .css file, the page remains the same - what's more, neither changing the link tag so that it points to another .css file nor deleting it completely makes no difference. Other changes in html code are applied. The sourcecode of the webpage shows everything as it should be. This behavior started when I redirected the link tag from previous file to the one I use now (plus there have been some changes in the tag while this problem occured, to test the behavior of my webpage); changes in neither file affect the page. For the first time when this happened, this was caused by copies of head tag in included chunks of code (for header, left menu etc. - their head part overrode the head part of the main page) and the problem was solved by removing these redundant heads from these files. But it happened again when I changed the link tag for the next time. I couldn't find any head parts in my included files, but the problem lasts (only solution I can see now is to delete the included files and copy the code directly to the file, but this would mean lots of redundant code). How can I solve this problem, so that my page response to changes in .css files without increasing redundancy? How to ensure that I can change the link to .css file just on one place with no such problems? Do I have to unload the CSS file somehow? I saw this problem both in Firefox and in Chrome. I use PSPad to write the code, just in case it would play role. EDIT: I have cleared browser cache now, and I changed the link to .css files from one to another before, but nothing helped. Now I accept the best answer saying the problem is in caching and I start a related question to find out how to solve the caching issue. If the other question's answers would say that in this case I can be sure that problem isn't in caching (very unlikely, but fail of ordinary methods of caching-problems-solving is unlikely too), I'd update this question and start searching for other possible problems, but now the message seems to be clear: when webpage ignores changes in .css files, caching is to blame.

Search Results

Search found 11788 results on 472 pages for 'css layouts'.

Page 22/472 | < Previous Page | 18 19 20 21 22 23 24 25 26 27 28 29 | Next Page >

- by Darcy

- by Joe

- by Saif Bechan

- by Joe

- by Grant Crofton

- by KrisRogo

- by user421563

- by Ali

- by Rurigok

- by Cawas

- by Casey Flynn

- by viatropos

- by Sootah

- by rabidpebble

- by Gublooo

- by Jian Lin

- by Jian Lin

- by adardesign

- by Matthew

- by Radek

- by Peter Kelley

- by user342391

- by JP

- by significance

- by Pavel

< Previous Page | 18 19 20 21 22 23 24 25 26 27 28 29 | Next Page >