|
HTML - Nested Tables And Alignment
Hello,
Can anybody help me out? I have a nested table as such: =========================================== <table cellspacing="0" cellpadding="3" border="1"> <tr> <td>Joe <table> <tr> <td>A </td> </tr> </table> </td> </tr> </table> =========================================== How can I get "Joe" and "A" on the same line without changing the table structure? (Can't change structure cuz this is how my server side code spits it out. But I can add styles and attributes.) I've tried all manner of floating, margins, padding, aligning, hspacing, vspacing, and nothing seems to work. Thanks for any help. Similar TutorialsHi, I am using CSS with nested tables. There are two <td> fields in the innermost table, and are having links inside them. When I open the page in IE, and move the mouse over to the first cell, the whole cell becomes active. But the second cell becomes active only if I take the mouse on the text. Why this inconsistency? Can anyone help? Thanks. Please refer attached html and css files Hello guys, I want to create a page with nested html tables. I have attached an image of exactly what I want. Can you please help me with that? hi everybody, i have a problem displaying an html page that contains nested tables, all in a div. now the testing page that i present is a simple html, which works just fine in FF, chrome, safari and opera. sadly, it doesnt in IE7 (didnt test other IE versions). the goal is to make the scroll of the div reflect the width of the tables. i dont know what is causing this, maybe there's something missing in my code, or just an IE bug, perhaps... Anyway, i appreciate you reading this and thanks for your help, if any. How can I make textbox in cell[2,2] get its right border displayed and aligned with upper cell??? <table style="padding-right: 20px" cellspacing="0" cellpadding="0" width="1000px"> <tr> <td width="25%"> <span id="Label9">label</span><br /> <input name="TextBox10" type="text" id="TextBox10" style="border-width:1px;border-style:solid;width:100%;" /> </td> <td width="25%"> <span id="Label10">label</span><br /> <input name="TextBox11" type="text" id="TextBox11" style="border-width:1px;border-style:solid;width:100%;" /> </td> <td width="25%"> <span id="Label11">label</span><br /> <input name="TextBox12" type="text" id="TextBox12" style="border-width:1px;border-style:solid;width:100%;" /> </td> <td width="25%"> <span id="Label12">label</span><br /> <input name="TextBox13" type="text" id="TextBox13" style="border-width:1px;border-style:solid;width:100%;" /> </td> </tr> <tr> <td> <table cellspacing="0" cellpadding="0" style="width: 100%"> <tr> <td style="padding-right: 15px" width="50%"> <span id="Label18" style="display:inline-block;width:100%;vertical-align: top; text-align: left">label</span><br /> <input name="TextBox19" type="text" id="TextBox19" style="border-width:1px;border-style:solid;width:100%;" /></td> <td align="right" width="50%" > <span id="Label19" style="display:inline-block;width:100%;vertical-align: top; text-align: left">label</span><br /> <input name="TextBox20" type="text" id="TextBox20" style="border-width:1px;border-style:solid;width:100%;" /></td> </tr> </table> </td> <td> <span id="Label20">label</span><br /> <input name="TextBox21" type="text" id="TextBox21" style="border-width:1px;border-style:solid;width:100%;" /> </td> <td colspan="2"> <span id="Label21">label</span><br /> <input name="TextBox22" type="text" id="TextBox22" style="border-width:1px;border-style:solid;width:100%;" /> </td> </tr> </table> Hi I need help in tables with 100%. Actually i am keeping a table with 100% fihed width in a <td>, but when i am minimising the IE or Firefox browser the columns are reducing , how to solve the problem I have some nested tables (collapse/expand kinda table). How can I align the columns of each nested table, if all are expanded I want to see all the columns underneath symetrical. I have attached the screenshot of what I am getting with the following code: HTML Code: <head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.collapsed
{
display: none;
}
table#container
{
background-color:#FFFFFF;
border: solid #000 3px;
width: 400px;
}
table#container td
{
border: solid #000 1px;
}
table#sub
{
background-color:#FFFFFF;
border: solid #000 0px;
width: 400px;
}
table#sub td
{
border: solid #000 1px;
}
.toprow
{
font-style: italic;
text-align: center;
background-color: #FFFFCC;
}
.leftcol
{
font-weight: bold;
text-align: left;
width: 1%;
background-color: #CCCCCC;
}
</style>
<script language="javascript" type="text/javascript">
//***collapsible rows
function outliner(evt)
{
evt = (evt) ? evt : (window.event) ? window.event : "";
var oMe;
if (evt.srcElement)
{
oMe = evt.srcElement;
}
else if (evt.target)
{
oMe = evt.target;
}
if (evt.srcElement)
{
//for IE
var child = document.all[oMe.getAttribute("child",false)];
}
else
{
//for Firefox
var child = document.all[oMe.getAttribute("child",false)];
}
//get child element
//if child element exists, expand or collapse it.
if (null != child)
child.className = child.className == "collapsed" ? "expanded" : "collapsed";
}
function changepic(evt)
{
evt = (evt) ? evt : (window.event) ? window.event : "";
var uMe;
if (evt.srcElement)
{
uMe = evt.srcElement;
}
else if (evt.target)
{
uMe = evt.target;
}
var check = uMe.src.toLowerCase();
if (check.lastIndexOf("expand.gif") != -1)
{
uMe.src = "images/collapse.gif";
}
else
{
uMe.src = "images/expand.gif";
}
}
</script>
</head>
<body onclick="outliner(event)">
<table id="container" border="1">
<thead>
<tr class="toprow">
<td />
<td>Parameter</td>
<td>Value</td>
<td>DataType</td>
</tr>
</thead>
<tr>
<td class="leftcol"> </td>
<td>name</td>
<td>Mark</td>
<td>String</td>
</tr>
<tr>
<td class="leftcol">
<a><img border="0" alt="expand/collapse" class="expandable" height="11" onclick="changepic(event)"
src="images/expand.gif" width="9" child="s2" p21="p21" p22="p22" p22="p23"></a>
</td>
<td>composite</td>
<td>100,200,red</td>
<td>CompositeType</td>
</tr>
<tr>
<td colspan="4" bgcolor="cyan" class="collapsed" id="s2">
<table id="sub">
<tr>
<td> </td>
<td>X</td>
<td>100</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>Y</td>
<td>200</td>
<td>Int32</td>
</tr>
<tr>
<td class="leftcol">
<a><img border="0" alt="expand/collapse" class="expandable" height="11" onclick="changepic(event)"
src="images/expand.gif" width="9" child="s3"></a>
</td>
<td>color</td>
<td>134,122,234</td>
<td>Color</td>
</tr>
<tr>
<td colspan="4" bgcolor="cyan" class="collapsed" id="s3">
<table id="sub">
<tr>
<td> </td>
<td>R</td>
<td>134</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>G</td>
<td>122</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>B</td>
<td>234</td>
<td>Int32</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
No 1. I can't seem to get the two columns of my tables to line up straight; and No 2. Can anyone help me out with getting the text and the YouTube video to line up as well? The code works fine in a sandbox, but when you look at the page it's all bodged. Ideally I'd like *just* the video in a table so that I can have the text free to run the other side of it (like it would with an image). *some of the irrelevant text deleted so I can be within the word limit* HTML Code: <HTML><HEAD><TITLE>Out/In</TITLE>
<STYLE type=text/css><!--
body {scrollbar-3dlight-color:black;
scrollbar-arrow-color:black;
scrollbar-track-color:black;
scrollbar-darkshadow-color:black;
scrollbar-face-color:gray;
scrollbar-highlight-color:gray;
scrollbar-shadow-color:white}
--></STYLE>
<SCRIPT type=text/javascript>
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.
var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}
function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}
function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</SCRIPT>
<META content="MSHTML 6.00.6000.16587" name=GENERATOR></HEAD>
<BODY bgProperties=fixed background=http://i23.photobucket.com/albums/b378/th13teenskulls/tex3a.jpg>
<CENTER><BR><BR>
<TABLE cellSpacing=0 cellPadding=20 width=800 bgColor=#000000 border=2>
<TBODY>
<TR>
<TD vAlign=top width=800 height=1300>
<TABLE cellSpacing=0 cellPadding=0 width="100%" bgColor=#000000>
<TBODY>
<TR><ALIGN="CENTER" bgcolor="#E6E6E6" valign="middle"><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#666666 size=2><BR>
CENTER></TR><LEFT><BR>
<CENTER><TABLE cellPadding=1 width=70 border-width:1px;>
<TBODY>
<TR>
<TD><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#666666 size=2><PRE style="FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif" size="2"><BR>JAMES: Mary…?!
MARIA: When will you <I>ever</I> stop making that <BR> mistake...Mary’s dead. You killed her!
JAMES: Maria? It’s you - but I don’t need <I>you</I><BR> anymore.
MARIA: What?! You must be joking...but I can<BR> be yours, I'll be here for you forever and <BR> I’ll never yell at you or make you feel bad <BR> – that’s what you wanted! I’m different than<BR> Mary - how can you throw me away?!
JAMES: I understand now - it’s time to end this<BR> nightmare.
MARIA: <I>No</I>! I won’t let you - you deserve to die too <BR> James!
[<I>Boss Fight</I>]
JAMES: Mary…?
MARY: [<I>coughs</I>] James…
JAMES: Forgive me…?
MARY: I told you that I wanted to die James...I <BR> wanted the <I>pain</I> to end...
JAMES: That’s why I did it honey...I just <I>couldn’t</I> watch <BR> you suffer...No...that’s not true – you also said <BR> you didn’t want to die...the truth is...I hated you<BR> - I wanted you out of the way...! I wanted my <BR> life back...!
MARY: James...if that were true, then why do you look so<BR> sad...?
JAMES; Mary…?
<P>MARY: James...please...please do something for me... <BR> go on with your life…</P><BR>
<P style="FONT-SIZE: 120%" align=right p> 'Leave' ending scenario<BR>Pt. 1: 00.00-01.30<BR>Pt. 2: 00.00-01.45<BR> </P></B></PRE></FONT></TD>
<TD><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#666666 size=2><PRE style="FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif" size="2"><BR>JAMES: Mary…?
MARIA: [<I>turns around and laughs</I>] Wrong again!<BR> Mary’s dead - you killed her!
JAMES: Maria?...Maria - I’m done with you.
MARIA: What do you mean?...but I can be yours,<BR> I’ll be here for you forever, and I’ll never<BR> yell at you or make you feel bad [<I>reaches up <BR> to touch his face</I>]
JAMES: [<I>moves away</I>]
MARIA: <I>That’s</I> what you wanted!
JAMES: Now I understand – the problem is, you’re <BR> not Mary.
MARIA: No James. I won’t let you, I’ll never let you <BR> have your <I>Mary</I> back.
[<I>Boss Fight</I>]
JAMES: Mary…?
MARY: James… [coughs]
JAMES: Forgive me…?
MARY: I told you that I wanted to die James…I wanted <BR> the pain to end…
JAMES: That’s why I did it honey…! I just couldn’t watch <BR> you suffer! [<I>Mary coughs</I>] No…that’s not the whole <BR> truth – you also said, that you didn’t want to die...<BR> the truth is...part of me <I>hated</I> you, for taking away<BR> my life.
MARY: You killed me…and you’re suffering for it…it’s <I>enough</I><BR> James…<BR><BR>
<P style="FONT-SIZE: 120%" align=right p> 'In Water' ending scenario<BR>Pt. 1: 00.00-01.12<BR>Pt. 2: 00.00-01.20<BR> </P></B></FONT></PRE></TD></TR></TBODY></TABLE>
<CENTER>
<OBJECT height=300 width=550><PARAM NAME="movie" VALUE="http://uk.youtube.com/cp/vjVQa1PpcFNe4xamFC9-ypGvHj4FkqmhKF-0ZDhsr50="><PARAM NAME="wmode" VALUE="transparent">
</params><embed src='http://uk.youtube.com/cp/vjVQa1PpcFNe4xamFC9-ypGvHj4FkqmhKF-0ZDhsr50=' type='application/x-shockwave-flash' wmode='transparent' width='550' height='300'></embed></OBJECT></CENTER>
<TABLE cellPadding=5 width=70 border-width:1px;>
<TBODY>
<TR>
<TD><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#666666 size=2><PRE style="FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif" size="2">MARIA: James…!
JAMES: Mary…? Oh, Maria…it’s you…I thought you were…sorry<BR> [<I>Maria shakes her head in disbelief</I>] Anyway, I’m glad<BR> you’re alive.
MARIA: [<I>Her face contorts in anger</I>] <I>Anyway</I>?! Whaddaya mean,<BR> <I>‘anyway’</I>?! You don’t sound very happy to see me – I<BR> was almost <I>killed</I> back there! Why didn’t you try to save<BR> me?! All you care about is that <I>dead</I> wife of yours - I’ve<BR> never been so scared in my whole life! You couldn’t care<BR> less about me…could you?!
JAMES: No, I just…
MARIA: [<I>falls against him, James slowly puts his arms around her</I>]<BR> Then stay with me…don’t ever leave me alone…you’re<BR> supposed to take care of me…! [<I>sobs</I>] James…<BR><BR>
<P style="FONT-SIZE: 120%" align=right>00.00-00.52<BR> </P></PRE></FONT></TD>
<TD>
<OBJECT height=250 width=300><PARAM NAME="movie" VALUE="http://www.youtube.com/v/kIB3gxxa7CE&rel=1&color1=0x000000&color2=0x000000&border=0"><PARAM NAME="wmode" VALUE="transparent">
<embed src="http://www.youtube.com/v/kIB3gxxa7CE&rel=1&color1=0x000000&color2=0x000000&border=0" type="application/x-shockwave-flash" wmode="transparent" width="300" height="250"></embed></OBJECT></TD></TR></TBODY></TABLE>
<TABLE cellPadding=5 width=70 border-width:1px;>
<TBODY>
<TR>
<TD><object width="300" height="250"><param name="movie" value="http://www.youtube.com/v/aLkcXizPXcc&rel=1&color1=0x000000&color2=0x000000&border=0"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/aLkcXizPXcc&rel=1&color1=0x000000&color2=0x000000&border=0" type="application/x-shockwave-flash" wmode="transparent" width="300" height="250"></embed></object>
<TD><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#666666><PRE style="FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif" size="2"><p align="justify"><br> <br>Having already discussed PH’s ‘purpose’ and character background <BR> we shall focus on the nature of Maria’s demise. Accompanied by two<br> PH, James sees her suspended upside down in what appears to be an<br> iron bedframe (something that will be recognised later on the game with<br> the MM monster). Crying out for help, she is brutally speared by one of<br> the PH’s from the back.</p></PRE></FONT>
</TD></TR></TBODY></TABLE>
</DIV></FONT></TD></TR></TBODY></TABLE></CENTER></BODY></HTML>
Hello, im trying to make a webpage and figured invisible tables would be a good way to structurise the page, ive ran into a problem tho as in the cell content alignment is wrong. heres what im trying to achieve: Code: ____________________________________________ | navigation |text starts from up here | | navigation | | | navigation | | | navigation | | |____________|_____________________________| but while the navigation bar is always the same height the text cell is sometimes taller sometimes shorter thus i get situations where the small amount of text starts from the middle of the cell instead of top as i want it to and when there is alot of text the navigation bar moves to the middle of the streched out cell heres the html im using right now Code: <table> <tr> <td> <a href=blah blah>link</a><br> <a href=blah blah>link</a><br> etc </td> <td> here is the text </td> </tr> </table> please help Hi guys, I've been frustrated for awhile trying to fix three of my problems. I just started making a site for myself today, the specific one is http://www.bcsticketsnow.com/rosebowl.html Anyway, I've got three problems, and appreciate any help anyone can offer on any of them: 1. I'm new to frames, and am told to stay clear of it. But I don't know php, so this is the only way I know to make a header, middle and footer on all 20 pages that I'm going to have where I only need to edit one to change all. So I have 3 frames in the frameset, header, mainrosebowl, and footer. I understand that cols="220,*,100" will make the header 220 pixels, the footer 100 px, and the middle part the rest of the window. But I'm trying to figure out a way to have it go deeper than the window. As you can tell, I've got a scroll bar on that middle frame. I want that frame to extend to more than 100% and push the footer below the visible window. So I'm really looking for a big scroll bar for the entire window to scroll down, not a mini scroll bar just for the middle frame. Is this possible? Having the cols add up to only the size of the window isn't what I'm looking for. 2. In the header frame, I've got that drop down menu (says "Bowl Events"). When I put the form in for the drop down menu, it kind of expanded the height of the table. It had less space before in that row of the table with the blue background. When I put the form in there, it kinda messed up the spacing. I essentially want to delete that space below bowl events to make the height of the row of that table like half the size. Any ideas? 3. For that same drop down menu, I'm trying to target each link in that menu to open up a new window (like target="_top"). But putting it after <option value="URL" target=..."> does nothing. Am I supposed to put it in the javascript? Here's what I have now: <script type="text/javascript"> function goToPage(dd) { var ind = dd.selectedIndex; if (ind == 0) { return; } var url = dd.options[ind].value document.location=url; } </script> <form> <select name="eventlist" onChange="goToPage(this); return false;" size="1" style="border: 0; BACKGROUND: navy; COLOR: white; FONT-FAMILY: arial; FONT-SIZE: 15px; font-weight: bold;"> <option value="">Bowl Events</option> <option value="http://www.bcsticketsnow.com/bcschampionship.html" onclick="header.location.href='_top'">BCS Championship</option> <option value="http://www.bcsticketsnow.com/rosebowl.html">2009 Rose Bowl</option> <option value="http://www.bcsticketsnow.com/orangebowl.html">2009 Orange Bowl</option> <option value="http://www.bcsticketsnow.com/fiestabowl.html">2009 Fiesta Bowl</option> <option value="http://www.bcsticketsnow.com/sugarbowl.html">2009 Sugar Bowl</option> <option value="http://www.bcsticketsnow.com/chickfilabowl.html">2009 Chick-Fil-A Bowl</option> <option value="http://www.bcsticketsnow.com/capitalonebowl.html">2009 Capital One Bowl</option> <option value="http://www.bcsticketsnow.com/cottonbowl.html">2009 Cotton Bowl</option> <option value="http://www.bcsticketsnow.com/holidaybowl.html">2009 Holiday Bowl</option> </select></form> you have 3 floating divs. "bottom" "top" and "middle". "top" is inside of "bottom" --> in this scenario, can "middle" div ever be above "bottom" div, but below "top" without being inside of "bottom" div? Code: <div id="bottom" style="position:absolute; top:100px; left:100px; width:200px; height:100px; z-index:1; background-color:#F00;"><h1>bottom</h1> <div id="top" style="position:absolute; top:100px; left:150px; width:200px; height:100px; z-index:3; background-color:#00F;"><h1>top</h1></div> </div> <div id="middle" style="position:absolute; top:150px; left:150px; width:200px; height:100px; z-index:2; background-color:#0F0;"><h1>middle</h1></div> Hi Normally, when you have more than one table in your code, the tables will be placed one under each other. Example: <table> ... </table> <table> ... </table> When you want the tables to be placed next to each other, you need to set the align attribute. Example: <table align="left"> ... </table> <table align="left"> ... </table> BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables". Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag? Thanks for your help praiser Hey everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code. How I want it to look: How it looks now: I want the tables to line up at the top and re-size according to each other so they're always aligned at the top. Code: coming in next 2 posts Hi. I need to find a way of displaying some thumbnail photos in a table cell across a bunch of different tempates. I put a new thumbnail in the group about once a week, but I dont want to edit every template I have. Is is possible to have code in the table cell that say's get thumbnails.htm and put them in this cell That way I can just edit thumbnails.htm and it will show up on all the templatess/pages I'm sure it can be done, but I'm not sure how to go about it. Thanks Leroy I am having a problem that I can not figure out why this is happening. I have two divs one named content and one named welcome. The welcome div is nested inside the content div. Whenever I change the margin top for the welcome div it also changes the margin top of the content div it is nested in. How can I keep it where the content div is fixed and doesn't move no matter where I set the margin top for the welcome div? Here is the HTML.... Code: <div id="content">
<div class="welcome">
<p> Coming Soon, a new and improved Texas Camping Forum for Fall 2008!!!<br>
Bookmark us and check back often....</p>
</div>
</div>
Here is the CSS... Code: #content {
margin: 5px 0 0 140px;
text-align: center;
width: 630px;
border-left: 1px solid #F4F4F4;
}
.welcome {
margin-top: 25px;
}
Here is the link to the site.... http://development.mesquitechristmas.com/index.html Any ideas or suggestions as why this is happening? -Thanks Hello, I am new here and hope someone can help. I am creating a page where I need to have several nested lists. The 'numbering' is showing up correctly but the 'nested' lists are not indented. Can anyone take a look at the page and my source code and see if you can help me figure out what is wrong? go to http://www.prewrath.com/index2.html Thank you! bzig I have the html code: <div style="width: 100%; height:100%; background-color: orange;"><input type="text" style="border-style: solid;border-width: 1px;border-color:black;"/></div> In IE7 the input will start one pixel below the div, in Firefox it displays well. How can I get rid of the 1px in IE7 ? I am currently trying to create some nested lists to display the following... A...R...X B...S...Y C...T...Z (where the letters will eventually be replaced by words) and have made this work perfectly in chrome and firefox, however when I use Internet Explorer I get something resembling the following... A B...R C...S...X .....T...Y ..........Z I assume it's probably to do with the css, but please can someone help me with this problem, the html and css are shown below, thanks in advance for any help. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel=stylesheet href="links.css" type="text/css"> </head> <body> <div id="container"> <ul id="links-nav"> <li> <ul> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </li> <li> <ul> <li><a href="#">R</a></li> <li><a href="#">S</a></li> <li><a href="#">T</a></li> </ul> </li> <li> <ul> <li><a href="#">X</a></li> <li><a href="#">Y</a></li> <li><a href="#">Z</a></li> </ul> </li> </ul> <div class="clear"></div> </div> </body> </html> CSS Code: #container{
width:960px;
margin:0px auto;
border: 1px solid #000;
padding:20px 10px;
height:auto;
font-family: Arial, sans-serif;
font-size:11px;
}
.clear {
clear: both;
height: 0;
overflow: hidden;
}
a{
text-decoration:none;
color:#555;
}
#links-nav li, li ul li{
list-style:none;
}
#links-nav{
display:inline;
margin:0;
padding:0;
}
#links-nav li ul{
float:left;
padding:0;
width:168px;
padding: 0px 10px;
}
I have various div's inside a wrapper div (#wrapper). I have set the width of wrapper div to 900px and one of the inside div (#content) to 650px. but the inner div is not getting shrinked to 650px. I am using dreamweaver and eric mayer reset before applying my custom CSS. Here is the code: HTML Code: Code: <!DOCTYPE html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen>
<title>Shears Design Website</title>
</head>
<body>
<div id="outer">
<div id="wrapper">
<div id="shears-logo">
<img src="images/logos/ShearsDesign.jpg"/>
</div>
<div id="top-nav">
<ul>
<li> <a href="index.html">Home</a></li>
<li> <a href="about.html">About</a></li>
<li> <a href="courses.html">Courses</a></li>
<li> <a href="tutorial.html">Tutorial</a></li>
<li> <a href="contact.html">Contact Us</a></li>
<li> <a href="imp-links.html">Important Links</a></li>
</ul>
</div>
<div id="content">
<h1> About Shears Design</h1>
<p> Shears Design is a small web design and training studio. We have worked as a freelance designer since 2006 and have been creating websites since then.Thewebsites we design have a clean professional layout and appearance with easy to understand navigation and clean, easy to read typography so your site visitors find what they are looking for and have a positive experience visiting your site. We believe in using straightforward well tested design methods which produce sites that are pleasant to visit and easy to maintain and expand when the time comes. Our websites are based on a standard layout grid which gives our clients the ability to visualize their sites in an organized way and provides a framework to quickly and efficiently create dependable and clean websites.</p>
</div>
<div id="right-side">
<h2> Learning resources </h2>
<p> For more learning resources, please refere the tutorial link at the top of the page. </p>
<h3> Shears Design Frameswork </h3>
<p> This is the framework we use to create websites in the training videos for Adobe Dreamwewaver, Microsoft Expression Web and the learning HTML and CSS courses. It includes the completed project templates created in the videos. The purpose of this framework is to provide you with a starting set of tools for creating websites, which you can customized to fit your needs and style. Its the toolkit we use everyday when creating websites. It works great for us and we hope it can be the start of something great for you. </p>
<p> <a href="contact.html"> Contact us for more information </a> <p>
<h3> Small Business SEO Guide </h3>
<p> SEO Guide will go over what SEO is, Keyword Research, External Link Building and OnPage Optimization techniques as well as a discussion of "Black Hat" techniques to avoid. The guide will conclude with information on adding your site to Google and Bing, working with XML sitemaps and installing Google Analytics. The videos will demonstrate the On Page SEO Techniques discussed in the guide and the procedure for adding your site to Google and Bing, creating search engine site maps and adding Google Analytics to your site.</p>
<p> <a href="contact.html"> Contact us for more information </a> <p>
</div>
<div id="social-media-icons">
<ul>
<li> <a href="http://www.facebook.com"> <img src="images/logos/facebook-64x64.png"/> </a> </li>
<li> <a href="http://www.twitter.com"> <img src="images/logos/twitter-64x64.png"/> </a> </li>
<li> <a href="https://plus.google.com"> <img src="images/logos/google-64x64.png"/> </a> </li>
<li> <a href="http://www.youtube.com"> <img src="images/logos/youtube-64x64.png"/> </a> </li>
<li> <a href="http://www.yahoo.com"> <img src="images/logos/yahoo-64x64.png"/> </a> </li>
</ul>
</div>
<div id="footer">
<p> ©2011 Shears Design | All Rights Reserved </p>
<p> Terms and Conditions </p>
</div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------- CSS code: Code: /* Reset */
html, body { margin: 0; padding: 0; border: 0; background: transparent; font-size:10px; }
div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li,
table, tr, th, td, tbody, tfoot, thead {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
img { margin:0; padding:0; border:0; }
table, tr, th, td, tbody, tfoot, thead {
margin: 0; padding: 0; border: 0;
vertical-align: baseline;
background: transparent;
}
table { border-collapse: collapse; border-spacing: 0; }
input, select, textarea, form, fieldset {
margin: 0; padding: 0; border: 0;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
display:block; }
h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, b, i, u, strike {
font-family: Arial, Helvetica, sans-serif;
font-size:100%;
font-weight: normal;
font-style: normal;
line-height: 100%;
text-indent: 0;
text-decoration: none;
text-align: left;
color: #000;
}
ol, ul { list-style: none; }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
h1 { font-size:24px; color:#3CF;
padding-bottom:15px; border-bottom:1px #ccc solid; margin-bottom:15px; }
h2 { font-size:20px; }
h3 { font-size:16px; margin-bottom:5px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }
/* Text Elements */
p { color:#000; font-size:12px; line-height:150%;
margin:15px 0; }
a { }
a:link { color: #00f; }
a:visited { color: #0f0; }
a:active { color: #000; }
a:focus { color: #666; }
a:hover { color: #f00; }
/*id styles*/
body {background-color:#D1F4FC; }
#wrapper {width:900px; margin:0px auto; background-color:#FFF;}
#shears-logo {padding-top:20px; float:left;
margin-bottom:20px;}
#top-nav { clear:both;
}
#top-nav ul li a {text-decoration:none;}
#top-nav ul li {display:inline;
}
#content { width:650; margin:10px; float:left;}
Hi I have a main div called wrapper - it holds the main content of my site. It has a thin border around it. In Firefox, it just appears as a thick horizontal line, and it's contents appear underneath it. I have checked the nestings, and they all seem right - in other words, this DIV definitely contains content, and it shows in IE, just not Firefox. If I type text next to <div id="wrapper">, it appears in the wrapper div, and pushes the rest of the content down the page. I don't get it. The code says the content is in the div, but it's not. HELP!!! Cheers Shaun Here's my problem... I'm using two blockquote tags to style my BBCode quote tags for my site. However, whenever I post something that's longer than, say, a line in a quote tag, it moves the sidebar div down below the main div. Only in IE though. Typical. http://automata.firephoenixnet.com/test.html I tried using divs instead - didn't work. I even tried using spans - but they didn't work the way I wanted them to. Can anyone help me with this? Thanks in advance guys. |
|||||||