|
CSS - Dynamically (sort Of) Set Size Of Menu
Hello all. I posted about menus earlier but this refers to a completely different menu in case there is any confusion. Consider the following code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
#level0 { height: 240px; }
#level0 ul {
list-style-type: none;
border: 0;
border-top: thin solid #ff0000;
padding: 0;
margin: 0; } /* end #level0 ul */
#level0 ul li {
display: block;
padding: 0;
margin: 0; } /* end #level0 ul li */
#level0 ul li a {
border-bottom: thin solid #ff0000;
border-right: none;
text-align: right;
padding: 0;
padding-right: 0.5em;
color: #00ff00;
text-decoration: none;
display: block; } /* end #level0 ul li */
#my_image { float: right; }
</style>
</head>
<body>
<div id="level0">
<img id="my_image" src="#" alt="" height="240">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
</ul>
</div>
<p>Here is some random text.</p>
</body>
</html>
Visually, this should be a vertical menu next to an image with a set height of 240px. What I want to happen is for the menu to be exactly 240px tall with the whitespace distribution to be uniform throughout each of the links. I was playing around with margin and padding and was thinking that auto might figure in to it but I could not get the correct combination to accomplish this. I prefer to have CSS determine the whitespace distribution for me because the client may want to add or remove menu options so it may not always be 8. Thoughts? And again, everyone on this forum has been really helpful and patient with me and I am very thankful for that. Similar TutorialsWe have > 400 products in our children's boutique in Infant Girl as an example. Right now, you click 1-20, 21-41, etc. to view them by 20. I'd like to give people a way to view all, but here's my problem. I use a horizontal looper asp program to show 3 colms and products and how ever many rows required to show 20. Behind this I use a white CSS box that looks like this. <span class="detailsboxlist"></span> There's nothing in it. I use layers to push it behind the products. How can I now make it dynamically scale to the view all (400+ products) which change all of the time? Thanks!!! Mike I am creating a website that uses English and Japanese characters. The default font size I use for English characters displays the Japanese characters too small. I would like the Japanese characters to display in a certain size whenever and wherever they appear. I can't simply use classes because I have English and Japanese appearing in the same elements a lot of the time. Any help would be greatly appreciated. Thank you. Something for the css pros: Can anybody give me a hint on how to convert the following (table) based markup snippet to div-only markup? http://www.twosailors.net/test.html In all my tests I cannot get the rightmost cell expand so the whole menu gets it's total size. I do NOT want to convert the boxes to fixed width but keep them shrinkwrapping around the menu texts. Also, I do want a border around the boxes so any faking with background colors will not work either. Any ideas? Andreas Pardeike Hi there, I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right. Code: <font color='white'><font size='1' face=verdana size=1> I couldn't find the equivalent of this in CSS This is my last experiment but it doesn't seem to work either Code: fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}
Thanks I could see this as potentially being really easy to do or really hard to do. I'm hoping for the former. Suppose I have 3 divs, A, B, C and that I want the total width of A + B + C to equal the width of the screen. Suppose also that I want them to be inline. How can I have B to be a fixed width while A and C expand depending on the screen width (such that the width of A = the width of C)? So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0, How do you get a simple tag like body { font-size:small; } to be equal in all browsers? Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way? By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it. It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering. B Sorry for the vague subject line, but it's difficult to summarize. Disclaimer: I am not a designer, just a programmer trying to get a rough layout so the client can see how things will work, which can then be turned over to someone who will make it look nice. My usual solution is to use tables, but that won't work for this! Basically I want a number of lines running down the page, each line having a check box, radio button or nothing in the left column, and text in the right. Each line will have a varying indent level. The text may be lengthy and wrap, and I want it to stay within its own cell when it does. Like a table. But I can't really get it to do the indenting the way I want. I could probably get it to work, but it would be really, really kludgy, and I do have some pride! I put it in DIVs, like this: Code:
<HTPEACH DATASET="Ratings">
<DIV CLASS="Container {{ds_Indent}}">
<DIV CLASS="Block1"><HTPTAG NAME="ds_Field"></DIV>
<DIV CLASS="Block2">{{ds_Text}}</DIV>
</DIV>
</HTPEACH>
If I float Block1 left and Block2 right and give them widths, it works except that Block 2 is still lower than Block1. So I look into positioning. To make a long story short, what I end up with is this: Code:
.Container {
width: 650px;
position: relative;
}
.Block1 {
float: left;
width: 25px;
border: 1px solid navy;
}
.Block2 {
float: right;
width: 625px;
position: absolute;
top: 0;
left: 25px;
border: 1px solid navy;
}
Which, of course, ends with everything at the top of the page, all overlapping. Reading a little more, I can see why, but now I'm stumped. Hey everyone, I am wondering how Lufthansa http://www.lufthansa.com/ Put a mouseover table thingy on their page. On the top roll your mouse over "worldwide sites" and a little thing drops down. Does anyone have a script like that? Thanks for your help! Hello all. Suppose I have the following: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* footer styles */
#footer { clear: both; }
#footer ul {
width: 544px;
list-style-type: none;
display: block;
} /* end #footer ul */
#footer ul li {
float: left;
background-color: #003366;
} /* end #footer ul li */
</style>
</head>
<body>
<div id="footer">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><img src="images/foot_nav2.gif" alt="" id="footer_image" /></li>
</ul>
</div>
</body>
</html>
Now suppose that the image is 50px high. What I would like is to get the links to align at the bottom of the instead instead of at the top. I tried a vertical-align: bottom but that didn't seem to help the situation any. This may have been asked and answered before, but if so my search-fu has failed me. I am working on an external style sheet for a set of pages, some pages will have floated div sidebars, some pages will have boxed paragraphs, and some pages will have both (as in the example). 1) Why does the background and border of the boxed paragraph extend under the floated div sidebar even though the text does not ? 2) Is there a way to get the background/border of the boxed paragraph to "see" the floated div sidebar so that the right edge of the boxed paragraph's border would be visible ? I am hoping for an answer that does not involve absolute units for the boxed paragraph, since I want the pages to fill whatever window size the the viewer might have. The simple example below should demonstrate the issue. and could be copy/pasted to a site like: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic Code: <html><head><style>
body {font-size:small;}
div.side {float:right; border:1px solid red; padding:4px; margin:0 0 0 8px; width:40%; background:#ddd;}
.box {border:1px solid lime; padding:8px; margin:8px; background:#eee;}
p {margin:4px 0; text-align:justify}
</style></head><body>
<div class="side"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body></html>
I'm trying to get the footer to dynamically expand with the content in the box 1, 2, 3. How can i do this? The HTML Code:
<div id="footer">
<div id="box1">Content</div>
<div id="box2">Content</div>
<div id="box3">Content</div>
</div>
The CSS Code:
#footer {
min-height:150px
height:auto;
}
#box1 {
float:left;
min-height:150px
height:auto;
}
#box2 {
float:left;
min-height:150px
height:auto;
}
#box3 {
float:left;
min-height:150px
height:auto;
}
I have the following situation: I have a scrolling table, split in two divs. One div contains the header table with column headers, and the data div contains the actual data table. Both divs are fixed in height, but what I would like to do is have the data div resize depending on the number of rows in the data table. I have tried playing with divs' min-height and max-height and these seem to work fine for IE7, FF2 and Safari, but not for IE6 and Opera. Is there any workaround that would be compatible with all mentioned browsers? Thanks! to dynamically have a menu to change whats css sheet is loaded on page view Code:
<?php
if currentpage != account.php {
$_SESSION['links'] = "display:none;";s
}
?>
then on the external css file i have:
#accountLinks {
<?php echo $_SESSION['links']; ?>
}
?>
\accountLinks id is joined with the submenu. the problem is when i view the main.css from the browser it doesnt display the value of session['link'] but that line... I need to add a background picture to my web form. I want that the picture should be dynamically resized to the client area of the browser, when the page loads How to do it using CSS? I have a loop in PHP that runs through sets of data and assigns positioning based on its place in the loop. For some reason the styles for position aren't being applied. Any ideas what i'm doing wrong? Code: <html>
<head>
<style>
#wrapper {width:100%; height:100%;}
#box {background-color:gray; width:100px;}
</style>
<body>
<div id=wrapper>
<div style="postion:absolute; left:50px; top:100px" id=box>AA</div>
<div style="postion:absolute; left:100px; top:100px" id=box>BB</div>
<div style="postion:absolute; left:150px; top:100px" id=box>CC</div>
</div>
I have a <div> that contains a list. I would like to "dynamically" expand the number of items on the list when one particular item is "clicked". Is there a tutorial for this type of action? I came here hoping you guys could lend some advice and suggestions towards getting what I am trying to accomplished solved. I am using google charts to generate 2 different charts and am using javascript and css to dynamically generate the divs for each of my charts for that data that I am pulling. However, I am running into some issues trying to get the divs positioned properly while doing this, and I was hoping you guys could lend some advice. I have a div that's my container, a div for the title of the line chart, a div for my line chart, and a div for my pie chart and the code for them is he Code: //==================================================================================================== ==
// Create our bodyDiv which acts as our Title for the Intersection
//------------------------------------------------------------------------------------------------------
bodyDiv = document.createElement('div');
bodyDiv.setAttribute('id', ("bodyDiv" + TempInt));
bodyDiv.style.width = 900;
bodyDiv.style.height = 400;
bodyDiv.style.margin = 0;
bodyDiv.style.padding = 0;
bodyDiv.style.position = 'relative';
bodyDiv.style.left = '0px';
bodyDiv.style.top = '0px';
//==================================================================================================== ==
// Append the Div to the HTML Document
//------------------------------------------------------------------------------------------------------
document.body.appendChild(bodyDiv);
titleDiv = document.createElement('div');
titleDiv.setAttribute('id', ("bodyDiv" + TempInt));
titleDiv.style.width = 900;
titleDiv.style.height = 5;
titleDiv.style.margin = 0;
titleDiv.style.padding = 0;
titleDiv.style.position = 'relative';
titleDiv.style.left = '0px';
titleDiv.style.top = '0px';
titleDiv.innerHTML = '<img src="http://www.suntransformer.com/peter/GoogleAPI3/test/bckgrnd.png"><h5>Intersection: ' + TempInt + '</h5>';
bodyDiv.appendChild(titleDiv);
//==================================================================================================== ==
// Create the timelineDiv which holds our TimeLine chart
//------------------------------------------------------------------------------------------------------
timelineDiv = document.createElement('div');
timelineDiv.setAttribute('id', TempInt);
timelineDiv.style.width = 350;
timelineDiv.style.height = 275;
timelineDiv.style.margin = 0;
timelineDiv.style.padding = 0;
timelineDiv.style.position = 'relative';
timelineDiv.style.left = '0px';
timelineDiv.style.top = '0px';
//==================================================================================================== ==
// Append the Div to the bodyDiv
//------------------------------------------------------------------------------------------------------
bodyDiv.appendChild(timelineDiv);
//==================================================================================================== ==
// Create the pieDiv which holds our Pie Chart
//------------------------------------------------------------------------------------------------------
var pieDivID = "Pie" + TempInt;
pieDiv = document.createElement('div');
pieDiv.setAttribute('id', pieDivID);
pieDiv.style.width = 500;
pieDiv.style.height = 300;
pieDiv.style.margin = 0;
pieDiv.style.padding = 0;
pieDiv.style.position = 'relative';
pieDiv.style.left = '0px';
pieDiv.style.top = '0px';
pieDiv.innerHTML = '<img src="http://www.suntransformer.com/peter/GoogleAPI3/test/bckvert.png">';
//==================================================================================================== ==
// Append the pieDiv to the bodyDiv
//------------------------------------------------------------------------------------------------------
bodyDiv.appendChild(pieDiv);
The charts are added to the divs later by creating the chart and setting its container options to the div. I am trying to get the title for the timeline chart div to show directly above the timeline chart div and then the pie chart div to show up right next to that. However, the divs are showing up stacking right up on top of each other. Any ideas? I'm trying to get a dynamically populated logo to center in a div. I've found a solution which works in FF, IE7 and safari, but I've tried everything and I can get this to sit centered in IE6. The html looks like this: <div> <table width="100%" height="100%"> <tr> <td> <a href="/somelink/"> <img src="dynamicallyGeneratated.jpg"/> </a> </td> </tr> </table> </div> The URL is sportsmembership.com.au/boxhillhawksfc/ and the logo is in the top left corner The dtd is valid xhtml transitional, and IE6 is rendering in standards compliant mode. I've tried display block, and margin:0 auto on the image, and i've tried text-align center on the td, a and img tags, and I cannot get this to sit properly in ie6. The image vertically aligns correctly but always sits to the left of the div, no matter what text-alignment I give it. I can't find a way to center this with margins or padding because the image is dynamically called from a database, and can have different dimensions. Hi guys, Let's say I have 2 inputs like this: <input ... /> <input type="submit" ... :> Whe displayed in IE, when selecting the 2 inputs one can see that there is a space character between the two. It can of course be removed like this: <input ... /><input type="submit" ... :> My question is: Is there a way to do this dynamically in CSS? Or Javascript? The point is of course a better control of how the page is displayed cause sometimes one designs like the first case and other times like the second. Thank you |
|||||||