|
CSS - Color Combinations Suggestion From Designers Needed. Did I Do It Right?
Here's my blog h t t p: // valcun.com. I have made the Base text color as bluish. is there any professional designer here who can suggest something? I am not very satisfied with the look. I am thinking it should look vibrant and attractive to all age groups.
I tried making this bluish text as red but that doesn't look very nice. please suggest how else can i make my blog look attractive. Is it any good? Similar TutorialsDesigners Required My business partner and I are looking for designers with extensive CSS experience to work on a free-lance basis. You must have provable experience of CSS/XHTML and have excellent knowledge of accessability issues. Experience of table-less design is also a must. The work is on-going, this isn't a one off project so even if you're not available at this time, please drop me a line if you'd be interested in being contacted for future projects. I'd be grateful if you could provide as much of the following information as possible : - Name - Location - Portfolio website (or examples of your work if you dont have a portfolio) - Hourly Rate - Number of hours available per week - Email addresses for any clients that are willing to be contacted for a reference. You can reach me on URL . We are based in the UK. thanks dave Hey guys i've got a problem that I just can't figure out a solution for, i've attached a screenshot of the design. Basically there are various textboxes arranged in two columns, but their backgrounds (glows/curves behind the boxes) are causing me problems. The width of the design with the curves is larger than my target resolution (1024x768). I've tried playing around with margins but it makes the design generally very inflexible (all boxes have to be non-expandable that way). Is there anyway anyone can think doing this without a) having the minimum with of the website at 1200px b) positioning the boxes absolutely Cheers I've been messing around with CSS for a little over a month now. I've seen a lot of sites created with CSS and I'm convinced it is the correct way to design web sites. Although there is a vast amount of resources out on the web, I've become somewhat frustrated with trying to implement CSS. Mainly, it seems that getting CSS to work in both Firefox and IE requires you to sell your soul to Lucifer and devote your life to the black arts. So, I want to just stop trying to write pages and get a good book on CSS. There are tons of them out there which is making it hard for me to decide. I usually go with the O'Reilly book's but the CSS one has bad reviews on Amazon. I'm just looking for some input on what books you guys would suggest. Thanks in advance. I have the following web page - www.brooksidetransmission.com/services.asp If you scroll down you will see how I have presented the service categories. What I am after is something like the following: http://www.cssplay.co.uk/menus/drop_lists Put your mouse over the United States. You will see a nicely formatted submenu with 3 columns. I would like to duplicate something like this for my service categories. I tried integrating this into my existing menu but got nowhere. I would like to know how some of you would do this? I thought to put a js function call on the existing <li> for the services link and then show sub menu, BUT I'd rather do this with the css hover. If anyone has any suggestions they'd be appreciated. T Here's the code:
Code: <html>
<head>
<title>Sample Font Shorthand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
div { }
table { width: 100% }
.sttable { background-color: #000080 }
tr { }
td { vertical-align: top }
.sttd { font: bold 12px Arial #FFFFFF }
</style>
</head>
<body>
<table class="sttable">
<tr>
<td class="sttd">Catalog > Categories</td>
<td class="sttd">Cart Total: $ 0.00</td>
<td class="sttd">Date</td>
</tr>
</table>
</body>
</html>
Would someone please tell me why the color of the text isn't rendering white? I'm making a game that revolves around four teams. For developmental purposes, I made the team colors blue, red, green, and yellow. And now I'm at the stage where I'm designing a layout. The theme is set in the 1800's, and my first idea was to have a different color scheme for each team (in accordance with their team color,) but my layouts ended up having nothing to do with the 1800's -- just colors (I want to give a very real effect to this website.) So I tried making a universal layout with a sort of tea-stained, burnt edges, parchment look, with a black background, but I had trouble making it tile nicely (partly the burnt edges, partly the stains in the paper.) So this is where I am. I need help designing a layout! I can change the team colors to whatever, I have beginner/intermediate photoshop skills (though, I'm quite competent,) and all suggestions are warmly welcomed! hello, about the well-known color warnings (and in the best interest of good accessibility practices) is setting "background-color: inherit" a proper solution? it supresses the errors, but does it solve the problem of having good contrast between different elements/the use of custom stylesheets? i'm asking because i have a stylesheet with different classes for text which are used over different background-colors (from the parent elements). so unless i make a class for each possible application of these text styles, i don't see a way to specify a fixed background-color... i hope i explained my issue properly... thanks for any thoughts or suggestions on this Hi, Im trying to validate with CSS 3, but am getting one warning, which I really want to get rid of: Code:
body {
color: #000000;
background-color: #ffffff;
font-family: sans-serif;
font-size: 15px;
}
#header {
clear: both;
}
#topmenu {
width: 100%;
height: 30px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 20px;
font-weight: normal;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 1px;
clear: both;
}
#topmenu a {
width: 150px;
height: 28px;
color: #ffffff;
background-color: #990000;
text-align: center;
text-decoration: none;
border-right: 1px solid #ffffff;
padding-top: 2px;
float: left;
}
#topmenu a:hover {
width: 150px;
color: #990000;
background-color: #ffffff;
text-align: center;
text-decoration: none;
border-right: 1px solid #990000;
float: left;
}
#body {
color: #000000;
background-color: #ffffff;
margin: 10px 0px 10px 0px;
clear: both;
}
#footer {
width: 100%;
color: #000000;
background-color: #ffffff;
font-family: sans-serif;
font-size: 12px;
font-weight: normal;
text-align: center;
border-top: 2px solid #990000;
padding-top: 5px;
clear: both;
}
#footer a {
color: #990000;
background-color: #ffffff;
font-weight: normal;
text-decoration: none;
}
#footer a:hover {
color: #990000;
background-color: #ffffff;
font-weight: normal;
text-decoration: underline;
}
#leftmenu {
color: #000000;
background-color: #ffffff;
width: 19.5%;
padding-right: 0.5%;
float: left;
}
#contents {
color: #000000;
background-color: #ffffff;
width: 58.5%;
padding-left: 0.5%;
padding-right: 0.5%;
float: left;
}
#rightmenu {
color: #000000;
background-color: #ffffff;
width: 19.5%;
padding-left: 0.5%;
float: right;
}
.contentbreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 10px;
clear: both;
}
.menubreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 10px;
clear: both;
}
.footerbreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 2px;
clear: both;
}
.menutoptitle {
width: 100%;
height: 26px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ffffff;
padding-top: 1px;
padding-left: 1px;
padding-right: 1px;
}
.contenttoptitle {
width: 100%;
height: 26px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ffffff;
padding-top: 1px;
padding-left: 1px;
padding-right: 1px;
}
.menu {
width: 100%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
float: left;
}
.menu a {
width: 98%;
height: 19px;
color: #000000;
background-color: #eeeeee;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #990000;
padding-left: 2%;
float: left;
}
.menu a:hover {
width: 98%;
height: 19px;
color: #ffffff;
background-color: #990000;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #990000;
padding-left: 2%;
float: left;
}
.menucontent {
width: 96%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
border-bottom: 1px solid #990000;
padding-bottom: 5px;
padding-left: 2%;
padding-right: 2%;
float: left;
}
.menucontent a {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: underline;
}
.menucontent a:hover {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: none;
}
.subcontentright {
color: #000000;
background-color: #ffffff;
text-align: right;
}
.content {
width: 98%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
border-bottom: 1px solid #990000;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 5px;
float: left;
}
.content a {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: none;
}
.content a:hover {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: underline;
}
.input {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 13px;
}
.menuformcontainer {
color: #000000;
background-color: #ffffff;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
clear: both;
}
.menuformsubcontainer {
color: #000000;
background-color: #ffffff;
width: 100%;
clear: both;
}
.menuformlabels {
color: #000000;
background-color: #ffffff;
width: 50%;
padding-top: 2px;
padding-bottom: 2px;
float: left;
}
.menuformfields {
color: #000000;
background-color: #ffffff;
width: 48%;
text-align: right;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 2%;
float: left;
}
.menuformsubmit {
color: #000000;
background-color: #ffffff;
width: 100%;
text-align: right;
padding-top: 2px;
padding-bottom: 2px;
clear: both;
}
http://jigsaw.w3.org/css-validator/...ut+with_options Please make sure you select CSS 3 and Warnings = ALL in order to see the 32 warnings... Thanks! Yours sincerely, speedbooster! Hey everyone, I am using a template, and I thought i changed all of the colors, however, i am still getting blues and i want them gone. Help me please! Sarah CSS: /* Global Styles */ body { margin:0px; } td { font:11px arial; color:#333333; } a { color: #cc0000; text-decoration:none; font-weight:bold; } a:hover { color: #990000; text-decoration:underline; } /* ID Styles */ #navigation a { font:10px arial; color: #ffffff; text-decoration:none; letter-spacing:.1em; } #navigation a:hover { color: #99CCFF; } #padding { padding:20px 5px 20px 5px; } #calendar td { border: 1px solid rgb(0,51,153); } #noborder td { border: 0px; } #weekdays th { font:11px arial; color: #ffffff; font-weight:bold; border: 0px; padding:2px; } #calheader td { font-weight:bold; } /* Class Styles */ .logo { font:18px times new roman; color: #990000; letter-spacing:.3em; font-weight:bold; line-height:22px; } .tagline { font:11px times new roman; color: #CC3300; letter-spacing:.2em; } .smallText { font:12px times new roman; color: #CC3300; line-height:18px; } .pageHeader { font:30px times new roman; color: #CC3300; letter-spacing:.1em; line-height:38px; } .bodyText { font:11px arial; color:#333333; line-height:24px; } .pageName { font:20px georgia; color: #8F0000; letter-spacing:.1em; line-height:26px; } .subHeader { font:14px times new roman; color: #990000; font-weight:bold; line-height:20px; letter-spacing:.1em; } .navText { font:10px arial; color: #333300; letter-spacing:.1em; } any ideas why this page : http://tampabay-online.org/avaacc/ has blue borders around the images in IE it looks like it should in firefox. is there some work around for this? thanks I am looking a sitting for Peach color like this #000000 not the word. Dose anyone know how to do this or know the sitting for it? Hi Folks, Trying to get the following CSS code for page navigation to work on my site ((See example at bottom centre of this page add.ie/index.php?page=new&cid=6). You can see it working properly here on Yahoo. (h)ttp://uk.search.yahoo.com/search?p=news&ei=UTF-8&rd=r1&fr=yfp-t-501&pstart=1&b=11) #pg {clear:both;color:#3666d4;height:2em;margin:2em 0 2em 250px;} #pg a,#pg strong{border:1px solid #ccdbe4;display:block;color:#3666d4;float:left;margin:0 2px 0 0;padding:1px 8px;text-align:center;text-decoration:none;} #pg a:hover{background:#3666d4;border-color:#2b55af;color:#fff;} #pg strong{border:0;color:#000;font-size:107%;font-weight:bold;padding:2px 6px;} All is working fine, but for some reason when i click on a page number (See example at bottom centre of this page ((See example at bottom centre of this page (add.ie/index.php?page=new&cid=6), that page number jumps up like the picture i have attached. I can't seem to get the <strong> tag to force the text that is NOT a link to show like Yahoo within the other page numbers. Any ideas please? Thanks, S Hi All, I'm Ashley; a new member on this forum. I look forward to helping people out, as well as hopefully getting some of my own questions answered too! I've been designing a website, that I must (must) have up by saturday; I've done all the php back-end development for this site, and it's working great. I'm struggling however with the front-end design. I'd like to add here, not for sympathy for just to clear this up, that I have a visual impairment, so this is the part I struggle with most; Being totally blind, I have to rely on people with site to tell me exactly what's going on when web designing. Basically, I have an html template that looks like this: Code: <html> <head> <title>Test Page</title> </head> <body> <div id="wrap"> <div id="header"> <h1>This is the top header.</h1> </div> <div id="nav"> <ul> <li>This is main item one, with a list nested inside <ul> <li>This is sub item 1.</li> <li>This list should drop down when main item 1 is hovered over</li> </ul> </li> </ul> </div> <div id="content"> <h1>Content</h1> <p>All the main content for the page is placed here. </p> <p>Second Paragraph</p> <p>Third Paragraph</p> <p>Fourth Paragraph</p> </div> <div id="leftnav"> <p>This is the left section. It will hold the controls for changing the text size and sharing the page, as well as site statistics</p> </div> <div id="rightnav"> <p>This is the right navigation section. It contains the fields for a user to login if they aren't currently, and also contains some basic info</p> </div> <div id="footer"> <p>This is the footer.</p> <p>It should be posissioned on the bottom of the page</p> </div> </div> </body> </html> This is what I want to happen; the wrap div is the container for everything on the page, and fills the browser screen. The header div goes along the top of the page, and is the width of the entire screen. The nav div goes underneath the header, with the main nav items posissioned in a horizontal line. When, for example, "item1" is hovered over, a list drops down with sub items. The content div should fill a large area of the page underneath the navigation bar, and holds the page content. It should be the width of the entire screen. 'leftnav' and 'rightnav' should be Underneath the content area, posissioned to the left and the right respectively. They should each fill about half the width of the screen, and should not overlap. The footer should then be posissioned along the bottom and fill the entire width. I'm just not sure how to go about this; i've tried, but everything overlapped, pushed each other out the way, and generally didn't work. If somebody could give me an example that will achieve what i'm trying to achieve (I can add colours etc), It would really be very much appreciated. I've looked through the w3 CSS guides, and am slowly working through them, though am finding it slightly harder without the visual representation of how it works. Thanks for any and all help. I got a question. Can I anyhow create two equally tall div elements which like tables do, would lenghten together when I add content more than default 100% to another of these two elements, and using just pure CSS? I have a website that haves a div element named "body" which contains another div called "right", so the main element is separated in two parts. I've set the height of the both elements to 100% and they are positioned relative. Now, when I add content more than the default 100% to another div, the text will overflow the whole body element. And when manipulating the body div source code by replacing the property height:100%; to min-height:100%; the problem with the height is solved but the right aligned div gets shorter a quite. I have asked for help from another sources also, and some people gave good advices for me to consider using the faux columns method. Well, it would be one solution, as also if I replaced the body element by a table - but I sure want to be aware if there's a solution for this using just plain CSS. Thanks in advance. Here's also the source code: Quote: body,html { margin:0; padding:0; background:#C73F17; height:100%; } #body { margin:auto; height:100%; width:90%; border-left:solid #000 1px; border-right:solid #FFB00F 1px; background:#FFFFCC; } #header { height:70px; border-bottom:solid #000 2px; text-align:center; background:#1c1c1c; } #footer { height:25px; border-top:solid #1c1c1c 1px; background:#000; } #right { float:right; width:150px; height:100%; border-right:solid #FFF 1px; background:#1c1c1c; } #nav { height:20px; border-bottom:solid #000 2px; background:#282828; } http://www.firstinsurancefunding.net Look at the top right button in both browsers. In FF2.0, this shows up WAY to the right. In IE6.x it's fine. I don't have IE7 on my computer to compare it. Can someone provide a fix, or tell me what info you need? Well... I have a stylesheet linked to all my pages and i want to add some text to the top of each page on the site, i have seen it done befour so don't say it is impossible and no it wasn't in php it was something like this: </style> blah blah blah that was at the end of the stylesheet so the texts is written in html not css, anyone know how to do it caus when i use the code i wrote there it dosn't work for some reason <style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } a { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 11px; font-weight: bold; } a:visited { color: #FFFFFF; text-decoration: underline; } a:hover { color: #FFE648; text-decoration: none; } a:active { color: #FFFFFF; text-decoration: underline; } a:link { text-decoration: underline; color: #FFFFFF; } .main_border { border-top: none; border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #333333; } .field_style1 { font-family: Arial, Helvetica, sans-serif; font-size: 10px; border: 1px solid #666666; } .whitebold_12px { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #FFFFFF; } .whitebold_11px { font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-transform: none; color: #FFFFFF; } .arrow_bold { font-size: 14px; color: #FDDB00; font-weight: bold; } .disclaimer {font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #CCCCCC; } .footer_text1 {font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #FFFFFF; } --> </style> <style type="text/css"> .footer_text2 {FONT-SIZE: 9px; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif} A {COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif} A:visited {COLOR: #333333; TEXT-DECORATION: underline} A:hover {COLOR: #cccccc; TEXT-DECORATION: none} A:active {COLOR: #333333; TEXT-DECORATION: underline} A:link {COLOR: #333333; TEXT-DECORATION: underline} </style> This my style tags. I have bunch of links on the page. Now it possible that links could be in different colors and also visted and hover links could be different. When I put class .footer_text2 , it over writes everything that I hade before and all my links get style accorrding to footer_text Hi, I am trying to apply a background color to an item other than the body but I cannot make it display in IE 6 or 5.5. I have tried applying it to both <div>'s and <p>'s. Does IE not support the background-color property outside of the page background? Is something conformable to cellspacing-color? Or can I have change cellspace color? |
|||||||