[solved] CSS problem? - Images 'jumping'
Posted: Thu Jun 14, 2007 5:29 pm
Hi everybody!
I've made a CMSMS (1.0.6) site (http://www.shenming.nl/)! It's my first finished CMS site after playing a bit with Joomla!, but CMSMS is sooo much simpler! I love it!
However, there is one problem: the images I am showing in the 'main' part are not placed correctly. But when I move over the menu on the left, the images jump to the correct intended place and then remain on the correct location.
I am pretty sure it's a CSS issue, but I can not figure out what's wrong... I am using the 'float: left' (or right) to place the images. If I leave the 'float' tag out, it does not show these problems. The same happens with the 'align' command.
I am using a modified standard template with CSS shown below.
Does anybody have any hints, tips or anything else what could be wrong here? I've been looking for two straight days now, and I am losing my ever-present good mood...
Any other remarks are welcome!
Thanks very much in advance!
TEMPLATE:
LEFT MENU CSS:
MAIN CSS:
I've made a CMSMS (1.0.6) site (http://www.shenming.nl/)! It's my first finished CMS site after playing a bit with Joomla!, but CMSMS is sooo much simpler! I love it!
However, there is one problem: the images I am showing in the 'main' part are not placed correctly. But when I move over the menu on the left, the images jump to the correct intended place and then remain on the correct location.
I am pretty sure it's a CSS issue, but I can not figure out what's wrong... I am using the 'float: left' (or right) to place the images. If I leave the 'float' tag out, it does not show these problems. The same happens with the 'align' command.
I am using a modified standard template with CSS shown below.
Does anybody have any hints, tips or anything else what could be wrong here? I've been looking for two straight days now, and I am losing my ever-present good mood...
Any other remarks are welcome!Thanks very much in advance!
TEMPLATE:
Code: Select all
<!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="nl" lang="nl">
<head>
<title>{sitename} - {title}</title>
{metadata}
<!-- Don't remove this! Metadata is entered in Site Admin/Global settings. -->
{stylesheet}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,780));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
</head>
</__body>
<div id="pagewrapper">
<!-- start accessibility skip links -->
<ul class="accessibility">
<li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
<li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
</ul>
<!-- end accessibility skip links -->
<hr class="accessibility" />
<!-- Horizontal ruler that is hidden for visual browsers by CSS -->
<!-- Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet "For template: Left menu + 1 column" -->
<div id="header">
<h1>Acupunctuur Beek en Donk</h1>
</div>
<!-- End Header -->
<!-- Start Breadcrumbs -->
<div class="breadcrumbs">
{breadcrumbs starttext=' ' root='Home' delimiter='»'}
<hr class="accessibility" />
</div>
<!-- End Breadcrumbs -->
<!-- Start Content (Navigation and Content columns) -->
<div id="content">
<!-- Start Sidebar -->
<div id="sidebar">
<!-- Start Navigation -->
<div id="menu_vert">
<h2 class="accessibility">Menu</h2>
{menu template='simple_navigation.tpl' collapse='1'}
</div>
<!-- End Navigation -->
</div>
<!-- End Sidebar -->
<!-- Start Content Area -->
<div id="main">
<h2>{title}</h2>
{content} <br />
<!-- Start relational links -->
<div class="hr"></div>
<table width="450" border="0" align="center">
<tr>
<td width="225"> <div class="left49">
{cms_selflink dir="previous" label="< "}
</div>
</td>
<td width="225"> <div class="right49">
{cms_selflink dir="next" label="> "}
</div>
</td>
</tr>
</table>
<!-- End relational links -->
<hr class="accessibility" />
</div>
<!-- End Content Area -->
</div>
<!-- End Content -->
<!-- Start Footer. Edit the footer in the Global Content Block called "footer" -->
<div id="footer">
{global_content name='footer'}
</div>
<!-- End Footer -->
</div><!-- end pagewrapper -->
<__body>
</__html>
Code: Select all
/********************
MENU
*********************/
#menu_vert {
padding-left: 0;
margin-left: 0em;
}
/* third level has some padding to have it stand out */
div#menu_vert ul ul ul {
padding-bottom: 0.5em;
}
/* menu li block */
#menu_vert li {
list-style: none;
margin: 0;
border-bottom: 1px solid #c0c0c0;
display: block;
}
#menu_vert ul ul li {
border: none;
}
/** fix stupid ie bug with display:block; **/
* html #menu_vert li a { height: 1%; }
* html #menu_vert li hr { height: 1%; }
/** end fix **/
/* first level links */
div#menu_vert a {
text-decoration: none; /* no underline for links */
font-weight: bold;
display: block; /* IE has problems with this, fixed above */
padding: 0.8em 0.5em 0.8em 1.5em; /* some air for it */
color: #fff; /* this will be link color for all levels */
background: url(images/cms/arrow-right.gif) no-repeat 0.5em center;
min-height: 1em; /* Fixes IE7 whitespace bug */
}
/* next level links, more padding and smaller font */
div#menu_vert ul ul a {
font-size: 90%;
padding: 0.5em 0.5em 0.5em 2.5em;
background-position: 1.5em center;
}
/* third level links, more padding */
div#menu_vert ul ul ul a {
padding: 0.3em 0.5em 0.3em 3.5em;
background: url(images/cms/dash.gif) no-repeat 2.5em center;
}
/* hover state for all links */
div#menu_vert a:hover {
background-color: #FFF;
color: #BBA839
}
div#menu_vert a.activeparent:hover {
background-color: #FFF;
color: #BBA839;
}
/*
active parent, that is the first-level parent
of a child page that is the current page
*/
div#menu_vert li a.activeparent {
background: url(images/cms/arrow-down.gif) no-repeat 0.4em center;
background-color: #8F865B;
color: #fff;
}
div#menu_vert ul ul li a.activeparent {
background-position: 1.5em center;
background-color: transparent;
color: #BBA839;
}
/*
current pages in the default Menu Manager
template are unclickable. This is for current page on first level
*/
div#menu_vert ul h3 {
background: url(images/cms/arrow-right-active.gif) no-repeat 0.4em center;
background-color: #8F865B;
display: block;
padding: 0.8em 0.5em 0.8em 1.5em; /* some air for it */
color: #fff; /* this will be link color for all levels */
font-size: 1em; /* instead of the normal font size for <h3> */
margin: 0; /* as <h3> normally has some margin by default */
}
/*
next level current pages, more padding,
smaller font and no background color or bottom border
*/
div#menu_vert ul ul h3 {
font-size: 90%;
padding: 0.3em 0.5em 0.3em 2.8em;
background-position: 1.4em center;
background-color: transparent;
border-bottom: none;
color: #BBA839;
}
/* current page on third level, more padding */
div#menu_vert ul ul ul h3 {
padding: 0.3em 0.5em 0.3em 4.3em;
background: url(images/cms/arrow-right-active.gif) no-repeat 2.7em center;
}
/* section header */
div#menu_vert li.sectionheader {
border-right: none;
font-size: 130%;
font-weight: bold;
padding: 1.5em 0 0.8em 0;
background-color: #fff;
line-height: 1em;
margin: 0;
text-align:center;
}
/* separator */
div#menu_vert li.separator {
height: 1px !important;
margin-top: -1px;
margin-bottom: 0;
padding:2px 0 2px 0;
background-color: #000;
overflow:hidden !important;
line-height:1px !important;
font-size:1px; /* for ie */
}
div#menu_vert li.separator hr {
display: none; /* this is for accessibility */
}
Code: Select all
/*****************
browsers interpret margin and padding a little differently,
we'll remove all default padding and margins and
set them later on
******************/
* {
margin: 0;
padding: 0;
}
/*
Set initial font styles
*/
body {
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75.01%;
line-height: 1em;
color: #fff;
}
/*
set font size for all divs,
this overrides some body rules
*/
div {
font-size: 1em;
text-align: justify;
}
a,
a:link,
a:active,
a:visited {
text-decoration: none;
background-color: inherit;
color: #BBA839;
}
/* underline on hover*/
a:hover {
text-decoration: underline;
background-color: inherit;
color: #BBA839;
}
/**************
basic layout
***************/
body {
background: #3D433F url(uploads/images/backgrounds.gif) repeat;
margin: 0; /* gives some air for the pagewrapper */
color: #;
}
/* center wrapper, min max width */
div#pagewrapper {
border: 4px double #BBA839;
margin: 0 auto; /* this centers wrapper */
width: 740px;
background: #333;
color: #;
}
/*** header ***/
div#header {
padding: 3px;
height: 71px; /* adjust according your image size */
width: 737px;
background: #333 url(uploads/images/LogoAcupunctuur.jpg);
}
div#header h1 {
font-family: Arial, Verdana;
font-size: 1.6em;
font-weight: normal;
display: block;
margin-left: 320px;
margin-top: 50px;
text-align: left;
color: #fff;
border-bottom: 0px solid #BBA839;
}
div.breadcrumbs {
padding: 0 0 0 2em; /* CSS short hand rule first value is top then right, bottom and left */
font-size: 80%; /* its good to set fontsizes to be relative, this way viewer can change fontsize */
margin: 0 1em; /* css shorthand rule will be opened to be "0 1em 0 1em" */
border-bottom: 1px #8F865B;
color: #fff;
}
div.breadcrumbs span.lastitem {
font-weight:normal;
}
div#content {
margin: 0.5em 0 0.5em 0; /* some air above and under menu and content */
}
div#main {
margin-left: 30%; /* give room for sidebar on left side, make sure this is bigger than sidebar width */
margin-right: 3%; /* some air on the right */
padding: 1px;
background: #3D433F url(uploads/images/Tao.jpg) no-repeat center center fixed;
color: #;
border: 3px outset #6F6740;
}
div#sidebar {
float: left; /* set sidebar on the left side. Change to right to float it right instead. */
width: 26%; /* sidebar width, if you change this please also change #main margins */
display: inline; /* FIX IE double margin bug */
margin-left: 0;
background: #090B06 url(uploads/images/links1.jpg) no-repeat;
border: 3px outset #6F6740;
}
div#footer {
clear: both; /* keep footer below content and menu */
color: #ccc;
background-color: #3D433F;
border: 2px outset #6F6740;
width: 100%;
}
div#footer p {
font-size: 0.8em;
padding: 1em; /* some air for footer */
text-align: center; /* centered text */
margin: 0;
}
div#footer p a {
color: #ccc; /* needed because footer link would be same color as background otherwise */
}
/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
height: 1px;
padding: 1em;
border-bottom: 1px dotted #8F865B;
margin: 1em;
}
/* relational links under content */
div.left49 {
font-size: 0.8em;
color: #fff;
}
div.right49 {
float: right;
text-align: right;
font-size: 0.8em;
color: #fff;
}
/********************
CONTENT STYLING
*********************/
div#content {
}
/* HEADINGS */
div#content h1 {
font-size: 1.5em;
line-height: 1.5em;
margin-left: 30px;
margin-top: 30px;
padding: 1px;
border: 0px outset #fff;
text-align: left;
width: 100%;
color: #ccc;
}
div#content h2 {
color: #BBA839;
font-size: 1.5em;
letter-spacing: 0.2em;
text-align: left;
/* some air around the text */
padding-left: 0.5em;
padding-bottom: 1px;
/* set borders around header */
border-bottom: 1px solid #8F865B;
border-left: 1em solid #8F865B;
line-height: 1.5em;
/* and some air under the border */
margin: 0 0 0.5em 0;
}
div#content h3 {
color: #BBA839;
text-decoration: underline;
font-size: 1.3em;
line-height: 1.3em;
margin: 0 0 0.5em 0.5em;
}
div#content h4 {
color: #294B5F;
font-size: 1.2em;
line-height: 1.3em;
margin: 0 0 0.25em 0;
}
div#content h5 {
color: #BBA839;
font-size: 1em;
letter-spacing: 0.1em;
margin: 0.25em 0 -0.25em 0;
font-family: Arial, Verdana;
text-decoration: underline;
}
h6 {
color: #294B5F;
font-size: 1em;
line-height: 1.3em;
margin: 0 0 0.25em 0;
}
/* END HEADINGS */
/* TEXT */
p {
font-size: 1em;
margin: 1em 0 1.5em 0; /*some air around p elements */
line-height: 1.4em;
padding: 0;
}
blockquote {
border-left: 10px solid #ddd;
margin-left: 10px;
}
strong, b {
/* explicit setting for these */
font-weight: bold;
}
em, i {
/* explicit setting for these */
font-style:italic;
}
/* Wrapping text in <code> tags. Makes CSS not validate */
code, pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
font-family: "Courier New", Courier, monospace;
font-size: 1em;
}
pre {
border: 1px solid #000; /* black border for pre blocks */
background-color: #ddd;
margin: 0 1em 1em 1em;
padding: 0.5em;
line-height: 1.5em;
font-size: 90%;
}
/* Separating the divs on the template explanation page, with some bottom-border */
div.templatecode {
margin: 0 0 2.5em;
}
/* END TEXT */
/* LISTS */
/* lists in content need some margins to look nice */
div#main ul,
div#main ol,
div#main dl {
font-size: 1.0em;
line-height: 1.4em;
margin: 0 0 1.5em 0;
}
div#main ul li,
div#main ol li {
margin: 0 0 0.25em 3em;
}
/* END LISTS */
/* IMG TAGS */
div#main img {
padding: 0.1em;
margin: 0.3em;
border: 1px solid #BBA839;
}
div#main img.left {
float: left;
}
div#main img.right {
float: right;
}
/* END IMG*/