SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help With Structuring Layout With CSS

    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!

  2. #2
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code CSS:
    #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
    Code:
    position: absolute;
    or
    Code:
    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
    Last edited by Paul O'B; Aug 24, 2011 at 02:22. Reason: /

  3. #3
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CSSDevMonkey View Post

    For the top of your page you could use the following:
    Code CSS:
    #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!

    Quote Originally Posted by CSSDevMonkey View Post
    In order for the relative positioning you set for both #top and #contact_tab to work, their parent container needs to have either
    Code:
    position: absolute;
    or
    Code:
    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
    Last edited by Paul O'B; Aug 24, 2011 at 02:23. Reason: /

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <!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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •