|
CSS - Defining Div-size
Is it possible to define the size of a DIV, by distance to the edges?
Similar TutorialsI've read up, and have always used a bit of CSS. I'm redoing my site, and noticed something different between Mozilla and IE. Personally, I'd ditch IE, but 98% of my viewers use it, so I can't. Basically, in IE, the following works: Code:
P
{
color: black;
font-size: 10pt;
font-family:tahoma;
}
myown
{
color: blue;
font-size: 10pt;
font-family: Tahoma;
}
<myown>This is my text</myown>
When I run it in IE though, it basically ignores the self-defined tag, and requires me to use a pre-defined keyword. I don't want to use "P", b/c it carries the html<P> tag characteristics... a new line in this case. Thanks. Hello I have defined the following rules for anchors: Code:
a:link {
color: green;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:hover {
color: blue;
text-decoration: underline;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:visited {
color: orange;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:active {
color: red;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
I have 2 links in the site: Code: <a href="1.html">1</a> <a href="javascript: void test();">Test</a> The first link obeys the rules defined above The second link doesn't obey the hover rule for some reason. My only guess is that triggering JavaScript code from links may cause this problem. I am testing this on IE6 On Mozilla and Opera both links work fine I would appreciate any help very simple. this may sound strange, but i figured css would be the easiest solution. i simply have one of 2 characters that will display in each TD of a table. either Y or N. is there anyway to specify the color of the background, or TD, depending on the character within? if its Y, make it red, and if its N, make it blue. that all. any ideas??? Hi there, I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right. Code: <font color='white'><font size='1' face=verdana size=1> I couldn't find the equivalent of this in CSS This is my last experiment but it doesn't seem to work either Code: fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}
Thanks I have some CSS for forms as seen below. (depreciated version) Code:
<div class="item">
<div class="text">Your Name:</div>
<div class="field"><input type="text" /></div>
</div>
...
form .text {
float: left;
width: 75px;
}
form .field {
float: left;
}
Some forms I'd like to be wider than others, though. Is it possible to define the width of .text using inline styles (eg: <form style="*">) rather than create a new class for each width I want to use? Hi to all, & this is my question: say I have a css class such as: .classA1 { color: RED; font-weight: bold; font-size: 11px } Now I want to define other classes, that vary only in the font color, while everything else remains unchanged, for example: .classA2 = { color: GREEN; rest same as A1 } .classA3 = { color: BLUE; rest same as A1 } .classA4 = { color: YELLOW; rest same as A1 } How do I go about it, so I avoid having to repeat every time the same attributes? I know there is a way of defining a main class & then the variations (like for elements - a - a:hover - a:visited etc..) but I'm not sure how you do this... Thanks a lot for your help, Luca how do you define the the color of a hyperlink before it has been clicked and after it has been clicked? Thanks. Need some help defining a border around my index page. It shows up and works fine in IE but when I switch to FF/Netsxcape the page border is short of the content. Here is my page: [Not an actual business...just a learning project] My Home Page Here is My CSS file: My CSS File Now I ran both my HTML and CSS through the W3C Validators and all comes back perfect. (I know there is some small "clean-up" issues in my code, but I don't think it's relevant to this border issue...Maybe it is?) Anywhooo, when this page is displayed in FF or Netscape the bottom 1/3 of page content runs below my border...but shows up fine in IE. If there is a better way, (than defining the whole <BODY> as a <DIV> element) please enlighten me! Thanks for helping me learn...(in advance) PWD Ok what i have been asked to do is set up a webpage with three divisions ( i think), in a column structure. Title at top then seperate divisions? for each of my books which will be getting added. Now the books should be contained as the book title, author, publisher etc with an image to the right of all this information. However the author, title and publisher have all different formats, the author should be bold, the title in italics etc etc. I am finding it difficult to know what tag to use to split up this information. Just now i have created a <div> section labelled book1 for the first book. How do you go about splitting up the txt within this division tag as i will be writing a CSS sheet to manipulate the author, title and publisher with all different formats. Thanks i have just finished making a site for a collective of illustrators I belong to, and now I'm hearing back that some people are having trouble with it. It's at www.illustratorselbow.com (I'm not allowed to post a url without spaces!) & i'm hoping people might be able to have a look at it & view the source and help me out. If you click on somebody's name, you see the thumbnails on the right and the image on the left. When you compress the window, the thumbnails jump about and shrink. I want to make it so this can't happen- I'd rather that the section with the main image in it compressed a bit, or would side-scroll. Any idea how to do this? I'm pretty new to CSS too so I don't really know how to fix this. It's just a drag because on computers with smaller screens/resolutions, the thumbnails look really messy. (Bear in mind that I have extremely basic knowledge of html/css/php, i hand code rather than use dreamweaver etc, and I've never used php or css before this site. I started using it because I keep hearing that frames are bad news nowadays, but it's been sooo much trouble with my limited abilities... alas) Hello. I'm trying to figure out a way to define link states (link, active, hover, visited) using an inline style or in a manner other than specifying via an imported or embedded style sheet. The project I'm working on involves designing an HTML email (template) with links that have formatting specified. Some webmail providers (particulalrly gmail and hotmail) seem to strip the away all code from the BODY tag on up (I assume to avoid conflicts with their own formatting), making formatting a very creative endeavor. Anyhow, without specifying these attributes in the header, is there any other way of doing this? The best I can figure out is specifying a link color, but without allowing for changes on visited, active, or hovered links. I've been googling for hours, so any help would be appreciated. Thanks. P.S. I know the prevailing attitudes on plain text vs html formatted emails and how it ties into spam, etc. I assure you this isn't being done in the context of spam, but rather, an opt-in newsletter for a client interested in sending fully formatted newsletters. :-) So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0, How do you get a simple tag like body { font-size:small; } to be equal in all browsers? Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way? By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it. It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering. B I could see this as potentially being really easy to do or really hard to do. I'm hoping for the former. Suppose I have 3 divs, A, B, C and that I want the total width of A + B + C to equal the width of the screen. Suppose also that I want them to be inline. How can I have B to be a fixed width while A and C expand depending on the screen width (such that the width of A = the width of C)? Howcome: html, body { color: #06F; background-color: #000; font-size: 16px; text-align: center; width: 768px; } Doesn't center the page in the browser? How can I center it? Output example on my website here. Hello, How large should my css file size be? Well, the title might be a little oversimplified, but I guess it caught your attention In the past, I always set my font sizes using px. I know that this is not the appropriate standard (since it doesn't allow a user to re-size the font on their end), but I usually did it because it was easiest and most predictable. Now, I finally want to make the step towards more accessibility and I would like to learn a little bit more about using em's appropriately. Does anyone have any good advise on how to get started with the following questions: How/where do I set the initial font-size, from which I can use em's? What are the dangers of using em's instead of px? Where could this change impact my usual styling? Are there any good resources/tutorials about this? Any help/suggestions/ideas are appreciated... People viewing my site at 120 dpi are seeing misaligned text and layout, whereas people viewing the site at 96dpi can see it properly. I'm using "em" instead of pixels when setting font sizes in CSS. The site has fixed length and width, do I HAVE to allow it to resize itself? I am new to adsense. I was wondering if I should specify the size of each ad in css (via the div I have around each ad). Or is this unnecessary? (I am not asking if I can change the designated size of the ads in css, but just if I should put in the width and height of the standard ad sizes I have chosen). Any insight would be greatly appreciated. Thanks. http://www.santeecooperobgyn.com/obgyn I have just begun to design a website and already I have run into bizarre (to me) behavior. In the horizontal navigation bar, when you run your mouse over it, you can see that the inline element is bigger than the block element container because the background color changes, revealing a small 2px or so size difference. Here is the relevant CSS. Code:
* { padding: 0px; margin: 0px; }
#navbar {
list-style-type: none;
margin-left: 0px;
background-color: #336633;
padding: 0em;
height: 2em;
margin: 0px;
font-size: 10pt;
}
#navbar li {
display: inline;
float: left;
padding: 0.5em;
}
#navbar li a {
color: white;
text-decoration: none;
text-transform: uppercase;
padding-left: 10px;
padding-right: 10px;
padding-top: 0.5em;
padding-bottom: 0.5em;
vertical-align: baseline;
line-height: 100%;
}
#navbar li a:hover {
background-color: #669966;
I have no idea why this happens, unless the inline element content height is actually determined by factors other than the line-height. It seems like the total height should sum to 2em in both cases. Hi, Im trying to code a small portfolio page but im having trouble with the sizing of one of the sections. Here is my page: http://www.zombiemod.com/blog/?cat=1#all Here is my code for the div: Code: #container div { margin-right:3px; float:left; width:296px; height:130px; border:1px solid #999; position:relative; overflow:hidden; }
How do I make the Div display this size correctly? |
|||||||