14 replies [Last post]
Cook66
Offline
Regular
Last seen: 13 years 46 weeks ago
Joined: 2007-06-10
Posts: 22
Points: 0

About The Website:

Made with HTML and CSS.

Photoshop
Designed the layout from scratch, then sliced it into pieces.

Imageready
Made the rollover images, the baisic CSS and HTML.

Dreamweaver
Used for testing and costumization. I haven't made a lot of changes with that

My Own Coding

CSS
Put the CSS in a seperate File
Moved most images into the CSS (except logo, banner and rollover menu, which contain links.)
Added basic CSS style codes
Changed and added a bunch of minor things.
Gave expandable sections a 1px repeated image.

It is made using absolute positioning, I don't know how to change it.

HTML
Removed images coevered by CSS, still under major construction.

The Problem

I want the content to expand visibly with overflow, and at the same time also expand two other sections along with it. I also want the images located below the content to be automaticly pushed down as the content expands, it currently overlaps.

I know it's absolute positioning which is causing the problem, but I haven't figured out how to fix it. I am fairly new to HMTL and CSS so it takes me forever to figure things out, and I have been trying to get this working for a long time now.

Live Test Site: http://www.cook66.com/test/
Image Explination: http://www.cook66.com/test/help.jpg
CSS: http://www.cook66.com/test/stylesheet.css
HTML in txt format: http://www.cook66.com/test/index.txt

I hope I can get help with this as it's been pure torture trying to figure this out. Sad

Thanks for reading

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 19 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Owch. NEVER use Photoshop

Owch.

NEVER use Photoshop to slice up layouts. Ever. EVER.

Read this first:

http://csscreator.com/divitis

and have a go at cutting down on the divs Wink

Verschwindende wrote:
  • CSS doesn't make pies

Cook66
Offline
Regular
Last seen: 13 years 46 weeks ago
Joined: 2007-06-10
Posts: 22
Points: 0

So I have to redesign

So I have to redesign everything?

I'm reading through that tutorial now, when I'm done I'll post my results, but I would much rather find a simpler solution to the problem and gradually work out problems such as too many divs as I progress.

Triumph (not verified)
Anonymous's picture
Guru

Cook66 wrote:... I would

Cook66 wrote:
... I would much rather find a simpler solution to the problem and gradually work out problems such as too many divs as I progress.

Sounds backwards to me. "I wouldn't have all these problems if it weren't for these problems". Laughing out loud

Cook66
Offline
Regular
Last seen: 13 years 46 weeks ago
Joined: 2007-06-10
Posts: 22
Points: 0

Well, I've read through the

Well, I've read through the Divitis thing and to be honest it really didn't help me at all.

I don't understand how this solves my problem, and even if it did it wouldn't help me since I don't know how to use it. I can't code a CSS page on my own, sure I can copy what was done in that guide, but I can't incorprate the infomation there into my website, because I have not the slightest clue on how to do it other than using divs and absolute positioning.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 19 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Mark up your content

Mark up your content semantically first.

For example, a <h1> tag for your title, an unordered list for the menu, paragraphs for text, etc.

Ignore design completely now. Where is your content?

Verschwindende wrote:
  • CSS doesn't make pies

Cook66
Offline
Regular
Last seen: 13 years 46 weeks ago
Joined: 2007-06-10
Posts: 22
Points: 0

I haven't gotten as far as

I haven't gotten as far as adding content yet. My first priority is to get the template working correctly, then I'll start working on the content.

And I'm sorry, but I don't know exactly what you mean.. Do you want me to start over and just add basic things such as font colors and such?

You don't have an example CSS I can have a look at so I know exactly what you mean?
I thought it was best to get the design to work before worrying about the content and the text, font, colors and all that.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 19 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Cook66 wrote:I haven't

Cook66 wrote:
I haven't gotten as far as adding content yet. My first priority is to get the template working correctly, then I'll start working on the content.

You've got it completely backwards.

People don't come to your site for the design, they come for content.

Get your content, get it marked up with HTML, then start styling.

Verschwindende wrote:
  • CSS doesn't make pies

Triumph (not verified)
Anonymous's picture
Guru

Cook66 wrote:Well, I've read

Cook66 wrote:
Well, I've read through the Divitis thing and to be honest it really didn't help me at all.

I don't understand how this solves my problem, and even if it did it wouldn't help me since I don't know how to use it. I can't code a CSS page on my own, sure I can copy what was done in that guide, but I can't incorprate the infomation there into my website, because I have not the slightest clue on how to do it other than using divs and absolute positioning.What are the chances of you hiring a professional? Just asking ... not implying anything.

Cook66 wrote:
I haven't gotten as far as adding content yet. My first priority is to get the template working correctly, then I'll start working on the content.

And I'm sorry, but I don't know exactly what you mean.. Do you want me to start over and just add basic things such as font colors and such?

You don't have an example CSS I can have a look at so I know exactly what you mean?
I thought it was best to get the design to work before worrying about the content and the text, font, colors and all that.
This article can be posted as an answer for about 98% of the questions posed here at CSScreator.com: http://www.alistapart.com/articles/fauxcolumns/

Seems to be what you are looking for but you still have to dump the divitis and the absolute positioning.
One reason for dumping absolute positioning is in the picture below which shows a few text resizes:

Cook66
Offline
Regular
Last seen: 13 years 46 weeks ago
Joined: 2007-06-10
Posts: 22
Points: 0

thepineapplehead

thepineapplehead wrote:
Cook66 wrote:
I haven't gotten as far as adding content yet. My first priority is to get the template working correctly, then I'll start working on the content.

You've got it completely backwards.

People don't come to your site for the design, they come for content.

Get your content, get it marked up with HTML, then start styling.

Yes, you are correct, people do come for the content, but at the moment I am not making this website for anyone other than myself. There is no reason to have any content if I'm not even sure I am going to make it possible to put it to any use. So first I am creating the design, first of all to learn how to do it, and secondly to have some inspiration to make the content I want.

I allready have lots of plans, which are all in my head, and as I allready said, I see no point in wirting any of it down when I first of all don't have anywhere to put it and by the looks of how things are going with my site I may never do.

I haven't given up yet though, but this is not an extremely important project, if I don't make this website then the only impact is one less domain used.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 19 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Cook66 wrote:There is no

Cook66 wrote:
There is no reason to have any content if I'm not even sure I am going to make it possible to put it to any use. So first I am creating the design, first of all to learn how to do it, and secondly to have some inspiration to make the content I want.

Unfortunately it's going to be hard to do in CSS then Tongue

It can still be done though. You'd still use a H1 for your main logo at the top, a list for the blank links on the left, etc.

Verschwindende wrote:
  • CSS doesn't make pies

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 50 weeks 6 days ago
Bournemouth
Joined: 2007-05-31
Posts: 693
Points: 45

Design/Content

I know what you mean though Cook. I like to design something attractive then when I look at it all pretty and aesphetically pleasing, it inspires me to make the content! However, it really does help to have some sort of idea about content. I for example, am designing a page at the moment. It's to be an update page exclusively for my other half who will be in Spain unable to call, but with internet access. The idea is she'll log on daily and I'll have updated it. I have no idea what the actual content will be yet so I've just used things like 'This is where the heading will go' etc...

If you would like to have a look at what I've done thus far and how, please just let me know. My overall point is you can design for a page not knowing what the content will be, but it really helps if you can decide how many main bodies of text your going to want (I decided on 'update news' boxes on the left and right to contain short stories, with a main content column in the middle).

Cheers then,

John

Have YOU said Hello yet?
The CSSCreator Hello Thread

Cook66
Offline
Regular
Last seen: 13 years 46 weeks ago
Joined: 2007-06-10
Posts: 22
Points: 0

What I have in mind is

What I have in mind is pretty simple actually.
In the blue bar above the content section I want to add sublinks for each category. The categories are represented by the rollover images on the left.

Under it I want a simple path such as:

>>Photoshop>Tutorials>How not to design a website

With links so you can easily manouver back and forth.

Under there I will simply be adding some basic text and/or images. This is all I want for now, nothing special, nothing which require super CSS attention other than getting the layout to work.

I do not care about visitors, I am not trying to make something for anyone other than me. Maybe I will later, but for now the only thing I want is to know how to code a website with CSS.

I could have done this a billion times easier with simple HTML, and I am really failing to see how CSS is making anything faster or more simple...

I have made some changes to my site now. I'm behind a firewall though, so I can't upload it, but what I have done is to seperate the heading, content and footer into different divs, then make the divs I currently have into ul. I'm not sure what good that did though.

But yeah as I said, the content is irrelevant, for now just settle for random words in the content div, thats all I need.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 19 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

You can post the code

You can post the code inbetween <code></code> tags if you want us to have a look.

Verschwindende wrote:
  • CSS doesn't make pies

Cook66
Offline
Regular
Last seen: 13 years 46 weeks ago
Joined: 2007-06-10
Posts: 22
Points: 0

HTML

HTML

Cook66.com - Home


        Text

        CSS

        body{
        background:#626262;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:11px;
        color:#000000;

        }

        a:link {
        color: #00A2FF;
        }
        a:visited {
        color: #59C6FF;
        }
        a:hover {
        color: #8AFFFF;
        text-decoration: none;
        }
        a:active {
        color: #C5F7FF;
        }

        #Website_ {
        position:absolute;
        left:0px;
        top:0px;
        width:734px;
        height:1246px;
        }

        #heading_ {
        position:absolute;
        left:0px;
        top:0px;
        width:734px;
        height:214px;
        }

        #banner-top_ {
        position:absolute;
        left:0px;
        top:0px;
        width:734px;
        height:20px;
        background:url("images/banner-top.jpg") no-repeat;
        }

        #banner-left_ {
        position:absolute;
        left:0px;
        top:20px;
        width:58px;
        height:161px;
        background:url("images/banner-left.jpg") no-repeat;
        }

        #logo_ {
        position:absolute;
        left:58px;
        top:20px;
        width:161px;
        height:161px;
        }

        #banner-over_ {
        position:absolute;
        left:219px;
        top:20px;
        width:515px;
        height:32px;
        background:url("images/banner-over.jpg") no-repeat;
        }

        #banner_ {
        position:absolute;
        left:219px;
        top:52px;
        width:451px;
        height:112px;
        }

        #banner-right_ {
        position:absolute;
        left:670px;
        top:52px;
        width:64px;
        height:112px;
        background:url("images/banner-right.jpg") no-repeat;
        }

        #banner-under_ {
        position:absolute;
        left:219px;
        top:164px;
        width:515px;
        height:17px;
        background:url("images/banner-under.jpg") no-repeat;
        }

        #banner-bottom_ {
        position:absolute;
        left:0px;
        top:181px;
        width:734px;
        height:33px;
        background-image: url("images/banner-bottom.jpg");
        }

        #con_ {
        position:absolute;
        left:0px;
        top:214px;
        width:734px;
        height:909px;
        }


        #nav-left_ {
        position:absolute;
        left:0px;
        top:0px;
        width:67px;
        height:270px;
        background:url("images/nav-left.jpg") no-repeat;
        }

        #nav-home_ {
        position:absolute;
        left:67px;
        top:0px;
        width:114px;
        height:30px;
        }

        #nav-right_ {
        position:absolute;
        left:181px;
        top:0px;
        width:38px;
        height:270px;
        background:url("images/nav-right.jpg") no-repeat;
        }

        #content-top_ {
        position:absolute;
        left:219px;
        top:0px;
        width:494px;
        height:38px;
        background:url("images/content-top.jpg") no-repeat;
        }

        #content-right_ {
        position:absolute;
        left:713px;
        top:0px;
        width:21px;
        height:909px;
        background:url("images/content-right-px.jpg");
        background-repeat: repeat-y;
        }

        #nav-b1_ {
        position:absolute;
        left:67px;
        top:30px;
        width:114px;
        height:10px;
        background:url("images/nav-b1.jpg") no-repeat;
        }

        #content_ {
        position:absolute;
        left:219px;
        top:38px;
        width:494px;
        height:871px;
        background:url("images/content-px.jpg") repeat-y;
        }

        #nav-about_ {
        position:absolute;
        left:67px;
        top:40px;
        width:114px;
        height:30px;
        }

        #nav-b2_ {
        position:absolute;
        left:67px;
        top:70px;
        width:114px;
        height:10px;
        background:url("images/nav-b2.jpg") no-repeat;
        }

        #nav-photoshop_ {
        position:absolute;
        left:67px;
        top:80px;
        width:114px;
        height:30px;
        }

        #nav-b3_ {
        position:absolute;
        left:67px;
        top:110px;
        width:114px;
        height:10px;
        background:url("images/nav-b3.jpg") no-repeat;
        }

        #nav-gallery_ {
        position:absolute;
        left:67px;
        top:120px;
        width:114px;
        height:30px;
        }

        #nav-b4_ {
        position:absolute;
        left:67px;
        top:150px;
        width:114px;
        height:10px;
        background:url("images/nav-b4.jpg") no-repeat;
        }

        #nav-downloads_ {
        position:absolute;
        left:67px;
        top:160px;
        width:114px;
        height:30px;
        }

        #nav-b5_ {
        position:absolute;
        left:67px;
        top:190px;
        width:114px;
        height:10px;
        background:url("images/nav-b5.jpg") no-repeat;
        }

        #nav-links_ {
        position:absolute;
        left:67px;
        top:200px;
        width:114px;
        height:30px;
        }

        #nav-b6_ {
        position:absolute;
        left:67px;
        top:230px;
        width:114px;
        height:10px;
        background:url("images/nav-b6.jpg") no-repeat;
        }

        #nav-info_ {
        position:absolute;
        left:67px;
        top:240px;
        width:114px;
        height:30px;
        }

        #nav-bottom_ {
        position:absolute;
        left:0px;
        top:270px;
        width:219px;
        height:300px;
        background:url("images/nav-bottom.jpg") no-repeat;
        }

        #content-left_ {
        position:absolute;
        left:0px;
        top:570px;
        width:219px;
        height:339px;
        background:url("images/content-left-px.jpg");
        background-repeat: repeat-y;
        }

        #footer_ {
        position:absolute;
        left:0px;
        top:1123px;
        width:734px;
        height:123px;
        }

        #content-bottom_ {
        position:absolute;
        left:0px;
        top:0px;
        width:734px;
        height:33px;
        background:url("images/content-bottom.jpg") no-repeat;
        }

        #bottom_ {
        position:absolute;
        left:0px;
        top:33px;
        width:734px;
        height:56px;
        background:url("images/bottom.jpg") no-repeat;
        }

        #copyright_ {
        position:absolute;
        left:0px;
        top:89px;
        width:734px;
        height:34px;
        background:url("images/copyright.jpg") no-repeat;
        }

        edited by CT: post edited because code tags not used. PLEASE PLEASE USE THE CORRECT CODE TAGS (USING < and >, NOT SQUARE BRACKETS] FOR HTML and CSS!
        Edit: Yes I was about to change it, see you beat me to it.