|
CSS - 1st Post: Need General Help Please
Hi
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 Similar TutorialsOkay, 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. 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 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! 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. 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. The following page is my first foray into the world of css: webpages.charter.net/slyraymond/SFL/sflindex.html If anyone here is capable, please test with both FF/Mozilla and IE. You'll notice two problems immediately - namely, a problem with mouse-over colors and a partially buried div. Can someone tell me in idiotspeak what exactly causes the discrepancy and how to fix? Css file follows: body { font: 8pt/16pt arial; color: #000000; background: #ffffef; margin: 10px; } p { font: 12pt arial; margin-top: 0px; text-align: justify; } h2 { font: italic normal 14pt arial; letter-spacing: 1px; margin-bottom: 0px; margin-top: 0px; color: #93006b; } h3 { font: normal 12pt arial; letter-spacing: 1px; margin-bottom: 5px; margin-top: 0px; color: #93006b; } /* f9c08b */ tr { font: normal 10pt arial; height: 12px; } a:link { font-weight: bold; text-decoration: none; color: #93006b; } a:visited { font-weight: bold; text-decoration: none; color: #db7311; } a:hover, a:active { color: #4f4e4d; } #container { background: #efefd2; padding: 0px; height: 900px; margin-top: 78px; } #main_menu { position: relative; top: -18; left: 5; z-index: 2; background: #e3e45c; padding: 3px; width: 200px; } #main_menu ul { margin: 0; padding: 0; list-style-type: none; } #main_menu li { background: #ffffdd; font: 10pt arial; padding: 5px; } #main_menu li a:hover { background: #e3e45c; display: block; } #section { position: relative; border: 2px solid #e3e45c; padding: 3px; left: 250; top: -168; z-index: 5; width: 600; background: #ffffdd; font: italic 14pt arial; } #section_content { position: relative; padding: 25px; left: 295px; top: -179; width: 60%; background: #ffffef; font: normal 10pt arial; } #ebay { position: absolute; padding: 10px; left: 25px; top: 300px; width: 150px; background: #ffffef; font: normal 12pt arial; text-align: center; } I would like to post on another forum with CSS. Is there any way to do this? I already have the content laid out with css in my html editor and just wanna transfer it to a forum as a forum post. I suspect forums don't allow css so just wondering if there's a way around this. Appreciate the help, JH Hey All: This is my first post to this forum. Any and all assistance is greatly appreciated! I am having an issue with some floating div's. I'm sure it's as easy as moving the div to a different parent but, I'm having trouble figuring this one out. My site is pretty simple. Most of the div's are floating left. I have one div that is floating right. I want the right div to stretch or contract to the full height of the content. Most of my content fits into a 740px height. There are a few that are more (up to 1500px). So, I want to put 1500px worth of images in the right column but only show as much as needed to fit the content area (most of the time only 740px). Right now, the full height of the right div is showing. I would post a link but, I'm new to the forum and it isn't allowed. If there is a way around this, I am happy to provide a link. Thanks in advance for any responses! Jeff Ok I just reached desesperation. Ive tried EVERYTHING, believe me. Ive even had some developer help me from england, which solved the problem and then didnt know how he fixed it cause he forgot... I have JSCook menu and yes its the one perfect for my site, but the menu just wont come on top of the post area! It gets behind and ive tried with z-index and nothing www dot servicanonline dot com -> Click Top called "Perros" to see my problem. Please help me as Ive done everything I can and still cant solve this. I know you pro CSS users probably know this already, but I was accidentally discovered something REALLY cool with css. CSS Code: Original - CSS Code alexText { background-color: rgb(116,130,208); }
Code: <alexText> Some Alex Text </alexText> That code essentially creates your own HTML tags. Wow. That's going to save me SO much time. I'm working on a video blog right now and I REALLY like the way this is set up. See Gary Vaynerchuk WineLibrary(dot)TV videos On Gary's videos there are always the Share Links above the video. These aren't part of the player but somehow built into the post template I imagine. I also imagine aside from the css/html aspect this task of creating the links is being automated but I could be wrong. Anyone have any ideas on how I could accomplish something similar? Thanks I am trying to set up my post using a wordpress template I found on alexking.org called Blue Radiant. All was going well until I decided to make a few test news posts and it started doing something funky. http://www.unlimitedzelda.net If you view the site in Internet Explorer, it's fine. However if you view it in FireFox, you can see that all but the most current news post gets pushed under the left nav bar. I can't figure why and I hope someone else will be able to help me out. Any input is greatly appreciated. I have set the Notification Type to "Instant Email Notification" but I do not receive any email when someone replies to my posts? Any idea why? Brad. Here is my code Code:
<html>
<head>
<style>
div.menu
{
border: 1px solid #F3F3F3;
padding: 5px;
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="menu">
<table style="width:100%">
<tr>
<td>Test</td>
</tr>
</table>
</div>
</body>
</html>
What i am trying to do is set the division to align in the center of the screen. At the moment it is aligning on the left hand side. Why is this code not working? Code: http://www.blametruthproject.com/home Hey CSS gods So I need some help with my dropdown menus, they are currently going behind the content on my posts in my blog, I think this could be fixed with CSS but I guess you guys could tell me that. Thanks, Neil. Novice at CSS. I have a Blogger website. I'm trying to put a CSS dropdown menu. In Safari, it works fine. Don't have access to Firefox, so I don't know, but in IE (6&7) the dropdowns are hidden behind any other widgets on the page. I've seen plenty of forum posts regarding this issue with flash player, but none specifically addressing IE and Blogger widgets. I've tried adjusting z-index in each li, ul. I'm still really new at this, so I'd appreciate any help and specific guidance you can offer. Website: crossfit-hr.com CSS code (source from CSS MENU MAKER): .menu{ width:945px; border:none; border:0px; margin:0px; padding:0px; font-family:verdana,geneva,arial,helvetica,sans-serif; font-size:12px; font-weight:bold; font-color:#FF0000; z-index:200; } .menu ul{ background:url(removed for thread) top left repeat-x; height:43px; list-style:none; margin:0; padding:0; } .menu li{ float:left; padding:0px 8px 0px 8px; z-index:200; } .menu li a{ color:#000000; display:block; font-weight:bold; line-height:43px; padding:0px 10px; text-align:center; text-decoration:none; } .menu li a:hover{ color:#FF0000; text-decoration:none; } .menu li ul{ background:#e0e0e0; border-left:2px solid #0079b2; border-right:2px solid #0079b2; border-bottom:2px solid #0079b2; display:none; height:auto; filter:alpha(opacity=95); opacity:0.95; position:absolute; width:150px; z-index:10000; /*top:.5em; /*left:0;*/ } .menu li:hover ul{ display:block; } .menu li li { display:block; float:none; padding:0px; width:150px; z-index:200; } .menu li ul a{ display:block; font-size:12px; font-style:normal; padding:0px 8px 0px 8px; text-align:left; } .menu li ul a:hover{ background:#949494; color:#FF0000; opacity:1.0; filter:alpha(opacity=100); } .menu p{ clear:left; z-index:200; } .menu #current{ background:url(removed for thread) top left repeat-x; color:#FFFFFF; } ========================= HTML code for Widget: <div class="menu"> <ul> <li><a id="current" href="(removed for thread)" target="_self" >Home</a> </li> <li><a href="" target="_self" >Methods & Results</a> <ul> <li><a href="(removed for thread)" target="_self">Our Methods</a></li> <li><a href="(removed for thread)" target="_self">See the Results</a></li> </ul> </li> <li><a href="" target="_self" >How to Start</a> <ul> <li><a href="(removed for thread)" target="_self">Starting Options</a></li> <li><a href="(removed for thread)" target="_self">Sign-Up Form</a></li> </ul> </li> <li><a href="" target="_self" >Schedule & Prices</a> <ul> <li><a href="(removed for thread)=dctrh782_10dsmgnqhq" target="_self">Class Schedule</a></li> <li><a href="(removed for thread)" target="_self">Prices</a></li> </ul> </li> <li><a href="(removed for thread)" target="_self" >Coaches</a> </li> <li><a href="" target="_self" >Admin & Media</a> <ul> <li><a href="(removed for thread)" target="_self">Online Payments</a></li> <li><a href="(removed for thread)=0" target="_self">Release Form</a></li> <li><a href="(removed for thread)" target="_self">CFHR Photos</a></li> <li><a href="(removed for thread)" target="_self">CFHR Videos</a></li> </ul> </li> <li><a href="(removed for thread)" target="_self" >Contact</a> </li> </ul> </div> =================== Hey guys, what I'm trying to do seems simple but I can't seem to figure it out. I have a wordpress blog and am formatting the text, I've used line-height, line-spacing and letter-spacing because I want to make it readable. Now what I'm trying to do is align the width of the paragraphs to the images or at least to the widge of the post container which is 585px. I changed the width to 585px and it that didn't help. My site is (havenhart[dot]com) and as an example, see (oneaboveone[dot]com) that site has the text aligned to the image, or atleast te container width. Can anyone offer any resources on how to do this? Thanks. |
|||||||