|
CSS - Problem Of Understanding A Css File
Hello all,
I had a simple question, I don't understand why all my html code move and not only my body code in the html. Actually, I only want that the code inside the <body> and </body> move with margin or padding. But I wrote a line that only draw a line of color, and cannot understand she is moving alsot when I adapt the css. Here is my html file : Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>This is our title.</title> <link rel="stylesheet" media="screen" type="text/css" href="./myCss.css" /> <meta http-equiv="Content-Type" content="text/html"; charset=utf-8" /> </head> <table width="100%" bgcolor="#003399" style="height: 17px;" border="0" fra me="hsides" cellspacing="0" cellpadding="0"><tbody><tr><td align="left"></td></t r></tbody></table> <body class="ourBodyWiki"> <a href=.>start</a></br> <p> Bienvene sur la premiere page de dokuwiki ! </p> <p> Commencons par creer deux liens : </p> <ol> <li class="level1"><div class="li"> Notre premier lien : <a href="linux.html" cl ***="wikilink1" title="linux.html">Linux</a></div> </li> <li class="level2"><div class="li"> Deuxieme lien : <a href="bsd.html" class="wi kilink1" title="bsd.html">BSD</a></div> </li> <li class="level2"><div class="li"> Troisieme lien : <a href="microsoft.html" cl ***="wikilink1" title="microsoft.html">Microsoft</a></div> </li> </ol> <p> Ceci est une premier version ! </p> </body> </html> And here is my css file, in the same directory as the html file : Code:
.ourBodyWiki{
margin: 10px;
padding: 20px;
}
p{
margin: 0px;
}
Can someone help me please ? I am still newbie in css and html but I only need to do simple things. Similar TutorialsHello, I am trying to make my own webpage, and i downloaded an opensource html document along with the css files. It all works fine, except that i want to change the color of links on the page ( currently its just an underline ) i would like them to be blue. My problem is i have no idea which part of my css file does this? Can anyone help, the color portion of the css file is he Quote: html{height: 100%;} body { background: #837560; color: #70695A; } blockquote { background: #FFFFFF; color: #70695A; border-color: #767676; } #main { background: #FFFFFF url(back.png) repeat-y; color: #70695A; } #links, #footer, #menu, #menu li a { background: #FFFFFF url(menu.png); color: #DBD7D1; border-color: #D7D7D7; } #links a, #footer a, #links a:hover, #footer a:hover { background: transparent; color: #DBD7D1; } #logo { background: #FFFFFF url(logo.jpg) no-repeat; color: #70695A; } #logo h1 { background: transparent; color: #FFFFFF; } h1, #column2 h1 { background: transparent; color: #CE7014; border-color: #CAAE90; } /*hover color on menu at top*/ #menu li a:hover, #menu li a#selected, #menu li a#selected:hover { background: #FFFFFF url(menu_hover.png); color: #70695A; } /*This is text color of the main text*/ #content, #column2 a, #column2 a:hover { background: transparent; color: #70695A; } /*This will effect link on right colum your sidebar*/ .sidebaritem, .sidebaritem a, .sidebaritem a:hover { background: transparent; color: #DBD7D1; } .sbihead { background: #FFFFFF url(sbi_header.png); color: #70695A; } .sbihead h1 { background: transparent; color: #70695A; } .sbilinks li a { background: #FFFFFF url(link.png); color: #DBD7D1; } .sbilinks li a:hover { background: #B7B7B7; color: #CE7014; } input, textarea { background: #FFFFFF; color: #70695A; border-color: #CAAE90; } The links i want to change are all in "column2". Thanks: I've been doing a little bit of experimenting with YUI grids, and I have to admit I'm having some trouble understanding how they work. I've noticed that when you define a couple of columns, the columns are floating, but the parent container automatically expands with the child content. As far as I know, the only ways to do that are to float the parent container, or set overflow: auto (or hidden) to the parent. Using Firebug, it appears neither of these are happening. Here's my code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/base/base.css" />
</head>
<body>
<div id="doc4">
<div class="yui-g" style="border: 1px solid black">
<div class="yui-u first">
<p>Column one</p>
</div>
<div class="yui-u">
<p>Column two</p>
<p>Column two</p>
<p>Column two</p>
</div>
</div>
<!-- normal setup, parent doesn't expand -->
<div style="border: 1px solid black">
<div style="float: left; width: 49.2%">test</div>
<div style="float: right; width: 49.2%">test</div>
</div>
</div>
</body>
</html>
What am I missing? Hi guys, I run a web comic that's dynamically generated with PHP by placing component graphics on a page with CSS layers. I'm in the middle of a big redesign of it and in the new version I'm trying to use relative positioning instead of absolute positioning like I did before. In the original version, the comic itself was a fixed height and so the menu that appeared below was in a fixed position. I bumped it down the page by using a 1x1 transparent image as a spacer. But in the new version the comics will be of variable height. In order to keep the comics from overlapping the menu, I wanted to have each element bump the next element down depending on its size. But relative positioning is not behaving the way I'm expecting and after reading a bunch of stuff on the web, I'm still confused. Right now I'm just testing it out with three blocks: the title graphic, the "no comic found" error, and the copyright. The copyright is supposed to appear below the error message, but when I bump the error message down away from the title graphic with "position: relative; top: 100px", the copyright block doesn't take this into account and appears just under where the error message WOULD have been had I not given it a relative offset. What I want to know is how to get all the divs to adhere to the offsets of the divs that came above it so that they will continue to appear below each other like the normal HTML flowlayout. Currently, all three blocks are inside a container div so that the content will stay centered if the window is resized. Sorry if this is confusing, I'm not really sure how to explain it. Hi, I am trying to wrap my head around a certain layout that I want to create. Hear is a link to a mockup of what it would look lik... I am curious if it is possible to add an element like the one I have marked with a "?". If so could you please share with me some further details. REgards Chad I am working on a site design and I have a div that is on another z-index because I wish it to appear on top. I would like that div position to be relative to the a parent div. Here is a link to the current issus: http://www.rustbug.com/the19thhole/index.html page code. I have the div for the logo div within the page for now: 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/tabs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Wrapper">
<div id="myDiv"
STYLE="position:relative;
z-index: 2;
top:20px;
left:135px;
height:287px;
width:358px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png',sizingMethod='scale');"/>hello</div>
<div id="Navigation">
<ul id="mainNav">
<li><a href="#"><span>home</span></a></li>
<li><a href="#" class="active"><span>gallery</span></a>
<li><a href="#"><span>directions</span></a></li>
<li><a href="#"><span>contact us</span></a></li>
</ul>
</div>
<div id="Container">
<div id="Topcurve"><img src="images/topCurve.gif" height="8" width="689" border="0" /></div>
<div id="Headerbar"><img src="images/headerBar.gif" height="48" width="670" border="0" /></div>
<div id="Titleimage"><img src="images/titleImage.gif" height="207" width="670" border="0" /></div>
<div id="Contentcontainer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
<div id="Footer">
<p>The 19th Hole / #27 Main Street / at the Royal Dane Mall / St. Thomas, V.I. 00802<br />
phone: 340-777-8811 / email: ehcsnow@yahoo.com</p>
</div></div>
<div id="Bottomcurve"><img src="images/bottomCurve.gif" height="20" width="689" border="0" />
</div>
</div>
</body>
</html>
here is the css Code:
@charset "utf-8";
/* CSS Document */
html, body {
margin: 0px;
padding: 0px;
background:url(../images/background.jpg)
}
body {
text-align: center;
}
#Wrapper {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
width: 765px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
text-align: left;
height: auto;
border:1px solid white;
}
#Container {
color: #333;
clear: both;
width: 689px;
background:url(../images/containerBackground.gif) repeat-y;
margin: 0 auto;
}
#Topcurve {
clear: both;
width: 689px;
margin: 0 auto;
}
#Headerbar {
clear: both;
width:670px;
margin: 0 auto;
padding-right:4px;
}
#Titleimage {
clear: both;
width:670px;
margin: 0 auto;
margin-top:6px;
padding-right:4px;
}
#Contentcontainer {
clear: both;
width:650px;
margin: 0 auto;
margin-top:6px;
padding:5px;
border:1px solid #009900;
}
#Logo {
z-index: 2;
position:absolute;
top:20px; left:135px;
width:358px;
height:287px;
}
#Footer {
clear: both;
width:670px;
height:50px;
background:url(../images/footerBar.gif) no-repeat;
margin: 0 auto;
margin-top:6px;
padding-right:4px;
}
#Bottomcurve {
clear: both;
width: 689px;
margin: 0 auto;
}
#Navigation {
font-size: 12px;
color: #333333;
height: 25px;
width: auto;
padding: 0px;
margin-left: 275px;
}
#mainNav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
#mainNav li {
float: left;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainNav li a {
margin: 0px;
background-attachment: scroll;
background-image: url(../images/tabs_2.png);
background-repeat: no-repeat;
background-position: right 0px;
font-weight:bold;
color: #FFF;
text-decoration: none;
height: auto;
width: auto;
float: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainNav li a:hover {
text-decoration: none;
color: #66cc00;
}
#mainNav li a span {
background-attachment: scroll;
background-image: url(../images/tabs_2.png);
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 30px;
height: 19px;
width: auto;
float: left;
cursor: pointer;
cursor: hand;
margin: 0px;
}
#mainNav li a.active {
background-attachment: scroll;
color: #359a02;
background-image: url(../images/tabs_2.png);
background-repeat: no-repeat;
background-position: right -47px;
}
#mainNav li a.active span {
background-attachment: scroll;
background-image: url(../images/tabs_2.png);
background-repeat: no-repeat;
background-position: 0px -47px;
}
#mainNav li a.active:hover {
color: #66CC00;
text-decoration: none;
cursor: pointer;
cursor: hand;
}
/*#Logo {
position:relative;
z-index:2;
top:20px; left:135px;
width:358px;
height:287px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader;
}*/
Any help would be greatly appreciated. Thanks! Stephen My skills are a little suspect when it comes to properly using the clear and float elements in CSS and I have searched around for a good tutorial showing when and when-not to use the elements, but have not found anything that will suffice. Anyone have any pointers or tutorials that you think might be worth checking out? TIA. I am trying to create a menu that uses drop downs (only 1 deep) and I seem to be running into problems. I've used code that I've tried to tweak but seem to be having problems. I'm sure there is code in here that I don't need, but I don't know what I can remove and what I can't. My biggest current problem is that I want a) to have more room between the menu items (to space them out) but I can't seem to find where to set that? and b) I can't seem to figure out how to set the width of the drop down items...I've tried everywhere! Here is a link to the page: http://www.thespinzone.com/temp/csshelp.html and here is the code for the css I'm using Code:
<style type="text/css">
body {
font: 78%/1.5 arial, helvetica, serif;
background: #FFFFFF;
text-align: center;
padding: 0;
margin: 0em;
}
#container {
width: 745px;
background: url(cssbg2.gif) center right no-repeat;
text-align: left;
border: 0px solid #FF0000;
margin: 0 auto;
}
#nav, #nav ul {
float: right;
width: 353px;
height: 96px;
list-style: none;
line-height: 1;
font-weight: bold;
padding: 20px;
border-width: 10px 10px;
margin: 0 0 0 0;
}
#nav a {
display: block;
width: 8em;
width: 4em;
color: #7C6240;
text-decoration: none;
padding: 0.25em .5em;
}
#nav li {
float: left;
padding: 0;
width: 1em;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
width: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#nav li li {
padding-right: 1em;
width: 13em
}
#nav li ul a {
width: 13em;
w\idth: 9em;
}
#nav li ul ul {
margin: -1.75em 0 0 10em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #FF0000;
border: 0px solid #FF0000;
}
</style>
sdf
Hi, I have a problem when trying to load an image (as background) from a css file. My scenario is as follows; I have a css file named default.css under the folder root/css/. Then I have page1.html, page2.html and page2.1.html under the root/, root/page2/, and root/page2/page2.1/ folders respectively. My css is as follows: Code: body {
background-image: url('../images/bg.GIF');
}
My problem is this. The background image is loaded correctly when visiting page1.html and page2.html however when I visit page2.1.html I can not view the background image. Is this problem because ../images/bg.GIF is not accessable from root/page2/page2.1/ ? (even though the css file is always at root/css/) or? I have attached the example just in case my above explanation was not clear enough. What I would like to achieve is have the same background image loaded on each page. Regards, Sim085 Hello dear programers This my problem If anyone can help me,I will be so thanksfull,: I have a full site script package which is in php,(I dont knoe php !! ) There is a style.css file,which I could change in colors and fonts,...but I want to change a page with new design and colors and style,I tried to edit style.css file (I deleted,changed it :/body, td, .forTexts/ but NOTHING happend!!)to make this page OK,But I couldnt,page doesnt load with its fonts and colors. ------------------------------------------ I past the original style.css : form { margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;} .toptable { background-color: FF8D00; } a.toplink, a.toplink:hover, a.toplink:visited, a.toplink:active { color: white; text-decoration: none; } .forCopyright { font-family: Times New Roman; font-size: 11px; color: #EDD1D7; text-align: center; background-color: ff8d00; } body, td, .forTexts { font-family: Times New Roman; font-size: 13px; color: #000000; } a.menutxt, a.menutxt:hover, a.menutxt:visited, a.menutxt:active { font-family:Times New Roman; font-size: 13px; color: #F3FBB4; } .menutxt { font-family: Times New Roman; font-size: 12px; color: #000000; } th { font-family: Times New Roman; font-size: 12px; color: #000000; } .title { font-family: Times New Roman; font-size: 12px; color: #FFFFFF; background-color: #FF8D00; } .inpts { font-family: Times New Roman; font-size: 12px; color: #5D0400; background-color: #D1CDFF; border: 1px inset #000000; border-color: #000000; border-style:dashed; } .sbmt { font-family: Times New Roman; font-size: 13px; color: #1D0067; background-color: #cccccc; border: 5px outset #ffffec; } a.hlp, a.hlp:active, a.hlp:visited, a.hlp:hover { font-family: Times New Roman; font-size: 13px; color: black; text-decoration: none; cursor: help;} .line { background-color: 000000; } div.framebody { text-align: left; } td.inheader { background-color: cccccc; font-weight: bold; text-align: center; padding-left: 2px; padding-right: 2px; padding-top: 2px; padding-bottom: 2px; } td.item { background-color: cccccc; } h3 { font-weight: bold; font-size: 12px; } td.gray { color: gray; -------------------------------------------------------- and this is my new page styles : .style1 { color: #4c687e; font-weight: bold; font-size: 11px; font-family: Arial; } .style2 { font-family: Tahoma; font-size: 10px; } .style3 { font-size: 12px; font-weight: bold; color: #FFFFFF; } .style4 { font-family: Tahoma; font-size: 11px; font-weight: bold; color: #c10416; } .style5 {color: #FFFFFF} .style6 { font-size: 11px; font-weight: bold; } .style8 {font-family: Tahoma; font-size: 10px; color: #4c687e; } .style9 {font-size: 12px} .style10 { color: #0a2c50; font-family: Tahoma; font-size: 11px; } .style11 {color: #66809b} .style12 {color: #c10416} .style13 { font-family: Tahoma; font-size: 11px; font-weight: bold; color: #FFFFFF; } --------------------------------------------------- If I change the fonts and colors in new page manually,The page doesnt come up at all. please help me if you can. best regards Many of my web pages (CGI) have css styles which have a user defined color present throughout the site. How can i get that varible data back to my site if I refer to it in my css style? for example, i get a hex color from the user and store it in a global variable C1$=#000000 in my web app. then in my css definition i assign border color based on the user defined variable like Code: .table { border: solid 1pt $C1 }
when i copy that into my css file, the color thing in my tables is no worky. putting it back into my cgi file, it works fine of course. What to do? thanks, JOhn If I include url(images/blah.gif) in a CSS file in my webroot, and i then load that into a file in a html dir off my roor and run the html from the html folder, is the image supposed to be relative to my css file or my html file? It seems like its relative to the HTM which doesnt seem correct. I know It would just make sense to move things around but it has to do with robohelp and I think I'm stuck doing it this way for now. Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. am creating a website and when I swap between pages the page is shifting to right around 5px, I need to fix it. you can find the files in that link: http://www.designmasr.com/assets/source_files.zip Hi Im new here and have a css problem please could somone make a text box or allow me to write next to the menu thanks. heres the download link http://www.filegone.com/qxw0 Hi There, Im just lookng at some exaples on the net so i can start to design my sites using a css file rather that tables. One this i noticed is that the css files being used are using a #(then the name of the css) where as we used to use the .(then the name of the css). Is this becuse we use in the div layer and id= rather than a class= ??? Pls Explain uno_turko How do i optimize a stylesheet so it is as small as possible and clear to read as possible and of course is it important to validate a stylesheet? cause i see people insisiting on web page validation but too much on css validation? Is it possible to store a default menu, along with a default style in a .css stylesheet? So that, for example, i could have plain html pages, linked to the style sheet and have css 'insert' a menu, along with all the other styling stuff. Am i just lazy? Its a real pain changing all my menus whenever i add a new page or feature. If i could just have 'content' html files, with a little .css link in them it would save me loads of time. I remember seeing once that you could insert a picture using css by some obscure method. Surely this couldnt be much harder? thanks for your help EDIT, The pages i want to do this with are on chuck54.com Right now i dont even have a separate .css file. But im working on that. Sometimes I forget ";" or make some syntax mistake in css file. How to check if everything is ok with CSS file. Now, I just look on the html code and look for the changes. But is there a way to check for syntax errors in CSS file? Thanks |
|||||||