How to add something under two columns

Chrisj · May 4, 2009

In the php script that I'd like to modify, it has a left and right column. Underneath these columns, I'd like to add a box for text and images, all the way across the web page, under the two columns.

This code below shows the content part of the script page (the header and footer are in another file).

I would imagine, to do this, I need to add some code under  correct? Can you provide some basic code which would add a box that streches across the web page under the left column and right column?

Any help would be appreciated. Thanks.

<!--Begin Left Column--><title>ads</title>
<div id="column-left-1">
  
</div>
<!--End Left Column-->

<!--Begin Right Column-->
<div id="column-right-1">
  <!--Begin Login Box-->
  <div id="login-box">
    <!--[onload_300;block=div;when [var.show_login_box]=1;comm]-->
    <form action="login.php" method="post" accept-charset="UTF-8" class="middletext">
      <ul>
        <li><label><font class="font4_13">[var.lang_user_name]:</font></label><span class="username"><input type="text" name="user_name_login" size="16" style="width:138px;" /></span></li>
        <li> </li>
        <li><label><font class="font4_13">[var.lang_password]:</font></label><span class="password"><input type="password" name="password_login" size="16" style="width:138px;" /></span></li>
        <li> </li>
        <li>
          <label><font class="font4_13">[var.lang_how_long]:</font></label>
          <span class="howlong">
            <select name="cookie_time">
              <option value="1440">[var.lang_1_day]</option>
              <option value="10080">[var.lang_1_week]</option>
              <option value="43200">[var.lang_1_month]</option>
              <option value="-1" selected="selected">[var.lang_forever]</option>
            </select>
          </span>
          <input type="submit" value="[var.lang_login_now]" class="button-form" />
        </li>
        <li> </li>
        <li>
          <a href="login.php">[ [var.lang_password_reminder] ]</a> <b>|</b> <a href="[var.register_menu_link]">[ [var.lang_register_today] ]</a>
          <input type="hidden" name="submitted" value="yes" />
          <input type="hidden" name="remember_me" value="remember_me" />
        </li>
      </form>
    </ul>
  </div>
  <!--End Login Box-->

  
  <!--End Site Stats-->
</div>
<!--End Right Column-->

Ken2k7 · May 4, 2009

Do you need PHP to add those text and images?

Chrisj · May 4, 2009

Thanks for your reply.

I thought I did. What would you suggest?

redarrow · May 4, 2009

learn html i say.

Chrisj · May 4, 2009

I'm learning it now and asking questions along the way.

And specific code help would be appreciated. thanks

Ken2k7 · May 4, 2009

Text - just type it

Image - use the IMG tag. Google it.

redarrow · May 4, 2009

Add the css to the page, so we no what your doing.

<IMG SRC='image_name.jpg' title=' ' />

Ken2k7 · May 4, 2009

<IMG SRC='image_name.jpg' title=' ' />

That's not xHTML-compliant. You're missing the alt attribute.

Chrisj · May 4, 2009

Thanks for your help. Here is the CSS titled Styles (there is another called thickbox):

** tyle */

.video_box_main { border:0px solid #00FFFF; font-family: Verdana; color: #333333; font-size: 12pt }

.default_text_white { font-family: Arial; font-size: 10pt; color: #FFFFFF }

.default_text_white_11pt { font-family: Arial; font-size: 11pt; color: #FFFFFF; background-image:url('../images/box_blue_middle.jpg'); background-repeat:repeat; height:25; font-weight:bold }


.default_text_blue { font-family: Arial; font-size: 10pt; color: #3366CC; text-decoration:none }

.default_menu_blue {font-family: Arial; font-size: 10pt; color:#3366CC ;}
.default_menu_blue A { text-decoration:none; font-size: 10pt; color:#3366CC ;}
.default_menu_blue A:visited {font-size: 10pt; color="#3366CC"}
.default_menu_blue A:hover {font-size: 10pt; color="#3366CC"}
.default_menu_blue A:active {font-size: 10pt;}

.default_menu_white {font-family: Arial; font-size: 10pt; color:#ffffff ;}
.default_menu_white A { text-decoration:none; font-size: 10pt; color:#ffffff ;}
.default_menu_white A:visited {font-size: 10pt; color="#ffffff"}
.default_menu_white A:hover {font-size: 10pt; color="#ffffff"}
.default_menu_white A:active {font-size: 10pt;}

.default_menu_gray {font-family: Arial; font-size: 10pt; color:#333333 ;}
.default_menu_gray A { text-decoration:none; font-size: 10pt; color:#333333 ;}
.default_menu_gray A:visited {font-size: 10pt; color="#333333"}
.default_menu_gray A:hover {font-size: 10pt; color="#333333"}
.default_menu_gray A:active {font-size: 10pt;}


.default_menu_gray_12pt {font-family: Arial; font-size: 12pt; color:#333333 ;}
.default_menu_gray_12pt A { text-decoration:none; font-size: 12pt; color:#333333 ;}
.default_menu_gray_12pt A:visited {font-size: 12pt; color="#333333"}
.default_menu_gray_12pt A:hover {font-size: 12pt; color="#333333"}
.default_menu_gray_12pt A:active {font-size: 12pt;}


.default_text_blue_8pt { font-family: Arial; font-size: 8pt; color: #3366CC }

.default_text { font-family: Arial; font-size: 10pt; color: #333333 }

.default_text_9pt { font-family: Arial; font-size: 9pt; color: #333333 }

.default_text_8pt { font-family: Arial; font-size: 8pt; color: #333333 }

.default_text_shaded_gray1_8pt { font-family: Arial; font-size: 8pt; color: #333333; background-color:#F0F1FF }


.table_ads_l_b_r_t {border:1px solid #C0CEEF; }


.table_border_l_b_r_t {border:1px solid #C0CEEF; }
.table_border_l {border-left: 1px solid #C0CEEF; }
.table_border_r {border-right: 1px solid #C0CEEF; }
.table_border_t {border-top:1px solid #C0CEEF; }
.table_border_l_r {border-left: 1px solid #C0CEEF; border-right: 1px solid #C0CEEF;}
.table_border_l_b_r {border-left: 1px solid #C0CEEF; border-right: 1px solid #C0CEEF; border-bottom: 1px solid #C0CEEF}
.table_border_l_t_r {border-left: 1px solid #C0CEEF; border-right: 1px solid #C0CEEF; border-top: 1px solid #C0CEEF}
.table_border_t_l_b {border-left: 1px solid #C0CEEF; border-top: 1px solid #C0CEEF; border-bottom: 1px solid #C0CEEF}
.table_border_t_r_b {border-right: 1px solid #C0CEEF; border-top: 1px solid #C0CEEF; border-bottom: 1px solid #C0CEEF}


.warning_box_red {border: 1px solid #FF4242; background-color:#FFDDDD;}
.warning_box_green {border: 1px solid #87CC33; background-color:#DDEECC;}
.warning_box_green_white {border: 1px solid #87CC33; background-color:#FFFFFF;}

Ken2k7 · May 4, 2009

Nah that's okay. We, or should I say everyone except redarrow, don't really care for your CSS because your problem isn't in your CSS.

Is this solved or do you need further assistance?

Chrisj · May 4, 2009

I need assistance please.

Ken2k7 · May 4, 2009

With what? Just type the text where you want it. Exactly where you want it. As for the image, just do what redarrow posted.

Give it a try. You won't get any errors with HTML. Layout may be messed up if you messed up a quote, but that's it.

Chrisj · May 4, 2009

Thanks for your reply.

I did just type some text, and it just shows up under the right column.

Can you provide some basic code which would add a box that streches across the web page under the left column and right column, from the left to right? Thanks

Ken2k7 · May 4, 2009

Create a DIV with width set to 100%?

Chrisj · May 4, 2009

Thanks for your reply.

Can you show me what that might look like, so I get it correct?

Thanks

Ken2k7 · May 4, 2009

You know as a rule of thumb, you should try it out, post what you have and then we correct you.

Read the now update forum rules #12 - http://www.phpfreaks.com/page/rules-and-terms-of-service#toc_forum_rules

redarrow · May 5, 2009

Have a look at this for a clue .....

<html>

<head>

<style type="text/css">

div.header{
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: center;
color: #FF0000;
font-weight: bold;
font-size: 60px;
border-style: solid;
border-color: #000000;
}

form.form{
margin-top: 100px;
margin-left: auto;
margin-right: auto;
width: 300px;
text-align: center;
border-style: solid;

}

div.color{
font-weight: bold;
color: 00CCCC;
}

div.warn{
font-weight: bold;
color: #FF0000;
}

select.color{
font-weight: bold;
color: #00CCCC;
}

</style>


</head>


<body>

<div class="header">My web site for the wicked!</div>



<form class="form" method="post" action="<?php $_SERVER['PHP_SELF']; ?>">
<div class="color">Username.
<br>
<input type="text" name="username"> 
<br><br>
Password.
<br>
<input type="password" name="password">
<br><br>
<div class="warn">How long to stay logged in.</div>
<br>
<select class="color" name="time_logged_in">
<option value=" ">Select one</option>
<option value="1440">One day</option>
<option value="10080">One week</option>
<option value="43200">One month</option>
<option value="-1">Forever</option>
</select>
<br><br>
<input type="submit" name="submit" value="login!">
</form>
</div>

<br><br>

<?php

$images_array=array(

"http://tbn2.google.com/images?q=tbn:IPBWQUR0aNtbHM:http://www.playbill.com/images/photo/w/i/wicked2_1079629188.jpg",

"http://tbn1.google.com/images?q=tbn:eGspt1opkMCaNM:http://www.essendonfc.com.au/images/08/wicked1-l.jpg",

"http://tbn2.google.com/images?q=tbn:n_UijOeyiyfQ7M:http://www.harmerpr.com/prgeurope/photos/wicked_91a.jpg",

"http://tbn3.google.com/images?q=tbn:sfT3CaGpn8J5lM:http://images.fanpop.com/images/image_uploads/Wicked--The-Musical-wicked-257205_800_600.jpg"

);

foreach($images_array as $images){

echo "<img height='70px' width='70px'src='$images'>\n";
}

?>

</body>

</html>

Ken2k7 · May 5, 2009

redarrow, you can't assume someone runs PHP on their server. But I guess that's what he gets for posting in the wrong forum. Hehe...

redarrow · May 5, 2009

no your correct, he should read a book or use the net silly billy lol.

Sign In

How to add something under two columns

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information