|
CSS - Using Css In Forum Post
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 Similar TutorialsHere 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? With all the hype these days about finally meeting CSS specs and designing without tables, I think this topic needs more focus. What do you think? Hello all - I am trying to implement tabs to my forum, I currently have some on there but I like the looks better of the new ones that I am trying to get going. I find that when I get them working (using additional CSS as well as navbar/header edit) it will not work in all browsers. If I post the CSS as well as the navbar/header code would you be able to help me track down my issue? EDIT - I was going to post screenshots but was not permitted Hello! First post here. I'm having a little problem with the my forums and I can't find the problem in the CSS. I was wondering if anyone here had some tips or a solution; It seems longer topic titles seem to effect how squished up the posters posts are; they get squished and pushed up to the right. I'm out of ideas and need some help. If you check any of the other posts on the forum with smaller titles, you'll notice that the posts are fine. It is definately something to do with large topic titles.. Any help would be appreciated. Hi, my CMS is bridged with a forum and the body background color from the CMS is overriding the forum css. I have similar issues with the p and td tags and perhaps more small stuff. How can I resolve the conflicts so I can set the forum styles independent of my Mambo template? Here is an example (body color issue) CMS code: Code: body {
margin: 10px 0px 10px 0px;
padding: 0;
font: 101.5%/1.4em "Trebuchet MS", Tahoma, Verdana, Helvetica;
letter-spacing: normal;
background: #232323 url(../images/body_bg.png) repeat-x center top;
color: #999;}
Forum code: Code: body {
font: 90%/85% Verdana, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 12px 0 4px 0;
}
CSS Forum Posting Guidelines Some very important things to keep in mind before you post your question: Note that if it appears you haven't read this, we're most likely just going to point you to it. BEFORE YOU POST Before you post your question, make sure your X/HTML and css validates! Visit w3.org to validate your X/HTML and css, if you don't, that's the first thing we are going to ask you to do. Invalid X/HTML and/or css gets unpredictable results. X/HTML Validator CSS Validator Here is a sample template you can use to make sure your test code is fully functional: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--Don't add anything above this line, you may change the DTD to match your page-->
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<!--Uncomment the following line and remove the embedded style sheet if your style is external-->
<!--<link rel="stylesheet" href="includes/style.css" type="text/css" />-->
<style type="text/css">
/*add your styles here, or remove this section if your styles are external*/
body{
background-color:#ffffff;
}
</style>
</head>
<body>
<!--Put your x/html code here-->
</body>
</html>
USE YOUR RESOURCES As with all forums, there's a pretty good chance your question has already been answered... but css being what it is, you may not know exactly what you are looking for. Have a look at the resources sticky, or try searching for your problem. BE DESCRIPTIVE Spell it out for us. What do you think it should look like, what does it look like now, what is it not doing "right"... It's amazing (I'm guilty too) how many people post a "Have a look at this, how do I fix it?", but they don't tell us what it's supposed to look like. PROVIDE EXAMPLES Give us a link, or paste your code... we can't read minds, especially through the net. If you are providing a link to your page, make it an actual link using the bbcode tags, rather than just pasting the URL. If your css isn't embedded or inline, provide a link to it too, or paste it if it's not too big. USE A DESCRIPTIVE TOPIC NAME Topics which are simply... CSS Problem Please Help IE not working! Won't get many responses, try and come up with something a little more descriptive... Getting rid of space around floated divs in IE My footer won't stay at the bottom By the way, these are examples of problems that can be searched for... ALL PROBLEMS, BIG and SMALL Remember that the C in CSS stands for cascading, upper level elements have an effect on the lower level elements... If you have a large css sheet and a lot of code on your site, and one thing isn't working the way it should, chances are something else is interfering... try simplifying your code and see if it will work that way... An old debugging technique is to break it down into smaller portions in order to isolate the problem... Mod edit: Stickied, locked and posts removed. If anyone has anything they'd like to add to this guide, please feel free to PM me and I'll add it if needed. Thanks, Jon. I have a layout that has text in a left div and the form input in the right. I want the form input to be 100% width of DIV.standard_field_right not 100% width of the entire page. Can someone give me a hint please. CSS and XHTML below: PHP Code: DIV.standard_field_container { width: 98%; padding: 0.4em; border: 1px solid #8B8B8B; background-color: #E2E2E2; overflow: hidden; } DIV.standard_field_left { width: 10em; float: left; margin-right: 5em; font: bold 0.8em Verdana, Arial, Helvetica, sans-serif; } DIV.standard_field_right { font: normal 0.8em Verdana, Arial, Helvetica, sans-serif; } SPAN.standard_field_type_info { font-weight: normal; color: #ff0000; border-bottom: 1px dashed #ff0000; cursor: help; } INPUT.input_text_field { width: 30em; } XHTML: PHP Code: <div class="standard_field_container"> <div class="standard_field_left"> <span class="standard_field_name"><?php echo $field_definition[1]; ?></span> <span class="standard_field_type_info" title="<?php echo $field_definition[7]; ?>">Information</span> </div> <div class="standard_field_right"> <span class="standard_field_input_area"><input name="<?php echo $field_definition[0]; ?>" type="text" id="<?php echo $field_definition[0]; ?>" maxlength="<?php echo $field_definition[10]; ?>"<?php if ($value_applies == '1') { ?> value="<?php echo $row["$field_definition[0]"]; ?>" <?php } ?> class="input_text_field" /></span> </div> </div> What is your go-to forum for web design (HTML, CSS, JScript, PHP)? I hate to be so spread out across a ton of forums around the same topic, but have yet to find a forum that seems to be very active. Which do you think have huge active communities of knowledgeable designers/developers? I've got an odd bug in IE7 that's got me completely stumped. I'm using drupal for sort of an art/comic site, and I've built my own theme off of the Zen theme, for anyone who's familiar with it. My main page works just fine. Once I get to either the gallery or forum things start to collapse and get weird. My sidebar loses it's positioning, and the width of the list items in the unordered list shrink down to the size of the image or tex they contain, rather than extending to fill their container. The only consistency I can find here is that they're both using unordered lists, but beyond that I'm not sure what's going on. I've tried to go through and swat any obvious CSS and HTML errors, so any advice or insight on this would be much appreciated. eta: looks like I can't post an opening topic with links yet, so I'll have to post them as a reply or something. 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; } 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 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 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. 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'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. 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> =================== 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. |
|||||||