Topic: More CSS questions you've answered 1000 times (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=28863" title="Pages that link to Topic: More CSS questions you&amp;#039;ve answered 1000 times (Page 1 of 1)" rel="nofollow" >Topic: More CSS questions you&#039;ve answered 1000 times <span class="small">(Page 1 of 1)</span>\

 
loj58
Bipolar (III) Inmate

From: I'm over here, now
Insane since: Jul 2006

IP logged posted posted 01-28-2007 09:21 Edit Quote

Ok, I have 3 issues..( I sure I have more than that but these are the 3 I'm attacking right now)

Html is here
CSS is here

Issues:

1) In IE the content of div "main" is fine..... In FF it is escaping. I'm sure there is some easy fix, but honestly I don't have a clue what I should even be searching for to find my answer.

2) I nested a div ("nav1") within my "header" div and placed the image I'll be using for navigation as a BG image. Then I applied a text link. But how do I get the "nav1" div to stick to the bottom of "header" div? I would like it to be 5 px from the left and 0 from the bottom.

3) I am unsure if I used "float" correctly on "rightside" div and "main" div. It looks correct in FF and IE, but have I used it correctly?

Flashy signature here...

(Edited by loj58 on 01-28-2007 09:22)

Ensellitis
Paranoid (IV) Inmate

From: Kansas City, MO , USA
Insane since: Feb 2002

IP logged posted posted 01-28-2007 14:59 Edit Quote

1) you have a set height for the content:

code:
#main {
	position: relative;
	width:500px;
	height:300px;
	background-color: #ffffff;
	float:left;
}



since the text is longer than the height, it has no where to go but out... if you want the div to scroll, add overflow: auto; to it. if you don't want it to scroll, remove the height, or replace the height: 300px; with min-height: 300px;

2) margin bottom: 0px; is not proper css. it is margin-bottom. you can also try something like this:

code:
#nav1 {
	position: absolute;
        left: 5px;
	bottom: 0;
	width: 76px;
	height: 17px;
	background: url(button.gif) no-repeat left bottom;
	text-align: center;
}



3) looks fine. i have seen floats done different ways with the same result. as long as it works

(Edited by Ensellitis on 01-28-2007 15:00)

(Edited by Ensellitis on 01-28-2007 15:01)

loj58
Bipolar (III) Inmate

From: I'm over here, now
Insane since: Jul 2006

IP logged posted posted 01-29-2007 00:34 Edit Quote

1) Ok, I changed the set height of the "Main" Div and it now stretches to fit the content.... however the "content" div that it is nested in is not expanding with it. I have the "content" div set to height 100% shouldn't it expand with its child divs?

Edit: Alright adding the clear: both to the "footer" div fixed issue #1.

2) I tryed the code posted and since it is absolute positioning it indeed moved it to the coordinates but those coordinates are for the viewport so it was positioned all the way at the bottom of the page 5 px from the left.

I changed it to relative position and it simply doesn't work... what am I doing wrong?

3) Thanks, I'm really just starting to learn any of this so I'm glad I did "something" right.

Flashy signature here...

(Edited by loj58 on 01-29-2007 00:41)

Ensellitis
Paranoid (IV) Inmate

From: Kansas City, MO , USA
Insane since: Feb 2002

IP logged posted posted 01-29-2007 00:51 Edit Quote

my bad, first give the header position: relative; THEN use that css i gave you for the nav and it should work fine

loj58
Bipolar (III) Inmate

From: I'm over here, now
Insane since: Jul 2006

IP logged posted posted 01-29-2007 01:02 Edit Quote

Sweet!

Works like a charm! Thanks!

Oh! one more thing... I used a div filled with a black BG color as a horizontal rule to seperate the header and content areas. I have it sized at 700px width and 2 px height. It looks great in FF but in IE it looks like its about 20 pixels high.

What can I do to fix that?

Flashy signature here...

(Edited by loj58 on 01-29-2007 01:08)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 01-29-2007 01:13 Edit Quote

loj58: Get rid of that extra DIV and set the border-bottom of the header DIV

loj58
Bipolar (III) Inmate

From: I'm over here, now
Insane since: Jul 2006

IP logged posted posted 01-29-2007 05:19 Edit Quote

Thanks you very much, I still have a little work to do but its looking pretty good.

See updated version here.

Flashy signature here...

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 01-29-2007 08:56 Edit Quote

Much better!

Now I'll be a bit picky, but:

  • the DIV "nav1" hurts my feelings. It should be a UL
  • the IMG "down-bullet.gif" should be in the background of the A ( to which you'll add a padding to make room for the bullet ). They do no belong in the markup
  • the DIVs "listheader" are unnecessary.
  • you can drop the margin and hmargin classes in the DIV "main"

Of course feel free to discard any of the things listed above if they are part of a CSS hack to get IE behave like a good boy.

loj58
Bipolar (III) Inmate

From: I'm over here, now
Insane since: Jul 2006

IP logged posted posted 01-30-2007 01:48 Edit Quote

poi, since I have absolutely NO idea what I'm doing I really don't feel bad in telling you...

I would love to make the changes you suggested, but I really don't understand what you were suggesting and/or I don't know how to do that.

1) "nav1" (here I'm unsure how to do what you are suggesting) Any suggested reading?

2)"bullet-down" (can you show me a code sample of how to make that change?)

3) "listheader" (I know nothing about what you can do with list properties) Reading?

4) Classes (how? what? where?)

Flashy signature here...

Ensellitis
Paranoid (IV) Inmate

From: Kansas City, MO , USA
Insane since: Feb 2002

IP logged posted posted 01-30-2007 10:11 Edit Quote

1) check these out for some good examples of what he is talking about.
2) he means using something like

code:
.link {
background: url("bullet-down.gif") no-repeat right;
}

Blacknight
Paranoid (IV) Inmate

From: INFRONT OF MY PC
Insane since: Dec 2001

IP logged posted posted 01-30-2007 10:18 Edit Quote

1.) the navigation is actually a list of links so what poi is saying is to convert it in to a list (ul) instead of having lots of small divs
so it would look something like:

code:
<ul class="menu">
       <li>Home</li>
       <li>contact</li>
        .
        .
        .
  </ul>



And then use css to make the menu look like you want it to


for more info about it look up Horizontal list here http://css.maxdesign.com.au/listutorial/


(Edited by Blacknight on 01-30-2007 10:19)

loj58
Bipolar (III) Inmate

From: I'm over here, now
Insane since: Jul 2006

IP logged posted posted 02-01-2007 01:09 Edit Quote

Thank you all so much, I have a few print jobs pushing me now so it will be a day or 2 before I can play with the church site again. I'll post an update when I start making the suggested changes.

Flashy signature here...



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu