Quick Task I Need Help With!

I just got done reading a slicing guide and thought i could deal with it, but now im faced with a simple and easy profile layout which i cant even make right in dreamweaver.



The idea is for the box to hold information and move to compensate for more text, ive tried alot of things like slicing everything but the inside box, but i cant make a table inside that part for the drop down, i'm just confused.

Im sure theres a real easy way, considering its only one box that needs coding for text to go in and move down, so if someone could help me here, itll make me understand the concept, thanks.



Jenny ^_^.

 

im confuced what you mean. i might be able to help though

conorp

 

You see the yellow box, right?

That's gonna be the box that holds information, and when it reaches the bottom of the box it stretches to make more room for the box o.o.

 

This can be very easily done in a CSS layout using divs, the following should work:

*Assuming the width of that banner image is 500px

style.css:

Code:

body
{
background-color:#000;
}

#container
{
width: 500px;
min-height: 600px; /*May be incrased or decreased */
background-color:#000;
}

#banner
{
height: *height of banner*px;
width: 500px;
background-image:url(path/to/banner.jpg);
}

#bar
{
height:50px;
width:500px;
background-color:#000;
}

#yellowbox
{
background-color:#ffff65;
width:480px;
min-height: 300px; /* Once again increase / decrease to your liking */
margin-left:10px;
margin-right:10px;
margin-bottom:5px;
margin-top:5px;

Now in lets say index.html:

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">
<head>
<link rel="stylesheet" href="path/to/css.css type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
</head>
<body>

<div id="container">

<div id="banner">
</div>

<div id="bar" align="right">
ROLL CASKET
</div>

<div id="yellowbox">
Text here.
</div>

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

That should just about work, of course it may require some slight tweaking, and the only image you need to slice is the banner. The width of everything is important here so make sure the banner is 500px wide, or you change the code to whatever the new width is.

 

Thanks, i'm not really looking into coding but i'll keep the code, i was more wondering how to do this the designer way, as in creating a table - setting the maragins for the text to go in.

Any ideas Littleej?

 

what is this for ? because im pretty sure coding is the only way to go about this mate

 

Coding is Coding (the method you're speaking of is just plain HTML / XHTML), using tables just makes things a lot harder to change around if you ever need to and the coding is generally longer (especially if it's coded using Photoshop / Imageready) and just messier imo.

Having CSS (in conjunction with XHTML) you can control your whole websites layout and style through a single file (if you used the method I showed), so generally it's just a whole lot easier.

It's much better to get the hang of this, it may seem a little harder to start off with but it's much easier once you get the hang of it and the code I provided is pretty much all you need for a layout like that.

 

CSS is the designer way.