/    Sign up×
Community /Pin to ProfileBookmark

Designed layout html problem

Copy linkTweet thisAlerts:
Nov 10.2006

Hello all,

I’m having problems with my Photoshop designed layout.

This is what it looks like at first(correct):
[url]http://dialogue.awardspace.com/test/default.html[/url]

This is what happens when I try to add some text and content:
[url]http://dialogue.awardspace.com/test/oki.html[/url]

What is that white stuff doing there? Is it something wrong with the spacer.gif(the slice thing and html was done by photoshop/imageready)? Error with the slicing or html?
And how to correct it?

Thanks in advance.

to post a comment
HTML

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@grumpyoldtechsNov 11.2006 — <img src="images/default_02.gif" width="404" height="265" alt=""></td>

theirs your problem it needs to be:

<td style="background-image:url(../images/default_02.gif); background-repeat:none;">

that for a quick fix. your trying to write on top of images they need to be background images

you ideally need to cut the images up different i also suggest you look into CSS layouts rather than trying to use tables.

its easier to learn CSS layouts from the start before you get into the bad ways of table layouts.
Copy linkTweet thisAlerts:
@MerlaauthorNov 11.2006 — Oh..

Actually read about it quite a bit since my first post(about what you replied) and I will definitely give it another try, rewriting the full code and using css instead of tables.

Thanks for your quick reply!!! And also for your tips.
Copy linkTweet thisAlerts:
@grumpyoldtechsNov 11.2006 — just post if you get stuck im always more than happy to help someone along the path to enlightenment
Copy linkTweet thisAlerts:
@MerlaauthorNov 11.2006 — Thanks.

By the way.. My image is correctly sliced now and set as background image. But background-position:center; won't work? Now it's just left aligned which looks a bit silly.

What's gone wrong?

/* CSS Document */

body {margin:0px;

padding:0px;

font:Verdana, Arial, Helvetica, sans-serif;

font-size:10px;

color:black;

background-position:center;

}

#banner {

background-image:url(default_01.gif);

background-position:center;

height:209px;

width:760px;

}

etc..
Copy linkTweet thisAlerts:
@grumpyoldtechsNov 11.2006 — the whole site or just the banner image?

try that and see if it works

#banner {

background-image:url(default_01.gif);

background-position:center;

height:209px;

width:760px;

margin:0 auto;

}
Copy linkTweet thisAlerts:
@MerlaauthorNov 11.2006 — Ah yes, that's working? Thanks!

How would I be best off adding text to that left content box?

The box will be filled with news, so a scrollbar function would be nice.

Any solution?
Copy linkTweet thisAlerts:
@grumpyoldtechsNov 11.2006 — in your style sheet have

#newscont{

width:200px;

height:300px;

overflow:auto;

}

<div id="newscont">

your news in here

<div>
×

Success!

Help @Merla spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...