15 replies [Last post]
frsn0718
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2005-12-09
Posts: 9
Points: 0

Hi, I found this place on google and I hope I can find the help I want.
I want to create a website based on this one:

http://www.christoffer-n.com/index2.php

So what I need is:

1- How do I make a centered table?
2- How do I add a picture attached to the left border without letting a space between the picture and the border?
3- How do I position a top/right menu?
4- How do I left a space on the left (below the menu) so I can add my blog software codings?

The help is very appreciated.

Thank you Smile

Anonymous
Anonymous's picture
Guru

Re: New here and need lots of help

Show what you have tried so far.

frsn0718
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2005-12-09
Posts: 9
Points: 0

New here and need lots of help

actually I don't know how to start. My CSS knowledge is ZERO

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

New here and need lots of help

Then you must begin my giving yourself some basic groundwork there are Tutorials all over the web to help beginners with CSS layouts and it is best to start studying some of them to get a basic idea of how things work then you may make use of us to help explain and guide you through areas that you are finding difficult. The forum is not really geared towards teaching CSS from the ground up it's best to use written tutorials for that, which you will find a lot easier to get to grips with than our explanations.

Here are a few tuts for beginners to get you started:

http://www.davesite.com/webstation/css/

http://www.yourhtmlsource.com/stylesheets/csslayout.html

http://glish.com/css/

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

frsn0718
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2005-12-09
Posts: 9
Points: 0

New here and need lots of help

Ok, then. After many tries I've come to this:

http://nando.myacen.com/test

Now I would appreciate any help!

First thing:

How do I center this table and how do I spilt it in 2? I want to split it vertically.

Thank you!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 43 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

New here and need lots of help

Tis not a table, it's a div Laughing out loud

		float:left;

Why are you floating it left? How do you hope to center it if you float it left?

Here, use this CSS:

	#maincenter {
		width: 800px;
		height: 500px;
		margin: auto;
		background: #fff;
		padding-bottom:10px;
	    border:2px solid #000;
		}

margin: auto;

will center the box.

Verschwindende wrote:
  • CSS doesn't make pies

frsn0718
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2005-12-09
Posts: 9
Points: 0

New here and need lots of help

It seems to have worked! Thank you.

Now, how do I split it vertically? I mean I want to put the picture on the left side and I will work with a menu and a text are on the right.

Any ideas?

Thanks

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 11 years 44 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

New here and need lots of help

The easiest way would be...

css...
img {
float:left;
margin-right:10px;
}

html...
<div id="maincenter">
<img src="">
menu and content
</div>

Or you could nest two divs inside #maincenter and float one left and the other right...

css...
#leftcolumn {
float:left;
width:395px;
margin-right:5px;
padding:0;
}
#rightcolumn {
float:right;
width:395px;
margin-left:5px;
padding:0;
}

html...
<div id="maincenter">
<div id="leftcolumn"><img src=""></div>
<div id="rightcolumn">content</div>

Laughing out loud -r

frsn0718
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2005-12-09
Posts: 9
Points: 0

New here and need lots of help

Wow that's great! Thanks a lot...

I guess I'll bother you a little more. How do I split the right column horizontaly? I want to put a menu on the top and the main text at the bottom

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 13 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

New here and need lots of help

Getting elements to stack up on top of each other is the natural way for things to work so you don't really have to do much more than add them to your HTML. For groups of elements, you can put them inside their own containing div.
(By the way, just to be pedantic, splitting things so they go top - bottom is actually splitting vertically, not horizontally because the splits will be along the y axis.)

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

frsn0718
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2005-12-09
Posts: 9
Points: 0

New here and need lots of help

sorry... I couldn't understand I thing you said :oops:

frsn0718
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2005-12-09
Posts: 9
Points: 0

New here and need lots of help

as you can see on the site:

http://www.nando.myacen.com/test/

I want that top small area on the right div to be exclusively to the menu. The rest below will have the main text.

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 11 years 44 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

New here and need lots of help

Tyssen wrote:
Getting elements to stack up on top of each other is the natural way for things to work so you don't really have to do much more than add them to your HTML.

Tyssen's right. Just add the links to your html and content below that.

Have you taken the time to look at the links that Hugo provided you?
http://www.davesite.com/webstation/css/
http://www.yourhtmlsource.com/stylesheets/csslayout.html
http://glish.com/css/
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

frsn0718
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2005-12-09
Posts: 9
Points: 0

New here and need lots of help

still don't get it Sad

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

New here and need lots of help

You really must spend a bit of time reading some tutorials we can help to an extent with problems but you must put some work in yourself in getting to understand how CSS works, read those links.

What the guys are trying to explain is that divs or block elements by their nature are arranged vertically they exist on their own horizontal line, so all you need do is place a new div bellow your paragraph links in the right column in the markup.
Something like this:

 
<div id="rightcolumn"> 
<p>About | Pictures | Links | Films |  Contact | Websites</p> 
<div> 
<p>Text on a new line bellow the links</p> 
</div> 
</div> 

However the new div is largely unnecessary as the <p> is a block level element and will naturally fall bellow the first <p>

The new div can though represent the fact that here is a major division.

Your links should really be contained in an ul list, but you will probably need to read up on horizontal lists at listamatic for the techniques.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

frsn0718
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2005-12-09
Posts: 9
Points: 0

New here and need lots of help

Thanks. I'll try to work a lil bit on this and keep you guys updated on my progress.