Need yet another coder...

Message

Axe · #1 Post by **Axe** » Tue Jul 20, 2004 9:50 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 · #2 Post by **WIS** » 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

)

#3 Post by **Hunter Lupe** » Sun Jul 25, 2004 9:21 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: Select all

<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 · #4 Post by **Ibis** » 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: Select all

<!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: Select all

/* -= 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;
}