Need yet another coder...

Axe · **Posts:** 2155 **Joined:** Thu Jun 10, 2004 4:21 pm

Can someone code my web layout? I would like the bottom two boxes to be I frames, and for someone to code them with trs and tds. Thanks

http://home.comcast.net/~xalaxracer/Web ... layout.bmp

WIS · **Posted:** Sun Jul 25, 2004 8:32 pm

I think I MIGHT be able to code that. I just need to get pictures of all of the lines of the boxes. (not trs and tds, another more complicated solution because I'm not all that good with trs and tds)

Make pictures of the links

<center><img src="http://topbox.topline"> 
</center><img src="http://topbox.leftline"><center> TEXT HERE TEXT HERE!!!!!</center><right><img src="http://topbox.rightline"> </right>
<img src="http://topbox.bottomline"> 
<img src="http://leftbox.topline"> <img src="http://rightbox.topline">
 
<img src="http://leftbox.sectionoftopline"><img src="http://button"><img src="http://leftbox.sectionofrightline"> <img src="http://rightbox.sectionofleftline"><center>TEXT HERE TEXT HERE </center><right><img src="http://rightbox.sectionofrightbox">
 
<img src="http://leftbox.sectionoftopline"><img src="http://button"><img src="http://leftbox.sectionofrightline"> <img src="http://rightbox.sectionofleftline"><center>TEXT HERE TEXT HERE </center><right><img src="http://rightbox.sectionofrightbox">
 
<img src="http://leftbox.sectionoftopline"><img src="http://button"><img src="http://leftbox.sectionofrightline"> <img src="http://rightbox.sectionofleftline"><center>TEXT HERE TEXT HERE </center><right><img src="http://rightbox.sectionofrightbox">
 
<img src="http://leftbox.sectionoftopline"><img src="http://button"><img src="http://leftbox.sectionofrightline"> <img src="http://rightbox.sectionofleftline"><center>TEXT HERE TEXT HERE </center><right><img src="http://rightbox.sectionofrightbox">
 
<img src="http://leftbox.sectionoftopline"><img src="http://button"><img src="http://leftbox.sectionofrightline"> <img src="http://rightbox.sectionofleftline"><center>TEXT HERE TEXT HERE </center><right><img src="http://rightbox.sectionofrightbox">
 
<img src="http://leftbox.sectionoftopline"><img src="http://button"><img src="http://leftbox.sectionofrightline"> <img src="http://rightbox.sectionofleftline"><center>TEXT HERE TEXT HERE </center><right><img src="http://rightbox.sectionofrightbox">
 
<img src="http://leftbox.bottomline"> <img src="http://rightbox.bottomline">

THERE! Replace all the http:// with the proper pictures. (phew, that took a while, I did that all by typing so there might be a mistake

)

Hunter Lupe · **Posts:** 1140 **Joined:** Mon May 31, 2004 1:36 pm

Since every border is the same, you're better off slicing 1px piece of horizontal and vertical borders (+4 corners), and using those to create a border using a table (align it using a div if you must).

Code:

<table width="whatever">
<tr>
  <td width="cornerwidth"><img src="corner-top-left.gif"></td>
  <td width="100%" style="background-image: url(border-hor.gif); font-size: 1px"> </td>
  <td width="cornerwidth"><img src="corner-top-right.gif"></td>
</tr>
<tr>
  <td style="background-image: url(border-hor.gif); font-size: 1px"> </td>
  <td>{CONTENT GOES HERE}</td>
  <td style="background-image: url(border-hor.gif); font-size: 1px"> </td>
</tr>
<tr>
  <td><img src="corner-bot-left.gif"></td>
  <td width="100%" style="background-image: url(border-hor.gif); font-size: 1px"> </td>
  <td><img src="corner-bot-right.gif"></td>
</tr>
</table>

Ibis · **Posted:** Sun Aug 01, 2004 12:34 pm

you could do that with div layers, using zero pics and maybe 6-8 layers

w8...brb ;P

Done!
http://ibisaeg.mine.nu/andras/Weblayout/

XHTML code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv">
<head>
<title>Something</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="#container">
 <div id="topholder">
  <div id="top"></div>
 </div>
 <div id="bottomholder">
  <div id="title">links</div>
  <div id="linksholder">
   <div id="links"></div>
  </div>
  <div id="otherholder">
   <div id="other"></div>
  </div>
 </div>
</div>
</body>
</html>

CSS:

Code:

/* -= SIDDESIGN =- */

/* Body */
body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   background-color: #FFFFFF;
   font-size: 12px;
   margin: 4px;
   padding: 4px;
}

#container {
   width: 724px;
   height: 500px;
}

#topholder {
   background-color: #FFA500;
   height: 158px;
   width: 722px;
   position: absolute;
   border: 1px solid #000000;
}

#top {
   background-color: #FFFFFF;
   height: 152px;
   width: 716px;
   border: 1px solid #000000;
   margin: 2px;
}

#bottomholder {
   top: 166px;
   width: 507px;
   height: 229px;
   position: relative;
}

#title {
   font-size: 10px;
   width: 166px;
   text-align: right;
}

#linksholder {
   position: absolute;
   background-color: #FFA500;
   width: 164px;
   height: 321px;
   border: 1px solid #000000;
}

#links {
   background-color: #FFFFFF;
   width: 158px;
   height: 315px;
   border: 1px solid #000000;
   margin: 2px;
}

#otherholder {
   background-color: #FFA500;
   position: absolute;
   width: 537px;
   height: 323px;
   left: 185px;
   border: 1px solid #000000;
}

#other {
   background-color: #FFFFFF;
   width: 531px;
   height: 317px;
   border: 1px solid #000000;
   margin: 2px;
}

Pink Poogle Toy Forum

Need yet another coder...

Who is online