Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
#1 2006-12-16 18:38:25
- Rocamm
- Member
- Registered: 2006-05-20
- Posts: 20
Alligning Content
Ok so I’ve been playing with my css
and I’ve got almost everything perfect..
except for I want to move the #content box up
and I’m not sure if it’s the sidebar that’s pushing it down or what?
can someone look at my css and tell me what I should change
I want the center column to sit nicely underneath the menu
at the top…
www.rocamm.com
and here’s my css:
body
{
background-color: #fff;
}
p, blockquote, li, h3
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 1.6em;
text-align: left;
padding-left: 10px;
color: #000000;
}
blockquote
{
margin-left: 5px;
margin-right: 0px;
}
#sidebar-2 p, #sidebar-1 p
{
line-height: 15px;
font-size: 10px;
}
#sidebar-1 p
{
text-align: left;
padding-left: 0px;
padding-top: 0px;
}
#head
{
text-align: left;
height: 15px;
width: 500px;}
#container
{
width: 500px;
\width: 500px;
w\idth: 500px;
margin: 1px;
margin-left: 1px;
margin-right: 1px;
padding: 0px;
}
#sidebar-1
{
float: left;
width: 15px;
\width: 15px;
w\idth: 15px;
margin-right: 0px;
margin-left: 20px;
padding-top: 100px;
}
#content
{
float: left;
margin-left: 155px;
margin-right: 5px;
}
#sidebar-2
{
float: right;
width: 0px;
\width: 0px;
w\idth: 0px;
margin-left: 0px;
padding-top: 15px;
}
#foot
{
clear: both;
margin-top: 2px;
text-align: center;
}
#accessibility
{
position: absolute;
top: -10000px;
}
a
{
color: black;
text-decoration: none;
border-bottom: 1px black solid;
}
#sidebar-2 a, #sidebar-1 a
{
border: 0px;
color: ##000000;
}
h1
{
font-weight: normal;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
margin-left: 25px;
padding-top: 15px;
}
h2
{
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: italic;
color: #000000;
margin-left: 25px;
}
h3
{
font-weight: normal;
margin-left: 0px;
}
h3a
{
border: 0px;
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 10px;
}
h3b
{
border: 0px;
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 10px;
font-style: italic;
}
h1 a, h2 a
{
border: 0px;
}
.caps
{
letter-spacing: 0.1em;
font-size: 10px;
}
#content hr
{
width: 66%;
margin-top: 2em;
margin-bottom: 2em;
}
img.divider
{
align: right;
margin-top: 10px;
margin-bottom: 10px;
}
.comments_error
{
background-color: #000000;
}
div.comments_error
{
border: 1px solid #000000;
padding: 0.3em;
}
Thanks in advance!
-Robin
Offline
Re: Alligning Content
OK, so there’s so much going on there that it’s hard to know where to begin…
- What do you want your site to look like?
- Your content is inside your sidebar-2 div, which is set to 20 px wide?
- Looks like you’re using Dreamweaver for navs?
maybe it’d be a good idea to start again and clarify what content you want to put where.
Offline
Re: Alligning Content
you need both the html + css to have any meaning to know what you are talking about.
nuff-respec ::: dannyb
Offline
#4 2006-12-17 14:24:45
- Rocamm
- Member
- Registered: 2006-05-20
- Posts: 20
Re: Alligning Content
<!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” />
<link rel=“stylesheet” href=”<txp:css />” type=“text/css” media=“screen” />
<title><txp:page_title /></title>
</head>
<body>
<div id=“accessibility”>
<a href=”#content” title=“Go to content”>Go to content</a>
<a href=”#sidebar-1” title=“Go to navigation”>Go to navigation</a>
<a href=”#sidebar-2” title=“Go to search”>Go to search</a>
</div> <!— /accessibility —>
<div id=“container”>
<!— head —>
<div id=“head”>
<h1></h1>
<script language=“JavaScript” type=“text/JavaScript”>
<!—
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//—>
</script>
<body onLoad=“MM_preloadImages(‘nav/works2.gif’,‘nav/projects2.gif’,‘nav/shows2.gif’,‘nav/archive2.gif’,‘nav/news2.gif’,‘nav/friends2.gif’,‘nav/about2.gif’)”>
<table border=“0” cellpadding=“0” cellspacing=“0”>
<tr>
<td width=“178” height=“105”><txp:link_to_home><img src=“nav/logo.jpg” width=“178” height=“105”> </txp:link_to_home> </td>
<td width=“297”><table width=“56%” height=“34” border=“0” cellpadding=“0” cellspacing=“0”>
<tr>
<td width=“15%” height=“34”><a href=“http://www.rocamm.com/?c=works” onMouseOut=“MM_swapImgRestore()” onMouseOver=“MM_swapImage(‘Works’,’‘,‘nav/works2.gif’,1)”><img src=“nav/works.gif” name=“Works” width=“75” height=“34” border=“0”></a></td>
<td width=“17%”><a href=“http://www.rocamm.com/?c=projects” onMouseOut=“MM_swapImgRestore()” onMouseOver=“MM_swapImage(‘Projects’,’‘,‘nav/projects2.gif’,1)”><img src=“nav/projects.gif” name=“Projects” width=“82” height=“34” border=“0”></a></td>
<td width=“14%”><a href=“http://www.rocamm.com/?c=shows” onMouseOut=“MM_swapImgRestore()” onMouseOver=“MM_swapImage(‘Shows’,’‘,‘nav/shows2.gif’,1)”><img src=“nav/shows.gif” name=“Shows” width=“68” height=“34” border=“0”></a></td>
<td width=“54%”><a href=“http://www.rocamm.com/?c=archive” onMouseOut=“MM_swapImgRestore()” onMouseOver=“MM_swapImage(‘Archive’,’‘,‘nav/archive2.gif’,1)”><img src=“nav/archive.gif” name=“Archive” width=“72” height=“34” border=“0”></a></td>
</tr>
</table>
<table width=“32%” height=“23” border=“0” cellpadding=“0” cellspacing=“0”>
<tr>
<td width=“15%” height=“18”><a href=“http://www.rocamm.com/?s=news” onMouseOut=“MM_swapImgRestore()” onMouseOver=“MM_swapImage(‘News’,’‘,‘nav/news2.gif’,1)”><img src=“nav/news.gif” name=“News” width=“70” height=“23” border=“0”></a></td>
<td width=“17%”><a href=“http://www.rocamm.com/?s=friends” onMouseOut=“MM_swapImgRestore()” onMouseOver=“MM_swapImage(‘Friends’,’‘,‘nav/friends2.gif’,1)”><img src=“nav/friends.gif” name=“Friends” width=“72” height=“23” border=“0”></a></td>
<td width=“14%”><a href=“http://www.rocamm.com/?s=about” onMouseOut=“MM_swapImgRestore()” onMouseOver=“MM_swapImage(‘About’,’‘,‘nav/about2.gif’,1)”><img src=“nav/about.gif” name=“About” width=“61” height=“23” border=“0”></a></td>
<td width=“54%”><img src=“nav/mail.jpg” width=“26” height=“22”></td>
</tr>
</table>
<img src=“nav/space.jpg” width=“297” height=“48”></td>
</tr>
</table>
</div>
<!— left —>
<div id=“sidebar-1”>
<txp:popup type=“c” label=“Browse” wraptag=“p”/>
<txp:search_input label=“Search” wraptag=“p” />
<!— right —>
<div id=“sidebar-2”>
</div>
<!— center —>
<div id=“content”>
<txp:image id=“3” />
<txp:article />
<txp:if_individual_article>
<p>
<txp:link_to_prev><txp:prev_title /></txp:link_to_prev>
<txp:link_to_next><txp:next_title /></txp:link_to_next>
</p>
<txp:older>Previous</txp:older>
<txp:newer>Next</txp:newer>
</txp:if_individual_article>
<txp:if_article_list>
<p></div>
<!— footer —>
<div id=“foot”> </div>
<!— Start of StatCounter Code —>
<script type=“text/javascript” language=“javascript”>
var sc_project=791495;
var sc_partition=6;
var sc_security=“12a26771”;
var sc_invisible=1;
</script>
<script type=“text/javascript” language=“javascript” src=“http://www.statcounter.com/counter/counter.js”></script><noscript><a href=“http://www.statcounter.com/” target=”_blank”><img src=“http://c7.statcounter.com/counter.php?sc_project=791495&java=0&security=12a26771&invisible=1” alt=“counter create hit” border=“0”></a> </noscript>
<!— End of StatCounter Code —>
</div>
</body>
</html>
Offline
Re: Alligning Content
Can you put the rendered html some place to see ?
nuff-respec ::: dannyb
Offline
Re: Alligning Content
In general you have allot of problems, sidebar you have width as 20px? and what’s with all the css hacks ??
but to answer your question … your container width is 475 … but you content width is also 475 + 155left margin .. so it won’t fit … basically your outer container needs to be wide enough to accomodate your left column, right column, plus center column… right not it’s not so the side bar does push it down because the width of container won’t allow.
Find a much simplier 3 col layout css technique .. you don’t need all those w/idth etc …
here are a couple links from google:
glish.com
ThreeColumnLayouts
The 2nd link as a plethora of layouts … and that’s the css-discuss list ..
This one also seems pretty simple…
pixy.cz
Basically simplify your css and your life will be easier…. good luck !!
nuff-respec ::: dannyb
Offline
Pages: 1