Jump to content

Moving from TABLE to DIV and SPAN layout


FrostbiteXIII

Recommended Posts

Hello folks, as you can see Im brand new to these here forums, and am looking for some help and advice with css and html layout.I have used tables in the past to create websites, but having heard that that are bad, I am trying to move on to div and span tags to make my new site look good.I am, however, having some problems which I am hoping you can help me with:1) I usually use Firefox, but everything looks *really* bad in it - the span tags in particular are just not obeying the css I have tried2) In IE most things are working fine, but things like having multiple lines of code on the same span tag is not doing what I wantOK, Im very sorry - I am tired at this point and realise what I have written isnt very specific or that useful a description. I will go to bed now, and try to improve on this description tomorrow.In the meantime, if you want to see what I mean, please feel free to have a look at me test page: http://www.firespace.co.uk/index_test.htmThanks in advance,Frosty.

Link to comment
Share on other sites

Hello folks, as you can see Im brand new to these here forums, and am looking for some help and advice with css and html layout.I have used tables in the past to create websites, but having heard that that are bad, I am trying to move on to div and span tags to make my new site look good.I am, however, having some problems which I am hoping you can help me with:1) I usually use Firefox, but everything looks *really* bad in it - the span tags in particular are just not obeying the css I have tried2) In IE most things are working fine, but things like having multiple lines of code on the same span tag is not doing what I wantOK, Im very sorry - I am tired at this point and realise what I have written isnt very specific or that useful a description. I will go to bed now, and try to improve on this description tomorrow.In the meantime, if you want to see what I mean, please feel free to have a look at me test page: http://www.firespace.co.uk/index_test.htmThanks in advance,Frosty.

Tables are WAY easier... but a lot of folks don't like to use them cause they were only meant for 'tabular data', but whatever floats your boat. I personally use a blend of both tables and div's to simply things for me.There is no need for span tags for a block element. use div instead. Think of div's as abox, and span tags as 'lines'.I fixed your code some up to a certain point... but there is a lot that can be done.I just don't have enough time right now to expain all of it. sorry. You can compare your old code to the one that I have on here now, and notice some differences thatsaves time in coding, and saves you from coding un-nessary things.
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'><html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'><head>  <title> Firespace - Index </title>  <link rel='stylesheet' type='text/css' href='style_test.css' />  <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />  <meta name='description' content='firespace.co.uk - Robert James Eastell - Home Page' />  <meta name='keywords' content='Firespace, Fire Space, Robert James Eastell, Home, Index' /><style type="text/css">body {	padding: 10px;	background-color: black;}h1 {	text-align: center;	font-size: 3.5em;}/***************************************************************************************//*************************************** SECTIONS **************************************/.section_1 {	background-image: url('images/bg_sidebar.gif');	border-top: 3px #999999 outset;	border-left: 3px #999999 outset;	border-right: 3px #999999 outset;	border-bottom: 1px black solid;	height: 100px;	vertical-align: middle;}.section_2 {	border: 1px black solid;	background-color: #ffffff;}.section_2a {	background-image: url('images/bg_sidebar.gif');	border-top: 1px black solid;	border-left: 2px #999999 outset;	border-right: 2px #999999 outset;	border-bottom: 2px #999999 outset;	text-align: center;	width: 200px;        padding: 0px;}.section_2b {	border: 0px;	background-color: #ffffff;}.section_3 {	vertical-align: middle;	font-size: 0.7em;	font-style: italic;	border: 1px orange solid;	height: 40px;	background-color: #000000;	color: #996600;	padding: 10px 25px 10px 25px;}.section_3a {	text-align: left;	border: 0px;	width: 48%;	background-color: #000000;	color: #996600;        float: left;}.section_3b {	text-align: right;	border: 0px;	width: 48%;	background-color: #000000;	color: #996600;        float: left;}/***************************************************************************************//**************************************** SIDEBAR **************************************/.section_2a a, .section_2a a:visited  {        display: block;	height: 20px;	width: 170px;	border: 2px #999999 inset;	background-color: #000000;	padding: 2px;        text-decoration: none;        color: red;        margin-top: 8px;        margin-bottom: 5px;        margin-left: auto;        margin-right: auto;}.section_2a a:hover {	text-decoration: none;	color: yellow;}.section_2a a:active {	text-decoration: none;	color: purple;}/***************************************************************************************//*************************************** FOOTER ****************************************/img.w3cicon {	border: 0px;	width: 88px;	height: 31px;}</style></head><body><!-- Titlebar --><div class='section_1'><h1>FIRESPACE</h1></div><!-- Main Body --><div class='section_2'>	<!-- Sidebar -->	<div class='section_2a'>		<a href='link.htm'>Clan Art</a>		<a href='link.htm'>FrostbiteXIII Art</a>		<a href='link.htm'>Barcodes</a>		<a href='link.htm'>Super Yous</a>		<a href='link.htm'>Lightning Sigs</a>		<a href='link.htm'>Custom Art</a>	</div>	<!-- Main -->	<div class='section_2b'>          <h2>Main Section</h2>          <p>This is the main section</p>       </div></div><!-- Footer Section --><div class='section_3'>	<!-- Copyright -->	<div class='section_3a'>		Robert Eastell, [year]	</div>	<!-- Page Modified -->	<div class='section_3b'>		Last Modified: [mod date]	</div></div></body></html>
Link to comment
Share on other sites

Thanks in advance,Frosty.

Your welcome! I think this will open Your eyes? :) I'd change spans to better tags.By the way in HTML we are using basicly "big quotes" in attributes, not those small ' 'updots' or whatever they are called in english..
<div class="section_2"><!-- Sidebar --><div class="section_2a"><p class="sidebarlink"><a href="link.htm" class="sidebarlinkanchor">Clan Art</a></p><p class="sidebarlink"><a href="link.htm" class="sidebarlinkanchor">FrostbiteXIII Art</a></p><p class="sidebarlink"><a href="link.htm" class="sidebarlinkanchor">Barcodes</a></p><p class="sidebarlink"><a href="link.htm" class="sidebarlinkanchor">Super Yous</a></p><p class="sidebarlink"><a href="link.htm" class="sidebarlinkanchor">Lightning Sigs</a></p><p class="sidebarlink"><a href="link.htm" class="sidebarlinkanchor">Custom Art</a></p></div><!-- Main --><div class="section_2b"><h2>Main Section</h2><p>This is the main section</p></div></div>

Set section_2a width to needed menu width in CSSin CSS file:line 23vertical-align: center;vertical align can't be center, but it can be middle. look: http://www.w3.org/TR/REC-CSS2/visudet.html...-vertical-alignedit:RahXephon IS still faster than I! :)

Link to comment
Share on other sites

Your welcome! I think this will open Your eyes? :) I'd change spans to better tags.By the way in HTML we are using basicly "big quotes" in attributes, not those small ' 'updots' or whatever they are called in english..
<div class="section_2"><!-- Sidebar --><div class="section_2a"><p class="sidebarlink"><a href="link.htm" class="sidebarlinkanchor">Clan Art</a></p><p class="sidebarlink"><a href="link.htm" class="sidebarlinkanchor">FrostbiteXIII Art</a></p><p class="sidebarlink"><a href="link.htm" class="sidebarlinkanchor">Barcodes</a></p><p class="sidebarlink"><a href="link.htm" class="sidebarlinkanchor">Super Yous</a></p><p class="sidebarlink"><a href="link.htm" class="sidebarlinkanchor">Lightning Sigs</a></p><p class="sidebarlink"><a href="link.htm" class="sidebarlinkanchor">Custom Art</a></p></div><!-- Main --><div class="section_2b"><h2>Main Section</h2><p>This is the main section</p></div></div>

Set section_2a width to needed menu width in CSSin CSS file:line 23vertical-aling: center;vertical aling  can't be center, but it can be middle. look: http://www.w3.org/TR/REC-CSS2/visudet.html...-vertical-alignedit:RahXephon IS still faster than I! :blink:

Meh, It gets easier with time :)I missed the vertical-align attribute :)' my bad, I fixed it too.Those 'updotes' are called apostrophes (spelling?). But yup, whenever coding be sure to use quotation marks instead. It won'tkill you, but it will look better.
Link to comment
Share on other sites

There is no need for span tags for a block element. use div instead. Think of div's as a box, and span tags as 'lines'.
Thanks - changed this and its a big improvement (also added float tags to allow the two divs to appear on the same line)...
I'd change spans to better tags. By the way in HTML we are using basicly "big quotes" in attributes
I used to use "s all the time, but when you use php and asp, its so much more hassle to code the "s - just using 's saves a lot of time for me (this page will eventually end up as php, but I like to create the basic layout first)!
vertical align can't be center, but it can be middle.
Yeah, sorry, it wasnt working either way, I was checking both just in case I had remembered it wrong.Thank you both for all your help - its already looking much better now... :)
Link to comment
Share on other sites

OK, I have now knocked it down to one problem:It is displaying how I want it to in IE, but in Firefox the 30px of padding that I have specified for my main text is being worked out from the far left (not from my sidebar). I have tried margins but neither work (either appear to work fine in IE)... Any ideas?Thanks again for your help!Frosty.

Link to comment
Share on other sites

OK, I have now knocked it down to one problem:It is displaying how I want it to in IE, but in Firefox the 30px of padding that I have specified for my main text is being worked out from the far left (not from my sidebar). I have tried margins but neither work (either appear to work fine in IE)... Any ideas?Thanks again for your help!Frosty.

It seems as a box model problem to me. Try using the star hack for adjustment of it:
*margin: whatever-looks-good-in-IE;margin: whatever-looks-good-in-Firefox-and-Opera;

Note that this hack should be used ONLY for box model tweaking. IE7 is going to have a new box model which is currently in use by Firefox and Opera. The star hack is not going to apply on it however, so if you got my logic: this hack is going to be like a target for the dead by then IE6.

Link to comment
Share on other sites

Thanks boen_robot.Im the kinda person who needs to understand stuff fully - am I right in saying that this works because IE recognises the *, whereas Firefox doesnt? Or is it a documented way of coding css differences between IE and Firefox/Opera etc?If its the former then my problem is that Im picky as heck, and dont like the sound of hacks like that. Pesky brain! >:)

Link to comment
Share on other sites

You're correct that IE reads css info after a * sign, while Opera and Firefox (correctly so) doesn't. There are lots of so-called "hacks" to fix a css layout in IE, because of IE's lousy CSS 2.1 support. I don't like to use the star hacks however, as they don't validate by w3c's spesification. Instead, you can use conditional statements to detect IE:http://virtuelvis.com/archives/2004/02/css-ie-onlyhttp://msdn.microsoft.com/library/default....comment_ovw.asp

Link to comment
Share on other sites

For future users, I tested boen_robot's idea - it works fine if I reverse the order, ie:

  padding: 20px 20px 20px 220px;  padding*: 20px 20px 20px 20px;

Works perfectly, until I try to validate my css (as Jonas predicted).Thanks Jonas - but I dont really want to have to update 2 different stylesheets...Is there any way to make conditional statements in the actual css file?Also, and I know Im being incredibly picky, I dont really want to have seperate css either, before someone suggests a seperate style tag in the html.If it helps, I will be using css when it is all set up...Thanks again guys,Frosty.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...