• Notice regarding image hosts and attachments. See here.

News collumn?

lolage

lolage

lolage

fiveub's Slave
Associate
Joined
1 Sep 2007
Posts
1,461
Location
OcUK HQ
On my homepage i want there to be on the right a section for news. Then on the left of the site there can be normal welcome stuff.

Heres what i want it too look like...
help1.png


Website:
http://davies5.co.uk

HTML:
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" xml:lang="en" lang="en">
<head>
	<title>Davies5 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="description" content="A brief (160 character, including spaces) description of the current page goes here." />
	<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
	<link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection" />
</head>
<body>
<div id="container">
	<div id="header">
		<img src="images/banner.jpg" width="750" height="130"/> 
	</div>
	<ul id="menu">
		<li><a href="index.htm">Home</a></li>
		<li><a href="rob.htm">Rob</a></li>
		<li><a href="nicky.htm">Nicky</a></li>
		<li><a href="ben.htm">Ben</a></li>
		<li><a href="thomas.htm">Thomas</a></li>
		<li><a href="amy.htm">Amy</a></li>
	</ul>
	<div id="content">
		<div class="wrapper">
		<p>Welcome to Davies5. Here you can find out about the Davies Family!</p>
	
		</div>
	</div>
	<div id="footer">
		<em>Copyright © ; 2007, Ben Davies.</em>
	</div>
</div>
</body>
</html>

CSS:
Code: 
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, tt, var {
	margin: 0;
	padding: 0;
}

body {
	background-image: url(images/bg.gif);
	background-repeat: repeat;
	color: #000;
	font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif;
	letter-spacing: 1px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: tahoma, garamond, times, serif;
	font-weight: bold;
}

h1 {
	font-size: 1.75em;
	line-height: 1.8em;
}

h2 {
	font-size: 1.5em;
	line-height: 1.55em;
}

h3 {
	font-size: 1.05em;
	line-height: 1.1em;
}

h4 {
	font-size: 0.95em;
	line-height: 1em;
}

h5 {
	font-size: 0.85em;
	line-height: 0.9em;
}

h6 {
	font-size: 0.75em;
	line-height: 0.8em;
}

img {
	border: 0;                                /* fixes firefox bug */
	display: block;
}

#container {
	color: #FFF;
	margin: 0 auto;
	width: 750px;
}

#header {
	height: 130px;
	float: center;
	margin-top: 10px;
}

#menu {
	overflow: hidden;
	background-color: #ffffff;
	list-style: none;
}
* html #menu {
	height: 1%;	
}
	#menu li {
		float: left;
	}

	#menu a {
		background: transparent;
		color: #000000;
		display: block;
		font: 21px/20px georgia, helvetica, sans-serif;
		margin-right: 20px;
		margin-left: 20px;
		padding: 5px 0;
		text-decoration: none;
		text-indent: 25px;
	}
	#menu a:hover {
		color: #FFD700;
		font: 21px/20px georgia, helvetica, sans-serif;
	}

#content {
	background: #fff;
	color: #000;
	min-height: 600px;
	border-right: 2px solid #fff;
	border-left: 2px solid #fff;
}

* html #content {
	height: 600px;                              /* for ie */
}
	#content .wrapper {
		padding: 1em;
	}

	#content p {
		margin: 0.5em 0;
	}

#footer {
	clear: left;
	color: #ffffff;
	padding-top: 16px;
	text-align: center;
	border-top: 2px solid #FFFFFF;
}
	#footer em {
		border-top: 2px solid #ffffff;
		display: block;
		font: normal 100%/140% tahoma, helvetica, sans-serif;
		margin: 0 auto;
		padding: 0.5em 3em;

How can i do this? Anybody able to help? Thanks..
 
Use an I-Frame (i.e. look at the code used to construct your code box in your post above :D
 
Bes said:
Use an I-Frame (i.e. look at the code used to construct your code box in your post above :D
Click to expand...

First off lolage you keep starting multiple topics, that are all along the same lines. Try and keep it to one thread or read up on XHTML and CSS in tutorials.

iFrame! You don't need an iFrame, just create another div element and work with floats.
 
I can see several ocuk members are being wonderfully helpful for you so I thaught i would step in a give you a helping hand.

To get the news column you would need to create a nested div tag within your main content window and then float it right or if you want exact placement you could use absolute positioning.

Made a few changes to your code but added the news section bit to the bottom of your css file.

you can get em both from my host.

http://www.pixelgangsta.com/temp/lolage.htm
http://www.pixelgangsta.com/temp/lolage.css
 
MadMossy said:
I can see several ocuk members are being wonderfully helpful for you so I thaught i would step in a give you a helping hand.

To get the news column you would need to create a nested div tag within your main content window and then float it right or if you want exact placement you could use absolute positioning.

Made a few changes to your code but added the news section bit to the bottom of your css file.

you can get em both from my host.

http://www.pixelgangsta.com/temp/lolage.htm
http://www.pixelgangsta.com/temp/lolage.css
Click to expand...

Wow, thank you very much for that. :cool:

One question though - as i add content to my main content box the news box goes down with it. Is there a way of making it stay in the same place?

Thanks again mate.

Update: www.davies5.co.uk
 
Last edited:
Thats an easy one, just rename the files like ben.htm to index.htm and place them in folders named after each person.

that way when people type in davies5.co.uk/ben they get taken to bens page.

As for the issue before you would need to make a few adjustments to the css and html code as absolute box's used about cant have text wrapped around them.

Code: 
#news {
    width: 200px;
    height: 300px;
    float: right;
    border: 1px solid #333333;
    background-color: #CCCCCC;
    margin: 10px  10px 0 0;
}
Change the news bit to what I have above, adjust things as you see fit.

You will also need to move the <div id="news"> block to a different position in the html.

Code: 
    <div id="content">
        <div id="news">
                <h1 id="newstitle">News..</h1>
            <p>Some news can go here!</p>
        </div>
          
        <div class="wrapper">
        <p>Welcome to Davies5. Here you can find out about the Davies Family!</p>
        </div>
    </div>

Change the html code to what I have above.
Worth investing in some CSS/HTML books as they can really help with understanding the basic elements on how pages are built.
 
For some reason the text in my news collumn doesnt have a margin so the text is right by the border. But in the css it says it has a 10px border. Any ideas?

Website:
http://www.lolage.co.uk

HTML:
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" xml:lang="en" lang="en">
<head>
	<title>Ben Davies - Come to the Fair!</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="description" content="A brief (160 character, including spaces) description of the current page goes here." />
	<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
	<link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection" />

</head>
<body>
<div id="container">
	<div id="header">
		<img src="#" width="#" height="#"/> 
	</div>
	<ul id="menu">
		<li><a href="index.htm">Home</a></li>
		<li><a href="planning.htm">Planning</a></li>
		<li><a href="logo.htm">Logo</a></li>
		<li><a href="flyer.htm">Flyer</a></li>
		<li><a href="banner.htm">Banner</a></li>
		<li><a href="wristband.htm">Wristband</a></li>
		<li><a href="cd_case.htm">CD Case</a></li>
		<li><a href="digital_poster.htm">Digital Poster</a></li>
	</ul>
	<div id="content">
		<div id="news">
				<h1 id="newstitle">Profile</h1>
			<p><b>Name:</b> Ben Davies
				<br>
				<b>Age</b>: 16
				<br>
				<b>Candidate Number</b>: 3040
				<br>
				<b>Center Number</b>: 20544</p>
		</div>

		<div class="wrapper">
		<p>
				Welcome to my eportfolio. Here in my eportfolio you will find all my work which i have 
				been working on. Its showcased in this eportfolio, click on the links to navigate through 
				the site.
			</p>
			<p>
				I created this website from scratch in a text editor using HTML+CSS. I have also got numerous video clips in the site
				which i have edited myself to evaluate my work.
			</p>
				I hope you like my eportfolio - Graphics SPB. 
			</p>
		</div>
	</div>
	<div id="footer">

		<em>Copyright &#169 ; 2007, Ben Davies.</em>
	</div>
</div>
</body>
</html>

CSS:
Code: 
/* CSS Document */

* {
	margin: 0;
	padding: 0;
}

body {
	background-image: url(images/bg.gif);
	background-repeat: repeat;
	background-color: #333333;
	color: #000;
	font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif;
	letter-spacing: 1px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: tahoma, garamond, times, serif;
	font-weight: bold;
}

h1 {
	font-size: 1.75em;
	line-height: 1.8em;
}

h2 {
	font-size: 1.5em;
	line-height: 1.55em;
}

h3 {
	font-size: 1.05em;
	line-height: 1.1em;
}

h4 {
	font-size: 0.95em;
	line-height: 1em;
}

h5 {
	font-size: 0.85em;
	line-height: 0.9em;
}

h6 {
	font-size: 0.75em;
	line-height: 0.8em;
}

img {
	border: 0;                                /* fixes firefox bug */
	display: block;
}

#container {
	color: #FFF;
	margin: 0 auto;
	width: 750px;
}

#header {
	margin: 0 auto;
	background: url() no-repeat 0 0;
	background-color: #666666;
	border-top: 4px solid #FFF;
	border-left: 4px solid #FFF;
	border-right: 4px solid #FFF;
	height: 130px;
	margin-top: 10px;
}

#menu {
	overflow: hidden;
	background-color: #ffffff;
	list-style: none;
}
* html #menu {
	height: 1%;	
}
	#menu li {
		float: left;
	}

	#menu a {
		background: transparent;
		color: #000000;
		display: block;
		font: 11px/11px georgia, helvetica, sans-serif;
		margin-right: 5px;
		margin-left: 5px;
		padding: 3px 0;
		text-decoration: none;
		text-indent: 25px;
	}
	#menu a:hover {
		color: #FFD700;
		font: 11px/11px georgia, helvetica, sans-serif;
	}

#content {
	background: #fff;
	color: #000;
	min-height: 600px;
	border-right: 2px solid #fff;
	border-left: 2px solid #fff;
}

* html #content {
	height: 600px;                              /* for ie */
}
#content .wrapper {
	padding: 1em;
}

#content p {
	margin: 0.5em 0;
}

#footer {
	clear: left;
	color: #ffffff;
	padding-top: 16px;
	text-align: center;
	border-top: 2px solid #FFFFFF;
}

#footer em {
	border-top: 2px solid #ffffff;
	display: block;
	font: normal 100%/140% tahoma, helvetica, sans-serif;
	margin: 0 auto;
	padding: 0.5em 3em;
}

#news {
	width: 250px;
	height: 130px;
	float: right;
	border: 1px solid #333333;
	background-color: #CCCCCC;
	margin: 10px  10px 0 0;
	
}

#newstitle {
	margin: 0;
	padding: 0;
	width: auto;
	background-color: #666666;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
 
are you trynig to do this on your own first lolage?

this one,
this one,
this one,
this one,

and this list goes on. Now i fully understand the struggle of learning a new language, heck im always posting new threads for help, so i have no problem at all helping you but aslong as you are atleast trying it first and not just oh heres a problem, lets get ocuk to do it, ah another problem, go to ocuk etc.
 
Mammalian said:
are you trynig to do this on your own first lolage?

this one,
this one,
this one,
this one,

and this list goes on. Now i fully understand the struggle of learning a new language, heck im always posting new threads for help, so i have no problem at all helping you but aslong as you are atleast trying it first and not just oh heres a problem, lets get ocuk to do it, ah another problem, go to ocuk etc.
Click to expand...

Just what I said further up in the thread, but it seems I am no longer allowed to suggest one should read up on tutorials.
 
I think your confusing margins with padding.

Margins determine the space outside of your content box, padding is the space inside your box. Like this diagram.

margin-padding.gif


Your content is the information inside the black bordered section, padding goes inwards, margins are outwards.

If you catch my drift.

So to solve your problem use padding on the left side to shift the left right a bit.
 
Sp00n said:
Create a folder called ben and name the file index.htm within that folder.
Click to expand...
There is a simpler way for this, and this to just to a 'mod-rewrite' on the servers .htaccess file, sounds complicated but when you google it it's simple, it's just some gubbins that removes the file extension and I'd recommend that so you don't have loads of folders.

If you'd like any help I'd be more than willing to help out but at the moment you're going places, so it's all good. p.s your first site there looks *exactly!* the same as the first one I made.

This for a 2 column layout helps immensely, and I still refer back to it - http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
 
You must log in or register to reply here.
Back
Top Bottom