|
HTML - Divs Not Acting Like They Should!
Similar TutorialsHey I have been using some AJAX code and my <p></p> is acting like <br /> see http://www.walterdecantelupe.co.uk/new/index2.html I can't see why. please help! The html is 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Walter de Cantelupe Inn, Kempsey ~ Worcestershire</title> </head> <body> <p><strong>The Walter de Cantelupe</strong> is situated in the village of Kempsey, just 4 miles from <a href="http://www.visitworcester.com/" title="Visit Worcester">Worcester</a> City centre on the A38, The Walter de Cantelupe is the perfect place for lunches, evening meals or a room for the night. Large open log fire, plush comfy furnishings, paved walled Garden - an Inn for all seasons.<br /> This privately owned & run free house is understated in appearance yet embraces a soul brought to life by the Landlord & the staff. The house, partly dating back to the 17th Century, retains original features such as exposed beams & roaring log fire in the winter months. One of the guest bedrooms is in the oldest part of the Inn and is said to be haunted.</p> <p>The food on offer combines both traditioanl pub dining as well as imaginative and exciting comtemporary creations all prepared in the pub's own kitchen, using as much regional, seasonal and traditional produce as possible.</p> <p>Great emphasis is also placed on top-rated British cask conditioned ales. There are normally four hand-pulled beers available featuring at least one guest ale. The wine list is small but carefully chosen reflecting the knowledge and interest of the landlord. There is even wine from the local award winning vinyards.</p> <p>"The Landlord Martin is the finest of hosts, whose attention to beer keeping, providing superb food and ensuring a great atmosphere are second to none. All this and great value, what more can you ask for in a wonderful period, intimate pub." </p> <h3>A small, old village inn keeping the genuine character of an English Public House - good food & a friendly welcome...</h3> <p><a href="http://walterdecantelupe.co.uk/Joomla_Folder/component/option,com_forme/Itemid,35/">Book a Table</a> ~ <a href="http://walterdecantelupe.co.uk/Joomla_Folder/component/option,com_forme/fid,4/Itemid,56/">Room Booking</a> </p> <h3 style="word-spacing: 5px">Paella Party</h3> <p>The assembled crowd could be forgiven for thinking that they were in some Spanish village square during the last paella party at the Inn. Well-wishers believed they remembered hearing the strains of flamenco music. If not actual reality, that was probably the only authentic element missing from the sun-blissed day. And was it hot ? Hardly a cloud in the sky. For some wide-brimmed hats and even a knotted hankerchief were seen gracing thinly thatched heads. Perfect... <strong>Click <a href="http://walterdecantelupe.co.uk/Joomla_Folder/content/view/30/69/" title="Paella Party">here</a> to read on...</strong> </p> <p>Tel. 01905 820572 <a href="mailto:martin@walterdecantelupe.co.uk">martin@walterdecantelupe.co.uk</a> Main Road, Kempsey, Worcester WR5 3NA</p> </body> </html> The CSS is Code: * {
margin: 0;
padding: 0;
}
body {
background: #506d42 url(images/bg.gif) repeat-x;
font-family: "Times New Roman", Times, serif;
font-size: 1em;
line-height: 17px;
color: #333;
}
a {
text-decoration: none;
color: #157D6A;
}
a:hover {
text-decoration: underline;
color: #37AB96;
}
#wrap {
margin: 0 auto;
width: 935px;
}
#header {
height: 130px;
background: #fff url(images/walter_header.gif) no-repeat left;
}
#header h1 {
font-size: 28px;
letter-spacing: 0px;
padding: 23px 0 0 20px;
color: #506d42;
}
#header h1 a {
color: #37AB96;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
}
#header h1 a:hover {
color: #fff;
}
#header h2 {
font-size: 19px;
color: #fff;
padding: 5px 0 0 20px;
letter-spacing: -1px;
font-weight: 100;
}
#header p {
font-size: 12px;
letter-spacing: 0px;
padding: 23px 0 0 20px;
color: #506d42;
}
.slidedivtop {
border-top:2px solid #ffe385;
color:#933;
font-style:italic;
font-weight:bolder;
font-size:2.1em;
text-align:left;
letter-spacing:-1px;
font-family:"Times New Roman", Times, serif;
padding-bottom:0;
padding-top:5px;
margin-bottom:0;
text-transform:lowercase;
line-height:normal;
}
.slidediv {
background:#e9cf77 url(img/bottom.gif) no-repeat left bottom;
border-top:0 solid #ffe385;
color:#444;
margin-bottom:0;
padding:20px 20px 0;
}
#menu {
height: 70px;
line-height: 70px;
background: #fff url(images/menu.gif) no-repeat left;
padding-left: 10px;
padding-right: 10px;
}
#menudrop h1.drop {
font-size: 28px;
letter-spacing: 0px;
padding-top:3px;
text-align:center;
color: #506d42;
}
#menudrop {
height: 46px;
line-height: 70px;
background: #506d42 url(images/topdrop.gif) no-repeat left;
padding-left: 10px;
padding-right: 10px;
}
.menupadding {
padding-left: 9px;
display: block;
z-index:auto;
}
#menu ul {
list-style-type: none;
padding-left: 40px;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
padding: 0 20px 0 0;
text-decoration: none;
font-weight: 100;
font-size: 14px;
}
#menu ul li a:hover {
color: #37AB96;
text-decoration: none;
}
#content {
background: #506d42 url(images/content.gif) repeat-y;
padding: 0 20px 20px 20px;
}
#content p{
line-height:normal;
}
#contentdrop {
background: #506d42 url(images/contentdrop.gif) repeat-y;
padding: 0 20px 20px 20px;
}
.right {
float: left;
width: 630px;
text-align: justify;
padding-left:15px;
padding-right:15px;
padding-top:10px;
}
.right h2 {
font-size: 18px;
font-weight: 100;
padding: 15px 0 7px 0;
}
.right h2 a {
text-decoration: none;
}
.right h2 a:hover {
color: #37AB96;
}
.left {
float: right;
width: 230px;
padding-top: 10px;
}
.left h2 {
margin: 10px 0 0 0;
padding-left: 10px;
height: 24px;
line-height: 24px;
background: #111;
color: #fff;
font-size: 13px;
}
.left ul {
padding: 10px 0 15px 10px;
list-style-type: none;
}
.left ul li a {
color: #157D6A;
text-decoration: none;
font-weight: 100;
}
.left ul li a:hover {
color: #37AB96;
}
.paddingtop {
margin-top:10px;
position:relative;
}
.paddingtopbot {
margin-top:10px;
margin-bottom:15px;
position:relative;
}
.whatson {
padding: 20px 20px 20px 20px;
position:relative;
}
#bottom {
background: #fff url(images/bottom.gif) no-repeat;
padding: 17px 0;
}
#bottomdrop {
background: #506d42 url(images/bottomdrop.gif) no-repeat;
padding: 23px 0;
margin-bottom:8px;
}
#paneltop {
height: 25px;
background: url(images/paneltop.gif) no-repeat left;
padding-left:10px;
padding-top:11px;
margin-right:15px;
}
#panelcontent {
background: url(images/panelcontent.gif) repeat-y;
text-align:justify;
padding-left:11px;
padding-right:12px;
padding-bottom:5px;
margin-right:15px;
}
#panelbottom {
background: url(images/panelbottom.gif) no-repeat;
height: 5px;
margin-right:15px;
}
#footer {
text-align: center;
font-size: 11px;
}
So I found this neat tutorial (here) It was easy breezy to use it, so I did. Weird thing at Firefox is.. as soon as I replace the href="#" with a real link... The background images disappear. And only keep working when HOVERED... Even weirder (for me) is that that issue doesnt exist in the other browsers?? Could anyone take a little look? Thanks. (example here, hover over the lonely looking text please) HTML Code:
<a href="http://www.xx.nl/airless-spuitwerk" class="button" >
<div class="left"></div>
<div class="mid"><div>30% KORTING OP AL ONS AIRLESS SPUITWERK » MEER INFORMATIE</div></div>
<div class="right"></div>
</a><!-- /button -->
Code: a.button{float:left;height:31px;text-decoration:none;*cursor:pointer;}
a.button:link .left{float:left;height:48px;width:17px;background:transparent url(images/button-edge-red.png) top left;}
a.button:hover .left{float:left;height:48px;width:17px;background:transparent url(images/button-edge-red.png) bottom left;}
a.button:link .right{float:left;height:48px;width:17px;background:transparent url(images/button-edge-red.png) top right;}
a.button:hover .right{float:left;height:48px;width:17px;background:transparent url(images/button-edge-red.png) bottom right;}
a.button:link .mid{
float:left;
height:48px;
color:#fff;
font-size:14px;
font-weight:bold;
text-align:center;
background:transparent url(images/button-edge-mid-red.png) repeat-x top left;
text-shadow:0 0 1px #000;
}
a.button:hover .mid{
float:left;
height:48px;
color:#fff;
font-size:14px;
font-weight:bold;
text-align:center;
background:transparent url(images/button-edge-mid-red.png) repeat-x bottom left;
}
a.button:link .mid div{
position:relative;
top:18px;}
K so i'm new so Hi 1st of all. I'm currently doing a project for Uni and low and beghold it goes wrong on the night before the deadline. I will post the HTML, obviously the images won't load but the lines of text i've put into bold have a problem. They load fine in Firefox but whern I load them in IE they don't appear until either I scroll away and back to them or I highlight them. It seems like they momentarily change color to the back ground color. Any ideas? HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Metal Gear Solid - Metal Gear Solid 1 - Characters</TITLE> <LINK rel="stylesheet" type="text/css" href="MyStyle.css"> </HEAD> <BODY> <P><A href="home.htm"><IMG src="imgs\logo.jpg" alt="Metal Gear Solid Logo" title="Metal Gear Solid Logo"></A></P> <DIV id="header"> <STRONG>Metal Gear Solid 1 - Characters</STRONG> </DIV> <DIV id="menu"> <UL> <LI> <A href="home.htm">Home:</A> </LI> <LI> Metal Gear Solid 1: </LI> <LI> <A href="MGS1storyline.htm">Storyline</A> </LI> <LI> <A href="MGS1characters.htm">Characters</A> </LI> <LI> Metal Gear Solid 2: </LI> <LI> <A href="MGS2storyline.htm">Storyline</A> </LI> <LI> <A href="MGS2characters.htm">Characters</A> </LI> <LI> Metal Gear Solid 3: </LI> <LI> <A href="MGS3storyline.htm">Storyline</A> </LI> <LI> <A href="MGS3characters.htm">Characters</A> </LI> </UL> </DIV> <DIV id="content"> <H3>The Heroes</H3> <H4>Solid Snake</H4> <P> <IMG src="imgs\Snake.jpg" alt="Solid Snake in Metal Gear Solid 1" title=" Solid Snake in Metal Gear Solid 1"> This is Solid Snake as he appears in Metal Gear Solid 1. Snake is the ‘Hero’ in the first instalment of Metal Gear Solid, as an ex member of FOXHOUND he is pitted against his former comrades to stop a nuclear disaster. A master in both sneaking and Close-Quarters-Combat (CQC) as well as extensive weapons expert with years of fighting experience, he is the ideal choice for the mission which requires only a single unit to be sent into the fray. </P> <HR> <H4>Hal ‘Otacon’ Emmerich</H4> <P><IMG src="imgs\Otacon.jpg" alt="Hal ‘Otacon’ Emmerich in Metal Gear Solid 1" title="Hal ‘Otacon’ Emmerich in Metal Gear Solid 1"> Hal Emmerich, nicknamed Otacon, is the master engineer and chief designer of Metal Gear REX. He soon realises the peril he has put the world under after creating REX and attempts to right his wrongs by helping Snake throughout his mission. </P> <P> He nearly stopped Snake killing Sniper Wolf as he became infatuated with her and her love for the wolves, however he soon realised he had to let snake do it for the ‘Greater Good’. </P> <P>Otacon and Snake later went on to form an anti-Metal-Gear group called ‘Philanthropy’. </P> <HR> <H4>Meryl Silverburgh</H4> <P> <IMG src="imgs\Meryl.jpg" alt=" Meryl Silverburgh in Metal Gear Solid 1" title=" Meryl Silverburgh in Metal Gear Solid 1"> Meryl Silverburgh is Colonel Campbell’s niece (although she was later found to be his daughter), she was on the island as a replacement soldier for FOXHOUND but refused to revolt with the rest of the unit and was imprisoned. She became Snake’s ally after he rescued her and started to fall in love with him. </P> <P>Meryl’s part in the game is determined by how the player reacts to Ocelot’s torture, if the player submits, Meryl’s life is taken and no more is heard about her. If, however, the player resists the torture Snake ends the game riding off on a snow mobile with her. </P> <HR> <H3>The Villains</H3> <H4>Liquid Snake</H4> <P> <IMG src="imgs\Liquid.jpg" alt=" Liquid Snake in Metal Gear Solid 1" title=" Liquid Snake in Metal Gear Solid 1"> Liquid Snake is the leader of the renegade unit FOXHOUND, commander of the Genome Soldiers and is the master mind behind the whole plot. He was created genetically along with Solid Snake and Solidus Snake from the remains of Big Boss. </P> <P>He too the DARPA Chief and Kenneth Baker as hostages and was bargaining for Big Boss’ remains so he could perfect his Genome troop. </P> <P> Ultimately he fell the victim of the FOXDIE virus and died before he could kill his twin Snake. </P> <HR> <H4>Revolver Ocelot</H4> <P> <IMG src="imgs\Ocelot.jpg" alt="Revolver Ocelot in Metal Gear Solid 1" title=" Revolver Ocelot in Metal Gear Solid 1"> Ocelot played the part of Liquid’s right-hand-man, he was famed for his cowboyish dress, spurs and a set of western style revolvers. As an expert in interrogation his job was to get the launch codes out of the two hostages. However he killed one once his real identity (that of a government official) was noticed. He then later set Snake up to activate Metal Gear REX by using the PAL card. </P> <HR> <H4>Psycho Mantis</H4> <P> <IMG src="imgs\PsychoMantis.jpg" alt=" Psycho Mantis in Metal Gear Solid 1" title="Psycho Mantis in Metal Gear Solid 1"> </P> <HR> <H4>Sniper Wolf</H4> <P> <IMG src="imgs\SniperWolf.jpg" alt=" Sniper Wolf in Metal Gear Solid 1" title="Sniper Wolf in Metal Gear Solid 1"> </P> <HR> <H4>Vulcan Raven</H4> <P> <IMG src=" imgs\VulcanRaven.jpg " alt=" Vulcan Raven in Metal Gear Solid 1" title="Vulcan Raven in Metal Gear Solid 1"> </P> <HR> </DIV> <DIV id="footer"> Page created by Joe Billingham 0711795 </DIV> </BODY> </HTML> My CSS body { background-color: maroon; } #header { text-align: center; font-size: xx-large; color: black; border: 4px groove white; padding: 0%; margin: 0em 0em 1em 0em; background-color: #999999; } #content { color: black; border: 4px groove white; margin: 0em 0em 1em 0em; padding: 1%; background-color: #999999; } #content img { float: left; padding: 4px; } #footer { text-align: right; font-size: small; color: black; border: 4px groove white; margin: 0em 0em 1em 0em; margin: 0%; padding: 1%; background-color: #999999; } #menu { text-align: center; color: black; border: 4px groove white; margin: 0em 0em 1em 0em; padding: 0%; background-color: #999999; } #menu LI { display: inline; } HR { clear: both; height: 1px; width: 75%; border: 1px solid maroon; } H3 { text-align: center; } UL { list-style-type: none; list-style-position: outside; } img { border-style: none; } Thanks in advance guys and gals. Hello, I use Dreamweaver to build my sites but I am not getting anywhere with this problem. I have tried everything I can think of. It might be right under my nose and I'm not seeing it. This is a rough draft so it's not going to look that great. This is how I want it to look: http://www.rimesweekly.com/roughdraft2.html When I add more stuff on the left and right side of the table it does this: http://www.rimesweekly.com/roughdraft3.html The tables in the middle get longer and I cannot figure out what to do. I have added extra cells, taken away the table border, added the table border, made sure the tr is aligned at the top, deleted the width and height of the tr and td, etc. I'm just so confused! When I am viewing my page in Dreamweaver it looks like the way I want it. Hope ya'll can help! I just notices something strange about my site: I typically use firefox, so I never noticed it before. http://arcadefreedom.com in firefox, everything displays fine, but in ie... look at the stats boxes on the right (purple), there is a space between the title and the body of each stats box that doesnt appear in firefox. I've tried everything I can think of (and I'll be the first to admit i'm not all that great in html) to get rid of that space in IE... valign, cellspacing, cellpadding... Any ideas? Thanks! Hello, I am trying to solve a problem with my site. The banner for links in the top frame is supposed to be framed by two horizontal black lines. It appears the way it should in Safari and FireFox (both mac and PC versions) however in the PC version of IE versions 7 and under (8.0 works fine), the bottom line begins after the last part of the banner ends.....so it sticks way out to the right side of the page rather than dropping down and being flush with the left side of the page. I've tried including it in the table, making it part of its own table and leaving it as an independent image element which is how it is now. Nothing seems to work. Granted, I do not have a ton of experience with website development and was hoping someone here could let me know what I've done wrong and how to fix it. I've included an image of how it should look. The website is poizner.com The html code is below: Thanks! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Alan Poizner Photography </title> <SCRIPT LANGUAGE="JavaScript"> image1 = new Image(); image1.src = "portraits02.gif"; image2 = new Image(); image2.src = "editorial02.gif"; image3 = new Image(); image3.src = "weddings02.gif"; image4 = new Image(); image4.src = "digital02.gif"; image5 = new Image(); image5.src = "etc02.gif"; image6 = new Image(); image6.src = "contact02.gif"; // End --> </script> </HEAD> </head> <body link="white" vlink="white"> <div id=EchoTopic> <img src="topbar.gif"> <br> <table cellspacing="0" cellpadding="0" border="0" align="left"> <tr> <td valign="top"> <img src="alanpoizner.gif"> </td> <td> <img src="spacer.gif" hspace="75"> </td> <td> <a href="portraits2010/index.htm" target="mainFrame" onmouseover="image1.src='portraits02.gif';" onmouseout="image1.src='portraits01.gif';"> <img name="image1" src="portraits01.gif" border=0></a> </td> <td> <img src="divider.gif"> </td> <td> <a href="editorial/index.htm" target="mainFrame" onmouseover="image2.src='editorial02.gif';" onmouseout="image2.src='editorial01.gif';"> <img name="image2" src="editorial01.gif" border=0></a> </td> <td> <img src="divider.gif"> </td> <td> <a href="weddings2010/index.htm" target="mainFrame" onmouseover="image3.src='weddings02.gif';" onmouseout="image3.src='weddings01.gif';"> <img name="image3" src="weddings01.gif" border=0></a> </td> <td> <img src="divider.gif"> </td> <td> <a href="digital/index.htm" target="mainFrame" onmouseover="image4.src='digital02.gif';" onmouseout="image4.src='digital01.gif';"> <img name="image4" src="digital01.gif" border=0></a> </td> <td> <img src="divider.gif"> </td> <td> <a href="etc/index.htm" target="mainFrame" onmouseover="image5.src='etc02.gif';" onmouseout="image5.src='etc01.gif';"> <img name="image5" src="etc01.gif" border=0></a> </td> <td> <img src="divider.gif"> </td> <td> <a href="contact2010/index.htm" target="mainFrame" onmouseover="image6.src='contact02.gif';" onmouseout="image6.src='contact01.gif';"> <img name="image6" src="contact01.gif" border=0></a> </td> </tr> </table> <br> <img src="topbar.gif"> </body> </html> I just put this site online: http://brightfutures.ca/international It works properly in all the firefoxes and chromes, and Internet Explorer 8 and 9. The problem is that I'm losing the columns and some of the formatting when I view it in Internet Explorer 7. I'm even getting a broken image link icon! I have to look at it through an emulator (browserling), or get a coworker to send me screenshots, since I'm on a Mac. So, you can imagine, it's super hard for me to figure out how to solve this, especially since I'm not an expert on dated browser compatibility. Any idea on how I can fix this? Any help on how I can change/make some code to fix this would be awesome and really appreciated. Here's IE7: Here's IE8: I own a domain - let's say its full URL is http://www.mydomain.com. In cPanel I created a sub-domain called "dev", whose URL would be "http://dev.mydomain.com". But it can also be accessed by typing this in the address bar: "http://www.mydomain.com/dev/" I then created a folder - call it "client" - in the dev subdomain, which would give that a URL of "http://dev.mydomain.com/client/" or, as above, "http://www.mydomain.com/dev/client/" Here's the issue: On a small site I have in the client folder, no images are displayed when the URL "http://dev.mydomain.com/client/" is used. BUT they are displayed when the other URL format is used (http://www.mydomain.com/dev/client/). Furthermore, when the "http://dev.mydomain.com/client/" URL is used, clicking on any link brings the browser to the other URL (http://www.mydomain.com/dev/client/). Is there a way to "force" the dev.mydomain.com/client URL to be used instead of being automatically redirected to the other address? I.e. some sort of htaccess rewriting or something more simple in the HTML code in the site itself? Thanks for any suggestions! Hi everyone, Recently i changed my portfolio page, and the new layout I have now has a Iframe in it. But for some strange reason when I press the menu-buttons on the right side I have to press it twice Portfolio Source Code from one of the Iframe pages: HTML Code: <html>
<head>
<title>Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #000;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20"><a href="Contact.html" target="_self"><img src="images/Contact_left.jpg" border="0"/></a></td>
<td width="20"><a href="Downloads.html" target="_self"><img src="images/Downloads_left.jpg" border="0"/></a></td>
<td width="20"><a href="ICT-Beheer.html" target="_self"><img src="images/ICT-Beheer_left.jpg" border="0"/></a></td>
<td width="825" align="center" valign="top" background="images/Webdesign_center.jpg"><br />
<br />
<br />
Welkom,<br />
<br />
Momenteel ben ik bezig met opvullen en indelen van de pagina's op deze site.<br />
Er zijn dus nog geen pagina's te bekijken.<br />
<br />
Kom gauw weer een keer terug zodra de website definitief af is!<br />
<br />
Mvg, Dream3R</td>
<td width="20"><a href="Portfolio.html" target="_self"><img src="images/Portfolio_right.jpg" border="0"/></a></td>
<td width="20"><a href="About.html" target="_self"><img src="images/About_right.jpg" border="0"/></a></td>
<td width="20"><a href="Home.html" target="_self"><img src="images/Home_right.jpg" border="0"/></a></td>
</tr>
</table>
</body>
</html>
I tried removing the Targets.. but no result, but its the only thing I could think of.. Hello everyone. I'm in the middle of designing my new portfolio in ASP.NET and everything works fine in IE7 but once I opened the site up in FF, I was horrified by the outcome. I've been looking forever for a possible slip-up but I haven't been able to find anything that seems wrong. Firefox. Internet Explorer. CSS Code: html
{
font-family:tahoma;
background-image:url(img/background.png);
background-repeat:repeat-x;
background-color:#b5b5b5;
}
#header
{
background-image:url(img/body_top.png);
width:650px;
height:140px;
}
#body_middle
{
background:url(img/body_middle.png);
background-repeat:no-repeat;
width:650px;
}
#body_fill
{
background-image:url(img/body_fill.png);
width:650px;
background-repeat:repeat-y;
}
#body_bottom
{
background-image:url(img/body_bottom.png);
width:650px;
height:19px;
}
#menuwrapper
{
width:130px;
height:200px;
position:relative;
top:15px;
left:18px;
text-align:left;
padding:0px 0px 0px 0px;
float:left;
}
.menu
{
margin:5px 15px 0px 0px;
}
a
{
color:#c5c5c5;
}
.contentholderR
{
float:right;
width:475px;
margin:10px 20px 10px 20px;
}
.contentholderL
{
float:left;
width:475px;
margin:10px 20px 10px 20px;
}
.content_header
{
background-image:url(img/content_header.png);
background-repeat:no-repeat;
height:15px;
width:475px;
padding-left:15px;
font-family:tahoma;
font-size:15px;
color:#FFFFFF;
}
.content_mid
{
background-repeat:no-repeat;
border-left:solid 3px #c8c8c8;
border-right:solid 3px #c8c8c8;
width:459px;
min-height:150px;
font-family:Tahoma;
font-size:12px;
color:black;
padding-left:10px;
padding-top:10px;
}
.content_bottom
{
background-image:url(img/content_bottom.png);
background-repeat:no-repeat;
height:9px;
width:475px;
position:relative;
}
HTML Code: <%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 runat="server">
<title>Untitled Page</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<div id="header"></div>
<div id="body_fill">
<div id="body_middle">
<div id="menuwrapper">
<asp:Menu ID="Menu" runat="server" CssClass="menu" DataSourceID="SiteMapDataSource1" StaticDisplayLevels="3" BackColor="White" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#C8C8C8" StaticSubMenuIndent="10px" DynamicEnableDefaultPopOutImage="False" Width="124px">
<Items>
<asp:MenuItem Text="dasdasf" Value="dasdasf"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
</Items>
<DynamicHoverStyle BackColor="#E5E5E5" ForeColor="#FAA019" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" ForeColor="Black" />
<DynamicMenuStyle BackColor="#F7F6F3" />
<StaticSelectedStyle BackColor="#E5E5E5" Font-Bold="True" Font-Names="Verdana" Font-Overline="False" ForeColor="Black" />
<DynamicSelectedStyle BackColor="#E5E5E5" ForeColor="Black" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" ItemSpacing="1px" BackColor="White" />
<StaticHoverStyle BackColor="WhiteSmoke" ForeColor="Black" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
<div id="contentwrapper">
<div class="contentholderR">
<div class="content_header">
<asp:ContentPlaceHolder ID="content_header_1" runat="server">
Lorem Ipsum</asp:ContentPlaceHolder>
</div>
<div class="content_mid">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="content_bottom" style="font-size: 12pt; font-family: Times New Roman"></div>
</div>
<div class="contentholderL" style="font-size: 12pt; font-family: Times New Roman">
<div class="content_header">
<asp:ContentPlaceHolder ID="content_header_2" runat="server">
Lorem Ipsum</asp:ContentPlaceHolder>
</div>
<div class="content_mid">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="content_bottom"></div>
</div>
<div class="contentholderR">
<div class="content_header">
<asp:ContentPlaceHolder ID="content_header_3" runat="server">
Lorem Ipsum</asp:ContentPlaceHolder>
</div>
<div class="content_mid">
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="content_bottom" style="font-size: 12pt; font-family: Times New Roman"></div>
</div>
</div>
</div>
</div>
</div>
<div id="body_bottom"></div>
</form>
</body>
</html>
Can someone point out what I'm doing wrong? I have an html document (not a webpage) which I'm converting into a .pdf. I've created it before without any issue but now I'm noticing that when I click on the back button (after clicking on an internal link) that it does one of two things... It either a) returns me to the top of the document or b) takes me to some arbitrary spot in the document. Neither one being where I or my clients need to get back to. Anybody experience this or have a fix? Thanks, Hunter Hello. I have problem with IE 6.0. 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>Untitled Document</title>
<!- Holly hack for 3 px -->
<!--[if IE]>
<style type="text/css">
#_left, #_right, #_center { zoom: 1;}
</style>
<![endif]-->
<style type="text/css">
<!--
#_left {
float: left;
width: 200px;
color: #900;
}
#_right {
float: right;
width: 200px;
color: #00F;
}
#_center {
float: left;
width: 200px;
color: #00F;
}
-->
</style>
</head>
<body>
<div id="_left">Polyvios left menu<br />
sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf</div>
<div id="_right">Polyvios right menu<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf</div>
<div id="_center">ddd</div>
</body>
</html>
The result of this code must be three in line menu. (the code is an example). But IE 6.0 can't understand divs with float. Any one who knows how I can fix it? Sorry for my English. Thank you. Can anyone help me with this code to make the page fluid in all three browsers without showing spaces in between the sections? http://www.cpe.rutgers.edu/wetlands/certificate05.html Thanks in advance Could anyone explain to me how to put rounded corners on divs? Ive researched it a bit, but i want to be able to change the colours so i dont want to use image based if possible. found a way to do it but want more than one curved div but cant seem to be able t use different colours. I want to have one large rounded div on the webpage then some smaller ones within this one for nav menus and content etc, Have found some ideas but they dont work with IE. Ok, I'm completely self taught, so don't be surprise if my html is a mess. I was told recently that I'm out of date in using tables and should be using divs, so in updating my website that's what I'm trying to do. The first one is that it doesn't display properly in IE. Can anyone tell me why, and how to rectify it? http://www.ratscallions.co.uk/Test/index.html There are other problems (as you'll be able to see), but I'd like to work that one out first. Thank you, Nim Hello, I've been dealing with this problem and it seems fairly simple but has got me scratching my head. The page works fine in Firefox (of course) but internet explorer draws this problem. There are gaps between the DIVS and I have tried messing with the margins and padding a bit but have had no luck. here is the page in Firefox: Here is the code in page. HTML Code: <div id="container"> <div id="head"><a href=""><img src="hd_1.png" border="0" /></a></div> <div id="ev_top"><img src="ev_top.png" /> </div> <div class="float"><img src="ev_l1.png" /> </div> <div class="ev1"> <div class="ev2">Dallas</div> <div><a href=""><img src="ev_dallas_tba.png" border="0" /></a></div> <div class="ev3"><div class="float"><img src="/bullet_blue.png" /></div> <div class="ev4"><a href="">May - TBA</a></div> <div class="ev5">| <a href=""> More...</a></div> </div> </div><div class="float"><img src="ev_gap1.png" /></div> <div class="ev1"> <div class="ev2">New York</div> <div><a href=""><img src="ev_ny.png" border="0" /></a></div> <div class="ev3"><div class="float"><img src="/bullet_blue.png" /></div> <div class="ev4"><a href="">04.29 - 87 Lounge</a></div> <div class="ev5">| <a href=""> More...</a></div> </div> </div> <div class="float"><img src="ev_gap2.png" /></div> <div class="ev1"> <div class="ev2">Store</div> <div><img src="ev_str.png" /></div> <div class="ev3"> <div class="float"><img src="bullet_yellow.png" /></div> <div class="ev4">Coming Soon</div> <div class="ev5">| <a href="#"> Updates...</a></div> </div> </div> <div class="float"><img src="ev_right.png" /></div> </div> <div id="ev_bot"><img src="ev_bot.png" /></div> <div class="float"><img src="ev_botr.png" /> </div> </div> <div id="blog_right"><img src="blog_rt_gap.png" /></div> <div id="blog_contain"> Style sheet: Code: body{
font-family:Arial, Helvetica, sans-serif;
width:713px;
background:#cfeae7 url(bg.png);
margin:0 auto;
height:100%
}
#container{height:100%; width:750px;}
#head{text-align:center; padding-right:25px;}
.float{float:left;}
.ev1{float:left; width:211px; background:url(ev_box_bg.png); font-size:24px; text-align:center;}
.ev2{float:left;text-align:left; text-indent:6px;color:#9ce4e4;padding-top:5px;height:100%;}
.ev3{padding-left:5px;text-indent:3px; padding-top:10px; width:211px;}
.ev4{float:left; font-size:12px;color:#b1e7e7; height:100%;}
.ev5{text-align:right; font-size:12px; color:#a2e6e6; padding-right:15px;padding-bottom:9px;height:100%;}
#ev_top{padding-left:6px; margin:0px; padding-top:0px;padding-bottom:0px;}
#ev_bot{float:left; margin:0px; padding:0px;}
Any ideas? Help would be appreciated! Thanks. Hello, I am using a div for my website. I would like all the content to load in the divs, I don't want to create a new page for each site.How can I do this? Also, for the portfolio,I would like the images to change when you click the arrow, but I don't want to use frames or have each image on a new page. Can I do this within the div? Thanks! http://heartless-ink.com/treegirl.html Okay, i have a problem with divs on my site i have 4 divs, the first one is the holder, he's around the other 3. Then there are 3 divs that have to be placed next to each other, but that isn't working! When i use float left or right it tottaly screwes up my page, does anyone know what i do wrong?? my code is: HTML Code: /********** Lay-out **********/
body{
margin:0;
padding:0;
background-color:black;
font-family:Tahoma;
}
.houder{
background-color:white;
width:982px;
height:500px;
margin-left:auto;
margin-right:auto;
}
.header{
height:120px;
width:980px;
margin:0;
padding:0;
background-image:url(Afbeeldingen/header.jpg);
}
.headers{
background-image:url(Afbeeldingen/headr.jpg);
background-repeat:repeat-x;
height:21px;
width:270px;
margin-top:1px;
font-family: Tahoma;
font-size:11px;
color:white;
padding-left:10px;
padding-top:7px;
}
a{
color:black;
text-decoration:underline;
font-size:11px;
font-family:Tahoma;
}
.Contenthouder{
height:340px;
width:980px;
}
.scheiding{
background-image:url(Afbeeldingen/scheiding.jpg);
background-repeat:repeat-y;
width:5px;
height:340px;
margin-left:280px;
}
/********** Menu **********/
.menu{
background-image:url(Afbeeldingen/menu.jpg);
background-repeat:repeat-x;
width:980px;
height:14px;
margin-top:1px;
font-family: Tahoma;
font-size:12px;
padding-top:9px;
padding-bottom:10px;
}
a.menu:link, a.menu:active, a.menu:visited{
color:white;
text-decoration:none;
padding-left:10px;
padding-right:10px;
}
a.menu:hover{
background-image:none;
color:red;
text-decoration:none;
background-color:white;
}
/********** inlog **********/
.inloghouder{
width:280px;
margin-right:700px;
font-size:12px;
float:left;
}
.inlogtxt{
padding-left:20px;
font-size:11px;
}
.inloginput{
border:0;
background-color:lightgrey;
font-size:12px;
width:250px;
height:18px;
padding-top:4px;
}
.inlogknop{
background-image:url(Afbeeldingen/knop.jpg);
font-size:11px;
font-family: Tahoma;
background-color:grey;
border:0;
color:white;
font-weight: bold;
height:20px;
}
/********** Text **********/
.texthouder{
width:500px;
background-color:yellow;
height:300px;
float:right;
}
HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ne" lang="en">
<head>
<title>Familie Voetbalspel</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<div class="houder" align="center">
<div class="header" /></div>
<div class="menu" align="left" valign="middle">
<a href="#" class="menu"><b>Home</b></a>
<a href="#" class="menu"><b>Uitleg</b></a>
<a href="#" class="menu"><b>Punten</b></a>
<a href="#" class="menu"><b>Ronde scores</b></a>
<a href="#" class="menu"><b>Klassement</b></a>
<a href="#" class="menu"><b>Spelers</b></a>
<span class="menurechts" style="margin-left:389px;"><a href="http://www.coachvanhetjaar.nl" class="menu"><b>Coach van het Jaar</b></a></span>
</div>
<div class="Contenthouder" align="left">
<div class="inloghouder">
<div class="headers">
<b>Inloggen bij het Familie Voetbalspel</b>
</div>
<div class="inlogtxt">
<br />
<b>Gebruikersnaam<br /><br />
<input type="text" name="gebruikersnaam" class="inloginput" /><br /><br />
Wachtwoord<br /><br />
<input type="password" name="wachtwoord" class="inloginput" /><br /><br />
<input type="submit" value="Inloggen" class="inlogknop"/><br /><br />
<a href="#">Wachtwoord vergeten?</a><br /><br />
<a href="#">Geen account?? Hier aanmaken!!</a>
</div>
</div>
<div class="texthouder">
</div>
<div class="scheiding">
</div>
</div>
</div>
</body>
</html>
contenthouder is the holder, inloghouder de div on the left, scheiding the div in the middle and texthouder the div on the right Ok I want to have a page that has 2 columns. Here is what I have: Code: <div id="wrap"> Top <div id="left"> Left Div </div> <div id="right"> Right Div </div> Bottom </div> I want the left and the right divs to be columns. How can I do this? I am new to divs --I have always used tables. Thanks~ Hi again I decided to use divs instead of tables for the html layout, now i have some issues and would like to ask you guyz around here. this is the html : PHP Code: <body> <div id="wrapper"> <div id="top"> <div id="logo"></div> </div> <div id="menlog"> <img src="logo.png" width="231" height="54" /> <ul> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Search: </a></li> <li><div id="searchbx"><form class="search" action=""> <input type="text" class="text-field"/> <input type="submit" class="submit" value="submit" /></form> </div></li> </ul> </div> </div> </body> and this is the css: PHP Code: #wrapper { text-align: left; margin: 0px auto; padding: 0px; width: 100%; /* border: 1px solid black; */ } #top { width: 100%; /* border: 1px solid black; */ } #logo { background: url('bg-top.png') no-repeat; padding: 0px 0px; margin: 10px 0px 0px 0px; width: 100%; height: 90px; position: relative; } #menlog { /* width was 100% */ width: 100%; font-size:15px; } and this is what i get : now my problem is that my menu wont remain in the same line as the logo and it goes to the next line under the logo which i dont want! i tried also to put this line : PHP Code: <img src="logo.png" width="231" height="54" /> inside a div which i gave "display:inline" property but that failed too ! it would be nice if someone can advice me. |
|||||||