|
CSS - Need A Little Help With Text Settings In .css...
Hello Again,
My new site design for www.everything.ie is finally coming together mostly due to the great help I've been getting here. The next little problem I need help with is this. Have a look here first: http://www.grahamvard.com/everything.html Look at the headings for the catagories (grey background with red writing). I'm trying to replicate them on my test site but can't quite get it right. Look here to see my attempts: http://www.eveythingfree.buildtolea...fieds/index.php It's basically alright but I want to make the grey headings boxes bigger so they occupy almost the full width of the 3 columns just like in the example page. Because this part of the page is controled by a php script which generates the text and layout, the only thing I can alter is the style sheet in this case the heading font, .cfmaincat Here's the piece of the .css that controls the heading: Code: .cfmaincat {
FONT-SIZE: 11px;
COLOR: #cc0000;
FONT-STYLE: normal;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: none;
background-color: #e9e9e9;
width: 100%;
height: 100%;
}
I can't work out what I need to change to fix this, I really hope some of you can. I'm sure it's fairly straightforward, I just don't know what to do. I tried increasing the padding but because the length of words of the heading vary, so too do the grey boxes generated this way. I need them to be all the same size, like in the design example. Many Thanks, Robert Similar TutorialsI need to change some page setup setting for print like orientation, headers and footers Is it possible to define it in CSS. Hello all! Is there a way to set a resolution % for a certain type of resolution size and any above that resolution to another specific % For example I want it to be: 1024x 768 : width : 90%; and anything higher than 1024x 768 to be 80% since 90% on a resolution higher than 1024 for my navigation is just too make of a banner. Please help/advice. Regards, Kingofqueens. I've got an image placed inside a div tag where the div is set to a height and width of 100%. The div has a "fixed" position with a "left" value set to "-36px", which ensure's it shows up exactly where I want it to. Everything that I setup in the style sheet works fine with Firefox 1.5x; the problem - big surprise - is that it doesn't work at all in IE6. Basically what's happening in IE is that the scroll bars are still showing up (which I don't want to happen) and it doesn't appear to be recognising the negative-positioning either. I'm just now learning to use div tags so there's probably some trick I haven't figured out yet. Here's the code I'm using. Code:
<style type="text/css">
<!--
body, html {
height: 100%;
margin: 0;
padding: 0;
background-color: #566f5f;
background-image: url(images/bg.gif);
background-repeat: repeat-x;
text-align: center;
}
#myTable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: fixed;
left: -36px;
}
-->
</style>
</head>
<body>
<div id="myTable"><img src="images/picture.jpg" width="1071" height="738" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="812,437,828,463,1038,409,1018,390" href="mailto:info@email_address.com" alt="Contact Us" />
</map></div>
As I mentioned, it works great in FF but not in IE. If anyone has any ideas or suggestions it would be a massive help Thanks! Hi, I've been struggling for a long time now about how to create a CSS menu with opacity of whatever rating. If anyone can help me out by telling me how or a good code source place please please let me know. I found a software which costs a $139 and i really feel its not worth it. So if someone can please help me out. Thanks. I've found out that IE and Firefox both handle CSS page structure differently. I have a CSS container of width: 740px Height: 960px and IE prints the page with extra spaces at the top and bottom while this same setting is a bit short both width and height wise in Firefox. How do I compensate for both two browsers by using the same CSS file? I don't want to create different CSS for each browser. I have FF 2.0 and IE 7. However, I assumed many of my users will still be using IE6. Any help is appreciated. Happy New Year! I'm having issues with my website in progress, http://www.vilardojardim.com/about.html Everything seems to be displaying fine in Firefox, Safari and Explorer 8.0.6, but the IE 'Compatibility View Settings' makes the layout go all wiggy. Is there any way of automatically turning this off? Or, can someone help me out with a way to adjust the CSS to avoid the problem altogether? Thanks in advance for any assistance. Hi, I have the definition of the <body> tag in my external CSS file as follows: body { background:URL("fundo5.gif"); scrollbar-arrow-color: yellow; scrollbar-base-color: black; scrollbar-dark-shadow-color: yellow; scrollbar-track-color: green; scrollbar-face-color: blue; scrollbar-shadow-color: white; scrollbar-highlight-color: silver; scrollbar-3d-light-color: black; } However, this settings do get displayed on IE 6.0 Do I have to set any other properties so that I can change the colors of the scrollbar? thanks in advance Daniel I have done my best to GOOGLE this problem but am not coming up with anything. I'm fairly certain that there is some setting/code that I need to add in CSS that would make this error go away. When I view my site in INTERNET EXPLORER, the main content box is shoved down almost below the sidebar/nav menu. The site works fine in FIREFOX & CHROME. I was hoping someone could help me. I have attached a picture of what it looks like in IE. I would like to know if anyone has done something like this - I need to have the look and feel of a site totally configurable through a web interface. All data is going to be stored in a database and I would like to know whether I can autogenerate or update a style sheet based on data from a database. Has anyone done this? Or is this the wrong approach to take in such a case? I also have several clients using the same site, each needing to have their own configurations. I would like to avoid having to have a separate style sheet for each client if possible. Can the properties in a stylesheet be set dynamically on a session per session basis? I am using wordpress for my blog/site. I am using Freshnews theme from woothemes as the theme for the blog. Here is the link: demo.woothemes.com/freshnews The font is not that good and it is way too small and the spacing is bad (too congested). How do I change the fonts, size, spacing (line and paragraph) throughout the blog. I know I would have to change it somewhere in the stylesheet. But where exactly and how? And what are the ways to get this done? Should I install a font somewhere? Should I use webfonts (like google webfonts)? What is the advantage in using this? or what are the other ways? i have images, but i have this Code: * a {
text-decoration:none;
font-weight:bold;
color:#665637;
}
* a:hover {
color:#B39760;
border-top-style: double;
border-top-width: 1px;
border-top-color: #665637;
}
and my anchored images take on the hover property. how can i stop them from doing this and just stay as they were? Hi All, I'm new to the forum. My website's Index page is losing all my body font and color settings, though layout is correct. All of the subfolders' index pages and other pages throughout my website remain unaffected. I've sanity checked it all, and it validates OK. I have an email in to the webhost for some input, but I hoped to get some advice from other CSS-ers who might be in the know. My website is: NickiGreenwood.com I am a romance author and sideline-web-design-junkie. Any help, advice, or even a point in the right direction would be a huge, huge help. Thanks, all. Nicki Greenwood - Romance Author Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced. any idea ? tutorial? let me know if i need to explain more. can someone help me with this? here is the page&css I have been working on... the page file the css file I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site? this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!! I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example: Code: <html> <body> <td><p style="text-align:right">Google</p></td> <td><a href="http://www.google.com" style="text-align:right">Google</a></td> <td><a style="text-align:right" href="http://www.google.com">Google</a></td> <td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td> <td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td> <span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span> </body> </html> The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions? (My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.) I saw a website that was throwing text that was written and recalling it with a link into a textbox...are there any tuts or anyone help me out with this one thanx aim rpduece i have almost perfected the text wrap for this page.... http://defunctgames.com/helpfix/relevent.php4 problem is, i put a margin-top:50px on the image, and i want the text above the image, to flow all the way to the left. thus fully wraping the text. Hi. See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should. Please also read some comments in the code. Code: <html><body><center><br><br> Why does image not force the outermost span to be at least as high as image?<br> If the text are long enough and gets below the bottom border of image it look good though.<br><br> NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br> In my real application I'm using an <a href=" ...> around the outer span in examples below.<br> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0"> </span> <span style="display: block; color: white;"> Text here. </span> </span> </td></tr></table> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left"> Text here. </span> </td></tr></table> </center></body></html> Hi, Howdo you get text and and image on the same line. I want text and 2 images on the same line but the image appears on the next line like a <br> has been entered. There is plenty of room for all data.Each has its own <div>. |
|||||||