|
HTML - Setting Containers Max Height
Hi,
I have added a screen shot to show what i mean here A site i am working on reuires 4 boxes in the main content area. I have started the template and i have managed to get the first 2 boxs to always have the same height with the following scipt Code: function fixH(one,two) {
if (document.getElementById(one)) {
var lh=document.getElementById(one).offsetHeight;
var rh=document.getElementById(two).offsetHeight;
var nh = Math.max(lh, rh);
document.getElementById(one).style.height=nh+"px";
document.getElementById(two).style.height=nh+"px";
}
}
window.onload=function(){
fixH('box1','box2','box3','box4');
}
i have added box3 and box4 to the bottom part and i tried a number of ways to get it to work but box 3 and 4 just wont stretch to match the others height. Please can you let me know what needs to be added to make this work? You will see box 1 and box 2 are the same height and this is done by using the script above. Box 3 and box 4 are not the same height. Any suggestions? extra info: The boxes are defined in my style sheet and i have not set the height because i dont want a fixed height. I want the boxes to stretch as i type out text into them but for them to keep the same layout on the pege so the top 2 boxes always need the same height and the bottom 2 need the same height aswell. Similar TutorialsHi All, I have a real simple html page and i want to hide all elements under "st" tag. But after i hide them I was to set it's size to 8px. This works well in Mozilla but not IE. Ive tried everything and still no clue... Any advice? HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">
function hideAll(){
var pEle = document.getElementById("st");
alert( pEle.childNodes.length );
for(var i=0; i < pEle.childNodes.length; i++){
pEle.childNodes[i].style.visibility = "hidden";
}
pEle.style.height= "5px";
}
</script>
</head>
<body onload="hideAll()">
<div id="st" style="background-color: red"><p id="1">asdsadsa</p><p id="2">asdsadsa</p></div>
</body>
</html>
So i was looking at a sites code and thought it looked very pro, now in one section they have a 2 col results table made from divs so it might display something like, (nb: img is just a small icon image) img teamX Vs TeamY 6-2 <-- a row img teamC Vs TeamF 2-8 this pic illustrates it:- Now each row has it own "row container div" and the whole thing is within the "table container div" but then there are 4 divs (cell divs) to hold all the content, for example HTML Code: <div class="cont"><a href="?page=1">
<div style="float:left; width:38%"><img class="game" src="1.gif" /> <b><img class="flag" src=2.gif" /> teamX</b></div>
<div style="float:left; width:9%; text-align:center">vs</div>
<div style="float:left; width:38%"><img class="flag" src="3.gif" /> TeamY</div>
<div style="float:left; width:15%; text-align:right; "><b>6</b> - 2</div>
<br style="clear:both"/>
</a>
</div>
Why do they use all the cell divs, why not just put all the text and images into the "row conatiner div", it's not like the font type or size is different for the text, is this the right way to code?? Hey all. Here is the link to the site: http://test.gdconf.com/scheduler/ Look at the bottom part of the page where you should see Session Wish List and myGDC Schedule. If you look at the page in IE, there is extra spacing after the right-side scroll bar. Where is that dead space coming from and how can it be removed? It is making it so that the spacing is off on 2nd column. Please let me know if you guys need any code. Thanks. I'm trying to create a page where there is a centered background image, and two div's, one on the left and one on the right, all aligned properly. I tested it by syncing it to my website, and I -think- it displays correctly. However it definitely does not display correctly in Dreamweaver, as in Dreamweaver my central background image is slanted to the left for some reason. Can someone please check my code to make sure it has this layout? (Background image centered, with one section on left and one on right, two sections has same size and same distance from background image) But in Dreamweaver it shows up like this, so I'm worried it might not display correctly on computers with different resolutions: Code: <!DOCTYPE HTML>
<html>
<head>
<!-- Create container type object containing background image with interactive image links layered on top. -->
<!-- Objects are centered on screen. Sub-image positions are relative to container -->
<style>
#container {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
border:none;
width: 380px;
height: 633px;
background-image: url("pictures/mainmenu.png");
background-position:center;
}
#container img {
position: absolute;
border:none;
left: 65px;
width: 245px;
height: 53px;
}
<!-- the three buttons -->
#image1 {top: 225px}
#image2 {top: 300px}
#image3 {top: 375px}
</style>
<meta charset="utf-8">
<LINK href="style.css" rel="stylesheet" type="text/css">
<title>Main Playlist</title>
</head>
<body>
<br>
<br>
<div id="wrap">
<div id="left"><a href="ContactInfo.html" style="color:#000">Profile</a></div>
<div id="right">Upcoming works</div>
<div id="container">
<a href="song1.html"><img src="pictures/button-hualuowuyuan.png" alt="song1" id="image1" /></a>
<a href="song2.html"><img src="pictures/button-river.png" alt="song2" id="image2" /></a>
<a href="song3.html"><img src="pictures/button-snow.png" alt="song3" id="image3" /></a>
</div>
</div>
</body>
</html>
CSS: Code: @charset "utf-8";
/* CSS Document */
body {
margin:10px;
padding:10px;
background-image: url(pictures/audigrandpiano.jpg);
background-repeat:no-repeat;
background-position:right bottom;
}
img.center{
display: block; margin-left: auto; margin-right: auto;
}
#wrap {
position:relative;
min-height:100%;
}
#left {
float:left;
width:300px;
height:500px;
text-align:center;
}
#right {
float:right;
width:300px;
height:500px;
text-align:center;
}
Really appreciate it I have this code: Code: <body> <div style="width: 150px; height:150px; border:1 solid red; float: left">111</div> <div style="width: 150px; height:150px; border:1 solid red; float: left">222</div> <div style="width: 150px; height:150px; border:1 solid red; float: left">333</div> </body> What you see are three fixed-size DIVs on the same row but aligned to the left. I need the same effect (using any method) that has those three boxes centred on the page. It must also fulfill this criteria: 1) Be on the same line 2) Be fixed-size 3) Be a unique element for each in terms of code, as each box is dynamically generated using a loop 4) Work for any number of boxes (rules out editing of margins to hack it visually) You don't have to use DIVs - anything will do (tables, pure CSS). But I've not been able to find a way of doing it. Hi Everyone, I'm slightly confused by this one. But i'm sure theres a hack out there to fix it. Basically, in firefox and konqueror, running on kubuntu, the top navigation bar at http://www.tendervendors.com/dev/payroll.html displays correctly, and when you hover over it, it fills the li with a semi-opaque background. This is correct. Its done, by filling the a element, with a background-color and then applying opaque: 0.5; The a element also has padding, which makes it fill out to the size of the li element, so the a element fills its portion of the ul, and looks like the li has the affect applied to it. However, in opera, the right and left padding is correct, but the height padding doesn't work. Does anyone know of a bug in opera that would be causing this problem, and possibly a code fix for it? TIA Matthew Millar I'm a beginner at html, this class is online and my teacher doesn't really keep in touch....So any help what so ever would be greatly appreciated, just a direction to go in...I'm lost. This is supposed to be a sudoku puzzle, doesn't work, but just displays a puzzle. The book kinda confused me when it asked for sub tables. Mainly, I'm just not sure how I need to layout the nested tables. I included the code for the table and a pic of what it's supposed to look like. (I inserted the "5's" just to help me try to see what I was doing) Here's the instructions: http://books.google.com/books?id=4-BlHT9Xb1oC&pg=PA334&lpg=PA334&dq=the+japanese+puzzle+factory+html&source=bl&ots=yCVllJjfgL&sig=pPsbW dc01C5rjY6vAgTIBLzg3P0&hl=en&ei=Fo34S7bONoH48Aah-9X9Cg&sa=X&oi=book_result&ct=result&resnum=5&ved=0CCAQ6AEwBA#v=onepage&q&f=false HTML Code: <table class="spuzzle"> <caption>Sudoku</caption> <thead> <tr> <th></th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> </tr> </thead> <tbody> <tr> <th>A</th> <td class="greenbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> <td class="goldbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> <td class="greenbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> </tr> <tr> <th>B</th> </tr> <tr> <th>C</th> </tr> <tr> <th>D</th> <td class="goldbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> <td class="greenbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> <td class="goldbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> </tr> <tr> <th>E</th> </tr> <tr> <th>F</th> </tr> <tr> <th>G</th> <td class="greenbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> <td class="goldbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> <td class="greenbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> </tr> <tr> <th>H</th> </tr> <tr> <th>I</th> </tr> </tbody> </table> Link to site for reference: http://www.ante-up.org/v2/ Okay, this may be kind of a doozy, but after some thought, I've come to a point where I am looking into using php inc instead of an iframe for my content display, and I want to know how I could go about using divs to set up the site to look exactly the same with php inc. (EDIT: Minus the scrollbar from the iframe of course) Like if I stuck the Navigation and the Login section into one php file, the 'stats' and miniblog section into a second php file, the header and footer each in their own php file, how would I go about aligning the divs so that I could just php inc everything? I'm first off assuming that this would be the correct way to do it. Any suggestions are welcome so long as they're not about my table usage I'm aware that many don't prefer them, but I've made them work across five popular browsers, so I'm happy with it. TIA for any who can offer some insight. PS: I suppose I should also add that I'm pretty much an ignorant incompetent when it comes to div layers, so bear with me if there is a tutorial or a forum post i would love to see it, thanks Please look at this page: http://www.midwestbookreview.com/links/othr_rev.htm I would like to be able to have a format for a page like this with one blank column on the left and one blank column on the right (so I could just fill in my links). I would like the page blank the middle like it is now so I could add my main links. Can someone give me the basic html format on setting this up? Thanks. Hello Everyone! This is my first thread on the forums. I look forward to the responses. But my question today seems simple but I am just a little confused on how to do this. You can tell me if I have this in the wrong place. So I want to make a player bio page, for a sport. I want to put a picture in the upper left hand corner and information about the player to the right of the picture and stats underneath. How would I achieve this? Like I said a picture in the left hand corner. That's the best I can describe it. My biggest problem is implementing the payers picture in there. Would I just make a separate division for the picture, information, and stats? Thanks in advance! Hey. I'm new here, and I've recently taken some webmastering classes (needed them a lot more than I thought. I just love programming.), and I have had some concerns about what to do with alpha-transparency. See, what I want to do is have a background image (using a <div> tag and some basic CSS for this image alone), and that's all I will have. Is there any way to set the alpha of a background color so that it is transparent? Afterward, is there a way to set the alpha to text so that it is not transparent, either? I want a golden color background (FFCC00), with black text. Will this take another layer of CSS, or is this even possible? (Even with the classes, I'm still an absolute total newb.) Thank you very much in advance. Is there a way to set the color of the bullets for unordered lists? I recently am using a free little copy of a program called Flowplayer, I do intend to buy it in the future when I have 100 bucks to spend. But what I am asking is for a short but descriptive guide on the exact coding I will need to install it. When I installed it through there website I had a little trouble because I don't know coding by heart (thanks to dreamweaver ) But I need to know EXACTLY what to write in my coding, if there is any information needed just let me know and I will post it. I really hope to here some helpful comments if at all possible! I have a bunch of email addresses with my new host, and I would like to give them out a select few people, however I want to set up a mail page before I do this... something like this: http://mail.ramapo.edu If someone could either explain it to me or point me in the right direction I'd greatly appreciate it. Hi, I am new to HTML and want to set the layout for my page as follows:- (1) The complete page size for my webpage is 1024x768. (2) I want to set a top Banner starting from left with width= 824 and Height = 180. (3) Then I want to have a skyscrapper Banner starting exactly where the above top banner ends and has width = 200 and height = 768. (4) Just below the top banner(as stated in point2) I will have the logo and below that all the products. I am using Front Page 2000. Please help me get started with putting up this layout. Thanks very much. Best Regards, Gagan I'm trying to setup download links on my page. For exsample I have a file on my web server and I want a link that I can click on and it will bring up a download window. Can anyone PLEASE HELP! I'm not sure if you can use CSS for this, but here goes... I want a marquee displaying the latest news on every one of my pages, the problem is, my site has hundereds of pages, which means every time the news is updated, I would have to update the marquee on every page, which would get very tiresome. Is there anyway you can set a marquee in a seperate file or something, and call it from that file to every page? Thanks in advance, Piratescotty. Hi All, Im using Visual Studio 2010 to create a website, im trying to set the width to 100% so it fits the users screen, when i flick back and forth from the design to the html Code the Design is fitting the Screen 100% but when i launch the site it still remains 900px in width? heres my CSS iv also checked the .Header css and that also says 100% any ideas? HTML Code: .page
{
width: 100%;
background-color: #fff;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
This is the Site Master Page. HTML Code: <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="Learning.Site" %>
<!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">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
Can someone try and shed some light on this please? Thanks Wondering if anyone can help me out or point me in the right direction... I am looking at setting up a radio form that will populate with mandatory fields that must be filled out before sending it off. I am restricted to using HTML only and maybe some JavaScript.. I have attached my idea in image on this post and could really use some assistance in finding a solution for this |
|||||||