|
CSS - Background Imge For Div Covering Entire Div
Hey guys. I have a basic div and want an image to show up on the top of the div only. Here it is.
Code:
#container #news {
top:3px;
width:260px;
height:194px;
background-color:#eeeee2;
float:left;
margin-bottom:4px;
background: url(/images/section_top.gif) no-repeat top left;
}
The image spans the width of the div and is only about 20 pixels tall. so it should show up, but the rest of the div should display, obviously. The image does indeed show up at the top. However, the rest of the div gets covered in white for some reason. Anybody know what's up? Thanks in advance. Similar TutorialsHi, Here is my problem: I have a horizontal css menu using a list. It is embedded within a table <td> element. The menu is floating to the left as I suppose is inteneded by the css code, but I want the whole list to be centered with respect to the <td> element. I put <td align=center> but that does not center the whole list. It is still flushed against the left side of the <td> element. Also, I want the entire list to cover the entire width of the <table>. How do I accomplish these tasks? I have searched on google without any success. thank you for your help in advance. Here is the CSS code and Html code for your reference: CSS: Code:
<style type="text/css">
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 80px; /*Width of top level menu link items*/
#width: 95px;
_width: 95px;
padding: 2px 8px;
border: 0px solid #202020;
border-left-width: 0;
border-right-width: 0;
text-decoration: none;
/*background: url(http://asc2009.dreamhosters.com/menubg.gif) center center repeat-x;*/
color: white;
font: bold 13px Tahoma;
}
.horizontalcssmenu ul li a:visited{
color:white;
#color:white;
/*background: url(menubgover.gif) center center repeat-x;*/
}
.horizontalcssmenu ul li a:hover{
background: yellow;
color: blue;
#color: blue;
/*background: url(menubgover.gif) center center repeat-x;*/
}
HTML Code: Code: <table width="900" height="20" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid black;"> <tr> <td background="menubg.jpg" align="center"> <div class="horizontalcssmenu" align="center"> <ul> <li><a href="default.htm">Home</a></li> <li style="border-left:1px solid black"><a href="default.htm">About Us</a></li> <li style="border-left:1px solid black"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Products</a></li> <li style="border-left:1px solid black"><a href="default.htm">Downloads</a></li> <li style="border-left:1px solid black"><a href="default.htm">Service</a></li> <li style="border-left:1px solid black"><a href="default.htm">Requests</a></li> <li style="border-left:1px solid black"><a href="default.htm">References</a></li> <li style="border-left:1px solid black"><a href="default.htm">What's New</a></li> <li style="border-left:1px solid black"><a href="default.htm">Contact Us</a></li> </ul> </div> </td> </tr> </table> Please visit my site where the menu is currently hosted. the url is http://asc2009.dreamhosters.com You will see my problem. You will notice when you hover your mouse over the last item in the menu, you will notice that the hover color does not go the whole way to the end of the td element. the list is flush to the left of the td element I need it to cover the whole width of the table. any help would be very much appreciated. i have a list (menu) and i have created an image as a list-style-image but what i want to do is to decrease the gap between it and the actual writing. i dont want to use the "position:inside" as it makes the text move to right when i hover over the list/link. Code:
#submenu li{ padding-left:0em; margin-left:0em;}
#submenu a { margin-left:1em; }
#submenu li {border-bottom:1px solid black; }
#submenu li:hover {list-style-image:url(images/site/rightarrow.gif); list-style-position:outside; }
The page: http://new.midnighttempest.com/ As you can see, the content div is covering the footer, it sits just below the menu, whereas i want it to sit just below the content the php file: PHP Code: <?php define('IN_PHPBB', true); $phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './'; $phpEx = substr(strrchr(__FILE__, '.'), 1); include($phpbb_root_path . 'common.' . $phpEx); include($phpbb_root_path . 'includes/functions_display.' . $phpEx); include($phpbb_root_path . 'includes/bbcode.' . $phpEx); // Start session management $user->session_begin(); $auth->acl($user->data); $user->setup(); page_header('Homepage'); $template->set_filenames( array( 'body' => 'main.html', ) ); $forumid = 14; $sql_array = array( 'SELECT' => '*', 'FROM' => array(TOPICS_TABLE => 't'), 'LEFT_JOIN' => array( array( 'FROM' => array(POSTS_TABLE => 'p'), 'ON' => 't.topic_first_post_id = p.post_id' ) ), 'WHERE' => 't.forum_id = ' . $forumid . ' AND MONTH(FROM_UNIXTIME(post_time)) = MONTH(CURDATE())', 'GROUP_BY' => 't.topic_id', 'ORDER_BY' => 'post_time DESC' ); $sql = $db->sql_build_query('SELECT', $sql_array); $result = $db->sql_query($sql); while($row = $db->sql_fetchrow($result)) { $url = "<a href='".$phpbb_root_path."viewtopic.php?f=".$forumid."&t=".$row['topic_id']."'>".$row['post_subject']."</a>"; $poster = "<a href='".$phpbb_root_path."memberlist.php?mode=viewprofile&u=".$row['topic_poster']."'>".$row['topic_first_poster_name']."</a>"; $date = $user->format_date($row['post_time'], false, false) . "</strong>"; $text = generate_text_for_display(smiley_text($row['post_text']), $row['bbcode_uid'], $row['bbcode_bitfield'], $row['enable_bbcode'] = $row['enable_smilies'] = $row['enable_magic_url'] = true); $avatar = '<img src="http://new.midnighttempest.com/download/file.php?avatar=2_1260394092.png" />';; $updates[] = '<table width="100%" border="0"> <tr> <td colspan="2"><strong>Title</strong>:'.$url.'</td> </tr> <tr> <td width="10%">'.$avatar.'</td> <td width="90%">'.$text.'</td> </tr> <tr> <td colspan="2"><strong>Posted On:</strong> '.$date.' <strong>by</strong> '.$poster.'</td> </tr> <tr> <td colspan="2"><hr/></td> </tr> </table>'; } $db->sql_freeresult($result); $template->assign_vars( array( 'UPDATES' => implode('', $updates), 'FORUMID' => $forumid ) ); page_footer(); ?> main.html Code: <!-- INCLUDE overall_header.html -->
<div class="forabg" id="main">
<div class="inner">
<span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<span style="font-size: small">Updates</span>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row" style="background: #CBA2DC; padding-left: 5px; padding-bottom:5px; padding-right:5px; padding-top:5px;">
<p> </p>
{UPDATES}
<p><a href="/viewforum.php?f={FORUMID}">View all previous updates</a> </p>
</li>
</ul>
<span class="corners-bottom"><span></span></span>
</div>
</div>
<div class="forabg" id="menu">
<div class="inner">
<span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<span style="font-size: small">Menu</span>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row" style="background: #CBA2DC; padding-left: 5px; padding-bottom:5px; padding-right:5px; padding-top:5px;">
<!-- INCLUDE mt_menu.html -->
</li>
</ul>
<span class="corners-bottom"><span></span></span>
</div>
</div>
<!-- INCLUDE overall_footer.html -->
mt_menu Code: <p><strong>Info</strong>
<br />
<a href="/">Home</a><br />
About / Rules
<br />
Join Form </p>
<p><strong>Members</strong>
<br />
Memberlist
<br />
Card List
<br />
Games
<br />
Forum
<br />
Donate
<br />
Login </p>
<p><strong>Other</strong>
<br />
Affiliates
<br />
Link to us
<br />
Randomizer
<br />
Staff Pay
<br />
Credits
<br />
Contact Us</p>
css Code: /* Midnight Tempest Layout */
#main {
position:absolute;
width:70%;
overflow:visible;
z-index:1;
}
#menu {
float:right;
width:20%;
overflow:visible;
z-index:2;
}
Dear all, I am willing to develop a div tag, which will cover the entire body tag. The code I am using is the following: Code: <div id="warningLayer" style="position:absolute; width:100%; height:100%; margin:0; padding:0; background-color:#000000; opacity: 0.5; z-index:999999999; display:block; overflow:visible;"> </div> Unfortunately, the HTML page covers more that the browser window, hence when the visitor scrolls down the page, the body remains uncovered. How could I fix this issue? Thank you in advance. IE is not very friendly when it comes to iframes. I wanted to know if there is a workaround for iframes on internet explorer. I've been searching high and low, and tried every idea I can think of to fix this. It's really hard to explain what it is I'm looking for, but I'm going to try to be as clear as possible. I've been working on my blog: http://tkthebadomen.blogspot.com/ And I almost got it to the point I want, except I've hit a brick wall with this one. I have the background fixed, and a layer of buildings that scrolls with the page. The problem is filling the area below the scrollable buildings with black. I'm not going to go into detail about all the things I've tried. But if I make a section black, it only fills the screen once, so if I scroll, the next page shows through; and then when I look at just a single post, it makes the bottom of the page go down past the footer. So my question is: Is there a way to fill the background with a color, from a certain point on the page to the end of the content? Here's the css I currently have for the front scrolling sections: Code: div.front {
background-image:url(http://www.tksheppard.com/blog/front.png);
background-repeat: no-repeat;
background-attachment: scroll;
position:absolute;
width:1284px;
height:100%;
top: 500px;
left: 0px;
bottom: 0px;
}
div.middle {
background-color:#000000;
color:#000000;
position:absolute;
overflow:hidden;
width:1284px;
height:100%;
top: 150%;
left:0px;
bottom:0px;
}
If you need anymore code posted, let me know. I made my site buttons so that there's some transparent areas so when you hover, only the transparent areas are colored by using the css's link background color properties, yet the background only reaches half way so the link background doesn't cover the whole image... this is the first time it has happened to me. Any suggestions on an alternate way to do this? Hi all, Does anyone have any good suggestions for a CSS book? I'd like to buy an all in one, that will teach me CSS. Thanks for any help hi, i have created a simple css layout and its displaying correctly in google chrome, firefox, IE 6 and IE 7. However, IE 8 is covering the 1px border on the left of the containing div section with the image contained within the logo. I tried adding a 1px padding and margin which only served to push the image over the right hand side border in IE 8. Does anyone know whats causing this issue? Here is my code below. Thanks in advance. First, the HTML code:- 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>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<meta http-equiv='Content-Language' content='en-us' />
<link rel='stylesheet' type='text/css' href='css/default.css' />
</head>
<body>
<div id='page'>
<div id='logo'>
<img src='gfx/siteLogo.jpg' alt='Our Website Logo' />
</div>
</div>
</body>
</html>
Now the css file:- Code:
/* page structure definitions */
html
{
font-size: 100%;
}
body
{
margin: 0;
padding: 0;
/* 20px */
padding-top: 1.25em;
padding-bottom: 1.25em;
text-align: center;
font-family: Verdana, sans-serif;
background-color: white;
/* 16px */
font-size: 1em;
}
#page
{
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
/* 900px */
width: 56.25em;
/* 1px */
border: solid black 0.0625em;
background-color: #ABBAD9;
}
#logo
{
margin: 0;
padding: 0;
/* 900px */
width: 56.25em;
/* 150px */
height: 9.375em;
}
#logo img
{
margin: 0;
padding: 0;
/* 900px */
width: 56.25em;
/* 150px */
height: 9.375em;
}
The image in the logo is 900px * 150px. Hi all, a few quick q's: 1. What is best way to set-up a style-sheet for NN4 CSS? I am using @import, and I want to serve-up a NN4 CSS with link a "link rel"... 2. Can I reley upon Dreamweaver's CSS syntax checking to create my alternative/NN4 CSS? (i.e. DW will tell you if a particular attribute or style is or is-not supported by a certain browser.) 3. What is the best/fastest/your technique for building alternative style sheets (by alternative, I mean a style-sheet to feed to browsers like NN4)? 4. Should I be using the TAN hack for height also? Example: Code:
* html div { /* This is the Tan hack */
height: 130px;
hei\ght: 100px; }
/* the backslash cannot appear before the letters a to f, and A to F, and numerals 0 to 9 since doing so will turn those letters or numerals into hexadecimal numbers. */
5. (Last q) I am using an image replacement technique for my navigation (using one background sprite to create off/over/active states: INKNOISE)... It works great, except this: In Mozilla FF on PC when page loads, the background images do not ussually load... Anyone got a fix for that? Because I can't seem to find a fix, my best answer would be to create a PHP sniffer and force a page refresh. Thanks in advance! Cheers! Micky I know it's probably something simple, but I'm having trouble centering my web page in CSS. I want to center it no matter what resolution a visitor has their monitor set to or the size of their monitor. I've tried the following to no avail: Code: margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; Any suggestions? Hi...new here. I am formatting a small page for mass email and have a div under the header that holds the date. It should be simple but I cannot get it to fill the entire space with color...at least not in Firefox. It looks fine in IE. Go figure. IE is the one that usually gives me trouble. Anyway, I have done just about EVERYTHING I can think of....to no avail. Can anyone give me a fresh perspective and let me know what's wrong? http://www.msbanet.org/emails/moasbo/emails/060627_workshops.htm The css is embedded. Thanks, Jeralyn I dont think you can wrap a <div> inside <a>, but is there any way to make an entire <div> area "linked" ? One idea - Im sure i can hook up an onclick event with javascript, but how would i change the mouse prompt when the user moves thier mouse over it ? Hi, I'm trying to make a div in my website take up the entire height of the page, or more if the page is longer. However when I've managed to get the div the full height of the page, the contents leave the div when it's longer than the page. I want the div to stretch, but be at least as long as the page. Here is a simplification of my code as an example: Code:
<html>
<head>
<style>
.contentdiv{
height: 100%;
width: 758px;
top: 0px;
position: relative;
border: 1px solid #89a9c7;
padding-top: 0px;
padding-bottom: 0px;
border-spacing: 5px;
bottom: auto;
}
.footerdiv
{
position: absolute;
bottom: 0px;
background-color: blue;
width: 100%;
height: 20px;
}
</style>
</head>
<body>
<div class="contentdiv">
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
<div class="footerdiv">a</div>
</div>
</body>
</html>
Hello all. I am working on a sign on page that uses two divs nested in a table. I have a header above them, and a footer below, and I want the divs (which have a nice gradient background) to stretch all the way down to the footer, regardless of the amount of content. In a simplified format, I have: Code:
<table cellpadding="0" cellspacing="0" style="height:100%; padding-top:20px; padding-bottom:20px; width:976px;" border="0">
<tr>
<td class="wrapper1" id="wrapper1" valign="top">
<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td valign="top" width="100%" style="border:3px dotted black; height:100%;">
<table style="width:100%; height:100%;" border="1">
<tr>
<td valign="top" style="height:100%;">
<xsl:call-template name="bodyContainerTemplate"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
The tables stretch just fine. Where I am running into problems is in my bodyContainerTemplate. That template looks like: Code:
<!--bodyContainerTemplate-->
<div class="bgcolor1" style="width:976px; height:100%; border:2px solid;">
<div class="login_bg" style="height:100%;" id="login_bg">
<table width="100%" height="100%" border="0" style="position:relative;">
<tr>
<td>
My content goes here
</td>
</tr>
</table>
For some reason, once it gets into the template, height:100%; doesn't work anymore, and the divs simply stretch big enough to make room for the content. What styles am I missing for those divs to be 100%? I have messed with: min-height height:auto, relative, etc. margin:0 and a few other things, none of which are seeming to make a difference. Thanks! For caching purposes and/or maximum performance would it be more beneficial to have the same large css document referenced in every page on my site or to have a much smaller different one referenced for each page in my site. hi, i m trying to design a page with a logo at the top.just like this site. http://richgirlstore.com/xcart/home.php but i want the logo to be displayed in a way that it covers the entire width of the browser window when a user opens the page.the screen sizes are different depending on the type of monitor used by people.so how can i fix this problem.thanks... Please take a look at the following site. website How can I make the white part touch the bottom of the browser? i've seen this done many times with other sites. I'm using this html: Code: <div id="titlebox">
<div id="title">
<img src="images/title.png" alt="Garden Pub & Grille" />.
</div>
</div>
with this css: Code: html, body {
font-family: Century Gothic;
text-align: center;
background-color: #DEF9FA;
height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
top: 0px;
position: relative;
}
body > #container {
height: auto;
min-height: 100%;
min-width: 100%;
}
#titlebox div {
background-color: black;
position: absolute;
min-width: 100%;
margin-left: 0px;
margin-right: 0px;
left: 0px;
top: 0px;
height: 64px;
z-index: 1000;
}
#title div {
width: 1000px;
background-color: black;
}
Trying to get a black bar across the top with an image centered in it. Problem is, when the page is smaller than the content and there is a horizontal scrollbar, the black bar only goes to the edge of the window, but when you scroll right, it dissapears and is cut off. I have a similar setup on the bottom of the page that works correctly (a table with links is inside that one). Why is this not working? Thanks. URL Image doesn't seem to be showing up, link: http://img15.imageshack.us/img15/5697/29946518.png |
|||||||