newseed
-
Posts
501 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by newseed
-
He already has padding in his span tag. What you should do it take out the bold for hover or add bold to default link tag. I prefer the latter... a { color: #999999;}a:link { font-weight: bold; text-decoration: none;}a:hover{ color: #000000;} Since the styles above are your defaults you may want to use the div#menu wrapper to define the styles you want to override the defaults thus you keep your current defaults as is and do the following: #menu a { color: #999999;}#menu a:link { font-weight: bold; text-decoration: none;}#menu a:hover{ color: #000000;}
-
You are making overuse of your .iccont class. You already have it defined in your div that is wrapping that whole block of code. The issue is your font-size:1.1em; which is cause the next level to increase the font. It's like math, 1.1 X 1.1 = 1.21. Of course this is just a example but to resolve your current issue is to apply font-size: inherit; to ul.iccont This will prevent it from increasing in size by inheriting the font size from parent level. As for you current work, try to use less ID's and classes thus use a bit of strategy to use less html and css and yet produce the same results. Here's what the code looks like using my suggestion. Look at especially the HTML and how much cleaner it looks. <!DOCTYPE html><html><head><style>.icbg {background-image: url('image.png');background-repeat: repeat-y;font-size: 100%;}.iccont {font-family: Verdana,Geneva,sans-serif;font-size: 1.1em;margin-left: 7%;margin-right: 2%;}.iccont p{text-align: left;}.iccont h1 {text-align: center;font-size: 1.4em;}.iccont h2 {text-align: center;font-size: 1.2em;font-weight: bold;}.iccont h3 {text-align: left;font-size: 1.2em;font-weight: normal;text-decoration: underline;}.iccont ol {list-style-type: decimal;}.iccon ult {list-style-type: disc;font-size:inherit;}a:link {color: #442178;}#icftn {vertical-align: super;}</style></head><body><div class="icbg"><br><br><div class="iccont"> <h1>head1</h1> <p>paragraph</p> <p>paragraph</p> <p>paragraph</p> <p>paragraph</p> <p>paragraph</p> <h2>head2</h2> <h3>head3</h3> <ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item<ul> <li>nested list item</li> <li>nested list item</li> </ul> </li> <li>list item</li> <li>list item</li> </ol> <h3>head3</h3> <ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> <br> <h2>head2</h2> <p>paragraph</p> <h3>head3</h3> <ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> <h3>head3</h3> <ol> <li>list item<span id="icftn"> footnote1</span></li> <li>list item</li> <li>list item</li><ul> <li>bullet list item</li> </ul> <li>list item</li> <li>list item</li> <li>list item</li><ul> <li>bullet list item</li> </ul> <li>list item</li> <li>list item</li> </ol> <p><span id="icftn">1</span>paragraph</p> <p>paragraph</p> <p>paragraph</p> <p>paragraph</p> <p>paragraph</p> <p>paragraph</p> <br><br></div></div></body></html>
-
What you have is both group and context. You can almost do anything to get what you want either to define broad list of styles or a style that is specific for one element overriding the all other styles. p {color: blue;} This is the element selector. #article p {color: red;} This will override any p with the id 'article'. This is called context selector. h1, p{ color: blue;} This is group selectors #articles h1, #articles p {color: red;} This is using context and group selectors. UPDATE: Sorry, didn't mean to supersede you Deirdre
-
OOPS! My bad! It should have been a period instead of a pound sign: div.mylinks {background-color: blue;}div.mylinks a {background-color: lightgreen;}
-
Just wrap a div around the set of links you have like this: <div class="mylinks"><br>[~Most-Used]<a href="www.hotmail.com/?">hotmail.com</a>< br>[~Most-Used]<a href="http://alternativeto.net/">AlternativeToSoftwares</a>< br>[~Most-Used]<a href="http://jsdo.it/vmars316/asdf/edit">jsdo.it javascript</a>< br>[~Most-Used]<a href="http://www.portablefreeware.com/?">portablefreeware.com/</a><br>[Arduino]<a href="http://arduino.cc/forum/index.php#2">~arduino.cc/forum</a>< br>[Arduino]<a href="http://arduino.cc/playground/">~arduino.cc/playground</a></div> Now the CSS: div#mylinks {background: blue;}div#mylinks a {background: lightgreen;} Adjust to suit.
- 8 replies
-
- 1
-
-
- background-color
- color
- (and 1 more)
-
You need more than just a few lines of code to copy over. Here's what you should copy over. Where you place it is up to you. HTML: <ul id="nav" class="sf-menu"> <li><a href="index.html">HOME</a></li> <li class="selected"><a href="about.html">ABOUT ME</a></li> <li><a href="#">MY PORTFOLIO</a><ul> <li><a href="portfolio_one.html">PORTFOLIO 1</a></li> <li><a href="portfolio_two.html">PORTFOLIO 2</a></li> </ul> </li> <li><a href="service.html">SERVICE</a></li> <li><a href="contact.php">CONTACT</a></li></ul> Then you need to copy over all the related css for the menu. CSS: /* stylesheet for sooperFish by www.sooperthemes.com -- author: jurriaan roelofs */html body ul.sf-menu ul, html body ul.sf-menu ul li {width: 180px;}html body ul.sf-menu ul ul {margin: 0 0 0 180px;}ul.sf-menu, ul.sf-menu * {margin: 0;padding: 0;}ul.sf-menu {display: block;position: relative;}ul.sf-menu li {display: block;list-style: none;float: left;position: relative;}ul.sf-menu li:hover {visibility: inherit; /* fixes IE7 'sticky bug' */}ul.sf-menu a {display: block;position: relative;}ul.sf-menu ul {position: absolute;left: 0;width: 150px;top: auto;left: -999999px;}ul.sf-menu ul a {zoom: 1; /* IE6/7 fix */}ul.sf-menu ul li {float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */;width: 150px;}ul.sf-menu ul ul {top: 0;margin: 0 0 0 150px;}ul.sf-menu li:hover ul, ul.sf-menu li:focus ul, ul.sf-menu li.sf-hover ul, ul.sf-menu ul li:hover ul, ul.sf-menu ul li:focus ul, ul.sf-menu ul li.sf-hover ul, ul.sf-menu ul ul li:hover ul, ul.sf-menu ul ul li:focus ul, ul.sf-menu ul ul li.sf-hover ul, ul.sf-menu ul ul ul li:hover ul, ul.sf-menu ul ul ul li:focus ul, ul.sf-menu ul ul ul li.sf-hover ul {left: auto;}ul.sf-menu li:hover ul ul, ul.sf-menu li:focus ul ul, ul.sf-menu li.sf-hover ul ul, ul.sf-menu ul li:hover ul ul, ul.sf-menu ul li:focus ul ul, ul.sf-menu ul li.sf-hover ul ul, ul.sf-menu ul ul li:hover ul ul, ul.sf-menu ul ul li:focus ul ul, ul.sf-menu ul ul li.sf-hover ul ul, ul.sf-menu ul ul ul li:hover ul ul, ul.sf-menu ul ul ul li:focus ul ul, ul.sf-menu ul ul ul li.sf-hover ul ul {left: -999999px;}/* autoArrows CSS */span.sf-arrow {width: 7px;height: 7px;position: absolute;top: 20px;right: 5px;display: block;overflow: hidden;/* making sure IE6 doesn't overflow and expand the box */font-size: 1px;}ul ul span.sf-arrow {right: 5px;top: 20px;background-position: 0 100%;}/* theming the menu */nav {height: 44px;width: 950px;float: right;margin: -20px auto 20px auto;border-radius: 7px 7px 7px 7px;-moz-border-radius: 7px 7px 7px 7px;-webkit-border: 7px 7px 7px 7px;}/* Theming the menu */ul#nav {float: left;}ul#nav ul {padding-bottom: 15px;}ul#nav li a {padding: 3px 25px 6px 25px;font: 170% 'News Cycle', arial, sans-serif;text-decoration: none;margin-right: 2px;} I did not see any script but if the menu doesn't work then you might look for that.
-
You will need to read the Joomla documentation. As I said before, I have not touched it since release 1.5 and that was about 3-4 years ago. However, try to determine which css is considered a default and put it in there. Do the same for the html if you are planning on adding it to the theme's file(s). Otherwise you can add the html to the post/page via the admin.
-
I have not used Joomla since release 1.5 but more than likely there should be a theme editor to allow you to edit the css. I think it's under Template Manager.
-
Creating a link to use a background image does not require any special script. Here's a very simple method: HTML: <a class="speciallink" href="your-url">Text Link with background</a> CSS: a.speciallink {background-image: url('your-image-file-path') Now you may want something more than what I provided here but this is the concept in a nutshell.
-
Since you are a newbie you may be a bit over your head trying to do stuff to existing software/program such as Simple Machine Forum. Internal css will work fine but not so if you are applying a standard css element to another element that has child selectors. Your css could look like this: h1 {color: blue;} But the forum's default css could look like this: #article h1 {color: red;} The #article h1 will take precedence over your internal style. If you want to override the forums default then you need to determine what those selectors are and apply them in the same manner. I would suggest you install Firefbug for Firefox. It will help you find the html and related css to what you want to edit.
-
There are times you want to use position: relative to allow another element within it to be position: absolute. <body><div style="position: absolute; top: 100px; right: 0;">text NOT using relative</div> <div style="width: 500px; margin: 100px auto; position: relative; border: 1px solid #ff0000;"><div style="position: absolute; top: 100; right: 0;">text USING absolute contained with a div using relative</div></div></body> The first div tells it to be placed at the exact location on the screen. The second div is using relative and it will determine the second div that is using absolute to be placed precisely at that location within that containing div.
-
It's using a lot of short-codes and includes and you will need to determine which file or code it's calling on. Since I am not familiar with this type of theme it might be best to ask that provider that developed it.
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
Glad you got it positioned correctly. I like to add that you are really using was too much css to get this kind of results. Not sure why border-radius is being used. Your #bar background is set to black but you have it called in a few other places as well which is redundant. You also need to apply css reset forcing all tags to zero out the default margins and padding. * {margin: 0; padding: 0;} Here's a stripped down css version that you may want to use: * {margin: 0;padding: 0;}#bar {height: 60px;background-color: #000;position: fixed;padding-left: 2%;padding-right: 2%;width: 96%;}#title h1 {line-height: 60px;color: #DF3A01;padding-right: 20px;}#search {color: #FFF;float: left;line-height: 60px;padding-right: 20px;float: none;width:470px;margin: 0 auto;}#buttons {color: #FFF;float: right;padding-left: 0px;}#buttons ul {line-height: 60px;}#buttons li {border-left: 2px dashed #FE9A2E;padding: 5px 5px 5px 5px;display: inline;}
-
This is a browser specific setting. I am not aware of any type of HTML or CSS that will over ride the defaults. The following are the left/right keyboard shortcuts (most browsers)ALT + Left Arrow (go back a page)ALT + Right Arrow (go forwarda page) There might a jquery solution but I don't know of any. You might google 'jquery keyboard shortcut'
-
Give the h1 tag a float: left; You will need to make adjustments to the alignment but that will get your 'search' on the same line.
-
What you are looking for is something like Fancybox or Highslide. (google them). I prefer Highslide over the others.
-
Might be better off using Wordpress for user accounts and posting.
-
vertcally and horizontally lining text at center in div
newseed replied to yaragallamurali's topic in CSS
The css is supported from IE8 or newer. If your target audience is IE7 then you will either have to find a javascript method or add the necessary padding/margins to align them vertically. As for IE7, it's not 2-3 years old. More like 7 years old and it has been superseded by IE8 since 2009 and is no longer supported. -
vertcally and horizontally lining text at center in div
newseed replied to yaragallamurali's topic in CSS
If one line then you can set the line-height to be equal the height of the div. However, in your case you have two lines. Set the div box to use display: table; Now set the text to use the <p> (paragraph) tag. Apply this css to it: p {display: table-cell; vertical-align: middle; text-align: center;} -
Well, think about that. How do you suppose the text 'Column' to behave? Of course it's going to blow out of the containing div. You have a couple of choices. 1. The font size should be changed to fit the size of the box2. Use CSS property word-break to force the word to break. Keep in mind that word-break is not support the same in different browsers.
-
Set the root ul css to position: relative; left: 50%; float: left; Or you can use display: table; margin: 0 auto;
-
HTML: <input class="paypal-bg" width="300" type="image" border="0" alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypalobjects.com/en_US/IL/i/btn/btn_donateCC_LG.gif"> CSS: .paypal-bg {background-color: none; border: 0;}
-
Looks like you will need to get with whomever you got this theme from because the nav has some scripting that applies inline styles to the dropdown menu on hover. Right now it's set to left: -20px. If you can locate that script yourself you might be able to find that call out and change it to right: -20px; .
-
Add a class to that input field and use css to change the background color.
