|
HTML - Cant Fix Break Between Image And H2
hey guys, i am using the following 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 content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Untitled 1</title> <link href="style/style.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="menu"> <table cellpadding="0" cellspacing="0"> <tr> <td><img src="images/bar_spacer_43.png" alt=""/></td> <td><a class="rhome" href="#"> </a></td> <td><a class="rdesign" href="#"> </a></td> <td><a class="rpricing" href="#"> </a></td> <td><a class="rgallery" href="#"> </a></td> <td><a class="rhosting" href="#"> </a></td> <td><a class="rabout" href="#"> </a></td> <td><a class="rcontact" href="#"> </a></td> <td><img src="images/bar_spacer_42.png" alt=""/></td> </tr> </table> </div> <div id="contentarea"> <div id="content"><h2>Welcome to the newly redesigned DigiSiteDesigns.com!</h2> <p>We are currently in the process of updating content, so please bear with us! In the meantime if you have any questions, please contact me at: <a href="bryan@digisitedesigns.com">bryan@digisitedesigns.com!</a></p> </div> </div> <div id="footer"> </div> </div> </body> </html> which yields the following: http://img137.imageshack.us/i/helpv.jpg/ how do i get rid of the gap between the navbar and the heading? (circled in red) thanks! Similar TutorialsOk, so here is the problem, i am working on my page, and i wanted to place an image of a home for sale sign on the page and end in a checkerboard divider, and wrap my text around it... everything looked great until i got to the bottom of the page, then i realized my footer was shifted way right, and so was my checkerboard... what did i do wrong? http://www.budgetbathusa.com/real-estate-remodel.php here is the relevent code... <img style="float:left;" src="http://budgetbathusa.com/images/real_estate_remodel2.jpg"> <? include('./includes/contact_form.inc.php'); ?> <img style="float:left;" src="http://budgetbathusa.com/images/sidebar.jpg"> <center><h2>Selling Your Home? We Can Help.</h3></center> <p> This product is for all of you who are in the process of selling your home, and would like to get your home off the market as fast as possible. Everyone knows that the two rooms that will sell your home are kitchens and baths, but what most people dont know is that the average price to remodel those rooms are $57,232 for kitchens, and $15,899 for bathrooms. Those figures are not fictitious either, they are pulled from national average costs at Remodeling Magazine's own figures (you can see those figures at Remodeling magazines <a href="http://www.remodeling.hw.net/2008/costvsvalue/division/south-atlantic.aspx">Cost vs. Value webpage.)</a></p> <p> As you already know, home staging requires moving furniture, painting walls, and other miscellaneous activities to make your home more attractive to prospective buyers, but there are many other remodeling projects you need to seriously consider. One of those is that bathroom you never like showing to your guests, or that bathroom that isn't that bad, but has that mildew on the grout, and fixtures from 1957. You have two options...<ol> <li>You can do a total remodel, that will cost almost $16,000 and sell your home quickly, and for more than you were asking for. (but who has an extra $16,000 laying around!)</li> <li>Or you can choose from our A la Carte list of bathroom remodeling services, that will cheaply, and effectively remodel your bathroom for a fraction of the cost of a custom remodeling job, <b>and</b> be of a better quality than a bathfitter bathtub liner.</li> <h2>The List:</h2> <p> So we have brought you a list of different services at the lowest prices we can offer. You get to choose what you need, and not get anything extra. All we require is that you pick $3000 dollars worth of remodeling. and we will be happy to come out and help your bathroom out. These prices are non-negotiable, and are a great deal just by themselves. Then fill out our contact form, or give us a call, and we will write up the contract, and do the work.</p> <ul><font size="4" color="#5eadfd"><b> <li>regrout bathroom (silicone included): $2.75 per square foot</li> <li>re-silicone bathtub without grout: $125</li> <li>Replace Shower Door: $750</li> <li>Replace Vanity and Vanity Countertop (Faucet included): $800 {upgrades available}</li> <li>Replace over the toilette Storage Unit: $250</li> <li>Replace Medicine Cabinet: $250</li> <li>Replace Toilette: $400</li> <li>Replace Trim: *</li> <li>Glass Shelving Addition: $100</li> <li>Repaint Bathroom: $600 (Price based off of an 8x5 bathroom)</li> <li>Upgrade lighting: $250 per light</li> <li>Change faceplates: $5 per plate</li> <li>Upgrade Sink Faucet: $375</li> <li>Upgrade Shower Faucet: *</li> <li>Change Toilette Seat: $150</li> <li>Replace Window $475</li> <li>Plumbing Inspection: $100</li> <li>Replace Sink Trap $250</li> <li>Tub Refinishing: $900 per tub.</li></font></b></ul> <p> <b>* :</b> Prices vary greatly depending on different situations, just give us a call and we can work it out. <p> <b>Note:</b> Most prices are dependent upon an allowance for material, if you would like something nicer, we will gladly upgrade for you</p> <img src="/images/checker_hr_24.gif" width="744" height="24" style="float:left;" alt="----------" /> <br /> <? include_once('./includes/footer.php'); ?> Is it possible to just have "no wrapping" on divs? For example if we have a div used for a Wrapper for all of the contents, can we make it just so that the div will extend past the screen's width if it needs to ? Please take a look at my site: www.cteaguedesign.com and tell me if anything can be done about the bad break on the bottom of the table. I've tried resizing the cell, the image, and the surrounding information, but it won't seem to settle. On different browsers, it even switches being too high and too low. Any clue? Bottom image pulls up nicely on FF and Safari. However there is a thin line that breaks the 2 background images. Try on IE9 http://www.seahosting.net Please help have a jsp called Test.jsp. Inside it, there is a iframe which import another jsp as follows: Test.jsp <html> ................ <body> this is the test ................ <iframe src="iframe.jsp"> ....... </body> </html> Inside the iframe.jsp I check for session. If session is expired, it forward to some other page say main.jsp as follows: iframe.jsp: <html> ............... // if the requested session is invalid if(!request.isRequestedSessionIdValid()) { RequestDispatcher rd = getServletContext().getRequestDispatcher("main.jsp"); rd.forward(request, response); } ......... </html> Now the problem is... the main.jsp is opened to the IFRAME inside. How I can remove that IFRAME It is very urgent Thanks in advance Ranjan Yeng See printscreen attached.. (bottom right corner...) and http://www.navigationrus.com/product...76a6b3ebe5b97f Been trying to figure it for a day... I am new to HTML coding I am trying to remove the line break, after my header and not sure how to do it. Here is my code: <h5 style="background-color:red;"><a href="java script:alert('Find & Click on your old Printer' + '\n' + 'Select '+ 'OPEN' + ' ...Do you want to open or save this file?' + '\n' + 'Select ' + 'RUN' + ' ...The Publisher could not be verified.')">Click Here for Directions on REMOVING your printer</a></h5> I would like to remove the blank line that the header creates. Thank you I need a fool-proof method of making a page break for printing purposes. Nice clean break. I tried using the CSS method, but its doenst work in all browswerrs and is very finicky. Any suggestions? Hi everyone, I'm creating a fan site for South Park, and I'm attempting to create a kind of layout type thing. I'm not new to HTML, but I'm not too experienced with tables and layouts. So, anywho, there is a break in between my banner image and the table. I want it to look like the banner is part of the table, but I'm not succeeding. I REALLY need help. Could someone PLEEEEEEEAAAAAASE help me?!?!? URL: http://www.freewebs.com/patrickduffylegland/index.htm my site is REALLY rough right now. I just started. If anyone knows, I would like to make the light blue part in the table separate from the dark blue part. Like the light blue part would be a different table if anyone knows how to do that. It would just make it easier since the light blue part will be the menu. Heres my HTML code so far: <html> <head> <title>Patrick Duffy Leg Land - Keeping the World Safe From Crab People since 2007</title> </head> <body> &nbs p; <img src="http://www.freewebs.com/patrickduffylegland/top_banner.png"> <table align="center" width="780" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="72" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="5" background="http://www.freewebs.com/patrickduffylegland/table_bg.png"> <tr> <td class="espacio2"> <font color="#CCCCCC" face="verdana" size=1><br></font> </td> </tr> </table> </td> </tr> Hello all, Thats how my page looks: http://img17.imageshack.us/img17/782/screenshotoey.png But after windows resize top bar "breaks": http://img94.imageshack.us/img94/858...enshot1ltq.png The google.com just iframe. Look at attached files, try resize browser windows and see what about i'm talking about. Please view in IE and you will notice that the "product descriptions" and "Available Options" are on the top left. FF display its rightly on the bottom of the image.. http://janlevin.com.my/shop/product_...roducts_id=112 Any idea? When I set a div overflow on a sentence that is in a set width...if a word is too big it cuts off the whole word. Is there a way to break by character instead of word? Before I get totally flamed, I'm sure you get this question almost daily. However, I'm aware how to fix it, however I can't figure out why it's not working. As you can see above, the "test" div needs to be beside the "Hosting" div. So move the bottom one to the right of the first one. But how, is the question. Here's the HTML: HTML Code: <div id="plans">
<center><h2>Hosting Plan #1</h2></center><br />
<img src="images/arrow_right.gif" /> <b>10MB</b> Disk Space<br />
<img src="images/arrow_right.gif" /> <b>Unlimited</b> Data Transfer<br />
<img src="images/arrow_right.gif" /> <b>Unlimited</b> Domains, FTP, MySQL accounts<br />
<img src="images/arrow_right.gif" /> <b>2</b> E-Mail accounts<br />
<img src="images/arrow_right.gif" /> <b>Just $0.99/mo or $10/yr</b><br /><br />
<center><a class="order_button" href="order.php">Order Now!</a></center>
</div>
<div id="plans">
test
</div>
I've tried to put that block of code into another <div> to even it out all out with display: inline, but that doesn't work. I am also unable to use spans, although that would be the obvious route. So, does anybody have a solution? Thanks! So i'm helping to work on a website but one issue that has occurred is with tables...here's the issue visually: We don't want that break...it only shows up in internet Explorer (no problem in Firefox). Here is the coding: <body> <div class="divCenteredStuff"> <div><img src="GetInvolvedHeader.jpg" alt="Branches" border="0" usemap="#Map2" /> <map name="Map2" id="Map2"> <area shape="rect" coords="632,136,764,186" href="index.html" alt="Home" /> </map> </div> <div><img src="Banners/Banner6.jpg" alt="Banner" border="0" usemap="#MapMapMap" /> Any tips? THANKS! Background: I have created an simple web browser using javascript and an IFRAME. The contents of the website displayed in the IFRAME have a chat program and message board that my students don't need access to. Problem: I need to remove the functionality of these two applications from the browswer I've created. Since the webpage is loaded into my IFRAME, is there someway I can add a script or string replacement function that would change the URL in the IFRAME to a null value? Perhaps I'm wording this incorrectly, and would explain why I can't find information on it? Any help would be appreciated! Hi trying to throw down a couple of buttons along a line, but for some reason my second button gets put down to a second line instead of going right beside the first one. I changed over the <div> tags in the recommended button code to <span> in an attempt to stop the line break, but it persisted. Here is the url for test page: http://yournukes.com/PictureFlow4/test.html And specifically here is the code using for the buttons (I know they are style and there is a css section, but I believe this is an html/semantic question): <style> #rollover a { background: url(http://www.yournukes.com/tester1.gif) 0 0 no-repeat; padding-left: 20px; padding-top: 10px; width: 130px; height: 24px; vertical-align: middle; font-size: 14px; color: #000000; display: block; text-decoration: none; } #rollover a:hover { background-position: -150px 0; color: #FFFFFF; } </style><span id="rollover"><a href="#"></a></span><style> #rollover1 a { background: url(http://www.yournukes.com/parks.gif) 0 0 no-repeat; padding-left: 20px; padding-top: 10px; width: 130px; height: 24px; vertical-align: middle; font-size: 14px; color: #000000; display: block; text-decoration: none; } #rollover1 a:hover { background-position: -150px 0; color: #FFFFFF; }</style> <span id="rollover1"><a href="#"></a></span> ...BUT it might make more sense to view the code on the page to see it in context... Thanks so much... I have a way of complicating simple questions... I know "<br>" causes a line break outside of a string, but how can I insert one INSIDE a string? Ex: <textarea value="" > example text <LINE BREAK> more example text </textarea> in the past when ever I have string that is longer than the width specified in the <td>it always automatically line breaked for me. But now I am encountering an issue with the <td> stop auto line breaking, and instead just increase the width of the table to make the string fit in 1 line. if anyone know whats possibly causing this problem please reply, any thing suggestion is greatly appreciated. Thanks Hi all -- I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide. I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line. I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed. Help! How do I get rid of this white space but still keep the link on the image?? [I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having] Thanks in advance! //kl PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner. CSS: Code: <style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
</head>
Nav Banner: NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space... Code: <body class="oneColFixCtr"> <!-- MAIN NAVIGATION BANNER --> <!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br /> So in January 2006 I posted a question about "making two buttons in one" 3 years and 5 months later i am happy to announce that I have found a solution. Ok, so no I have not spent the last three years looking, but the need for one came around again yesterday so I revisited the project. All I needed was "simple" image toggle. Image 'A' click it once it changes to image 'B' click it again it changes back to image 'A' All the "image toggle" codes I could find were extremely complex. I thought I had finally found one, it wasn't perfect, but it was the smallest and most basic thing I could find. HTML Code: <html>
<head>
<style type="text/css">
.on {background-image:url(playlist_btn.png); background-repeat:no-repeat;}
.off {background-image:url(playlist_btn_x.png); background-repeat:no-repeat;}
</style>
<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>
</head>
<body>
<div id="onoff" class="playlist_btn"><img src="blank.gif" width="50 height="50" onclick="togglestyle(onoff)"></div>
</body>
</html>
I tested it, it worked, so I considered problem solved. I placed it in my page and nothing. Turns out it wont work with a doc type - so it's useless. Other problems, I'm not big on using "blank gif's" unless I have to, if you want multiple image toggles you need a new JS function for each one, and two lines of css as well. And, though I rarely use image rollovers anymore, it would certainly not be possible in this method. So it was back to the drawing board. Well, I had actually already found the solution a few minuets prior to finding out that the above code is so good. I had coded a button that on rollover shows a tooltip, when you click the button, the text in the tool tip, changes, chick again and it reverts. All done with a simple showHide javascript function, that i am finfing out has many uses. here is the awesome code: Code:
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}
I wont take credit for the showHide code, but I will take credit for the hideShow portion, obviously a monkey could have coded the revers, but iot does make it that much more universal. As the original code was designed to show something that was hidden, add the revers to hide something that is showing and it's perfect. Now I will take a moment to say, though I have yet to find a problem with the code, it seems to work in most browsers, firefox, ie, safari, and validates for WC3 - In sure it has it's flaws. Until now, to show and hide divs I had used the MM_showHideLayers JavaScript function, which by default used the visibility style. It is of course a good script, and has many uses, it's not very big, but it is somewhat complex. The other thing to think about is that invisible objects still take up space. That's what is cool about the display:none: style, is that is not only invisible but it doesn't take up space. So here is how I used the above to JavaScript to make a simple onclick image toggle: HTML Code: <img id="on" src="on.png" width="50" height="50" onClick="javascript:hideShow('on'); javascript:showHide('off')" alt="on">
<img id="off" src="off.png" width="50" height="50" onClick="javascript:hideShow('off'); javascript:showHide('plus')" style="display:none;" alt="off">
Cool huh? Now this example does not have a rollover either, but since it uses to individual images and is not replacing one image wioth another you could easily apply a rollover to both images. But, hold on, look at the above code, isn't that essentially a rollover? Change the first onClick to onMouseOver and the second to onMouseOut and look at that a 'brand new' method for mouseovers. So lets take a look at this for a second, and compare MM_swapImage to this new hideShow method. As far as CSS rollovers I definitely prefer them to the MM_swapImage method, as they use a minimal amount of code. However they actually take a lot of math, construction the buttons is somewhat tedious, because css buttons use 1 image and change it's position, to work well you have to use a "blank.gif" and the the css can really add up if you have a lot of buttons: Also, you can't go directly to a button in the document, you have to fish through the css to make any adjustments. But they are fast, they don't need to be preloaded and... they are pretty cool. But anyway, swapImage and hideShow... The left is the MM_swapImage method. Now when you use the swapImage js you also have to use MM_swapImgRestore, MM_findObj, MM_preloadImages. You don't have to use the preload script but it does make thing work faster... supposedly, but that requires a onload script in the body tag, and if you have a lot of rollovers your body tag can get really long really quick. So what are the advantages, well we know for sure it works, and you only need on image in the document, however actualy having the image you are "swapping" too actually in the document can add functionality. So as you can see, on the right, the showHide method is, in total code, much smaller. True you do need to use two images, so the total code in the body is longer but, it's more than evened out bu the minimal JavaScript, and I think it's worth it. You don't need to use a preloader, you have full control over both images, the up and over state, and unlike the swapImage method, though it's rare you would need to, your up and over images can actually be different sizes, which is kind of cool. So here's the basic code for a rollover: HTML Code: <img id="up" src="up.png" width="50" height="50" onMouseOver="javascript:hideShow('up'); javascript:showHide('over')" alt="up">
<a href="http://google.com"><img id="over" src="over.png" width="50" height="50" onMouseOut="javascript:hideShow('over'); javascript:showHide('up')" style="display:none;" alt="over" border="0"></a>
To add a link the button you just apply it to the "over state" image. And unlike swapImage, though it is overkill, you can also add a "downstate" image quite easily. So, back to the on/off button here is how you would code it using showHide with rollovers. HTML Code: <img id="on" src="on.png" width="50" height="50" onMouseOver="javascript:hideShow('on'); javascript:showHide('onover')" alt="on">
<img id="onover" src="on_over.png" width="50" height="50" onMouseOut="javascript:hideShow('onover'); javascript:showHide('on')" onClick="javascript:hideShow('onover'); javascript:showHide('offover')" style="display:none;" alt="onover">
<img id="off" src="off.png" width="50" height="50" onMouseOver="javascript:hideShow('off'); javascript:showHide('offover')" style="display:none;" alt="off">
<img id="offover" src="off_over.png" width="50" height="50" style="display:none;" onMouseout="javascript:hideShow('offover'); javascript:showHide('off')" onClick="javascript:hideShow('onover'); javascript:showHide('off')"alt="offover">
So here is what is going on: you have the upstate on.png image, when you mouse over it on.png is hidden and on_over.png is displayed. When you click on_over.png it is hidden and off_over.png is display, mouse off it and off.png is displayed. Make scene? Now be aware, when you click, you are also in a scene "mousing off" so some flickering can occur. Firefox handles everything pretty well, IE and Safari not so much. When you click the on_over.png the click tells it to hide on_over.png and show the off_over.png, at the same time the mouseoff tells it to hide on_over.png and show the on.png. So fortunately the toggle with rollovers isn't perfect, but perhaps some more tweaking of the code or maybe, in this case swapImage would work better to do the rollovers... But all in all I'd say its a solid concept. If you feel compiled to do so, reply with any comments, concerns or flaws you see. |
|||||||