PDA

View Full Version : 2 Column CSS Text - Problem with code!


macsolutions
01-28-2008, 03:33 PM
I have some text which needs to be tabbed across, to form 2 columns. Could someone show me how to end the html code for the columns, so that the paragraph below the columns does not touch.

Please see page :
http://www.macsolutions.co.uk/Productivity/productivity.html

I have not added the code to the page yet, but I have tested it and it does work, well nearly!

CSS CODE
.myColumn{
float: left;
width: 100px;
margin: 10px;
padding: 10px;
font-size: 9px;

HTML CODE
<div class="myColumn">Content for class "myColumn" Goes Here</div>
<div class="myColumn">Content for class "myColumn" Goes Here</div>
<div class="myColumn">Content for class "myColumn" Goes Here</div>
<div class="myColumn">Content for class "myColumn" Goes Here</div>

domedia
01-28-2008, 03:44 PM
Looks good. When you add the next paragraph, just make sure you clear the floats:
<p style="clear: left;">My paragraph</p>

macsolutions
01-28-2008, 04:32 PM
Thanks, is this correct.

<p>Want to save time and money? Need help making informed decisions about technology? Looking for a way to maximize your investment? We can provide you with expert technical advice and services to implement these changes to your current infrastructure. </p>
<p>&nbsp;</p>
<p>We take a proactive approach, managing and maintaining your system and often solving problems before you even realise there were any. We can act as an arm to your existing IT infrastructure by choosing to outsource your IT requirements to us.</p>
<p>&nbsp;</p>
<div class="myColumn"> Routine Maintenance</div>
<div class="myColumn"> Disaster Recovery</div>
<div class="myColumn"> Office Relocation</div>
<div class="myColumn"> Backup &amp; Storage Solutions</div>
<div class="myColumn"> Network Solutions</div>
<div class="myColumn"> Hardware &amp; Software Solutions</div>
<div class="myColumn"> System Security</div>
<div class="myColumn"> Networking &amp; System Administration
<p>&nbsp;</p>
</div><p style="clear: left;">If you would like to discuss any issues or needs you may have, please contact us on </p>
<p style="clear: left;">07896 875995 or alternatively email us at support@macsolutions.co.uk</p>

tux
01-28-2008, 06:03 PM
Nice job Tom, the site looks great.

One thing you may want to consider is that you have your email address on each page. You may be leaving yourself open to spam. You may want to think about removing your email address and having a contact form on the site. You could then use a script to process the form and send the contents of the form via email. This way your email address would be hidden from the spam bots.

Check if your hosting package has a Form Mail script or if they allow PHP there are lots of kind chaps on the forum who will help you sort one. There is even a tutorial your can check out here.....

http://www.dreamweaverclub.com/dreamweaver-php-form.php

Well done with the site, regards

Paul

domedia
01-28-2008, 06:19 PM
Looks correct. But remove those Paragraphs with single nonbreaking space. That is not a paragraph. Use CSS margins for creating space you need between element.s

macsolutions
01-29-2008, 07:38 AM
Being a complete novice at this, could you tell me the code to drop in instead of using <p>&nbsp;</p>.

Firstly would the code be different for my 2 column text block, as below as to a normal paragraph break.

<p>&nbsp;</p>
<div class="myColumn">• Routine Maintenance</div>
<div class="myColumn">• Disaster Recovery</div>
<div class="myColumn">• Office Relocation</div>
<div class="myColumn">• Backup &amp; Storage Solutions</div>
<div class="myColumn">• Network Solutions</div>
<div class="myColumn">• Hardware &amp; Software Solutions</div>
<div class="myColumn">• System Security</div>
<div class="myColumn">• Networking &amp; System administration</div>
<p style="clear: left;">&nbsp;</p>
<p style="clear: left;">If you would like to discuss any issues or needs you may have, please contact us on </p>
<p style="clear: left;">07896 875995 or alternatively email us at support@macsolutions.co.uk</p>

domedia
01-29-2008, 01:07 PM
Putting paragraph tags around a single space makes no sense, so just remove them :)
If you need space use CSS margins like margin-top: 1em;

You bullet list is also a list, not divs. So your complete code should be marked up something along these lines:

<ul class="myColumn">
<li>Routine Maintenance</li>
<li>Disaster Recovery</li>
<li>Office Relocation</li>
<li>Backup &amp; Storage Solutions</li>
</ul>
<ul class="myColumn">
<li>Network Solutions</li>
<li>Hardware &amp; Software Solutions</li>
<li>System Security</li>
<li>Networking &amp; System administration</li>
</ul>
<p>If you would like to discuss any issues or needs you may have, please contact us on </p>
<p>07896 875995 or alternatively email us at support@macsolutions.co.uk</p>

Now you're data actually has semantic meaning.

In your CSS file, you can keep the myColumn class, it will work for the list as well. For you paragraphs you simply add one CSS rule:
p {clear: left;}

The list will have some default margin, but I think you'll like it. If you need to change it, you can modify you myColumn code.