RSS Forums RSS
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 11220 | Replies: 3
Reply
Join Date: May 2004
Posts: 92
Reputation: kained is an unknown quantity at this point 
Rep Power: 5
Solved Threads: 0
kained kained is offline Offline
Junior Poster in Training

HTML/CSS DIV help needed

  #1  
Nov 2nd, 2005
I'm having a few problems with some css/html code. The code isn't looking to bad in firefox(although it needs moving up the page a bit) but in internet explorer it looks very silly.

I think i have mucked up the divs somewhere but can't find it for the life of me. Any help will be much appreciated.

css
/* CSS Document */
body {
	background-image: url(graphics/sect-car-background.gif);
}
#nav {
	float: left;
	margin: 0px;
	border: 0px;
	width: 15%;
	

		}

	
	
	#content2 {
	float: left; 
	margin: 16%;
	border: 0px ;
	width: 50%;
	display: inline;
	
			}

	
	/* everything above is for colums */
	img {border: 1px solid; color:#000000 }
/* puts a black border round the images */
	
	p {font:"Trebuchet MS", Verdana, Arial; size:12px}
/*P{margin: 0px 90px 0px 100px; }*/

a:link{font-family:"Trebuchet MS", Verdana, Arial; size:12px color:#F5C0F7; text-decoration:none;} a:visited{font-family:"Trebuchet MS", Verdana, Arial; size:12px color:#C00099; text-decoration:none;}
a:hover{font-family:"Trebuchet MS", Verdana, Arial; size:12px color:#C00099; text-decoration:none; cursor:pointer}
	  

and now the html.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>H&amp;R Vehicle Hire</title>
<link rel="stylesheet" type="text/css" href="hrcars.css"/>
</head>
<body>
<div id="nav">
<a href="home.html"><img src="graphics/logo copy.jpg" alt="H&amp;R Vehicle Hire Logo" border="0" /></a>
<img src="graphics/nav-bar-copy150.jpg" width="195" /></div>
</div>
<div id="content2">
  <p><img src="graphics/navbarfinal copy.jpg" alt="top naviagtion bar" width="650" height="185" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="3,-1,215,186" href="weddings.html" />
<area shape="rect" coords="215,2,419,180" href="limo.html" />
<area shape="rect" coords="418,-1,649,187" href="classics.html" />
</map></p>
  <p><img src="graphics/welcome.gif" alt="Welcome" width="106" height="30" style="border:0px;/></p>
  <p>&nbsp;</p>
  <p>
    <map name="Map" id="Map">
      <area shape="rect" coords="1,1,220,186" href="weddings.html" />
  </p>
  <p>Welcome To H&amp;R Vehicle Hire. Weather you require a vehicle for a wedding a night out on the town are merely feel like driving a classic car for the day we are sure to have the right vehicle for you. With over 20 years experience in the idustry you can be sure that all our vehicle are of a high standard be it a steam powered vehicle or one of our state of the art limosuines.</p>
  <p>&nbsp;</p>
  <table width="568" border="0" align="center">
    <tr>
      <td width="202"><img src="graphics/carrige200px.jpg" alt="One of the carriges availible for hire from h&amp;R vehicle hire" width="200" height="132" /></td>
      <td width="150"><div align="center"></div></td>
      <td width="202"><img src="graphics/limo200px.jpg" alt="one of the limos availible to hire" width="200" height="126" /></td>
    </tr>
  </table>
  <p align="center">&nbsp;</p>
  <p align="center">&nbsp;</p>
  <p>
    <area shape="rect" coords="211,-1,421,185" href="limo.html" />
    <area shape="rect" coords="421,2,650,185" href="classics.html" />
    </map>
  </p>
</div>


</body>
</html>
AddThis Social Bookmark Button
Reply With Quote  
Join Date: May 2004
Location: Boston,MA
Posts: 1,362
Reputation: mikeandike22 is an unknown quantity at this point 
Rep Power: 7
Solved Threads: 17
Featured Blogger
mikeandike22's Avatar
mikeandike22 mikeandike22 is offline Offline
Nearly a Posting Virtuoso

Re: HTML/CSS DIV help needed

  #2  
Nov 3rd, 2005
i think instead of div id="nav" for example you should go back into the css and make it a class

 .nav {
	float: left;
	margin: 0px;
	border: 0px;
	width: 15%;
	}

<div class="nav">klkjlljklklklklklklklksdksldkslskdlsk</div>


try that and see wat happens.
My Daniweb Blog: This,That, and Everything Else (Blog contest winner)

GetFirefox!
GetOpera!






Reply With Quote  
Join Date: Feb 2007
Posts: 1
Reputation: Nimmy06 is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
Nimmy06 Nimmy06 is offline Offline
Newbie Poster

HTML/CSS DIV help needed

  #3  
Feb 6th, 2007
HEY! :mrgreen:
I NEED HELP WITH MY DIV CODE FOR MYSPACE (SUPPLIED BY PANICKED LAYOUTS) I WANT TO
1) CENTER THIS LAYOUT IF POSSIBLE
2) ADD A SIDE COLUMN BESIDE THE MAIN DIV

CAN ANYONE HELP ME OUT :-| . the code is below

---------------------------------------------------------------------------------
ABOUT ME SECTION CODE

<style type="text/css">
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
.btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font,div table tr td form {
visibility:hidden;display:none;height:0px;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
td td object {position:absolute; left: 0px; top:0px; display:block;}
.PANICKED COMMENT { this is where you control the position of the music player. }
td td object {position:absolute; left: 0px; top:0px; display:block;}
body {
background-image: url("http://i44.photobucket.com/albums/f2...ked00/bgms.jpg");
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed;
background-color: 384E46;
color: 2B270A;
scrollbar-arrow-color: 451817;
scrollbar-track-color: 384E46;
scrollbar-face-color:5A7068;
scrollbar-highlight-color: 9FBBB5;
scrollbar-3dlight-color: 748F85;
scrollbar-shadow-color: 384E46;
scrollbar-darkshadow-color: 1E2F29;}
td, .text, div, input {
font: normal 10px trebuchet ms!important;
color: 2B270A!important;}
.headtext1 {
font: bold 11px trebuchet ms;
letter-spacing: 1px;
text-align: left;
color:AD8264;
background-color: 5C0E0E;
border-top:1px solid;
border-bottom: 1px solid;
border-left: 0px solid;
border-right: 0px solid;
border-color: 211E08;
display: block;}
.headtext2 {
font: bold 11px trebuchet ms;
letter-spacing: 1px;
text-align: right;
color:758F85;
background-color: 40594A;
border-top:1px solid;
border-bottom: 1px solid;
border-left: 0px solid;
border-right: 0px solid;
border-color:211E08;
display: block;}
b, bold, strong {font: bold 12px trebuchet ms!important; color:6E5127!important;}
i, em, italic {font: normal 9px trebuchet ms!important; color:5C0E0E!important;}
a {font: normal 10px trebuchet ms!important; text-decoration: underline!important; color:6E0106!important;}
a:hover {font: normal 10px trebuchet ms!important; text-decoration: none!important; color: 350102!important; cursor: crosshair;}
a.van:link, a.van:visited, a.van:active {
text-decoration: none!important;
font-family:trebuchet ms;
text-align: right;
font-style:normal;
font-size:10px;
line-height:10px;
color: 93936E!important;
background-color:C0C09E;
border-left: 8px solid;
border-color: 851B0E!important;
cursor: default;
display: block;
margin-right: 1px;
margin-bottom: 0em;
padding: 0px;}
a.van:hover {
text-decoration: none!important;
font-family:trebuchet ms;
text-align: right;
font-style:normal;
font-size:10px;
line-height:10px;
color: 71653C!important;
background-color:B8AA7D;
border-left: 8px solid;
border-color: 5D0808!important;
cursor: default;
display: block;
margin-right: 1px;
margin-bottom: 0em;
padding: 0px;}
textarea.pnckdbox {
color: AFC2BB;
font-family: Trebuchet MS;
font-size: 10px;
text-transform: none!important;
font-weight: normal;
letter-spacing: 0px;
text-align: left;
line-height: 9px;
height: 55px;
width: 340px;
border-color: 384E46;
border-style: solid;
border-width: 2px;
background-color: 59726B;
overflow: auto;}
input.pnckdcom {
color: 6F8D84!important;
font-family: trebuchet MS;
font-size: 10px;
text-transform: none!important;
font-weight: normal;
letter-spacing: 0px;
text-align: center;
line-height: 10px;
background-color: 384E46;
height: auto;
width: auto;
border-color: 211E08;
border-width: 1px;
border-style: solid;}
.lrgdiv {
background-color: transparent;
color: 000000;
border: 0px solid;
border-color: 000000;
width: 4px;
height: 500px;
overflow: auto;
position: absolute;
z-index: 2;
left: 0%; top: 0%;
margin-left: 2px;
margin-top: 500px;
visibility: visible;}
.imgdiv {
background-color: transparent;
color: 2B270A;
border: 0px solid;
border-color: 384E46;
width: auto; height: auto;
overflow: visible;
position: absolute;
z-index: 7;
left: 0%; top: 0%;
margin-left: 10px;
margin-top: 125px;
text-align: left;
visibility: visible;}
.maindiv {
background-color: AA9E6E;
text-align: left;
width: 400px;
height: auto;
border: 5px solid;
border-color: 211E08;
margin-top: 617px;
margin-left: 58px;
visibility: visible;
position: absolute;
left: 0%; top: 0%;
overflow: visible;
z-index:6;
padding: 0px;}
.sidediv {
background-color: 5C726A;
border: 3px solid;
border-color: 211E08;
font-size: 9px!important;
width: 265px;
height: auto;
margin-top: 135px;
margin-left: 560px;
z-index:9;
text-align: left;
padding: 0px;
visibility: visible;
position: absolute;
left: 0%; top: 0%;
overflow: visible; }
</style>

-------------------------------------------------------------------------------
I'D LIKE TO MEET SECTION OF CODE

<div class="imgdiv">
<img src="<A href="http://i44.photobucket.com/albums/f25/panicked00/crutch.jpg"></div">http://i44.photobucket.com/albums/f25/panicked00/crutch.jpg"></div>
<div class="maindiv">
<span class="headtext1">Briefly...</span>
<b>name:</b> your name<br>
<b>age:</b> your age<br>
<b>gender:</b> your gender<br>
<b>location:</b> your location<br>
<b>status:</b> your status<br>
<b>job:</b> your occupation<br>
<span class="headtext1">Detailed...</span>
<style>REPLACE THE "USERIMG" URL WITH YOUR PHOTO'S URL</style>
<a href="http://viewmorepics.myspace.com/inde...&friendID=YOUR FRIEND ID"><img src="http://i44.photobucket.com/albums/f2...EW/userimg.jpg" align="left" border="0" width="150px"></a>
Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here. Write about yourself here.
<span class="headtext1">Comment...</span>
<center><form method="post" action="<A href="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input">http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="YOUR FRIEND ID" type="hidden"> <textarea name="f_comments" class="pnckdbox">i will sing your fears...if you sing my neurosis...</textarea><br /><input type="submit" value="sing." class="pnckdcom"> <input type="reset" value="back out now." class="pnckdcom"></form></center>
<span class="headtext1">Darlings...</span>
<center>
<style>REPLACE THE "FRIENDIMG" URL WITH YOUR FRIEND'S PHOTO URL</style>
<a target="_blank" href="YOUR FRIEND'S URL"><img src="http://i44.photobucket.com/albums/f2.../friendimg.jpg" border="0" width="90px"></a>
<a target="_blank" href="YOUR FRIEND'S URL"><img src="http://i44.photobucket.com/albums/f2.../friendimg.jpg" border="0" width="90px"></a>
<a target="_blank" href="YOUR FRIEND'S URL"><img src="http://i44.photobucket.com/albums/f2.../friendimg.jpg" border="0" width="90px"></a>
<a target="_blank" href="YOUR FRIEND'S URL"><img src="http://i44.photobucket.com/albums/f2.../friendimg.jpg" border="0" width="90px"></a>
<br>
<a target="_blank" href="YOUR FRIEND'S URL"><img src="http://i44.photobucket.com/albums/f2.../friendimg.jpg" border="0" width="90px"></a>
<a target="_blank" href="YOUR FRIEND'S URL"><img src="http://i44.photobucket.com/albums/f2.../friendimg.jpg" border="0" width="90px"></a>
<a target="_blank" href="YOUR FRIEND'S URL"><img src="http://i44.photobucket.com/albums/f2.../friendimg.jpg" border="0" width="90px"></a>
<a target="_blank" href="YOUR FRIEND'S URL"><img src="http://i44.photobucket.com/albums/f2.../friendimg.jpg" border="0" width="90px"></a>
</center>
<span class="headtext1">Contacting...</span>
This is where you can add your instant messenger screen names and any email addresses you'd like people to know.
<span class="headtext1">Your Title...</span>
You can change the title for this section and add what you want here. Make it your own.
<span class="headtext1">Your Title...</span>
You can change the title for this section and add what you want here. Make it your own.
</div><div class="sidediv">
<span class="headtext2">Navigation</span>
<a class="van" href="<A href="http://home.myspace.com/index.cfm?fuseaction=user">home</a">http://home.myspace.com/index.cfm?fuseaction=user">home</a>
<a class="van" href="http://viewmorepics.myspace.com/inde...&friendID=YOUR FRIEND ID">pictures</a>
<a class="van" href="http://vids.myspace.com/index.cfm?fu...&friendID=YOUR FRIEND ID">videos</a>
<a class="van" href="http://mail.myspace.com/index.cfm?fu...&friendID=YOUR FRIEND ID">message</a>
<a class="van" href="http://collect.myspace.com/index.cfm...&friendID=YOUR FRIEND ID">add friend</a>
<a class="van" href="http://blog.myspace.com/index.cfm?fu...&friendID=YOUR FRIEND ID">view blog</a>
<a class="van" href="http://home.myspace.com/index.cfm?fu...&friendID=YOUR FRIEND ID">view friends</a>
<a class="van" href="http://comment.myspace.com/index.cfm...&friendID=YOUR FRIEND ID">view comments</a>
<a class="van" href="http://mail.myspace.com/index.cfm?fu...&friendID=YOUR FRIEND ID&f=forwardprofile">forward</a>
<a class="van" href="http://collect.myspace.com/index.cfm...&friendID=YOUR FRIEND ID&public=0">favourite</a>
<a class="van" href="http://collect.myspace.com/index.cfm...er&userID=YOUR FRIEND ID">block</a>
<span class="headtext2">Adores...</span>
This is where you get to list everything that makes you smile, giddy, happy, etc. Whatever you absolutely adore.
<span class="headtext2">Loathes...</span>
This is a space reserved for anything that drives you crazy, anything you cannot stand. General dislikes and outright hates.
<span class="headtext2">Sounds...</span>
List all or just some of the music you enjoy.
<span class="headtext2">Pages...</span>
Tell everyone what you enjoy reading.
<span class="headtext2">Films...</span>
Think of all your favourite films. And list them here for the world to see.

<style>DO NOT EDIT ANYTHING BELOW THIS LINE DO NOT EDIT ANYTHING BELOW THIS LINE.</style>
<span class="headtext1">Layout...</span><center>Layout created by <a target="_blank" href="<A href="http://panicked.nuclearcentury.com">Panicked!!</a>.</center">http://panicked.nuclearcentury.com">Panicked!!</a>.</center>
</center></div>

-------------------------------------------------------------------------------

THANKS GUYS :cheesy:
Reply With Quote  
Join Date: Jan 2007
Posts: 2,640
Reputation: MidiMagic is on a distinguished road 
Rep Power: 7
Solved Threads: 118
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Posting Maven

Re: HTML/CSS DIV help needed

  #4  
Feb 9th, 2007
I see several errors:

1. The style tags go in the head part of the code, not the body. Your invalid use may be confusing browsers.

2. Something is very wrong with the second line in the code section. The quotes are mismatched.

In addition, the div method of making columns falls apart if the width of the combined columns becomes wider than the browser window.

Note that IE calculates the width of an object in a different way than most other browsers. Widths which add to 100 percent in some browsers add to 104 percent or 96 percent in other browsers, because some browsers include borders and padding when setting total width, while others exclude them.

Believe it or not, tables still do a better job.
Daylight-saving time uses more gasoline
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

Thread Tools Display Modes
Forums | Blogs | Tutorials | Code Snippets | Whitepapers | RSS Feeds | Advertising
All times are GMT -4. The time now is 1:50 am.
Newsletter Archive - Sitemap - Privacy Statement - Acceptable Use Policy - Contact Us
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC