|
CSS - Css Declaration Rotation
Ok, someone might want to change the title when they know what im on about. Take the following two declarations
Code: margin-top: 20px; margin-bottom: 5px; border-top: 6px double #D7D7D7; border-bottom: 1px double #D7D7D7; Now surely i could condense these into 2 lines so my first question is at what point does the rotation start at when doing something like Code: margin-top: 20px 15px 12px 15px; i.e. which sides do those apply to. Secondly, is this actually possible? Similar TutorialsHi, I made an html document, and a css file, works allright, but when i delete the doctype declaration, it's not working correctly anymore -> the body width is gone, and my content is stretched, losing my left and right margins. Code: body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #666666;
width: 710px;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
margin-bottom: 3em;
The problem is, that i will use this css file for an xml file, transformed by xslt, and the resulting html file doesn't have a doctype specification, that means i can't seem to add a doc spec and still keep my xslt file valid. any suggestions to solve this problem..? thanks a lot, jarra Hi Guys, I'm building a page, and the body has been given a background color. I have a container DIV, and within it are several divs that hold individual elements. I need the background of the container div and everything in it to remain white, regardless of the color of the body background. <!--- Body tag ---> body { background: #FF00AA; color: #000000; font: .8em arial, helvetica, sans-serif; margin: auto; padding:0px; } <!--- container div----> #pages { background-color:#FFFFFF; width: 900px; } <!--- nested container divs ---> #pages title { display: inline; width: 375px; float: left; padding:0 .25em .5em 0; } #pages categories { display: inline; width: 20%; float: left; padding:0 0 0 0; } But this isn't working.. What am I doing wrong here? I just need to make sure EVERYTHING's background is white when it's placed within the container div (pages). The following code contains a div tag with height and overflow specified. If the content inside the div causes the height to exceed 75px, the div will auto scroll. My problem is that the second div (id=content_div) ignores the height/overflow rule assigned to its parent div and displays its content as if its parent div doesn't exist. Because of this, if you scroll the first div (id=scrolling_div), the content within "scrolling_div_2" remains on the page, ignoring the scrolling action of its parent, while the content within both scrolling_div_1 and scrolling_div_3 scroll correctly. If I remove the DOCTYPE declaration on line 1 (which I don't want to), the code below renders correctly, and the content inside "scrolling_div_2" scrolls in the same way that the other 2 scrolling_div tags do. I can't exactly remove the DOCTYPE declaration, aside from trying to be compliant, it breaks formatting elsewhere in my site. Any help of suggestions would be appreciate. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>Test Page</title>
</head>
<body>
<div style="height:75px;width:250px;overflow:auto;border:1px solid black" id="scrolling_div">
<div id="content_div_1" style="margin-top;15px;">hello</div>
<div style="border:solid #647aae;border-width:0 1px;background:#b0c0e6;" id="content_div_2">
<div style="position:relative;top:-1px;left:0;border:solid #647aae;border-width:1px 0 0;">
<div style="top:2px;border-width:0 0 1px;padding: .3em .3em .1em;">
asfd<br />
asfd<br />
asfd<br />
asfd<br />
</div>
</div>
</div>
<div id="content_div_3" style="margin-top;15px;">hello</div>
</div>
</body>
</html>
I'm fairly new at CSS, but I am stumped with an issue I am having getting my H1 and H2 tags to show a color. Now the problem. I have styled the Header tags in my CSS for a <div> tag that will contain the text on my page. They are to have the color of my navigation bar on the left of the page (value #cc0000). The nav bar is styled with a CSS created by a spry in Dreamweaver CS3. My text is styled by a separate CSS document (con-ed.css) which is found in a different directory. I created all of the style elements for my <h1> and <h2> tags and they look fine in Dreamweaver. But when I open the page in a Web browser such as Firefox, Safari, or Internet Explorer, all of the formatting of the tags displays EXCEPT the color value I mentioned above. I am guessing that I have a cascading issue going on, but I haven't been able to figure out where it would be. I am loading the con-ed.css stylesheet first, so its values should override any other sheets, plus there is no mention of <h1> or <h2> in the stylesheet for my navigation bar. Any help or suggestions you could give will be greatly appreciated! wncmacs I have an odd situation where the box for an anchor in a menu is extraordinarily large . . . IN MOZILLA! IE works as expected & displays correctly, but the Mozilla box is triggering the :hover half way in the content area! (See attachment) I'm a little baffled on this box situation, EVEN INCLUDING the box-sizing changes for both IE/Moz (box-sizing: border-box & -moz-box-sizing: border-box), still doesn't resolve the problem. Any feedback is greatly appreciated! Here is the relevant CSS: Code: body, html
{
min-width: 700px;
background: url(/_test/images/nav-filler.gif) repeat-y;
height: 100%;
font: 1.2em Verdana;
line-height: .8em;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
p, a, div
{
font-size: 76%;
padding: 0 10 0 0;
box-sizing: border-box
-moz-box-sizing: border-box;
}
#header
{
position: absolute;
top: 0;
left: 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
z-index: 200;
/*border: 1px solid #0F2B5B;*/
}
#header-right
{
position: absolute;
top: 0;
right: 0;
z-index: 100;
width: 100%;
background: url(/_test/images/header-filler.gif) repeat-x;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#content
{
position: absolute;
top: 154;
left: 163;
z-index: 300;
margin: 0 0 0 0;
padding: 0 10 0 0;
}
#left-nav
{
position: absolute;
top: 154;
left: 0;
right: 163;
margin: 3 0 0 0;
padding: 0 0 0 0;
max-width: 163;
display: block;
}
#nav-links
{
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 133;
}
#left-nav a
{
color: #000000;
font: 69% Verdana;
background: url(/_test/images/nav-item3.gif) no-repeat 0px 0px;
margin: 0 0 0 0;
padding: 0 17 4 29;
width: 155;
text-decoration: none;
display: block;
box-sizing: border-box
-moz-box-sizing: border-box;
}
#left-nav a:hover
{
color: #FF0000;
background: url(/_test/images/nav-item3.gif) no-repeat 0px -50px;
}
#left-nav a:active
{
color: #FF0000;
background: url(/_test/images/nav-item3.gif) no-repeat 0px -100px;
}
#left-navContent
{
color: #000000;
font: 66% Verdana;
width: 163;
background: url(/_test/images/nav-item-filler.gif) repeat-y 0px 0px;
margin: 0 0 0 0;
padding: 0 30 4 29;
text-decoration: none;
}
.nav-itemBottom
{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.nav-header
{
color: #0F2B5B;
font: bold 80% Verdana;
margin: 00 20 0 0;
padding: 7 0 6 32;
width: 163;
text-decoration: none;
display: block;
}
#nav-headerType1
{
color: #0F2B5B;
background: url(/_test/images/nav-header.gif) no-repeat 0px 0px;
}
#nav-headerType2
{
color: #0F2B5B;
background: url(/_test/images/nav-header.gif) no-repeat 0px -30px;
}
#nav-headerType3
{
color: #FF0000;
background: url(/_test/images/nav-header.gif) no-repeat 0px -60px;
}
#nav-headerType4
{
color: #0F2B5B;
background: url(/_test/images/nav-header.gif) no-repeat 0px -90px;
}
#nav-headerType5
{
color: #FF0000;
background: url(/_test/images/nav-header.gif) no-repeat 0px -120px;
}
Hi all, I came across a function on a website http://www.cnn.com/2004/WORLD/europe/09/03/russia.school/index.html that I would like to use. I tried looking at the source code this is sucker is spread out all over the place in multiple files. What I want is the Previous / Next image rotator thingy, thats at the top righthand side of the page. I'd also like to do the following: URL If I click on A,B or C the image refreshes in the main picture. ? Hello Everyone @ Devshed, I'm trying to improve my limited CSS skills and have a few simple questions which would really help clean up my HTML. I haven't been able to find the answer in the excellent CSS resources in the sticky (if you haven't already they are worth checking out), or in past questions so here is a new post. I understand it is possible to set styles for html tags which then apply to all document elements without having to specify a class in the actual html, so a style sheet looking like, table {border: 1px solid #000000; background-color: #EEEEEE;} th {font-weight: bold;} td {font-size: 10px;} .... Applies to a table such as the one below without having to specify a class attribute in each element. <table> <th>Title</th> <td>Cell </td> </table> I have 8 small tables on a page and would like to specify each with a unique style. A example styling could be table .style1 {border: 2px solid #000000; background-color: #CCCCCC;} th .style1 {font-style: italic;} td .style1 {font-size: 12px;}, Is there anyway I can re-write the style sheet declarations so that I declare the style I want to apply to the entire table just the once? As opposed to writing class='style1' in each table element (see below). Are ID's usefull here? <table class='style1'> <th class='style1'>Title</th> <td class='style1'>Cell</td> </table> Thanks in advance for your time, Peter I am baffled on this one, please visit http://osake.garychus.com/menu.asp and look the main menu. I have this in the head code - a#nav_menu{ color:#f00 !important; } but for the life of me it is not working... |
|||||||