July 25, 200818 yr Hi there, Managed to put some kinda site together, Started with Adobe photo shop and produced a layout (could still do with some work, but will do for learning). Split the image up into sections, Adobe lets you "save as webpage" which actually produces a HTML document with the split layout set in tables... From my experience Tables = bad unless for tabular data so.... this is where I started... I removed all mention of tables and ended up with a list of images. I then split the images in sections using <div id="Section - Name">, for example logo, header, etc... Then used CSS to set the layout how I wanted... This is when I came stuck... I wanted the header, logo, footer, links all to be done via CSS and basically if I made a single change I wanted that to affect all pages and finally the only information that I wanted to be different for each page would be the content section (under the div background). I didn't archive this (it was getting late and I may have just lost the plot at this particular point in time). So... this is where I ask for a little feedback, hints, tips, pointers to web urls that will help with my quest to learn how to do this god damn thing properly I was thinking of possibly using php to link into other php pages for footer, header? but not sure if there is a better way. So.... basically the code in the html file for the logo, header, footer, links and the actual body shouldn't need to change per HTML page only the main body in the background div should change per page. Here is the code... Main HTML page for one of the pages (one with the least content): <html> <head> <title>Silhouette Behind The Gun : Offical Site</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="style.css" type="text/css" media="screen"> </head> <body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="logo"> <a href="index.html"><img src="images/index_01.jpg" alt="" width="182" height="206" border="0"></a></div> <div id="header"> <img src="images/index_02.gif" width="568" height="58" alt=""> </div> <div id="background"> <img src="images/index_03.gif" width="568" height="365" alt=""> <p style="position: absolute; top: 1em; left: 1em; right: 10em; width: 435px; padding: 0px; font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; height: 264px;"> <font color="#ffffff"> <center> BIO's </center> <br /> <br /> Adam Smith - Drums<br /><br /> Andrew Busby - Bass<br /><br /> Chris Sharples - Lead Vox. / Rythmn Guitar<br /><br /> John Roberts - Lead Guitar<br /><br /> ***More To Come*** </font></p> <p style="position: absolute; top: 1em; left: 1em; right: 10em; width: 435px; padding: 0px; font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; height: 264px;"><font color="#ffffff"><br /> <br /> <br /> </font></p> </div> <div id="links"> <a href="gigs.html"><img src="images/index_04.gif" alt="" width="182" height="36" border="0"></a> <a href="news.html"><img src="images/index_05.gif" alt="" width="182" height="36" border="0"></a> <a href="bio.html"><img src="images/index_06.gif" alt="" width="182" height="36" border="0"></a> <a href="media.html"><img src="images/index_07.gif" alt="" width="182" height="36" border="0"></a> <img src="images/index_08.gif" width="182" height="35" alt=""> <img src="images/index_09.gif" width="182" height="38" alt=""></div> <div id="footer"> <img src="images/index_10.gif" width="750" height="27" alt=""> <p style="position: absolute; top: 1px; left: 193px; right: 10em; width: 384px; padding: 0px; font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; height: 27px;"> <font color="#ffffff"> © SBG 2008 - Created by IkkleDarkAngel.com Web Design</font></p> </div> </body> </html> Here is my current CSS style file: #logo { position: absolute; left: 200px; top: 0px; width: 182px; height: 206px; } #header { position: absolute; left: 382px; top: 0px; width: 568px; height: 58px; } #background { position: absolute; left: 382px; top: 58px; width: 568px; height: 361px; } #links { position: absolute; left: 200px; top: 206px; width: 182px; height: 217px; } #footer { position: absolute; left: 200px; top: 425px; width: 750px; height: 27px; } Link to working site: SBG - website The css file is called style.css Image of the current site:
July 25, 200818 yr Hi, I would forget about PHP for the time being. PHP includes are very useful but I would start at the beginning if I were you. Get to grips with html and css (they really aren't that difficult to learn) and get a clear understanding of how things work. Once you've got a handle on how layouts come together and you've produced the page in html/ external css, everything else will follow. htmldog and w3schools are worth checking out.
July 25, 200818 yr The text isnt displaying correctly for me, i think its to do with using position absolute, it really doesn't work like you want it to. It could be done very easily just by putting the header, menu and content in separate divs and setting the stripes as a background image with no repeat. Its worth while having a good look at the links Elanman posted.
July 27, 200818 yr Author Hey again, Thanks for the info ElanMan I've used php/sql before, my final year project at uni was based on using it, the bit I've always struggled with is layout Used to use tables for the layout, but well currently trying to start back from scratch and learn how to use Adobe Photoshop to design a nice looking site then using html/css to put it together and hopefully work... Well currently got it kinda working in Firefox, doesn't work in IE though lol Which brings me to J.P's comments Thanks for the message, once I got that I remembered I hadn't checked it in IE... The text doesn't place correctly when viewed in IE. Any idea why? It could be done very easily just by putting the header, menu and content in separate divs and setting the stripes as a background image with no repeat. They are all in separate div's already, I've now changed the background to be a background-image with no repeat, seems to work. Not sure about the text, the wired thing is I've got one chunk of text that is the main content that doesn't view right (should view central under the header) but I have an Identically formatted smaller chunk of text for the footer which seems to work how I want it both in IE and Firefox? Any ideas? Mike
July 28, 200818 yr Author This may have answered my own question... Other Thread I can create another CSS file for IE and one for Firefox/Opera etc... Looking at the code above, is there a different or better way to create a text section and place it in the centre of the image? Thanks Mike
July 28, 200818 yr Author SBG Updated... Should now work in IE and Firefox via two different style sheets.. Thanks for the input
Create an account or sign in to comment