Warcraft Legacy Starcraft Legacy BlizzForums
The Future?

Go Back   BlizzForums > General Forums > Chit Chat

Chit Chat Your Life, Your Thoughts, Your Nonsense.

Reply
 
Thread Tools Display Modes


Old 11-02-2008
 
#1
United States Kaervek
i'm on your wifi.
Join Date: Feb 2003
Posts: 768
 Kaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of win
Thumbs up Watch me teach myself CSS+xHTML, learn something.

Not sure if this is more appropriate here or in Computer Discussion. Feel free to move to wherever you see fit.

I've just photoshopped the following image, and am at the stage where I need to slice it and code it.

http://kupax.com/files/4682_mhuz0/in..._wall_page.jpg

I've been googling all day, and while I've found several CSS tutorials, nothing really seems to translate directly to what I've given myself to work with. Everything I've found describes how to code the author's layout, and I'm not sure that's entirely conducive to a learning process. I'm entirely open to the idea that I've gotten ahead of myself in creating this layout without consideration for how to code it, and as such, have a layout that really isn't going to work for me.

Anyway, I want this layout, as you see it, to be centered in the browser window on a black background. The larger black box will be the main content-area where blogs, images, etc. will be viewed, and this will be the only area on the page that will be scroll-able. I'm not asking for someone to code this for me (that wouldn't teach me anything), but I am hoping someone can point me to a specific tutorial that would help me figure out how to take this image and achieve what I'm trying to do. If anyone is knowledgeable in XHTML and CSS, and you feel my objective is something you could accomplish, I'd be happy to look at whatever code you can manage to type up, and hopefully explain to me how your code does what it does.

The main content area (that larger black box) needs to be editable (via some sort of CMS, I'm guessing) without necessarily uploading code and images via FTP. This is something that can likely be addressed later, but as of right now, I just need to be able to a.) slice this layout up, and b.) code it to look proper with a scroll-able content box in the correct position.

If I can help you understand better what it is I'm working towards, feel free to ask. I'll be going back to scouring over endless google search results from 1999, and if I manage to find something that makes sense and helps me get this layout coded, I'll post updates here for discussion's sake.
 

Last edited by Kaervek; 11-04-2008 at 12:43 AM. Reason: layout-image update
Kaervek has 768 Posts

404, savior not found.
 

Kaervek is offline


pm.gif  Send a message via AIM to Kaervek Send a message via MSN to Kaervek  
Reply With Quote


Old 11-03-2008
 
#2
United States Kaervek
i'm on your wifi.
Join Date: Feb 2003
Posts: 768
 Kaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of win
Default

Okay, so I figured out how to do this. My only concern now, is that the entire thing isn't a waste, as the route I've taken has treated this layout as a background image. Theoretically, that's all fine and well so long as I am able to place my content over it, and have it stay within the desired boundaries as set by the graphical boxes.

Anyway, for the sake of understanding and self-teaching, here's what I did.

I sliced the layout linked in the OP into the following 4 sections:
  • Header Image -will display site title and logo.
  • Left Content -will serve as navigation area.
  • Right Content -will serve as the main content area, displaying the contents of the links from "Left Content".
  • Footer -will serve as a display of copyright information and static contact info. Possibly textual Google ads.
I used the following code to position these images in a fashion so as to keep them uniform. (note: much of the code used was from a tutorial that doesn't necessarily follow the same layout as my proposed design, so some sections might either a.) not serve any actual purpose, or b.) be replaced with more efficient code. As it stands, the code I'm displaying here appears to sufficiently achieve my goals thus far. I did type it all by hand, and the vast majority of it does make sense to me, which is a bonus )

HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>kaervek's page</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
	<div id="header"></div>
	<div id="left_content"></div>
	<div id="right_content"></div>
	<div id="footer"></div>
</div>

</body>

</html>
CSS:
Code:
body
{
margin: 0;
padding: 0;
text-align: center;
}

#container {
width: 800px;
margin: 0 auto 0 auto;
text-align: left;
}

	#header {
	height: 123px;
	background: #999 url('layout/header.jpg')
	}

	#left_content {
	height: 408px;
	width: 161px;
	background: url('layout/left_content.jpg')
	}

	#right_content {
	position: absolute;
	top: 123px;
	left: 161px;
	height: 408px;
	width: 639px;
	background: url('layout/right_content.jpg')
	}
	
	#footer {
	height: 69px;
	width: 800px;
	background: url('layout/footer.jpg')
	}
The only issue I'm having as of now, is that the overall layout isn't centered on the page, and is being displayed on a white background. I'm sure this is easily remedied via the .css file, so I'm not entirely concerned about it. Where my concerns lie at this point is how to place my content in their designated locations, and having the content-area within "right_content" be scrollable without scrolling past it's designated box. These particular issues are why I'm not entirely sure that using this layout as a background image was the right idea, but I'm learning a lot, and have gotten much further in my understanding of page structure and styling.

If I have to start all over from the beginning, I'd be happy with the fact that I've learned what I have so far.

Any feedback or help is still highly encouraged!
 

Last edited by Kaervek; 11-03-2008 at 07:09 PM. Reason: batch upload failure.
Kaervek has 768 Posts

404, savior not found.
 

Kaervek is offline


pm.gif  Send a message via AIM to Kaervek Send a message via MSN to Kaervek  
Reply With Quote


Old 11-03-2008
 
#3
Netherlands LXM
Artist
Join Date: Mar 2006
Posts: 10,242
 LXM might just love this place a little bit too muchLXM might just love this place a little bit too muchLXM might just love this place a little bit too muchLXM might just love this place a little bit too muchLXM might just love this place a little bit too muchLXM might just love this place a little bit too muchLXM might just love this place a little bit too muchLXM might just love this place a little bit too muchLXM might just love this place a little bit too muchLXM might just love this place a little bit too muchLXM might just love this place a little bit too much
Default

I'd like to comment, but I can't atm. Will reply later
 
LXM has 10,242 Posts
 

LXM is offline


pm.gif  Send a message via MSN to LXM  
Reply With Quote


Old 11-03-2008
 
#4
Canada warhog
This is bad.
Join Date: Mar 2006
Posts: 1,317
 warhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to all
Default

I'm confused. I mean, I like CSS backgrounds and all, but what was the problem with making it out of tables again? Use the image slicer tool in Photoshop, cut it to your pleasure, take the table that comes out when you "save it for web"... and voila your tables are done. After that, name each cell with its own class and you can fiddle about with each one in your CSS file. The content box could be made to be scrollable simply with an iframe embedded in that cell, and voila you'd be done.

(and yes, if you're smart about it you can retain the background in the content box in the iframe, I did that for the old layout of JohannKwan.com before I decided to redo the site entirely this year)
 

Last edited by warhog; 11-03-2008 at 10:49 PM.

This is a stupid idea.
 

warhog is offline


pm.gif   
Reply With Quote


Old 11-03-2008
 
#5
United States Kaervek
i'm on your wifi.
Join Date: Feb 2003
Posts: 768
 Kaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of win
Default

Quote:
Originally Posted by warhog View Post
I'm confused. I mean, I like CSS backgrounds and all, but what was the problem with making it out of tables again? Use the image slicer tool in Photoshop, cut it to your pleasure, take the table that comes out when you "save it for web"... and voila your tables are done. After that, name each cell with its own class and you can fiddle about with each one in your CSS file. The content box could be made to be scrollable simply with an iframe embedded in that cell, and voila you'd be done.

(and yes, if you're smart about it you can retain the background in the content box in the iframe, I did that for the old layout of JohannKwan.com before I decided to redo the site entirely this year)
I was under the impression that using tables to stylize a web site is a major no-no, and isn't up to current web design standards. While tables were a reasonable means to achieve certain design layouts several years ago, I've read on many design-oriented pages that cascading style sheets are the only reliable and standardized way to stylize your site since their inception.

Of course, now that I want to actually find the pages where I read this and link them here, they're being elusive. There were entire articles chastising the use of tables in this fashion.

edit: I really like the way your gallery displays in your "People" link there. How did you achieve this?
 

Last edited by Kaervek; 11-03-2008 at 11:08 PM.
Kaervek has 768 Posts

404, savior not found.
 

Kaervek is offline


pm.gif  Send a message via AIM to Kaervek Send a message via MSN to Kaervek  
Reply With Quote


Old 11-04-2008
 
#6
United States Kaervek
i'm on your wifi.
Join Date: Feb 2003
Posts: 768
 Kaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of win
Default

Aha, so I've found an issue. The following code does not place the "Right Content" slice correctly - well, it's placed precisely how I've told it to be placed, but that isn't the way I want it done.

Code:
#right_content {
	position: absolute;
	top: 123px;
	left: 161px;
	height: 408px;
	width: 639px;
	background: url('layout/right_content.jpg')
	}
This places that particular slice in one "absolute" spot, regardless of window-size. While it appears to look just fine when the window is shrunk to the size of the overall layout, the "Content_Right.jpg" becomes obviously misplaced when the window's size is adjusted.

I'll be looking into how to fix that, now. There's only a handful of different "position: " variables, so one of those are bound to work...

Edit: Here are a couple screen shots to better describe the problem the above code creates. Both screen shots are of the same exact browser window and web page, all that has changed is the size of the browser. As you can see, the image specified in the #right_content section has been placed with position: absolute, which is clearly not desirable in this instance.

CSS lesson # 1087141^2, learned.

http://kupax.com/files/4706_lpych/Picture%201.png
http://kupax.com/files/4707_h3ap8/Picture%202.png

BTW: uploading over the EDGE network =/= good times.
 

Last edited by Kaervek; 11-04-2008 at 12:42 AM. Reason: Screenshots added.
Kaervek has 768 Posts

404, savior not found.
 

Kaervek is offline


pm.gif  Send a message via AIM to Kaervek Send a message via MSN to Kaervek  
Reply With Quote


Old 11-04-2008
 
#7
No country specified. To select a country, go to User CP -> Edit Profile -> Country p3ngu!n
Forum Elder
Join Date: Jun 2006
Posts: 11,118
 p3ngu!n is one BAD motha--SHUTCHOMOUF!p3ngu!n is one BAD motha--SHUTCHOMOUF!p3ngu!n is one BAD motha--SHUTCHOMOUF!p3ngu!n is one BAD motha--SHUTCHOMOUF!p3ngu!n is one BAD motha--SHUTCHOMOUF!p3ngu!n is one BAD motha--SHUTCHOMOUF!p3ngu!n is one BAD motha--SHUTCHOMOUF!p3ngu!n is one BAD motha--SHUTCHOMOUF!p3ngu!n is one BAD motha--SHUTCHOMOUF!p3ngu!n is one BAD motha--SHUTCHOMOUF!p3ngu!n is one BAD motha--SHUTCHOMOUF!
Default

Quote:
Originally Posted by Kaervek View Post
I was under the impression that using tables to stylize a web site is a major no-no, and isn't up to current web design standards. While tables were a reasonable means to achieve certain design layouts several years ago, I've read on many design-oriented pages that cascading style sheets are the only reliable and standardized way to stylize your site since their inception.
This is correct. Do not let anyone tell you otherwise.
 
p3ngu!n has 11,118 Posts


Most Sweetest Signature/Avatar Winner 2008
 

p3ngu!n is offline


pm.gif   
Reply With Quote


Old 11-04-2008
 
#8
United States Kaervek
i'm on your wifi.
Join Date: Feb 2003
Posts: 768
 Kaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of win
Default

The following code appears to have fixed the issue I posted last night:

Code:
	#left_content {
	float: left;
	height: 408px;
	width: 161px;
	background: url('layout/left_content.jpg')
	}

	#right_content {
	float: right;
	top: 123px;
	left: 161px;
	height: 408px;
	width: 639px;
	background: url('layout/right_content.jpg')
	}
Now I'm trying to figure out why my footer isn't displaying properly. It seems to have either disappeared or been hidden by left_content.jpg and right_content.jpg.
 
Kaervek has 768 Posts

404, savior not found.
 

Kaervek is offline


pm.gif  Send a message via AIM to Kaervek Send a message via MSN to Kaervek  
Reply With Quote


Old 11-04-2008
 
#9
United States Kaervek
i'm on your wifi.
Join Date: Feb 2003
Posts: 768
 Kaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of win
Default

The following code fixed the footer issue I had in the last post:

Code:
	#footer {
	clear: both;
	height: 69px;
	width: 800px;
	background: url('layout/footer.jpg')
	}
Now, I really have no clue what the "clear: " function does, but I know it seems to solved the footer-placement issue. Time to go Google just what "clear: both;" does...

edit:
Quote:
clear:

Possible Values

* inherit
* none (default) - Floated elements are not cleared - content will flow around them.
* left - clears all left-floated elements and places the element underneath.
* right - clears all right-floated elements and places the element underneath.
* both - clears all floated elements and places the element underneath.
BTW: I extended the width of footer.jpg from width: 800px; to width: 900px; so I could see just where it had gone. When I added the "float: left;" and "float: right;" to the left_content and right_content respectively, the footer fell behind those two images, and all the way up to the bottom of the header.jpg. I'm glad things are falling together, after a lot of trial and error, but for every fix I manage to come up with, I have as many more questions.
 

Last edited by Kaervek; 11-04-2008 at 06:59 PM.
Kaervek has 768 Posts

404, savior not found.
 

Kaervek is offline


pm.gif  Send a message via AIM to Kaervek Send a message via MSN to Kaervek  
Reply With Quote


Old 11-06-2008
 
#10
Canada warhog
This is bad.
Join Date: Mar 2006
Posts: 1,317
 warhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to all
Default

Fair nuff. Me, I'll stick to a mix of XHTML and CSS, less headaches for me that way.

As to the galleries, I used Lytebox... it's a self-contained rewrite of Lightbox 2.

http://www.dolem.com/lytebox/
 

This is a stupid idea.
 

warhog is offline


pm.gif   
Reply With Quote


Old 11-06-2008
 
#11
United States Kaervek
i'm on your wifi.
Join Date: Feb 2003
Posts: 768
 Kaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of win
Default

Quote:
Originally Posted by warhog View Post
Fair nuff. Me, I'll stick to a mix of XHTML and CSS, less headaches for me that way.
Haha, yeah, this is definitely a bit of a headache. It's pretty rewarding, though, when things finally start to line up and look good. While I certainly haven't committed much of the code to memory, practice makes perfect, as they say

Quote:
Originally Posted by warhog
As to the galleries, I used Lytebox... it's a self-contained rewrite of Lightbox 2.

http://www.dolem.com/lytebox/
Cool, thanks a lot. I'll look into it when I get far enough to have to focus on that portion of the design.


Anyway, here's the latest update on this sort of "web design journal":

I've come to understand, though I had some suspicions already, that the fonts I want to use for certain aspects of my site simply aren't going to be installed on every visitor's computer. This being the case, I have to rasterize much of the text that won't be editable in the future such as the static links-menu, and header & footer text. This brings about an entire new challenge, however: using this rasterized text as functional links.

According to some of the sites I've visited while researching how to accomplish this, image mapping isn't up to current standards anymore - it's gone the way of table-stylizing. Now, this doesn't mean it isn't possible, it would appear it's still used successfully these days. Since I've already sliced up my template and successfully positioned it with CSS, I wasn't looking forward to slicing up each link image and re-positioning all over again. I decided to go ahead and apply the Image Map via CSS technique linked above. (If anyone has any tried-and-true alternatives to this technique, please let me know.)

Now the biggest issue I've been having with the vast majority of the tutorials I've been learning from, is that the outcomes the authors of those tutorials are trying to achieve almost always don't reflect the outcome I'm trying to achieve. This translates into a lot of trial and error, which in turn, translates into frustration and s-l-o-o-o-w p-r-o-g-r-e-s-s-s. So keep in mind that the techniques and code snippets I use might not be the most effective in the context with which I'm using it, and much of it very well might be lost in translation. This is where feedback is encouraged

Here are a couple screen shots of my progress thus far, with respect to the last few I posted. The text in the header isn't necessarily part of the final design, but I wanted to put something up there so it didn't look so empty, and gave a good idea of what the final version might look like.
http://kupax.com/files/4753_pxdyp/in...rasterized.jpg

Now, the code in the above article suggests the use of "position: absolute;" for the invisible links that are acting as the CSS image map. I've tried this, and while the overall alignment appears to work, it presents the exact same issue I had with the "right_content.jpg" placement in this post - the text "floats" (not to be confused with the "float: " function) above and independently of the background image when the window is resized. Unacceptable =(

So I managed to fix the "floating" text issue by replacing "position: absolute" with "position: relative". Here's a snippet of my current code, which still isn't functioning properly:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>kaervek's page</title>
<link href="kaerveks_page.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
	<div id="header"></div>
	<div id="left_content">
		<div id="menu">
			<p id="home"><a href="index.html" id="home"><b>HOME</b></a></p>
			<p id="blog"><a href="blog.html" id="blog"><b>BLOG</b></a></p>
			<p id="portfolio"><a href="portfolio.html" id="portfolio"><b>PORTFOLIO</b></a></p>
			<p id="services"><a href="services.html" id="services"><b>SERVICES</b></a></p>
			<p id="contact"><a href="contact.html" id="contact"><b>CONTACT</b></a></p>
			<p id="resume"><a href="resume.html" id="resume"><b>RESUME</b></a></p>
			<p id="links"><a href="links.html" id="links"><b>LINKS</b></a></p>
		</div>
	</div>
	<div id="right_content"></div>
	<div id="footer"></div>
</div>

</body>

</html>
Code:
body
{
background-color: #000000;
margin: 0;
padding: 0;
}

#container {
width: 800px;
margin: 0 auto 0 auto;
text-align: left;
}

	#header {
	height: 123px;
	width: 800px;
	background: url('images/header.jpg')
	}
	
	h1 {
	padding-left: 25px;
	padding-top: 25px;
	color: #ffffff
	}
	
	.header_text {
	}
	
	#left_content {
	float: left;
	height: 408px;
	width: 161px;
	background: url('images/left_content.jpg')
	}
	
		#menu a {
		position: relative;
		height: 359px;
		width: 122px;
		top: 149px;
		left: 30px;
		text-decoration: none;
		}
	
		#menu a b { visibility: ; }
		a#home { left: 63px; width: 70px; }
		a#blog { left: 64px; width: 62px; }
		a#portfolio { left: 31px; width: 125px; }
		a#services { left: 38px; width: 112px; }
		a#contact { left: 48px; width: 107px; }
		a#resume { left: 43px; width: 96px; }
		a#links { left: 61px; width: 71px; }
	
	#right_content {
	float: right;
	height: 408px;
	width: 639px;
	background: url('images/right_content.jpg')
	}
	
	#footer {
	clear: both;
	height: 69px;
	width: 800px;
	background: url('images/footer.jpg')
	}
Here's a screen shot of how this code is displayed when viewed from a browser:
http://kupax.com/files/4754_ajws4/Picture%203.png

Keep in mind, the visible blue links will eventually be invisible, and placed over the rasterized white-colored text of the background image, effectively "mapping" those portions of the image with the hidden links. Pretty snazzy, eh

Anyway, my problem now obviously lies in centering those individual links over the proposed links of the menu image. The article I posted earlier accomplishes this with his horizontally-aligned link menu, but I just can't seem to get this to translate to my vertically-aligned menu. I've been working on this all morning (like I said, frustrating and sloooow learning process), and I'm calling it quits for the time being.

If anyone has any insight on how I might be able to get those links to line up properly, I'd really appreciate any help you could offer here. Thanks!
 
Kaervek has 768 Posts

404, savior not found.
 

Kaervek is offline


pm.gif  Send a message via AIM to Kaervek Send a message via MSN to Kaervek  
Reply With Quote


Old 11-06-2008
 
#12
Canada warhog
This is bad.
Join Date: Mar 2006
Posts: 1,317
 warhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to allwarhog is a name known to all
Default

I didnt' read the entirety of your post but CSS imagemapping is pretty easy. Check my stylesheets.css .
 

This is a stupid idea.
 

warhog is offline


pm.gif   
Reply With Quote


Old 11-06-2008
 
#13
United States Kaervek
i'm on your wifi.
Join Date: Feb 2003
Posts: 768
 Kaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of winKaervek is made of win
Default

Well I managed to get my links to line up. The author of the article I followed couldn't have been more correct when he stated:

Quote:
When applied to the XHTML of our document, the menu links will now float independently above our background image. If we position them above areas of the image that look like links, we’ll be all set. Placing your links correctly will usually take either careful calculation or a bit of trial and error.
http://kupax.com/files/4755_5iekn/menu_exposed.png
The end-results, of course, looks just like it should, but now with the links being click-able!

Trial and error, indeed. Just take a look at the formatting that I had to do in the HTML to just get these links to match the width of the visible links:

Code:
<div id="left_content">
		<div id="menu">
			<a href="index.html" id="home"><b>H O M E</b></a><br />
			<a href="blog.html" id="blog"><b>B L O G</b></a><br />
			<a href="portfolio.html" id="portfolio"><b>P O R T F O L I O</b></a><br />
			<a href="services.html" id="services"><b>S E RV IC E S</b></a><br />
			<a href="contact.html" id="contact"><b>C O N T A C T</b></a><br />
			<a href="resume.html" id="resume"><b>R E S U M E</b></a><br />
			<a href="links.html" id="links"><b>L I N K S</b></a><br />
		</div>
	</div>
All those spaces! It sure is messy, but it definitely got the job done. While a part of me thinks there should be an easier way (not necessarily the slice-each-menu-image route) to get the hidden links to match the visible-link widths. Oh well, like he said "trial and error," so I feel accomplished

Getting each link to line up vertically in the proper fashion was yet another chore. Here's the code that ended up working - pay particular attention to the "top: xxx" figures:

Code:
#left_content {
	float: left;
	height: 408px;
	width: 161px;
	background: url('images/left_content.jpg')
	}
	
		#menu a {
		position: relative;
		height: 359px;
		width: 122px;
		top: 149px;
		left: 30px;
		text-decoration: none;
		}
	
		#menu a b { visibility: ; }
		a#home { left: 64px; width: 70px; top:24px; }
		a#blog { left: 64px; width: 62px; top: 66px; }
		a#portfolio { left: 30px; width: 125px; top: 107px; }
		a#services { left: 40px; width: 112px; top: 147px; }
		a#contact { left: 40px; width: 107px; top: 186px; }
		a#resume { left: 47px; width: 96px; top: 226px; }
		a#links { left: 60px; width: 71px; top: 264px; }
While I have no issues with the code, the problem I have is how difficult it was to determine precisely which value each "top: " function required. I tried using the Ruler tool in Photoshop to measure the distance (in pixels) between each visible link (the white text on the layout), but these numbers absolutely didn't coordinate with the "top: " values I ended up using. I need to find out precisely what "top" is in reference to, so I don't have to alt+tab between documents to increase / decrease numbers over and over until they finally fit.

Blah blah, I'm tired and my fingers are burning from all this. Definitely happy with the accomplishments today, even if it took most of the day to do - it shouldn't take me quite this long to achieve similar results in the future. Practice, practice
 
Kaervek has 768 Posts

404, savior not found.
 

Kaervek is offline


pm.gif  Send a message via AIM to Kaervek Send a message via MSN to Kaervek  
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -4. The time now is 11:06 AM.
Designed by XG3