|
CSS - Stopping Css At Certain Point Of Code
Is there a way to stop using a CSS after a certain point in your code?
I am trying to do this as I have a CSS for my site which I am including vBulletin into which has its own CSS file, which messes up the formatting from my CSS file and vice versa. Similar TutorialsI've been trying for almost a week now to sort out the problem in this coding but I just can't establish it I've tried removing the apostrophes from the id's, altering the ' marks into every possible variant I've been able to find, and I startedrebuilding it piecemeal but after the first 4 worked I copied it in in blocks of 3 and it then failed. I'm reserving the completely singular addition of each new field until after I've had someone who knows the language look at it and help. Really stuck My code is too long to post here so I've left it visible here webjam.com/thewarlords/help It works flawlessly with only the first 3. Even if I fill the entire table with them. It's only when I introduce the whole terms in bulk it fails. Is there an upper limit to the amount of fields allowed? Hello! I've got a <div> inside a <form> which I show/hide when a user clicks on a show/hide link. That div holds several form options which I DON'T want to submit with the form when the div is hidden. At the moment, even when my div is hidden, the values within it are still being submitted with the form. Is it possible to / how do I - hide the div so any values enclosed in it do NOT get submitted along with the form? Thanks, regan. Ok I fully understand the benefit of using css for text (easy site wide font changes etc) but is there really any point in using css for layouts? I understand that traditional table based layouts are a nest of cells which creates problems for text readers and large pages which we try to reduce by slicing images up, setting background colurs in html etc BUT When using css for layouts we tend to use much larger graphics - typically the header is a single graphic rather than several slices. Through a bit of testing I have deduced that creating a page with tables with the same reduced level of slicing as for a css layout (ie just header, sidebar, content and footer), results in a comparable total page size and has no nested tables to confuse screen readers. The real clincher for me is that using a simple table layout rather than css for layout results in a page which displays exactly as I want it across browsers and so I don't spend days testing and moving things backwards and forwards to get a compromise layout. I realise this is heresy to suggest that tables migh be better and I await the more experienced here putting me right. Hi All, I have been trying to find out a small mistake in my css since yesterday morning. But now I can't just go with it and seeking someone else eye to correct it. Basically its working fine in FF but not coming properly in IE7. The bottom background is not comming and I think the main background is overriding it. Please check the below url and let me know where I am doing wrong. http://dev.axia.co.uk/test.htm Thanks you for your time. Hi, all! I'll try to be as concise as I can with this Q. Basically, I want div to float to the right edge within a (for example) 500px div; unless the window size is less than 500px and cutting off part of the parent div. In this case I'd like the child div to float as far right as possible while staying visible. Forgive me if this is simple to do with css; I have a head full of cold medication at the moment! :S Thanks! PS the reality of what I'm trying to do is show the left half of a background image off to the left of my content (child div) only if there's room. Otherwise, the content should appear over top of this left section. is it possible to change the bullet point color only of a list? Hi, I have a drop down menu using <UL> and <LI>. Is there a way i can reduce the left indent from where the bullet point would normally be? Many thanks I've done a lot of reading to recently learn css, but this one stumps me: I have put the one background image in the center of the page so that it looks better than being crammed in the upper left, and to keep a nice layout regardless of screen resolution. so now i want to add a text element that fits into the right place relative to the background, not the page. can i set a point (such as top-center) that all margins will be based on, besides the top and left of the browser page? the non css version of the page (with lots of tables) is at www.stipepainting.com. looking at that might clarify my question a bit. thx in advance Not sure where to put this because it involves php, dhtml, css and layers? But anyway I'll give it a shot here. I have a problem that I can't seem to tackle. Basically what I need is: I need to set a number of layers on an absolute position from a relative point, the topleft corner of an image of a map (that has no fixed position from the top of the page because the amount of content from the top before the image of the map can change because it is a dynamically generated page). I have: An image of a map and in a mysql table a number of sets of xy coordinates (in pixels) from the top-left corner on that image to some points on the map. (Unfortunately I can't show you the pages, but I'll try to be as clear as posssible) Trying to accomplish: A map somewhere on a page and query from a database a set of x-y-coordinates of different points, that correspond to top left corner of that map. On the exact x-y coordinates I want to display a small image of a crosshair, so that a number of points are indicated on the map with crosshairs. The points on the map (read: sets of x-y coordinates) can differ. Solution (I thought): Use layers using the <div> tag. So I use a layer to specify the location of the map. Then I query the table for all the x-y coordinates of the poins on the map and create a layer for every set of x-y coordinates. Here's the code ($cat and $de are taken from an URL): PHP Code: //get xy coordinates of primary position $locbase = mysql_query("SELECT lb_xcoord, lb_ycoord FROM locbases WHERE lb_cat_id = $cat AND lb_ad_id = $de "); $locbasered = mysql_fetch_array($locbase); $xred = $locbasered["lb_xcoord"]; $yred = $locbasered["lb_ycoord"]; //get xy coordinates of other positions on the same map $locotherbases = mysql_query("SELECT lb_xcoord, lb_ycoord FROM nuke_zc_locbases WHERE lb_cat_id = $cat AND lb_ad_id <> $de "); //position the map at coordinates 0-0 echo "<div id=\"Layer1\" style=\"position:relative; left:0; top:0; z-index:0;\"><IMG SRC=\"$img\" border=\"0\"></div>"; //position the primary position on the map in a layer on top of the map layer echo "<div id=\"Layer2\" style=\"position:relative; left:$xred; top:$yred; z-index:1;\"><IMG SRC=\"http://192.168.1.11/sites/test/crosshair.gif\" border=\"0\"></div>"; //create a loop and for each loop create a layer with based on the set of x-y coordinates and display a crosshair image in that layer $k = 3 ; while( $locothers = mysql_fetch_array( $locotherbases ) ) { $xgrey = $locothers["lb_xcoord"]; $ygrey = $locothers["lb_ycoord"]; echo "<div id=\"Layer$k\" style=\"position:relative; left:$xgrey; top:$ygrey; z-index:$k\"><IMG SRC=\"http://192.168.1.11/sites/test/crosshair.gif\" border=\"0\" ></div>"; $k++ ; } Problem 1: This all works (except for problem 2, described later) when the position statements in the tag are set to absolute. Then it will display correctly in the left hand corner and all crosshairs are positioned correctly. The thing is that I want it embedded in another page, so that it is displayed below some content that is also dynamically generated (so I can't set position to absolute, because I don't know where the content before the map stops) So I have to set it to relative and then all the divs are displayed relative to the previous tag. Since the tags are dynamically generated through a while loop, the crosshairs will all move down a blank line. Problem 2: The layers do not stack exactly as planned, first because the images of the crosshairs are displayed under the map (but the z-index builds up correctly doesn't it?) he weird thing is that when I put the <div> tag of the map image after the looped and primary crosshair div-tags, then the crosshairs are all displayed on top of the map. To my knowledge the z-index should work regardless of where the code is , no?) Anyone any idea how to do this? (or would I have to display the map and crosshairs in an <iframe>within the dynamically generated page) Thanks for any feedback! Cheers, Gurt Hi guys I've a website, pure css, tableless It looks good in Firefox, Opera, etc. etc. It looks VERY bad in IE Look: Firefox http://img465.imageshack.us/img465/4333/shot14jr.png Internet "Explorer" http://img378.imageshack.us/img378/8224/shot22cv.png Website files for download here... http://rapidshare.de/files/11673865/website.zip.html Does any1 know how to fix css or web to look good in IE also ? Thanks a lot in advance i am trying to put a semi-transparent bg on an iframe and some cells of a table. i've been given lots of advice, none working so far. and i know its possible. is there anyway sum1 could try this or even edit my code? but mostly what im looking for is also where to put things in codes. please and thank u!! what would happen if i assigned an iframe to "itself" w/ a colored background, and then put in a CSS declaration w/ opacity? how do i input filters? how do i input tablelayout(like CSS or HTML)? where do i insert tags for the scrollbar, which also has not worked for me? Code:
<style type="text/css">
<!--
@import url("semitransparent.css");
@import url("chromafilter.css");
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style3 {font-size: 12px}
BODY{ scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#CCCCCC; scrollbar-base-color:#993300;
scrollbar-darkshadow-color:#660000; scrollbar-face-color:#990000; scrollbar-highlight-color:#CC0000; scrollbar-shadow-color:#666666; }
-->
</STYLE>
</head>
<body>
<map name="booster" id="booster">
<area shape="rect" coords="126,87,249,107" href="boosterclub.htm" target="iframe2" onMouseOver="filter:glow(color=#FFFF99,strength="5");">
<area shape="poly" coords="75,49" href="#">
<area shape="rect" coords="345,82,499,108" href="Danceprogram.htm" target="iframe2">
<area shape="rect" coords="588,87,711,106" href="dancecamp.htm" target="iframe2">
<area shape="rect" coords="783,84,971,107" href="fly.htm" target="iframe2">
<area shape="rect" coords="131,42,209,77" href="index2.htm" target="iframe2">
</map>
<table width="1134" height="717" border="0" cellspacing="10">
<tr>
<th height="174" colspan="2" scope="row"><img src="logofory.png" width="1060" height="112" border="0" usemap="#booster"></th>
</tr>
<tr>
<th width="235" height="37" scope="row" bordercolor="#FFE4E0" border="1">About us </th>
<td width="865" rowspan="3"><iframe frameborder="1" name="iframe2" src="index2.htm" allowtransparency="30" width="750" height="432" scrolling="yes"></iframe></td>
</tr>
<tr>
<th height="211" scope="row"> </th>
</tr>
<tr>
<th height="175" scope="row"><table width="235" height="173" border="1" bordercolor="#FFA2A2" bgcolor="#FFE2CB" id="pink">
<tr>
<th width="198" height="18" scope="row">New Events!!! </th>
</tr>
<tr>
<th height="128" scope="row"><p>1- We are having a competition this weekend in Portland, OR. Wish our tap girls good luck
</p></th>
</tr>
</table></th>
</tr>
<tr>
<th height="32" scope="row"> </th>
<td align="center"><b>Designer:</b> Melody Shinyama <b>Date Published:</b> January 25, 2006
<br><b>Host:</b><a href="http://www.freewebs.com/"> www.freewebs.com</a><br>
<b>Last Updated:</b> January 25, 2006
</td>
</tr>
</table>
<p><br>
<br>
</p>
</body>
</html>
this is also an attached code. btw i am working w/ dreamweaver. Code:
<style type="text/css">
tbody {background-color:#FF6971;
width: 300px;
margin: 0 50px;
border: 2px;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style1 {
color: #000000;
font-family: Herculanum;
}
#transbox {
width: 300px;
margin: 0 50px;
background-color: #CF0000;
border: 2px solid;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
#bg {
width: 400px;
height: 300px;
background: url(redbg.jpg);
background-repeat: repeat;
border: 0;
}
#transbox div {
font-weight: bold;
color: #000000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
position: relative;
visibility: hidden;
}
</style>
this is the last one Code:
table, tr, span, li, p, div, textarea, DIV {
font-family: Herculanum;
color: #000000;
font-weight:normal;
font-decoration:none;
font-style:normal;
background-color:transparent;
border-color: #000000;
empty-cells:hide;
}
td, li, p, div, textarea {
font-family: Herculanum;
border-color: #000000;
}
table{
border-color: #000000;
}
a.navbar{
font-family: Herculanum;
font-size:12pt;
font-weight:bold;
}
a.navbar:link{
color: #CCCCCC;
}
a.navbar:active{
color: #FFCC00;
}
a.navbar:visited{
color: #CCCCCC;
}
a.navbar:hover{
color: #FFCC00;
}
a.searchlinkSmall{
font-family: Herculanum;
font-size:12pt;
text-decoration:none;
font-weight:normal;
}
a.searchlinkSmall:link{
color: #999999;
}
a.searchlinkSmall:active{
color: #FF0033;
}
a.searchlinkSmall:visited{
color: #999999;
}
a.searchlinkSmall:hover{
color: #FF0033;
}
body{
font-family: Herculanum;
background-color:
#89100D;
background-image:url(DanceFloor1-0_big.jpg);
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
}
.nametext{
font-family: Herculanum;
font-size:16pt;
color: #000000;
font-weight:bold;
}
.blacktext10{
font-family: Herculanum;
font-size:12pt;
color: #FF0000;
font-weight:normal;
}
.blacktext12{
font-family: Herculanum;
font-size:12pt;
color: #999999;
font-weight:normal;
}
.btext, .itext, .text{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:bold;
}
.orangetext15{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.lightbluetext8{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.tmz_imp{
font-family:arial;
color: #FF0000;
font-weight:bold
}
a img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:Alpha(Opacity=60);
}
a:hover img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:none;
}
body{
scrollbar-arrow-color: #FF0000;
scrollbar-Track-color: #990000;
scrollbar-Highlight-color: #FF0000;
scrollbar-base-color: #FF0000;
scrollbar-Face-color: #990000;
scrollbar-Shadow-color: #FF0000;
scrollbar-DarkShadow-color: #FF0000;
}
Greetings everyone! I'm quite new for css positioning, less than 2 weeks, but I can tell you I feel like a young man entering puberty again just knowing I'll have myself free from tables very soon. My question is an easy one. I would like to know if isnt it more correct to leave some styles outside the css file when we are using it particularly only one time. Lets say Ill use 2 distinguished boxes in the "contact" session, then would it be ok to just use "<div style="etc">content</div>" instead of building it inside the css? Thanks in advance! - Dehumanizer I often see css code with "greater than" sign like this: html>body #centercontent { margin-left: 201px; margin-right:201px; } what does this mean? What is the difference with body #centercontent { margin-left: 201px; margin-right:201px; } Thanks for the enlightment. hi... what does this css code mean.. body table table table table#plv table td{color:#fff} ? and how would the html code look like? is this for tables with no class tags attach to it.. I am trying to make this header menu go horizontal but I can't get it to do anything but be vertical. You can see what is happening by visiting SodShopWichita.co m The green buttons. Anyones help would be greatly appreciate as I have spent hours trying to figure it out. I'm new to CSS. Here is the code: /******************************** Main Navigation ****** * Global topmenu navigation, degrades gracefully to css * if Javascript is disabled. Else applies fade effect. */ #navcontainer { height:50px; float: right; width:1014px; position:relative } /* Menu Body */ ul#navigation { height:35px; list-style:none; float:left; padding:0px 1px 0px 0px; margin:0px 0px 0px 10px; float: left; } /* Float LI Elements - horizontal display */ ul#specialnav li { float:left; display: block; } /************ SPECIAL NAV ************************/ #specialnav { height:50px; width:185px; position:relative; } /* Link - common attributes */ #specialnav a { background:url('specialnav.png') no-repeat scroll top left; display:block; height:35px; width:185px; position:relative; z-index:10; line-height:2.5em; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; color:#fff; font-size:14px; text-align:center; text-decoration:none; padding-left: 0px; padding-right: 0px; } /* Specify width and background position attributes */ #specialnav li.isactive a { background:url('specialnav.png') no-repeat scroll 0 -105px; bottom left repeat-x display:block; height:35px; width:185px; position:relative; z-index:10; padding-left: 0px; padding-right: 0px; } /* Link (on hover) - common attributes */ #specialnav li.highlight a:hover { background:url('specialnav.png') no-repeat scroll 0 -35px; display:block; height:35px; width:185px; line-height:2.5em; position:relative; z-index:10; padding-left: 0px; padding-right: 0px; } /* Link - common attributes */ #specialnav li.highlight a:active, #specialnav li.highlight a:focus, #specialnav li a:active, #specialnav li a:focus { background:url('specialnav.png') no-repeat scroll 0 -70px; display:block; height:35px; width:185px; position:relative; z-index:10; padding-left: 0px; padding-right: 0px; } /* fade effects start here */ /* Span (on hover) - common attributes */ #specialnav a span.animate { background:url('specialnav.png') no-repeat scroll 0 -35px; display:block; position:absolute; line-height:2.5em; top:0; left:0; height:100%; width:100%; z-index:10; cursorointer; } /* Shift background position on hover */ ul#navigation li a span { background-position:0px -35px; } /* Shift background position on hover for the class: "isactive" */ ul#navigation li.isactive a span { background-position:0px -35px; } span.trans {display:none;} For some reason, the following code displays perfect in firefox, but its atrocious in IE. Im doing this for a client, so i need it to display correct in all browsers...can anyone pinpoint what i am doing wrong? here is the code: Code: css
*
{
margin: 0px;
padding: 0px;
}
html
{
width: 100%;
height: 100%;
}
body
{
height: 100%;
width: 100%;
background-color: /*#E0F8F7 */#989B9F;
margin: 0px;
padding: 0px;
}
#login_box
{
background: url( '../images/login2.png' ) no-repeat center center;
position: fixed;
width: 319px;
height: 417px;
top: 50%;
left: 50%;
margin-top: -209px;
margin-left: -160px;
}
#input_div
{
position: fixed;
width: 103px;
height: 38px;
margin-top: 230px;
margin-left: 55px;
}
#lock
{
border: none;
position: fixed;
background: url( '../images/lock.png' ) no-repeat;
width: 10px;
height: 13px;
margin-top: 287px;
margin-left: 270px;
}
#forgot
{
position: fixed;
margin-top: 362px;
margin-left: 50px;
}
#login_box h1
{
color: #EDF2F7;
font-size: 10px;
text-align: left;
font-family: arial, sans-serif;
}
.input
{
width: 200px;
font-size: 12px;
text-align: left;
font-family: arial, sans-serif;
border: solid 1px #85b1de;
background: url( '../images/gr.png' ) repeat-x #EDF2F7;
background-position: top;
padding: 4px;
}
input[type="text"]:focus, input[type="password"]:focus
{
border: solid 1px #31677B;
}
#login_box p
{
font-weight: bold;
color: #478FAB;
font-size: 12px;
text-align: left;
font-family: arial, sans-serif;
}
#button_div
{
position: fixed;
width: 103px;
height: 38px;
margin-top: 360px;
margin-left: 190px;
}
.button
{
border: none;
width: 103px;
height: 38px;
text-indent: -1000em;
cursor: pointer;
background: url( '../images/login_button.png' ) no-repeat center center;
}
in Internet Explorer: Incorrect in Firefox, Opera, Chrome... ( Any code compliant browser ) Correct ....Any help please? Sorry....wrong info here....been up too long. I'll regroup and repost this with hthe correct info. I'm a bit new to the CSS scene, but I do know my fair share of it. Unfortunately, I've run into a huge problem: Our menu bar takes up a lot of code that we DON'T want to have to repeat on EVERY page. So, my question is: Is there any code/way we can retrieve data from another source file and have it pulled into our original code? Like an img src=, only with a file. Thanks in advanced! Greetings, I don't know how is this possible. Please, take a look at these 2 pages: Correct: http://83.208.191.102/bio/Sources/M...t.modified.html Screwed: http://83.208.191.102/bio/Sources/M...modified02.html It's no browser-specific problem, it does the same in both IE and FF .I must be missing something really basic, but I can't see any difference Please look at this page: http://validator.w3.org/check?uri=w...=Inline&group=0 As you can see all the script codes are in need of helping to pass. I am trying to clean this page up and the rest but need advice to how to do so. For example, it is telling me not to use the & sign in the script but I am afraid to replace it with the & or & . What should I do here or how can I fix these errors? Should I be using a different Doc type or something? Thanks!!! |
|||||||