53 replies [Last post]
breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

I feel very silly not being able to solve this myself, but I have tried, I swear! I read through the tutorials and posts all over, but it seems that I don't quite have a grasp on how to position things to get them to work the way I need.......

[url]http://doulafran.com/test/wordpress-2.31/wordpress/
[/url]
That's the site I'm working on.

As you can see, the side columns have disappeared, although I tried to have them repeat Y. The center div, which is just a color without images seems to work, though. Also, I can't figure out how to get my footer to position. Absolute? Float? Wot?

Please help a slow girl out

here's the css:

body {
text-align:center;
background:#c7dc74;
}

#wrapper {
position:relative;
left:24%;

}

#Table_01 {
position:absolute;
left:0px;
top:0px;
width:718px;
height:600px;
}

#doulafran-01_ {
background-image:url(images/doulafran_01.gif);
position:absolute;
left:0px;
top:0px;
width:718px;
height:8px;
}

#doulafran-02_ {
background-image:url(images/doulafran_02.gif);
position:absolute;
left:0px;
top:8px;
width:21px;
height:592px;
}

#doulafran-03_ {
background-image:url(images/doulafran_03.gif);
position:absolute;
left:21px;
top:8px;
width:219px;
height:177px;
}

.home {
margin:0;
border:0;
padding:0;
vertical-align:middle;
}

#doulafran-04_ {
background-image:url(images/doulafran_04.gif);
position:absolute;
left:240px;
top:8px;
width:452px;
height:27px;
}

#doulafran-05_ {
background-image:url(images/doulafran_05.gif);
position:absolute;
left:692px;
top:8px;
width:26px;
height:592px;
}

#doulafran-06_ {
background-image:url(images/doulafran_06.gif);
position:absolute;
left:240px;
top:35px;
width:411px;
height:93px;
}

#doulafran-07_ {
background-image:url(images/doulafran_07.gif);
position:absolute;
left:651px;
top:35px;
width:41px;
height:150px;
}

#doulafran-08_ {
background-image:url(images/doulafran_08.gif);
position:absolute;
left:240px;
top:128px;
width:411px;
height:57px;
}

#doulafran-09_ {
background: url(images/doulafran_09.gif) repeat-y;
position:absolute;
left:21px;
top:185px;
width:45px;

}

#doulafran-10_ {
background:#FFF repeat-y;
position:absolute;
left:66px;
top:185px;
width:585px;
height:auto;
overflow: hidden;
padding-bottom: 3em;

}

#doulafran-11_ {
background-image:url(images/doulafran_11.gif) repeat-y;
position:absolute;
left:651px;
top:185px;
width:41px;

}
#doulafran-12_ {
background-image:url(images/doulafran_12.gif);
position: absolute;
left: 21px;
top:506px;
width:671px;
height:94px;
}

#footertext{
vertical-align:center;
margin-top:30px;

}
#Table_02 {
position:absolute;
left:0px;
top:0px;
width:411px;
height:93px;
}

#menubar-01 {
position:absolute;
left:0px;
top:0px;
width:88px;
height:93px;
}

#menubar-02 {
position:absolute;
left:88px;
top:0px;
width:89px;
height:93px;
}

#menubar-03 {
position:absolute;
left:177px;
top:0px;
width:79px;
height:93px;
}

#menubar-04 {
position:absolute;
left:256px;
top:0px;
width:63px;
height:93px;
}

#menubar-05 {
position:absolute;
left:319px;
top:0px;
width:92px;
height:93px;
}

And the index code (rather long [and the javascript doesnt work]):

Doula Fran Varacalli








home




































Site open for biz

October 4th, 2007

This is where the news will go

Filed under: News admin @ 11:46 pm Edit This




THIS IS Da footer!

You guys are so helpful! Thanks ahead of time!

---bree :shrug:

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 5 weeks 4 days ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

You're gonna hate me for

You're gonna hate me for saying this . . . but absolutely positioning sliced images is not the correct way to lay out your site. Your code is also terribly OTT and convoluted, for example this:











would be much better like this:

Verschwindende wrote:
  • CSS doesn't make pies

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

Well, that was for the image

Well, that was for the image swapping and javascript I had laid out---

Mostly, Im not concerned with the image map right now---

Im stuck on the css layout of the rest of it...
Like how to position the footer and what not...

maybe I'm doing the wrong kind of positioning?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 5 weeks 4 days ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

breegeek wrote:Well, that

breegeek wrote:
Well, that was for the image swapping and javascript I had laid out---

You can do the image swapping with the code I gave you, no Javascript involved at all.

The AP doesn't help either.

Have a go at marking up a second page with less cluttered HTML but leave this page intact, then we can work on styling the new page to look how you want.

Verschwindende wrote:
  • CSS doesn't make pies

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

... but I want to use images

... but I want to use images for font control Sad even though I still haven't gotten my rollovers to work properly, I still would like to keep these as images <---has a fool for a master

as for the absolute positioning, I havent been able to figure out how to lay it out without AP... is there a direction in which you can point me?
floating doesn't seem to work for me... maybe because I've got a complex layout? but htere aren't any... float: bottom s are there?

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 21 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

Sorry to say, that's not an

Sorry to say, that's not an advanced layout.
I am sure if you posted an image of exactly what you wanted it to look like as well as semantically correct, valid html, we can help you code it in correct CSS.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Triumph (not verified)
Anonymous's picture
Guru

breegeek wrote:... maybe

breegeek wrote:
... maybe because I've got a complex layout? ...

Um, no. Single column with header and footer? About as simple as possible.

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

hehe you live in

hehe you live in Pennsyltucky? you're in on the joke? jk

yeah, but the header is a bit wonky I guess...
And the center is supposed to have surrounding columns that disappeared when I took away the height of the div

I dunno... the original issue still remains---- I can't get things to play nicely.

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 21 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

<div id="wrapper"><div

That is going to be the basic structure of your site.
Set the left and right columns as one image and put it as the background of the #wrapper and have it repeat-x
set the background image for the header and footer

put in some text.

done!

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Triumph (not verified)
Anonymous's picture
Guru

breegeek wrote:hehe you live

breegeek wrote:
hehe you live in Pennsyltucky? you're in on the joke?
Hey! What joke?

Pennsyltucky is everywhere in Pennsylvania that isn't philadelphia or pittsburgh. I'm planning on running for governor on the plaform that I will give philadelphia to new jersey and pittsburgh to canada. Things can only get better from there (except for new jersey and canada).

Why don't you go up to the top of the page and click on "Tools"? There is a layout generator there that you should be able to use to get what you need. Even if it isn't exactly what you want it will show you a better way of doing things.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 14 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

Triumph wrote:I'm planning

Triumph wrote:
I'm planning on running for governor on the plaform that I will give philadelphia to new jersey and pittsburgh to canada.

See? I always knew you 'muricans were out to get us, eh?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 5 weeks 4 days ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

breegeek wrote:... but I

breegeek wrote:
... but I want to use images for font control Sad even though I still haven't gotten my rollovers to work properly, I still would like to keep these as images

I'm aware of that. And you can use images with the code I gave you.

Get the menu marked up with the HTML I gave you then point us to the latest page, and we'll explain how to achieve the images and rollovers without touching the HTML.

Verschwindende wrote:
  • CSS doesn't make pies

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

wow thanks for the

wow thanks for the responses! there's a lot of stuff to try here, so I'm gonna take some time to test these solutions.

One thing that happened was that I tried the css layout generator tool to see how it made footers. I went to preview it in a browser and the footer didnt attach to the columns Tongue

Triumph (not verified)
Anonymous's picture
Guru

breegeek wrote:One thing

breegeek wrote:
One thing that happened was that I tried the css layout generator tool to see how it made footers. I went to preview it in a browser and the footer didnt attach to the columns Tongue

Show me the generated code.

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

this is the generator's

this is the generator's product

/* generated by csscreator.com */ html, body{ margin:0; padding:0; text-align:center; } #pagewidth{ width:600px; text-align:left; margin-left:auto; margin-right:auto; } #header{ position:relative; height:100px; background-color:#5F5F5F; width:100%; } #leftcol{ width:45%; float:left; position:relative; background-color:#F3665F; } #twocols{ width:55%; float:right; position:relative; } #rightcol{ width:82%; float:right; position:relative; background-color:#F3665F; } #maincol{background-color: #FFFFFF; float: left; display:inline; position: relative; width:18%; } #footer{ height:100px; background-color:#0FBFE3; clear:both; }


/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */


/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}

/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}

CssCreator-->HTML 4.01 Strict Template



Main Content Column

right Column


Left Column


breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

O_O oh noes! I tried making

O_O oh noes!

I tried making just a bg for the whole shebang made of the image for 3 columns and trying to get it to repeat, and now it plants the main div (which should be under the header) behind the header! O_O

omigosh help!

Doula Fran Varacalli

" />



























So thats the basic for the top, where the header should sit above the main

CSS:

body {
text-align:center;
background:#c7dc74;
}

#wrapper {
position:relative;
left:24%;
background-image: url(images/3column.gif);
background-repeat: repeat-y;
}

#main {

background-image: url(images/3column.gif);
background-repeat: repeat-y;
}

I havent even gotten to the footer O_O

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 21 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

parsed html or a link would

parsed html or a link would be better.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Triumph (not verified)
Anonymous's picture
Guru

breegeek wrote:One thing

breegeek wrote:
One thing that happened was that I tried the css layout generator tool to see how it made footers. I went to preview it in a browser and the footer didnt attach to the columns Tongue

It's touching the tallest column (maincol). Had you not made the body background and the maincol background the same color you could have seen that the footer is connected. Applying faux columns to the generated code would make it work visually, it already works functionally.

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

>.<

Oh, the link was at the beginning of the thread so I forgot to repost it. sorry Tongue

http://doulafran.com/test/wordpress-2.31/wordpress/

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 21 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

I know for a fact that the

I know for a fact that the Tools section layout generator did not spit out the code on that link.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

no, these are two separate

no, these are two separate issue...

the code generator was just something someone told me to play with and I didnt understand fully...

the page I linked to is where we were at the beginning of the thread--- someone suggested that I try to set the entire wrapper div to have a repeating background of the 3 center columns, which I tried but I can't seem to do correctly. Now my center div is hiding behind my header div... for some reason...

Someone explained to me the code generator but that's different from the problem I'm having now

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

Here's a screen print of the

Here's a screen print of the insanity that is now going on for me:

here's *vaguely* what it vaguely SHOULD look like (a quick sketch mock-up) if I could get my faux columns to work Tongue:

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 21 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

Why don't you start over and

Why don't you start over and use the base code I gave you.
That is how you need to break it up. Guaranteed to work.

Stop thinking about tables, and the way you have it "sliced" is not at all the way you want it to be laid out.

Your layout requires 3 images, 7 images if you REALLY have to have the links be images.

And you don't need faux columns for this layout, that is another way you are hurting yourself.
You only have one column, you have no need to fake another.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

Well I think the issue Im

Well I think the issue Im having is that the center div, whatever background I'm creating, won't stretch to the footer, so it gets all confuzzled... especially since I'm gonna be separating it with php...

I can't figure out how to properly get an image to "repeat" y, and then I have trouble getting it to divide into three vertical pieces...

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 21 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

well stop using the code you

well stop using the code you have (obviously it isn't working) and try code that will work.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

:< but i still don't see

:< but i still don't see *why* it isnt working, like. I started out with the layout kinda working, then I tried the repeat-y thing to make my columns stretch to a footer, but then it fell more apart.

I think I need help from the beginning again--- with how the repeats work, and Ive read a bunch of tutorials, so I don't quite know what I'm doing incorrectly..........

I keep starting over, but as soon as I get to trying to get the columns to stretch to a footer... thinsg fall apart

Like, I feel as if I understand why my main column is hiding behind the header div... I will understand css better and get more as a fledgling coder... :\

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 21 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

HTML <div id="wrapper"><div

HTML


CSS

#wrapper {
width: 671px;
margin: 0 auto;
background: url(images/content_bg.jpg) repeat-y left top;
}

#header {
background: url(images/header.jpg) no-repeat left top;
height: 177px;
}

#content {
padding: 25px;
}

#footer {
background: url(images/footer.jpg) no-repeat left top;
height: 94px;
}

there you go. you are now well on your way to having your layout.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 21 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

breegeek wrote::I think I

breegeek wrote:
:I think I need help from the beginning again

which is what I am trying to do.
You have invalid markup.
your markup is crap.
it is unsemantic.
it's over complicated... i could go on.

start over.
use good code.
get good results.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

ok I'll try redoing it with

ok I'll try redoing it with a header that is just an image for now... and see if that works?

:<

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 21 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

the entire top area is one

the entire top area is one image,
the middle left and right bars and white center is one image same width as the header and only one pixel tall

and the entire footer area is one image.

this equals 3 images.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

:< :< :< Ok, I'm starting

:< :< :<

Ok, I'm starting from the VERY beginning...

here's a site mockup I'm trying to get to work, css wise....
http://doulafran.com/test/fran.html

Untitled Document

/* CSS Document */ html, body{ margin:0; padding:0; text-align:center; }

#wrapper {
width:671px;
text-align:left;
margin-left:auto;
margin-right:auto;
border:3pt solid #003366;
}

#header {
position:relative;
height:180px;
background-image:"headerimage.gif";
width:671;
}

#main {
width:671pt;
background-image:"3column.gif";
background-repeat:repeat-y;

}

#footer {
height:45px;
background-color:#000600;
clear:both;

}

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

T.T I'm even trying a

T.T

I'm even trying a solution from another post, unaltered, and I STILL can't figure out how to get a column to stretch to the bottom.

I'm actually in tears at this point, which is lame, but I'm a girl so its excusable, right?

take a gander: http://www.nerdcomics.com/webclass/breeisgoinginsane.html

css:

body {
margin: 0;
padding: 0;
font-family: verdana, arial, helvetica, sans-serif;
color: #fff;
background-color: #fff;
}

html, body {
text-align: center;
}

#wrap {
margin-left: auto;
margin-right: auto;
width: 750px;
}

#top {
padding: 10px 0 20px 0;
background-color: black;
height: 96px;
width: 750px;
}

#middle {
background-color: transparent;
width: 750px;
}

#left {
background-color: green;
width: 50px;
float: left;
}

#right {
background: purple repeat-y;
width: 700px;
float: right;
}

#footer {
background: red;
width: 750px;
clear: both;
}

html:

Untitled Document

Bankside Traders Association


top





left






please I have no idea what I'm missing here?

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 21 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

DOCTYPE: what are you

DOCTYPE: what are you transitioning from? this is new code, use a strict doctype.

CSS: code your background properties correctly, and you might as well use shorthand, that's why it's there.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 21 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

please don;t bring in more

please don;t bring in more offending code.
let's roll with what you have started.

Get your CSS background tags straightened up, and then we will go to the next step.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

I copied it verbatum from

I copied it verbatum from another string...

I don't use shorthand UNTIL I can figure out EXACTLY what I'm doing, because it helps me go through thinsg step by step...

this is the string whence I copied the script to see if I could figure out what's going on, but the columns STILL won't stretch: http://csscreator.com/node/5806

:<

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 21 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

I looked at your CSS

I looked at your CSS again.

PLEASE stop adding extra unneeded code to it.
When did I ever mention the need for "position: relative" ?
relative to what?

let's go with the code I supplied...

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 21 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

there is NO stretching. if

there is NO stretching.
if you want my help. do as I say. stop trying to do things other ways.
I am TRYING to show you how to do it correctly.
I have done everything except completely code it out for you.
If you don't want my guidance, that's fine. Stop wasting both our time.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

where's the code you

where's the code you supplied again?

I was able to find html but no css...

thanks again for your working with me. you may be saving the city of new york from a girl going on a violent killing spree...

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

where's the code you

where's the code you supplied again?

I was able to find html but no css...

thanks again for your working with me. you may be saving the city of new york from a girl going on a violent killing spree...

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

where's the code you

where's the code you supplied again?

I was able to find html but no css...

thanks again for your working with me. you may be saving the city of new york from a girl going on a violent killing spree...

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

Deuce wrote:there is NO

Deuce wrote:
there is NO stretching.
if you want my help. do as I say. stop trying to do things other ways.
I am TRYING to show you how to do it correctly.
I have done everything except completely code it out for you.
If you don't want my guidance, that's fine. Stop wasting both our time.

:< I'm trying to follow your guidance but there are a lot of things I dont get and I think I complicated the thread by trying different mockups and referring to them... I guess in between responses I was trying different things based on the other stuff on this site.........
I don't mean to piss you off, I just can't seem to get exactly what you're talking about, which is partially my brain bein slow and partially the medium of forums and the way context gets lost in these long threads...

I'm not trying to waste your time, I just dont fully understand everything, which is what I'm here trying to fix...

I can't understand why thinsg are going wrong with my old layout, so I was trying to see what was going on piece by piece... then I tried experimenting with different sites... then I took a thread's solution about columns, tossed it on my site, and realized that the sidebars' backgrounds didn't continue down... and I don't know why..............

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

Oh no! You're gone now! T^T

Oh no! You're gone now! T^T I'm still so lost...

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 weeks 23 hours ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hey, stop bumping the code.

Hey,
stop bumping the code. There will be someone else who'll continue, or even deuce might return.

I am still in office , so cant take a look now, but will do so, if you havent got any help by the time i reach home.

Stop bumping.. remember people will help you if you dont make them angry, and that you can do by following their instructions..

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

bumping the code? what's

bumping the code? what's that mean?

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 21 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

Deuce wrote:HTML <div

Deuce wrote:
HTML


CSS

#wrapper {
width: 671px;
margin: 0 auto;
background: url(images/content_bg.jpg) repeat-y left top;
}

#header {
background: url(images/header.jpg) no-repeat left top;
height: 177px;
}

#content {
padding: 25px;
}

#footer {
background: url(images/footer.jpg) no-repeat left top;
height: 94px;
}

there you go. you are now well on your way to having your layout.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 21 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

Okay. Well I went ahead and

Okay.
Well I went ahead and used my method and coded the whole thing for you.
You will notice that my way works just fine as I originally stated.

If you have any questions, go ahead and ask.

HTML

Untitled Document


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean faucibus bibendum neque. Etiam mattis malesuada nulla. Praesent pharetra nulla dapibus sapien. Nullam euismod. Vestibulum id ligula vel ipsum semper condimentum. Maecenas at felis. Aliquam id odio. Nam sit amet massa quis tortor interdum fringilla. Duis gravida lorem et dui. Donec malesuada. Quisque at quam ut lorem pellentesque nonummy. Proin metus nisi, dictum vel, volutpat at, rhoncus in, ligula. Nulla facilisi. Duis nec massa. Phasellus nonummy sagittis nisi. Cras lacinia leo feugiat odio.



Ut interdum, libero ac placerat vehicula, diam sapien ultrices augue, non viverra erat lectus sed quam. In hac habitasse platea dictumst. Aliquam ac odio eu justo laoreet rhoncus. Cras vel massa. Sed tincidunt lacus nec urna. Aliquam bibendum, tellus id lobortis bibendum, libero turpis adipiscing orci, blandit nonummy felis urna nec lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed eu nisi. Integer vulputate mi quis eros. Vestibulum condimentum orci sit amet lacus. Curabitur elementum. Ut euismod enim lacinia arcu.



Donec ac orci. Integer sed ligula ullamcorper dui sagittis iaculis. Sed porta. Nunc nulla pede, rutrum eu, tempor placerat, molestie at, urna. Donec pretium augue a eros. Ut suscipit sapien. Morbi eu arcu. Integer placerat erat eget sem. Nulla placerat ligula suscipit mi. Aliquam tincidunt purus a arcu. Pellentesque urna erat, ullamcorper pulvinar, pulvinar sed, tristique auctor, ligula. Quisque faucibus nibh ut felis. Nullam libero enim, elementum eget, suscipit sed, tempus vitae, pede. Duis ante urna, condimentum eu, facilisis at, porttitor sit amet, nisi.



In hac habitasse platea dictumst. In id arcu quis lectus aliquam consectetuer. Sed massa sapien, condimentum et, tempus at, vulputate eget, purus. Sed turpis. Praesent vehicula orci vitae neque. Pellentesque at erat. Nam dignissim dui ac enim. In hac habitasse platea dictumst. Duis lacinia nisl eu diam. Sed tincidunt, lectus eu ultrices convallis, lacus sem euismod nunc, non mattis enim diam ac nisi. Praesent molestie, turpis in egestas aliquam, eros lorem commodo felis, et egestas massa tortor a elit. Phasellus sem orci, accumsan sit amet, pharetra at, tincidunt sed, lectus. Donec eu metus. Curabitur vel sem quis magna varius pretium. Maecenas ultrices, pede accumsan malesuada blandit, tellus erat adipiscing neque, at accumsan eros orci sit amet sapien. Proin elementum, orci tempus sagittis laoreet, ligula quam suscipit elit, vel rhoncus quam augue sit amet tortor.



Integer diam. Nullam dolor est, faucibus porttitor, auctor sit amet, consectetuer eget, tellus. Sed pharetra, leo sollicitudin semper accumsan, sapien mauris porta ipsum, id commodo ipsum libero et ante. Sed ligula. Fusce vulputate. In tempus sapien sit amet nisi. Vestibulum quis augue pellentesque lacus dignissim elementum. Duis diam. Nullam id enim nec est tempus lobortis. Duis enim lacus, pretium sed, sagittis sit amet, tincidunt a, est. In erat turpis, rhoncus vitae, ullamcorper eget, dignissim non, orci. In egestas viverra leo. Duis semper pede eu quam. Pellentesque sem. Praesent id nibh eget elit luctus consectetuer. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed molestie molestie dui. Fusce consectetuer, tellus id suscipit suscipit, nunc ligula euismod pede, et posuere libero lacus sit amet erat. Sed venenatis. Duis gravida nisi quis augue.




CSS

/* GLOBAL RESET */
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}

/* BEGIN STYLING */
body {
background-color: #c7dc74;
font: 100.1% Helvetica, Arial, Verdana, Tahoma, Sans-Serif;
color: #000;
}

#wrapper {
width: 671px;
margin: 10px auto;
background: url(content_bg.jpg) repeat-y left top;
}

#header {
background: url(header.jpg) no-repeat left top;
height: 177px;
}

#nav {
padding: 80px 0 0 235px;
}

#nav li {
display: inline;
list-style: none;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 3px;
}

#nav li a:link,
#nav li a:visited {
color: #598527;
font-size: 1.5em;
text-decoration: none;
}

#nav li a:hover,
#nav li a:active {
text-decoration: underline;
}

#content {
padding: 25px;
}

#content p {
padding: 10px;
}

#footer {
background: url(footer.jpg) no-repeat left top;
height: 84px;
}

#footer p {
text-align: center;
padding-top: 40px;
}

AttachmentSize
content_bg.jpg 422 bytes
footer.jpg 2.7 KB
header.jpg 9.17 KB

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Triumph (not verified)
Anonymous's picture
Guru

Deuce's Free Coding Service,

Deuce's Free Coding Service, est. 2005

Tongue

Why on earth did a one column site become so complicated? Laughing out loud

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 21 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

because the OP refused to

because the OP refused to listen to my initial sound advice that obviously worked just fine and took me an entire 10 minutes to code.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

it's so... simple and it

:jawdrop: it's so... simple and it works!
I could kiss you! Actually, I can't, but anywho...

I would say you didn't have to do all that, but apparently you did, cus I was unable to understand what you were getting at...

I have a ton of questions to ask exactly how this works... They're probably all dumb questions, but I'm fairly dumb...

so, how is it centered? The stuff I read, which may have led me down the wrong path from the very beginning, were saying that the wrapper needs to be positioned relatively and then the stuff inside positioned absolutely... and yet here, like magic, there's nothing so confusing!

I see the nav divs have margins but thats it...

the next part is, since I had trouble getting things to stay in the wrapper and stay in order... how did you get things to behave so well? I kept trying all the myriad clearfixes that I saw all over the net...

you, sir, are my hero

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 21 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

if you have an item with a

if you have an item with a fixed width you add
margin: 0 auto;

which is short hand for

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

to it and it sets the top and bottom margins to 0 and the left and right it auto figures out.. thus centering it. Unfortunately it doesn't work the other way around, you cannot set auto to the top and bottom and get it center that way.

I keep things in line by coding semantically.

the header came first, then the content, then the footer.

text goes in paragraph tags

navigation lists go in unordered list tags.

etc...

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

breegeek
Offline
Regular
New York
Last seen: 6 years 35 weeks ago
New York
Joined: 2007-10-23
Posts: 46
Points: 0

wow... I never knew that...

wow...

I never knew that... Despite my inability to grasp the simple concepts of css, Ive been a web designing amateur for nearly 7 years, but there are huge huge huge gaps in my understanding...

one last question, and then I will start constructing my shrine to your glory...

background: url(content_bg.jpg) repeat-y left top;

left top gives the starting position, right, for the bg repeat... is the position aspect necessary? is there a way to make it start at different points, out of curiosity?

Let's hope I can parse the good code for php without destroying it...

Seriously, I had no idea how simple this could be.