Three columns webpage

[philips]

Hi there,

I am trying to come up with webpage design similar to the following webpage but without the comment area and the footer: http://www.thedailybeast.com/articles/2011/06/23/eric-cantor-departure-from-biden-budget-sessions-prompted-by-obama-boehner-talks.html?obref=obinsite

I like to have a liner that separates the area where the article is written from the right side area.

Any help is greatly appreciated.

[philips]

Anyone can tell me what it takes to make a line similar to the grey line that runs after "US POLITICS"

http://www.thedailybeast.com/articles/2011/07/16/marcus-bachmann-gay-how-rumors-could-affect-michele-bachmann-s-campaign.html

Is it CSS or an image??

[philips]

Just a quick question: I have a website that I have built using tables and cells in MS FP 2003. Now... one of the cells has a size of 861 x 23 how much does this equal in pixels (??) for the purposes of CSS? Is there a rule I can follow so I don't have to ask such basic questions in the future?

I am planning to re-do this website in CSS. Thanks.

[CChawps]

Hey,

DD got some templates for a three columns layout here:
http://www.dynamicdrive.com/style/layouts/category/C10/

As for the border I would just add a line beneath my header in photoshop. However you could also add borders in CSS:
http://www.w3schools.com/css/css_border.asp

I have never touched frontpage before, so I know nothing about that... But I usually just keep it simple and use percentages and pixels for the units. But ehh, 861 x 23, is cm, inches or which unit??

Regards Toby

[philips]

Hi Toby,

Thanks for your feedback. I am trying to create a webpage that is similar in design to the following: http://www.thedailybeast.com/articles/2011/07/16/marcus-bachmann-gay-how-rumors-could-affect-michele-bachmann-s-campaign.html

However I like to have a separating line on the right side and no comment area or the black footer area.

[CChawps]

I'm a little unsure of exactly where you want the seperate liner.

CODE

<style type="text/css">
#wrap {
margin: 0 auto;
width: 797px;
}

#topb {
background: #FFF;
width: 797px;
height: 60px;
border-bottom: 3px solid #666;
}

#topb h1 {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: normal;
text-align: center;
}

#leftb {
background: #EEE;
width: 169px;
float: left;
padding: 4px;
}

#middleb {
background: #FFF;
width: 432px;
float: left;
padding: 4px;
}

#rightb {
background: #FFF;
width: 169px;
float: left;
padding: 4px;
border-left: 3px solid #666;
}
</style>

<div id="wrap">
<div id="topb"><p><h1>HEADING</h1></p></div>
<div id="leftb"></div>
<div id="middleb"></div>
<div id="rightb"></div>
</div>

IMAGE OF THE RESULT
WITH FILLER TEXT
http://i53.tinypic.com/ogl0xu.png

[philips]

That's a good one. I find it quite interesting how a total CSS code with no html can render such a result!

[CChawps]

The code in my previous post does contain HTML. The stuff marked in pink is CSS, and the blue is HTML. But it may look wrong if you try to parse the whole code into a HTML document, because there is no content in the code I've giving you. I used (just for display) a DD javascript the paste random filler text into the three areas, so I could illustrate how it "would" look if you had some content.

By the way, are you creating a website? :)

Feel free too ask me if there's anything else I can help you with.

-Toby

[philips]

Hi Toby,

Now I understand...:)

Thank you very much for your kind offer....:)

Yes, I am trying to create a simple looking layout that is similar to the following but without the comment area and the black footer part:

http://www.thedailybeast.com/articles/2011/07/26/gun-sting-bungled-house-panel-blasts-justice-department-over-atf-operation.html

On another note, is it the case that I would normally have to place the css code (the pink) in a separate style sheet? I know how to save it as css: I just save it in editor for example as index.css. The HTML code is in a separate editor document. A separate style sheet could then be shared by other pages.

[philips]

I am trying to cause the code you created to show the website in the center and it is showing to the left side....:confused:

[philips]

Hello Toby,

I am attaching the docs.

[philips]

Hi Toby,

I am beginning to understand more, and I have played around with the code. Here is the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>my blog</title>
<!-- David's Blog -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<div id="wrap"> <div id="topb"><p><h1>HEAD</h1></p></div> <div id="leftb"></div> <div id="middleb"></div> <div id="middleb"></div></div>


</html>




And here is the CSS:


/*
CSS Credit: webmaster
*/

<style type="text/css">
#wrap {
margin: 0 auto;
width: 850px;
}

#topb {
background: #FFF;
width: 850px;
height: 60px;
border-bottom: 3px solid #666;
}

#topb h1 {
margin: 0;
padding: 0;
font-family: Bodoni MT, Arial, Helvetica, sans-serif;
font-size: 50px;
color: #CD0021;
font-weight: bold;
text-align: center;
}

#leftb {
background: #FFF;
width: 169px;
float: left;
padding: 4px;
}

#middleb {
background: #FFF;
width: 500px;
float: left;
padding: 4px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #444;
font-weight: normal;
text-align: left;
}

#rightb {
background: #FFF;
width: 169px;
float: left;
padding: 4px;
border-left: 1px solid #FFF;
}
</style>


Still no success in making it appear in the center :confused:

Looking forward to your help. Thank you.

[CChawps]

Yes, I would normally place the CCS code in a document separate from the HTML document. The site should appear in the middle, think you've caused an error or something. However I've uploaded and I corrected the code a bit.

Download here:

http://www.megaupload.com/?d=STQSRAMO

-Toby

[philips]

For two hours now and I have been trying to learn how to create a navigation bar similar to the black one at the top of the following page: http://www.thedailybeast.com/articles/2011/07/22/president-obama-debt-talks-has-he-hit-a-breaking-point.html

I wish someone would tell me what exactly is the CSS and HTML that can generate something similar. :confused:

[philips]

Hi Toby, I can't download :-(

[philips]

OK download was successful. Thanks Toby....