Hi
I'm having a problem with a site I'm trying to finish, basically the content container and navigation bar slides left and right depending on the size of the viewer window, and my title and logo (and a couple of other bits outside of the containers) stays put, so it can look messy and out of sync. Ideally I'd like to lock off the containers so they don't move, or failing that, attach the png file with my logo and elements to the containers to they stay together. I have very basic css knowledge, should I post the code and website on here should someone be able to help?
The other thing is making the menu buttons centred in the nav bar, which sounds so simple but I can't figure it out....
Thanks
P
Website as it stands: www.eavesandalcoves.com
CSS Code:
/* @group General Styles */ html { background-color: #5d636b; background-image: url(images/html-bg.gif); } body { text-align: center; } img { } .image-left { float: left; margin-right: 1em; margin-bottom: 1em; } .image-right { float: right; margin-right: 1em; margin-bottom: 1em; } /* @end */ /* @group + Layout */ #bg { position: absolute; width: 1400px; height: 520px; top: 0; left: 0; background-color: transparent; background-image: url(images/body-bg.png); background-position: top left; background-repeat: no-repeat; z-index: -1; } body > #bg { position: fixed; } #container { text-align: center; overflow: hidden; /* Margin collapse fix */ } /* @group pageHeader */ #pageHeader { height: 126px; overflow: hidden; } #pageHeader img { } #logo { } #pageHeader h1 { font-weight: normal; text-shadow: 0 -1px 0 #000, 0 1px 0 #fff; font-size: 48px; color: #e0e3e5; margin: 20px 0 0 54px; height: 106px; line-height: 106px; } #slogan { height: 126px; } #slogan h2 { position: relative; top: 60px; margin: 0; text-align: center; font-weight: normal; line-height: 32px; } /* @end */ /* @group contentContainer */ #contentContainer { position: relative; margin-bottom: 100px; z-index: 1000; } #contentContainer #content { width: 500px; overflow: hidden; padding: 0 40px; margin: 0; background-position: 0 0; background-repeat: repeat-y; background-color: transparent; background-image: url(images/content-bg.png); } .blog #contentContainer #content { width: 580px; } .content-top, .content-bottom { width: 580px; background-position: 0 0; background-repeat: no-repeat; background-color: transparent; } .content-top { height: 50px; background-image: url(images/content-top.png); } .content-bottom { height: 61px; background-image: url(images/content-bottom.png); } /* @end */ /* @group sidebarContainer */ #sidebarContainer { color: #cbcbcb; font-weight: lighter; text-shadow: #000 0 -1px 0; } #sidebarContainer h1, #sidebarContainer h2, #sidebarContainer h3, #sidebarContainer h4, #sidebarContainer h5, #sidebarContainer h6 { font-weight: normal; } #sidebarContainer #sidebar { } #sidebarContainer .sideHeader { } #sidebarContainer .sideHeader h2 { } #sidebarContainer a { color: #fff; font-weight: normal; } /* @end */ /* @group Bread-crumb */ #breadcrumbcontainer { height: 40px; line-height: 40px; } #breadcrumbcontainer ul { list-style: none; list-style-position: outside; list-style-type: none; margin-left: 40px; margin-bottom: 0; } #breadcrumbcontainer li { display: inline; margin: 0; } #breadcrumbcontainer a { border: none; /*text-shadow: #a5a5a5 0 1px 0;*/ font-size: 12px; color: #323232; } #breadcrumbcontainer a:hover { } /* @end */ /* @group footer */ #footer { margin-bottom: 20px; text-align: center; } #footer p { margin: 0; } #footer a:link, #footer a:visited { color: #ddd; } #footer a:hover, #footer a:active { } /* @end */ /* @end */ /* @group Toolbar-01 */ #navbar-left, #navbar-right { position: absolute; width: 30px; height: 35px; background-position: 0 0; background-repeat: no-repeat; } #navbar-left { top: 0; left: 0; background-image: url(images/navbar-left.png); } #navbar-right { top: 0; right: 60px; background-image: url(images/navbar-right.png); } #navbar { margin: 0 30px; height: 35px; position: relative; background-image: url(images/navbar-bg.png); background-repeat: repeat-x; } /* Toolbar Styles */ #navcontainer-01 { position: relative; height: 35px; z-index: 3000; } #navcontainer-01 .current { color: #fff; text-shadow: 0 0 3px #fff; background-color: transparent; } #navcontainer-01 .current:hover { cursor: default; } #navcontainer-01 .currentAncestor { color: #fff; text-shadow: 0 0 3px #fff; } /* Parent - Level 0 */ #navcontainer-01 ul { margin: 0; list-style: none; } #navcontainer-01 li { display: block; line-height: 35px; float: left; margin: 0; padding: 0; position: relative; list-style: none; z-index: 1000;; } #navcontainer-01 a { display: block; float: left; line-height: 35px; text-decoration: none; text-shadow: 0 -1px 0 #000; padding: 0 10px; font-size: 12px; border: none; color: #989898; white-space: nowrap; } #navcontainer-01 a:hover { color: #fff; text-shadow: 0 0 3px #fff; background-color: transparent; } #navcontainer-01 a:active { color: #fff; text-shadow: 0 0 3px #fff; background-color: transparent; } /* Child - Level 1 */ #navcontainer-01 ul li ul { z-index: 3000; } #navcontainer-01 ul ul { position: absolute; width: 172px; height: auto; top: 35px; left: 0; display: none; margin: 0px; z-index: 1000; background-image: none; border-radius: 0 0 10px 10px; padding-bottom: 10px; } #navcontainer-01 ul li:hover > ul { display: block; } #navcontainer-01 ul ul.visible { display: block; } #navcontainer-01 ul ul li { line-height: 30px; width: 172px; border: none; } #navcontainer-01 ul ul a { line-height: 29px; width: 150px; border-width: 1px; border-style: solid; border-top: none; } /*#navcontainer-01 ul li:hover > ul { display: block; }*/ #navcontainer-01 ul ul a:hover { color: #fff; text-shadow: 0 0 3px #fff; background-color: transparent; } #navcontainer-01 ul ul .current { } #navcontainer-01 ul ul .currentAncestor { } /* Child - Level 2 */ #navcontainer-01 ul ul ul { display: none; left: 100%; top: 0; left: 171px; border-radius: 0; padding-bottom: 0; } #navcontainer-01 ul ul li { } #navcontainer-01 ul ul ul a { border-left-color: #767b82; } /*#navcontainer-02 ul ul li:hover ul { display: block; }*/ #navcontainer-01 ul ul ul a:hover { } #navcontainer-01 ul ul ul .current { } #navcontainer-01 ul ul ul .currentAncestor { } /* Child Level 3 */ #navcontainer-01 ul ul ul { } #navcontainer-01 ul ul ul ul li { } #navcontainer-01 ul ul ul ul a { } #navcontainer-01 ul ul ul ul a:hover { } /* Child Level 4 */ #navcontainer-01 ul ul ul ul { } #navcontainer-01 ul ul ul ul ul li { } #navcontainer-01 ul ul ul ul ul a { } #navcontainer-01 ul ul ul ul ul a:hover { } /* Child Level 5 */ #navcontainer-01 ul ul ul ul ul { } #navcontainer-01 ul ul ul ul ul ul li { } #navcontainer-01 ul ul ul ul ul ul a { } #navcontainer-01 ul ul ul ul ul ul a:hover { } /* @end */ /* @group Global Classes */ blockquote, .standout { } pre { } code { } abbr { } acronym { } h1 { } h2 { } h3 { } h4 { } h5 { } h6 { } .imageStyle { } /* Main content area unordered list styles */ #contentContainer #content ul, #contentContainer #content ol { } #contentContainer #content li { } ul.disc { } ul.circle { } ul.square { } ol.arabic-numbers { } ol.upper-alpha { } ol.lower-alpha { } ol.upper-roman { } ol.lower-roman { } /* Sidebar area unordered list styles */ #sidebarContainer #sidebar ul { } #sidebarContainer #sidebar li { } /* Table Styles */ table { } /* @end */ /* @group Blog */ /* @group blog contentContainer */ .blog #contentContainer #content { background-image: none; padding: 0; margin: 0; } .blog .content-top { } .blog .content-bottom { } /* @end */ /* @group (((BS))) - Haloscan comments */ .MainTable { margin-left: auto; margin-right: auto; } .MessageCell p { margin-top: 1em; } .MainTable form { text-align: center; } /* @end */ /* @group (((BS))) - Plugin */ #plugin { height: auto; } #plugin a { } #plugin a:link, #plugin a:visited { font-size: 12px; border: none; color: #989898; } #plugin a:hover, #plugin a:active { color: #fff; text-shadow: 0 0 3px #fff; background-color: transparent; } /* @end */ /* @group Tag Cloud */ #sidebar #plugin ul.blog-tag-cloud { margin: 0 auto 40px; padding: 0; } ul.blog-tag-cloud { text-align: center; overflow: hidden; height: 1%; } ul.blog-tag-cloud li { float: left; display: inline-block; overflow: hidden; margin: 0 5px 5px 0; } ul.blog-tag-cloud li a { position: relative; float: left; margin: 0 13px 0 17px; padding: 0 5px; font-size: 12px; display: block; height: 25px; line-height: 25px; border: none; color: #989898; background-image: url(images/tag-bg.png); background-position: 0 0; background-repeat: repeat-x; } ul.blog-tag-cloud li a:hover, ul.blog-tag-cloud li a:visited { background-color: transparent; } ul.blog-tag-cloud li a span { position: absolute; width: 15px; height: 25px; top: 0; background-position: 0 0; background-repeat: no-repeat; } ul.blog-tag-cloud li a span.left-bg { width: 17px; left: -17px; background-image: url(images/left-bg.png); } ul.blog-tag-cloud li a span.right-bg { right: -13px; width: 13px; background-image: url(images/right-bg.png); } .blog-tag-size-1 { font-size: 0.8em; } .blog-tag-size-2 { font-size: 0.85em; } .blog-tag-size-3 { font-size: 0.9em; } .blog-tag-size-4 { font-size: 0.95em; } .blog-tag-size-5 { font-size: 1em; } .blog-tag-size-6 { font-size: 1.05em; } .blog-tag-size-7 { font-size: 1.1em; } .blog-tag-size-8 { font-size: 1.15em; } .blog-tag-size-9 { font-size: 1.2em; } .blog-tag-size-10 { font-size: 1.25em; } .blog-tag-size-11 { font-size: 1.3em; } .blog-tag-size-12 { font-size: 1.35em; } .blog-tag-size-13 { font-size: 1.4em; } .blog-tag-size-14 { font-size: 1.45em; } .blog-tag-size-15 { font-size: 1.5em; } .blog-tag-size-16 { font-size: 1.55em; } .blog-tag-size-17 { font-size: 1.6em; } .blog-tag-size-18 { font-size: 1.65em; } .blog-tag-size-19 { font-size: 1.7em; } .blog-tag-size-20 { font-size: 1.75em; } /* @end */ /* @group Archive Page */ .blog-archive-background { } .blog-entry-summary { } .blog-archive-headings-wrapper { } .blog-archive-entries-wrapper { } .blog-archive-entries-wrapper .blog-entry { } .blog-archive-month { background: url(images/micro-icons/document.gif) no-repeat left center; padding-left: 15px; border-bottom: 1px solid; } .blog-archive-link { } .blog-archive-link a:link, .blog-archive-link a:visited { } /* @end */ .blog-entry { margin: 0 0 50px 0; position: relative; } div.entry-content { padding: 0 40px; overflow: hidden; background-position: 0 0; background-repeat: repeat-y; background-color: transparent; background-image: url(images/content-bg.png); } .blog-entry-title { margin-bottom: 0; } .blog-entry-title a { border-bottom: none; } .blog-entry-date { background: url(images/micro-icons/calendar.gif) no-repeat left center; padding-left: 15px; margin-bottom: 20px; color: #888; text-transform: uppercase; font-size: 11px; font-weight: bold; } /*styles the category link in the main entry */ .blog-entry-category { } .blog-entry-category a { color: #444; border: none; font-weight: bold; text-shadow: 0 1px 0 #fff; } .blog-entry-category a:hover, .blog-entry-category a:active { color: #656565; border: none; background-color: transparent; } .blog-entry-category a:link, .blog-entry-category a:visited { background: url(images/micro-icons/document.gif) no-repeat left center; padding-left: 15px; } .blog-entry-category a:hover, .blog-entry-category a:active { background: url(images/micro-icons/document.gif) no-repeat left center; } /*styles the permalink link in the main entry */ .blog-permalink { } a.blog-permalink:link, a.blog-permalink:visited { text-shadow: 0 1px 0 #fff; color: #444; font-size: 24px; } a.blog-permalink:hover, a.blog-permalink:active { color: #656565; border: none; background-color: transparent; } .blog-entry-body { } .blog-read-more { clear: both; display: block; background: url(images/micro-icons/plus.gif) no-repeat left center; padding-left: 15px; margin: 10px 0; font-size: 11px; color: #888; font-weight: bold; text-transform: uppercase; } .blog-read-more a { color: #444; border: none; text-shadow: 0 1px 0 #fff; } .blog-read-more a:hover, .blog-read-more a:active { color: #656565; border: none; background-color: transparent; } .blog-entry-comments { padding-left: 15px; background: url(images/micro-icons/comment.gif) no-repeat left center; } #content p.blog-entry-tags { font-size: 11px; margin: 10px 0; background: url(images/micro-icons/tag.gif) no-repeat left center; padding-left: 15px; color: #888; font-weight: bold; text-transform: uppercase; } #content p.blog-entry-tags a { color: #444; border: none; text-shadow: 0 1px 0 #fff; } #content p.blog-entry-tags a:hover, #content p.blog-entry-tags a:active { color: #656565; border: none; background-color: transparent; } /* styles the archives in the blog sidebar */ #blog-archives { width: 180px; margin: 0 auto 40px; } #blog-archives br{ /*position: absolute; height: 0; line-height: 0; visibility: hidden;*/ display: none; } a.blog-archive-link-enabled { } #blog-archives a.blog-archive-link-enabled:link, #blog-archives a.blog-archive-link-enabled:visited { padding: 0; display: block; width: 155px; margin-bottom: 5px; padding-left: 25px; height: 25px; line-height: 25px; background-image: url(images/cat-bg.png); background-position: 0 0; background-repeat: no-repeat; } #blog-archives a.blog-archive-link-enabled:hover, #blog-archives a.blog-archive-link-enabled:active { } .blog-archive-link-disabled { color: #666; padding: 0; display: block; width: 155px; margin-bottom: 5px; padding-left: 25px; height: 25px; line-height: 25px; background-image: url(images/cat-bg.png); background-position: 0 0; background-repeat: no-repeat; } /* Styles the blog categories in the blog sidebar */ #blog-categories { width: 180px; margin: 0 auto 40px; } #blog-categories br { /*position: absolute; height: 0; line-height: 0; visibility: hidden;*/ display: none; } a.blog-category-link-enabled { } #blog-categories a.blog-category-link-enabled:link, #blog-categories a.blog-category-link-enabled:visited { padding: 0; display: block; width: 155px; margin-bottom: 5px; padding-left: 25px; height: 25px; line-height: 25px; background-image: url(images/cat-bg.png); background-position: 0 0; background-repeat: no-repeat; } #blog-categories a.blog-category-link-enabled:hover, #blog-categories a.blog-category-link-enabled:active { } .blog-category-link-disabled { color: #666; padding: 0; display: block; width: 155px; margin-bottom: 5px; padding-left: 25px; height: 25px; line-height: 25px; background-image: url(images/cat-bg.png); background-position: 0 0; background-repeat: no-repeat; } /* Styles the blog RSS feeds in the blog sidebar */ #blog-rss-feeds { height: 1%; width: 180px; margin: 0 auto 40px; } a.blog-rss-link { } a.blog-rss-link:link, a.blog-rss-link:visited { background-image: url(images/feed-bg.png); background-position: 0 0; background-repeat: no-repeat; padding-left: 35px; height: 35px; line-height: 35px; display: block; } a.blog-rss-link:hover, a.blog-rss-link:active { background-color: transparent; } a.blog-comments-rss-link { padding-left: 15px; } a.blog-comments-rss-link:link, a.blog-comments-rss-link:visited { background: url(images/micro-icons/comments.gif) no-repeat left center; } a.blog-comments-rss-link:hover, a.blog-comments-rss-link:active { background: url(images/micro-icons/comments.gif) no-repeat left center; } /* @end */ /* @group File Sharing */ .filesharing-description { } .filesharing-item { margin-bottom: 1em; padding: 1em; background-color: #eee; border-style: solid; border-width: 1px; border-top-color: #ccc; border-left-color: #ddd; border-bottom-color: #fff; border-right-color: #ddd; } .filesharing-item-title a { } .filesharing-item-title a:link { } .filesharing-item-title a:hover { } .filesharing-item-title a:visited { } .filesharing-item-description { } /* @end */ /* @group Photo Album */ /* @group Index Page (Thumbnail view) */ .album-title { font-size:1.6em; line-height:1; margin:1em 0 .5em; } .album-description { margin-bottom:1.6em; } .album-wrapper { overflow: hidden; margin: 0 auto; height: 1%; } .thumbnail-wrap { float: left; position: relative; margin-bottom: 9px; margin: 0 9px 40px 0; padding: 9px; background-color: #eee; border-style: solid; border-width: 1px; border-top-color: #ccc; border-left-color: #ddd; border-bottom-color: #fff; border-right-color: #ddd; } .thumbnail-frame { text-align: center; } .thumbnail-frame:hover { } .thumbnail-frame a { border: none; padding: 0; } .thumbnail-frame a:hover { } .thumbnail-frame img { } .thumbnail-caption { top: 102%; position: absolute; font-size: 11px; text-align: center; left: 0px; width: 100%; } /* @end */ /* @group Single Page (Photo view) */ .photo-background { margin: 0; } .photo-navigation { position: relative; left: 2em; top: 2em; float: left; clear: left; width: 200px; padding: 1em; border-style: solid; border-width: 1px; } .content .photo-title { margin: 0; } .photo-title { font-size:1.6em; line-height:1; margin:1em 0 .5em; } .photo-caption { text-align: left; } .photo-links { } .photo-navigation a:link, .photo-navigation a:visited { } .photo-navigation a:hover { } .photo-frame { position: absolute; left: 350px; top: 2em; } .photo-title { } .photo-caption { } /* @group EXIF data */ /* Data wrapper */ .exif-data { position: relative; left: 2em; clear: left; top: 2em; float: left; width: 200px; padding: 1em; border-style: solid; border-width: 1px; border-top-style: none; text-align: left; } .exif-data p { } /* p tag classes for all exif data */ p.exif-version { } p.exif-colour-space { } p.exif-focal-length { } p.exif-dimensions { } p.exif-pixel-y-dimension { } p.exif-pixel-x-dimension { } p.exif-oecf-value { } p.exif-subsec-time-original { } p.exif-exposure-mode { } p.exif-spatial-frequency-response { } p.exif-scene-capture-type { } p.exif-subject-location { } p.exif-shutter-speed { } p.exif-datetime-original { } p.exif-subsec-time { } p.exif-compressed-bits-per-pixel { } p.exif-flash-energy { } p.exif-saturation { } p.exif-brightness { } p.exif-exposure-time { } p.exif-f-number { } p.exif-file-source { } p.exif-gain-control { } p.exif-subject-area { } p.exif-cfa-pattern { } p.exif-scene-type { } p.exif-white-balance { } p.exif-flash { } p.exif-exposure-index { } p.exif-flashpix-version { } p.exif-device-setting-description { } p.exif-focalplane-x-resolution { } p.exif-image-uniqueid { } p.exif-components-configuration { } p.exif-light-source { } p.exif-sensing-method { } p.exif-aperture { } p.exif-sharpness { } p.exif-exposure-program { } p.exif-subject-distance { } p.exif-subsec-time-digitized { } p.exif-contrast { } p.exif-focalplane-resolution-unit { } p.exif-gamma { } p.exif-35mm-focal-length { } p.exif-datetime-digitized { } p.exif-subject-distance-range { } p.exif-custom-rendered { } p.exif-max-aperture { } p.exif-sound-file { } p.exif-metering-mode { } p.exif-spectral-sensitivity { } p.exif-exposure-bias { } p.exif-focalplane-y-resolution { } p.exif-iso-rating { } p.exif-maker-note { } p.exif-digital-zoom-ratio { } p.exif-user-comment { } /* @end */ /* @end */ /* @end */ /* @group Quicktime Page */ .movie-frame { text-align: center; margin-bottom: 2em; } .movie-description { } /* @end */ /* @group Quicktime Album */ /* @group Index Page (Movie Thumbnail view) */ /*Tripoli*/ .movie-page-title { font-size:1.6em; line-height:1; margin:1em 0 .5em; font-weight: bold; } /*Tripoli*/ .movie-page-description { margin-bottom:1.6em; } .movie-thumbnail-frame { margin-bottom:1.6em; /*height: 132px; width: 132px;*/ float: left; text-align: center; margin-right: 9px; font-weight: bold; text-transform: uppercase; font-size: 11px; } .movie-thumbnail-frame a { width: 135px; height: 100px; display: block; margin-bottom: 9px; padding: 9px; background-color: #eee; border-style: solid; border-width: 1px; border-top-color: #ccc; border-left-color: #ddd; border-bottom-color: #fff; border-right-color: #ddd; } .movie-thumbnail-frame a img { } .movie-thumbnail-frame:hover { } .movie-thumbnail-caption { } /* @end */ /* @group Single Page (Movie View) */ .movie-background { } .movie-title { text-align: center; font-size: 1.4em; font-weight: bold; } .movie-frame { text-align: center; } .movie-description { text-align: center; } /* @end */ /* @end */ /* @group Contact Form */ /*Tripoli*/ form { } .message-text { margin-bottom:1.6em; } .required-text { margin-bottom:1.6em; } .form-input-field { width: 99%; } .form-input-button { width: 45%; margin-left: 3%; } /* @end */ /* @group Sitemap */ .rw-sitemap { margin-bottom: 1em; padding: 20px; background-color: #eee; border-style: solid; border-width: 1px; border-top-color: #ccc; border-left-color: #ddd; border-bottom-color: #fff; border-right-color: #ddd; } .rw-sitemap ul { margin: 0; } .rw-sitemap ul li { list-style-type: none; margin: 10px; } .rw-sitemap ul li ul li{ padding-left: 30px; } .rw-sitemap ul li a { line-height: 25px; background-image: url(images/micro-icons/document.gif); background-repeat: no-repeat; background-position: 5px 6px; padding: 5px; padding-top: 8px; padding-left: 20px; padding-right: 10px; border: none; } .tree { margin: 0; } /* @end */ /* @group ((( BS ))) - Snippets 20081223 */ .left { float: left; } .right { float: right; } .ta-left { text-align: left; } .ta-center { text-align: center; } .ta-justify { text-align: justify; } .ta-right { text-align: right; } .small { font-size: 0.8em; line-height: 1.4em; } .smaller { font-size: 0.6em; line-height: 1em; } .hidden { visibility: hidden; } .pr-10 { padding-right: 10px; } .pr-20 { padding-right: 20px; } .pl-10 { padding-left: 10px; } .pl-20 { padding-left: 20px; } .w10x100 { width: 10%; } .w15x100 { width: 15%; } .w20x100 { width: 20%; } .w25x100 { width: 25%; } .w30x100 { width: 30%; } .w35x100 { width: 35%; } .w40x100 { width: 40%; } .w45x100 { width: 45%; } .w50x100 { width: 50%; } .w55x100 { width: 55%; } .w60x100 { width: 60%; } .w65x100 { width: 65%; } .w70x100 { width: 70%; } .w75x100 { width: 75%; } .w80x100 { width: 80%; } .w85x100 { width: 85%; } .w90x100 { width: 90%; } .w95x100 { width: 95%; } .w100x100 { width: 100%; } .h10px { height: 10px; } .h20px { height: 20px; } .h30px { height: 30px; } .h40px { height: 40px; } .h50px { height: 50px; } .h60px { height: 60px; } .h70px { height: 70px; } .h80px { height: 80px; } .h90px { height: 90px; } .h100px { height: 100px; } .red { background-color: red; } /* @end */