CSS - Layout Screwing Up In Css When Replacing Img With Bg's.
When watching the layout (Layout: www. the daniel . dk /test/) it seems oh so fine, but that is just one picture in a wrapper.
When doing it in dreamweaver it looks perfect, but when uploading it and testing it, it screws up. Can anyone see what I'm doing wrong? Screwing up: www. the daniel . dk /test2/index.html Style: www. the daniel . dk /test2/style.css I sliced and diced and saved as CSS in photoshop, where it puts it as images instead of div bg, and I replaced them to div bg's but it didnt work out. Can anyone help making it correct? Similar TutorialsHi COuld someone take a look at http://www.sussexfind.co.uk/test/ if you view it in Firefox the layout breaks and I don't know why. If someone could explain why i would be very grateful as I need to get this done soon!! Thanks Hello, I currently have a Table layout that uses 2 <td>s to display a picture in the left <td> and text in the right <td> so something like this: Code: <tr> <td>Image</td> <td>Text about the Image</td> </tr> Is there a way to rebuild this using DIV tags. I have had so much luck using Code: <DIV> <ul> <li>Image Text</li> <li>Image Text</li> </ul> The problem with this is the text doesn't display properly - It either displays underneath the image, or if I use "vertical-align:text-top", it aligns the top line of the text to the top of the image and then displays the rest of the text underneath the image. Any suggestions would be welcome if there is any way around this? 1st off, how much do I have to worry about NN4 being used by web surfers? Wondering if I need to always be aware and adapt my pages to it. 2ndly, and most important, can someone help me with HOW to fix the below code. Have added the hack for IE mac/IE 5.x windows. But it screws up in IE6 by making the div extend to the right browser edge. How do I get it back in IE6? (Do I need to mention works fine in Firefox? ) **I have had to question my possible rudeness of posting the exact code in the book I am using for some CSS learning, along with mentioning the book by name. Thus, have stripped the code down to what's really important and deleted references to before said book. ** Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Dude</title> <style type="text/css" media="all"> body {background: rgb(75%,66%,66%); margin: 0; padding: 0; font: 12px/1.5 Verdana, Arial, sans-serif;} div#wrap {border: 2px solid black; background: white; position: absolute; margin: 0 80px 0 0; padding: 0 0 2em 0; left: 80px; right: 80px; top: 40px; voice-family: "\"}\""; voice-family:inherit; right: 0;} div#wrap img.curve {float: left; clear: left; margin: 0 15px 0 0; padding: 0; height: 20px;} </style> </head> <body> <div id="wrap"> <p>This div should be 80px from the right. After using hack for IE mac & IE 5.x win, <strong>IE6</strong> now stretches div all the way to the right. How do I make the hacks work and IE6 render correctly? I know I will run into this exact problem one day and best get it figured out now, huh?<p> <div id="menu"> <a href="link1.html">link</a><b> | </b> <a href="link2.html">link</a><b> | </b> <a href="link3.html">link</a><b> | </b> <a href="link4.html">link</a><b> | </b> <a href="link5.html">link</a><b> | </b> </div> </div> </body> </html> Thanks! James Hello, I'm trying to replace one CSS nav menu with another, is there anyone who is familiar enough to assist me? I'm using an external style sheet and a Drupal site. I am pretty much of a CSS novice. No matter what I do, the default bullet is displaying. Sometimes, in the CSS stylesheet, I can have a graphic show up, but the regular bullet is showing as well. I want to make a separate bullet that I can use just on certain pages. It's on the home page of invisibleillnessdocfinder dot com I don't see anywhere to upload the style sheet to show the code. There is a template, so even though I'm putting "List-style=none" the default tiny bullet shows up. I'll be glad to email the stylesheet to anyone who can help. Thanks, Susan Hi, I have tried many times but for the life of me cannot understand css. It seems more of a nightmare than tables themselves. I would appreciate if anyone could give me an example of replacing a few spacer images with the css and html corresponding code for the following. Code: <td width="1"><img src="./images/clearpixel.gif" width="1" height="1" border="0" alt=""></td> <td width="8"><img src="./images/clearpixel.gif" width="8" height="1" border="0" alt=""></td> Hopefully I will be able to understand it more then. Thanks much in advance. Gibs How could I make <div class="code"> replace HTML code to it's text equivalent? Like, < to <? Is there any CSS way to do it? And if not, how could I possibly go about doing it? Hi, My client very much likes a website that belongs to their competition. The thing she likes the most is the fact that the content is centered horizontally and vertically in the browser window. The way they (her competition) have constructed the site is to to place all the content inside a table 100% wide and 100% high with the content centered horizontally and vertically using the table's valign and align attributes. However, this isn't very "standards", is it . . . so, does anyone know of a way this same effect (content centered horizontally and vertically in browser window) can be acheived using CSS? Thanks! Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper--> <div id="wrapper"> <!--begin side column --> <div id="sideColumn"> <span class="category">Products</span> <ul> <li><a href="/products/spirometers.html">Spirometers</a></li> <li><a href="/products/clinical_trials.html">Clinical Trials</a></li> <li><a href="/products/asthma_copd.html">Asthma & COPD</a></li> <li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li> <li><a href="/products/resuscitaion.html">Resuscitation</a></li> </ul> <span class="category">Resources</span> <ul> <li><a href="/resources/contact_us.html">Customer Support</a></li> <li><a href="/resources/training_services.html">Training & Services</a></li> <li><a href="/resources/exhibitions.html">Exhibitions</a></li> <li><a href="/resources/newsletters.html">Newsletters</a></li> <li><a href="/resources/downloads.html">Downloads</a></li> <li><a href="/resources/useful_links.html">Useful Links</a></li> <li><a href="/resources/industry_information.html">Industry Information</a></li> <li><a href="/resources/industry_information.html">Sitemap</a></li> </ul> </div> <!--end of side column --> <!--begin main column --> <div id="mainColumn"> <!-- InstanceBeginEditable name="Main_Section" --> <div id="home"> <div id="scroll"><span>scrolling news will go hear and stop</span></div> <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" /> <span class="large">Welcome to Vitalograph</span> <p>Vitalgraph offers a wide range of spirometers along with other asthma management equipment with over 40 years experience. From simple hand-held units to sophisticated Windows based spirometry systems, we have it all. Check out our full line of respiratory equipment under the product category.</p> <p><a href="/about_us/about_us.html">more about us...</a></p> </div> <!-- InstanceEndEditable --> </div> <!--end of main column --> </div> <!--end of wrapper--> Here is the vitalograph_master.css: Code: body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; background-color: #ffffff; color: #515151; margin:0px; padding:10px; } /*page container settings*/ #page { width: 750px; height: 600px; border: 1px solid #5094F9; background-color: #FFFFFF; overflow: hidden; margin: auto; padding: 10px 10px 10px 10px; text-align: left; } /*logo header and tag settings*/ #header { margin: 0; padding-bottom: 5px; width: 450px; height: 36px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #5094F9; text-align: left; } #header img { vertical-align: -7px; } .tagline { color: #5094F9; font-size: 16; font-style: italic; font-weight: bold; display: inline; clear: both; line-height: 20px; margin-left: 10px; } /*top bar settings*/ #topbar { float: top; height: 20px; background-color: #5094f9; clear: both; padding-left: 10px; text-align: left; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 12px; font-weight: bold; } #topbar a:link, #topbar a:visited { background-color: inherit; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; color: #FFFFFF; font-size: 12px; font-weight: bold; } #topbar a:hover, #topbar a:active { background-color: #FFFFFF; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; color: #5094F9; font-size: 12px; font-weight: bold; } #topbar ul { list-style: none; margin: 0; padding-top: 2px; } #topbar li { display: inline; margin-right: 160px; } /*Main Section two columns under top section*/ #wrapper{ padding: 10px 10px 10px 0px; width: 100%; height: 100%; } #sideColumn { float:left; width:155px; height: 78%; background-color: #5094F9; padding-top: 50px; padding-left:10px; padding-bottom:10px; pading-right: 10px; margin-right: 10px; text-align: left; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #FFFFFF; font-weight: bold; line-height: 20px; } .category { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 16px; font-weight: bold; letter-spacing: 5px; } #sideColumn a:link, #sideColumn a:visited { background-color: inherit; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; color: #FFFFFF; font-size: 12px; font-weight: bold; } #sideColumn a:hover, #sideColumn a:active { background-color: #FFFFFF; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; color: #5094F9; font-size: 12px; font-weight: bold; } #sideColumn ul { list-style: none; padding: 15px 0px 15px 10px; margin: 0px; } #mainColumn { padding: 0px; } /*footer*/ .footer { font-family: "Times New Roman", Times, serif; font-size: 9px; color: #999999; } /*text*/ .large { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #5094F9; font-size: 18px; font-weight: bold; margin-bottom: 15px; } Here is the home.css: Code: /*home page*/ #home { margin: auto; } #home img { margin: 5px auto 5px auto; } #home p, .large { margin: auto 40px auto 40px; } #home a:link, #home a:visited { background-color: inherit; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; color: #5094F9; font-size: 12px; font-weight: bold; } #home a:hover, #home a:active { background-color: inherit; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; color: #990099; font-size: 12px; font-weight: bold; } #scroll { width: 560px; padding: 5px; background-color: inherit; border: 1px solid #5094F9; margin-bottom: 5px; } Any help or suggestions are greatly appreciated. Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? Hi there, I've read that for using decorative images in web design its preferred that you apply them as background images instead of using the <img> tag, as using the <img> tag stops the page from displaying until all the images have fully loaded in the browser, where as using a css background image will output the page completely, then start to load in the images (users can start reading the text whilst the images load in). I was just wondering really if anyone else has used this method and gone to the extreme measure if replacing all <img> tags with css background images to dramatically improve their page load speeds? So for example... before Code: <img src="my_thumbnail.jpg" alt="Thumbnail Graphic" title="Thumbnail Graphic" width="100" height="70" /> after Code: .thumb { background-repeat: no-repeat; width: 100px; height: 70px; } <div class="thumb" style="backgound-image: url('my_thumbnail.jpg");"></div> Just an idea really, not sure on how standard compliant it is but I might test it out later to see what speed improvements it brings. I'd be very interested in anyones thoughts Hi, The following design http://www.cmsguides.com is not working in IE. Because of the google leader board it wraps the content div to underneath the right column. However this works in Firefox. Can anyone suggest how I can fix this? Daniel I'm doing a layout with div's and I want to have my navigation a pixel size, but my content area a percentage. (and have them beside each other) Here's what I've tried, but the 'main' div goes 100% of the window instead of 100% of the space between the left side and the 'nav' div. Is what I'm trying to do possible with div's? HTML: <div id="main"> stuff </div> <div id="nav"> navigation </div> CSS: #main { float: left; width: 100%; background: #efe; } #nav { float: left; width: 200px; margin-left: 4px; background: #999; } Hi there. I need help creating a certain layout. I need div borders around my layout, but without content inside them the background image is not seen. How could I resolve this without changing height:auto Thanks in advance I've been scouring the net and the two books I have (Eric Meyer on CSS and CSS By Example), but I can't seem to wrap my head around the proper way to do a complex layout with <div>s. Here is what I want in English: 1. A masthead/titlebar - always takes up the full browser width, with an image fixed on the left, say 100 px high, at the top of the page. 2. Left and right sidepanes, say 100 px wide, starting under the masthead, that are as long as 3. The middle section for content. This is the main area, and it may be arbitrarily long. This area determines the height of the entire page such that the sidepanes extend all the way to the bottom. I would love to have (1) and (2) occur before (3) in the flow, so that I can make a simple header file for the masthead/sidepanes, then include the content, then close everything off with a footer file. Here is my horribly borked attempt at using nested <div>s: Code: <html><head><title>CSS Hell</title> <style TYPE="text/css"> <!-- body { margin: 9px; margin-bot: 0px; background: #FFF; } #level0 { background: white; } #masthead { background: blue; height: 60px; } #level1 { background: #DDD; border: solid; } #menu { background: #BBB; width: 150px; } #level2 { background: white; float: right; border: dashed; } #promo { background: blue; float: right; } #main { background: #CCC; } --> </style> </head> <body> <div id=level0> level 0 <div id=masthead> branding </div> <div id=level1> <div id=menu> LEFT SIDEPANE<br> menu<br> menu<br> menu<br> menu<br> menu<br> menu<br> menu<br> </div> level 1 <div id=level2> level 2 <div id=main> main content area<br> main content area<br> main content area<br> main content area<br> main content area<br> main content area<br> main content area<br> main content area<br> main content area<br> main content area<br> main content area<br> main content area<br> main content area<br> </div> <div id=promo> RIGHT SIDEPANE<br> promo<br> promo<br> promo<br> promo<br> promo<br> promo<br> promo<br> promo<br> promo<br> promo<br> </div> </div> </div> </div> </body> </html> Level 2 is nested inside level 1, but Firefox .9 renders the level2 div underneath level1. Also, the bottom border for level1 doesn't show up. ?!!?!? I'm trying to figure out if the following layout is possible using css such that it will appear correctly in all "major" browsers: lab.wx3.com/cssprob/layout_challenge.png (sorry, I'm a new user so I can't post the http part) The center column should be fixed width, 100% of browser in height. Values marked as "fixed" would have a defined pixel size. Values marked as "fluid" would fill available space. I know this layout can be done with tables, but I'm at a loss to figure out how it can be done in css. thanks The page is http://cannons.dsl.xmission.com/index.html I am having problems making the footer go to the bottom what do I need to change to make it work? Thanks |