Design problem

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I have a problem on a site template that I made.

http://www.freewebs.com/elitezenith/Site%202/Index.html

that is the template. Below is an image on how it is supposed to look like.

Image

If anyone can help me, then that would be great.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • STeeLRaT
  • Graduate
  • Graduate
  • User avatar
  • Posts: 183
  • Loc: somewhere

Post 3+ Months Ago

Is this a joke?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

STeeLRaT wrote:
Is this a joke?


What do you mean? I'm using Firefox to preview my site and it is wrong. I"ll post a picture of how it looks like if you can't notice any difference between the template and the template.

Are you using IE to view it? So, maybe it works right in IE. I don't have a way to test my site in IE since I don't have the IE browser or those Testing browsers that have like 3 browsers in it.

Before I post a picture of how my site looks like (the difference between the image and the site itself) I'll try to explain it since you don't see any. If you click that link you will see a template that looks just like the image. Well, if you look to the right edge of the template you will see that it isn't just like the image. The template is supposed to be 600px wide but it goes over that set width on the right and the background of some table cells start to repeat. The logo itself is 600pxs so I know that it isn't filling in the missed pixels since there are none pixels that are missed.

I hope that you understand that. And no, this isn't a joke and I don't know what you mean by that.
  • Show69
  • Beginner
  • Beginner
  • User avatar
  • Posts: 35
  • Loc: South Africa

Post 3+ Months Ago

The above pic you posted off how it should look, well if i follow your link and open it in IE 7 i can see what you me it is out of preportion totaly mest up i will see what i can do will post my again
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Hey people. I'm still having this problem. It would be really great if somebody was able to help me out on this.
  • cjxxi
  • Expert
  • Expert
  • cjxxi
  • Posts: 565
  • Loc: Fort Worth, TX

Post 3+ Months Ago

i think you need to give a fixed height to the background image Index_08 because its using background-repeat:repeat-y; or repeat; (i haven't take a look) but either way,
and it needs be no-repeat; and give it a fixed height or try auto for height;
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

It's not CSS, it's tables :oops:

Quote:
Code: [ Select ]
<td colspan="2" background="images/Index_08.gif" height="32px" width="100px">

  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6250
  • Loc: Seattle, WA

Post 3+ Months Ago

Bogey wrote:
It's not CSS, it's tables :oops:

Well there's your problem.

C'mon man, you know better...
  • cjxxi
  • Expert
  • Expert
  • cjxxi
  • Posts: 565
  • Loc: Fort Worth, TX

Post 3+ Months Ago

why do you act like stupid, grow up man, spork is right.

LOL.. JK
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Dude, I know I'm supposed to use CSS, that were slices in Photoshop and saved for web. Photoshop saves the document as Tables and not CSS. I wanted to fix it up in tables and then convert it to CSS, but I guess I have to start converting it to CSS while it's messed up.
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6250
  • Loc: Seattle, WA

Post 3+ Months Ago

Yeah, I figured as much. I'm really surprised they haven't changed Photoshop to export using DIVs and CSS.
  • cjxxi
  • Expert
  • Expert
  • cjxxi
  • Posts: 565
  • Loc: Fort Worth, TX

Post 3+ Months Ago

spork wrote:
Yeah, I figured as much. I'm really surprised they haven't changed Photoshop to export using DIVs and CSS.



that is exactly what my friend told me about adobe fireworks
  • cjxxi
  • Expert
  • Expert
  • cjxxi
  • Posts: 565
  • Loc: Fort Worth, TX

Post 3+ Months Ago

was trying t help you out, but found some images missing,

Code: [ Select ]
<style>

#first
{
float:left;
background-image: url(http://www.freewebs.com/elitezenith/Site%202/images/Index_01.gif);
background-repeat:no-repeat;
width:163px;
height:144px;
}

#second
{
float:left;
position:relative;
background-image: url(http://www.freewebs.com/elitezenith/Site%202/images/Index_02.gif);
background-repeat:no-repeat;
width:437px;
height:144px;
}

#red_line
{
clear:both;
position:relative;
margin-top:-23px;
}

#second_red_line
{
position:relative;
margin-top:-4px;
}

#next_red_line
{
position:relative;
margin-top:-4px;
}


#index6
{
clear:both;
position:relative;
margin-top:-8px;
}

#index7
{
background-image: url(http://www.freewebs.com/elitezenith/Site%202/images/Index_07.gif);
background-repeat:no-repeat;
width:14px;
height:497px;
margin-top:-4px;
}


#container1
{
background-image: url(http://www.freewebs.com/elitezenith/Site%202/images/Index_08.gif);
width:161px;
height:32px;
margin-top:-497px;
margin-left:14px;
}

#index9
{
background-image: url(http://www.freewebs.com/elitezenith/Site%202/images/Index_09.gif);
width:10px;
height:497px;
margin-top:-32px;
margin-left:174px;
}

#index10
{
background-image: url(http://www.freewebs.com/elitezenith/Site%202/images/Index_16.gif);
width:600px;
margin-top:-56px;
margin-left:14px;
}





#line_passingby
{
background-image: url(http://www.freewebs.com/elitezenith/Site%202/images/Index_13.gif);
width:160px;
height:auto;
margin-top:-428px;
margin-left:14px;
}

#container2
{
background-color:#700000;
width:161px;
height:400px;
margin-left:14px;
margin-top:-4px;
}


#container3
{
background-color:#700000;
width:417px;
height:395px;
margin-left:184px;
margin-top:-400px;
}

#index10_2
{
background-image: url(http://www.freewebs.com/elitezenith/Site%202/images/Index_10.gif);
width:400px;
height:28px;
margin-top:-428px;
margin-left:186px;
}



</style>
<div id='first'></div>
<div id='second'></div>
<div id='red_line'>
<img src="http://www.freewebs.com/elitezenith/Site%202/images/Index_03.gif">
</div>
<div id='second_red_line'>
<img src='http://www.freewebs.com/elitezenith/Site%202/images/Index_04.gif'>
</div>
<div id='next_red_line'>
<img src='http://www.freewebs.com/elitezenith/Site%202/images/Index_05.gif'>
</div>
<div id='index6'>
<img src='http://www.freewebs.com/elitezenith/Site%202/images/Index_06.gif'>
</div>
<div id='index7'></div>

<div id='container1'></div>
<div id='Index9'></div>
<div id='index10'></div>



<div id='line_passingby'></div>
<div id='container2'>
menu and stuff
</div>

<div id='container3'>
</div>
  1. <style>
  2. #first
  3. {
  4. float:left;
  5. background-image: url(http://www.freewebs.com/elitezenith/Site%202/images/Index_01.gif);
  6. background-repeat:no-repeat;
  7. width:163px;
  8. height:144px;
  9. }
  10. #second
  11. {
  12. float:left;
  13. position:relative;
  14. background-image: url(http://www.freewebs.com/elitezenith/Site%202/images/Index_02.gif);
  15. background-repeat:no-repeat;
  16. width:437px;
  17. height:144px;
  18. }
  19. #red_line
  20. {
  21. clear:both;
  22. position:relative;
  23. margin-top:-23px;
  24. }
  25. #second_red_line
  26. {
  27. position:relative;
  28. margin-top:-4px;
  29. }
  30. #next_red_line
  31. {
  32. position:relative;
  33. margin-top:-4px;
  34. }
  35. #index6
  36. {
  37. clear:both;
  38. position:relative;
  39. margin-top:-8px;
  40. }
  41. #index7
  42. {
  43. background-image: url(http://www.freewebs.com/elitezenith/Site%202/images/Index_07.gif);
  44. background-repeat:no-repeat;
  45. width:14px;
  46. height:497px;
  47. margin-top:-4px;
  48. }
  49. #container1
  50. {
  51. background-image: url(http://www.freewebs.com/elitezenith/Site%202/images/Index_08.gif);
  52. width:161px;
  53. height:32px;
  54. margin-top:-497px;
  55. margin-left:14px;
  56. }
  57. #index9
  58. {
  59. background-image: url(http://www.freewebs.com/elitezenith/Site%202/images/Index_09.gif);
  60. width:10px;
  61. height:497px;
  62. margin-top:-32px;
  63. margin-left:174px;
  64. }
  65. #index10
  66. {
  67. background-image: url(http://www.freewebs.com/elitezenith/Site%202/images/Index_16.gif);
  68. width:600px;
  69. margin-top:-56px;
  70. margin-left:14px;
  71. }
  72. #line_passingby
  73. {
  74. background-image: url(http://www.freewebs.com/elitezenith/Site%202/images/Index_13.gif);
  75. width:160px;
  76. height:auto;
  77. margin-top:-428px;
  78. margin-left:14px;
  79. }
  80. #container2
  81. {
  82. background-color:#700000;
  83. width:161px;
  84. height:400px;
  85. margin-left:14px;
  86. margin-top:-4px;
  87. }
  88. #container3
  89. {
  90. background-color:#700000;
  91. width:417px;
  92. height:395px;
  93. margin-left:184px;
  94. margin-top:-400px;
  95. }
  96. #index10_2
  97. {
  98. background-image: url(http://www.freewebs.com/elitezenith/Site%202/images/Index_10.gif);
  99. width:400px;
  100. height:28px;
  101. margin-top:-428px;
  102. margin-left:186px;
  103. }
  104. </style>
  105. <div id='first'></div>
  106. <div id='second'></div>
  107. <div id='red_line'>
  108. <img src="http://www.freewebs.com/elitezenith/Site%202/images/Index_03.gif">
  109. </div>
  110. <div id='second_red_line'>
  111. <img src='http://www.freewebs.com/elitezenith/Site%202/images/Index_04.gif'>
  112. </div>
  113. <div id='next_red_line'>
  114. <img src='http://www.freewebs.com/elitezenith/Site%202/images/Index_05.gif'>
  115. </div>
  116. <div id='index6'>
  117. <img src='http://www.freewebs.com/elitezenith/Site%202/images/Index_06.gif'>
  118. </div>
  119. <div id='index7'></div>
  120. <div id='container1'></div>
  121. <div id='Index9'></div>
  122. <div id='index10'></div>
  123. <div id='line_passingby'></div>
  124. <div id='container2'>
  125. menu and stuff
  126. </div>
  127. <div id='container3'>
  128. </div>
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6250
  • Loc: Seattle, WA

Post 3+ Months Ago

cjxxi wrote:
that is exactly what my friend told me about adobe fireworks

Yeah, I use Fireworks 8 and that is my biggest gripe. Manually slicing and positioning images is a pain, although I suppose creating the CSS from scratch is better in the long run anyways.
  • cjxxi
  • Expert
  • Expert
  • cjxxi
  • Posts: 565
  • Loc: Fort Worth, TX

Post 3+ Months Ago

THATS TRUE, BUT ANYWAY, IF IT WOULD GENERATE THE CSS IT WOULD BE MUCH BETTER, AND A TIME SAVER, IMAGIN ALL THE THINGS WE COULD ACOMPLISH IS THE TIME WE SPEND DOING THAT. MAY BE MORE PRODUCTIVITY OR SOMETHING
  • Fabinator
  • Proficient
  • Proficient
  • Fabinator
  • Posts: 467

Post 3+ Months Ago

@cjxxi, Why do you use all those capital letters? It does not read well.

adding this can help maybe:
Code: [ Select ]
* {
margin: 0;
padding: 0;
}
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

Image
Jinx.com

Anyways :)

I dont really want Photoshop to export in CSS, it might be handly but I think people should code their own webpage. Plus, all the images I use for my CSS templates are 1 pixel in width or height. Slicing doesnt help much anymore, at least for me. The only text I have on an image are my banners. Google has a hard time reading what an image says ;)


And even then I try to put an h1 tag hidden under it for search engines to look at.
  • jammer2552
  • Graduate
  • Graduate
  • User avatar
  • Posts: 139

Post 3+ Months Ago

Has this been solved? If not, give me 5 min and I'll fix it.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

It has not being solved.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I have now solved it... :D I had some time today and some determination on solving it :D

http://www.freewebs.com/elitezenith/Site%202/index.html

Also, can someone check it in IE? I don't have IE so I can't check it.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

looks almost perfect in IE6 - just the second box on the left side doesn't stretch down as far as the one on the right - but I guess that depends on their length. Otherwise looks great.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

celandine wrote:
looks almost perfect in IE6 - just the second box on the left side doesn't stretch down as far as the one on the right - but I guess that depends on their length. Otherwise looks great.


AWESOME! AWESOME! AWESOME! Thanks :D
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

spork wrote:
Yeah, I figured as much. I'm really surprised they haven't changed Photoshop to export using DIVs and CSS.

You can generate CSS instead of tables- you just have to change the output settings. Here's an article about it.

Personally, I prefer to hand code stuff but this definitely beats using tables for layouts. :roll:
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6250
  • Loc: Seattle, WA

Post 3+ Months Ago

jameson5555 wrote:
Personally, I prefer to hand code stuff but this definitely beats using tables for layouts. :roll:

Agreed.

Post Information

  • Total Posts in this topic: 24 posts
  • Users browsing this forum: No registered users and 67 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
 
cron
 

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