MONICA'S SITE.... NEW DESIGN... YAY OR NEIGH??

[NoOne]

I am smack dab in the middle of redesigning my site. This is what I have so far www.monicas2hot.com/home.htm

my old site is www.monicas2hot.com/main.htm

please tell me which design you prefer and also alert me to any errors you might find with the new design. thank you, 8)

[christoronto]

like the flame job and the navigation is straight forward and simple... two thumbs up

[kalina]

I am smack dab in the middle of redesigning my site. This is what I have so far www.monicas2hot.com/home.htm

my old site is www.monicas2hot.com/main.htm

please tell me which design you prefer and also alert me to any errors you might find with the new design. thank you, 8)

The only problem I have with the splash page is an aesthetic one. The Home tab on the left side should be bottom aligned to match the rest of the flame picture.

[TSMorena35]

I like the new design mama

[mobile]

Me Likey

[AsiaMei]

I am smack dab in the middle of redesigning my site. This is what I have so far www.monicas2hot.com/home.htm

my old site is www.monicas2hot.com/main.htm

please tell me which design you prefer and also alert me to any errors you might find with the new design. thank you, 8)

The only problem I have with the splash page is an aesthetic one. The Home tab on the left side should be bottom aligned to match the rest of the flame picture.

I agree ... But overall it looks cute ... I like the whole flames effect!

[xact]

I like it!

[I Want A Tgirl]

I like it. You are a great web designer.

[Ecstatic]

Huge improvement, Moni. This new site is truly looking professional. Kalina is right about the alignment. Also, do you plan on background graphics on the other pages? And content on the homepage overlaying the background? You might consider a fade on the background for the other pages. The navigation is clear and easy to follow, and the styles are nicely applied. I like the changing section titles on the left.

[NoOne]

when u say bottom aligned what do u mean?? it shows up aligned on my computer??

ECSTATIC WHERE ARE YOU!!!!! lmao. Someone tell me how to make it align perfectly on everyones comp!!!

[Ecstatic]

It is aligned correctly in IE (WinXP/IE 6.0), but not in Firefox (WinXP). Here's a screenshot:

[NoOne]

how do i fix it, my specialty is graphics not really web design.

[Kukm4]

I like it. It would be nice to see a cute picture of you on the home page.
I had a question, did you design this using MS FrontPage?

http://leoville.tv/radio/ShowNotes/Show196#toc10
"...English teacher who made the mistake of designing hundreds of pages with Microsoft FrontPage. Unfortunately, they don’t work with anything but Internet Explorer"
The host, Leo recomended using Deamweaver if you look at that link there is also a page on how to take existing Frontpage files and explains how to migrate to Deamweaver; along with other listners advice.

I look forward to seeing more.

[NoOne]

no i used dreamweaver

[Ecstatic]

Moni, I'll try to take a look at the code later, but I'm tied up in client meetings the rest of the day. At a guess, it must have to do with the positioning of layers in the file, assuming you're using layers to position the elements, that is.

[Gia Darling]

i love it sweeetie its very clean modern and simple
its not overwelming
i think its great

my little girl is all grown up!!!! :cry:

love you moni

[Kukm4]

I'm trying a few google searches, I hope one of these can help.

http://www.howtocreate.co.uk/wrongWithIE/eightpointbox.html

Side note. I dont have nay web design skills. I looked at the code.

<div id="Layer2" style="position:absolute; width:49px; height:245px; z-index:2; left: 4px; top: 0px;">http://www.monicas2hot.com/images/sidehome.gif</div>
In IE. it looks fine.

If I change [ top: 0px] TO [ top: 16px]. It will look right in Firefox, but at same time it will no longer look right in IE. Could the pob. be just in that line of code or does it go beyond just this line of code?

[NoOne]

This has been a common problem I have with all sites I have designed. They always come out a little haywire in everything except aol and internet explorer. I dont know how to adjust it properly for both, Like i said when it comes to graphics I'm superb, I designed the header for sexxxy jade's forum, wendy's avatar here, and every graphic on every one of my sites but when it comes to web design itself my skills seem to be limited. i do the best i can with what i know though.

i plan on adding pix and all that stuff later. the new version hasn't even been released yet i just thought i would give ya'll a sneak peek. if you go to www.monicas2hot.com you'll notice my site is still the same. i will let u all know when the new versions complete and ready to be launched.


p.s.- thanks gia, that's kind of what I was going for, a clean, simple, easy to navigate, user friendly site with style and of course the theme "fire" cuz of my site name monicas2hot. wait til it's finished, i'm working really hard on this one. all those graphics literally took me like 7 hours. :D

[Ecstatic]

Moni, you do excell at graphics. Coding is something else. I've been doing it for over 8 years and I still get befuddled sometimes. I'll try to take a look at the code later, like I said. But the look and feel is excellent, and I think a big improvement over the previous look.

[Ecstatic]

Moni, the solution is simple--so simple, I totally didn't see it at first. Simply add margin=0px to the paragraph containing the mouseover images. IE is displaying this without any buffer, but Firefox is adding buffer unless you specify it as 0px:


<div id="Layer3" style="position&#58;absolute; width&#58;899px; height&#58;477px; z-index&#58;3; left&#58; -18px; top&#58; 44px;">
<div id="Layer2" style="position&#58;absolute; width&#58;49px; height&#58;245px; z-index&#58;2; left&#58; 4px; top&#58; 0px;">http&#58;//www.monicas2hot.com/images/sidehome.gif</div>

<div id="Layer1" style="position&#58;absolute; width&#58;768px; height&#58;393px; z-index&#58;1; left&#58; 128px; top&#58; 0px;">
<div align="left">
<p align="center" style="margin&#58; 0px;">http&#58;//www.monicas2hot.com/images/newnavfade1.gif

As soon as I added style="margin&#58; 0px;" to the p tag above, the sidehome image aligned in Firefox with the main graphic and remained aligned in IE. Also, note that you really don't need that initial div tag <div align="center">I deleted that and the layout remained the same.

[kalina]

how do i fix it, my specialty is graphics not really web design.


Moni,

Check this out...

http://www.transvamp.com/bottom_align.html

and look at the source code. The secret to aligning pics is using the valign tag. You define it after a TD tag (check the source code).

[NoOne]

thank u for that tutorial both of u. um i made a change so can 1 of u please tell me if the view is fixed now on MAC or whatever.

THANKSSSSSSSSSSS

[kalina]

thank u for that tutorial both of u. um i made a change so can 1 of u please tell me if the view is fixed now on MAC or whatever.

THANKSSSSSSSSSSS

Look great on my Mac! :D
I tested it on Safari and Netscape.

[NoOne]

YAYYYYYYYYYYYYY

[Chris]

I love it! The flames really do a lot.
If it were me I'd change the mouseovers on the links to just use standard css to swap the graphics so you can lose the whole javascript (fairly easy to do) plus changing the site layout in the future would just require changing the css stylesheet to change the whole look sitewide.

One trick I use to make IE work more like firefox is to add this to any site I do as a standalone base stylesheet. The stylesheet is really just there to strip out everything that browsers have built into the rendering engine to allow you a totallly blank slate to make sure that each browser will (hopefully) show your site exactly the same
:
/* link underlines tend to make hypertext less readable,
because underlines obscure the shapes of the lower halves of words */
&#58;link,&#58;visited &#123; text-decoration&#58;none &#125;

/* no list-markers by default, since lists are used more often for semantics */
ul,ol &#123; list-style&#58;none &#125;

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code &#123; font-size&#58;1em; &#125;

/* remove the inconsistent &#40;among browsers&#41; default ul,ol padding or margin */
/* the default spacing on headings does not match nor align with
normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/* nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,bl ockquote,fieldset,input
&#123; margin&#58;0; padding&#58;0 &#125;

/* whoever thought blue linked image borders were a good idea? */
a img,&#58;link img,&#58;visited img &#123; border&#58;none &#125;

/* de-italicize address */
address &#123; font-style&#58;normal &#125;

/* more varnish stripping as necessary... */


One other thing I try to do (on the advice of my design mentors, is to code and check the site in Firefox making sure it validates as clean html and then apply fixes in Internet Explorer.

Sort of offtopic but would it be possible to maybe get a new subforum here for those of us nerds/geeks to post tutorials and share ideas on marketing with each other? I'm sure between kalina, you, ecstatic, myself and any other design minded people, we could post quite a few nifty ideas, plus in the longrun if other web/graphic design folk find a link to the tutorial that traffic would pick up? Just an idea though.

While I may sound like a freak about css it does make quite a difference in page loading time and bandwidth. My site http://cdcstudios has a completely 100% CSS driven layout (If you have the Firefox web developers extension (http://chrispederick.com/work/webdeveloper) you can easily turn off the css to see what I mean.

/end css worship :)

[WEBGODDESS]

Fire! :twisted: Fire :twisted:
I like it ...keep it HOT :!:

[Ecstatic]

Excellent advice, Chris. I apply many of your suggestions in my stylesheets (though being lazy I sometimes overlook some of them as well). CSS can replace a lot of Javascript; I use CSS dropdowns and the like a lot. One bad habit I have is using inline styles when I should convert all inline styles to a linked stylesheet for cleaner code and to preserve the separation of structure and presentation. The idea of a TS Nerd/Geek forum is intriguing!

Kalina, you're quite right about vertical alignment (valign) where you've placed the images in table cells (you're applying the vertical alignment to the contents of the table cells), but in Moni's case the problem was stemming from the positioning of the layers with the added buffer of the paragraph tag changing the alignment in Firefox (the p tag was applying the inherent p margin in use, which IE was ignoring--which is actually incorrect according to the W3C standard but more forgiving--so by simplying specifying a margin of 0 px, the space issue disappeared).

[Ecstatic]

Moni, I see you're trying a table layout rather than layers. Personally I prefer layers, which utilize CSS-Positioning, but tables can also work. However, you have a gap between the sidehome and the rest of the display, and the bottom is almost but not quite aligned in Firefox. Simple fix:


<table width="860" height="471" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100" height="471" valign="top">http&#58;//www.Monicas2Hot.com/images/sidehome.gif</td>
<td width="760" height="471" valign="top">

Add cellspacing and cellpadding = "0" to lose the default spacing the browser renders, which tightens it up almost all the way, but still leaves a small gap. Change the width of the second table cell to 760 so that your cells add up to the 860 of the table (note: this width will force some horizontal scrolling on 800x600 displays). And then add valign="top" to both table cells to make the cells align vertically. Voila! Everything is snugged up just like it ought to be.

[NoOne]

lol @ u noticing i been expirementing 8)

[Ecstatic]

Just keeping an eye out, girl! If I can help, I'm glad to.

[NoOne]

i made some changes again. please have a look

www.monicas2hot.com

[Kukm4]

Did you mean take a look at
http://www.monicas2hot.com/home.htm :wink:
Nice picture. For a sec. I thought you saw and used part of my something I did. Not sure if you got my PM msg. When you get a chance take a peek at
http://www.tgirltalk.com/board/platinum/viewtopic.php?t=564&start=15
and let me know what you think.

In firefox I am seeing a little gap.

[NoOne]

yeah that gap is on purpose. i saw what u made to by the way thank you. u used 1 of my favorite pics of myself. its pretty. i appreciate that.

[kalina]

I like the new splash page pic and the gap. It has that swedish design kind of look to it. Simple yet sophisticated.