Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4

Thread: Tables V. CSS

  1. #1
    Member
    Join Date
    Nov 2002
    Posts
    97
    Member #
    278
    How is this possible in CSS?

    Attached is a PDF of a 'newsletter' that comes out with our company and they like to have it boring.... We've done this before in tables and so on but I'd like to move over to CSS. Can someone assist me in getting started?

    Basically this sits inside a greater table of 650x100%. The squares you see are typically 200x200 unless they span greater.

    Also, this page calles out to a 'global' css document, how can I at the start of this area have it call out to a specific .css doc for this section only.

  2.  

  3. #2
    Member
    Join Date
    Nov 2002
    Posts
    97
    Member #
    278
    Anyone? Even just a primer or even a tutorial that explains it?

  4. #3
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    Here's something to start you off. I've tested it in Firefox, it's almost certain to need tweaks for IE.
    Code:
    <html>
    <head>
    	<title>Lots 'o' boxes</title>
    	<style>
    		div
    		{float: left}
    		.row
    		{margin: 0; display: block;}
    		.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10
    		{border: 1px solid black; display: inline; margin: 5px}
    		.row3First
    		{clear: left}
    		.box1					
    		{width: 200px; height: 100px;}
    		.box2					
    		{width: 200px; height: 100px;}
    		.box3
    		{width: 100px; height: 100px;}
    		.box4
    		{width: 170px; height: 100px; clear: left;}
    		.box5
    		{width: 200px; height: 100px;}
    		.box6
    		{width: 130px; height: 49px; float: none; margin: 5px 5px 0; border-bottom: 0}
    		.box7
    		{width: 130px; height: 50px; float: none; margin: 0 5px 5px}
    		.box8
    		{width: 350px; height: 49px; float: none; margin: 5px 5px 0; border-bottom: 0}
    		.box9
    		{width: 350px; height: 50px; float: none; margin: 0 5px 5px}
    		.box10
    		{width: 162px; height: 100px;}
    	</style>
    </head>
    <body>
    	<div class="box1">Box1</div>
    	<div class="box2">Box2</div>
    	<div class="box3">Box3</div>
    	<div class="box4">Box4</div>
    	<div class="box5">Box5</div>
    	<div>
    		<div class="box6">Box6</div>
    		<div class="box7">Box7</div>
    	</div>
    	<div class="row3first">
    		<div class="box8">Box8</div>
    		<div class="box9">Box9</div>
    	</div>
    		<div class="box10">Box10</div>
    </body>
    </html>
    I'll leave you work out the right sizes.

    To attach a specific css file put this in the head of the page:
    Code:
    <style type="text/css" media="all">
    		@import "path/to/file.css";
    </style>

  5. #4
    Member
    Join Date
    Nov 2002
    Posts
    97
    Member #
    278
    Cool, thanks I'll take a look.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:58 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com