Need help with divs

[gumspitter]

In my current site www.applingpiratesbaseball.com I have the page broken up into several divs. (header,mid, content,footer) I now want to break up the content div to include another narrow div (ixed width) that runs the length of the main content div to include a team standings and maybe a calender or small video player. Any help would be greatly appreciated.

A site that is similar to what I want is the following:

http://www.popebaseball.com/

 

[PixelPusher]

What you will want to do is lock the position of the "fixed width" div inside of the content div through absolute positioning. It could also be done with floating, but I think AP is the better method. Try this:

...
<div class="content">
   ...lorem ipsum...
   <div class="banner"></div>
</div>

div.content {
/*ADD THIS*/
   position:relative;
/* OFFSET THE BANNER */
   padding-right: 160px; 
}

/* EXAMPLE BANNER */
div.content div.banner {
   position:absolute;
   top:0;
   right:0;
   width:150px;
}

 

[PixelPusher]

FYI, I noticed your menu on the left has a text wrap issue on the "Hitting Facility Project" link. The text is too long. Try reducing the character length, making the text smaller, or widening the menu to accommodate.

 

[gumspitter]

Pixel, I deleted the hitting facility link project because the project is complete and is no longer needed.

When I inserted the above code, my content went to the bottom of the page and nothing else happened. What am I a doing wrong? I know I have to adjust the slide show parameters but I am not getting the other div running vertically on the right side.

I just saved a simpler page from the site so I can test.
www.applingpiratesbaseball.com/index_moredivs.html


CSS Code



div.content {
float:left;
position:relative;
padding-right: 160px;
margin:0px;
width: 796px;
min-height:550px;
}
div.content div.banner {
position:absolute;
right:-15px;
top: -700;
}

div.content p {

padding:20px;
margin:0;
text-align:center;
}
div.mid{
background-color: #000;

You may have to go elementary on me. LOL



Thanks, for your help.

 

[PixelPusher]

Looking at the test link you provided, the "content" div has been doubled up. That might have been my fault with my example code. I was just showing you a snippet from you existing code as to where to insert the banner. I did not mean, literally insert the code i wrote...anyway I will be more clear this time

Also the class "banner" does not have any styles associated to it, so you may have a syntax error in your css. And, you have an extra closing div tag "</div>" after the heading "Photos"

(Taken from your test page)

<!-- ...beginning of document, yada yada...-->

<ul class="links">...link content...</ul>
<div class="content">
   <!-- add the main content for the page here -->
   <div class="banner">
      <!-- insert content for banner -->
   </div>
</div>

Needed CSS

div.content {
   position:relative;
   margin:0;
   min-height:550px;
   padding-right: 160px; /* this value depends on the width of your banner */
}
div.content div.banner {
   position:absolute;
   top:0;
   right:0;
   width:150px;
}

Recommendations

1. Pay close attention to where you open and close tags. For me, when ever I create a new tag (i.e. <p>, <a>, <div>), I always close it right away then add the content inside of the opening and closing tags. This way you don't loose track or forget to close an element.
2. Never, never, never use line break tags "<br/>" for spacing elements in a page! It's messy and just plain bad practice. Use margins and/or padding
3. Ordering of headings...every page starts with (or should) a heading one tag "<h1>". Just like a word doc, as you progress through a doc, each section should have a child heading (smaller heading) for the sub sections. In your case, you have a heading six with heading two children (sub headings). The order is wrong, you want a natural/logical downward progression. I would adjust these.

Good luck, and we are here to help if get stuck or want feedback.

 

[gumspitter]

Thanks, Pixel, you have been a great help. I guess I never thought of the heirarchy of the headers. It makes sense. I will fix that later.
I have what I want in my banner div but how can I get a upcoming events calendar? I want to add a calendar like the one in the POPE bball site. How did they do it? Are there any easy to build calanders that are easily updated that I can use?
Thanks again for all your help. It makes so much sense when you explain it.

David Miller

 

[PixelPusher]

Your welcome David, and thanks

As far as the calendar goes, I woudl suggest building it with an html table. This is a prime situation where a table is appropriate. To have the content dynamically updated, would require javascript and or server side script (PHP, ASP, etc). I can help you build the table, but my server side script knowledge is limited.

 

[gumspitter]

Okay, help me build the table.

thanks,
David

 

[gumspitter]

Pixel, please check out my latest work on the page. I cannot get the text to center in div where the photo links are . The bottom links are centered after the content of the banner is finished. Please help. Do I add another div for the just the text in the main part of the page?

Thanks, David

 

[PixelPusher]

Pixel, please check out my latest work on the page. I cannot get the text to center in div where the photo links are . The bottom links are centered after the content of the banner is finished. Please help. Do I add another div for the just the text in the main part of the page?

Thanks, David

David,
you just need to add padding to the right of the container to accommodate for the width of the banner. So your content div style should look like this.

div.content {
    float: left;
    margin: 0;
    min-height: 550px;
    padding-right: 200px;
    width: 596px;
}

Okay, help me build the table.

thanks,
David

What have you got done so far?

 

[gumspitter]

Pixel,I think I have what I want with the two tables in the banner section. Please check it out and let me know if you see anything that I can do to make it look better. Thanks for the help.

David

 

[dembo1305]

New to this thread but I want to try and help!

I just has a look at your code and well it is messy to say the least.

I kinda got lost looking over it.
I would recommend rewriting it with the current code sitting beside you, that way you can work through any problems as they occur, instead of trying to fix one problem and then cause another.

Also to help a little more with organization try using the tab key when coding.

<div>
*content*
*more content
<another div>
links/sidebar
<close div>
<close first div>

Hope that makes some sense.. Just anytime you add more <>'s hit tab first to keep them indented. Then close the tab and go back to the left once or twice depending on where your at and then that helps you see how often you need to close tags.

I am seeing a lot of stuff that is overlapping or not meeting like the ad on the left at the bottom and then your "mid section" isn't meeting your footer.

EDIT: I just posted this and it didn't keep my tabs. so hopefully you can make sense of that