|
CSS - Dynamic Adjusting
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 ! Similar TutorialsHi and thank you in advance for any advice or help. my website: http://earlystartdc.com/ Im having trouble trying to find the right css code so that i can adjust the banner underneath the menu in order to remove the white spaces in the module. I would like for the banner to be at margin 0 so that its all the way to the top without any white space in between. any help?? Thank you P.s - This is what my css files look like from my template/css folder . Hello, I am having a problem with the aligning of m website. Whenever I view my website in a normal size window everything looks fine and in it's place. However when I full screen my browser window everything stays to the left, and my background repeats, nothing moves with the browser window. My question is how do I have everything on my webpage automatically adjust to the browser window? Thanks! Is it possible to setup a frame to adjust? I ran into a problem with my menu being on the left side of the screen in its own frame, when it expands it needs about twice as much space otherwise another frame on the right of this frame cuts off the text and buttons from the menu, (this frame is used to display documents inside of it.) Originally I did not think it would be a problem but I just realized that some of the documents need a lot of room horizontally do to images and descriptive frames being inside of the docs, thus causing the reader to have to keep scrolling from side to side in order to read the paragraphs. Is there some way to get the frame with the menu to adjust according to the size of the menu as the user mouses through it, or a way to make the menu float over the doc viewing frame as the user mouses through it and just make the menu frame big enough to fit the menu when it is not being used, or another alternative all together? Thanks for reading. This is my first OSCommerce site... Where do I adjust the color and size of the title font....the BIG one at the top of each page....is it an h1 tag? I can't seem to find it in the style sheet?? Hi all, noob here. I am trying something pretty simple but just cant get it to work. For my site, I have a main content area and two right sidebars. I am trying to decrease the width of the the content area and widen the sidebars to fill the extra space created, say 50px. I have come unstuck trying to get it done though. Below is the relevant part of the css: Code: /* CONTENT layout */
#content {
float: left;
width: 100%;
padding-bottom: 2em;
}
.sidebar-double #content, .sidebar-left #content {
margin-left: -221px;
}
.sidebar-double #content, .sidebar-right #content {
margin-right: -271px;
}
.sidebar-right-double #content {
margin-right: -448px;
}
/* Add blanks left and right for the sidebars to fill */
.sidebar-double #squeeze, .sidebar-left #squeeze {
margin-left: 221px;
}
.sidebar-double #squeeze, .sidebar-right #squeeze {
margin-right: 271px;
}
.sidebar-right-double #squeeze {
margin-right: 448px;
}
/* Add whitespace to content area */
#squeeze {
padding: 1em 0 1.5em;
overflow: hidden;
}
.sidebar-double #squeeze, .sidebar-left #squeeze {
padding-left: 2em;
}
.rightbar #squeeze {
padding-right: 2em;
}
/* SIDEBAR layout */
#sidebar-wrapper .sidebar {
float: left;
z-index: 2;
position: relative;
}
#sidebar-left {
width: 221px;
}
#sidebar-right-sec {
width: 200px;
padding: 1.2em 0;
}
#sidebar-right {
width: 248px;
padding: 1.2em 0;
}
.rightbar .top-corners {
right: -8px;
top: -3px;
padding-right: 8px;
position: relative;
min-height: 12px;
}
.rightbar .bottom-corners {
right: 0;
bottom: -4px;
position: relative;
min-height: 7px;
}
I have tried changing the content or 'squeeze' margins as its called and then just widening the sidebars but it just doesnt work. If anyone can help it would be great, thanks! Hey guys, I started working on my website again and found a great CSS dropdown menu online that is free to use with a GPL license. I adjusted it without a problem (always could read and adjust code but aren't great when it comes to writing it). Now that I embedded it in my website there is a slight trouble I am running into. I can't seem to center it no matter what I try. I read these floats are tricky to center at times which is why I wanted to share my code with you and see if you might be able to fix it for me. If anyone of you can help me out it would be much appreciated!!! Thanks, alex Here is the site with the 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" xml:lang="en" lang="en"> <head> <title>LWIS.NET Celebrity Drop-Down Menu</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Tom@Lwis (http://www.lwis.net/free-css-drop-down-menu/)" /> <meta name="keywords" content=" css, dropdowns, dropdown menu, drop-down, menu, navigation, nav, horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards, cross browser, internet explorer, ie, firefox, safari, opera, browser, lwis" /> <meta name="description" content="Clean, standards-friendly, modular framework for dropdown menus" /> <link href="css/dropdown/themes/lwis.celebrity/helper.css" media="screen" rel="stylesheet" type="text/css" /> <!-- Beginning of compulsory code below --> <link href="css/dropdown/dropdown.linear.columnar.css" media="screen" rel="stylesheet" type="text/css" /> <link href="css/dropdown/themes/lwis.celebrity/default.advanced.css" media="screen" rel="stylesheet" type="text/css" /> <!--[if lte IE 7]> <script type="text/javascript" src="js/jquery/jquery.js"></script> <script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script> <![endif]--> <!-- / END --> </head> <body> <!-- Beginning of compulsory code below --> <ul id="nav" class="dropdown dropdown-linear dropdown-columnar"> <li><a href="./">resume</a></li> <li><a href="./">about</a></li> <li class="dir">work <ul> <li class="dir">Reel <ul> <li><a href="./">Montage Reel</a></li> <li><a href="./">Director's Reel <br>(selected scenes)</a></li> </ul> </li> <li class="dir">Narrative <ul> <li><a href="./">The Liberation of the Fish</a></li> <li><a href="./">Behind the Scene</a></li> <li><a href="./">All that Remains</a></li> <li><a href="./">Jumper</a></li> <li><a href="./">Dragoste</a></li> </ul> </li> <li class="dir">Music Video <ul> <li><a href="./">MOBY music video competition</a></li> </ul> </li> <li class="dir">Commercial <ul> <li><a href="./">FIFA spec commercial</a></li> </ul> </li> </ul> </li> </ul> <!-- / END --> </body> </html> And here is the default css which I have tried playing with to no success. Code: @charset "UTF-8";
/**
* LWIS Celebrity CSS Drop-Down Menu Theme
*
* @file default.css
* @name Default
* @version 0.1
* @type transitional
* @browsers Windows: IE5+, Opera9+, Firefox2+
* Mac OS: Safari2+, Firefox2+
*
* @link http://www.lwis.net/
* @copyright 2009 Live Web Institute. All Rights Reserved.
*
*/
/*-------------------------------------------------/
* @section Base Drop-Down Styling
*/
ul.dropdown {
font: 20px/normal Helvetica, Arial, sans-serif;
letter-spacing: +2px;
text-transform: lowercaseercase;
}
ul.dropdown li {
padding: 0 10px;
background-color: transparent;
color: #000;
}
ul.dropdown li.last ul li {
float: right;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #cdcdcd;
color: #000;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #000; text-decoration: none; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
/* -- level mark -- */
ul.dropdown ul {
background-color: #cdcdcd;
font-size: 12px;
letter-spacing: normal;
}
* html ul.dropdown ul {
width: 960px;
}
ul.dropdown ul li {
font-weight: bold;
}
/* -- level mark -- */
ul.dropdown ul ul {
margin-top: 5px;
text-transform: none;
}
ul.dropdown ul ul li {
font-weight: normal;
}
/*-------------------------------------------------/
* @section Support Class `dir`
*/
ul.dropdown *.dir {
padding-right: 30px;
background-image: url(../../../../images/lwis.celebrity/nav-arrow-down.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown ul *.dir {
background-image: none;
}
I have nested my content divs within a centered wrapper div. the wrapper div is controlled by an external css file. when content is added to the nested divs they grow outside of the wrapper div. is there a way to force the wrapper to grow with the content like tables do? The CSS: #wrapper { margin-top: 20px; margin-right: auto; margin-bottom: 20px; margin-left: auto; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; position: relative; width: 760px; background-color: #FFFFCC; left: auto; right: auto; height: 400px; z-index: 1; } The HTML: (attached) 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. 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 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. 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! :-) 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 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 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! 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? 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. 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 |
|||||||