|
CSS - Dynamic Div Positioning
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 Similar TutorialsIs there a way to add a property to a div that will position it according to the div above it? I'm trying to create content pages for my site, but the text on some is much longer than others. Giving a new id to each one just seems too tedious, there must be something I'm missing. I have a problem that I've been wrestling for the past hour and a half, and I've come to the conclusion that I will most likely never solve it on my own, so here I am. I have a header area of a website. It has a logo(basically the name of the website in a fancy font). The logo is in the bottom-left area of the header. I also have a banner. This banner can be anywhere from 468x60 to 728x90 pixels in dimension, depending on user input from a back end. I want the banner positioned near the bottom-right of the header, with a bit of space in between it and the right edge of the browser window. I'm having a lot of trouble accounting for the varying banner sizes. I can't use margins and floats to position the banners because the banner image size changes, therfore I thought it would be a good idea to use absolute positioning (relative to the header). This works perfectly, except when I resize the window, the banner overlaps the logo image. So, I guess I can't use absolute positioning. My HTML is: Code: <body> <div id="header"> <div id="header_ads"> <?php display_banner() ?> </div> <h1 id="heading"><span class="invisible">This is the heading</span></h1> </div> </body> My CSS is: Code: * {margin:0;padding:0;}
body {width:100%}
.invisible {visibility:hidden;}
/*Header*/
#header {margin-bottom:3em;background-color:rgb(80, 80, 82);padding:0 0 0.2em 0;height:8em;width:100%;position:relative;}
#header #heading {background:url("../images/logo.jpg") no-repeat;height:70px;width:400px;position:absolute;top:1.6em;left:1em}
#header_ads {float:right;margin-top:-1.5em;margin-right:1em;position:absolute;bottom:0.3em;right:4em}
The above CSS/HTML yields the exact desired result, but does strange things when the browser window is resized... I would greatly appreciate any help! I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo 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. 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. 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 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! :-) 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, 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 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 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. 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 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;
}
}
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? 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 trying to build a box that i can place content in. This box should dynamically change width and height to accommodate the content inside. I have build out a non-working example here http://sb.cesarvillaca.com/demo/box/box.php. It looks like i want it to be, but it doesn't work dynamically. Can someone please help me get this working, or show me an example i can work from online? Thanks. Here is my html with php for height/width (non-dynamic) values Code: <html>
<head>
<title> new document </title>
<style type="text/css" title="">
#box_t_body {
background-image:url('box_t_body.jpg');
background-repeat: repeat-x;
height:11px;
float:left;
}
#box_b_body {
background-image:url('box_b_body.jpg');
background-repeat: repeat-x;
height:11px;
float:left;
}
#box_l_body {
background-image:url('box_l_body.jpg');
background-repeat: repeat-y;
float:left;
}
#box_r_body {
background-image:url('box_r_body.jpg');
background-repeat: repeat-y;
float:right;
width:11px;
}
#box_tl_corner {
background-image:url('box_tl_corner.jpg');
background-repeat: no-repeat;
height:11px;
width:11px;
float:left;
}
#box_tr_corner {
background-image:url('box_tr_corner.jpg');
background-repeat: no-repeat;
height:11px;
width:11px;
float:right;
}
#box_bl_corner {
background-image:url('box_bl_corner.jpg');
background-repeat: no-repeat;
height:11px;
width:11px;
float:left;
}
#box_br_corner {
background-image:url('box_br_corner.jpg');
background-repeat: no-repeat;
height:11px;
width:11px;
float:right;
}
#box_body {
background-color:#ffffff;
float:left;
}
/* .clear prevents divs from flaotin gout side a container div. */
.clear{
height:0;
font-size:0;
line-height:0;
clear:both;
}
</style>
</head>
<body>
<?php
$width=600;
$height=600;
?>
<div id="box_t_body" style="width:<?= $width ?>px;"><div id="box_tl_corner" style=""></div><div id="box_tr_corner" style=""></div></div>
<br class="clear">
<div id="box_body" style="height:<?= $height ?>px;width:<?= $width ?>px;">
<div id="box_l_body" style="height:<?= $height ?>px; padding-left:20px;">
<div id="" class="" style="width:550px;">Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</div>
</div>
<div id="box_r_body" style="height:<?= $height ?>px;"></div>
</div>
<br class="clear">
<div id="box_b_body" style="width:<?= $width ?>px;"><div id="box_bl_corner" style=""></div><div id="box_br_corner" style=""></div></div><br class="clear">
</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? |
|||||||