FORUMS: list search recent posts

Stupid, simple problem with formatting

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Aaron HaymanStupid, simple problem with formatting
by on Jan 26, 2012 at 8:15:01 pm

I'm having this problem with the formatting of DIVs in a website that I;'m working on. I have a DIV on the left that's the navigation bar with the buttons inside of it and to the far right I have a decorative bar with a halftone fade pattern The problem lies with the middle DIV that contains the text. I have that one as "middle_container" with the container that holds the text, "middle_text" inside of that. What's happening is that when I put the text in that text DIV, it pushes the "right_gradient" DIV lower as you can see from my screenshot. The top of that gradient piece should line up with the bottom of the banner at the top without the white space in between. I have all of the DIVs set as "inline" and I've messed around with some other CSS properties to try to fix this thing, but I really feel like I'm shooting in the dark. What then are the CSS properties that these DIVs need to have or what kind of additional DIV might I need in the layout to straighten this out? Thanks in advance... this is going to be a huge help for me and hopefully a learning experience as well.

Below is the HTML code for that part of the page:

<div id="container">
<div id="header">
</div><!--close of header -->

<div id="nav_bar">
<a href="index.html"><div id="navbutton_about"></div></a>
<a href="background.html"><div id="navbutton_background"></div></a>
<a href="mission.html"><div id="navbutton_mission"></div></a>
<a href="services.html"><div id="navbutton_services"></div></a>
<a href="contact.html"><div id="navbutton_contact"></div></a>
<a href="links.html"><div id="navbutton_links"></div></a>
<div id="blank_button"></div>
</div><!--close of nav_bar -->

<div class="middle_container">
<div class="middle_text">
<h1>The Benefit of Facilitation Services</h1>
<p>For Organizations
For Individuals</p>
</div><!--middle_text -->
</div><!--middle_container -->

<div id="right_gradient">
</div><!--right_gradient -->

</div><!--close of container -->

Here is the CSS code for those DIVs:

#container {
width: 921px;
height: 898px;
margin-left: auto;
margin-right: auto;
margin-top: 2.5em;
color: #ffffff;
background-position: left top;
background-color: #FFF;

#header {
width: 100%;
height: 245px;
background-image: url(../images/lavaun_header.jpg);

#right_gradient {
width: 147px;
height: 653px;
background-image: url(../images/right_side_gradient.jpg);
background-color: #FFF;
background-repeat: no-repeat;
float: right;
display: inline;
position: relative;

#nav_bar {
width: 208px;
height: 653px;
background-color: e9d6ad;
float: Left;
display: inline;
position: relative;

.middle_container {
width: 566px;
height: 589px;
display: inline;
position: relative;

middle_text {
width: 100%;
display: inline;
position: absolute;
height: auto;

Return to posts index

demetri tashieRe: Stupid, simple problem with formatting
by on Jan 27, 2012 at 2:30:35 pm

if you post a link to the page we could really see what is going on, and could actually view
the html

in the meantime, you might want to look at this article on laying out 3 column might help you understand and work with them:

Return to posts index

Aaron HaymanRe: Stupid, simple problem with formatting
by on Jan 27, 2012 at 4:57:07 pm

I'll certainly read that article. Thank you for posting it. I wonder though, what happened to the HTML that I posted on my original inquiry? I highlighted all of the code and hit the "code" button on here to make sure that it would show up properly. I hit the "preview post" button as well and I made sure that everything looked like I meant it to (that all of the code was showing up) before I posted. Now I see that none of it is showing up and there's a big blank space where the code was meant to be. What gives? How do I properly display code in these CreativeCOW forum windows?

Return to posts index

demetri tashieRe: Stupid, simple problem with formatting
by on Jan 27, 2012 at 5:18:04 pm

see the note above the posting box:

Note: The following are HTML characters and may cause parts of your post to disappear if not used correctly: <>&

BUT, to prevent insertion of nasty code, it will strip out actual html tags. so if you want to show

<h2> hello <h2>

you actually have to write at least the 'less than' symbol with it's unicode equivalent: & g t ; (without any white spaces)

to be safe do the same for 'greater than' symbol: & g t ; (without any white spaces)

that's what i think is going on and how i get around it. maybe an administrator can explain it better.

tip: copy your code into a text editor, then do a 'find' and 'replace all' of the 'less thans' and 'greater thans' at once

Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2016 All Rights Reserved