|
CSS - Graphics Not Displaying
I've downloaded a free CSS website template with the idea of just swapping out the graphics and text using Notepad. All is going well with one major exception - I cannot seem to change the graphics in the sidebar or main body. I put the new graphics in the same folder as the original graphics then just changed the img tag to reflect the new filename.
This results in the image spacer icon displaying but the new image does not. What is strange is that the alt tag will change correctly, just no image. I know I'm overlooking something simple, but I seem to have hit the proverbial brick wall. Any help would be most appreciated! I tried to attach the files but don't see that option and evidently I'm not permitted to post the url. Just google "templatemo 050 metal" to pull up the files. Thanks for reading this and offering any help! Similar TutorialsHi I am haveing some trouble implimenting a sub menu on some of my pages. I want to have a menu that mirrors the titles rounded edges by placing a graphic at either end of the menu with the text set in the centre. So far i can produce the title no problem but the menu is proving a little more tricky. Example page with the issues My css: Code:
#services-menu ul{
margin :0;
white-space :nowrap;
color: #FFFFFF;
line-height: 30px;
height: 30px;
padding: 0px;
background-image: url(/graphics/service_menu_back.gif);
background-repeat: repeat-x;
}
#services-menu ul li{
display : inline;
}
#services-menu ul li a{
color:#FFFFFF;
text-decoration:none;
margin: 0px;
padding-left: 4px;
}
#services-menu ul li.services_menu_right {
background-image: url(/graphics/services_menu_right.gif);
background-repeat: no-repeat;
background-position: right top;
height: 30px;
float: right;
width: 10px;
}
#services-menu ul li.services_menu_left {
background-image: url(/graphics/service_menu_left.gif);
background-repeat: no-repeat;
background-position: left top;
height: 30px;
float: left;
width: 10px;
}
My HTML is: Code: <div id="services-menu">
<ul>
<li class="services_menu_left"></li>
<li><a href="/index.html">Assets</a></li>
<li><a href="/pages/company.html" target="_self">Risk</a></li>
<li><a href="/pages/services.html" target="_self">Surveillance</a></li>
<li><a href="/pages/humanitarian.html">Counter Terrorism</a></li>
<li><a href="/pages/forms/procure.php" target="_self">Close Protection</a></li>
<li><a href="/pages/forms/recruit.php" target="_self">Contingencey</a></li>
<li><a href="/pages/forms/contact.php" target="_self">Training</a></li>
<li class="services_menu_right"></li>
</ul>
</div>
Ps - i have tried producing the menu in the same way as i have made the title but the right hand graphic continues to drop down a line. ANY IDEAS - I'M REALLY STUCK NOW!!!! Hi, First, before you get on my case, I'm using a table, because that's what the teacher wanted. And as I've never worked with CSS, let alone divs, I was more comfortable with it anyhow. Okay, the question I have is probably very dumb, and the answer very simple, but I'm not getting it. I'm just trying to get an image aligned to the top of a cell. http://esdcar.org/web/test/templatem2.html I could use valign in the cell tag, and it almost works (but it doesn't quite align at the top, about 5px short), but I'd like to do it with CSS, especially as I'm going to have a different header image on every page. The cell has its own id of contentm. Inside the img src tag, I put class="pageheader." In the stylesheet, I gave .pageheader an attribute of vertical-align: top. But, it's not working. What am I doing wrong? I want to construct a page like this... Obviously, I could build a 'rigid' page in the old-fashioned way with tables, trs, and tds but I'd like to provide something a bit more flexible with divs that could survive a bit of strectching, changes in font size, etc. Can you see what I'm getting at? I'm not looking for a complete solution, just a few pointers as to whether it's doable/worthwhile and how one might approach it. It's times like this when I want to give up on CSS. Everything is fine in both Firefox and IE on my local until I use the code in Miva Merchant 5.5 on the server. In Firefox, everything looks good and displays as it should. But in IE (6.0) NO MENUS! The Header div (logo etc) displays fine, so it must be something with the list. #main-nav { height: 23px; background: #CCCCCC;} #main-nav dl { margin: 0; padding: 0; content-box; } #main-nav dt { float: left; } #main-nav dt a { height: 0px !important; padding: 5px 0 0 0; display:inline } #store-nav { height: 22px; background: #EBEBEB; } #store-nav dl { margin: 0; padding: 0; content-box; } #store-nav dt { float: right; padding: 0 20px 0 10px; } #store-nav dt a { height: 0px !important; padding: 0; display:inline } What could it be? Is it the <dl> <dt> tags? <div id="header"> <h1> <img src="home.gif" width="208" height="63" alt="Home" border="0" /> </h1 </div> <div id="main-nav"> <dl> <dt id="line"><img src="store-line.gif" border="0" width ="209" /></dt> <dt id="company"><a href="#"><img src="company.gif" border="0" /> </a></dt> <dt id="products"><a href="#"><img src="products.gif" border="0" /> </a></dt> <dt id="contact"><a href="#"><img src="contact.gif" border="0" /> </a></dt> </dl> </div> <div id="store-nav"> <dl> <dt id="checkout"><a href="#"><img src="checkout.gif" border="0" /> </a></dt> <dt id="cart"><a href="#"><img src="cart.gif" border="0" /> </a></dt> <dt id="midspans"><a href="#"><img src="midspans.gif" border="0" /> </a></dt> </dl> </div> Hi, I'm trying to write a simple website but I can't get it to run correctly in Internet Explorer. It looks fine in Firefox and Safari, but in IE none of the CSS is used, it looks like a regular html document. I've run the Validations for both files and they pass (aside from the html file throwing errors about the css styles). Here is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TITLE</title> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Date: 2009-08-10 --> </head> <body bgcolor="#D5D5D5"> <center> <banner> <img src="toptile.jpg" height="150px" width="100%" alt="topbanner"> </banner> <br> <logo> <img src="bannerlogo.png" alt="logo"></logo> <navbar> <img src="navbar.png" width="100%" height="650px" alt="background"> </navbar> <blackbar><img src="black.png" width="100%" height="20px" alt="blackbox"></blackbar> <br> <middle> <table border="0" width="800px" cellpadding="10" bgcolor="#DBFBFF"> <tr> <td width="50%" valign="top"> <br><br><br><br><br> <center> Coming Soon... </center> </td> </tr> </table> </middle> </center> </body> </html> and the CSS: Code: logo
{
position:absolute;
display:block;
margin-left: auto;
margin-right: auto;
top:10px;
width:100%;
z-index:3;
}
banner
{
position:absolute;
top:-10px;
left:-10px;
right:0px;
z-index:2;
}
middle
{
position:absolute;
display:block;
top:100px;
margin-left: auto;
margin-right: auto;
width:100%;
z-index:1;
}
navbar
{
position:absolute;
top:140px;
left:0px;
right:0px;
z-index:-1;
}
blackbar
{
position:absolute;
top:140px;
left:0px;
right:0px;
z-index:4;
}
I realize I'm probably not using all the best practices, but it displays fine on everything but IE. Can someone please help me out here. Thanks I'm working on a site (here) that has a two column style layout. Everything works fine in almost any browser OTHER than IE... In IE, the main (right) column shifts so that it is below the content length of the left (floated) column. I want them to be side by side... I've been playing with different solutions for several days. Can anyone help? (link to css file). relevant html: Code: <div id="wrapper"> <div id="container"> <div id="content"> <div id="left"> <!-- Left Block Start --> <!-- Left Sidebox Start --> <!-- Left Sidebox End --> <!-- Left Block End --> </div> <div id="main"> <!-- Center Sidebox Start --> <!-- Center Sidebox End --> <!-- BEGIN: Default News-index Article --> <!-- END: Default News-index Article --> </div> </div> </div> <div class="clearing"> </div> </div> relevant css: Code: /* styles to create table-less layout */
#wrapper {
padding-top:10px;
background-color: white;
text-align:center;
}
#container {
width: 770px;
height: auto;
margin: 0 auto 0 auto; /* sets the left and right margins to auto for everything else */
border-top: 1px solid white;
}
#content {
/*width: 770px; */
text-align:center;
}
#main {
text-align: left;
margin-left: 175px;
width: 595px;
}
#left {
text-align: left;
float: left;
width: 160px;
}
/* utility clearer class */
.clearing {
height: 0px;
clear: both;
}
thanks in advance for the help! hi i have few questions: 1. when you have a paragraph and the space between the two lines of text, how do you reduce it? 2. similarly say you have a paragraph and then another element underneath it for eg the end of table, a horiz. line etc, how do i reduce the space between that paragraph and that element. 3. I have a DIV but when i put it on the page it appears at the top, is there a way to place it so that it is placed at the bottom. here is the code: Code:
<div style="float:left;">
<a href="{U_VIEW_FORUM}">{FORUM_NAME}</a><br />
<b>{L_MODERATOR}: {MODERATORS}<br /><br />
{LOGGED_IN_USER_LIST}</b><br/>
<a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" border="0" alt="{L_POST_NEW_TOPIC}" /></a>
<!--<a href="{U_INDEX}">{L_INDEX}</a> -> <a href="{U_VIEW_FORUM}">{FORUM_NAME}</a>-->
<a href="{U_INDEX}">Forum</a> -> <a href="{U_VIEW_FORUM}">{FORUM_NAME}</a>
</div>
<div style="float:right; vertical-align:bottom; margin-top:9%;">
{PAGINATION}
<a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a>
</div>
in this the first DIV appears on the left, the second div appears on the right of the first div. HOWEVER it positions itself with the top of first div SOMETHING LIKE: Code: FIRST DIV TEXT SECOND DIV TEXT FIRST DIVE TEXT .... ... however i want it to look like: Code: FIRST DIV TEXT FIRST DIVE TEXT .... END OF FIRST DIV SECOND DIV TEXT now i have two possible sol for this ie: using margin-top to make it go down or use <br/>. is there a css specific tag? I am sure that this is no surprise to many of you and hope that someone kind help me find a solution. I am having trouble displaying a drop down CSS menu in IE7, it seems to work fine in Firefox. Please advise and thank you for all your help with this. I have spent far too much time on this and still can't figure it out. Website is located at: myasvn.org/_/campusrec/temp.php PHP Code: /* Navigation Menu */ ul#menu { background: rgb(63, 69, 76) url('../_media/bk-menu.png') repeat-x; list-style-type: none; list-style-image: none; list-style-position: outside; width: 950px; height: 34px; display: block; line-height: 34px; z-index:2; } ul#menu li a { display: block; color: rgb(255, 255, 255); text-decoration: none; text-align: center; } ul#menu li a:hover, ul#menu li:hover { background-color: rgb(53, 60, 66); } ul#menu li { border-right: 1px solid rgb(53, 60, 66); float: left; } ul#menu li ul { position: absolute; left: -999em; background-color: rgb(238, 238, 238); width: 165px; list-style-type: none; list-style-image: none; list-style-position: outside; } ul#menu li li { border-right: medium none; width: 157px; float: left; line-height: 30px; } ul#menu li li a { border-bottom: 1px solid rgb(210, 210, 210); width: 157px; color: #000000; text-decoration: none; text-align: left; padding-left: 8px; display: block; } ul#menu li li a:hover { color: rgb(255, 255, 255); background-color: rgb(204, 0, 0); } ul#menu li:hover ul { left: auto; } ul#menu li:hover ul, #menu li.sfhover ul { left: auto; } I am using the below CSS to display a photo at the top of my pages. The CSS worked fine with the original photo (using a template) on both firefox and IE. However, when I changed the photo for my own it stops appearing on IE. Firefox displays the picture perfectly, and the div that holds the image is sized correctly (shows as white space on page). Does anyone know why this may be happening? I am using IE 7. The rest of the CSS is working, even the links to other images I use as backgrounds. Code: #header-photo {
clear: both;
height: 200px;
width: 790px;
margin: 0 auto;
background: #FFF url(header-photo.jpg) no-repeat center center;
} I've losing my mind on this. When I look at the following layout in IE6, the "matterR" DIV background color is filling up the entire "content" DIV -- as opposed to staying in its container DIV ("columnR") like I need it to. Any idea why it's bigger than it's container DIV? Code: #content { margin-right: 10px; margin-bottom: 5px; margin-left: 10px; width: 780px; overflow: hidden }
#columnR { width: 595px; height: 308px; float: right; overflow: auto }
#matterR { background: #6d6f71; padding: 20px 20px 40px 70px }
<div id="content">
<div id="columnR">
<div id="matterR">Scrolling text content here...</div>
</div>
</div>
Keep in mind that I can't really assign a pixel width to "matterR" -- as its container DIV needs to scroll vertically. It seems if I assign a pixel width, it want to scroll horizontally to compensate for the scrollbar. Any ideas? Thank you! Hi, I have labels that aren't displaying properly in IE. I have used similar code in many parts of the site without problem. Please see this page in IE6. The label contents don't display If I move the labels outside of the content div it does display... Code: <div id="content"> <div id="tempcontent"> <div id='confirmation'> <p><label>Email address:</label>james@got.com<br></p> <p><label>Duration of stay:</label>2 day(s)<br></p> <p><label>Number of guests:</label>4<br></p> <p><label>Arrival date:</label>2007-01-03 00:00:00<br></p> <p><label>Departure date:</label>2007-01-05 00:00:00<br></p> </div> Code:
#content {
position:relative;
background-color:#ffffff; /* dcba72 */
margin-top: -1em;
#tempcontent {
margin: 4em 4em;
}
#confirmation {
margin: 2em 8em;
border: 1px solid #781351;
padding: 1em 3em;
}
label
{
width: 15em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
color:black;
}
Does anyone know what's going on? Hi all, I have a dropdown menu that appears onmouseover and goes away onmouseout. The code works as it is posted here, works. What I was trying to do, was to move the style tag in the div with the id 'p_default_1', into a class in the CSS file. But when I remove the style tag from the div, and add the class (class="menu1"), the dropdown menu no longer gets displayed when i roll over it. note to mods: sorry if this is in the wrong forum, I just don't know what the problem is with. html Code: Original - html Code <td bgcolor=white valign="top" class="menu" OnMouseOver="show_sub('p_default_1', this, 0);" OnMouseOut="hide_sub('p_default_1', this, 0);"> <a href="http://www.site.com/products.html"><img src="images/pri-button-products.gif" height=66 border=0></a><br> <a href="http://www.site.com/products.html"><img src="images/pri-ub-products.gif" height=65 border=0></a><br> <div bgcolor="#FFFFFF" align=left id="p_default_1" style="margin-left:0px;margin-top:0px;position:absolute;z-index:2; display:none;" width="175" > <table id="p_default_parents_1" class="white_table" width="175" cellpadding="0" cellspacing="0"> <tr> <td width="100%" nowrap style="border-bottom:solid 1px #C6C6C6;border-left:solid 1px #C6C6C6;border-top:solid 1px #C6C6C6;border-right:solid 1px #C6C6C6;padding-left:5px;padding-right:5px;padding-bottom:2px;padding-top:2px;" OnMouseOver="show_sub('p_default_9', this, 0);" OnMouseOut="hide_sub('p_default_9', this, 0);"> <div style="padding-top:4px; padding-bottom:4px; padding-left:4px; padding-right:4px; "> <a href="http://www.site1.com" class="sub_menu">Option 1</a><BR></div> <td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="" onMouseOut="" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site2.com" class="sub_menu">Option 2</a><br></div> </td> </tr> <tr> <td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="show_sub('p_default_13', this, 0);" onMouseOut="hide_sub('p_default_13', this, 0);" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site3.com/" class="sub_menu">Option 3</a><br></div> </td> </tr> </tbody></table></div></td>
<td bgcolor=white valign="top" class="menu" OnMouseOver="show_sub('p_default_1', this, 0);"
OnMouseOut="hide_sub('p_default_1', this, 0);">
<a href="http://www.site.com/products.html"><img src="images/pri-button-products.gif" height=66 border=0></a><br>
<a href="http://www.site.com/products.html"><img src="images/pri-ub-products.gif" height=65 border=0></a><br>
<div bgcolor="#FFFFFF" align=left id="p_default_1" style="margin-left:0px;margin-top:0px;position:absolute;z-index:2; display:none;" width="175" >
<table id="p_default_parents_1" class="white_table" width="175" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" nowrap style="border-bottom:solid 1px #C6C6C6;border-left:solid 1px #C6C6C6;border-top:solid 1px #C6C6C6;border-right:solid 1px #C6C6C6;padding-left:5px;padding-right:5px;padding-bottom:2px;padding-top:2px;" OnMouseOver="show_sub('p_default_9', this, 0);" OnMouseOut="hide_sub('p_default_9', this, 0);">
<div style="padding-top:4px; padding-bottom:4px; padding-left:4px; padding-right:4px; ">
<a href="http://www.site1.com" class="sub_menu">Option 1</a><BR></div>
<td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="" onMouseOut="" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site2.com" class="sub_menu">Option 2</a><br></div> </td>
</tr>
<tr>
<td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="show_sub('p_default_13', this, 0);" onMouseOut="hide_sub('p_default_13', this, 0);" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site3.com/" class="sub_menu">Option 3</a><br></div> </td>
</tr>
</tbody></table></div></td>
javascript Code: Original - javascript Code function hide_sub(name, cell, i) { var b = document.getElementById(name); if (b != null) { b.style.display = 'none'; } } function show_sub(name, cell, i) { var b = document.getElementById(name); if (b != null) { b.style.display = ''; } }
function hide_sub(name, cell, i) {
css Code: Original - css Code .menu1{ margin-left:0px; margin-top:0px; position:absolute; z-index:2; display:none; }
.menu1{
I wasn't sure whether I should post here or in the Javascript forum, but it's a display issue, so I'm putting it here. I have a problem with a trivial project that's driving me crazy. I'm using javascript to display a list of the last songs I've listened to. I want that list to display within a div. The problem is that it doesn't at all -- it seems to ignore all CSS positioning altogether. You can see the problem here . You can view the script that's generating the text right here. It's all pretty obvious -- the list of songs that's in the background should be in the "i'm listening to" box. Anyone seen anything like this before? I've searched all over Google and these forums and I can't find anything quite like it. Hi guys, Im hoping a CSS whizz can find an error in this code as I cannot for the life of me work out why content held in the 'main' div is appearing outside / overlapping the edge of the site design? It loads perfectly in Firefox Code: #wrap {
width: 820px;
background: #CCC url(content.jpg) repeat-y center top;
margin: 0 auto;
text-align: left;
}
#content-wrap {
clear: both;
width: 760px;
padding: 0;
margin: 10px auto;
}
/* Main Column */
#main {
float: left;
width: 70%;
padding: 0; margin: 0 0 0 5px;
display: inline;
}
Any help would be greatly appreciated Hi, I have a drop down menu which is using jquery to animate it. I am trying to set it up to display when JS is disables. I have added the following code inside a <style> tag which is inside a <noscript> tag. However, the drop down menu does not display it's drop downs. They can simply just appear, so there is no animation needed. This is my code: PHP Code: ul.tabs { display: table; margin: 0; padding: 0; list-style: none; position: relative; height:40px; width:100%; } ul.tabs li { margin: 0; padding: 0; list-style: none; display: inline-block; float: left; position: relative; padding:0 2px 0px 0px; } ul.tabs a { position: relative; display: block; line-height:40px; padding:0 18px; color:#FFF; font-size:13px; -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; -khtml-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } ul.tabs a:hover, ul.tabs a.selected { background:#c95884; } ul.tabs a.connect { position: relative; display: block; line-height:38px; padding:0 18px; background: #54c45f; font-size:13px; } ul.tabs a.connect:hover, ul.tabs a.connect.selected { background:#68cb72; } Any ideas how I can make the sub items display? I need some help desperately. I am a mediocre CSS guy I am working on a site for a friend of mine. I, for the life of me, can't seem to get an image displayed in IE8 It displays fine in FF. I have a zip file with the whole site so that someone who is an expert in CSS can show what is wrong. I would be very grateful if someone can help me with this. I am not allowed to provide my email since I am a new user. I promise not to be an annoyance to anyone who is willing to share his/her email me so that I can send the files for him/her to look at. I know I am asking too much, but I have no choice Developing a page: As this is my first posting I do not know how to write here the URL, system does not allow me Problem is: I am using behavior: border-radius.htc and border-radius to create rounded corners in boxes. The rounded borders display correctly in Firefox, Chrome, Safari...and amazingly display well in IE7&8. Except for one column on the right hand side. The right and bottom border does not display in IE (the 4 round corners do, however!). I can't figure why. Driving me crazy! Another funny one: the border surrounding the chocolate buttons picture <div class="ftproduct_image"> displays well in all browsers except in IE8. Why could something display well in IE7 but not in IE8? This is a new for me. Any ideas welcomed! I guess you can't help without having a look at the page but I do not know how to give the uRL I'm working on a client's website and trying to get the navigation menu to look right in firefox, for some reason it seems to ignore all width properties and the table cells overlap, but only in firefox. IE displays it perfectly, any help would be appreciated. www.entsource.com/hcs/ It is source viewable and the css code follows: a.nav { color: black; text-decoration: none; border: 1px solid #6D92A2; width: 150px; padding: 2px; font-family: tahoma; font-size: 11pt; text-align: center; } a.nav:hover { color: #F80808; text-decoration: none; border: 1px solid #F80808; width: 150px; padding: 2px; font-family: tahoma; } table.pane { width: 900px; } td.nav-cell { width: 155px; border-right: 2px solid #6D92A2; } td.main { width: 750px; padding: 10px; } hr { color: #6D92A2; height: 1px; width: 400px; } strong.header { color: white; background-color: #CCCCCC; width: 700px; height: 20px; border-top: 1px black solid; border-bottom: 1px black solid; font-size: 16pt; font-family: tahoma; } strong.bold { color: black; font-size: 16pt; font-family: tahoma; } |
|||||||