|
CSS - Css Type Setting Question
I am having no luck using this rule to set text with-in the body tags correctly.
body{font-family: sans-serif; font-size: 11px; color: #CC0000} This line will set the color and family of the text but it doesnt effect the typeface's size or any other parameters either. I have tried both pt's and px's but no luck. When I use the <span> configuration for text all is fine. But when I use a rule as above something doesn't work. Any ideas? Thanks Similar TutorialsWhat I need is as follows div - height:150px width:100%; div - height: *; width:100%;overflow;scroll div - height:150px width:100% I can get this to work if the top and bottom divs are set to lets say 15% and the middle is set to 70% but I want the top and bottom "bars" to keep their size while the middle shrinks The middle row is supposed to scroll horizontally btw and vertically if necessary This is to replicate what we are currently using with 3 frames I can get the "layout" with tables but the scrolling (horizontal) of the middle row wont work. I'd rather not use tables anyway. Any suggestions? Greetings, friends! I have a quick question about CSS. I am fairly versed in CSS 2.0 and the selectors that are used within. However, I am not sure if any specific type of selector is available to help me do what I want. I am looking for a selector that will define styles for an element that contains specific children. To give you an example, let's say that I have an image on my page. That image is assigned the class of "alignleft". Now, let's say that I make that image into a link. I would like to find a CSS selector that allows me to assign style definitions to that link. Let's say my code looks like: Code: <a href="http://www.example.com/"><img src="example-pic.png" class="alignleft" alt="Example Picture" /></a> Now, I know if it was the other way around: Code: <a class="alignleft" href="http://www.example.com/"><img src="example-pic.png" alt="Example Picture" /></a> I could use something like: Code: .alignleft > img However, I am not sure if there is any way to go up a level in CSS. I would envision it looking something like: Code: a < img.alignleft but I can't find anything in the CSS spec that refers to instances like that. Does anyone know of anything? For instance, I would want a spec that looks something like: Quote: E < F - Matches any E element that is the parent of an element F. The specific reason I'm looking for something like this is that I am using the class of "external" to assign a background image to all of my links that lead away from our Web site. However, if that link is an image rather than text, I want to set the background of my link to "none" so that the background image does not interfere with the image itself. Any help would be greatly appreciated. Thank you. Hi, I'm trying to set up three div's as columns, where the left and right divs adjust their width as the page shrinks/expands and the centre div has a fixed width of, say 400px. Also, the left and right div's must be smaller (height wise) to the centre div, but all need to align at the bottom. I've tried the following set up, but it doesn't do what I want... Code:
.centre
{
float: left;
width: 400px;
height: 60px;
border-bottom: 1px solid #000000;
}
.left, right
{
float: left;
width: auto;
height: 30px;
border-bottom: 1px solid #000000;
}
.right
{
clear: right;
}
...
<div class="left">
</div>
<div class="right">
center text
</div>
<div class="right">
</div>
Any guidance on this would be appreciated Thanks for your time. Hi All, I am very new to CSS and i am working on preparing a document of an existing CSS. Can someone tell me if the margins are set as this, margin:0px 31px 0px; Is it top,right and bottom? Thanks Prena I need to have a div element with borders that use background image as border corner background. div must be able to expand in height and width automatically. How can I achieve this? Coding my site up, and I've hit a stump. I've got a box div that I'm putting text in. I try adjusting the height, and it works fine in Mozilla/Firebird, but IE just seems to ignore it (which is causing me problems). Anyone familiar with this? Grrr for some particular reason in Firefox and IE div.userinfo wont stay to its assigned width.. what it is doing is that its expanding its width to fill up the text.. but.. it should just break to a new line. html Code: Original - html Code <div class="container"> <div class="subject">this is for your subject</div> <div class="userinfo">Your memosfasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfsadfasfasdfsadfsadfasdfa</div> </div> <div class="container"> <div class="subject">this is for your subject</div> <div class="userinfo">Your memosfasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfsadfasfasdfsadfsadfasdfa</div> </div> css Code: Original - css Code div.container { border: 1px solid #000000; position: relative; margin: 0 auto; width: 580px; height: 432px; } div.subject { position: absolute; border: 1px solid #cccccc; top: 0px; left: 290px; width: 290px; height: 50px; } div.userinfo { position: absolute; border: 1px solid #cccccc; width: 15px auto; height: 150px; }
div.container {
Anyone knows why? i even changed white-space: nowrap, and etc. <div type="test"> I am interested in the type attribute. The reason is this... I have a Janus GridEx on my asp.net form and I want to add some css styles to it. There is no ID defined, nor a class of which I can inherit. I can't modify the code for this tag so I was hoping I could use the type attribute to identify this div in my css.... This is the code for the DIV I'm talking about: Code: <div type="4" style="position:relative;padding:0px 0px;width:100%;overflow-x:auto;overflow-y:auto;"> Anyone has any experience with this? Thanks! If i want to use the strict DTD, is there an alternative to the target attribute on the <a> link which you are no longer allowed to use? Hi, Not sure if this topic is ok if someone can nail this down here, but I have a question. How good or bad is it to set all the value to zero? Like Code: blockquote, body, dd, div, dt, fieldset, form, h1, h2, h3, h4, h5, input, li, ol, p, pre, textarea, th, td, ul{
margin:0 0 0 0;
padding:0 0 0 0; }
in front of the rest of styles. What about the other tag's, how to zero them out? Or should I enter the CSS default value's? CSS 2 and CSS 2.1 are different with some default value's. How good is this for all browsers in this universe? First I want to call it resetting them to defaults, but thats not the right word I think. Each browser has his own start ( default ) values. And setting them to a defined startvalue is not really resetting, but thats just word nickpicking. Also what's more save Code: margin:0 0 0 0; padding:0 0 0 0; or Code: margin:0; padding:0; is it 100% sure that the latter one overrides all the margin-lefts:10px ( thinking about cascading )? Some comments? Hi, these forums have being a godsend to me so far, providing really useful information on my road to becoming a webdesigner, I wondered if someone could help me with a CSS problem I am having. I want to have a green background behind some text, however, I want the background to just be behind the text not to extend all the way across the screen. I think that the best way to do this is to have a division that I set the length of using CSS and include the text in there, my code so far is as follows: <style type="text/css"> body {background-color:} h1 {background-color: #00ff00} p {background-color:} h2 {background-color: transparent} div.block {style=width:300px} </style> <div style="width: 300px"} <p><h1>THIS TEST</h1></p> </div> <div class="block"> <p><h1>THIS TEST</h1></p> </div> For some reason the div is not tallying with the div.block in the style sheet, if I specify the width of the division in the actual html tag within the body its working fine, can anyone spot what I might be doing wrong. I will give some time back at this forum helping others when I am finished on my current project in exhange for the time people have given up for me. Thanks I am using <input type=image> in my code and setting a background image for this element using css. I am not defining"src" so I get blank image symbol. How do I remove that? Hi guys, Before I go on, here's the page I'm referring to: http://student-consolidation-loans.co.uk/newsite3/ In IE 6 on the PC the layout is how I want it, however, skip over to the mac and it doesn't look correct in any browser (safari, IE, firefox...) The problem is I've given one of the DIVs (the one that contains the white and black diagonally striped background) an auto height so it stretches to fit all the content, but while IE 6 is picking up on this none of the mac browsers are. Is there a workaround? thanks! Code:
<?php
if currentpage != account.php {
$_SESSION['links'] = "display:none;";s
}
?>
then on the external css file i have:
#accountLinks {
<?php echo $_SESSION['links']; ?>
}
?>
\accountLinks id is joined with the submenu. the problem is when i view the main.css from the browser it doesnt display the value of session['link'] but that line... Hi does anybody know how to set a tables properties and also give it a class name in an external css so that when i import it i only have to state the class name, instead of all of its properties. Properties such as border color, background color, cell spacing etc Cheers for the help peeps Andy is there a way to set the target of a class of links using css? the html : target="_blank" is not xhtml compliant. I have used this in my CSS: p { margin-top: 0.5em;} But it renders differently in IE6 and Netscape 7. Is there a method to get this equal in both ? Thanks. A background image is being applied to an image, but I cant find anywhere in the CSS where this color is being applied. Ive also been fiddling with the position of the arrows using margins and padding, but these dont seem to have an effect either. Here is a link to my page: http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=14 Here are the two images in question: http://www.zombiemod.com/rm/nina2/t...ntrols-left.png http://www.zombiemod.com/rm/nina2/t...trols-right.png You can see there is a background color to the images of #f0f0f0 and the positioning isnt correct, im trying to remove the background colour and find out how to reposition the horizontal position of these images. Here is my HTML: Code: <div id="content">
<div id="main-image-container" {if $theme.imageCount == 0}style="display:none"{/if}>
{if $theme.imageCount > 0}
<div id="slideshow-controls">
<ul id="control-buttons">
<li><button id="controls-left">
<img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
</button></li>
<li><button id="controls-play">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
</button></li>
<li><button id="controls-right">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
</button></li>
</ul>
</div>
Here is my CSS: Code: #slideshow-controlsx {
position: relative;
height: 14px;
margin: 0px 0 -58px;
overflow: hidden;
z-index: 100;
text-align: left;
top:200px;
}
#main-image-container > #slideshow-controlsx {
margin-bottom: -50px;
margin:0 auto;
}
#slideshow-controlsx ul {
position: relative;
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none inside;
width:690px;
/* background-color: #000;*/
/* opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=40); Lower opacity for IE since the controls don't hide */
}
#slideshow-controlsx ul li {
float: left;
margin: 0;
padding: 0;
}
#slideshow-controlsx button {
width: 8px;
height: 14px;
/*margin: 0;
padding: 0;*/
/* background-color: #000;*/
padding:0px;
border: none;
text-align: center;
cursor: pointer;
}
Can anyone please tell me where the background colour #f0f0f0 is being applied, and how I should be modifying the code to move the images closer in towards the centre of the image. James I'm just learning CSS, trying to create a simple 3 column layout using floats. I have a background image and would like each column to have a background transparency. I'm able to sort of do this using something like the following: //background: white; //opacity:0.2;filter:alpha(opacity=20); the problem I have is that it changes the transparency of the content I put into the float, not just the background. I tried creating a span and specifying the opacity of that but it only works relative to the transparency of the float. It still doesn't create non-transparency within the float. Hello Friends, I want to place an image bellow my (h1 heading). The image is a 50px-800px box with curved edges both the side. Basically we place an image bellow any text with "background: url('image-location') repeat-x;" css code. But as i told the image have curved edges at both sides. Hence, I have cut the image in 3 pieces namely h1.gif, h2.gif & h3.gif respectively. Now i am confused how can i place it. Please help me! This is the tag i am using <div id="title"> <h1>This is the title</h1> </div> And This is the CSS code bellow, #title { height: 50px; background: url('../img/h1.jpg') no-repeat; background-attachment: fixed; } |
|||||||