PDA

View Full Version : First Fluid theme, resizing help



Ludatha
Jan 15th, 2009, 08:40 PM
Hey guys, I've tryed to create my first fluid theme :)

Here it is so far:
http://ludatha.com/theme/

Now if you have a large monitor you will see the problem, if you resize the screen until the pieces join together then you will see what I want it to look like.

I use 3 images for a section like that, the left, the middle which is repeated and the right image. (I phrased that badly)

When you resize the screen, how do I make the repeating image re-size with the screen, if I use a % as the width, it leaves a gap that gets bigger when you resize the screen.

Excavator
Jan 16th, 2009, 08:41 AM
Hello Ludatha,

Try this for your menu instead:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background: #fc6;
text-align:center;
font: 14px "Comic Sans MS";
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 760px;
margin: 30px auto;
}
.menu {
height: 43px;
line-height: 43px;
text-align: left;
background:url(menu_bg.png) repeat-x;
}
.menu_left {
background:url(menu_bg_left.png) no-repeat;
width:13px;
height:43px;
float:left;
margin: 0 0 0 -13px;
}
.menu_right {
background:url(menu_bg_right.png) no-repeat;
width:13px;
height:43px;
float:right;
margin: 0 -13px 0 0;
}
</style>
</head>
<body>
<div id="wrap">
<div class="menu">
<div class="menu_left"></div>
<a href="#">Profile</a>
<a href="#">Portal</a>
<a href="#">Forum</a>
<a href="#">Games</a>
<div class="menu_right"></div>
</div>
<!--end wrap--></div>
</body>
</html>

Ludatha
Jan 17th, 2009, 12:15 AM
Thanks, just one more thing, (I've updated the theme)
I want the left column of content to always be about 20px away from the right column, but the right column is fixed (190px width) and the left column is fluid (100% width) so the content goes behind the right column (because I added a margin)

How can I make the left column 190px or so smaller?

Excavator
Jan 17th, 2009, 01:00 AM
How can I make the left column 190px or so smaller?

It's never easy putting % and px width elements beside each other. You would think this would do the trick:
.left {
float:left;
/*just did away with the width*/
margin: 0 212px 0 5px;
}
.right {
float:right;
width:190px;
text-align:center;
background:#999;
border:#666 1px solid;
margin:5px 5px 0 5px;
padding:5px;
}

Normally it would. Could be the tables in .left are doing that? I don't know yet.