Zymic Webmaster Forums > Coding Band Page Again.. New Design

Full Version: Coding Band Page Again.. New Design

Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS

k.digennaro

Jul 7 2008, 12:23 AM

Well i've been away from coding for a couple months focusing on design and my music, but I'm back with a new design, I finnally got PS so this is my frist Photoshop design, I really like what I came up with but any ways, I'm not sure the best way to code this particular design, what I've done from the start hasn't worked. I've been trying to use divs, should I use tables? If so I've never used tables before any hints? Any ways the code so far is below, not really much to it yet. The below code only works for the background, the Nav bar doesnt show up. Here's the design I'm going for.

CSS

CODE

/*-------------CSS Document------------*/
/*---------Background Starts-------*/

body{
    background:url(images/bg.gif) center;
    width:1024px;
    height:900px;
}

#nav{
    background:url(images/nav.gif) 0 0 no-repeat;
    width:981px;
    height:50px;
    top:100px;
}

HTML

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Welcome to NascentDescent!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="body">
</div>

<div id="nav">
</div>

</body>
</html>

Thanks for the help,
Kevin

MrTouz

Jul 7 2008, 12:31 AM

It is going to be really hard to code this layout with this specific background.
Easy way would of been slice it with photoshop but than your bg would not go as planed as well as your content area.
hard way would be CSS but than its a lots of work.

I suggest you start by slicing your images as you want them with photoshop : (use slice tool / save for web) so you have all the images to work with the CSS code.

Once you got all the images you need (you will have to slice your layout couple of different times) you can start with your CSS. Do part by part, and CSS is really... really... simple, but it is really 'intense' as the layout can be messed up and in matter of secs (line of codes) be really good... just do NOT go nuts

k.digennaro

Jul 7 2008, 12:33 AM

how should i slice this up for best results?

edit: i sliced it up into 22 pieces but im honestly not sure if i did it right...lol

edit again: im not sure if this gives you an idea of how i sliced it but heres PS's generated HTML

CODE

<html>
<head>
<title>Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="1025" height="901" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="2" rowspan="2">
            <img src="images/Layout_01.gif" width="70" height="185" alt=""></td>
        <td colspan="2">
            <img src="images/Layout_02.gif" width="406" height="142" alt=""></td>
        <td colspan="5" rowspan="2">
            <img src="images/Layout_03.gif" width="463" height="185" alt=""></td>
        <td rowspan="12">
            <img src="images/Layout_04.gif" width="85" height="900" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="142" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/Layout_05.gif" width="406" height="43" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="43" alt=""></td>
    </tr>
    <tr>
        <td rowspan="10">
            <img src="images/Layout_06.gif" width="67" height="715" alt=""></td>
        <td colspan="7">
            <img src="images/Layout_07.gif" width="870" height="50" alt=""></td>
        <td rowspan="6">
            <img src="images/Layout_08.gif" width="2" height="600" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="50" alt=""></td>
    </tr>
    <tr>
        <td colspan="7">
            <img src="images/Layout_09.gif" width="870" height="35" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="35" alt=""></td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="images/Layout_10.gif" width="600" height="14" alt=""></td>
        <td rowspan="2">
            <img src="images/Layout_11.gif" width="20" height="449" alt=""></td>
        <td rowspan="2">
            <img src="images/Layout_12.gif" width="250" height="449" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="14" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="3">
            <img src="images/Layout_13.gif" width="19" height="501" alt=""></td>
        <td colspan="2" rowspan="3">
            <img src="images/Layout_14.gif" width="565" height="501" alt=""></td>
        <td rowspan="3">
            <img src="images/Layout_15.gif" width="16" height="501" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="435" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/Layout_16.gif" width="270" height="16" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="16" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/Layout_17.gif" width="270" height="50" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="50" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="images/Layout_18.gif" width="872" height="21" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="21" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="images/Layout_19.gif" width="872" height="23" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="23" alt=""></td>
    </tr>
    <tr>
        <td colspan="7">
            <img src="images/Layout_20.gif" width="870" height="69" alt=""></td>
        <td rowspan="2">
            <img src="images/Layout_21.gif" width="2" height="71" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="69" alt=""></td>
    </tr>
    <tr>
        <td colspan="7">
            <img src="images/Layout_22.gif" width="870" height="2" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="2" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="67" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="3" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="16" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="390" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="175" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="16" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="20" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="250" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="2" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="85" height="1" alt=""></td>
        <td></td>
    </tr>
</table>

</body>
</html>

MrTouz

Jul 7 2008, 12:48 AM

Truely its impossible, if you want to keep your BG and have your page scrolling, it is clearly impossible. Or well... someone has to come up with an idea.

Without your BG i would say :

slice the header (nacent decent and your faces
slice the nav (cut all nav and buttons separately)
slice the top area of your content about 10px
slice the middle area (without BLACK)
and slice the content black area
slice the left side

No need to slice the black area bellow the nav since with background-color:#000000; youll have the same effect (same thing for your footer)

What i would suggest is

CODE

<div id="header"></div>
<div id="navigation">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div id="theblackareaunderthenav"></div>
<div id="content">
<div id="post">
Some text
</div>
<div id="rightnav">
content
</div>
</div>
<div id="footer"></div>

Of course each area would have a special div called text where you can set margins and paddings, but really fast its how i would of make it. Again, the bg screws everything. also the gradient on the text area, because its kind of hard to make it scroll the top content but keep the text going over the bottom while the content area streches as you type. (can be done... but more coding for not much effect)

edit :

what you have to try is keep LESS images as possible, less images you have, easy its gonna be, simple its gonna look less work you'll have and more people will be happy.

The HTML code we don't really care since its gonna start at 0... so delet all but just keep the images and no it does not help me visualize the image... hard for a code

k.digennaro

Jul 7 2008, 12:49 AM

if i made it so the page didnt scroll and the design took up the entire image, then would it be possible?

i keep redoing this particular design and i finnaly this like concept (made need tweaking) but the bg is part of the reason i like it, i was looking through out the internet for inspiration and most band sites had a more complex bg, did they probally use another type of coding?

MrTouz

Jul 7 2008, 12:56 AM

more complex does not especially mean harder or easier coding.

The problem with your background is that is has a 3 color gradiant and has some specific designs on it so :

you can work with the problem of gradiants with some tweaking but can't make a page repeat with all your images set on the background.

___

Yes your design is going to be easier coded without scrolling.
Simply slice all your layout (remove anything from your content areas)

and insert this code :

<iframe src="home.html" name="frist" width="yourwidth" height="yourheight"></iframe>

But i frame sucks big sheet so.. i would not suggest it.

k.digennaro

Jul 7 2008, 12:59 AM

hmmmmm, okay, so im still a little confused, i understand that the design i currently have would be very hard to code with the scrolling, taking the scrolling out would make it easier but iframe isnt any good? honestly i dont understand that iframe code. If you think with your honest opinion that this is to hard to code, how could i make a snazy design easy to code?

Thanks for the help,
Kevin

edit: also in order to have my design take up the whole screen without scrolling wat size should i design with? 1024x768?

MrTouz

Jul 7 2008, 11:34 AM

well, this is not the type of srolling i mean, when i said scrolling i meant having your content area scrolled meaning that your text gets longer and the content area gets higher.

See if you look at ANY designs you will see that it was meant ot be coded easily, usually the designer is the coder of the template so when he creates 'when i create my designs' i usually make it so i know its gonna be easy to code, not meaning i do not go for a cool bg, but meaning i go for something cool but i draw it like i know how i want to cut it and know how i ant to code it.

Send me your PSD i will code it simply for you so you can have a look of what it will look like once i code it with iframe, code it with scrolling.

CODE

This code above is a little box, this code will create a little box of 300x300, and inside this box you will have the HOME.HTML page, the HOME.HTML can be an external file, you can add any links into it. i called it first just so you have a name when you change your site links example :

CODE

<a href="aboutus.html" target="first">About Us</a>

See the above will open the aboutus.html page as stated but it will target the FIRST element on your site, here the first element is your little box of 300x300, having a box means your layout does not need to scroll, but you can stuck with IFRAMES because they are really ugly and weird.
An other code as iframe is INCLUDE with .php language but that will not do the effect needed.

As for 1024x768 well to fit any screens it should be less than 768 without scrolling, because your screen is 1024 from left to right (and since there are no elements on your left side and right side the layout will go all the way from left to right) but for the 768 you have the MENU bar from windows on the bottom which will reduce your browsers size, and than you have your address bar on top of your navigator wich will take some size off...

1024x600 canbe good so the people wont have to scroll.

But send me your PSD via email, mrtouz@gmail.com and ill code it for you to show you how it is.

MrTouz

Jul 7 2008, 05:04 PM

Ok, so i coded your layout and integrated Iframes into it.

Added your links and created your nav :

your site

your site .zip download

You can see how it is done, i added some little css inside the HTLM.

I warn you, this is really not how it should be done, you can of course keep it that way if you want to.. but its really not how a site should be designed, i coded it so you kind of have a view on how it looks like and how you can work with things.

If you need any help.. just ask here.

k.digennaro

Jul 7 2008, 05:50 PM

thanks a bunch mrtouz, i sent it this morning

.

Kevin

MrTouz

Jul 7 2008, 08:29 PM

you are welcome a bunch

k.digennaro

Jul 7 2008, 09:41 PM

im going to design this page with a simular design but i want to make it codeable, im really more of a designer/artist than a coder, i can design pages etc but i need to design a good looking page that will be able to be coded. What should i keep in mind while i design this page? I want it to take up the whole screen but no scrolling so ill design it on a 1024x600px canvas? are there any does and donts i should keep in mind?

Thanks again,
Kevin

k.digennaro

Jul 8 2008, 02:03 AM

Im working with the same general design but i think wat i have so far will be easier to code, belows an example let me know what you think, i want to make sure im on the right track before i get to far into it.

Image

Html

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Welcome to NascentDescent!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="background">
<div id="frame"></div>
<div id="fancave"></div>
</div>

</body>
</html>

CSS

CODE

/*-------------CSS Document------------*/
/*---------Background Starts-------*/

background{
    background:url(images/bg.gif) no-repeat;
    width:1024px;
    height:600px;
}

#frame{
    background:url(images/frame.gif) no-repeat;
    width:964px;
    height:411px;
}

#fancave{
  background:url(images/fancave.gif) no-repeat;
    width:247px;
    height:480px;

}

MrTouz

Jul 8 2008, 06:28 PM

Well it really depends what you want to do.

If you want NO scrolling well other than IFRAMES there are no solutions, or probably flash, or porbably an PHP code that will make pages if there is a certain amount of lines or letters..

Again slice it like i did than work with some divs, you'll be able to make it, its really not advanced.

Since you want no scrolling, the design can really be... what ever you want. but make sure of one thing, that your footer does not BREAK directly, meaning on your screen the footer might look like its tuching the bottom of your page, but in bigger screens you'll have your footer.. and than NOTHING, if its an image.. be careful it can look ugly.

k.digennaro

Jul 9 2008, 03:16 AM

thanks again

, im having one more problem, For my bg Im having trouble with the position its creating a margin around the left top and bottom sides, i tried add margin:0px; but that didnt get rid of it. heres my code. is ther somthing wrong with it? if so wat is it? ive looked over it many times and dont see a problem and its only a few lines long

CODE

/*-------------CSS Document------------*/
/*---------Background Starts-------*/

#background{
    background:url(images/bg.gif) no-repeat;
    width:1280px;
    height:598px;
    margin:0px;
}

CODE

Thanks again,
Kevin

Paradoks

Jul 9 2008, 03:19 AM

Iph you are really unexpirienced, i suggest coding in tables untill you learn how toget Div's down. I suggest usign an iphrame (iframe) iph you dont know how to go about coding your main content.

prixat

Jul 9 2008, 05:28 PM

Kevin

Thats not a problem its a feature

Most browsers add a 10px margin top and left.

You have to add this code to the background style:

CODE

    position: absolute;
    top: 0px;
    left: 0px;

to tell an element to ignore the browser margins.

MrTouz

Jul 9 2008, 06:50 PM

should margins be called as :

margin: top right bottom left;

CODE

margin:0px 0px 0px 0px;

???

k.digennaro

Jul 10 2008, 01:08 AM

thanks guys once again for the help, ive only been coding for a couple months, im the kinda person to just keep at it till i get it down, thats why i havent tried an alternate way like tables, it takes some time but through trial and erorr and with good adivce/tips/suggestions from you guys ive been able to learn ALOT i still am no expert and of course will still be back with further questions but im starting to understand how things work on the web and am getting close to putting my own content on the web.

Best Regards,
Kevin

Andrew

Jul 11 2008, 03:32 AM

Kevin that background would not be hard to use, you just have to slice it just right so it will repeat forever to the right and look like one solid image, then if it fades all the way to black just have black as your background color and it will look like it just faded into nothing. If you want also send me your psd and i'll slice that part out and show you the code for the background. email, trippin7464@gmail.com

MrTouz

Jul 11 2008, 10:17 AM

now how you gonna make it repeat as well on the text area (actually around it) see it uses the same BG the same gradient so if it repeats on the BG it should repeat on the front, adding that you need to repeat the text area :/

Or like i said, you have to slice it 100 times for each different element so they are not attached.

i dunno...

k.digennaro

Jul 16 2008, 02:46 AM

thanks again guys,

Im thinking the easiest thing for me to do is rework this design keeping in mind what ive learned i can and cannot do with CSS coding. Jacob for the background could i do something like this? The image being a bg, 1px wide by how ever long i wanted it. Any ways im gona save the background for last, tommorow im gona post about how to code this frame im working on, i created it so it could be coded (atleast i tried to) ill code it as best as i can and then post in tommorow.

CODE

#background{
    background-image:url(images/test.gif);
    width:1024px;
    height:600px;
    background-repeat:repeat-x;
    padding:0 0;
    margin:0 0;

}

Thank,
Kevin

P:S: Jacob, I'm gona send you an email regarding your clothing company hope you dont mind.

Andrew

Jul 16 2008, 06:51 AM

Kevin i think your confusing me and Jacob up. He didn't even post in this topic did he?
And you emailed me thinking it was him. :-P My name's Andrew! lol

k.digennaro

Jul 16 2008, 09:16 PM

sorry about that andrew lol it was late when i sent that lol.

Well here's the frame im trying to code. Well really im trying to code any frame similar to this to understand how it will and will not work. Ive taken the image below and sliced the four corners and used them as images. The rest of the frame was created with simple html, my hopes were that if i made the page scroll the frame would still stay in tack and the simple html parts would expand, also making it workable in other browsers. (that's my thought atleast). The padding on this image isnt right, im not exactly sure what to do to make it look like a frame, right now all the pieces show up but not in a box. below is the image and the code, please let me know what you think, is there an easier way to do it? or a more effective way?

Thanks,
Kevin

HTML

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>NascentDescent.com</title>
    <link href="frame.css" rel="stylesheet" type="text/css" />

</head>

<div id="cornertopleft"></div>
<div id="frametop"></div>
<div id="frametop1"></div>
<div id="cornertopright"></div>
<div id="frameleft"></div>
<div id="frameright"></div>
<div id="cornerbottomleft"></div>
<div id="framebottom"></div>
<div id="framebottom1"></div>
<div id="framebottom2"></div>
<div id="cornerbottomright"></div>

CSS

CODE

#cornertopleft{
    background-image:url(images/cornertopleft.gif);
    width:201px;
        height:31px;
        background-repeat:none;
    margin:10px auto;
}
#frametop{
    background-color:#000000;
    width:166px;
        height:20px;
        background-repeat:none;
    margin:10px auto;
}
#frametop1{
    background-color:#000000;
    width:418px;
        height:7px;
        background-repeat:none;
    margin:10px auto;
}
#cornertopright{
    background-image:url(images/cornertopright.gif);
    width:67px;
        height:20px;
        background-repeat:none;
    margin:10px auto;
}
#frameleft{
    background-color:#000000;
    width:10px;
        height:263px;
        background-repeat:none;
    margin:10px auto;
}
#frameright{
    background-color:#000000;
    width:17px;
        height:310px;
        background-repeat:none;
    margin:10px auto;
}
#cornerbottomleft{
    background-image:url(images/cornerbottomleft.gif);
    width:35px;
        height:46px;
        background-repeat:none;
    margin:10px auto;
}
#framebottom{
    background-color:#000000;
    width:285px;
        height:22px;
        background-repeat:none;
    margin:10px auto;
}
#framebottom1{
    background-color:#000000;
    width:288px;
        height:15px;
        background-repeat:none;
    margin:10px auto;
}
#framebottom2{
    background-color:#000000;
    width:70px;
        height:22px;
        background-repeat:none;
    margin:10px auto;
}
#cornerbottomright{
    background-image:url(images/cornerbottomright.gif);
    width:209px;
        height:46px;
        background-repeat:none;
    margin:10px auto;
}

k.digennaro

Jul 16 2008, 09:28 PM

edit: i think this is what the html should look like, since its basically 3 rows for the frame, the first has the right and left top corners and the center frame. The second has the left frame and the right frame. The third has the bottomleft corner the center frame and the bottom right corner.

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>NascentDescent.com</title>
    <link href="frame.css" rel="stylesheet" type="text/css" />

</head>

<div id="cornertopleft">
     <div id="frametop">
     </div>
         <div id="frametop1">
         </div>
         <div id="cornertopright">
         </div>
</div>

<div id="frameleft">
     <div id="frameright">
     </div>
</div>

<div id="cornerbottomleft">
         <div id="framebottom">
         <div id="framebottom1">
     <div id="framebottom2">
     <div id="cornerbottomright">
         </div>
         </div>
         </div>
         </div>
</div>

MrTouz

Jul 16 2008, 11:56 PM

any frame that you will code (as an image) will have to have 3 parts. Top Middle Bottom

So cute the frame in 3 peace knowing :

Top (using the top image of your frame)
Middle (using the middle image of your frame) but knowing this image is going to repeat (as you write text in it !)
Bottom (using the bottom image of your frame)

The top is just going to be a simple css code (well all 3 are the same code)

CODE

.frametop { //class knowing the this frame can be repeat like you do in blog posts...
background-image:url(images/topimage.png);
width:700px;
height:10px;
}
.framemiddle { //class knowing the this frame can be repeat like you do in blog posts...
background-image:url(images/middleimage.png);
background-repeat:repeat-y; //y knowing that the text goes top to bottom
width:700px;
// no height knowing the height is unlimited
}
.framebottom { //class knowing the this frame can be repeat like you do in blog posts...
background-image:url(images/bottomimage.png);
width:700px;
height:10px;
}
.framemiddletext { //class knowing the this frame can be repeat like you do in blog posts...
font-size:11px;
margin:2px 2px 2px 2px; // knowing that your text will not be aligned inside the frame you kind of have to fix it
}

than your html :

CODE

<div class="frametop"></div>
<div class="framemiddle">
<div class="framemiddletext">
This is your text as it goes... <br />
<br/>
THe frame image will repeat it self as you go on...<br /<w
<br />
</div>
</div>
<div class="framebottom"></div>

Usually some people add text inside the top frame, usually done when you have a navigation and want to name it, or a content area that you need to name... so what you do is create an extra CSS and puting some name like framtoptext and giving some values to be aligned and 'margined' and add a div element to your HTML code (tip: inside the frametop division !!)

So basically you'll have a frame ta repeats it self when ever you add some text !

I highly suggest you add :

CODE

background-repeat:no-repeat;

To all the css classes i made (i did not put it because it came out of my mind)

Sometimes browsers mess up when the height of an image is too small, so it repeats the image,so you just tell him not to repeat the divisions (ONLY inside divs you do not want to repeat ! (so for the middle.... DON'T put it !!)

Good luck !

k.digennaro

Jul 17 2008, 02:43 AM

thanks for the info mrtouz once again a huge help, i was thinking with the right frame of mind but didnt quite know how to put it together, ill try this out and see what happens, thanks again.

Kevin

MrTouz

Jul 17 2008, 10:29 AM

you are welcome.

Jacob

Jul 17 2008, 11:17 AM

Haha Kevin. I got your email but somehow this topic has gone unnoticed with all the newbies posting I didn't really get around to it - sorry for that.
I replied to your email and it says it all in there.

Jacob.

prixat

Jul 17 2008, 02:52 PM

Theres still a lot of slicing going on!

You don't actually need to slice anything. I have modified a method I normally use for rounded corners.

This method uses your unsliced frame gif above and puts it in a four spans in each corner.
Each span is then told to display the correct part of the image. I set the div borders to fill in the 'gaps' between the corners spans.

http://www.prixat.zxq.net/fourcorners.html

The css is a bit more complicated than necessary because I went for a fluid version.

CODE

/* CSS Document */
* {
    padding: 0;
    margin: 0;
}
* html .box-content {
    height: 1%;
}
body {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: .77em;
    background: #F7f2f6;
}
#container {
    text-align: center;
    margin: auto;
    width: 95%;
}
.tl, .tr, .bl, .br {
    background: url(images/frametempcopy.gif);
    width: 425px;
    height: 41px;
}
.tl, .bl {
    float: left;
}
.tr, .br {
    float: right;
}

#red-box {
    width: auto;
    min-width: 850px;
    height: 400px;
    position: relative;
    margin-top: 30px;
    border-top: 7px solid #000000;
    border-right: 16px solid #000000;
    border-bottom: 15px solid #000000;
    border-left: 16px solid #000000;
    background: #F7f2f6;
    text-align: center;
}

#red-box .tl {
    background-position: -7px -4px;
    position: relative;
    left: -16px;
    top: -14px;
}
#red-box .tr {
    background-position: 432px -4px;
    position: relative;
    left: 17px;
    top: -14px;
}
#red-box .bl {
    background-position: -7px -354px;
    position: relative;
    left: -16px;
    top: -59px;
}
#red-box .br {
    background-position: 432px -354px;
    position: relative;
    left: 17px;
    top: -59px;
}
.box-content {
    clear: both;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0px;
}

the html is:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>four corners</title>
<link href="fourcorners.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<h1>one unsliced image</h1>

<div id="red-box">
    <span class="tl"></span><span class="tr"></span>
    <div class="box-content">
        <h2>Red Box</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat metus, sagittis sed, mollis ut, vestibulum nec, lacus. Sed ornare semper augue.</p>
    </div>
    <span class="bl"></span><span class="br"></span></div>


</div>
</body>
</html>

MrTouz

Jul 17 2008, 04:43 PM

Well Prixat sorry to disappoint you but with your method you are loading the image 4 times :/ The image is already big so loading it 4 times makes it 4 times bigger.

I again 'not because its mine' 'but because its what it should be' would use my method knowing that you will load the image ONCE + not the full image (since its cut the middle part is smaller and repeats ! (no loading)

Also the HTML on your method Prixat is bigger as well as your CSS... other than having a different method Aka a bigger one :/ its kind of useless ?

prixat

Jul 18 2008, 12:17 PM

QUOTE(MrTouz @ Jul 17 2008, 04:43 PM)

...you are loading the image 4 times :/ The image is already big so loading it 4 times makes it 4 times bigger...

You can blame Kevin for his large file size

I tested the multiple instances heres a page with 80 instances:
http://prixat.zxq.net/kevin/manycorners.html

It loads in the same time, so I'm sure its only a single image being downloaded.

The extra css is to make the frame reuseable elsewhere on the same page.

This is the page updated with the framegif made transparent:
http://prixat.zxq.net/kevin/fourcorners.html

MrTouz

Jul 18 2008, 03:09 PM

I still believe the technique i use is simpler and faster... anyways... does not matter

k.digennaro

Jul 18 2008, 04:52 PM

haha thanks guys

i really need to picka design and just go for it...lol ive redesigned this page 7 or 8 times in 5 months... but i havent been happy with it yet so im still going at it

MrTouz

Jul 18 2008, 05:43 PM

no worries we all been through these steps

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.