|
CSS - Making A Stretchy <th> With Css In Mambo
I'm trying to do one of those cool, gel looking TH's in my CSS, but I'm not sure how, especially since I'm using Mambo (which gives me less overall control).
So I have my three images: the right and left corners, and a 1px wide strip to be repeated for the middle section. Can someone explain if this is possible and how to accomplish it? Similar TutorialsThis is driving me crazy! I'm experimenting with the "MyGosu" menu (the drop-down menu at the top of the page) inside of the default Mambo template. See my efforts he http://www.mediamogulsweb.com/client/Mambo/ The menu works fine in Mozilla/Firefox, but is failing in IE6 and IE7... In IE, the pop-out submenus don;t appear...But I'm thinking that they actually do appear, but are being obscured by the header image (or something else?)....So I adjusted the z-index of the header image div to "1", but that didn;t do the trick... What is going on here? Any ideas are appreciated... I'm trying to figure out a way to create a banner across the top that consists of an image, but whose right edge extends all the way to the right edge of the browser -- regardless of the window size. At the same time, I need to do the same thing with the left column: fill it with an image whose bottom edge extends all the way to the bottom of the window. I can do this with tables, but can't figure out a cross-browser way to do it in CSS. The "stretchy" right edge of the banner is simply a 1 pixel wide slice of the banner's right edge, repeated as necessary. Similarly, the "stretchy" bottom of the left column is a 1 pixel slice of the bottom of the column's image. I can't get these to appear in Mozilla. Here's my code: Styles.css: PHP Code: .banner { background-image:url(./images/banner-fill.gif); width:100%; } .nav { background-image:url(./images/nav-fill.gif); width:104px; height:100%; } .content { position:absolute; left:140px; top:140px; } Template.htm: PHP Code: <html> <head> <title>Template</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="height:100%;width:100%"> <div class="banner"><img src="images/banner.jpg" width="800" height="134" border="0"></div> <div class="nav"><img src="images/nav.jpg" width="104" height="327" border="0"></div> <div class="content"> <p>Page Content</p> </div> </body> </html> Im just starting trying to use more css instead of relying on tables. i think i have most everything worked out except for one thing: my navigation is on the left and i want the background color to stretch all the way down to the footer, regardless of how tall or short it is. is there any way i can work around this? thanks! The CSS: html,body{margin:0;padding:0; height:100%} body{font: 76% arial,sans-serif;} * html #outer{height:100%;} p{margin:0 10px 10px} a{display:block;color: #006;padding:10px} div#header{position:relative; padding-bottom:20px} div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B} div#header a{position:absolute;right:0;top:23px;} div#content p{line-height:1.4} div#navigation{background:#009900} div#extra{background:#FF8539} div#container {width:100%; min-height:100%; margin-bottom:-50px; height:auto} /*for fixed center w/ liquid sides ~~ width:800px; margin:0 auto ~~ */ div#wrapper{float:left;width:100%; height:100%} div#content{margin: 0 200px; height:100%} div#navigation{float:left;width:200px;margin-left:-100%; height:100%; border: 1px solid #009900} div#extra{float:left;width:200px;margin-left:-200px} div#footer{ float:left; width:100%; } div#footer{background: #333;color: #FFF; clear:both; height:150px;} div#footer p{margin:0;padding:5px 10px 5px} div#footer a{display:inline;padding:0;color: #C6D5FD} div#clearfooter{clear:both;height:50px;} The Html: <div id="container"> <div id="header"> <h1>We Sell Real Estate</h1> </div> <div id="wrapper"> <div id="content"> <p><!-- TemplateBeginEditable name="EditRegion1" -->EditRegion1<!-- TemplateEndEditable --></p> <div id="clearfooter"></div></div> </div> <div id="navigation"> <ul class="glossymenu"> <li><a href="(URL address blocked: See forum rules)">Home</a></li> <li><a href="(URL address blocked: See forum rules)">Our Listings</a></li> <li><a href="(URL address blocked: See forum rules)">Our Agents</a></li> <li><a href="(URL address blocked: See forum rules)">Request Info</a></li> <li><a href="(URL address blocked: See forum rules)">Area Info</a></li> <li><a href="(URL address blocked: See forum rules)" target="_blank">Missouri Info</a></li> <li><a href="(URL address blocked: See forum rules)">Mortgage Info</a></li> <li><a href="(URL address blocked: See forum rules)">FREE Market Analysis</a></li> <li><a href="(URL address blocked: See forum rules)">Links - Resources</a></li> <li><a href="(URL address blocked: See forum rules)">Link to Our Website</a></li> <li><a href="(URL address blocked: See forum rules)">Office Location</a></li> <li><a href="http://mailto:design@uscybertek.com">Send E-Mail</a></li> <li><a href="(URL address blocked: See forum rules)"><br> <img src="(URL address blocked: See forum rules)" alt="FREE HOMEBUYER'S GUIDE - YOU NEED THIS INFO!" width="100" height="91" vspace="0" border="0" align="center"><br> CLICK HERE!</A></li> </ul> </div> <div id="extra"> <p><strong>3) More stuff here.</strong> Here we can put a slideshow, mortgage calc, weather... </p> </div></div> <div id="footer"> <p class="footer" style="padding-right: 10px; padding-top: 10px;"><br> Real Estate Company ~ My Name, Owners/Brokers<br> 123 First St. ~ Houston, Missouri 123456 ~ Office: 417-967-2011<br> Fax: 417-967-2011 ~ E-Mail: <a href="mailto:design@uscybertek.com">design@uscybertek</a> ~ <a href="(URL address blocked: See forum rules)" class="lcolors">Site Map</a> ~ <a href="(URL address blocked: See forum rules)" target="_blank" class="lcolors">Missouri Real Estate</a><br> <a href="(URL address blocked: See forum rules)" target="_blank"> <img src="(URL address blocked: See forum rules)/links/ml_small_mo.gif" border="0" align="middle"></a> ~ <img src="(URL address blocked: See forum rules)" align="middle"><br /> <!-- #include virtual="/includes/footer.txt"--> </p> </div> Hey all i want to create a simple horizontal navigation for my page spanning the container div (735px) i want to use a UL and float them to the left: Navigation Code: <div id="container"> <ul> <li>home</li> <li>nav2</li> <li>nav3</li> <li>nav4<li> <li>nav5<li> </ul> </div> CSS Code:
#container{width:735px}
ul {width:100%; height:35px; }
li{width:149px; float:left}
The problem im having / i dont know how to do are the following: 1. Within each li i want to put a link but i want it to be the whole block of 149 x 35 clickable for the link not just the words e.g HOME 2. how do i get the text of the nav to be positioned in the middle vertically. i tried: vertical-align or what ever it was but that didnt waork. For one of my nav items it drops down a line but the others stay at the top. id like them in the middle of the block?? thanks How can I make the <th> on the right hand side align everything inside it to the right? I already have a class which applies to all my <th> [html] <thead> <tr> <th scope="col" class="twentyfive">STATUS</th> <th scope="col" class="twentyfive">VIEW</th> <th scope="col" class="twentyfive">DOWNLOAD</th> <th scope="col" class="twentyfive">TOTAL</th> </tr> </thead>[/html] Do I need to add something like this? [css] table.main thead tr th.twentyfive { /*border: 1px solid #fff;*/ width: 25%; } table.main thead tr th.twentyfive.right { /*border: 1px solid #fff;*/ width: 25%; float: right; }[/css] I was just wondering if there was a standard that most people use. Or do you just use each as the circumstances require? Ok, firstly, here is the link: www.mstrgaming.com/stars Now, if you look at the website in FF, then in IE, you'll notice that the absolutely poistioned #topbar (the horizontal bar right at the top) goes over the top of the floated logo & menu (whereas it doesn't in FF, which is the desired look). I'd welcome any suggestions as to why it does this, and more importantly how to prevent it. Also, the floated logo & menu is spaced away from the left side of the page, whereas in firefox, it isn't. I welcome any suggestions! The website is reletively simple so I don't think you should have any concerns with the code, but if you do by all means let me know . Thanks! Edit - how odd, I edited the title of this thread because I missed a word, and it won't change, oh well i have this site here and am looking for a solution to my css for resizing the window i need the .swf to appear underneath the main content box. any ideas?! i need to it to behave exactly like the .jpg on this page here anyone!? Hi, I am editing a dynamically driven site and I don't have access to edit the HTML code, just the CSS. I have a <div> with content in it within a <td> tag. When the div stretches past the width of the <td> tag it makes the table cell wider. Is there any way in CSS to have it not stretch the width of the cell? The <div> has an id="mylinks" on it, however the <td> or the <table> doesn't have any id or class on them. I'm pully my hair out trying to figure out a fix, any help would be greatly appreciated, Thanks in advance Hi, I have attached 2 files code. I want the page to look like the second one.with both navigation boxes on the left on top of each other. But the 1st one I am trying to look the same with out putting the <divs> with in a <div> and it does not work, what am i doing technically wrong here? wrong one Code:
<html>
<head>
<STYLE type=text/css>
body
{ background-color: grey; font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer { width: 70%; height:75%; background-color:#FFFFFF; margin-top: 150px; margin-bottom: 30px; margin-left: auto; margin-right: auto; padding: 0px;
}
div#header { padding: 0px; margin-top: 0px; text-align: center; background-color:#659EC7; height:130;
}
div#nav { width: 30%; height: 200; padding: 0px; margin-top: 1px; float: left; background-color:#616D7E;
}
div#navt { margin-left: 0px; width: 30%; padding: 0px; margin-top: 210px; float: left; background-color:#616D7E;
}
div#main { margin-left: 40%; margin-top: 1px; padding: 0px; text-align: center; height:65%;
}
div#footer { padding: 0px; margin: 0px; text-align: center; height:62;
}
</STYLE>
</head>
<body>
<div id="outer">
<div id="header">
<h3>Bank</h3>
</div>
<div id="nav">
<h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="navt">
<h4>Navigation1</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool...</p>
</div>
<div id="footer">
<p>Footer text -- Admit impediments...</p>
</div>
</div>
</body>
</html>
Right one Code:
<html>
<head>
<STYLE type=text/css>
body
{ background-color: grey; font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer { width: 70%; height:70%; background-color:#FFFFFF; margin-top: 150px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px;
}
div#header { padding: 0px; margin-top: 0px; text-align: center; background-color:#659EC7; height:130;
}
div#exp { width: 35%; padding: 0px; margin-top: 1px; float: left;
}
div#nav { width: 100%; height: 200; padding: 0px; margin-top: 1px; float: left; background-color:#616D7E;
}
div#navt { margin-left: 0px; width: 100%; padding: 0px; margin-top: 5px; float: left; background-color:#616D7E;
}
div#main { margin-left: 40%; margin-top: 1px; padding: 0px; text-align: center; height:65%;
}
div#footer { padding: 0px; margin: 0px; text-align: center; height:62; vertical-align:text-top;
}
</STYLE>
</head>
<body>
<div id="outer">
<div id="header">
<h3>Bank</h3>
</div>
<div id=exp>
<div id="nav">
<h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="navt">
<h4>Navigation1</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool...</p>
</div>
<div id="footer">
<p>Footer text -- Admit impediments...</p>
</div>
</div>
</body>
</html>
I am VERY new at this, and I need all the help I can get. I am trying to make a table that looks like this: I am VERY new at this, and I need all the help I can get. I am trying to make a table that looks like this: http://i78. photobucket.com/albums/j108/l8org8or/HELP.jpg (take out the spaces before "photobucket") I need the table width to be 563, and I want everything to be centered. font size 14 and 9 Any help you can offer would be greatly appreciated. I need the table width to be 563, and I want everything to be centered. font size 14 and 9 Any help you can offer would be greatly appreciated. Hi, How common it is these days to make a web pages using only css and not using tables? And what are the pros and cons of that? Thanks Sometimes CSS makes me want to tear my hair out. I'm trying to make a custom form input that is a combination of a regular select drop down and a multiple select. I have the javascript all sorted out and my input works like a charm. I can't figure out any way to make it display like a <select> does though. I thought I could simply do this: <ul style="display: inline"> According to w3schools, this will tell the element to display without a line break before or afterward. Much to my despair, it's not that simple. Here's an example: Code: <div> This is some text <select name="test"> <option value="">Click to expand</option> <option value="1">One</option> <option value="2">Two</option> </select> <input type="submit" value="Submit" /> </div> <hr /> <div> This is some text <ul name="test" style="display: inline;"> <li>Click to expand</li> <ul style="display: none;"> <li value="1">One</li> <li value="2">Two</li> </ul> </ul> <input type="submit" value="Submit" /> </div> Notice how the regular old html input sits nicely inline with the text before it and the submit button after it? Notice how the ul doesn't, despite the fact it's set to display inline? Anybody have any suggestions? http://m2-klan.com/nuked.html How would I go about making this page all Css/div? My friend has been saying something that I can make that from all Css with less graphics, how would I go about doing that? I am a newbie at Css and I would like to know how to do that, instead of tables. i thought i had finally gotten my design to where i wanted it, but then i tried it in internet explorer. he http://beta.bikerevolution.org/xindex.php any ideas on how to fix this would be great. Can someone point me to a tutorial that shows how you can use css borders, shadows, or whatever to make div's look 3D, or sunken in or something. Basically I want this div to look like a button, but only when the mouse is over it, and when it's depressed I want it to look like its sunken in. I know how to do all of this except the lighting and stuff, it looks kinda funny. So is there a tutorial that shows you the best way to make stuff look 3D? Thanks Hi All. I am just trying to figure out how to make the bottom border of the active tab disappear so it looks like the active tab is part of the active panel. For example: http://wiki.modxcms.com/images/a/aa/Tabs3.png THE CSS Code:
<style>
#tabs {
padding: 10px;
}
#tabs #nav {
margin-bottom: 0px;
margin-left: 8px;
}
#tabs ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#tabs #nav ul li {
display: inline;
padding: 3px 7px;
cursor: default;
background-color: #eeeeee;
border: 1px solid #cccccc;
border-bottom: none;
margin-right: 2px;
}
#tabs #nav ul li.active {
border: 1px solid #000066;
border-bottom: 1px solid white;
background-color: #ffffff;
}
#tabs #nav ul li:hover {
background-color: #ffffff;
}
#tabs #data {
margin-top: 3px;
}
#tabs #data div {
display: none;
border: 1px solid #000066;
padding: 10px;
}
#tabs #data div.active {
display: block;
}
</style>
THE javascript: Code:
<script type="text/javascript" language="javascript">
function navAllInactive() {
oNav = document.getElementById('nav');
oLis = oNav.getElementsByTagName('LI');
for (i = 0; i < oLis.length; i++) {
oLis[i].className = '';
}
}
function hideAllData() {
oData = document.getElementById('data');
oDivs = oData.getElementsByTagName('DIV');
for (i = 0; i < oDivs.length; i++) {
oDivs[i].style.display = 'none';
}
}
function doShow(o, pageId) {
hideAllData();
navAllInactive();
o.className = 'active';
oData = document.getElementById(pageId);
oData.style.display = 'block';
return false;
}
</script>
THE HTML: Code: <div id="tabs"> <div id="nav"> <ul> <li onclick="javascript:doShow(this, 'relevance');" class="active">Relevance</li> <li onclick="javascript:doShow(this, 'added');">Date Added</li> <li onclick="javascript:doShow(this, 'recorded');">Date Recorded</li> <li onclick="javascript:doShow(this, 'rating');">Rating</li> </ul> </div> <div id="data"> <div id="relevance" class="active">Relevance</div> <div id="added">Date Added</div> <div id="recorded">Date Recorded</div> <div id="rating">Rating</div> </div> </div> Hi everyone. I have a div with text and directly after that I have an image. Since a DIV is a block level element, it causes the image to wrap to the next line. Is there some way I can prevent it from doing so? Thanks for any help or suggestions. On my site I'm trying to have a messageboard within a CSS Div. While the phpBB/database is on a remote server, I think it would be easier to have it appear within the main div. Is there a way to do this? If not, I'm just going to make the messageboard appear in a new window. Thanks... |
|||||||