SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Page setup

  1. #1
    SitePoint Zealot
    Join Date
    Jun 2007
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Page setup

    Hi,

    I am looking for the best css setup for the following page:

    http://www.dieselnewavejournal.com/sample.jpg

    It is an image with some text around it...the text needs to be in css except the words "logo here" and "leave" those will be images.

    Could someone please advice and if possible for some samples/tutorials I could follow

    Thank you.

    Regards.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd go with a centered fixed width layout with the image (minus the text) as a background image. You may have to use a container DIV that holds everything and then position that relatively, and then absolutely position everything inside it, but if you could get away with using margins and possibly floats for this, I would. Anyway, where's the menu?

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2007
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Dan for responding,

    The page won't feature a menu, it is sort of a splash page where it says "logo here" that will be an image that will be clickable.

    How does the container div looks like? is it something similar to a floating div? I'm still on the curve of learning css and the only thing I've work with is doing a page with columns and placing bunch of divs inside.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A container DIV is just a DIV element that contains everything on the page. While the BODY element can do this, I probably wouldn't use it in this case, but if you wanted to, here's how I'd do it.

    HTML Code:
    <body id="splash-page">
    <div id="container">
    	<h1><span></span>Logo Here</h1>
    	<div id="box1">
    		<h2>Words Go Here</h2>
    		<ul>
    			<li>More Words</li>
    			<li>More Words</li>
    		</ul>
    	</div>
    	<div id="box2">
    		<h2>Words Go Here</h2>
    		<ul>
    			<li>One Word</li>
    			<li>More Words</li>
    			<li>More words</li>
    		</ul>
    	</div>
    	<div id="box3">
    		<h2>Streaming Rentals</h2>
    		Rent Streaming Videos for 48 Hours
    	</div>
    	<div id="box4">
    		<h2>Words Go Here</h2>
    		<ul>
    			<li>More Words</li>
    			<li>Words here</li>
    			<li>one word</li>
    		</ul>
    	</div>
    	<div id="box5">
    		<h2>Text Goes Here</h2>
    		<p>
    			Lots of Text Goes Here. Lots of Text Goes Here. Lots of Text Goes Here.
    			Lots of Text Goes Here. Lots of Text Goes Here. Lots of Text Goes Here.
    			Lots of Text Goes Here. Lots of Text Goes Here. Lots of Text Goes Here.
    			Lots of Text Goes Here. Lots of Text Goes Here. Lots of Text Goes Here.
    			Lots of Text Goes Here. Lots of Text Goes Here. Lots of Text Goes Here.
    			Lots of Text Goes Here. Lots of Text Goes Here. Lots of Text Goes Here.
    		</p>
    	</div>
    	<div id="box6">
    		<h2>Favorite Links Here</h2>
    		<ul>
    			<li><a href="#"></a></li>
    			<li><a href="#"></a></li>
    			<li><a href="#"></a></li>
    			<li><a href="#"></a></li>
    			<li><a href="#"></a></li>
    		</ul>
    	</div>
    	<a href="#" id="leave">Leave</a>
    </div>
    </body>
    You're going to want to zero out the margins and padding on just about everything (other than form controls) so put this at the very top of your stylesheet (if you have a * {} style rule in there, get rid of it since it causes problems with forms).

    Code CSS 2.1:
    html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
    dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
    a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
    strong, sub, sup, textarea, tt, var {
    	margin: 0;
    	padding: 0;
    }

    Then style as normal. There'll be no need to declare margin: 0; and padding: 0; in each of your style rules since the code I provided above will already take care of that (unless the HTML element in question is a form control, that is).

    You'll also notice I used generic ID values on the DIV containers. Since I don't know what type of site you're making, you're going to want to replace those ID values with something that better identifies what they are. Furthermore, I set an ID of "splash-page" on the BODY element so that you can target that page only with specific styles without having to feed it a new stylesheet.

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2007
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That looks great, you mentioned you wouldn't use body..how come? how would the container div look like?

    I'm understanding how the divs are placed but styling them is giving me hard time..such as positioning the boxes with ul's...is it possible you could style just one box (i.e box 3) so I can have an idea how to position the rest.

    Thank you for the help

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because I'm not sure if you want a different background color on the body than the page itself. That, and you may want to ensure that it's also centered in Internet Explorer 5.x (which doesn't understand margin: 0 auto; but uses text-align: center; instead).

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2007
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll make a note on the margin for IE 5.x...ie always gives css problems Thank you for the great detail solution....I'm going to start working on it.

    Thanks again.


    Regards.

    Johan.

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem. By the way, I forgot to mention this. The span inside the H1 element is used for an image substitution technique called the Gilder/Levin method.

    You can read about it here:
    http://www.sitepoint.com/article/hea...ages-css-xhtml

  9. #9
    SitePoint Zealot
    Join Date
    Jun 2007
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    awesome..will check it out to understand it better.

    Thanks.


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
  •