|
CSS - Holy Expletive! Wow! I Must Post 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. Similar TutorialsOMG! I just clicked on A List Apart, and it's GONE! What's happened? Surely they didn't forget to...renew??? Have a look at this page http://aenui.com/test/hg.html It is exactly the same as the wrapper-free holy grail layout as demonstrated on AListApart (http://www.alistapart.com/d/holygrail/example_4.html), except that I added 2 more divs in the center column. I floated the 2 divs to the left and I expect the 2 divs to start stacking side by side but no, it doesn't do that. Apparently this only happens in the holy grail layout. Does someone have a fix? I'd hate to abandon the otherwise elegant holy grail layout just because of this. I am following the layout described in A List Apart's In Search of the Holy Grail layout article. The layout itself is working in FF3, IE7, and IE6. But I deviate from the article in a couple of points. The equal column heights are not too important to me. Instead, I am employing a faux-column technique to have #left #center and #right all appear to stretch to the bottom of the page. This is how my HTML is setup. Code: <body>
<div id="page">
<div id="header">
<div class="layoutContainer">
<div id="primaryContent" class="column">
<div id="leftBar" class="column">
<div id="rightBar" class="column">
<div id="footer">
The left faux-column and center background image is specified in my "page" div. I align the BG image to the top left. This works great! My right faux-column background image is specified in the "layoutContainer" div. Aligned to the right, this works well in FF3, works with some weird kinks in IE7, and does not work at all in IE6. IE7 cuts off some of the background-image for some reason, making it appear more to the right than the end of the actual page. IE6, however, does not display the background-image for #layoutContainer at all. I have tried many fixes but haven't gotten anywhere so far. Here is my CSS: Code: #page{
font-size:1.1em;
background:#fff url(../images/common/page-bg.gif) top left repeat-y;
}
#header{
background:url(../images/common/header-darkBlue.jpg) top right repeat-x;
overflow:hidden;
clear:both;
}
.layoutContainer{
overflow:hidden;
padding-left:210px;
padding-right:251px;
background:url(../images/common/secondaryContent-bg.gif) repeat-y top right;
}
#primaryContent {
padding:10px 15px 0 20px;
width:100%;
}
#leftBar{
margin-left:-100%;
width:210px;
padding:0;
right:245px; /* leftBar fullwidth + primaryContent padding */
}
#rightBar{
width:204px;
padding-left:12px;
margin-right:-251px; /* rightBar fullwidth + primaryContent padding */
}
#footer{
clear:both;
}
.column{
position:relative;
float:left;
}
IE6 CSS: Code: #leftBar{
left:216px;
}
IE7 CSS: Code: .layoutContainer{
background-position:96.5% 0;
}
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; } 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 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 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 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 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. 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'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 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? 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. 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. Hello guys, I have beginner CSS experience. I am using a free wordpress theme. I have begun to modify the theme and have run into a problem. I have checked all over the web for resources to resolve this issue to no avail. I have used the CSS Validator and received some errors nothing that affects this. ISSUE: When clicking "Read More" the image appears twice, once as the limited size and once as the full size. I would like only the first image to appear not the full size one too. SITE: havenhart[dot] com Any help would be super. Hi all, Been having a problem that's been driving me crazy lately. On my blog www.mytechnicalinterviewexperience.com, I'm getting a small dot that's appearing right between the top of the main post area and the right sidebar. If you see the text "subscribe" at the very top of the right side bar, the dot is up and to the left with respect to that. Anyways, the dot is probably hardly noticeable to visitors, but me being extremely anal, I'd like to try and get rid of it. I notice that it has something to do with my amazon associates recommendation widget which is further down the right side appear. It only appears after the recommendations widget finishes loading. Does anyone know how to fix this? Thanks, MyTechIntExp |
|||||||