|
HTML - Div Tag Issue
Hey guys,
Im currently working on a project for university and something is bothering me with this nav bar that i have created. I guess you can class this as CSS as well as HTML but i was wondering who could help me out. As you can see with image one things are looking alright, buttons are consistent with no gaps. This is because i have the images within a div and the background colour set as the same to look consistent. With image 3 you can see what would happen if the background colour was removed. Now the problem that i have is within image 2, when you stretch the window it stretches the background colour, the thing i want to do is wrap the div around the images so the colour stays behind them and only them as well as having the buttons centred. Any help would be great thanks. Similar TutorialsHey first post, been around for a while but never actually joined. Anyway, client has a site that was built recently by another crowd. Works well in IE7, IE8, Firefox, Opera etc etc but the home page doesnt in IE6. This is an issue because the sites target viewers are apparently mostly using IE6. The issue is the home page doesnt format correctly, the others are fine so I'm thinking its got to be to do with the embedded login form. I've tried to sort it but its making me Any help much appreciated! http://www.freightmanagers.co.nz/index.html Hey friends, I'm having a little issue with my photos on my site. I want to use the img tag that uses [img] /img] this style but can only seem to get this <img > style to work. If I use the [img] style I just get font showing up. How can I fix this? I hope this makes sense. Thank you in advance. Hello. I'm a new user. I've done a couple different sites and I'm working on completing this one. There are a couple issues. In FireFox everything appears to be how I want it. I had to do the logo in an odd way. The top part is a background to the div that the Donate button appears in. The bottom part is an actual image. I did it this way because I couldn't use spans to get part of the image on the left and then have the Donate button align to the right. The only issue with it is when the user makes the font insanely large(Using the font resizer), there gets to be a gap, but then again when the user makes the font that large everything starts to become odd. In IE, this logo is split with quite a large gap. Also in IE, the top of the site is a little banner, which also has a large gap between that and the next bit of the site. It does not currently validate, throwing issues that the document does not allow <ul> where it is. I am not too sure why it won't let me. I have the unordered list nested within a span, nested within a div in order to get the site to flow properly. Another reason it does not validate is because apparently the W3 validater doesn't like SSI. Any help here would be appreciated. http://www.lilacblind.org/testing/NewSite Hi, I'm very new to website design, just starting building my first site. My site is asbestos-claim.org.uk. I've managed to get most things with the layout working okay, but having issues with my footer-right section (About Us page links etc). In IE8, IE9, FF, Chrome, Safari and Opera the site looks fine, however in IE6 and IE7, the footer-right section appears under the centre content section, right under the "simply complete the online form on this page for a free assessment and callback. This is a completely free service." text. Sorry, not sure if this issue needs posting in the HTML or CSS forum! Thanks, Freeze. Hello! I am having an issue with an unordered list resting beside an img. For some reason the bullet dots for the ul are inside the img instead of beside the text. I realise that my error is most likely something simple, but I have been staring at this darn thing for over week (it's a homework assignment) and I still cannot figure out what I have done wrong. Sadly my instructor's only advice is "Re-check your html and css files.", which was not helpful in any way as obviously I had already been doing that and still cannot find my mistake. I am not sure however if the error is with my html coding, or the css. I hope I don't get into trouble for it, but I am going to post this same question in the CSS forum, only with the code my css instead of the html. Here is my html code: 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" lang="en" xml:lang="en"> <head> <title>Prime Properties :: Listings</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="prime.css" type="text/css" /> </head> <body> <div id="wrapper"> <h1 id="logo"><img src="primelogo.gif" alt="Prime Properties" width="680" height="86" /></h1> <div id="button"> <div id="leftcolumn"> <ul> <li><a href="index.html">Home</a></li> <li><a href="listings.html">Listings</a></li> <li><a href="financing.html">Financing</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> <div id="rightcolumn"> <h2>Listings</h2> <h3>Schaumburg Colonial</h3> <p>This single family home is a two-story colonial on a large lot.</p> <a href="schaumburg.jpg"> <img class="property" src="schaumburgthumb.jpg" alt="Schaumburg" align="left" /> </a> <ul> <li>Four bedrooms</li> <li>Two and 1/2 baths</li> <li>Finished family room</li> <li>Two car garage</li> <li>Listing #3432535</li> </ul> <br /> <h3>Libertyville Condo</h3> <p>New construction condo in downtown Libertyville.</p> <a href="libertyville.jpg"> <img class="property" src="libertyvillethumb.jpg" alt="Libertyville" align="left" /> </a> <ul> <li>Close to train</li> <li>Two bedrooms</li> <li>Two baths</li> <li>Two indoor parking spaces</li> <li>Listing #3432432</li> </ul> <br /> <div id="nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="listings.html">Listings</a></li> <li><a href="financing.html">Financing</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div id="footer">Copyright © 2011 Prime Properties<br /> <a href="mailto:Airamith@gmail.com">Mandi Adkins</a></div> </div> </div> </body> </html> And here is a link to the active site: Listings I'm sure there are other issue's in the code, I am still learning after all. My most pressing issue right now though concerns the bullets being inside the images. I would like to thank you in advance for any help you can offer, I really do appreciate it! Edit: I forgot to mention that I am required to use IE 8 or 9 for this class. Also, all of my coding validated through the W3C, both the html and the CSS. Also, I just noticed that the bullets are much closer to the text when it is viewed in Google Chrome instead of IE 9. im having an issue with this code im trying to get going in my css file... i put in the code below in the .css file and call the file in hte header using the link to my css file and then i use the command that should activate the script im wondering if im doing something wrong that maby i dont see, because when i put hte code directly in the header and call it it works perfectly... call :: <link rel="stylesheet" type="text/css" href="MyStyle.css" /> .css function :: .hr2 { border: 0; color: limegreen; background-color: limegreen; height: 2px; border-top:1px; border-style: solid; } Action :: <hr class=hr2> am i using the right way t o call the .css ? should i have more code in my .css to close it off properlly? I have recently updated a site that i am working on and everything works fine in safari and fire fox, but in IE7 the image on the left side is being droped down and causing the page as a whole to look diffrent.....please help, not sure whats going on. http://www.mdmoms.com/products/babybasics.html here is the html: HTML Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #80452E;
}
-->
</style></head>
<body>
<div align="center">
<table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td colspan="4"><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="800" height="130">
<param name="movie" value="../../flash/header2.swf">
<param name="quality" value="high">
<embed src="../../flash/header2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="130"></embed>
</object>
<script type="text/javascript" src="ieupdate.js"></script></td>
</tr>
<tr>
<td width="269"><img src="../../gifs/babybasics1234.gif" width="269" height="53" border="0"></td>
<td colspan="3" rowspan="2"><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="532" height="322">
<param name="movie" value="../../flash/babybasics.swf">
<param name="quality" value="high">
<embed src="../../flash/babybasics.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="532" height="322"></embed>
</object>
<script type="text/javascript" src="ieupdate.js"></script></script>
</td>
</tr>
<tr>
<td rowspan="3"><img src="../../gifs/babybasics1234.jpg" width="268" height="473" border="0"></td>
</tr>
<tr>
<td width="69" bgcolor="#FFFFFF"><img src="baby009/images/spaah_r15_c2.jpg" width="69" height="56" border="0"></td>
<td width="377" bgcolor="#FFFFFF"><form name="buy" method="post" action="http://cart.novapointe.com/0635/novacart.pl">
<input name="cart_id" type="hidden" value="164">
<input name="sku" type="hidden" value="6004">
<input name="command" type="hidden" value="add">
<input name="view" type="hidden" value="cart">
<div align="center" class="style1">
<div align="left">
<input name="image" type="image" src="images/buy.jpg" width="111" height="26" border="0">
</div>
</div>
<input type=hidden name=.autodone value="http://www.mdmoms.com/product/babybasics.html">
</form></td>
<td width="87" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF"><img src="../../gifs/producstthree.gif" width="414" height="173" border="0" usemap="#Map"></td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td colspan="4"><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="800" height="22">
<param name="movie" value="../../flash/footer2.swf">
<param name="quality" value="high">
<embed src="../../flash/footer2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="22"></embed>
</object>
<script type="text/javascript" src="ieupdate.js"></script></td>
</tr>
</table>
</div>
<map name="Map"><area shape="rect" coords="26,31,126,144" href="http://www.mdmoms.com/products/baby003/index.htm"><area shape="rect" coords="162,26,278,143" href="http://www.mdmoms.com/products/baby007/index.htm"><area shape="rect" coords="302,23,391,144" href="http://www.mdmoms.com/products/baby005/index.htm">
</map></body>
</html>
Thanks in advance I'm having some problems with a drop down menu appearing 'behind' the content below it even though it is absolutely positioned and has a higher z-index. You can see an example here of what I am talking about. If you look at it in Firefox vs IE7 you will see what I am talking about. Currently the 'body' of my page is broken into 2 columns ('col_left', 'col_right'). Each are floated in their respective direction and each has a relative position. Each also contains a single (for the moment) 'pagelet' div. Eventually this will be a drag & drop app for users to add/edit/remove these various 'pagelets' and position them to their liking on the page. I found that by removing the relative position style from the 'col_left' and 'col_right' elements as well as from the 'pagelet_head' element will make my drop down menu's appear the way they should. Unfortunately all those elements have to have the style of relative position. If anyone has any suggestions I'd love to hear them as I'm a bit perplexed by all this considering the drop downs have a much higher z-index than anything else. All my code is below. Thanks for any help! Code: * { margin: 0; padding: 0; border: none; }
body { padding: 15px 20px 0; color: #777; background: #e3e3e3 url(../images/bg_header.gif) repeat-x 0 0; font: 12px "Tahoma", Verdana, Arial, Helvetica, sans-serif; }
ul { list-style: none; }
input, textarea, select { padding: 5px; background: #fff url(../images/bg_form.gif) repeat-x top left; border: 1px solid #777; font: 12px "Tahoma", Verdana, Arial, Helvetica, sans-serif; }
input.check { padding: 0; background: none; border: none; }
table { border-collapse: collapse; border-spacing: 0; }
a:hover { text-decoration: none; }
:focus { outline: none; }
#head { margin: 0 auto 15px; width: 950px; height: 55px; }
#head img { display: block; float: left; }
#head p { float: right; color: #999; font: 11px Verdana, Arial, Helvetica, sans-serif; }
#head a { color: #666; }
#head span { margin: 0 5px; }
#nav { margin: 0 auto; width: 950px; }
#nav li { margin-right: 5px; height: 30px; display: inline; float: left; position: relative; background: url(../images/nav_bg_left.gif) no-repeat 0 0; }
#nav li span { padding: 5px 13px 0; height: 25px; display: block; background: url(../images/nav_bg_right.gif) no-repeat 100% 0; }
#nav li a { color: #666; font-size: 14px; text-decoration: none; }
#nav li a:hover { text-decoration: underline; }
#nav li a.drop_down { margin-left: 5px; }
#nav li.active, #nav li.temp { background-position: 0 -30px; }
#nav li.active span, #nav li.temp span { background-position: 100% -30px; }
#nav li.active ul, #nav li.temp ul { background: #e3e3e3; }
#nav ul { padding: 12px 12px 2px; width: 150px; position: absolute; top: 30px; left: 0; z-index: 2000; background: #ccc; border: 1px solid #666; border-width: 0 1px 1px; }
#nav ul li { margin: 0 0 10px; padding-left: 14px; height: auto; display: block; float: none; background: url(../images/icon_arrow.gif) no-repeat 0 4px; }
#nav ul li a { font-size: 12px; text-decoration: underline; }
#nav ul li a:hover { text-decoration: none; }
#col_wrap { margin: 0 auto; padding: 20px; width: 950px; }
#col_left { width: 460px; display: inline; float: left; position: relative; }
#col_right { width: 460px; display: inline; float: right; position: relative; }
.pagelet { margin-bottom: 10px; width: 460px; display: block; }
.pagelet_head { padding: 8px 13px 0; width: 434px; height: 22px; position: relative; background: url(../images/bg_pagelet_header.gif) no-repeat 0 0; }
.pagelet_head h1 { display: inline; float: left; color: #fff; font-size: 12px; }
.pagelet_head_options { display: inline; float: right; }
.pagelet_head_options ul { text-align: right; }
.pagelet_head_options li { margin-left: 10px; display: inline; float: left; }
.pagelet_head_options li a:hover { background-position: 0 -12px; }
.pagelet_head_options a.pagelet_drop_down { width: 13px; height: 12px; display: block; background: url(../images/btn_pagelet_drop_down.gif) no-repeat 0 0; }
.pagelet_head_options a.pagelet_minimize { width: 13px; height: 12px; display: block; background: url(../images/btn_pagelet_minimize.gif) no-repeat 0 0; }
.pagelet_head_options a.pagelet_close { width: 13px; height: 12px; display: block; background: url(../images/btn_pagelet_close.gif) no-repeat 0 0; }
.head_red { background-position: 0 0; }
.head_orange { background-position: 0 -30px; }
.head_yellow { background-position: 0 -60px; }
.head_light_green { background-position: 0 -90px; }
.head_dark_green { background-position: 0 -120px; }
.head_blue { background-position: 0 -150px; }
.head_grey { background-position: 0 -180px; }
.pagelet_content { width: 458px; height: 200px; background: #fff; border: 1px solid #cdcdcd; border-width: 0 1px 1px; }
.pagelet_shadow { display: block; }
.clear:after { height: 0; display: block; clear: both; visibility: hidden; content: "."; }
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=UTF-8" /> <title>test</title> <link rel="stylesheet" type="text/css" media="all" href="css/styles.css" /> <script type="text/javascript" language="javascript" src="js/mootools_1.11.js"></script> <script type="text/javascript" language="javascript" src="js/functions.js"></script> </head> <body> <div id="head" class="clear"> <img src="images/placeholder_logo.gif" alt="Logo" width="447" height="55" /> <p><a href="#" title="Administration">Administration</a><span>|</span><a href="#" title="Settings">Settings</a><span>|</span><a href="#" title="Logout">Logout</a></p> </div> <ul id="nav" class="clear"> <li class="active"> <span><a href="#">Link</a></span> </li> <li> <span><a href="#">Link 2</a><a href="#" class="drop_down"><img src="images/btn_nav_drop_down.gif" alt="More Options" /></a></span> <ul> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link</a></li> </ul> </li> <li> <span><a href="#">Link 3</a><a href="#" class="drop_down"><img src="images/btn_nav_drop_down.gif" alt="More Options" /></a></span> <ul> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link</a></li> </ul> </li> <li> <span><a href="#">Link 4</a></span> </li> <li> <span><a href="#">Link 5</a></span> </li> </ul> <div id="col_wrap" class="clear"> <div id="col_left"> <div class="pagelet"> <div class="pagelet_head head_red clear"> <h1>Pagelet Title</h1> <div class="pagelet_head_options"> <ul class="clear"> <li><a href="#" title="Display Options" class="pagelet_drop_down"></a></li> <li><a href="#" title="Minimize Pagelet" class="pagelet_minimize"></a></li> <li><a href="#" title="Close Pagelet" class="pagelet_close"></a></li> </ul> </div> </div> <div class="pagelet_content"></div> <img src="images/shadow_pagelet_bottom.gif" alt="Shadow" width="460" height="10" class="pagelet_shadow" /> </div> </div> <div id="col_right"> <div class="pagelet"> <div class="pagelet_head head_red clear"> <h1>Pagelet Title</h1> <div class="pagelet_head_options"> <ul class="clear"> <li><a href="#" title="Display Options" class="pagelet_drop_down"></a></li> <li><a href="#" title="Minimize Pagelet" class="pagelet_minimize"></a></li> <li><a href="#" title="Close Pagelet" class="pagelet_close"></a></li> </ul> </div> </div> <div class="pagelet_content"></div> <img src="images/shadow_pagelet_bottom.gif" alt="Shadow" width="460" height="10" class="pagelet_shadow" /> </div> </div> </div> </body> </html> Ok here is the problem - There was this website that People used for information and reference - sometimes it would work and sometimes it was down. In fear of it being down permanently I saved it to my computer. This website was - http://hero.blogyx.com/ . And just after a week of saving it to my computer it went down. ( I think the whole website did. ) it was important for some people who played the game. ( Hero online )... i decided to Make my own fansite that had the information. I put in this chart that I imported from that website... but when ever people look at it - it comes out weird. This is what I mean - http://heroonline.synthasite.com/all-quests.php The buttons come out on the bottom, and the text is always to the top... I want the text to be below the buttons ( Like this ) This is the full code ( if anyone wants to look at it ), Most of it is on my website ... not sure if I am doing this correctly http://www.fileshost.com/en/file/625...nline-txt.html Keep in mind i'm a noob so Please help me with the simplest of words... Thanks in advance In IE6 and FF, my page prints just fine. In IE7, depending on the environment, it either prints next to nothing or a paragraph of text. Either way, it's missing about 2-3 pages of content. I've scoured online and can't find any fixes. Any assistance would be much appreciated. I am a novice web admin. I am having an issue with placing a sign up form on my web site. It look good in IE8 or FF, but anything older (IE7) it looks horrible. See Attachments. Here is the code that I have: <ul class="site-nav2"> <p> </p> <FORM "ACTION="https://app.expressemailmarketing.com/Survey.aspx?SFID=75036" METHOD="POST"> <div align="center"><span class="style6 style5"> <FONT FACE="arial, helvetica">Sign up for our Mailing List </FONT></span> </span><BR> <input type="TEXT" name="email" /> <BR> <INPUT TYPE="IMAGE" SRC="images/sign_up.gif" ALIGN="ABSMIDDLE" BORDER="0" /> <INPUT TYPE="HIDDEN" NAME="SkipSurvey" VALUE="FALSE" /> </div> </FORM> </ul> Here is what I have for that site-nav2 CSS: .site-nav2 { position:absolute; right:10px; top:519px; width:234px; height: 111px; visibility: visible; overflow: visible; border: 0; border-width: 0; background-image: url(images/signup.png); } .site-nav2 li { font-family:"Arial Narrow", Arial, Helvetica, sans-serif; font-weight:bold; font-size:12pt; line-height:normal; text-transform:lowercase; color: #000000; } .site-nav2 li a { text-decoration:none; color:#917E65; padding-left:36px; background-repeat: no-repeat; background-position: left 7px; } .site-nav2 li a:hover, .site-nav2 li a.act { color:#A43812; background-repeat: no-repeat; background-position: left 7px; background-image:url(images/signup.jpg) } I have setup a basic pop up on a company test page that we are working with and the pop up only includes a link to open a new window with info. What I'm looking for is the html code for the link (image src) to close the pop up window when it's clicked on. I know that you can open a window off clicking the X or close button for the browser. I have yet to see code for an "a href" link to close the window. I would really appreciate any help on finding out how to pull this off. Thank so much. Mathew Shade Searcy Hi all, I had recently made the pages for a website. The site works fine in IE6 and IE 7 but in IE 8 the page jumps left and right around 7-10 pixels while browsing. The same happens with Mozilla Firefox 3.0.11 also. I had designed the layout in tables however used a wrapper div tag to align my site at center. If I keep the site left align there is no jump. Also i had used div tags within td tags to create menu using ul and li tags. Can the use of divs be a reason for that jump. Please help if you had already faced this issue. Sanjay How do I make my frameset a fixed size... you can change the leftnav and topnav size within the browser.. is there a day to set a default size.. take a look http://www.pfrieme-stumpe.de/ thx in advance Matt The project I have been working on is using the 'Cooper' font. I have noticed that the 'Cooper' font is not installed on a few of the computers I have tested the site on. What can I do to insure that the webpage is viewed the way I intended it to be viewed? Is there a work around to this issue? or do I need to use a pre-installed font? I had a graphics designer create an image for a background web page. The dimensions are 950x2000 at 72 DPI. I used the table tag with the background attribute and set the table width to 950, but when I veiw it in the browser, the image is substationally magnified. I tried it in IE 7, IE8, Firefox and Safari, and at different screen resolutions, but it still comes up magnified. If anyone knows what is happening, please let me know. Thanks I am a technician for a local school district and I'm building a simple website that will provide teacher's specified web links for students to be able to access with ease. Making this website I used photoshop to create a layout for the page and used image mapping to create links on the image that I had already placed the text on. Along with that I used absolute position to place an iframe in a designated spot on the page. That all has much of nothing to do with my problem but just thought I give some kind of visual. To start things off, I've never really delved into the options available with Iframes. My boss has asked me to make a way to possibly anchor the iframe's page viewed upon opening to be for a certain grade. So say for instance a 3rd grader (on a 3rd grade student computer) clicked the link to the website that would be on their desktop. When IE pops up that 3rd grader would immediately see the 3rd Grade weblinks in the Iframe instead of seeing the homepage. Is there some kind of code I could add to the shortcut or to the html file to make this happen? Thanks in advance, this being my first post, these forums look to be very helpful and I hope to become a frequent user of this site. Im working on a website for my city City of Crescent Springs And im having an issue with the upcomming events div. i cannot get it to stretch to the footer Any help? I have an .asp page and i am trying it to be cross compatible. The link works in IE page is http://www.domainname.com/DownloadCe...llfillment.asp the link on page is http://www.domainname.com/digitaldownload/filename.zip but for some reason in Firefox the link displays as http://www.domainname.com/downloadce...d\filename.zip Any help is appreciated http://www.americancreek.com/index.p...d=37&Itemid=61 Picture gallery link does not work. It is an .swf file. When i test it out in flash, it works fine. But when I insert the .swf into the website, the link does not work. |
|||||||