CSS - Changing Css Div Content
I'm revamping my personal webpage. (What I've done so far is at http://homepage.mac.com/johntstuart/mockup/ )
I've been told there is a way for JavaScript to replace the content of a DIV, when the user selects from the navigation. Can anyone point me in the direction of this JavaScript? And any tutorials? Similar TutorialsHi All, Hopefully I'm asking this in the right place-- this may be more of a CSS/HTML question. I currently have a DIV at the top of my webpage, with it's style as "none." [code] <div id='confirm' style="Display:none;"><p>Item Has Been Updated</p></div> Anyway, I have a little function that changes the display to "block" when an action occurs with database. Doing so, it display the DIV fine. However, it moves the "entire" page (meaning the rest of my DIVS) downward. This is kind of an eyesore when everything moves like that. Besides moving the DIV to the bottom of the page, how would I achieve displaying the DIV at the top without shifting the rest of the content downward? Thanks very much. i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code: .statusDiv { clear: both background-image: url(../png/disclosure_triangles/blue_block.png); height: 20px; margin-bottom: 1px; } This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code: #contentBlock { position: absolute; top: 130px; left: 200px; height: 101%; /* Hack to force vertical scroll bars */ right: 280px; min-width: 400px; visibility: visible; display: block; } .statusDiv { clear: both background-image: url(../png/disclosure_triangles/blue_block.png); height: 20px; margin-bottom: 1px; } .disclosureCollapsed { background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png); display: block; text-align: right; /*position: absolute;*/ float: left; top: 0px; left: 0px; width: 18px; height: 20px; } .disclosureCollapsed:hover { cursor: pointer; } How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken http://www.hybridillusions.com/wordpress/?m=200712 Still working on it, but something caught me and I'm clueless. See, I'm still learning Tableless CSS, and well... I'm not sure how to have it so that the content doesn't run over the footer like that. As it should be more like... http://www.hybridillusions.com/wordpress/ For CSS reference, here is where the css file is located: http://www.hybridillusions.com/wordpress/wp-content/themes/simplistic/style.css Thanks in advance! I have a header.inc and a css style sheet that are called to each page of a website via php. In the style sheet there are two styles that I would like to change depending on the section of the website. For example: in the style sheet css id "subnav" has background: #E8EDF5 and cssi id "subtitle" has background #E8EDF5 however in each major section of the website I would like to change the background colors of the divs that have id "subnav" and "subtitle". Is there type of php statement that I could place at the top of my website pages that would allow me to specify the colors of these two css ids? Hope I have made this clear. Anyone know why the margins change on the links when I hover over them with IE. (check left column navigation) http://section31.us/temp/tortilla/tortilla.html Note: This works fine on firefox, but goes ape**** on IE. Hi am looking for help changing a form select box with css. I am trying to get the select box in line with the rest of the scroll boxes and arrows on my site.... http://www.peteromoore.com/site3/brochure.htm is there any way to change the select box arrow to match the arrow beside it??? any help would be appreciated. hey all, so im way behind the times when it comes to creating webpages with div's instead of nested and renested tables. I can nest tables with the best of them but when it comes to using div's and css instead i just can't figure out how to precisely place things! Does anyone know of a guide that explains how to use divs effectively instead of tables? thanks - legit Hello, I have been looking all ovet the forums and google and cant find a code to do this. what i am trying to do is when someone prints a page, i want the footer that is automataly printed at the bottom of the page to change. Lets say your on www.yahoo.com and you print the page. the footer will say http://www.yahoo.com what i am trying to find is a code that i can change the footer to say whatever i wanted. so if your on yahoo.com and press print it says "HELLO" (for example). Thanks In Advance. I need some help. I'm starting out with php and i'm already stressing out. Here's the challenge: I have to make a page that contains 3 radio buttons the radio buttons control which color font you'll like to display on that page the page must reference itself (no outside css stylesheet) I must use the switch function to switch the stylesheet. So far, this is what I have. Can someone help me figure out what I'm doing wrong? Thank you. Dan --------------clipping starts here--------------------- <html> <head> <title></title> <body style="font-family:Arial, Helvetica, sans-serif; color: green;"> </table> <tr> <td> <form name="stylecolor" method=POST" action asgn_2j.php"> Green <input type="radio" name="style" value="a"> Blue <input type="radio" name="style" value="b"> Red <input type="radio" name="style" value="c"> <INPUT TYPE=HIDDEN NAME=stylecolor VALUE=true> <INPUT TYPE=submit NAME="SUBMIT" VALUE="Submit"> $stylecolor=$HTTP_POST_VARS['stylecolor']; switch($stylecolor) { case 'a' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: green;">)' ; case 'b' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: blue;">)' ; case 'c' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: red;">)' ; default: echo 'you didn't choose' ; break; } </form> </td> </tr> </table> </body> </html> Hi, how can I set the <a> tag (of <a href...) to be of some color in one div and some other color in another div? i am sorry 2 have wasted ur time why cant i delete my threads anymore I don't know if this is possible but I want to change the background color of some tables programmaticly basically what's happening is I'm ruining some asp.net code which is checking to see if something is approved or not. if it's approved then I want to change the color of the background for one of the HTML tables. if it's not approved then i want to leave it as the default background color. is there a way to do this? Thanks for the help Hi, My side navigation seems to be moving down when main content is added to a page for some reason, any ideas why and how i can fix this: Thanks, Mike ------- Thanks fixed! Hi, I have this site, you see home in red, It is through css. http://natradersonline.com/temp/index.php what i want when I click on some other menu item, it turn red and 'home' goes back to normal color. Is it possible to change css throght javascript, I have an onclick even in each menu, i tried something like this , but that gives me error. Code: document.getElementById('home1').class= 'first active'; I appreciate your help. Thanks hi, iam having a div tag in that div i have table.. <div style="width:658;height:265px; overflow:auto;" > <table> </table> </div> now i need to change the color of scroll bar of this div tag. i tried with this the css .myScrollBar { scrollbar-face-color: #FF0000; scrollbar-shadow-color: #0000FF; scrollbar-highlight-color: #00FF00; scrollbar-3dlight-color: #FF00FF; scrollbar-darkshadow-color: #00FFFF; scrollbar-track-color: #FFFF00; scrollbar-arrow-color: #000000;} <div style="width:658;height:265px; overflow:auto;" id='myScrollBar'> but its not working.. Regards, Hi, I'm aware that you can change the appearance of an image using CSS (filters etc), but I actually need to change the colour of an image....how?? Initially I tried adding style="filter:gray", but that didn't work. It's basically for a site that's going to be skinned, but I don't want to have to go through the laborious(sp?) process of editing all of the images. Basically, if the image is blue, I want to overlay something onto it to make it look red, or brown, or white etc. Can anyone recommend a method? Cheers Ok I simply cannot figure this one out. All I'm trying to do is change the font color so that the text like "Choose a Username" is not black but white. Here is the link to the page http://www.technicalhypnotherapy.com/wordpress/?page_id=128 This is my CSS. I think the more relevant tags are the last ones. Code: /* Theme Name: Pixel Theme URI: http://85ideas.com/public-releases/wordpress-theme-pixel/ Description: Dark WP theme with 2-3 column layout, dropdown categories menu, multiple widget-ready placement and Feedburner email form integrated, easy to customize. Enjoy! Author: Sam @ 85ideas.com Author URI: http://85ideas.com/ Version: 2.0.2 Tags: black, blue, three-columns, two-columns, threaded-comments, fixed-width, theme-options, right-sidebar, sticky-post . Released under <a href="http://www.opensource.org/licenses/gpl-license.php">GPL</a>. . */ /* Defaults */ * { margin: 0; padding: 0; } :focus { outline:0; } h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 10px 0; } h1, h2, h3, h4, h5, h6 { font-family: Verdana; } hr { color: #333; border: 1px solid #121212; } pre { height: auto; overflow-x:scroll; } fieldset { margin: 0; padding: 0; border: 0; } dd { padding-left: 15px; } p { font-size: 9pt; } a { color: #6598b8; text-decoration: none; } a:hover { color: #222; text-decoration: underline; } a img { border: none; } blockquote { background: #070707; border: 1px solid #060606; padding: 5px 15px; margin: 10px 10px 5px 15px; font-style: italic; color: #fff; } code { color: #3366cc; font-style: italic; } strong { font-size: 110%; } body { text-align: center; margin: 0; padding: 0 0 15px 0; font-family: trebuchet ms, arial, helvetica, sans-serif; background: #000 url(images/bgbody.jpg) top center no-repeat; color: #eee; } /* Header and wrapper */ #wrapper { margin: 0 auto; width: 960px; text-align: left; padding: 0; } #header { padding: 0; margin: 0; height: 80px; text-shadow: 0 0 4px #555; } #header #topright { text-align: right; float: right; width: 930px; margin: 3px 0 0 0; } #header #topright ul { list-style: none; padding: 0; margin: 0; } #header #topright li { display: inline; } #header #topright li a { color: #fff; font-size: 9pt; padding: 0 0 0 25px; text-transform: lowercase; } #header #topright li a:hover { color: #ccc; text-decoration: none; } #header #logo { margin: 0; padding: 0; } #header h1 { padding: 0; margin: 0; } #header h1 a { color: #fff; font-size: 17pt; text-decoration: none; } #header h1 a:hover { color: #eee; text-decoration: none; } #header span { padding: 0; color: #eee; font-size: 10pt; } /* Menu */ #catnav { margin: 20px 0 0 0; padding: 0; clear: both; height: 44px; width: 960px; } #nav { list-style: none; margin: 0; padding: 0; } #nav ul { margin: 0; padding: 0; } #nav li { float: left; margin: 0; padding: 0; } #nav a { display: block; line-height: 44px; margin: 0; padding: 0 20px 0 15px; font-size: 10pt; color: #fff; letter-spacing: -1px; } #nav li a:hover { color: #6598b8; text-decoration: none; display: block; } #nav li ul { list-style: none; position: absolute; width: 150px; left: -999em; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } #nav li li { float: left; margin: 0; padding: 0; width: 150px; } #nav li li a { width: 150px; height: 24px; line-height: 24px; color: #fff; border-top: 1px solid #131f27; background: #040404; margin: 0; padding: 5px 20px 5px 15px; } #nav li li a:hover { border-top: 1px solid #131f27; background: #000; padding: 5px 20px 5px 15px; } #nav li:hover, #nav li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */ position: static; } #toprss { float: right; margin: 10px 15px 0 0; display: inline; width: 65px; line-height: 41px; } /* Top Content */ #main { margin: 5px 15px 0 15px; clear: both; width: 930px; padding-bottom: 5px; } #contentwrapper { float:left; width: 560px; margin: 0 0 15px 0; padding: 0; } #contentwrapper2 { float:left; width: 900px; margin: 0 0 15px 0; padding: 0; } #contentwrapper .pageTitle, #contentwrapper2 .pageTitle { margin: 15px 0 10px 0; font-size: 14pt; letter-spacing: -1px; color: #fff; font-weight: normal; background: url(images/bg-trans.png) repeat; padding: 5px; } .topPost { margin: 0; padding: 0; font-size: 9pt; } .topPost h2.topTitle a { font-size: 15pt; font-weight: normal; color: #fff; letter-spacing: -2px; } .topPost h2.topTitle a:hover { text-decoration: none; color: #abd1ea; } .topPost p.topMeta { padding: 0; margin: -10px 0 0 0; font-size: 9pt; color: #cdcdcd; } .topPost p.topMeta a { text-decoration: none; color: #fff; } .topPost p.topMeta a:hover { color: #ccc; text-decoration: underline; } .topPost div.topContent { font-size: 9pt; color: #efefef; margin: 8px 0; } .topPost div.topContent p { font-size: 1.05em; line-height: 1.6em; } .topPost div.topContent a { text-decoration: underline; color: #fff; } .topPost div.topContent a:hover { text-decoration: underline; color: #ff9933; } .topPost div.topContent ul, .topPost div.topContent ol { padding: 0 0 0 30px; } .topPost div.topContent ul li, .topPost div.topContent ol li { font-size: 1.05em; color: #eee; } .topPost span.topComments, .topPost span.topMore, .topPost span.topTags { font-size: 9pt; font-style: italic; background: url(images/bg-trans.png) repeat; padding: 8px 10px; margin-right: 5px; line-height: 27pt; color: #fff; border: 1px solid #111; } .topPost span.linkpages { font-size: 9pt; font-style: italic; color: #fff; margin-bottom: 10px; display:block; } .topPost span.linkpages a:hover { color: #ddd; } .topPost span.topComments:hover, .topPost span.topMo hover, .topPost span.topTags:hover { background: #040404; } .topPost span.topComments a { color: #fff; background: url(images/comments.gif) left no-repeat; padding-left: 20px; line-height: 27pt; vertical-align: middle; } .topPost span.topMore a { color: #fff; background: url(images/more.gif) left no-repeat; padding-left: 20px; line-height: 27pt; vertical-align: middle; } .topPost span.topTags em { background: url(images/tags.gif) left no-repeat; padding-left: 20px; line-height: 27pt; vertical-align: middle; color: #0a0a0a; } .topPost span.topTags a { color: #fff; line-height: 27pt; vertical-align: middle; } .topPost span.topComments a:hover, .topPost span.topMore a:hover, .topPost span.topTags a:hover { color: #fff; text-decoration: underline; } #nextprevious { margin: 10px 0 5px 0; } #nextprevious a { color: #eee; text-transform: lowercase; border: 1px solid #111; padding: 5px 8px; font-size: 10pt; line-height: 1.4em; } #nextprevious a:hover { color: #fff; } /* Comments */ #comments { margin-bottom: 10px; margin-top: 15px; background: #040404; width: 530px; /* fixes bug in IE7 where putting focus on the text makes it disappear behind the background. yeah, weird. they call it a dimensional bug. */ border: 1px solid #090909; padding: 0px 15px 10px 15px; color: #fff; } #comments h3 { font-size: 10pt; font-weight: normal; color: #fff; margin: 15px 0; padding: 0; } #comments p a { color: #6598b8; } #comments p a:hover { color: #fff; } #comments p { padding:0; margin: 7px 0; } ul.commentlist, ul.trackback { list-style-type: none; margin: 10px 0; font-size: 9pt; } .commentlist li, .trackback li { margin: 10px 0 15px 0; padding: 10px; background: #080808; border: 1px solid #040404; list-style-type: none; } .commentlist li.alt { background: #000; border: 1px solid #020202; border: none; margin-top:10px; } .commentlist li.cleared { background: transparent; border: none; } .commentlist a:hover { color: #eee; } .commentlist a.gravatar { float: left; margin: 0 15px 10px 0; width: 60px; } .commentlist .commentbody { margin: 0; padding: 0; } .commentlist .commentbody p a { text-decoration: underline; } .commentlist cite { font-size: 10pt; font-style: normal; color: #ddd; } .commentlist small.commentmetadata a { color: #666; } .commentlist p { color: #dedede; } #respond { clear: both; margin-top: 15px; } textarea#comment { width: 450px; background: #fff; color: #111; padding: 10px; } #comments #submit { margin: 0; } #extrastuff a {color:#999; font-size:0.8em;} #extrastuff a:hover {color:#6598b8; text-decoration:none;} #extrastuff #rssleft {float:left; width:250px;} #extrastuff #trackright {float:right; width:180px; text-align:right;} /* Welcome section */ #main #welcome { margin: 0 0 20px 0; padding: 0 0 5px 0; background: url(images/bg-trans.png) repeat; } #main #welcome h2 { font-size: 14pt; font-weight: normal; color: #fff; letter-spacing: -2px; margin: 0 10px; padding: 10px 0 3px 0; } #main #welcome p { font-size: 9pt; color: #eee; margin: 0 10px; padding: 6px 0; } #main #welcome a { text-decoration: underline; color: #ff9933; } #main #welcome a:hover { color: #6598b8; } #main #welcome form { margin: -5px 0 0 0; background: transparent; /* required for IE */ } #main #welcome #feedbox { border: 1px solid #ccc; padding: 2px 1px; width: 180px; } .submitbutton { margin: -5px 0 0 5px; background: #010101; color: #fff; font-size: 8pt; padding: 3px 6px; vertical-align: middle; border: 1px solid #111; } .submitbutton:hover { cursor: pointer; background: #050505; } /* Sidebars */ #sidebars { margin: 15px 0 0 0; float: right; width: 340px; color: #eee; } #sidebars .sidebarbox { background: url(images/bg-trans.png) repeat; padding: 8px 15px; } #sidebar_full { padding: 0; margin: 0; } #sidebar_left { float: left; width: 160px; } #sidebar_right { float: right; width: 160px; } #sidebars h2 { margin: 0; padding: 0 0 8px 0; font-weight: normal; font-size: 11pt; color: #fff; letter-spacing: -1px; } #sidebars table { width: 130px; } #sidebars ul { margin: 0; padding: 0 0 5px 0; } #sidebars li { margin-bottom: 20px; list-style: none; font-size: 9pt; } #sidebars li ul { padding: 0; } #sidebars ul ul li { margin: 0; padding: 2px 2px 2px 16px; color: #eee; background: url(images/bullet.gif) left 8px no-repeat; line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */ } #sidebars a { display: inline; color: #eee; } #sidebars a:hover { color: #6598b8; text-decoration: underline; } #sidebars p { padding: 2px 0; font-size: 9pt; color: #eee; } #tag_cloud a { display: inline; } #sidebars ul.children li {border-bottom:none;} #sidebars ul.children {margin-bottom:0;} /* Before footer */ #morefoot { background: #000 url(images/bggrad.jpg) top left repeat-x; border: 1px solid #070707; padding: 15px; color: #dfdfdf; margin: 0 0 10px 0; } #morefoot p { margin: 5px 0; padding: 5px 0; } #morefoot ul { list-style-type: none; margin-top: 5px; } #morefoot ul li, #morefoot p { font-size: 9pt; } #morefoot a { text-decoration: underline; color: #ddd; } #morefoot a:hover { text-decoration: underline; color: #6598b8; } #morefoot h3 { font-size: 12pt; font-weight: normal; color: #dfdfdf; letter-spacing: -1px; border-bottom: 1px dotted #444; margin: 0; padding: 0 0 2px 0; } #morefoot #searchbox { padding: 1px; width: 180px; } #morefoot .col1 { float: left; width: 340px; } #morefoot .col2 { margin: 0 25px; } #morefoot .col2, #morefoot .col3 { float: left; width: 260px; } #morefoot li { padding-left: 20px; margin-bottom: 5px; background: url(images/more.gif) left 2px no-repeat; line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */ } /* footer*/ #footer { clear: both; background: #000; border: 1px solid #070707; padding: 15px 15px 10px 15px; } #footer p { font-size: 9pt; color: #bbb; padding: 0; } #footer a { color: #bbb; text-decoration:none; } #footer a:hover { color: #fff; } #footerleft { float: left; width: 500px; } #footerright { float: right; width: 300px; text-align: right; } /* Misc */ .highlight { color: #222; font-weight: bold; } .cleared { margin: 0; padding: 0; clear: both; } .alignleft { float: left; margin: 10px 15px 5px 0; } .alignright { float: right; margin: 10px 0 5px 15px; } .aligncenter, div.aligncenter { margin: 10px auto; text-align: center; display: block; } img.alignleft { float: left; margin: 10px 15px 5px 0; } img.alignright { float: right; margin: 10px 0 5px 15px; } img.aligncenter { margin: 10px auto; text-align: center; display: block; } .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; /* optional rounded corners for browsers that support it */ -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .wp-caption img { margin: 0; padding: 0; border: none; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; color: #111; } #reg-form .formleft { background: none !important; color: #fff;} #account-form { background: none !important; color: #fff;} |