Need yet another coder...
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
http://home.comcast.net/~xalaxracer/Web ... layout.bmp
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"><br>
</center><img src="http://topbox.leftline"><center> TEXT HERE TEXT HERE!!!!!</center><right><img src="http://topbox.rightline"><br></right>
<img src="http://topbox.bottomline"><br><br>
<img src="http://leftbox.topline"> <img src="http://rightbox.topline">
<br>
<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">
<br>
<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">
<br>
<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">
<br>
<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">
<br>
<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">
<br>
<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">
<br>
<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
)
Make pictures of the links
<center><img src="http://topbox.topline"><br>
</center><img src="http://topbox.leftline"><center> TEXT HERE TEXT HERE!!!!!</center><right><img src="http://topbox.rightline"><br></right>
<img src="http://topbox.bottomline"><br><br>
<img src="http://leftbox.topline"> <img src="http://rightbox.topline">
<br>
<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">
<br>
<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">
<br>
<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">
<br>
<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">
<br>
<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">
<br>
<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">
<br>
<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
)
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:
<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>
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:
CSS:
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;
}