CSS - General / Basic Css Help
Similar TutorialsHi I am currently trying to self teach myself CSS, harder than I thought, lol. Anyway I have a page that uses CSS but there are certain areas that don't display correctly/I can't get to work. I'm hoping someone can help Page: jinx-inc.co.uk/development Problem Areas are highlighted in this picture (to make things easier) jinx-inc.co.uk/development/problems.jpg 1: This area should have the blue colour all the way down. 2: Pretty much same problem as 1 but this is a repeating background instead of a background colour. 3: There is a Footer but it's gone walk about. The only way I can get it to show is through absolute position as this css file will be used as the master for all pages, so absolute won't work. 4: Table border problem but not too fused about that at the moment. Code available: jinx-inc.co.uk/development/css.txt jinx-inc.co.uk/development/html.txt Many thanks Okay, I'm trying to create dynamically sized blocks that can be pretty much and width and height, while maintaining these fancy corners I'm using. If you look closely, each of the corners have a little inner curve in them... Here is how I did it in HTML/CSS.... 1. I spliced it up so there is an image for each of the four corners (10x10), two background images for the top and bottom bars (1x10) and two background images for the left and right bars (10x1). 2. Created the structu [html] <div class="block-top"> <div class="block-tl"></div> <div class="block-tr"></div> </div> <div class="block-content"> <div class="block-ml"> <div class="block-mr"> <div class="block-center"> <p>this is some content</p> </div> </div> </div> </div> <div class="block-bottom"> <div class="block-bl"></div> <div class="block-br"></div> </div> [/html] 3. Created the CSS [css] .block-top, .block-bottom { height:10px; line-height:0; font-size:0; } .block-tl, .block-bl { float:left; height:10px; width:10px; line-height:0; font-size:0; } .block-tr, .block-br { float:right; height:10px; width:10px; line-height:0; font-size:0; } .block-center { padding:0 10px; background-color:red; } .block-content { clear:both; } .block-top { background-image:url(../images/block-light-TM.jpg); } .block-tl { background-image:url(../images/block-light-TL.jpg); } .block-tr { background-image:url(../images/block-light-TR.jpg); } .block-ml { background-image:url(../images/block-light-ML.jpg); background-repeat:repeat-y; background-position:left; } .block-mr { background-image:url(../images/block-light-MR.jpg); background-repeat:repeat-y; background-position:right; } .block-bottom { background-image:url(../images/block-light-BM.jpg); } .block-bl { background-image:url(../images/block-light-BL.jpg); } .block-br { background-image:url(../images/block-light-BR.jpg); } [/css] In all browsers except IE6 it displays fine, except for one little problem. If I put anything in the content area that has a margin, the margin puts spacing above and below the whole block-content area for some reason. I don't understand that at all, because the margin'ed element is within all those nested divs. I thought it should then just expand that inside div to fit?? Nope... In IE6 the ML and MR backgrounds don't appear at all. What am I dong wrong here? Hope this wasn't too complicated to understand. NOTE: I have zero padding and margin on all the elements as well. I've said this before, on he I'm old and trying to ween myself off tables. I'm re-doing a site for a mattress store (I did one for the owner a number of years ago) and I absolutely want to ditch the archaic code.... But, I've got a very basic question about laying things out with CSS - and I'm going to post a picture because - I think - it may explain my question best. In short, I have a DIV that's centered in the middle of the page called "container". It has a javascript slider at the top, that kinda fills the area in terms of width, and below it I want two columns. I have no idea - using strict CSS and no tables - how this would be done. I mean, I suppose you could use DIVs and absolute positioning but it seems like that might cause problems - I mean, heck...I don't know - maybe not. I just want to know what the best approach would be. Here's a graphic: I don't think it matters, but you can see the whole page (and examine the code), here (just a parking spot on my own server): http://www.guymerritt.net/xdog2/ Any help - as always - would be greatly appreciated. I am having what I can only imagine is a very common problem. Firefox is working fine and IE is not. I want the logo then the name image next to it in the header. I am positioning with css as below: Code: <div id="header"> <div class="logoholder"> <img src="images/logo70.jpg"/> <img class="djembefola" src="images/djembefolaheader.jpg"> </div> </div> and the css: Code: .logoholder { position:absolute; left : 20px; top : 0px; width:500px; height:70px; } #header img { float: left; } #header img.djembefola { float: none; } I am aware that this CSS may be very weak, as I'm not too experienced and am coding by hand. What would a robust way of doing this be. I don't really like this float lark but it was necessary to get the logo to stick left. Is it a good idea to have it inside the logoholder div (albeit bad naming by me) or is it unnecessary? Sorry I just realised that I didn't link to the page I had intended to.... www.djembefola.net Thanks for your time and consideration! Hello - My name is Steve Douglas website designer for AAA Northwest Ohio. I'm 19, and learning as I go - AAA paying for any courses that I need to take, but i'm not the school type of guy. I like to learn it by self-studying; i learn it better by making my own mistakes. Anyways were doing a site re-design, I first started off with a simple re-design with just HTML and tables (whoopity doo), boss was impressed - I was not. I hated it. But - I'm doing a new site design now with CSS, learned how to code it overnight. I started the designing and had wierd errors all around with browser related issues, I would re-design, re-design, and re-design until everything worked Perfect in all Screen Resolutions, IE 5.0, IE 6.0, IE 7.0, and Firefox I got advice from a fellow devshed guy kasmatu (spelling could be off), but helpful guy, gave me the clue to get the Mozilla Firefox Extension for CSS [Love It!]. Now should I follow these tools by heart? I mean like if I click Tools then Validate CSS, and Validate HTML, and Etc. 1. I am at a state where my header finally looks great in all popular browsers, but when I validate my CSS it's saying i'm missing a </div> at line 40 - Which is True! but when I go to add it, um, yea doesn't like that - all ID's are totally screwed from there after. not even the header looks right. And it doesn't look like a simple fix. I mean it's working! - So why should I want to validate my CSS? ALSO - and this is prolly why.. How do I speed up the site? Our Current site that we are using, is running 98 seconds loading time for Dialup users (a minute an a half!). The new CSS is at 45 seconds for Dialup users (i think). I'm pretty sure it's to do with all the Javascripts i'm using, I'm planning on combining the Scripts together and taken out code I do not need. But the document sizes are still huge. --------- I'm looking into HTTP Compression for our server - is this smart? we are running on a windows 2000 server IIS - What are the negatives to installing the compresser? ---------- Here is the site re-design http://www.aaanwohio.com/test/together.php Our Current Site is located at http://www.aaa.com/stop - Zip Code 43465 After many attempts I have been unable to get an unordered link list to fill the desired width. The main nav list should be the same width as the boxes in the left column. http://test.solidgroundnc.com/sg_css4.htm I would also appreciate any and all suggestions regarding my code/design for that same page. I'm not a web designer, not nearly, as my first attempt using tables proves - http://www.solidgroundnc.com. I was flamed so much when asking a question about that one that I decided to learn more, which includes css, and probably enought to get me into more trouble. ;-) Cheers, Golem I tweaked a style sheet (changed some margins, colors, etc.) and uploaded it to my server, but sometimes they just don't show up. I've deleted the old style sheet first, cleared my cache and tried different browsers - even restarted my computer. When I download the style sheet and look at it, it's the correct one but it just won't display my changes. It's almost like the server is referring to my old one. Anyone else have this problem or know how I can fix it? I'm going a little crazy... Hello, I tried to make a page with a header, left column and right column, as shown in the screenshot. http://img292.imageshack.us/my.php?image=screengr2.jpg You can see the code at the bottom. I used the faux-column technique to make the column colors extend to the bottom of the page. Is this a good way to do it? and does this method give problems with different resolutions on different computer-monitors. I used floats in this example to position the divs, is this a common solution or is absolute or relative positioning better? My goal is to teach myself a way to easily and effectively divide a webpage, so that I have a basic method, also in larger and more complex websites. I like to hear any tips/techniques to improve this. I used the folowing code: Code: <html> <body> <div class="wrapper"> <div class="header"> <br /><br /><br /><br /><br /> </div> <div class="left"> <img src="homer.jpg" /> </div> <div class="right"> <div class="nav"> <a href="home.htm">home</a> <!-- menubar --> </div> <div class="contents"> This is the contents of the page </div> </div> </div> </body> </html> and the css code Code: body{ background: url(fauxcolumn.jpg) 15% 0; margin: 0; padding: 0; } .header{ background-color: green; float: left; width: 100%; margin: 0%; padding: 0%; } .left{ background-color: purple; width: 15%; float: left; margin: 0%; padding: 0%; height: 100%; } .nav{ background-color: blue; width: 85%; float: left; margin: 0%; padding: 0%; } .contents{ float: left; width: 85%; margin: 0%; padding: 0%; background-color: red; } Thanks in advance. Hi, I have three <div> Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <div id="container" style="width:500px;height:700px;background-color:green;"> <div id="one" style="float:left;width:100px;background-color:#ff9900; ">one<br>one<br>one<br>one<br>one<br>one<br>one<br></div> <div id="three" style="float:right;width:100px;background-color:red;">three </div> <div id="two" style="float:left;width:70%;background-color:#ff9988;">two jdfk hnldncf ddhf sd ohdnfc kbldhcv ohsvnskd hvjnsdhv hviopsdhv kbhopvd v onksdnv oln;sdmnv m;mv mnml;vm vm;klf kdfl'gl;v 'fg 'kdf'kvb'l ;'lfk</div> </div> </BODY> </HTML> I noticed when I increased the % width of my <div two> it goes below my <div three> I was under the impression it should just stay at the same level and text should wrap around my div three? But I guess that's not the case. Am I doing the something wrong or is this the expected behavior? Hi Everyone, I am quite new to CSS, and I am working on my University Final Year Project. I currently have just 4 errors, when I validate my page: URL My CSS page can be found he URL Can anyone please tell me you I get these errors, the code looks correct to me. Also, do you know any Frontpage/Dreamweaver type programs, which u can directly edit text etc, while keeping to the W3 Standards. Regards Alex Hi, suppose I have a class declared in a css file Code: .myname {.......} that css file I include in my page. Now if I want to over write that class in my page I do somwething like following in my page Code: <style> .myname {different stuff} </style> is it ok to do something like this, or delcaring class twice may cause problem? I am new to this stuff started php about a month ago now i started with this css nav menu last week and can not figure out how to get the thing in the center of the page also in FF the nav menu is fine just not in the right location in IE the bottom half of the nav menu sticks out one inch past the top half here is my css PHP Code: #divNav { background: transparent url(../images/bk-nav.jpg) no-repeat top left; margin: 0; padding: 0; height: 80px; width: 800px; } #nav { position: relative; top: 55px; height: 80px; width: 800px; } #nav li ul, #nav li ul { margin: 0; padding: 0; } #nav a { text-decoration: none; } #nav li { /*float the main list items*/ margin: 0; float: left; display: block; padding-right: 15px; } #nav li ul { display: none; } #nav li.off ul, #nav li.on ul { /*put the subnav below*/ position: absolute; top: 25px; left: 0; padding-top: 15px; background: #224d6f; height: 28px; width: 740px; padding-left: 60px; } #nav li.on ul { background: #f90; } #nav li.on:hover ul, #nav li.over ul { /*for ie*/ background: #224d6f; } #nav li a { color: #224d6f; font-weight: bold; display: block; width: 93px; padding: 0; } #nav li.on a { color: #f90; } #nav li.on ul a, #nav li.off ul a { border: 0; float: left; /*ie doesn't inherit the float*/ color: #f90; width: auto; margin-right: 15px; } #nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/ background: #224d6f; } #nav li.on ul { display: block; } #nav li.off:hover ul, #nav li.over ul { display: block; z-index: 6000; } #nav li.off a:hover, #nav li.on a:hover { color: #f90; } /*do the image replacement*/ #nav li span { position: absolute; left: -9384px; } #liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a { display: block; position: relative; height: 26px; background: url(../images/bk-dropdownMap.gif) no-repeat; /*contains all hover states*/ } /*first, put the initial states in place*/ #liRenaissance a { background-position: 0 0; } #liArtNouveau a { background-position: -102px 0; } #liModern a { background-position: -204px 0; } #liPostModern a { background-position: -306px 0; } #liDigital a { background-position: -408px 0; } /*active area - for this demo - the code could be based on a body class, and probably work better.*/ #liModern.on a { background-position: -204px -37px; } /*add selectors for the other li's and background-positions*/ /*hover states*/ #liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a { background-position: 0 -73px; } #liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a { background-position: -102px -73px; } #liModern a:hover, #liModern:hover a, #liModern.over a { background-position: -204px -73px; } #liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a { background-position: -306px -73px; } #liDigital a:hover, #liDigital:hover a, #liDigital.over a { background-position: -408px -73px; } /*subnav formatting*/ #nav li.off ul a, #nav li.on ul a { display: block; background: #224d6f; color: #fff; font-family: arial, verdana, sans-serif; font-size: small; } #nav li.on ul a { background: #f90; } heya guys having some drama with what should be a simple task. basically i just want to expand the intro-left div to 100% without pushing the right hand content thats fixed. Code: <div id="intro" style="float:left; display:inline; border: 1px solid red; width:100%;"> <div id="intro-left" style='float:left; border:1px solid green; overflow:hidden; width:auto;'> text </div> <div id="feeder" style="float:right; border: 1px solid black; width:200px;height:400px;"> text </div> </div> Hi guys, just dropping a line because I am having the darndest time trying to get this page: http://www.againsttheline.com/college_football_links/ to look the way I want it to with the CSS the script developer included. I have never personally used CSS myself, so I'm at a bit of a loss, but I have gone into the CSS file, changed what I though to be correct, but can never get the right results. I would like the categories in the middle of the page to be larger without changing the size of the rest of the links on the page. However, when I change "CatHeaderText" size it has no effect. If I change body text size it has no effect. The only thing that works when I change the font size is the a:link thing from xx-small but then that changes every link on the page and not just the category links in the middle. Can anyone offer any ideas of how I can make this work? Thanks, John Below is the full CSS <style> .bodytext { font-family: verdana,arial,ms sans serif; font-size: 10pt; color: #000000; } a:link, a:visited, a:active { font-family: verdana,arial,ms sans serif; font-size: xx-small; color: #70191B; text-decoration: none; } a:hover { font-family: verdana,arial,ms sans serif; text-decoration: underline; color: #800000; } .dotted { border: 1px dotted #000000; } .catheadertext { font-family: verdana,arial,ms sans serif; font-size: l2pt; font-weight: bold; color: #000000; } .button { font-family: verdana,arial,ms sans serif; font-size: xx-small; border-color: #909090; background-color: #404040; color: #FFFFFF; } .formtext { font-family: verdana,arial,ms sans serif; font-size: xx-small; } .poplisttext { font-family: tahoma,verdana,arial,ms sans serif; font-size: 7pt; } .revheadertext { font-family: tahoma,verdana,arial,ms sans serif; font-size: 8pt; font-weight: bold; color: #FFFFFF; background-color: #5A636E; } .topborder { border-top: 1px solid #000000; font-family: tahoma,verdana,arial,ms sans serif; font-size: 8pt; color: #000000; } .bottomborder { border-bottom: 1px solid #000000; font-family: tahoma,verdana,arial,ms sans serif; font-size: 8pt; color: #000000; } .description { font-family: tahoma,verdana,arial,ms sans serif; font-size: 8pt; color: #000000; padding-left:20px; } .adminheadertext { font-family: tahoma,verdana,arial,ms sans serif; font-size: 8pt; font-weight: bold; color: #000000; } .admintable { background-color: #000000; } .adminmain { background-color: #FFFFFF; } .subcatheadertext { font-family: tahoma,verdana,arial,ms sans serif; font-size: 9pt; color: #800000; } </style> Hey all, I need some help with a very basic CSS file. Honestly, it is so basic, that I've never done it before, and I can't get it to work. So, basically, what I have, is a flash file, that I want to be in the center of my page. However, in the flash file is a banner, that I want to continue at the sides, using repeating backgrounds. What I need is a simple three column CSS file, where the center has a fixed with of 887px (the width of the swf-file) and the left and right columns change their width to whatever width the visitors web browser has. I just can't get it to work. Can anyone help me? Thanks a lot. Regards. I'm new to CSS and I am trying to create a style sheet for a website I am currently getting ready to begin production of and was trying to get my basic layout made up. I was wandering if you guys could help me out because I keep getting a few concepts mixed up as I am going along through creating this and can't quite get it set up the way I want to. I tried to comment my CSS so you guys could get a basic understanding of what I was aiming for. Don't worry about the odd backgrounds at the moment b/c I am just using them to easily identify my different divs. Anyway, here is my css: Code: /* CSS Document */ h1 { font-family: Geneva, Arial, sans-serif; font-size: 20px; color:#000000; } h2{ font-family: Geneva, Arial, sans-serif; font-size: 16px; color:#000000; } h4{ font-family: Geneva, Arial, sans-serif; font-size: 12px; color:#000000; } /*============================ Begin Layout Structure ============================*/ #wrapper { /* main container for everything */ width: 1014px; /* 1024px total with padding */ min-height: 748px; margin: 0 auto; background: #ffffff; overflow: hidden; /* contain inner floats */ position: relative; /* establish the containing block */ padding-right: 10px; } #accounttypeselector { /* select personal or business to affect page display */ position: absolute; width: 100%; height: 25px; left: 0; top: 0; padding: 0; background: #ff00ff; } #servicesbar { /* container for user services */ position: absolute; /* sitting up this way b/c will be contained within wrapper */ width: 100%; /* with absolute positoning and being inside wrapper should be 100% of width of wrapper */ height: 30px; /* 30px should be adequate height */ padding: 0; background: #ffffff; } #servicesbar-services { /* container for user services once logged in */ position: absolute; /* not sure if position for this is right - should be left side of servicesbar */ width: 75%; /* want it to be 75% of the servicesbar width */ height: 100%; /* since servicesbar container height is 30px should be 100% of this */ padding: 0; background: #ff00ff; } #servicesbar-login { /* for user login and logout - contained inside servicesbar */ position: absolute; /* not sure if position for this is right - should be right side of servicesbar */ width: 25%; /* want it to be 25% of the servicesbar width */ height: 100%; /* since servicesbar container height is 30px should be 100% of this */ } #header { /* will include site banner/logo */ width: 1024px; padding: 0; background: #ff0000; background-image: "background.gif"; /* if I don't specify a height will this div take on the height of the image? */ } #navmain { /* navbar that will be located below header */ width: 1024px; padding: 0; background: #21ee00; } #bodywrapper { /* wrapper for main content - will have 3 columns here */ width: 1024px; padding-top: 10; } #bodywrapper-navleft { /* sub nav to be lcoated in left column of bodywrapper */ width: 15%; background: #8B8378; padding: 0; } #bodywrapper-main { /* main content to be located in middle column of bodywrapper */ width: 70%; background: #66CDAA; padding:0; } #bodywrapper-news { /* news column to be located in right column of bodywrapper */ width: 15%; background: #8A2BE2; padding:0; } #footer { /* footer to be located at bottom of wrapper */ width: 1014px; /* will be 1024 with padding */ height: 20px; padding-right: 10px; } And here is just my bareboned html where I was trying to put my divs together: Code: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test2.css" /> </head> <body> <div id= "wrapper" > <div id= "accounttypeselector" > </div> <div id= "servicesbar" > <div id= "servicesbar-services" > </div> <div id= "servicesbar-login" > </div> </div> <div id= "header" > </div> <div id= "navmain" > </div> <div id= "bodywrapper" > <div id= "bodywrapper-navleft" > </div> <div id= "bodywrapper-main" > </div> <div id= "bodywrapper-news" > </div> </div> </div> <div id= "footer" > </div> </body> </html> Can anyone offer me some suggestions to straighten me out here and also any tips if I am doing anything that isn't the accepted norm. Thanks in advance and let me know if you have any questions as to what I am trying to do. Really appreciate it. Nathan Hi There, I am having a problem with getting padding to work correctly. I am trying to create a simple tabular view and the padding on my text content does not seem to be acting as I want it. In the main text content area I want a padding of .3em all the way around. It looks like the left and right padding is correct in both FF and IE. But in IE7, both the top and bottom padding appear to be more than the .3em. In FF their is no top padding and the bottom padding seems more than what I am looking for. I am including a sample which illustrates my problem. Thank you for any help on what I am doing wrong here. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> div.revsummary { width: 100%; border: #036 solid 1px ; margin: .5em 0 .5em 0; } .revsummary span { background-color: #eee; border-bottom: #036 solid 1px ; float: left; text-align: center; padding: .3em 0 .3em 0; } span.revsumtitle { width: 90%; background-color: peachPuff; text-align: left; padding-left: .3em; } span.revsumrating { width: 10%; margin-left: -6px; border-left: #036 solid 1px ; background-color: peachPuff; } span.revsumdest { width: 35%; } span.revsumcl { width: 35%; margin-left: -2px; border-right: #036 solid 1px ; border-left: #036 solid 1px ; } span.revsumship { width: 30%; } span.revsumwrtup p { padding: .3em; text-align: left; } span.revsumwrtup { background: none; border-bottom: none; float: none; } #crContentview { padding: .5em; } </style> </head> <body> <div style="width: 600px;"> <div id="crContentview"> <div class="revsummary"> <span class="revsumtitle">Some title line</span> <span class="revsumrating">AA</span> <span class="revsumdest">Label 1</span> <span class="revsumcl">Label 2</span> <span class="revsumship">Label 3</span> <span class="clear"></span> <span class="revsumwrtup"><p>Here is a bunch of text, I want this text to have a padding around it and it seems to work fine on the left, right and bottom, but not the top. I have a feeling this is something to do with the way I am using the spans and floats.</p></span> </div> </div> </div> </body> </html> Hi, I'm so glad I found this forum, i have a feeling I'll be here often, lol. I fumble my way through css and get by but I have a really annoying problem with a centre content box on the homepage of my forum, when the browser window is re sized smaller the content box gets moved down the page leaving a big gap in the middle. I have managed to absolute position the box itself but the picture and text that is in it still moves and overlaps the contents box on the right. Sorry to be so long winded, I'm sure there's an easy coding solution but I can't find it Thanks for reading I have a CSS call for all p, like this p { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; } now I want headings to be ital, so I add p.ital { font-style: italic; } and set the class for some p to ital, and they inherit font family and font size. Now I want further inherit, italBold p.italBold { font-weight: bold; } That is, I want p.italBold to inherit from p.ital, which inherits from p. How can I do this? Thanks for your help CJB Hi all! New to the forum, hopefully somebody will be able to help me out with a problem I am having! I am currently working on a simple flat website and would like help with the layout. I know what I want, however I cant seem to get the code working I will upload a picture outlining what I want to achieve, it would be pretty confusing to explain. URL Basicaly, heres the idea. Header Main Content Container Footer The footer must always be visible and stick to the bottom of the page. When displayed in higher screen resolutions, the footer is still at the bottom. That is within my ability, but I am having trouble formatting the Main Content Container. I want it to be a static height, regardless of screen size. However, if it is viewed in a lower screen resolution, the footer is going to eat into this height so I would like to get a vertical scroll bar to appear inside the Main Content Container div to accomodate for this. I have trouble explaining what I mean please if you have the know how can you help me out? I'd really apreciate it! Thanks in advance, hopefully I will be able to contribute to the forum in the future |