?

Log in

No account? Create an account
 
 
11 August 2008 @ 08:38 pm
Need some help with the website coding again...  
Hello all my wonderful smart webmistress friends who know how to code better than me!

Okay, I'm a kissass sometimes, but here is why:
I have a problem that may be an easy fix; I'm not sure.  If you go to my website and don't have a widescreen monitor, you will know automatically what I am talking about.  I have a widescreen monitor at home, so when I do my coding, I do it for that.  Everything looks good on my monitor.  However, whenever I access a regular sized monitor, my site looks all messy because it all gets overlapped and such.  It looks terrible and I don't want it to look like that for people that view my site because it makes me look like I don't know what I'm doing or don't care.

Can anyone help me on this or have any advice.  I know I go to a lot of sites that look pretty much the same on either monitor.

Thank you!!!
Tags: ,
 
 
I feel: curiouscurious
I'm listening to: Battery by Metallica
 
 
 
the mcroxoring jingle jangle: Smallville: Chloe - smileyrealdetective on August 12th, 2008 03:31 am (UTC)
I took a look at your source code to see if I could find a way to make it more accessible on smaller screens. Of course, I'm obsessively nitpicky, and therefore am taking what is probably more than necessary :P

If you want a way to quickly fix the overlapping header image problem, you could find the line in the coding where you display your header image:

<IMG SRC="http://ladymanson.com/header31.png" USEMAP="#map1" BORDER="0">

And wrap that in a new div,

<div id="forbiddenfruit"><IMG SRC="http://ladymanson.com/header31.png" USEMAP="#map1" BORDER="0"></div>

And then you can define the positioning for that in your css file to match the content div:

#forbiddenfruit {
background:#000000;
position:absolute;
left:400px;
top:0px;
float: right;
height: 550px;
width: 900px;
text-align: center;
}


(you don't actually have to name the div forbiddenfruit, obviously. It was just an example.)

I haven't actually tested that first option yet. I've tried this second one though, but it will require a little bit more work. But not a lot of work, depending on how you look at it. It's still a quickfix, but not the PERFECT way to make your layout more viewable in smaller browsers. However, it is a LITTLE bit tidier. And cleaner is better.

Replace the coding in your "header.php" file with this coding: http://casefiles.yourjuliet.org/new/ladymanson1.txt
(I haven't changed anything, except for putting the header image INSIDE your content div. And I cleaned up a few unecessary lines of coding)

And then replace the #content styling in your css file with this:

#content {
background:#000000;
position:absolute;
left:400px;
height: 500px;
width: 900px;
text-align: center;
}


The reason why this method requires more work is because you're going to have to remove this line from EACH CONTENT PAGE of your site (home.php, about.php, Fanart.php, etc...):

<div id="content">

Also, you call up your stylesheet in multiple places on one page, and you only need to once (which I did in the new header coding)

Again, it's not the perfect way to make the layout more accessible, but I'm pretty sure it will at least look the same in smaller and larger resolutions :)
Lady Manson: smg cute orangeladymanson on August 12th, 2008 05:40 am (UTC)
Thanks so much, you're always so helpful when it comes to this stuff. It seems I'm learning more and more about coding every day, so this is a huge help. I'll have to try it out tomorrow and see what happens. Thanks!
Oh, and I love your icon. Since Comic Con I have been watching all my DVDs of Smallville for the first time. I start season three tomorrow. :-)