PDA

View Full Version : Tab Issue



wiseman
Jan 16th, 2007, 10:05 AM
http://hatchetradio.com/radio/

The tab that is sitting to the right of the page is the culprit. I need that tab to hang off the left side of the layout. I can't seem to figure it out though.

http://hatchetradio.com/radio/wp-content/themes/reborn/style.css
link to css ^

ahallicks
Jan 16th, 2007, 10:24 AM
You have:

#tabs{width: 59px;float: right;text-align:left;background: #fff;margin-top: 45px;}

Try floating it left instead?

Excavator
Jan 16th, 2007, 05:10 PM
Hello wiseman,
float: left; will work but I think you'll need another centered wrapper div that is 118px wider than #container.

wiseman
Jan 16th, 2007, 05:50 PM
floating left makes it roll all the way to the left hand side of the screen.
another centered div? I'm a bit lost on that one

ahallicks
Jan 16th, 2007, 06:07 PM
Basically create a complete page wrapper 118 pixels wider than the main section of your content. Then put your little tab within this and then create another wrapper for the rest of your page that is exactly the width of your content. Make sure they are both centered, et voila!

wiseman
Jan 17th, 2007, 02:20 AM
Worked. But, I need it to butt up against the rest of layout. If I go about trying to make it snug, it messes up in i.e. It ends up being on top of the layout. Works in firefox though. Anyhow, how do i go about making it snug against the layout?

Excavator
Jan 17th, 2007, 04:30 AM
/* Id's */
#commentform input {width: 75px; height: 20px;}
#commentform textarea {width: 99%; border: 0px; padding: 2px; background: #202020; font: 8pt/14pt "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; text-align: justify; color: #ABD54F; border: 1px #404040 solid;}
#tabs{width: 59px; float: left; margin: 55px 0 0 0;}

/* get up in there */
#wrap {width: 745px; margin-left: auto; margin-right: auto; }
#container {overflow: hidden;
background: #000 url(images/cont_back.gif) repeat-y;
width: 680px;

wiseman
Jan 17th, 2007, 07:25 AM
i did what you've just posted but the tab ends up being on top of the layout in i.e. I'm wondering what causes that

wiseman
Jan 17th, 2007, 10:29 PM
no i.e. hacks for this huh

Excavator
Jan 18th, 2007, 12:59 AM
Hi again wiseman,
No hacks needed for this. Just need to adjust your code a little. Your running into the usual problems with position: absolute; I avoid using that at ALL costs! More pain than it's worth.

If not for the absolute positioning.. this works:

#tabs{width: 59px; float: left; margin: 55px 0 0 0;}

/* get up in there */
#wrap {width: 718px; margin-left: auto; margin-right: auto;}
#container {overflow: hidden;
background: #000 url(images/cont_back.gif) repeat-y;
border: 5px solid #0D0D0B;
padding: 0px;
font: 8pt/16pt "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;;
color: #999999;
margin: 0 0 10px 59px;
}


Paste this into a new .html for an example:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
text-align: center;
}
* {
margin: 0;
padding: 0;
}
#wrap {
width: 718px;
margin: 0 auto;
}
#container {
background: url(http://hatchetradio.com/radio/wp-content/themes/reborn/images/top_header.jpg) #000 repeat-y;
text-align: left;
margin-left: 59px;
}
#tabs {
width: 59px;
height: 323px;
margin-top: 55px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
}
p {
color: #CCCCCC;
}
</style>
</head>
<body>
<div id="wrap">
<div id="tabs"><img src="http://hatchetradio.com/radio/wp-content/themes/reborn/images/tab.gif" alt="tab" width="59" height="323" /></div>
<div id="container">
<h6><a title="Permanent Link to NINJAS"
href="http://hatchetradio.com/radio/ninjas" rel="bookmark">NINJAS</a>
<br />
January 14th, 2007 by Monoxide Child</h6>
<dl>
<dt>
<p>could it be.</p>
<p>i am the man</p>
<p>oh yes</p>
<p>i am the web design man</p>
</dt>
<dd>
<p>so i wonder what wonderful pieces of beef i will eat for dinner 3 years from
now. Nothing to do but sit here and make up words blah blah blah someone ****ing
get some sense for the guy next to me because he is ****ing freaking me out.
Wait a minute, I am the kid next to me h4r h4r h4r, so someone hook me up with
some love and ****.</p>
<p>Oh by the by, this isn’t your typical news program, this is going to take
some practice learning how to use. So the first persons I will show are the
people who count and matter, from there I expect you people, that I teach, to
teach the other people… there are rules and such to this whole thing and I will
be detailing every little bit of them in just about never. Goodbye </p>
</dd>
<dt>
<p>could it be.</p>
<p>i am the man</p>
<p>oh yes</p>
<p>i am the web design man</p>
</dt>
<dd>
<p>so i wonder what wonderful pieces of beef i will eat for dinner 3 years from
now. Nothing to do but sit here and make up words blah blah blah someone ****ing
get some sense for the guy next to me because he is ****ing freaking me out.
Wait a minute, I am the kid next to me h4r h4r h4r, so someone hook me up with
some love and ****.</p>
<p>Oh by the by, this isn’t your typical news program, this is going to take
some practice learning how to use. So the first persons I will show are the
people who count and matter, from there I expect you people, that I teach, to
teach the other people… there are rules and such to this whole thing and I will
be detailing every little bit of them in just about never. Goodbye </p>
</dd>
</dl>
</div>
</div>
</body>
</html>