css and html - Page 16 - Developer IT

CSS :hover not working

- by Babiker

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type='text/css'> #body{ margin:0px; } #headerDiv{ background-color:#e0e2eb; } .header_innerHeaderDivs{ border:solid 1px gray; display:inline; font:normal 11px tahoma; color:black; } .header_innerHeaderDivs:hover{ padding:4px; } </style> </head> <body id='body'> <div id='headerDiv'> <div class='header_innerHeaderDivs'>Comapny</div> <div class='header_innerHeaderDivs'>Edit</div> <div class='header_innerHeaderDivs'>Inventory</div> <div class='header_innerHeaderDivs'>Logout</div> </div> </body> </html>

Read the article

Convert HTML + CSS to PDF with PHP?

- by cletus

Ok, I'm now banging my head against a brick wall with this one. I have an HTML (not XHTML) document that renders fine in Firefox 3 and IE 7. It uses fairly basic CSS to style it and renders fine in HTML. I'm now after a way of converting it to PDF. I have tried: DOMPDF: it had huge problems with tables. I factored out my large nested tables and it helped (before it was just consuming up to 128M of memory then dying--thats my limit on memory in php.ini) but it makes a complete mess of tables and doesn't seem to get images. The tables were just basic stuff with some border styles to add some lines at various points; HTML2PDF and HTML2PS: I actually had better luck with this. It rendered some of the images (all the images are Google Chart URLs) and the table formatting was much better but it seemed to have some complexity problem I haven't figured out yet and kept dying with unknown node_type() errors. Not sure where to go from here; and Htmldoc: this seems to work fine on basic HTML but has almost no support for CSS whatsoever so you have to do everything in HTML (I didn't realize it was still 2001 in Htmldoc-land...) so it's useless to me. I tried a Windows app called Html2Pdf Pilot that actually did a pretty decent job but I need something that at a minimum runs on Linux and ideally runs on-demand via PHP on the Webserver. I really can't believe I'm this stuck. Am I missing something?

Read the article

Reuse classes in an id based css

- by C. Ross

I have a id based CSS file where I noticed I'm mostly repeating myself. What I'd like to do is specify that an item with an id follows a certain class + some other rules. For example: I'd like id id1 to have all the properties of class LinkButton applied as well as the value back-color: green. Is there a way to do this in the css file? Is there a better way to do what I'm looking at?

Read the article

Parse HTML with CSS or XPath selectors?

- by ovolko

My goal is to parse HTML with lxml, which supports both XPath and CSS selectors. I can tie my model properties either to CSS or XPath, but I'm not sure which one would be the best, e.g. less fuss when HTML layout is changed, simpler expressions, greater extraction speed. What would you choose in such a situation?

Read the article

JavaScript and CSS order

- by misha-moroshko

Hi, I have an HTML file which is linked to CSS file and also to JavaScript file. Is JavaScript executed first and then the CSS is applied, or vice versa ? Is there any way to change the order ? Thanks !

Read the article

Css simple style dont work on IE but yes in any other browser

- by DomingoSL

Hello guys, i have a simple css file called Titulos.css who contain this: h1 { font: 50px Tahoma, Helvetica, Arial, Sans-Serif; text-align: center; color: #111; text-shadow: 0px 2px 3px #555; } h2 { font: 14px Tahoma, Helvetica, Arial, Sans-Serif; text-align: center; color: #CCC; text-shadow: 0px 1px 2px #555; } h3 { font: 10px Tahoma, Helvetica, Arial, Sans-Serif; text-align: center; color: #CCC; } b1 { font: 16px Tahoma, Helvetica, Arial, Sans-Serif; color: #DDD; } b2 { font: 10px Tahoma, Helvetica, Arial, Sans-Serif; color: #F9F7ED; } .caja { width: 690px; height: 40px; background-color: transparent; border: 0px solid #000000; font-size:x-large; color: #222; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-weight: bold;" size="299"; } .style1 { text-align: right; } And a page who call this file like: <link rel="stylesheet" type="text/css" href="LIB/titulos.css" /> Later in this page im trying to use some of the styles like: <div id="todo" align="center" > <div id="cabeza" style="width:850px;height:100px"> </div> <div id="contenido" style="width:850px;height:420px;background-image: url(IMG/cuadro.png)" > <div id="titulo" style="width:765px;height:75px;padding-top: 18px;margin: auto;text-align: left;"> <b1>Bienvenido <b><?php echo($username); ?></b></b1><br> <?php $check = mysql_query("SELECT * FROM sms WHERE ref = '".$username."' ORDER BY fecha DESC LIMIT 0, 1") or die(mysql_error()); while($info = mysql_fetch_array( $check )) { echo("<b1> Tu ultimo mensaje enviado fue: </b1><b2>" . $info['texto'] . " enviado el " . $info['fecha'] . "</b2>"); That only a part of the code of course, the think is, Firefox and Chrome display the code above like this: that as you can see have the styles applied. But when i see the code from IE 8 (even 7 or 6) this is what you see: So, what do you think?

Read the article

HTML/CSS: Creating a centered div with a min-width

- by Alessandro Vernet

I'd like to have on my page a div which is centered and has a certain width, but which extends beyond that width if required by the content. I am doing this with the following: <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> .container-center { text-align: center; } .container-minwidth { min-width: 5em; display: inline-block; border: 1px solid blue; } </style> </head> <body> <div class="container-center"> <div class="container-minwidth"> a </div> </div> </body> </html> This works great on Firefox/Safari, but not on IE6, which doesn't understand the display: inline-block. Any advice on how to make this work on IE6 as well?

Read the article

Using <style> tags in the <body> with other HTML

- by Gagan

<html> <body> <style type="text/css"> p.first {color:blue} p.second {color:green} </style> <p class="first">Hello World</p> <p class="second">Hello World</p> <style type="text/css"> p.first {color:green} p.second {color:blue} </style> <p class="first">Hello World</p> <p class="second">Hello World</p> </body> </html> How is a browser supposed to render css which is non contiguous? Is it supposed to generate some data structure using all the css styles on a page and use that for rendering? Or does it render using style information in the order it sees?

Read the article

How do you deal with web designers who are too afraid to read and touch PHP code?

- by Lacrymology

I've been hired to make a website and am working with a designer (who happens to be the guy who is in contact with the client and hired me, so no, I can't kick his ass out =) ) who's too afraid to touch into the php code, and is too newbie in html and css to give me good enough models, so the work of today will be going through his new html model of a half-programmed page and removing s and changing classes and the such. Is there some kind of tool, or some better workflow in order to make this easier for both of us? maybe I'm dealing with this the wrong way altogether, I'm new to web development, and I don't know enough html/css (and he supposedly does) to have him just give me a graphic mock-up and do the whole thing, so what we're doing is he gives me a static html page that looks like he wants, and I put around it =) can anyone give me some advice on this?

Read the article

css: howto remove pseudo elements (afer,before, ...)

- by Thariama

I would like to use a switch for the layout of paragraph tags on a webpage. I use the after pseudoelement p:after {content: url("../img/paragraph.gif");} Now i need to remove this css code from the page. How can this be done easily (jquery is already used on the page)? (i do not want to include or remove files containing css)

Read the article

Website File and Folder Structure

- by Drummss

I am having a problem learning how proper website structure should be. And by that I mean how to code the pages and how folder structure should be. Currently I am navigating around my website using GET variables in PHP when you want go to another page, so I am always loading the index.php file. And I would load the page I wanted like so: $page = "error"; if(isset($_GET["page"]) AND file_exists("pages/".$_GET["page"].".php")) { $page = $_GET["page"]; } elseif(!isset($_GET["page"])) { $page = "home"; } And this: <div id="page"> <?php include("pages/".$page.".php"); ?> </div> The reason I am doing this is because it makes making new pages a lot easier as I don't have to link style sheets and javascript in every file like so: <head> <title> Website Name </title> <link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css" type="text/css"> <link rel="shortcut icon" href="favicon.png"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script> </head> There is a lot of problems doing it this way as URLs don't look normal ("?page=apanel/app") if I am trying to access a page from inside a folder inside the pages folder to prevent clutter. Obviously this is not the only way to go about it and I can't find the proper way to do it because I'm sure websites don't link style sheets in every file as that would be very bad if you changed a file name or needed to add another file you would have to change it in every file. If anyone could tell me how it is actually done or point me towards a tutorial that would be great. Thanks for your time :)

Read the article

iTunes style layout using CSS

- by Liam

What is the best way (using HTML/CSS) to create an iTunes-style layout with the following features: a left column with a fixed width but fluid height (scrollbars for overflow) (BLUE below) a main content column with fluid width and height (scrollbars for overflow) (RED below) a bottom right box with fixed width and height which remains stuck to the bottom of the browser? (GREEN below) Here is an example: I'm happy to use Javascript/JQuery if there really isn't a pure CSS solution. Thanks!

Read the article

Embedded CSS Media Queries Not Working

- by Greg

I am new to CSS media queries, and I was first trying to get pdf/mp3/mp4 buttons to get centered on this page whenever a mobile device is using it (http://www.mannachurch.org/portfolio-type/recycled-junk/). Keep in mind for that I am using a highly modified wordpress theme. So I tried experimenting to isolate this issue. However, I don't seem to have any control over using media queries and I can't even perform anything even on this simple HTML file: <!DOCTYPE html> <html> <head> <title>Title of the document</title> <style type="text/css"> body{background-color: blue;} @media only screen and (min-device-width : 599px) and (max-device-width : 600px) { body {background-color:black; } } </style> </head> <body> <p>This is an experiment<p/> </body> </html> What am I doing wrong?

Read the article

CSS 100 percent height body and element

- by Tim

I am having an issue making one of my elements 100% within an overall layout that is 100%. I have tried different positioning solutions and I either end up with hidden content the floats behind the footer at the bottom, or the content ends up going behind the footer, and carrys on after the footer. Here is what I have for the page layout. <!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" lang="en-US"> <head> <style> *{margin:0} html,body{margin:0; padding:0; height:100%} .wrapper{position:relative; margin:0 auto -200px; height:auto !important; height:100%; min-height:100%} .container{width:930px; margin:0 auto; text-align:left} .right{float:right; width:680px; background:#FFF; margin:60px 10px 0 0; padding:0} .left{float:left; width:240px} .content{padding:10px} .footer{position:absolute; width:100%} .footer,.push{height:200px} </style> </head> <body> <div class="wrapper"> left content footer </div> </body> </html> The layout for the page being 100% height and footer at the bottom works it just the div with the class name content that I would like to be 100% as well and push the footer further down if the content reaches the footer and not disappear. Any help most appreciated. http://img686.imageshack.us/img686/7725/screenshotbj.png

Read the article

Use jQuery to alter css for "html" and "*"

- by Chris

Apologies if this is incredibly easy but I want to be able to do the following in jQuery. Current CSS * { cursor: url('/web/resources/graphics/blank.cur'), pointer; } html { cursor: url('/web/resources/graphics/blank.cur'), pointer; } Desired CSS change (through jQuery only) * { cursor: url('/web/resources/graphics/blankDot.cur'), pointer; } html { cursor: url('/web/resources/graphics/blankDot.cur'), pointer; }

Read the article

Dynamic CSS Background URLs

- by 500ml

Consider this CSS Property: background: url(http://images.something.com/background.png) left top repeat-x; Is there a way to dynamically specify the URL being used in the external file (Meaning the URL is sort of automatically generated rather than hard-coded in the CSS file) ? Thanks.

Read the article

CSS IE Hover Effect - Overlapping Elements, Display:Block, and Crashes

- by Emtucifor

In a fairly simple page, I have some text appear on hover over some links, like a tooltip. To start with here's my test page I'm working with: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Tooltip Test Page</title> <style type="text/css"> html, body, form, table, tr, td, div, p, h1, h2, h3, h4, h5 { border:0; margin:0; padding:0; } body { margin:10px; } html, body, table { font-family:Arial, Helvetica, sans-serif; font-size:12px; } h1 { font-weight:bold; font-size:16px; } table {border-collapse:collapse;} td {padding:0 8px 0 0;} a.tooltip { z-index:24; text-decoration:none; cursor:default; position:relative; color:#000; display:block; width:100px; } a.tooltip span {display:none;} a.tooltip:hover, a.tooltip:active { z-index:25; color:; background:; /* the color and background actually don't matter for their values, it's just that these have to change for IE to apply this style properly. Leaving out the color or the background makes this fail in different ways. */ } a.tooltip:hover span, a.tooltip:active span { display:block; position:absolute; color:black; background-color:#FFFFCC; border:1px solid black; padding:1px; text-align:left; top:0; left:0; margin-top:-1px; } td span.s5 {color:#ff0000} td span.s6 {color:#0000ff} </style> <script type="text/javascript"> function labelSubmit(label) { document.getElementById('o').value=label; document.BackAt.submit(); } </script> </head> <body> <h1>tooltip Test Page</h1> <table> <tbody> <tr> <td><span class="s6">■</span> Name 3</td> <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6<span>Some very long tooltip text to demonstrate the problem by overlapping the cells below.</span></a></td> </tr> <tr> <td><span class="s6">■</span> Name 1</td> <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6</a></td> </tr> <tr> <td><span class="s6">■</span> Name 2</td> <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6<span>Some tooltip text</span></a></td> </tr> <tr> <td><span class="s6">■</span> Name 4</td> <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6</a></td> </tr> <tr> <td><span class="s5">■</span> Name 5</td> <td class="status"><a class="tooltip" href="" onclick="return false;">Status 5<span>More Notes</span></a></td> </tr> <tr> <td><span class="s6">■</span> Name 6</td> <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6<span>Yet more notes</span></a></td> </tr> </tbody> </table> </body> </html> The problem I'm experiencing is that text from other values shows through the tooltip text. Hover over the first row, second column to see the effect. There are a couple of things I'm trying to accomplish: Make the activation area for the hover wider, so hovering over some space to the right of "Status 6" calls up the tooltip (say, 100-150px total width of target). At first, when I was adding "display:block" to a.tooltip, IE was terminating on hover. I resolved that by removing width:14em from a.tooltip:hover. Styling the width of the hover event + display.block on the a element does BAD things. Change the width of the tooltip without changing the width of the column/parent element (so the tooltip can be wider than itso it takes up less vertical space). Options for making the tooltips change width with its contents up to a max width, at which point the lines wrap would be awesome, but probably impossible in IE. As soon as I put a width in place on a.tooltip, the portion of the tooltip that is above other rows than the hover source let text show through from those cells. Remove the width and you'll see that the text doesn't show through any more. The hover effect applies to the entire tooltip, so if the tooltip covers 3 rows, while moving the mouse downward, the next 2 rows won't activate because the cursor hasn't left the tooltip. Can the hover effect apply only to the initial element hovered over and not the tooltip itself so moving the mouse downward will show each tooltip in each row? It would be nice if the links could never be activated (they can't take the focus). I don't know if that's possible. Too bad IE doesn't support hover on any elements but links. Note: soon IE6 will be abandoned in favor of IE8. If it makes a big difference, then IE8 can be the target browser instead. Thanks for your help.

Read the article

SVG as CSS background for website navigation-bar

- by Irfan Mir

I drew a small (horizontal / in width) svg to be the background of my website's navigation. My website's navigation takes place a 100% of the browser's viewport and I want the svg image to fill that 100% space. So, using css I set the background of the navigation (.nav) to nav.svg but then I saw (whenI opened the html file in a browser) that the svg was not the full-width of the nav, but at the small width I drew it at. How can I get the SVG to stretch and fill the entire width of the navigation (100% of the page) ? Here is the code for the html file where the navigation is in: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Distributed Horizontal Menu</title> <meta name="generator" content="PSPad editor, www.pspad.com"> <style type="text/css"> *{ margin:0; padding:0; } .nav { margin:0; padding:0; min-width:42em; width:100%; height:47px; overflow:hidden; background:transparent url(nav.svg) no-repeat; text-align:justify; font:bold 88%/1.1 verdana; } .nav li { display:inline; list-style:none; } .nav li.last { margin-right:100%; } .nav li a { display:inline-block; padding:13px 4px 0; height:31px; color:#fff; vertical-align:middle; text-decoration:none; } .nav li a:hover { color:#ff6; background:#36c; } @media screen and (max-width:322px){ /* styling causing first break will go here*/ /* but in the meantime, a test */ body{ background:#ff0000; } } </style></head><body> <ul class="nav">  <li>  <a href="#">internet explorer 6-8</a></li> <li>  <a href="#">opera 10</a></li> <li>  <a href="#">firefox 3</a></li> <li>  <a href="#">safari 4</a></li> <li class="last">  <a href="#">chrome 2</a>    </li> </ul> </body></html> and Here is the code for the svg: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="321.026px" height="44.398px" viewBox="39.487 196.864 321.026 44.398" enable-background="new 39.487 196.864 321.026 44.398" xml:space="preserve"> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="280" y1="316.8115" x2="280" y2="275.375" gradientTransform="matrix(1 0 0 1 -80 -77)"> <stop offset="0" style="stop-color:#5A4A6A"/> <stop offset="0.3532" style="stop-color:#605170"/> <stop offset="0.8531" style="stop-color:#726382"/> <stop offset="1" style="stop-color:#796A89"/> </linearGradient> <path fill="url(#SVGID_1_)" d="M360,238.721c0,1.121-0.812,2.029-1.812,2.029H41.813c-1.001,0-1.813-0.908-1.813-2.029v-39.316 c0-1.119,0.812-2.027,1.813-2.027h316.375c1.002,0,1.812,0.908,1.812,2.027V238.721z"/> <path opacity="0.1" fill="#FFFFFF" enable-background="new " d="M358.188,197.376H41.813c-1.001,0-1.813,0.908-1.813,2.028 v39.316c0,1.12,0.812,2.028,1.813,2.028h316.375c1,0,1.812-0.908,1.812-2.028v-39.316C360,198.284,359.189,197.376,358.188,197.376z M358.75,238.721c0,0.415-0.264,0.779-0.562,0.779H41.813c-0.3,0-0.563-0.363-0.563-0.779v-39.316c0-0.414,0.263-0.777,0.563-0.777 h316.375c0.301,0,0.562,0.363,0.562,0.777V238.721z"/> <path opacity="0.5" fill="#FFFFFF" enable-background="new " d="M358.188,197.376H41.813c-1.001,0-1.813,0.908-1.813,2.028v1.461 c0-1.12,0.812-2.028,1.813-2.028h316.375c1.002,0,1.812,0.908,1.812,2.028v-1.461C360,198.284,359.189,197.376,358.188,197.376z"/> <g id="seperators"> <line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="104.5" y1="197.375" x2="104.5" y2="240.75"/> <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="103.5" y1="197.375" x2="103.5" y2="240.75"/> <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="105.5" y1="197.375" x2="105.5" y2="240.75"/> <line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="167.5" y1="197.375" x2="167.5" y2="240.75"/> <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="166.5" y1="197.375" x2="166.5" y2="240.75"/> <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="168.5" y1="197.375" x2="168.5" y2="240.75"/> <line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="231.5" y1="197.375" x2="231.5" y2="240.75"/> <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="232.5" y1="197.375" x2="232.5" y2="240.75"/> <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="230.5" y1="197.375" x2="230.5" y2="240.75"/> <line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="295.5" y1="197.375" x2="295.5" y2="240.75"/> <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="294.5" y1="197.375" x2="294.5" y2="240.75"/> <line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="296.5" y1="197.375" x2="296.5" y2="240.75"/> </g> <path fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" d="M360,238.721c0,1.121-0.812,2.029-1.812,2.029 H41.813c-1.001,0-1.813-0.908-1.813-2.029v-39.316c0-1.119,0.812-2.027,1.813-2.027h316.375c1.002,0,1.812,0.908,1.812,2.027 V238.721z"/> </svg> I appreciate and welcome any and all comments, help, and suggestions. Thanks in Advance!

Read the article

HTML/CSS formating

- by Codeguy007

I'm having to issues lining up items properly in my html code. I am not sure why they are lining up the way I want them to. First the header My Color Library is a full line height above the horizontal ruler. I want it right above the ruler. Second my X box in the td with the background is justified right fine but I actually want it in the top right hand corner not centered vertically. Here's some example html: <!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>FunctionalColor&Design</title> </head> <html> <body> <table style="width=900px; margin-left: auto; margin-right: auto;"> <tr> <td> <P> <div style="font-size: 1em; line-height: 1em; font-weight: bolder; padding: 0px;">My Color Library</div> <div align="right" class="removeall"> <a href="colors"> <img src="http://2100computerlane.net/workingproject/images/x-button.png" /> <bold>Remove All</bold> </a> </div> <HR/></p> <div class="mycolor"> <table> <tr> <td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"> <div style="padding:0; vertical-align:top;" align="right" class="remove"> <a href="f8d3cf" style="padding: 0px;"> <img src="http://2100computerlane.net/workingproject/images/x-button.png" style="padding: 0px;"/> </a> </div> </td> <td style="border: none; width:10px;"></td> <td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td> <td style="border: none; width:10px;"></td> <td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td> <td style="border: none; width:10px;"></td> <td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td> <td style="border: none; width:10px;"></td> <td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td> <td style="border: none; width:10px;"></td> <td style="border: none; background-color: #f8d3cf; width:125px; height:80px; border-spacing: 10px; padding:0;"></td> <tr> <td style="border: none; font:.6em Arial, Helvetica, sans-serif; width:125px; height:20px;">Desert Warmth<br/>70YR 56/190 A0542</td> </tr> </table> </div> </td> </tr> </table> </body> </html>

Read the article

How to reset parent child relationship between nested div

- by Shantanu Gupta

I am new to CSS designing and not aware of most of the properties of CSS. I am creating a layout for a web page. I am using div in my layout. My structure is somewhat like this <div id="content1_bg"> <div> <div class="content1_title_img_div"></div> <div class="content1_title_txt_div"></div> <div class="content1_dvider_div"></div> <div class="content1_content_div"></div> </div> <div></div> <div></div> </div> For this my CSS is #content1_bg div{width:250px;height:220px;float:left;border:3px solid blue; margin:20px;} .content1_title_img_div{width:50px;height:100px;} .content1_title_txt_div{width:150px;height:100px;} .content1_dvider_div{width:100%;height:10%;clear:both;} .content1_content_div{width:100%;height:50%;clear:both;} For this layout i was expecting my design to be like ---------------- |BOX1 BOX2 | ---------------- | BOX 3 | ---------------- | BOX 4 | ---------------- But on using my css layout is somewhat like this -------------------- | | | | | |BOX1| | BOX2| | | | | | | -------------------- | | |BOX3| | | -------------------- | | |BOX4| | | Basically i want my inner div's not to inherit the properties of outer div. How can i remove this inheritance relationship between parent div and child div

Read the article

HTML/CSS - Website Help.

- by gabeaudick

I'm trying to build my first website from scratch. I mocked up the design in Photoshop, and have been trying to convert into code for a few hours. But I haven't got far. In fact, I'm stuck on the header's navigation bar. It looks right, but it doesn't work. I'm using an unordered-inline list, and trying to link different rectangles in the header. I can't click on anything in the header, though. The code for the html and css files, and a mockup of the header, are below. Any advice on why the header bar isn't working would be much appreciated. Here's a link to the image: http://rookery9.aviary.com.s3.amazonaws.com/3961000/3961027_eb89_625x625.jpg *Ideally, you would be able to click on either "". home.html: <!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" lang="en" xml:lang="en"> <head>  <title>I am Gabe Audick.</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="Gabe Audick" /> <meta name="Copyright" content="Gabe Audick" />  <link href="style.css" media="screen" rel="stylesheet" type="text/css" />  <link rel="alternate" type="application/rss+xml" title="gabeaudick RSS" href="http://feeds.feedburner.com/gabeaudick" /> </head> <body>  <div id="wrap"> <div id="header"> <ul> <li><a href="#">Previous</a></li> <li><a href="#">Home</a></li> <li><a href="#">Next</a></li> </ul> </div> </div>   <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-5899101-4']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>  </body> </html> style.css: * { margin: 0; padding: 0; } body { background-color: #fff; color: #000; font-size: 14px; font-family: 'Century Gothic', Helvetica, sans-serif; position: relative; } #wrap { background-color: #000; color: #fbead; height: 26px; width: 100%; } #header { background: url(./images/home.gif) center no-repeat #000; height: 26px; } #header ul li{ float:left; list-style-type:none; margin-right:12px; text-indent:-9999px; } #header li a:link, #header li a:visited{ outline:none; display:block; height:26px; text-indent:-9999px; }

Read the article

Problem with CSS DIV align

- by Sergio

If the doctype declaration is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN"> what is the best way for horizontal alignment of the DIV's like these: <div id="outer"><div id="inner">Some text</div></div> The CSS is: #outer{ border-top:1px dotted #999; background-color: #F4F4F4; width:100%;} #inner{ width:500px;border:1px solid #F00; margin:auto;} The thing that I want to do is the inner DIV align at center (horizontally) inside the outer DIV. This CSS working fine if the doctype declaration is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Read the article

Script to embed image and CSS data in HTML files

- by andreas-h

I have a HTML page which references external stylesheets and shows some images. I'm looking for an easy way to include all referenced external resources in the HTML file directly, so that it doesn't have any external references any more. (Images should be included in the HTML file using the <img src="data:image/jpg;base64,[...] method). EDIT: I want to do this so that my web proxy can deliver a nice-looking error page if the backend is down, so I have to assume all my webservers cannot deliver the static content which would normally be linked to from my websites (CSS, images).

Read the article

From escaped html -> to regular html? - Python

- by RadiantHex

Hi folks, I used BeautifulSoup to handle XML files that I have collected through a REST API. The responses contain HTML code, but BeautifulSoup escapes all the HTML tags so it can be displayed nicely. Unfortunately I need the HTML code. How would I go on about transforming the escaped HTML into proper markup? Help would be very much appreciated!

Read the article

CSS Background image in Redmine template arbitrarily not loading

- by Pekka

I`m in the process of building a template for Redmine (a project management system based on Ruby on Rails.) Ruby is running on a virtual server from a Bitnami.org installation package. The OS is Windows. The template essentially consists of a styles.css file. In that file, I have the following line: #header { padding: 0px; padding-top: 48px; background-color: #62DFFF; background-image: url(../images/bkg.jpg) background-position: center bottom; background-repeat: repeat-x; height:150px; } It's a header element with a background image. The problem: This background image arbitrarily appears and disappears when reloading. Say you reload ten times in twenty seconds; the image will appear in two instances, and be missing in the 18 others. I would have put this down to server problems, but the weird thing is that when it's missing, the request for the image doesn't appear in Firebug's net tab at all. Even if it were cached, the request should be there. Raw screenshots of the identical page on two reloads: I am 100% sure the CSS file does not change in between. I have examined both instances with Firebug and the CSS is identical. It happens in both Firefox and Chrome so it must be something basic I'm overlooking. What could be causing a browser not to load a resource at all? I have zero idea about Ruby nor Rails - getting Redmine running and customized is all I have ever had to do with this platform - so I don't really know where to look. Apache's, Mongrel's and Redmine's error logs look fine, though.

Search Results

Search found 34754 results on 1391 pages for 'css and html'.

Page 16/1391 | < Previous Page | 12 13 14 15 16 17 18 19 20 21 22 23 | Next Page >

- by Babiker

- by cletus

- by C. Ross

- by ovolko

- by misha-moroshko

- by DomingoSL

- by Alessandro Vernet

- by Gagan

- by Lacrymology

- by Thariama

- by Drummss

- by Liam

- by Greg

- by Tim

- by Chris

- by 500ml

- by Emtucifor

- by Irfan Mir

- by Codeguy007

- by Shantanu Gupta

- by gabeaudick

- by Sergio

- by andreas-h

- by RadiantHex

- by Pekka

< Previous Page | 12 13 14 15 16 17 18 19 20 21 22 23 | Next Page >