New personal website

mjrzasa

New Member
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

Super Moderator
Staff member
HTML:
 <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:
<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:
<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:
<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.
 

Edge

Member
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

New Member
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.
 

Phreaddee

Super Moderator
Staff member
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

New Member
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

Super Moderator
Staff member
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

Super Moderator
Staff member
As for your question regarding the p and margins.
Try
HTML:
<p class=“marginleft“>
Some text, (try and give your classes some sort of meaningful name)
</p>
Then in your css
Code:
.marginleft {
Margin-left:250px;
}
Therefore if you need to apply that style globally just add the class to whatever needs it!
And if it needs to be changed later you dont need to touch the html, just your css.
 

mjrzasa

New Member
right, right. Ya I see that's much easier and nicer, and I learn something new every time I do a site, I have a better plan to how I should start my next one now.
You may have noticed I have a kind of crazy div stuff, mostly the classes of billboard and billboardbg, and main and mainbg. I do that so I have the bg ones go 100% so it covers the entire screen, then i limit the inside div to 960px, is that the correct way to do it or should I have less classes for that?
 

Phreaddee

Super Moderator
Staff member
That sounds like overkill to me, also remember your nesting,
A div at 100%, within a div at 960px, is and always would be 960px.
and you know the more complicated you make something that doesnt need it, the more likelyhood that the usual suspects (ie) will have a fit, and break it.
The bg div exists purely for cosmetic reasons, therefore it is superfluous.
 

mjrzasa

New Member
What I meant was that I have:
container of all <body> with 100% width, then my section div for text, lets say, has a black bg with width 100% so that the "text" div has a white bg with 960px and then black bg on its sides, like this:
.container {width:100%;}
.mainbg {width:100%;background-color:black;}
.main {width:960px;background-color:white;}

<html>
<body>
<div class="container">
<div class="mainbg">
<div class="main">
<p> TEXT AND CONTENT GOES HERE</p>
</div> <!-- close main -->
</div> <!-- close mainbg -->
</div> <!-- close container -->
</body>
</html>

Is there a way to avoid that? I know you will probably say make a bg color for <body> but what if i want 2 different bg colors for, say, the billboard, then the content part..?
 

Phreaddee

Super Moderator
Staff member
Well i cant comment on the “billboard“ as thats not shown on your example, but...you are right in your assumption that id say body bg should be black.
In any case the only way for your mainbg to be black for the whole viewport is for your body, container and mainbg to have 100% height, in which case they both are essentially redundant anyway so you are back to where you started if you gave the body bg a value of black...
 

mjrzasa

New Member
maybe i wasnt clear:

.container {width:100%;}
.billboardbg {width:100%;}
.billboard {width:960px;background-color:blue;}
.mainbg {width:100%;background-color:black;}
.main {width:960px;background-color:white;}

<html>
<body>
<div class="container">
<div class="billboardbg">
<div class="billboard">
<img src="BIG PICTURE"></img>
</div> <!-- close billboard -->
</div> <!-- close billboardbg -->
<div class="mainbg">
<div class="main">
<p> TEXT AND CONTENT GOES HERE</p>
</div> <!-- close main -->
</div> <!-- close mainbg -->
</div> <!-- close container -->
</body>
</html>
 

Phreaddee

Super Moderator
Staff member
Well you “could“ do it like that, but id recommend using the same concept we've previously discussed re:header, but on the body bg.
Black bg, 1px slither blue bg img positioned where the “billboard“ section is to go...

Also img tags are self closing, meaning </img> is non existant.
 

mjrzasa

New Member
Ahh, so make an image and have it like one color from 0-450px then the next for 450-2000px for the next section. Learn new things everyday hah.
 

Phreaddee

Super Moderator
Staff member
No, not exactly, have an image that is the 0-450px section.
Background-color for the rest.
Dont make an image 2000 px tall!
 
Top