CSS/HTML Problem

  • Dorsa
  • Novice
  • Novice
  • Dorsa
  • Posts: 23

Post 3+ Months Ago

Hello
I have a web design template that I made in photoshop. I am trying to convert it to HTML/CSS. The first issue I have ran into is that it technically has no "header". the menu and banner run along the left side and at the top middle is my first set of text. The top right has my Twitter and Youtube buttons.

I am rather confused as to if I should have a header, or if i should make it the page width, or if I should just make it the width of my first set of text.
Here is a picture of the template. I really just need help deciding how to slice it and code it.
Image

Please advise me as to what I should do.
I am just beginning CSS and HTML coding.
  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 685
  • Loc: ATL-GA

Post 3+ Months Ago

Its ok not to have a header. And normally I wouldn't suggest this but if you are new to coding then you might want to try letting Photoshop rip the code for you. What version of PS are you using?
  • Dorsa
  • Novice
  • Novice
  • Dorsa
  • Posts: 23

Post 3+ Months Ago

CS4 but I am attending a school for Media Production and Design and I will be learning this there. So I was hoping I could get some experience before.

But i was thinking I could slice it into two columns. Divide the menu from the content section and then from there create individual columns and rows for the menu and "header". And more individual columns on the right side for the titles and content text and for the youtube and twtitter.

ideas?
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

Dorsa wrote:
But i was thinking I could slice it into two columns. Divide the menu from the content section and then from there create individual columns and rows for the menu and "header". And more individual columns on the right side for the titles and content text and for the youtube and twtitter.

ideas?


They are called <div>. Give them "class" attributes
Code: [ Select ]
<div class="left">
blahblahblah
</div>
<div class="right">
<div class="top">
     blahblahblah
</div>
blahblahblah
</div>
  1. <div class="left">
  2. blahblahblah
  3. </div>
  4. <div class="right">
  5. <div class="top">
  6.      blahblahblah
  7. </div>
  8. blahblahblah
  9. </div>

and arrange them thus in your css:
Code: [ Select ]
.left {position: absolute; top: 20px; left: 20px; width: 45%}
.right {position: absolute; top: 20px; right: 20ps; width: 45%}
  1. .left {position: absolute; top: 20px; left: 20px; width: 45%}
  2. .right {position: absolute; top: 20px; right: 20ps; width: 45%}

"top" may not need any positioning initially because it is inside "right".

However, CS4 is for designing flash interfaces which ARE NOT html/css.
  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 685
  • Loc: ATL-GA

Post 3+ Months Ago

This will walk you through slicing in photoshop, if you are not comfortable with coding by hand. The code it spits out isn't the best, but it does do the work for you and it will give you a starting point.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 19 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.