Member Avatar for President007

Hi,
Im making a website by designing in Photoshop and then slicing and pasting in to Dreamweaver.
My problem is; im trying to paste my slice in to Dreamweaver, instead of pasting right after the last slice it keeps going to the following line...:s


Any help would be appreciated.

  • 5 Contributors
  • 14 Replies
  • 98 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by President007

Dani AI

Generated

A concise followup to the thread: this was the common case of the menubar container being too narrow for the slices. fixed it by widening the menubar rule so the images could sit side by side. That explains why the third slice dropped to the next line even though the images themselves were fine.

Technical checks and quick fixes that complement answers from and :

  • Confirm the parent container width is at least the sum of the image widths (remember margins, padding and borders add to that total).
  • Check computed styles in the browser dev tools to see if img has display:block applied; inline images wrap differently than block images.
  • Two straightforward CSS approaches:
/* float method (clears required) */
#menubar img { float: left; }
#menubar { overflow: auto; /* contains floats without extra markup */ }
/* inline-block method (avoids float clearing) */
#menubar img { display: inline-block; vertical-align: top; }
#menubar { white-space: nowrap; /* prevents wrapping between inline-block items */ }

Best practice notes: use slices exported with "Save for Web" as suggested, or convert repeated nav images into a CSS-based nav or a sprite to reduce requests and fragility. When keeping fixed slices, always test in the browser and inspect computed widths to catch hidden causes of wrapping.

Recommended Answers

All 14 Replies

Member Avatar for papanyquiL

Could you be a bit more specific and post the code you're using as well?

Member Avatar for President007

Well I designed site in Photoshop.
After defining site I started pasting the slices in to Dreamweaver.
The Header went in fine, the second slice went in fine and in correct position, however the third slice instead of going in after the previous slice goes to a seperate line.

<body>
<div id="container">
<div id="header"><img src="header.jpg" alt="Fusion Designz header" width="955" height="215" />
<div id="menubar"><img src="m1.jpg" alt="m1" width="304" height="53" /><img src="homebutton.jpg" alt="Home Button" width="77" height="53" /></div>
</div>
</div>
</body>
</html>

Member Avatar for Member #334542

You can just do that from photoshop Go to – File -> Save for web

Member Avatar for bettersaid

cant understand the problem, but maybe the ff could help

>> make sure you have sliced the images with the same height and width.

>> check your alignment -> center, align left or right

>> much better if you put your sliced images on a table inside a div layer

Member Avatar for President007

If the image is not the same height and witdth will that be an issue?
As they are not the same width.

I have checked alighnment.

Member Avatar for Member #334542

That is not an issue.

Member Avatar for President007

Please advise what could be the issue?

Member Avatar for papanyquiL

I think I see what you're doing. You're pasting in a Nav Bar image directly into HTML, then you're trying to paste in a Home button ontop of that image via HTML also. You can't do that. Try setting the Nav Bar image in CSS, not in your HTML. Do the same for your home button image, that way they don't paste beside eachother.

Member Avatar for President007

Yes you have understood what what Iv been doing, however, I do want them to paste beside each other. But everytime I paste the Home button seems to go to a seperate line.

Member Avatar for President007

Thank you Thank you Thank you all
I have figured it out
When I made a new rule for the menubar div tag - I made the width as long as my previous image and not for the whole 955 px as it should have been

Member Avatar for papanyquiL

***EDIT****

No problem.

Edited by papanyquiL because: n/a
Member Avatar for President007

Thank you papanyquiL

Member Avatar for dataminerz

Thanks for sharing interesting post and interesting views.

Member Avatar for President007

I was thinking the same at the time lol

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.