|
CSS - Container Background Images Won't Line Up
Hoping someone can help me out as I'm still pretty new to the whole web design thing. I'm using CSS to create a container wrapper. As you can see from the code I have a bottom, top and center image. When I was using JPEG images everything lined up correctly, however I needed to switch to PNG image files (to take advantage of transparency) and now the top and bottom sections of the wrapper are offset.
Here is a live link: storrepictures.weebly.com/projects.html -Please find an image of the resulting problem he http://i.imgur.com/YnTS8.png -This is how it looks when I use JPEGs instead of PNGs: http://i.imgur.com/2WMFN.png Here is my CSS wrapper code: Code: #wrapper {
background: url(containerbg.png) center repeat-y;
}
#wrappertop{
background: url(containertop.png) top center no-repeat;
}
#wrappertbtm{
background: url(containerbtm.png) bottom center no-repeat;
padding-bottom: 65px;
}
And here is the HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<style>
#content
{
height:400px !important;
}
</style>
<![endif]-->
</head>
<body class="wsite-theme-light">
<div id="wrappertop">
<div id="wrapper">
<div id="header">
<div id="headerleft">{logo max-height="60"}</div>
<div id="navigation">{menu}</div>
</div>
<div id="content">{content}
<div id="footer">{footer}
<div id="wrappertbtm">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Similar TutorialsHello; i'd like to ask you how to set the smiles of the images to the center of a container? please. my code as following; Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>welcome to my page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
#container
{
padding: 1px;
border: 1px;
width: 150px;
background-color: lightblue;
margin: auto;
}
#container p
{
padding: 0;
margin: 0;
text-align: center;
}
#smile ul
{
margin-left: 0;
padding: 0;
text-align: center;
}
#container li
{
display: inline;
list-style: none;
text-align: center;
margin:0;
padding: 0;
}
#container img
{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id= "container">
<p> smile </p>
<ul id="sul">
<li> <img alt="h" src="honorhim.jpg" >
<li> <img alt="c" src="cool.gif" >
<li> <img alt="t" src="tongue.gif">
<li> <img alt="s" src="smile.jpg">
<li> <img alt="z" src="zall_coho.gif">
<li> <img alt="b" src="biggrin.gif">
<li> <img alt="con" src="cool.gif">
<li> <img alt="r" src="razz.gif">
</ul>
</div>
</body>
</html>
Hey guys, I've recently started working on my css and for some reason my background image isn't showing up in my container. Any idea why? CSS Code: Original - CSS Code /* CSS Document */ * { margin: 0; padding: 0; } body { font-size: 62.5%; background: #344149; } p, li { font: 1.2em/1.8em Tahoma, sans-serif; margin-bottom: 10px; } h1 { font: 2.0em Tahoma, sans-serif; color: white; height: 0px; } h2 { font: 1.8em Tahoma, sans-serif; color: green; margin-bottom: 10px; } ul { margin-left: 25px; } img { border: none; } #page-wrap { background: black; min-width: 780px; max-width: 1260px; margin: 10px auto; width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto"); } #page-wrap #inside { margin: 10px 10px 0px 10px 10px; padding-top: 10px; padding-bottom: 10px; } #main-content { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; padding-left: 180px; padding-right: 180px; padding-top: 20px; } #header { background: #000000; text-align: center; } #left-sidebar { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; width: 150px; float: left; padding-left: 15px; padding-top: 20px; } #right-sidebar { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; width: 150px; float: right; padding-right: 15px; padding-top: 20px; } #footer { background: #267f23; text-align: center; padding-top: 20px; padding-bottom: 20px; color: white; } /* CSS Document */ It's the Background_Content.jpg that isn't loading for some reason. It resides in the Image folder located in the same directory as the html file. Oh and the reason I had it included so much was to test to see if it was just the main-content that wouldn't load it. The main content should include the left-sidebar and right-sidebar right? Please help! Hi I have searched on this subject, and found the Faux Column articles, but I have failed to make use of these. The following page shows the problem LINK And CSS The text in the container div leads off the bottom of the page. The CSS is a bit of a mess at the moment because I have been messing with it trying to get this to work. I need the background of the container div to extend to the bottom of the content div. I have set min-height and heights for the body and html tags, and then for the container, as I know that the height is only taken into account if the parent has a height too. This does not work. Any suggestions? Thanks Jake I tried to play around with my code to see if I could get a image of a bar and its two ends on the top border of the div containers and have text on it. But this is what I have so far and its not working! Code: .preview {border 1xp solid black;
background-color: white;
}
.preview .innerdiv{
background: transparent url(css/bar.png);
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
}
I have a web page that I am going to give to a someone that will give me something if I get it done in a week so I want to get this hard to figure out proplem out of my way so I can get more done faster. Your help will be most thankful! I want something like this to help get a better understanding what I want. http://www.quake3world.com/forum/portal.php hello all. thanks for your time. i am having some issues with a background image & color not showing up in a container div. here is the snippet from the CSS where the background image and color are defined. you can view the full CSS http://americanwalkincoolers.com/test/css/site.css Code: #container {
background: url('./img/faux_bg.gif') repeat-y top left #496d9d;
width: 960px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
and the page is he http://americanwalkincoolers.com/test/index.html i am attempting to cheat on the layout by placing a background color/image that will make the right column extend the length of the page. currently the right column has a graphic that says "featured products" followed by a gap that runs the length of the container. can anyone help me? bonus points if you can explain to me why the BG color & BG image aren't showing up from the container. thanks again. Look at this page - http://certified.tmhdesign.com/about.asp I have a div called container, then in that div one called header, content_right, content_left, and footer. What is frustrating me is that I have to hard code a min-height for the left and right colums and if you scroll down you'll see where the background color of the body appears below the right column which I want to be white. When I specify the color of the container that does not fix the issue. Any help would be appreciated. Thanks. I've been working on converting to css for table-like layout. I have the three column variety with a header. Around all 4 is a container to keep things ship shape. My issue is that even though I've specified a background colour for the container it doesn't seem to override the body color making the column lengths uneven. Code: <!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>
<title>mrhodges.net: A web site for Mr. Hodges classes</title>
<style type="text/css" >
body { background-color: #014e82;
text-align: center;
font-family: Georgia, serif;
}
#container { width: 90%;
margin: 10px auto;
background-color: #ffffff;
text-align: left;
}
#banner { background-color: #014e82;
padding: 1px;
}
#banner p.title { font-size: 2.5em;
color: #ffffff;
background-color: #014e82;
text-align: center;
margin: 0;
padding: 0 0 5px 0;
}
#banner ul { list-style-type: none;
text-align: center;
padding: 0 0 10px 0;
margin: 0;
font-family: Verdana, arial, sans-serif;
font-size: 10pt;
color: #ffffff;
}
#banner ul li { display: inline;
}
#banner ul li a { text-decoration: none;
padding: 0;
}
#banner a:link { color: #ffffff;
padding: 0;
}
#banner a:visited { color: #ffffff;
padding: 0;
}
#banner a:hover { color: #ffffff;
text-decoration: underline;
padding: 0;
}
#banner a:active { color: #54b818;
text-decoration: underline;
padding: 0;
}
#leftnav { float: left;
width: 160px;
margin: 0px;
padding: 3px 5px 5px 5px;
background-color: #fff;
}
#leftnav ul { margin: 0;
padding: 0;
list-style-type: none; }
#leftnav a { display: block;
color: #049;
background-color: #fff;
text-decoration: none;
padding: 0 0 0 5px;
}
#leftnav a:hover { background-color: #ddd;
color: #049;
}
#rightnav { float: right;
width: 160px;
margin: 0px;
padding: 3px 5px 5px 5px;
background-color: #fff;
}
#middle { margin-left: 160px;
margin-right: 160px;
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
<p class="title">mrhodges.net</p>
<ul>
<li><a href="http://www.cbc.ca/news/">CBC News</a> |</li>
<li><a href="http://dictionary.reference.com/">Dictionary</a> |</li>
<li><a href="http://www.fmcsd.ab.ca">FMCSD</a> |</li>
<li><a href="http://www.google.ca">Google</a> |</li>
<li><a href="http://www.mymcmurray.com">mymcmurray</a> |</li>
<li><a href="http://www.theweathernetwork.com/weather/cities/can/Pages/CAAB0124.htm">Weather</a> |</li>
<li><a href="http://en.wikipedia.org/wiki/Main_Page.html">Wikipedia</a></li>
</ul>
</div>
<div id="leftnav">
<ul>
<li><a href="overview.html">Course</a></li>
<li><a href="overview.html">Overview</a></li>
<li><a href="outline.html">Outlines</a></li>
<li><a href="outline.html#modules">Modules</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="rap.html">RAP Program</a></li>
</ul>
<br />
<ul>
<li>Safety</li>
<li>Consent</li>
<li>.pdf form</li>
</ul>
<br />
<ul>
<li><a href="dates.html">Dates</a></li>
<li><a href="dates.html#term">Term</a></li>
<li><a href="dates.html#plc">PLC Days</a></li>
<li><a href="dates.html#holi">Holidays</a></li>
<li><a href="dates.html#inter">Interviews</a></li>
<li><a href="dates.html#mod">Module</a></li>
<li><a href="dates.html#exam">Exam</a></li>
</ul>
<br />
<ul>
<li><a href="http://www.mrhodges.blogspot.com">Daily Log</a></li>
<li><a href="http://www.mrhodges.blogspot.com">Class Log</a></li>
</ul>
<br />
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="contact.html">School</a></li>
<li><a href="contact.html">Mr. Hodges</a></li>
</ul>
<br />
</div>
<div id="rightnav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
<div id="middle">
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. </p>
</div>
</div>
</body>
</html>
The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. hey guys i have a question.. i wan't to make a picture gallery for my cus(tattoo) im doing an admin so he can upload his pics. now on the gallery page i will use php to echo the pictures. now when you use an echo usally it showws all the pics on on line.. how can i make it so i can have like 4per line? pic pic pic pic pic pic pic pic hello, I want the right arrow to be displayed on the same line as the slide show. Any suggestions as to how to do so? below is the CSS and the HTML. Here is the html Code: <!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"> <head> <script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script> <link type="text/css" href="scrollable.css" rel="stylesheet" /> <script> // execute your scripts when the DOM is ready. this is a good habit $(function() { // initialize scrollable $("div.scrollable").scrollable(); }); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .leftbutton {width: 30px; float:left; margin-top:30px;} .rightbutton {display:inline;} </style> </head> <body> <!-- "previous page" action --> <a class="prevPage browse left leftbutton"><img src="left.png" /></a> <!-- root element for scrollable --> <div class="scrollable inline"> <!-- root element for the items --> <div class="items"> <!-- 1-5 --> <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" /> <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" /> <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" /> <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" /> <img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" /> <!-- 5-10 --> <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" /> <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" /> <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" /> <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" /> <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" /> <!-- 10-15 --> <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" /> <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" /> <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" /> <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" /> <img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" /> </div> </div> <!-- "next page" action --> <a class="nextPage browse right rightbutton"><img src="right.png" /></a> </body> </html>
Here is the CSS: Code: /* root element for the scrollable. when scrolling occurs this element stays still. */ .scrollable { /* required settings */ position:relative; overflow:hidden; width: 680px; height:120px; /* custom decorations */ border:1px solid #ccc; background:url(/img/global/gradient/h300.png) repeat-x;} /* root element for scrollable items. Must be absolutely positioned and it should have a extremely large width to accomodate scrollable items. it's enough that you set the width and height for the root element and not for this element. */ .scrollable .items { /* this cannot be too large */ width:20000em; position:absolute; clear:both; } /* single scrollable item */ .scrollable img { float:left; margin:20px 5px 20px 21px; background-color:#fff; padding:2px; border:1px solid #ccc; cursor:pointer; width:100px; height:75px; -moz-border-radius:4px; -webkit-border-radius:4px; } /* active item */ .scrollable .active { border:2px solid #000; z-index:9999; position:relative; }
I have a number of icons. - back button - print button - next button I want to display them all on the same line. I want the back button to be placed on the far left while the other two on the far right. I have experimented quite abit with trying to get this to work, and have managed to sort of get it right by using left padding. However, I know this is a rubbish way of doing it as depending on the screen size will depend on where the right hand icons appear. I did think I would just use tables, but figured someone here maybe able to help me out. Hello, I'm looking for some help with this problem and would really appreciate some guidance. I'm teaching myself layout with CSS (just picked up the dummies book, so you can guess my current level) but am currently stumped. I'm looking to have a header, with a central image and two link images positioned either side. The central image would be exactly centred, with the link images aligning to the sides of the central image: [PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]. As the link images are different widths, I'm unable to simply centre everything in one go, as then the central image is not viewed as exact centre. I need a way to centre the image and then float the link images to the relevant sides but have it so they align either left or right against the centred image. Also, the centre image height is greater than the link images, so as well as aligning either left or right I'm trying to get them to align to the middle, like this: Code: [ ]
----------------[PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]-----------------
[ ]
---- variable empty space depending on browser width
I currently have a div to centre using left-margin: auto; right-margin: auto; text-align: center; and have another div inside this with the centred image. I've also created a left div and right div to contain the link images on either side using the float tag: left/right and aligned left or right, but I don't know where to go from there. I know it's probably simple but I can't seem to find the answer. Any help would be great. Code: #header {
margin-left: auto;
margin-right: auto;
text-align: center;
}
#title {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 400px;
}
#imgleft {
float: left;
text-align: right;
width: 30%
}
#imgright {
float:right;
text-align: left;
width: 30%
}
<div id="header">
<div id="imgleft">
<a href="portfolio.html"><img src="l_portfolio.gif" alt="Portfolio"></a>
<img src="l_about.gif" alt="About">
</div>
<div id="imgright">
<img src="l_blog.gif" alt="Blog">
<img src="l_contact.gif" alt="Contact">
</div>
<div id="title">
<img src="title.gif" height="84" width="400" alt="Title">
</div>
</div>
Hi there, I'm having a tough time getting these two images to align side by side...the line keeps breaking and thus forcing the image to the next line, as show here (not to mention it's messing with my footer): http://www.groundedgroup.com/client...A_Index_v2.html Here's the respective css: CSS Stuff Here's what it's supposed to look like: http://www.groundedgroup.com/client...EA_Show_v2.html Both of the images add up to a total width of 956px, however, the div containing it is set to 947px width. If I change it to 956px, it works, but it pushes out the sides, resulting in the left and right vertical borders not lining up with the rest of header, footer, etc. Ideally, I want these images to hover over this area and thus not spread out the design. Got any ideas? BTW, I checked my css and xhtml before posting and it validates. Thanks for your help. I'm trying to gain both valid HTML 4.01 and CSS for a site I'm working on. I've completed the HTML without a problem, but I've run intoa problem with the CSS. My CSS file has three 'background-image' lines within it, and w3 is telling me the below: Quote: * Line : 9 (Level : 1) You have no color with your background-color : body * Line : 77 (Level : 1) You have no color with your background-color : #innerbase * Line : 82 (Level : 1) You have no color with your background-color : .c1 The lines mentioned are the lines of the 'background-color' attributes. Those lines consist of, 'background-color: #HEXVALUE;'. I can't find a problem with the line. Here's the full CSS document - if anybody could point out something I'm doing wrong that would cause this error I'd greatly appreciate it. css Code: Original - css Code body { font-family: arial, "lucida console", sans-serif; font-size: 11px; text-align: center; background-image: url("img/back.gif"); background-position: bottom left; background-attachment: scroll; background-repeat: repeat-x; background-color: #FFFFCC } img { vertical-align: bottom; } table { border: 0px; padding: 0px; font-family: arial, "lucida console", sans-serif; font-size: 11px; } #base { border-left: 6px solid #64644c; border-right: 2px solid #64644c; border-bottom: 2px solid #64644c; font-family: arial, "lucida console", sans-serif; font-size: 11px; background-color: #cbcc98; } .mbutton { font-family: sans-serif, arial, 'lucida console'; font-size: 11px; font-weight: bold; width: 20%; padding: 2px; } #sbutton { font-family: sans-serif, arial, 'lucida console'; font-size: 11px; font-weight: bold; width: 20%; background-image: url("img/tab.gif"); background-repeat: no-repeat; padding: 2px; } .obutton { font-family: sans-serif, arial, 'lucida console'; font-size: 11px; font-weight: bold; width: 20%; background-image: url("img/tabover.gif"); background-repeat: no-repeat; padding: 2px; cursor: default; } #mtd { border-top: 1px solid #64644c; font-family: arial, "lucida console", sans-serif; font-size: 11px; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; } #prices td { border: 1px solid #6a6a50; padding: 2px; font-weight: bold; width: 20%; } #prices th { border: 1px solid #6a6a50; padding: 2px; font-weight: bold; width: 40%; text-align: left; } #innerbase { background-color: #99cc33; border: 1px solid #6a6a50; padding: 5px; } .c1 { background-color: #86b32d; } .copyrights { text-align: center; }
I update the website of a local gaming center and I recently redesigned it. I am not a CSS expert and now that I have integrated it into to site, the background will not fill the screen on larger monitor sizes. When you scroll down to the bottom of the page it turns leaves a large white space at the bottom of the screen. There is also an odd white border around the site. The css can be found in the source code. The site is nextlevelchardon.com I have a site that will be relying heavily on background images sitting behind all the tables. These backgrounds will work in concert with the overall background-color: property. My question is this, on the style sheet, of which I would like to have ONE. Is there a way to change entire background-images for each page within the site. In another post, we went over how to change images within the same <div> by simply making the <div> a holder and swapping the image on each page by using something like: <div id="image" class="page_two"> Is there a way to do something similar using an entire background image? Or do I need a separate style sheet for each page? Perhaps the main style sheet which has a body like this body { margin:0px; } and then attach an additional style sheet to each page that supersedes the body tag in the main sheet? I hope I am making sense... thanks jon Is there some way to rig CSS to display 2 separate background images. I wanted to put the 2 images on opposite sides. I tried, but both IE 6 and Firefox 1.0.2 displayed only 1 bg image. Anyone got a suggestion? Edit - Oh yeah...this is for the BODY tag. I thought I ought to mention that. Hello, as the subject states I have a question about whether IE can display a background image on a tr and a td correctly. I have a table row with a repeating background then in the first cell in that row I have another background image that goes in the top left corner with a transparent background color on the cell so that the tr background can show though. This works as it should in all browsers except IE where only the td background image appears and its transparent to the page background not the tr background. This is the css: Code: .professor_forum_row {
background: #ffffff url(../images/author_post_background.jpg) repeat top left;
}
.professor_corner_tab {
background: transparent url(../images/article_sticky_author.jpg) no-repeat top left;
}
the html is just a table with those classes assigned to the row and first td. Any ideas on why this is happening? Thanks, Ryan K. I have my content bg which is to repeat, but I want to put like another background image set to the right in the content box. HTML Coding ************* <div id="special_feature_top"> <img src="images/specialfeatures.jpg" width="800" height="30" alt="" /> </div> <div id="special_feature_mid"> <img src="images/imagegalleryfeature.jpg" width="193" height="178" alt="Image Gallery" /> <img src="images/jointodayfeature.jpg" width="193" height="178" alt="Join Battle Glory Today!" /> <img src="images/forumsfeature.jpg" width="193" height="178" alt="Forums" /> </div> <div id="special_feature_btm"> <img src="images/specialfeatures_btm.jpg" width="800" height="30" alt="" /> </div> CSS Coding ************* #special_feature_mid { padding: 1px 0px 1px 10px; background-image: url('images/content_bg.jpg'); } That's the coding for the image now just with the content_bg. Now the other image I just want set to the background also so text can over lap or other images. It's a really nice opacity image that blends in perfect. I just want it in background also positioned to the right. thanks Matta |
|||||||