Help With Structuring Layout With CSS

taylorbourne89 · August 23, 2011, 7:59pm

Hey this is my first post on this forum!

So far my knowledge of CSS is pretty good I’d say, meaning I can write html, and style/position it accordingly. However when in it comes to building the structure of a website using css (one that is, well unusual like the one I’m working on now) I quickly become lost soon after starting. I’ve only really built one complete site, other than that I’ve always sent off my designs to partners that program.

Basically the point of this post is to seek some help with structuring my personal site that I’m building.

http://www.89lab.com/dev/index.jpg

Let me explain what I’m trying to do with it:

Build a 1-page styled layout using Jquery (I can handle this once I get it all styled!)
The top ‘Contact’ area will display as only a small blue bar at the top of the page, the red tab image needs to come from behind the contact setcion
The main navigation links, skills, info, and contact need to fall behind the lighter blue content area

I think these are the main problems I’m having so far. I tried using negative margin to get the contact tab to tuck up under the top bar, but that doesn’t seem to be working.

I actually uploaded my first attempt at getting this programmed, take a look and let me know what you think and what I should do differently to get this to work.

89lab • Portfolio of Taylor Bourne • Southern California Front-End Web Developer

Thank you ahead of time for any help you can give, it’s much appreciated as I’m stuck as of right now!

CSSDevMonkey · August 24, 2011, 1:45am

Hey Taylor,

Welcome to the Sitepoint Forums, there’s a lot of great information here and a lot to be learned here.

That layout you designed looks like it’d be pretty fun to code.
In the meantime to achieve what you want, you can use a combination of several CSS techniques.

First I would, properly markup and organize your content with a good HTML structure. Break up your page into three main areas, you could use a <div> for each or a <section> tag (if your using HTML5).

For the top of your page you could use the following:


#global_container {
  position:relative;
}
#top {
  height:40px;
  position:relative;
  text-align:center; /* needed for auto left and right margin's to work for tab */
  z-index:10;
}
#contact_tab {
  height:54px;
  margin:0 auto; /* center the tab like in the design */
  position:relative;
  top:-2px /* setting the value to the amount you want it to tuck under */
  width:48px;
  z-index:0
}

In order for the relative positioning you set for both #top and #contact_tab to work, their parent container needs to have either

position: absolute;

or

position: relative

declared. So just use relative positioning for #global_container, since absolute positioning isn’t really needed.

Then set your appropriate z-index’s for #top and #contact_tab, and declare a negative ‘top’ value such as ‘top:-2px;’.

But yeah man, I’m down to help ya whenever.

-Alex

taylorbourne89 · August 24, 2011, 3:41am

CSSDevMonkey:

For the top of your page you could use the following:


#global_container {
  position:relative;
}
#top {
  height:40px;
  position:relative;
  text-align:center; /* needed for auto left and right margin's to work for tab */
  z-index:10;
}
#contact_tab {
  height:54px;
  margin:0 auto; /* center the tab like in the design */
  position:relative;
  top:-2px /* setting the value to the amount you want it to tuck under */
  width:48px;
  z-index:0
}

Sweet, I’ll give this a shot right now!

CSSDevMonkey:

In order for the relative positioning you set for both #top and #contact_tab to work, their parent container needs to have either
position: absolute;
or
position: relative
declared. So just use relative positioning for #global_container, since absolute positioning isn’t really needed.

Then set your appropriate z-index’s for #top and #contact_tab, and declare a negative ‘top’ value such as ‘top:-2px;’.

Alright I’m going to start this thing over from scratch one more time using your suggestions to see if I can get it to work. Thank you for your reply though I really appreciate it. Frustrated because I understand parts of things, but not enough to get through this whole thing yet.

Alright, I’ll let you know how this goes… haha

system · August 24, 2011, 6:58am

A lot of your problem (IMHO) is you are already thinking your layout while coding your HTML. CSS is only as good as the HTML it’s applied to, and as such your first focus should be working HTML with ZERO concern for your CSS/screen specific appearance – otherwise trying to make a print, mobile, screen+width media query or any other CSS target is going to be a headache from hell.

That’s basically how you end up with a page chock full of “but I can do it in photoshop” idiocy that’s next to USELESS from an accessibility standpoint. As if PS should have ANYTHING to do with web design. Semantic markup, make your layout with the CSS, THEN start up the goofy paint program to hang your graphics on it! Lemme guess, gonna slather jquery over it like it was omni-gel from Mass Effect to make 100% sure you have a 500k page doing 100k’s job? (partly joking – gentle ribbing)

So what do we have here? A form, a heading, a menu, a tagline, a sub-heading, sub-navigation, what I’m assuming is a gallery image block, sub-heading with sub-nav again, a list, a deeper sub-heading, and another list.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	EightNine Lab
</title>

</head><body>

<form action="#" method="post" id="topForm">
	<fieldset><div>
		<legend><span>Contact ME</span></legend>
		<label for="contactName">Your Name:</label>
		<input
			type="text"
			id="contactName"
			name="name"
		/><br />
		<label for="contactMail">Your E-Mail:</label>
		<input
			type="text"
			id="contactMail"
			name="eMail"
		/><br />
		<label for="contactMessage">Message:</label>
		<textarea
			id="contactMessage"
			name="message"
		></textarea><br />
		<input
			type="image"
			src="images/sendButton.png"
			alt="send!"
		/>
	</div></fieldset>
</form>
	
<div id="pageWrapper">

	<h1>
		eightnine <span>Lab</span><br />
		<small>
			My Name is Taylor Bourne<br />
			I'm a Southern California based
			<b>web designer</b> &amp; <b>developer</b>,
		</small>
		<i><!-- image replacement --></i>
	</h1>
	
	<ul id="mainMenu">
		<li class="work">
			<a href="/" class="current">
				Work
				<span><!-- image replacement --></span>
			</a>
		</li>
		<li class="skills">
			<a href="/skills">
				Skills
				<span><!-- image replacement --></span>
			</a>
		</li>
		<li class="contact">
			<a href="/contact">
				Contact
				<span><!-- image replacement --></span>
			</a>
		</li>
	<!-- #mainMenu --></ul>
	
	<div id="things">
		
		<h2>Things I've done</h2>
		
		<ul class="subMenu">
			<li><a href="/skills">Skills</a></li>
			<li><a href="/contact">Contact</a></li>
		<!-- .subMenu --></ul>
		
		<ul class="gallery">
			<li>
				<a href="/">
					<img
						src="images/placeholder.png"
						alt="placeholder"
					/>
				</a>
			</li><li>
				<a href="/">
					<img
						src="images/placeholder.png"
						alt="placeholder"
					/>
				</a>
			</li><li>
				<a href="/">
					<img
						src="images/placeholder.png"
						alt="placeholder"
					/>
				</a>
			</li><li>
				<a href="/">
					<img
						src="images/placeholder.png"
						alt="placeholder"
					/>
				</a>
			</li><li>
				<a href="/">
					<img
						src="images/placeholder.png"
						alt="placeholder"
					/>
				</a>
			</li><li>
				<a href="/">
					<img
						src="images/placeholder.png"
						alt="placeholder"
					/>
				</a>
			</li>
		<!-- .gallery --></ul>
		
	<!-- #things --></div>
	
	<div id="skills">
		
		<h2>Skills</h2>
		
		<ul class="subMenu">
			<li><a href="/skills">Skills</a></li>
			<li><a href="/contact">Contact</a></li>
		<!-- .subMenu --></ul>
		
		<div class="sideList">
			<ul>
				<li>Photoshop CS5</li>
				<li>Illustrator CS5</li>
				<li>HTML5 -- good lord why</li>
				<li>CSS3</li>
				<li>xHTML</li>
				<li>jQuery -- again, why?</li>
			</ul>
		<!-- .sideList --></div>
		
		<h3>What have I done?</h3>
		<ul class="whatDone">
			<li>
				<strong>Front-end web developer</strong> for various small businesses
			</li><li>
				Design and develop full websites using <strong>HTML/CSS</strong>
			</li><li>
				IT support for small businesses.
			</li><li>
				<strong>Adobe Photoshop</strong> freak; web, print, I've done it all. <em>Well there's your problem -- like photoshop has anythign to do with web design!</em>
			</li><li>
				Adobe Illustrator is powerful for <strong>print design</strong> <em>engrish much?</em>
			</li><li>
				I <strong>Bloat</strong> out pages with jQuery for no good reason.
			</li>
		</ul>
	<!-- #skills --></div>

<!-- #pageWrapper --></div>

</body></html>

Should be 99% of what you should have for markup on such a page. NOT sure your images would be 100% compatible with that (the zig-zag overlap on the menu is… problematic, especially if you decide NOT to vomit up a crappy fixed width – but it appears that EVERYTHING was designed for fixed width so…) – I think that so long as the background part of the zig-zag was set aligned center (which it doesn’t appear to be in your source image) it could be faked without any of that alpha-transparency nonsense. (since with alpha transparency you’re pushing 500k or more on such a layout).

I have time later I’ll re-visit this and belt out what I’d be doing for CSS on that.