New personal website

mjrzasa · 02-09-2012, 12:46 AM

Hey, I just finished this, have to add a contact form, more portfolio stuff, and maybe a drop down nav with more links for that portfolio stuff, but im not sure if:
Does this work in IE??

the

#navmenu ul li:hover ul {

visibility:visible;

}

So, anyway, I'm just about done with this, please let me know what you think.
I think I need a better homepage image...

home.comcast.net/~mjrzasa

Phreaddee · 02-09-2012, 01:46 AM

HTML Code:

 <div class="header1">
		 			
					</div>          

		 <div class="header2">
		 			
					<div class="hr1" style="margin-top:0px;">&nbsp;</div>														<!-- 1 pixel divs using line height and spacing so there is no extra white space, works for Cross Browser -->
					<div class="hr1" style="margin-top:3px;">&nbsp;</div>
					<div class="hr1" style="margin-top:3px;">&nbsp;</div>
					
					<div class="logo">					
							 <a href="home.html"><img src="http://www.webdesignforum.com/images/logo.png" alt="logo" style="margin-left:50px;border:none;"></img></a>		<!-- no link border for IE -->					 
					</div>
					
					<div class="hr2" style="margin-top:19px;">&nbsp;</div>
					<div class="hr2" style="margin-top:1px;">&nbsp;</div>
					<div class="hr2" style="margin-top:1px;">&nbsp;</div>
					
		 </div>
		 
		 <div class="header3">
		 
		 			<div class="nav">
							 			<ul class="naver">
										<b>
							 			<li class="naver"><a href="home.html">Home</a></li>
							 			<li class="naver"><a href="about.html">About Me</a></li>
							 			<li class="naver"><a href="work.html">Past Work</a></li>
							 			<li class="naver"><a href="contact.html">Contact Me</a></li>
							 			</b>
										</ul>
     			</div>
		 
		 </div>

i think you might have missed the memo stating that html was for markup and css was for styling! this sort of thing, whilst I can see you've tried pretty hard to get it right is not what html is for.
all of that could have easily been replicated in a 1px slither image repeated on the x-axis in a header background and your entire header could (should) look like this.

HTML Code:

<header>
<img src="logo.png" alt="logo" id="logo" />
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</header>

likewise,

HTML Code:

<div style="width:2px;height:100px;background-color:#6D6D6D;float:left;;"></div>	 		<!-- small divs to create overlap look -->
							 <div style="width:1px;height:100px;background-color:#333333;float:left;"></div>
							 <div style="width:2px;height:100px;background-color:#484848;float:left;"></div>

again really ought to be styled with css.
and whilst on the topic.

HTML Code:

<b style="margin:0 0 0 125;">

too much of this sort of stuff!
and your css needs to be external. essentially it works and it looks OK, but you've overcomplicated it, and the markup isnt very semantic.

oh and dont do dropdowns. please. they are no good for accessibility.

sdesign1 · 02-09-2012, 05:51 AM

Hmm, there's a lot of 'Me, me, Me' - it should be more about your work not all about you - try and change the emphasis to 'My Work' and less 'me I'm Rzasa' and focus on portfolio and services and step back from it yourself (not completely!) - it creates a more professional feel.

mjrzasa · 02-09-2012, 06:00 AM

ok, thank you for the comments!
I believe the first reply was saying that inline CSS is not what I should do, is that correct?
Well, I try not to, but I always need to move margins and such, should i use css like:
p2.main {margin:0 0 0 250}
instead of inline stuff like:
<p style="margin:0 0 0 250"> TEXT </p>
?

Also, what do you mean by:
"all of that could have easily been replicated in a 1px slither image repeated on the x-axis in a header background and your entire header could (should) look like this.
"
Again, thanks for the comments.

koddos · 02-09-2012, 11:52 AM

What hosting service do you use?

mjrzasa · 02-10-2012, 03:09 AM

I am using my cable company's services, comcast.

Phreaddee · 02-10-2012, 05:26 AM

all of that could have easily been replicated in a 1px slither image repeated on the x-axis in a header background and your entire header could (should) look like this.

means exactly that

Code:

header {
background-image:url(../images/headerbackground.jpg);
background-repeat:repeat-x;
width:100%;
height:xxx;
}

and use px or % or em or whatever but remember to give a unit

margin:0 0 0 250; is assumed and guessed to be px, but always best to define that
margin:0 0 0 250px;
and yes that should be in the external css, not in the html.

mjrzasa · 02-11-2012, 07:32 AM

omg, you mean a 1 px image with the height of the header (and design of the header), and with the hr's so that it goes all the way across with 100%... wow i never thought of that. I guess I was just so concerned about trying not to use any images..

Is there a reason to use external CSS, like load time, or just simply to look cleaner?

Phreaddee · 02-11-2012, 12:22 PM

Well, currently with your site using inline css ( and css in the head)
You have to duplicate it on every page right?
So if you want to change for instance your paragraph style you need to change it on every page, which is manageable on a site with 5 pages, but a site with 10, 20, 50, 100 pages that would become a nightmare!
An external css would only need to change the value once, no matter how many pages you have, and yes much much cleaner.
In your development phase its ok (sort of) to make a css in the head whilst you get your layout sorted, but once you are happy with the template, and before duplicating in, make it external.

Phreaddee · 02-11-2012, 12:23 PM

Also, load time would be quicker, and glad the penny dropped with the header!

02-09-2012, 12:46 AM	#1
mjrzasa Bronze Member Join Date: Jan 2012 Location: Chicago Posts: 63	New personal website Hey, I just finished this, have to add a contact form, more portfolio stuff, and maybe a drop down nav with more links for that portfolio stuff, but im not sure if: Does this work in IE?? the #navmenu ul li:hover ul { visibility:visible; } So, anyway, I'm just about done with this, please let me know what you think. I think I need a better homepage image... home.comcast.net/~mjrzasa

02-10-2012, 05:26 AM	#7
Phreaddee Diamond Member Join Date: Feb 2011 Location: Newcastle, Australia Posts: 1,137	all of that could have easily been replicated in a 1px slither image repeated on the x-axis in a header background and your entire header could (should) look like this. means exactly that Code: header { background-image:url(../images/headerbackground.jpg); background-repeat:repeat-x; width:100%; height:xxx; } and use px or % or em or whatever but remember to give a unit margin:0 0 0 250; is assumed and guessed to be px, but always best to define that margin:0 0 0 250px; and yes that should be in the external css, not in the html. __________________ if (headhurts == "possibly") { alert ("keep going!"); } else if (headhurts == "yes") { alert ("go to sleep"); } else if (headhurts == "damn !@#$ mofo scripts...") { alert ("give up and have a beer!"); } else { alert ("watch TV"); }

02-11-2012, 12:22 PM	#9
Phreaddee Diamond Member Join Date: Feb 2011 Location: Newcastle, Australia Posts: 1,137	Well, currently with your site using inline css ( and css in the head) You have to duplicate it on every page right? So if you want to change for instance your paragraph style you need to change it on every page, which is manageable on a site with 5 pages, but a site with 10, 20, 50, 100 pages that would become a nightmare! An external css would only need to change the value once, no matter how many pages you have, and yes much much cleaner. In your development phase its ok (sort of) to make a css in the head whilst you get your layout sorted, but once you are happy with the template, and before duplicating in, make it external. __________________ if (headhurts == "possibly") { alert ("keep going!"); } else if (headhurts == "yes") { alert ("go to sleep"); } else if (headhurts == "damn !@#$ mofo scripts...") { alert ("give up and have a beer!"); } else { alert ("watch TV"); }

02-11-2012, 12:23 PM	#10
Phreaddee Diamond Member Join Date: Feb 2011 Location: Newcastle, Australia Posts: 1,137	Also, load time would be quicker, and glad the penny dropped with the header! __________________ if (headhurts == "possibly") { alert ("keep going!"); } else if (headhurts == "yes") { alert ("go to sleep"); } else if (headhurts == "damn !@#$ mofo scripts...") { alert ("give up and have a beer!"); } else { alert ("watch TV"); }

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

02-09-2012, 05:51 AM	#3
sdesign1 Silver Member Join Date: Sep 2011 Posts: 109	Hmm, there's a lot of 'Me, me, Me' - it should be more about your work not all about you - try and change the emphasis to 'My Work' and less 'me I'm Rzasa' and focus on portfolio and services and step back from it yourself (not completely!) - it creates a more professional feel. __________________ Web Design Liverpool

02-09-2012, 06:00 AM	#4
mjrzasa Bronze Member Join Date: Jan 2012 Location: Chicago Posts: 63	ok, thank you for the comments! I believe the first reply was saying that inline CSS is not what I should do, is that correct? Well, I try not to, but I always need to move margins and such, should i use css like: p2.main {margin:0 0 0 250} instead of inline stuff like: <p style="margin:0 0 0 250"> TEXT </p> ? Also, what do you mean by: "all of that could have easily been replicated in a 1px slither image repeated on the x-axis in a header background and your entire header could (should) look like this. " Again, thanks for the comments.

02-09-2012, 11:52 AM	#5
koddos New Member Join Date: Feb 2012 Posts: 20	What hosting service do you use?

02-10-2012, 03:09 AM	#6
mjrzasa Bronze Member Join Date: Jan 2012 Location: Chicago Posts: 63	I am using my cable company's services, comcast.

02-11-2012, 07:32 AM	#8
mjrzasa Bronze Member Join Date: Jan 2012 Location: Chicago Posts: 63	omg, you mean a 1 px image with the height of the header (and design of the header), and with the hr's so that it goes all the way across with 100%... wow i never thought of that. I guess I was just so concerned about trying not to use any images.. Is there a reason to use external CSS, like load time, or just simply to look cleaner?