OK check out this link:
http://www.emdevelopments.co.uk/demo/cssdemo/
I've had to shrink the fonts down because the image they provided was only 520px wide. Normally I'd up it to 740px wide, so the fonts would be readable...
It's not completely converted, but the hard work is done.
Basically one large top image. menus and titles positioned over it.
Content positioned by margins.
Footer left as an image for the time being.
Wow! DaveSw That is amazing. How in the world did you do that? I mean I understand what everyone has been saying here, but you managed to convert that image. And have links on it be functional. I have the source and will browse it to see what I can learn.
Thank you... but it seems like a miracle to me. :-)
Do you want me to try and explain it? Mind you, it won't seem like a miracle if I do...
Haha. Very true...
Yeah, I would love that. As I am just curious how you managed to create links out of the existing text. Well, actually you removed that text and put in your link text.
I would love it if someone could enlighten me on this miracle :)
Before I forget, I will apologize if it takes me some time to reply. Getting eye surgery done tomorrow. Would see right for a few days. :)
Later
Thanks in advance!
Getting eye surgery done tomorrow
Ouch...
Ok First thing I did was take the screen shots into PSP8.
I then used the clone brush to brush the link text out, as you guessed. If you look closely you can see some background blurring there.
I then saved the cleaned version, cropped it to the top image
http://www.emdevelopments.co.uk/demo/cssdemo/topback.jpg
saved that one. Then I pressed undo to get all the image back, cropped to the bottom piece, and saved that one.
http://www.emdevelopments.co.uk/demo/cssdemo/bottom.jpg
Because of the design of the images I decided it would have to go in the top left corner, as the images wouldn't look right if the design was centralised.
I then set the top image as the background of the page, tucked to the top left corner, set a simple font family (not being unduly bothered what font it was) and removed all margins and padding to get it flush.
body {
background: #3F3F50 url(topback.jpg) 0 0 no-repeat;
font-family: sans-serif;
margin: 0;
padding: 0;
I then created the container div, width same as the image, with a right border to help with debugging and actually improve the appearance slightly. the background color was from the bottom of the gradient, to make the design expand.
Then the title went in via a h1 tag.
<h1><span style="color: #7490B5;">YOUR</span> COMPANY NAME</h1>
An inline span was used to color the 'your' differently as in the original design.
The title had to be absolutely positioned from the top right to make it accurate:
h1 {
color: #fff;
font-size: 14px;
position: absolute;
top:20px;
left: 300px;
}
The position: absolute takes it out of the document flow, so it won't affect the positioning of other elements if someone increases the font size etc.
Then the bit you've been waiting for: the menus.
incidentally I did #nav2 first, but that wasn't anything scientific. It just looked easier...
Because a menu is technically a list of links, I coded them as such. I then hid the bullets, cleaned off the margins, and accurately positioned the box over the place it was supposed to be on the image.
the li elements were used to set the widths, and the a elements then had the colors set.
#nav1 took longer, but only because horizontal lists are a little more tricky in Moz. I could just have floated them right, but then the order would have been reversed, and I preferred to keep the semantic list order.
If you examine the commented code below you'll see what I did:
#nav1 {
position: absolute;
top: 175px;
left: 300px;
}
/* accurately position box from the left hand side */
#nav1 ul {
font-size: 8px;
list-style: none;
margin: 0;
padding: 0;
}
/* font size, hide bullets, remove all spaces around it. */
#nav1 li {
display: inline;
height: 30px;
text-align: center;
width: 51px;
}
/* display inline puts al the li tags in a row. However, if you look closely you may spot where Moz went wrong. Moz doesn't like dimensions on inline elements. So whilst it looked great in IE, moz put then next to each other as plain text. oops. hence the corrective measure in the next step for moz. */
#nav1 a {
display: block;
float: left;
width: 51px;
color: #808080;
text-decoration: none;
}
/* each hyperlink was floated left within it's li element. display block enabled moz to accept dimensions. I should have repeated the height entry in here to get the text vertically centered, but it doesn't matter. */
#nav1 a:hover {
text-decoration: underline;
}
/* the underline effect for the links. */
I then created a content div, and used margins to position it over the blank bit:
#content {
color: #fff;
font-size: 10px;
margin-top: 215px;
margin-left: 180px;
}
Then because I was tired I dropped the footer image in below it. :)
And that was it. About 30mins worth.
Hopefully that helps you somehow!
Regards
Dave
Greetings.
Wow! That bit of "tutorial" was interesting!
Thanks! That got me excited and would want to try it out now. LOL.
How about this: Is it possible to do this without using flash at all?
Refering to your topback.jpg, hide the blue rectangle which accomodates the menu (first page link, second page link, & etc.) on the left at startup. Maybe, replace it with a small button. When the button is clicked, only will the blue rectangle appear on a setInterval manner (slowly unfolds).
yes. you'd use javascript/dhtml, probably javascript as in drop down menu type features.
The blue rectangle would have to be cut off the background image, and put as the background of #nav2 in my code.
I'm not actually into javascript, so I wouldn't be able to code the 'unfold'. However I might be able to find/adapt a script.
The straight show/hide code is simple enough so I'll see if I can dig it out for you.
This is the basic javascript that would show/hide the menu.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/Javascript">
function show(id)
{
el = document.getElementById(id);
if (el.style.display == 'none')
{
el.style.display = '';
el = document.getElementById('more' + id);
el.innerHTML = 'Hide Menu';
} else {
el.style.display = 'none';
el = document.getElementById('more' + id);
el.innerHTML = 'Show Menu';
}
}
</script>
</head>
<body>
<a id="moreinfo"
onclick="javascript:show('info');return false;"
href="#">show menu</a>
<div id="info" style="display: none">
Menu contents
</div>
</body>
</html>The menu div would replace the one with the id of info.
The background would be attached to the div, hence the menu would appear onclick.
the hyperlink text could be replaced with an image for a graphical button.
I'll go in search of a script that includes transitions...
also this link has a different script: http://www.webmasterworld.com/forum91/441.htm
check out the dhtml slide for the animated part: http://www.dyn-web.com/dhtml/slide/
Greetings.
Impressed + thanks a lot for the help.
That really got my interest rising in being a webmaster too. :D
Hi there,
How you doing?
I hope your freelings towards the funeral worked themselves out.
Question...
Does your designer have a portfolio I can take a look at?
Thanks & have a great wknd. :)
Michelle
I am a coder an not an artist, but that is why I work with a graphic designer! :cheesy:
Anyways, CSS (Cascadign Style Sheets) are very powerful and that is what I use for formating and positioning. It is a lot easier than table layouts and you can do alot more. I have the graphic artist create an image in Photoshop, then I have at it. I slice the image up, create the DIVs, position them with CSS, and then you have a beautiful site.
In my opinion, the toughest part is creating a nice design and that is why I use an graphic artist.
I have attached one of the sites you had with some of the divs I would create. The neat thing about CSS is that the DIVs can overlap, like for the Nav bar.
[img]http://www.rcswebdesign.com/css.jpg[/img]Let me know if that helps,
She sure does. What type of work are you most interested in? Print, web, etc... Let me know what you are looking for and we will get you some examples. you can email me at: jason at rcswebdesign.com
Thanks,
Jason
Hi there,
How you doing?
I hope your freelings towards the funeral worked themselves out.
Question...
Does your designer have a portfolio I can take a look at?
Thanks & have a great wknd. :)
Michelle
All I know is that fireworks and photoshop DOES has it similarities. But if your looking for hardcore extentions to enhance your Fireworks then photoshop, then FW is the best way. But if your lookingto make somehting alittle more complicated then I would suggest PS(photoshop). Also alot of graphics artists uses FlashMX with both photoshop and or fireworks.
DaveSW - Thanks again for the tutorial, and info. I am starting to get the concept, but I am having an issue with a particular CSS element. backgroun-position. For each value position what is the order?
Meaning if you go background-position: 0 100px 200px 300px; how do you know what value is used in what property? i.e. top, left, etc!
I just can't seem to figure out a reasoning. Alphabetical, or Logical for the ordering??
Thanks!
lol
Whenever I have a problem like that I head over to the CSS Specification: http://www.w3.org/TR/CSS21/
If you scroll down that page you get to the table of contents.
Appendix F, the full property table, is very useful if you need to know what CSS properties you can use, or you've forgotten the exact wording of it.
Other than that you can look up specific properties in the rest of the spec.
Hope that helps
Dave
I been having trouble with slicing..Its kinda weird when I slice..things dont match properly
Really,to be truthful I am in the very darkest part of the darkness concerning this web designing.Everything sounds Greek to me.Can somebody help me out?I am willing to be a good student and pay atention to my tutor.I want to learn how to design the pages, with what package ( I have photoshop in my software collections though I know not how to use it) and every other thing I may require. Please members help me to grow. Thanks to you all.
Wilmabundus
Really,to be truthful I am in the very darkest part of the darkness concerning this web designing.Everything sounds Greek to me.Can somebody help me out?I am willing to be a good student and pay atention to my tutor.I want to learn how to design the pages, with what package ( I have photoshop in my software collections though I know not how to use it) and every other thing I may require. Please members help me to grow. Thanks to you all.
Wilmabundus
I'd love to help -- where are you at? What questions do you have?
Shannon
Second Platform
I can help also. What program are you using?
I'd love to help -- where are you at? What questions do you have?
Shannon
Second Platform
Shannon,
I am located in the Eastern part of Nigeria.I am on phone,2348056645202; or can you use my yahoo messenger?
wilmabundus@yahoo.com
Waiting to hear from you.
Thanks
Wilmabundus
I can help also. What program are you using?
Okay, I am using windows 2000.But I can upgrade to any better one you may recommend. Waiting to hear from you.
Thanks a million.
Wilmabundus.
You know; I'm honestly impressed with this forum. (dani_web)
Just thought I'd plug that in.
Jared
I'm a coder and I follow rules on web standards. I build site in CSS-p which is pretty easy to learn.
dexterz;
What is CSS-p?
Jared
Here are some sections of my site that use CSS layout. No tables are use even displaying data in category. Feel free to look around and get some idea on how to dsiplay data in 3 cols and rows using table-less layout.
It takes a lot of practice and understanding CSS to create pages like below. We're not only talking placing the div and images in the right place, but also putting data inside the div container in 3 cols & rows.
All these pages have no tables. We don't have table in our dining room.
Look ma! No table DB driven pages.
I can't post all the links here. Just go to my website by clicking my signature below. Got to article,music,freeware,recipe and link directory. You'll see what I mean.
To php4ver: CSS positioning is a method of building website without using tables. Instead of tables, it use element container DIV to layout site.
Have fun!
Just to bite a bit....
if using tables, I can split up graphics, stretch them from 1px wide to what ever is needed, align things without to much fuss, easily and readily use almost any of the numerous wysiwyg efitors..... it's really quite easy to do......
so how am I meant to achieve the same amount of diversity and ease using all this css?
It took me the better part of 4 1/2 hours to knock out what I hope to be a useful layout..... yet I only know its ok in ie6 and ns6 for windows.... I have no idea on other browsers...... I never had these issues with tables!
So, is there a standard technique etc.... a set of commands without using phacks or pass's to ensure the same level of design ease?
If anyone knows, please let me know! I can see why CSS would be great, apart from the fact that it's barely supported in most of the latest browsers, let alone anything else.... I can see I'd use it for font/text colours, sizes, positions etc... and thats it, otherwise it seems to much hardwork for a simple result, which can be done in half the time with a table!
Also, someone made a wonderful site by usoing background graphics! It really did look the business..... yet I thought that sort of practice was fround upon almost as much as using tables.... is it possible to apply and position the graphics piecemeal in CSS only?
if you show us what you've got we'll see if we can tell you how to build it better ;)
well, the problem is that I can play all day using standard html and generate a pretty page or two.... merely by placing graphics in cells or as cell backgrounds... looks nice, saves on load times etc. compared to dumping a whole image.... yet trying the same thing with css is a pain!
I shouldn't need to do any examples.... I thought everyone was either having the issues, or had found a way round it!
Still, I'll knock out some dummy pages to day, post them on my site somewhere, then link up! (the posts will be the tables side of layout/design, not the css!)
Then if anyone can see methods of using css to do the same, please..... tel me! I'll get on my knees and beg - ( if needed, or if you ask nicely :grin: ).
Further question... is it considered acceptable to use tables with css?
infact, is it possible to use css and tables together? Not using css to format tables porperties or contents as per the standard, but to place divs. float images etc?
The puritan view would be that tables are for data, css is for layouts, but using tables with css properties is often a good way to learn more about CSS.
I've been helping Merijn (author of HiJackThis) with a new layout for his site entirely in css, and that's pretty complicated - top tabs, side tabs, etc.
So some links you might like to browse to see what is possible:
http://www.csszengarden.com/
http://css.maxdesign.com.au/listamatic/
http://www.alistapart.com/articles/practicalcss/
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.