|
HTML - Menu Div Not Length Of Containing Divs
I have a menu made up of one div and within that div are more divs to make up the separate menu items. I am trying to add a background colour to the holding div but it's not having any effect. When I investigate the div order in web developer it shows that it's not extending to the height of the menu divs inside it. Please help. It's menu_nav I am trying to put a background on.
HTML: HTML Code: <div id="menu_nav">
<div class="mainMenu">
<a href="#">HOME</a>
</div>
<div class="mainMenu">
<a href="services.html" onmouseover="mopen('servicesSub')" onmouseout="mclosetime()">SERVICES</a>
<span id="servicesSub" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="#">Website Production</a>
<a href="#">Hosting & Domains</a>
<a href="services.html#design">Design & Branding</a>
<a href="video.html">Video Production</a>
<a href="#">Interactive Media</a>
</span>
</div>
<div class="mainMenu">
<a href="portfolio.html" onmouseover="mopen('portSub')" onmouseout="mclosetime()">PORTFOLIO</a>
<span id="portSub"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="portfolio.html#websites">Websites</a>
<a href="portfolio.html#programs">Programs</a>
<a href="#">Video</a>
<a href="#">Animation</a>
<a href="#">Design</a>
<a href="#">Web solutions</a>
</span>
</div>
<div class="mainMenu">
<a href="info.html" onmouseover="mopen('aboutSub')" onmouseout="mclosetime()">INFO</a>
<span id="aboutSub" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="prices.html">Prices</a>
<a href="sitemap.html">Sitemap</a>
<a href="aboutUs.html">About Us</a>
<a href="contact.html">Contact</a>
</span>
</div>
</div>
CSS: Code: * MAIN MENU NAVIGATION*/
#menu_nav a, #servicesSubMenu a
{
text-decoration:none;
color:black;
}
#menu_nav
{
width:950px;
background-color:#E6E6E6;
height:auto;
margin-top:0px;
font-size:11pt;
margin:auto;
}
.mainMenu
{
float:left;
float: left;
margin: 0px 75px 0px 75px;
background-color:#E6E6E6;
line-height:30px;
}
.mainMenu a
{
line-height:20px;
display: block;
font-size:11pt;
text-align: left;
text-decoration: none;
background-color:#E6E6E6;
}
#menu_nav a:hover, #footer a:hover, #left_menu_column a:hover
{
color:RGB(5,127,204);
}
/*DROPDOWN MENU*/
#servicesSub, #portSub, #aboutSub
{
visibility:hidden;
position:absolute
}
#servicesSub a, #portSub a, #aboutSub a
{
width:150px;
border-bottom:1px solid white;
color:grey;
padding-left:4px;
padding-right:4px;
padding:5px;
}
Similar Tutorialshello, new member here so hiya! I have a site and I have a div containing all the page. At first I gave it a height just so I could put CSS in and see what it's like. After I have taken out the height though, the div shrinks to like 1 pixel. Why isn't it as long as it's containing divs - including left column, main section, footer? Many thanks Hi there, I am currently building a website in dreamweaver. It's going slow but so far I have overcome ever problem with the help of people like you! The problem I'm at at the moment is pretty tricky. If you visit. http://aquariusspa.co.uk/flw%5Fver2/flw_ver2.html This site I built with photoshop and then exported as html. Now i'm adding content and the nav bar (which isn't quite working right!). So what i'm looking to do is have the main box (one with welcome in it) change height depending on what i enter in to it. Every page has different amount of text. Now I could just build every page in photoshop for the desired page height but surely there must be a way of stretching what i've got with out wreaking the graphics. Thanks in advance. S im creatinh a box containing a text. The box must be wide enough to fill a text. menu.style.width = tekst.length - this functioin gives the number of letters in text. So if the text is "hello" then the width is 5 pixels. But i need the widith of pixels needed to fit the text in a box. How can i do that? hi, I have this:<form > <input id="Email" maxlength="40" name="Email" size="40" type="text" value=""><br /> <input id="pwd" maxlength="40" name="pwd" size="40" type="password" value=""> <label for="Submit"> </label> <input id="Submit" name="Submit" type="submit" value="Submit"> </form> In Safari and Firefox, the two boxes look the same length, you can see from diff_ff.jpg, but in IE, it looks different(please see diff.jpg), if I change "password" to "text" they will look the same in length, any solution to this? Thanks, A.C. Hi All, Is there any maximum length for tooltip for html tags? How can I determine the possible max length? Rahul.... Hi. I have a very discrete light blue color in the background from a previous template. It ends about halfway through the bottom area and I'd like to extend it throughout the entire page without moving/overwriting anything else please. www.movehumanityforward.com Thank you This is one of these things where you probably should just go to bed and forget all the confusion. My question: How the heck can you specify the length of the option field for a drop town list? I am sure ther is an embarrasingly simple answer. Thanks a lot and good night! Please take a look at this page: http://lifeengineering.org/ Try out the menu links and see what I'm talking about. The "short" pages shift horizontally. In other words, if the div block with the content doesn't reach the bottom of the browser window, then it's rendered in a different horizontal position. So, changing the pages through the menu makes the pages appear to "jump". NOTE: You'll need a reasonably big resolution to see what I'm talking about (e.g. 1152 x 864+). Any suggestions on how to correct this? Is there a way to pad blank spaces at the end of my content in the div block to ensure that it always reaches the end of the browser window? Or something similar? ------ Issue #2: My background isn't ideal. I like the rainbow, but I'd like to change it. If I wanted to make the rainbow arc appear stationary as I scroll the page (i.e. to have the upper left arc of the rainbow always appear on the upper left corn of the screen), how would I do it? Any other suggestions, artistically, with respect to the page background? Thank you kindly! Ok I know this isn't really a HTML issue, but to avoid complex clientside pixel-counting of fonts I've thought of something far more simple. I need to limit the length of a string to stop it wrapping. The first step is to limit the string's length in characters, using the following php script: PHP Code: function trim_string($string) { $trim_string = '...'; $chars = 55; $chars_adjusted = $chars - strlen($trim_string); if (strlen($string) > $chars) { $string = substr($string,0,$chars_adjusted); $string .= $trim_string; } return $string; } Fine, no problem. Now however the strings are not all of equal length because of differences in length of each character (see the warmdebate.com homepage for my debacle). I thought that a relatively simple solution would be to simple use some sort of CSS or HTML wizardry to stretch the trimmed string to a fixed length (like full alignment, only for a non-wrapped string). Since this doesn't involve pixel counting or anything like that I figure it should be doable in CSS or HTML. Also, if there are any standard solutions to this other than what I'm proposing please let me know! The adage of 'give a man a fish and he'll be fed; give a man Dreamweaver and he thinks he's a designer' is alive and well with these glitches. http://www.zenarchy.co.uk/test11.htm is a design draft and there are two problems. The first is that the central span that houses 'High quality call recording software' doesn't match up to the end and sit flush. It's almost there in firefox but is miles off in IE. I'd like it to work in both. <td width="100%" height="22" bgcolor="#91a2a0"> <p align="center"><b><font color="#FFFFFF" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>High quality call recording software</strong></font></b></td> is the code I've identified as relevant, but opening the hood and checking the source might be wiser! 2. How do I extend the columns on either side to sit flush at the bottom against the graphite baseline? Your thoughts please (aside from get a pro to do it...) Cheers! Hi, I'm writing a website using tables (0 border and space etc.) so that things don't move around on different computers and browsers. However, I've run into a bit of trouble with a particular cell. The one in questions is my navigation menu. I have it written in php as a separate page and used the include tag to load it onto the index. It consists of a table of height 600 and a single column with a couple of cells. Now, from my reasoning, the the 600 table height of the nagivation menu/page should easily fit into the 600 cell height of it's space on the index. This is reflected when I view the page using IE - all of the border/frame images that I had made went together perfectly. However, when I view the page with FireFox, the navigation menu seems to be too short in that the first navigation cell does not immediately appear after the top border line. There is a blank white space. Also, it seems to have stretched that particular row because the right most border on the index, which is not connected to anything else and is it's own image, is centerized so that there is white space left (indicating the cell was incremented height wise). Does anyone know if this is a fixable discrepancy? A link to the test page is: VA Test Page I can provide a link to the menu page if it's needed... Anxiously awaiting a reply whether it's related or not How do I figure out the lenght of the page (content, not browser window) so that I can make all of my regions line up at the bottom? I noticed that % in the height attribute is related to the window not content. I have also tried auto, but that is different for different content. My page has an outside region, a left nav bar and a content region, and I don't know how to make the bottom line up without tables. Sorry if this is confusing. Thanks in advance. hi My code is- <HTML> <HEAD></HEAD> <BODY> <TABLE> <TR><TD> <SELECT NAME="Date"> <OPTION>1</OPTION> <OPTION>2</OPTION> : : <OPTION>30</OPTION> <OPTION>31</OPTION> </TD></TR> </TABLE> </BODY> </HTML> it will show the numbers from 1 to 31 in the drop down with long scrollbar. My problem is - I want show only 10 numbers.User need to scroll and select other numbers. Is it possible? I have a left menu column but it's not stretching down the length of the page. The page is quite long and when the links are finished on left column it just ends and as it has abackground colour it looks a little strange. It is floated left and the main_section is also floated left. It is the main section div that is long. I was thinking because this is in a div that the left coumn is also in that the left column would therefore stretch to the length of it's parent div. Any ideas? http://absolute-websites.com/services.html is the link so you can see what I'm talking about. Here is a section of the HTML : HTML Code:
<div class="left_column">
<div class="breadcrumb"><p><a href="index.html">home ></a>services</p></div>
<div class="icons"><p><a href="services.html#websiteProduction"><img src="images/webIcon-01.png" title="web building" alt="web building icon"/></a></p></div>
<div class="icons"><p><a href="services.html#hosting"><img src="images/hostingImgIcon-01.png" title="Hosting & Domain Names" alt="Hosting & Domain Names icon"/></a></p></div>
<div class="icons"> <p><a href="services.html#seo" ><img src="images/seo2Icon-01.png" title="Search Engine Optimisation" alt="Search Engine Optimisation icon"/></a></p></div>
<div class="icons"> <p ><a href="services.html#marketing"><img src="images/advertsIcon-01.png" title="Marketing" alt="marketing icon"/></a></p></div>
<div class="icons"><p ><a href="services.html#design" ><img src="images/designImgIcon-01.png" title="Design" alt="Design icon"/></a></p></div>
<div class="icons"> <p ><a href="services.html#photo" ><img src="images/photoIcon-01.png" title="Photoditing" alt="Photoediting icon"/></a></p></div>
<div class="icons"> <p><a href="services.html#video" ><img src="images/videoIcon-01.png" title="Video Production" alt="Video Production icon"/></a></p></div>
</div>
<div id="main_content" class="fl">
<h1 class="h1SecHead" >>SERVICES</h1>
I am trying to make a page that has a DTML (dynamic expanding links), and a right hand column - Below is my code. I want to make the right hand colunm (most common questions grey area) a fixed height. It seems to be the length of the page as if all the menus are clicked on and opened even if they are closed. How can I make it a fixed height regardless of how many links (dhtml) are opned or not so that most common questions are no longer than say 500 pixles. Any suggestions would be handy. I can send code / page as its to long to paste here! Thanks, Ryan If you want to download a variable length text file, what would be the correct http headers to use? Hi, I am new in web designing. I need your guidance. I want to break a word if it is longer than table width. May be I am not good at Engilsh. So I'll explain it using example. Following is my code. Code: <html> <body> <table align="justify" width="100" border"3"> <tr> <td> TE-sdf-sdf-hkjd </td> </tr> </table> </body> </html> As here you can see the word "TE-sdf-sdf-hkjd" length is more than 100px. So the width of table becomes more than 100px. I want to break the word and fix the width of table to 100px. How can I achieve that? Waiting for your reply. I am trying to get rid of the "You have to click to activate this function" mumbo jumbo for a site I am doing. I tried following these directions... http://www.adobe.com/devnet/activeco...devletter.html but am having a rough time getting it to work... here is my code. Code: <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','900','height','140','src','GoodDock','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','GoodDock' ); //end AC code </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="900" height="140"> <param name="movie" value="images/GoodDock.swf" /> <param name="quality" value="high" /> <embed src="images/GoodDock.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="140"></embed> </object></noscript> Hello, I'm new to this forum, so first, hello! Actually, I'm new to web design in general but have taken on the role at the church I work at because our old site was a mess. I downloaded some nice looking templates and have been using them as a foundation. The site is www.miamibc.com. If you go there and look at the header menu (home, about us, etc), I want to consolidate that menu some and add a drop down menu with more choices. Is there a way I can do this while keeping it looking the way it does now? If you need any more info from me, let me know. Thanks for your help! Ben Okay, i have a problem with divs on my site i have 4 divs, the first one is the holder, he's around the other 3. Then there are 3 divs that have to be placed next to each other, but that isn't working! When i use float left or right it tottaly screwes up my page, does anyone know what i do wrong?? my code is: HTML Code: /********** Lay-out **********/
body{
margin:0;
padding:0;
background-color:black;
font-family:Tahoma;
}
.houder{
background-color:white;
width:982px;
height:500px;
margin-left:auto;
margin-right:auto;
}
.header{
height:120px;
width:980px;
margin:0;
padding:0;
background-image:url(Afbeeldingen/header.jpg);
}
.headers{
background-image:url(Afbeeldingen/headr.jpg);
background-repeat:repeat-x;
height:21px;
width:270px;
margin-top:1px;
font-family: Tahoma;
font-size:11px;
color:white;
padding-left:10px;
padding-top:7px;
}
a{
color:black;
text-decoration:underline;
font-size:11px;
font-family:Tahoma;
}
.Contenthouder{
height:340px;
width:980px;
}
.scheiding{
background-image:url(Afbeeldingen/scheiding.jpg);
background-repeat:repeat-y;
width:5px;
height:340px;
margin-left:280px;
}
/********** Menu **********/
.menu{
background-image:url(Afbeeldingen/menu.jpg);
background-repeat:repeat-x;
width:980px;
height:14px;
margin-top:1px;
font-family: Tahoma;
font-size:12px;
padding-top:9px;
padding-bottom:10px;
}
a.menu:link, a.menu:active, a.menu:visited{
color:white;
text-decoration:none;
padding-left:10px;
padding-right:10px;
}
a.menu:hover{
background-image:none;
color:red;
text-decoration:none;
background-color:white;
}
/********** inlog **********/
.inloghouder{
width:280px;
margin-right:700px;
font-size:12px;
float:left;
}
.inlogtxt{
padding-left:20px;
font-size:11px;
}
.inloginput{
border:0;
background-color:lightgrey;
font-size:12px;
width:250px;
height:18px;
padding-top:4px;
}
.inlogknop{
background-image:url(Afbeeldingen/knop.jpg);
font-size:11px;
font-family: Tahoma;
background-color:grey;
border:0;
color:white;
font-weight: bold;
height:20px;
}
/********** Text **********/
.texthouder{
width:500px;
background-color:yellow;
height:300px;
float:right;
}
HTML 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="ne" lang="en">
<head>
<title>Familie Voetbalspel</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<div class="houder" align="center">
<div class="header" /></div>
<div class="menu" align="left" valign="middle">
<a href="#" class="menu"><b>Home</b></a>
<a href="#" class="menu"><b>Uitleg</b></a>
<a href="#" class="menu"><b>Punten</b></a>
<a href="#" class="menu"><b>Ronde scores</b></a>
<a href="#" class="menu"><b>Klassement</b></a>
<a href="#" class="menu"><b>Spelers</b></a>
<span class="menurechts" style="margin-left:389px;"><a href="http://www.coachvanhetjaar.nl" class="menu"><b>Coach van het Jaar</b></a></span>
</div>
<div class="Contenthouder" align="left">
<div class="inloghouder">
<div class="headers">
<b>Inloggen bij het Familie Voetbalspel</b>
</div>
<div class="inlogtxt">
<br />
<b>Gebruikersnaam<br /><br />
<input type="text" name="gebruikersnaam" class="inloginput" /><br /><br />
Wachtwoord<br /><br />
<input type="password" name="wachtwoord" class="inloginput" /><br /><br />
<input type="submit" value="Inloggen" class="inlogknop"/><br /><br />
<a href="#">Wachtwoord vergeten?</a><br /><br />
<a href="#">Geen account?? Hier aanmaken!!</a>
</div>
</div>
<div class="texthouder">
</div>
<div class="scheiding">
</div>
</div>
</div>
</body>
</html>
contenthouder is the holder, inloghouder de div on the left, scheiding the div in the middle and texthouder the div on the right |
|||||||