|
CSS - Dynamic Css Problems
Despite looking through the forum, having problems with dynamically creating an external CSS file. Can any one explain?
Basically I currently have a CSS file: Code:
.normal
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.userdef
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF0000;
font-weight: 800;
}
.big
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
I have set the site up so that the user can define there own colour of text for the userdef style, but im unsure how I can put this colour variable into the CSS file. I'm guessing I have to rename it into a .php file... but how will the browser still know its a CSS file?? Thanks very much for your help Similar TutorialsI have a site that adds dynamic elements. The problem is that IE does not like to style dynamic elements for some reason. Does anyone know a fix for this? Here is a simple example of what I am talking about: Code:
<html>
<head>
<script language="javascript">
function addSpan()
{
rndNum = Math.round(Math.random()*3);
if(rndNum==0)
{
newSpan = document.createElement("span");
newSpan.setAttribute("class", "a");
newSpan.innerHTML = "Blue italic Times";
document.appendChild(newSpan);
}
if(rndNum==1)
{
newSpan = document.createElement("span");
newSpan.setAttribute("class", "b");
newSpan.innerHTML = "Red bold Arial";
document.appendChild(newSpan);
}
if(rndNum==2)
{
newSpan = document.createElement("span");
newSpan.setAttribute("class", "c");
newSpan.innerHTML = "Yellow underline Tahoma";
document.appendChild(newSpan);
}
</script>
<style>
.a
{
font-family:Times;
color:'blue';
font-style:italic;
}
.b
{
font-family:Arial;
color:'red';
font-style:bold;
}
.c
{
font-family:Tahoma;
color:'yellow';
font-style:underline;
}
</style>
</head>
<body>
<input type="button" value="Add Random Span" onClick="addSpan()"/>
</html>
The styles work in Chrome and Firefox, but not IE Any help is greatly appreciated. Thanks. I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
Hi Guys... (and Girls) Great Forum you have going here... I've got a quick question regarding Dynamic CSS. I need to mention now though - I'm doing some development work at the moment, but, I'm not a developer so my approach and question might seem unusual to the experienced guys out there. Situation: I'm currently building a new site which is styled completly with CSS - e.g. No Tables or Cells. It's the first time I've done it but it's working great! The website is currently a fixed 760px across so that it will fit into 800 x 600 screen. Market research suggests about 20% of the visitors to this site use a 800 x 600 screen resolution and so I don't want them to have a horizontal scroll bar, but I would like the site to be at least 800px across for everyone not using a 800 x 600 screen resolution. My question is - Can I use a Javascript function to grab the screen resolution of a visitor to the site and then dynamically update the CSS of the site depending on screen resolution? And if so do you think it's a good approach? I'm sure there are others ways to do it but I'd prefer to work within the skills I already have, which includes Javascript and PHP. Thanks for the help... Matt Edwards I have <div> content that diplays at different sizes in IE and Mozilla, which makes lining up the <div> container below it difficult. How can I get the <div> container to expand to the size of the content height wise so that I can then capture it's height with js, setting the <div> container below it to it's proper poisition. Thanks. I was thinking of using DIVs insteed of table to layout my page. The page would be dynamic meaing the text would come from DB so i would have new articles comming in daily. I will like I cant controll where the text is put on the text. If I use CSS width="20px" and hight"20px",, <-- Yeah i know it down to the pixle,, but that would mean i would need to make a new CSS for every article that where put into the db. <-- which would be a pain. So how can I keep the controll of placing my text without using tables ? Please help a new CSS user. Hi all, Bit of a stupid question this as I have checked w3 and w3schools et al and could find anything on this, but: Are wildcards usable in CSS? Example: I am going to be generating blocks dynamically, and instead of writting all these blocks into a stylesheet, I wondered if you could do it using wildcards. Example: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Creation date: 01.10.2004 -->
<head>
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
<!--
#block {color: red;}
-->
</style>
</head>
<body>
<div id="block">Text</div>
<div id="block2">Text 2</div>
<div id="block3">Text 3</div>
<div>Text 4</div>
</body>
</html>
Changing the #block reference to #block* doesn't work, any ideas? I don't want to have to add #block, #block2, #block3 {color: red;} etc... Hi. I would like to create a gradient similar to the microsoft website. http://www.microsoft.com/downloads Look how the gradients at the top and bottom of the page work. Im sure this is not simply repeating an image. Does anyone know how this works? or can point me in the direction of a tutorial on how to achieve this? I looked at the microsoft site in Opera and NS, and the dynamic grad only seems to work in IE. So im guessing that you can also set a bkgnd image? for the other browsers? many thanks. I want to have a web page with a list on it that dynamically resizes to fit the browser viewport with a minimum distance between list items. Here's an example I faked in TextPad: Normal view: User enlarges browser: User shrinks browser: How would I accomplish this in HTML/CSS? Thanks! Hello all, I'm trying to create a site using all css positioning but I'm running into some problems that to me, shouldn't even be problems. The main issue I'm having is getting a container div's height to expand based on the height of divs nested inside the container. Vut all I get is the nested divs flowing outside of the container div. I don't have any code to share, because I have it so screwed up right now it wouldn't even help explain my issue. I'm going for a 3 column design, that is wrapped by said container div, and the container divs height would be based on the height of the longest div nested within. I've done alot of searching on the web, and the answer seems to be that this can't be done. But I'm giving it one more try here. I'm also a bit confused about relative positioning. Say that my conatiner div actually worked, and the height adjusted appropriatly. I have a left column, and a right column. both are position relative to the container. But when I do this, it seems to come out that the right columns top positioning is relative to the left columns positioning. If I design everything based on viewable browser area, and allow scrolling when necassery, css is a dream. But thats not very practical. It seems that css great for static websites, but not quite up to par for anything dynamic. Once I calm down and I'm not so frustrated, I'll start over and post some code if my explaination isn't descriptive enough. Any input would be appreciated! :-) I have the task of creating a question with multiple correct answers without using form checkboxes (for reasons I won't go into here.) I've made a simple question that works by replacing the src of a tickbox image with a ticked one when that answer is selected. It works in IE5.5 and Firefox but in IE6 the images show when the page loads, then disappear on clicking and don't come back. Can anyone suggest why? I've stripped out all the branding etc and put the basic page at http://www.normanlamont.com/test/mu...pages/index.htm Here's the code that does it: Code: function markup(which) {
// toggle tickbox on and off until submit
if (document.getElementById('c' + which).className=="chosen") {
document.getElementById('tick' + which).src="../q_images/tickbox_0.gif";
document.getElementById('c' + which).className="not_chosen";
selected[which-1]=0;
}
else {
document.getElementById('c' + which).className="chosen";
document.getElementById('tick' + which).src="../q_images/tickbox_1.gif";
selected[which-1]=1;
}
}
hi all ! I have some dynamic data that gets inside a cell in a table, the problem is that Im having problems to adjust the cell so the data can be seen more user friendly. The max width for the table is 1024 px. This is how it looks: Is there a way to make it look better using dynamic css,script,etc? Thanks a lot ! Hi I'm trying to CSS a dynamic table using Dreamweaver CS4 the problem i have is to set my css i have to have 2 rows 1 odd 1 even and dreamweaver only gives me 1. I've added a second row which just remains blank. Can anyone help Heres my html / PHP: <div class="donation_table"> <table> <thead> <tr> <th>FAMILYNAME</th> <th>FAMILYCODE</th> <th>DONATION</th> <th>DATE</th> </tr> </thead> <?php do { ?> <tbody> <tr> <td><?php echo $row_Recordset3['FAMILYNAME']; ?></td> <td><?php echo $row_Recordset3['FAMILYCODE']; ?></td> <td>$<?php echo $row_Recordset3['DONATION']; ?></td> <td><?php echo $row_Recordset3['DATE']; ?></td> </tr> <tr class="rowline"> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> <?php } while ($row_Recordset3 = mysql_fetch_assoc($Recordset3)); ?> </table> </div> And heres my PHP code $maxRows_Recordset3 = 25; $pageNum_Recordset3 = 0; if (isset($_GET['pageNum_Recordset3'])) { $pageNum_Recordset3 = $_GET['pageNum_Recordset3']; } $startRow_Recordset3 = $pageNum_Recordset3 * $maxRows_Recordset3; mysql_select_db($database_MafiaLive, $MafiaLive); $query_Recordset3 = "SELECT FAMILYNAME, FAMILYCODE, DONATION, `DATE` FROM donations ORDER BY DONATION DESC"; $query_limit_Recordset3 = sprintf("%s LIMIT %d, %d", $query_Recordset3, $startRow_Recordset3, $maxRows_Recordset3); $Recordset3 = mysql_query($query_limit_Recordset3, $MafiaLive) or die(mysql_error()); $row_Recordset3 = mysql_fetch_assoc($Recordset3); if (isset($_GET['totalRows_Recordset3'])) { $totalRows_Recordset3 = $_GET['totalRows_Recordset3']; } else { $all_Recordset3 = mysql_query($query_Recordset3); $totalRows_Recordset3 = mysql_num_rows($all_Recordset3); } $totalPages_Recordset3 = ceil($totalRows_Recordset3/$maxRows_Recordset3)-1; Thank you Daniel Hi All, I've got one of those wonderful CSS/javascript flyout menu's running on my website which is causing me a little bit of grief in Firefox and Safari. Firefox and Safari seem to be placing the 2nd and 3rd level items of the menu underneath all the other content on the page and therefore can't be seen. Seems to work well on Opera and IE. Here are the screen shots of what is happening in each browser: http://dev.platforminteractive.com.au/cssissue/css_ff.jpg - firefox http://dev.platforminteractive.com.au/cssissue/css_opera.jpg - opera http://dev.platforminteractive.com.au/cssissue/css_ie.jpg - ie You can take a look at the site and the coding behind it at http://dev.platforminteractive.com.au - just in development atm but this nav is causing me some grief. Hi all- I am building a tableless site out of divs/css and cant seem to get the one div positioned properly. I need to make the site as dynamic and liquid as possible so absolute positioning (i.e. width:320px; etc) is out of hte question... http://verticalextreme.com/about/hours_pricing.html i am trying to have the HOURS div and hte PRICING div inline with each taking up 50% of the main content width i currently have the following css: Code: #hours {
display: inline;
clear: none;
width: 50%;
}
#pricing {
clear: none;
display: inline;
width: 50%;
}
Thanks for any help in advance - rock on Ok im trying to have a division that expands with the content however, although this works in IE if i dont specify a height, in browsers like firefox the background color just stops even though the content carries on. Code: <div id="content"></div> Code:
div#content
{
background-color: #F3F3F3;
}
ive tried adding height: 100% but it doesnt make any difference Thank you for your time and assistance. I am working on building my first website in 2 years. I am very interested in developing a good site interface with standard code that may be easily edited later. Specifically, I am interested in creating dynamic navigation menus that will be supported by as many browsers as possible. I have seen dynamic menus created with javascript, but I know I don't want to do that since some browsers do not support it/or do not have it enabled by default. Can you comment on whether or not CSS would be a good solution to get around this problem? I have never used CSS to create menus in the past, but it seems very useful for standardizing a site interface. I am also open to other suggestions, what would you do to accomplish this task? I am newbie in CSS but I do not want to surrender to use tables. In Explorer it is seen OK but is wrong in Firefox. Why? URL URL www.lekunberri.com/focesdelcamino/mapa.asp?id=31 There is div called "mapaaundi" with relative positioning that contains images as fragments of a map. Inside there are some images (arrows) of the class "boloaundi", with absolute positioning. I have previously tried something similar to this and works well. Thanks in advance! I'm having a problem with my top Navigation. The top left has a search box, with a fixed width, but the other boxes across the top need to be dynamic width. Anyone have any suggestions on a good way to do this? I assumed I could set the boxes to a % width, and the % would be based on the container div, but this doesn't appear to be the case. Below is the skeleton of my code. I also have a problem with the main div. I cannot get it to float left of the side navigation bar when I put a sufficient amount of text in it. Thanks for the time to help me out! Code:
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Welcome!</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style TYPE="text/css">
#header {
color: #fff;
background-color: #000;
}
#topNav {
width: 100%;
min-width: 750px;
margin: 10px 0px;
padding: 0;
border: 1px solid #0f0;
}
#topNav:after {
content:".";
display:block;
clear:left;
height:0;
visibility:hidden;
}
/* Hides from IE-mac \*/
* html #topNav {height: 1%;}
/* End hide from IE-mac */
/* Search Box */
#searchBox {
float: left;
padding: 0;
margin: 0;
width: 150px;
height: 125px;
border: 1px solid #000;
background: #FFF;
text-align: center;
}
#nav, #nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav li {
float: left;
margin-left: 8px;
padding: 0;
width: 18%;
height: 125px;
border: 1px solid #000;
background: #235;
color: #FFF;
}
#sideNav {
float: left;
width: 151px; /* 1px adjustment for no border */
margin-right: 10px;
border: 1px solid #0f0;
}
/* sideNav Boxes */
#sideNav .box {
margin-bottom: 10px;
padding: 5px 5px 5px 50px;
border: 1px solid #000;
height: 90px; /* add 10 for padding */
background: #235;
color: #fff;
background-repeat: no-repeat;
}
/* Main Content Container */
#main {
float: left;
padding: 10px;
border: 1px solid #000;
background: #fff;
}
/* Page Footer */
#footer {
clear: both;
background: #235;
border: 1px solid #000;
color: #aaa;
text-align: center;
margin: 10px 0px 0px 0px;
padding: 20px;
}
</style>
</head>
<body>
<div id="header">
Top Header Area
</div>
<div id="topNav">
<!-- Search Box -->
<div id="searchBox">
Fixed Size Search Box
</div>
<ul id="nav">
<li >Dynamic Sized Box in Top Nav</li>
<li>Dynamic Sized Box in Top Nav</li>
<li>Dynamic Sized Box in Top Nav</li>
<li>Dynamic Sized Box in Top Nav</li>
</ul>
</div>
<div id="sideNav">
<div class="box"> Fixed Size Box in Side Nav
</div>
<div class="box"> Fixed Size Box in Side Nav
</div>
<div class="box"> Fixed Size Box in Side Nav
</div>
</div>
<div id="main">
Main Content Area<br /><br />
Maecenas ut quam rutrum lacus tempus fringilla. Maecenas aliquam tempus libero. Mauris porttitor. Etiam at
risus a est sodales cursus. Cras ut ipsum. Vivamus at turpis ac lorem posuere rutrum. Vestibulum nisi nulla,
rhoncus a, rhoncus sit amet, placerat ac, justo. Nam consequat mauris ut orci. Etiam eleifend. Ut sem mauris,
imperdiet vitae, consectetuer a, ullamcorper non, nibh. Curabitur sapien. Fusce ultricies, ligula eget
scelerisque tempus, nisi nisl convallis dui, ut scelerisque magna est sit amet leo. Suspendisse facilisis
tortor faucibus elit. Sed diam. Duis imperdiet blandit mauris. Etiam cursus erat vel ligula.
</div>
<div id="footer">
Footer
</div>
</body>
</html>
Hi there, I have a table which displays some links in columns, but I cannot work out how to convert it into CSS. This is the table code: PHP Code: <table width="100%" border="0" cellpadding="2" cellspacing="0" class="normal_12_blue"> {section name=row loop=$row_submenu_id} <tr> <td><a href="{$row_submenu_link[row]}" >{$row_submenu_name[row]} </a></td> {section name=col loop=$col_submenu_id[row]} <td><a href="{$col_submenu_link[row][col]}" class="normal_12_blue">{$col_submenu_name[row][col]} </a></td> {/section} </tr> {/section} </table> I tried using plain <div> tags, but it doesn't put them in columns. Any ideas how I can convert this? Hi all, I need my data to display like the states on this page: http://www.designfirms.org/directory/Internet_Design/Web_Design How do I achieve this using css and no tables? Can anyone help? I am using php/mysl to generate the data and this is the current code to pull the info: <table border="0" cellpadding="3" cellspacing="0" width="100%" id="table1"> <tr valign="top"> <td> PHP Code: <? $sql = "SELECT * FROM db"; $execute = MYSQL_QUERY($sql); $numrows = MYSQL_NUMROWS($execute); $counter = 0; $increment = 1; // Loop throuch all the categories with parent id = 0 for ($i=0; $i <$numrows; $i++) { $rs = MYSQL_FETCH_ARRAY($execute); $counter = $counter + $increment; $category_name = $rs["cname"]; $category_url2 = str_replace(' ', '-', $category_name); $category_url = strtolower($category_url2); //echo $counter; if ($counter == 4) { // close the last row and start a new row $counter = 1; echo "</td><td>"; ?> <span class="med">> <a href="/directory/<?=$category_url?>.html"><?=$category_name?></a><br></span> <? } else { ?> <span class="med">> <a href="/directory/<?=$category_url?>.html"><?=$category_name?></a><br></span> <? // end of the if counter statement } ?> <? // end of the for loop } ?> </tr> </table> The NEW results would need to display in the <div id="center"></div> area. Any help would be much appreciated. |
|||||||