|
CSS - Main Content Top Image Problem
Hi All.. I am working on my first real website for a friend and I am having trouble getting the top image where I want it. I will post a link in a sec. What I am trying to do is set a top, middle and bottom image in the Main Content part of the site. It looks like a picture frame but can expand without breaking when I add new content. I had no problem putting the middle image in and I finally got the bottom image set, though I had to do some strange things to get it to work. Now I am stuck on the top image. I can not get it set where I want it. I am still learning CSS/HTML and am trying to do this on my own and with Google . but this has me stumped. Could someone tell me what I should do. Here is the link
http://http://www.jamkastin.com/New..._Dreams/dd.html Here is my CSS that I did for the middle and bottom image. Code: <style type="text/css">
#html, body {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width:800px;
height: 100%;
background: url(images/bg.png);
margin: 0 auto;
text-align: center;
font-family: Verdana, Helvetica, sans-serif;
}
#container {
width: 780px;
background: url(images/wood_back.jpg);
margin: 0 auto;
overflow: hidden;
}
#navigation {
margin-top: -4px;
width:780px;
background: #B6C5A4;
font-family:Trebuchet MS, Helvetica, sans-serif;
text-align:center;
overflow:hidden;
}
#navigation ul {
float:left;
list-style:none;
margin: 0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#navigation ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0px;
position:relative;
right:50%;
}
#navigation ul li a {
display:block;
margin:0;
padding:.4em .8em;
color:#000;
text-decoration:none;
}
#navigation ul li a span {
display:block;
}
#navigation ul li.active a {
color: #fff;
font-weight:bold;
}
#navigation ul li a:hover {
color: #fff;
}
#mainContent {
float: left;
width: 450px;
margin: 15px 15px -71px 15px;
padding: 15px 15px 15px 15px;
background:url(mainbg.gif) repeat-y;
}
#mainContent .p3{
padding-bottom:20px;
margin-left: -21px;
background:url(mainbottom.gif) bottom no-repeat;
}
#sidebar1 {
float: right;
width: 200px;
padding: 15px;
margin: 15px;
background:url(sidebg.gif) repeat-y;
}
p {
padding: 0px 20px 0px 20px;
}
#mainContent .article
{
padding-top:20px;
}
.bottom_border {
width: 780px;
height:30px;
margin: 0px 10px;
background-image: url(images/dd_border.png);
}
.copy {
font-size: 12px;
color: #000;
}
.copy a {
color: #000;
}
Similar TutorialsI have tried multiple times to have a kind of "content" div, where it resizes vertically to the amount of content in it, and stays the same width and is centered. How can I do this? I know min-height doesn't work in IE. Another problem I was having, certain pages would be off to the left when they should have been centered. Please help! So far my site appears somewhat like this Header Menu Main Content Footer Now what I wish to do for the Main Content, is create boxes, 2 top boxes and 2 lower boxes: Box 1 Box 2 Box 3 Box 4 So I've been playing around, trying to get them to float, ya de da, I can manage to get 2 columns, but when I attempt to put in the 2 lower columns, the footer ghosts over top of all the main content and all you can see is the header, menu and footer. If attempted to wrap them in container's but have failed miserably, any help would be appreciated. This is my first completely css site and I am having troubles with my main content areas and some other small minor things. My design requires that the sidebar be the same height as my content area. What do I need to do to get them the same heights. The main content area changes on each page so my sidebar needs to do the same. Here is the website. I guess I cannot post url's so I hope I made sense. Also an example of what the site is going to look is here. Once again cannot post urls. Also, I need help with lists. In the example image I have the lists side-by-side. Normally I would use a table for this. Is there a way to do this with css? Any help would greatly be appreciated. Thanks, Shaun I've been trying for days to get this to work and nothing i do makes this stupid page extend with the content that i put in. If anyone has any idea's as to why and could point me in the right direction i would very much appreciate it. The link to the site is below, thank you in advance. hxxp://adrian.briansykes.netau.net/ So I'm trying to debug some major issues in IE6. In both my "Home" page and in my "Bio and Press" page my mainbody div and my mainbodyalt div are broken out of the three column laaout and the two column layout and pushed to the bottom of the other div columns. I am stumped as to why this is doing this, may I have some help on the subject please. Here is the link: http://www.lonniebruhn.com/sitelab/index.html Both pages validate Thank you LB Quick nagging question that's been bothering me for some time. Fortunately, I have a link to explain the problem. If you go to our web page (link below), you will see that we have a DIV section on the left side of the page which displays a mini You Tube video, along with a few other buttons: http://bit.ly/gL9sA8 The problem is that when you shrink the window, that particular div will shy away outside the bounds of the browser window. Is there anyway to not have it disappear, but at the same time, not have the main content overlap it in anyway. In other words, how would you code the DIV tag so that the following two things happen: 1. It's always in view on the LEFT side of the webpage 2. The main DIV stops against it, and doesn't overlap it if resized As you can see, if you shrink the size of the window, our main div area (div id: mainWrapper) is always going to be centered which is the most important thing. However, we want to have a left (or right) side area to display buttons like that. Here is the current code for that left sided DIV column: Code: <div style="position:fixed; margin-left: -180px; top: 75px;"> // My html content for mini You Tube video & button is here </div> The problem is that if a person has a low resolution monitor, this left hand div is out of view and never seen.....or even worse, it's partially seen and not fully displayed because it's hiding outside the bounds of the window. My goal: To have it fixed to either the outer LEFT or RIGHT side of the webpage, just along the edge of the mainWrapper as you see it now. If I can clear anything up as to what I'm trying to explain, please let me know. I hope one of you awesome gurus can point me in the right direction! Here's the url Template Any comments on the code will be very helpfull. Even if it is out of topic. In IE it looks pretty good. In firefox the border goes under the large image and the image navigation is left there naked on the body background. Hello - I'm having trouble with the layout of a site I'm working on. Here's the site in question: http://www.americanidiotsband.com/ If you look at it in anything up to 1024x768, it's fine. But if you go higher than that (say, 1280x1024 resolution), then the main (black) part of the page goes only as far down as the content that is filling it. What SHOULD happen is that the black background should span all the way to the bottom, no matter how much content is inside it... Here is a link to the stylesheet that I made up: http://www.americanidiotsband.com/styles.css I'm sure I'm doing something wrong, and I'm hoping that someone could help me correct this. Thanks in advance for any help that can be offered!... Hello, I just joined the forum, I'm new to web design although I have some experience in video post production. I'm attempting to create a layout for a website using sticky footer technique and an image for the border shadow in the main column. The sticky footer works well until I tweak the css to add the background border image, then I get this empty space in the middle of the body where the border image background should be extending to. It's probably a novice mistake but I can't get to find it. Your help would be much appreciated. The HTML: Code: <body>
<div id="nonFooter">
<div id="wrapShadow">
<div id="header">
<div id="linksHead"></div>
<div id="mainMenu"></div>
</div>
<div id="content">
<div id="bannerSlider"> (SWF file)
</div>
<div id="contentBuscador">
</div>
<div id="contentTours">
</div>
<div id="contentElite">
</div>
<div id="contentTestimonios">
</div>
<div id="contentPromos">
</div>
</div>
</div>
</div>
<div id="footer">
<div id="wrapShadowFooter">
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
The CSS: Code: html,body {
padding: 0;
margin: 0;
}
html
{
height: 100%;
}
body
{
height: 100%;
background-color: #3399cc;
}
#nonFooter
{
position: relative;
min-height: 100%;
background-image: url(_images/shadow920x1ver3.gif);
width: 920px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
* html #nonFooter
{
height: 100%;
}
#content
{
padding-bottom: 7em;
width: 900px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
clear: both;
border-top-width: medium;
border-top-style: solid;
border-top-color: #336;
}
#header {
width: 900px;
height: 100px;
position: relative;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
#footer
{
position: relative;
margin-top: -6em;
height: auto;
background-image: url(_images/shadow920x1ver3.gif);
width: 920px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#wrapShadow {
width: 920px;
margin: 0px;
padding: 0px;
height: auto;
}
#wrapShadowFooter {
width: 900px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
padding: 0px;
background-image: url(_images/footerCruiseship.jpg);
background-repeat: no-repeat;
float: left;
height: 100px;
}
All #content(area) Divs in content have the same code as this:
#contentBuscador {
float: left;
height: 100px;
width: 880px;
padding: 0px;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
Thank you, pixelMason. Edit: Problem Solved thanks to f_nietzsche Hi, I have a site with a left navigation bar (which is fixed width, and has a background colour that must stretch full screen from top to bottom of the page). The site is: http://67.18.220.222/~duoboots/2005/z.html Stylesheet: http://67.18.220.222/~duoboots/2005...s/style2005.css As you can see, the left navigation menu stops once the content within the div is displayed. It does not stretch to the bottom of the screen. (say if you're on 1024 x 768 resolution) Note: this varies according to the main (right) content. If the main content was shorter than the menu bar - it would work fine. The menu bar has a min-height of 100% which means the background applies to the size of your screen. However, if the main content height is greater than that of the menu bar - then the menu bar will not adapt, but the background simply stops. Is there a workaround for this? With tables, this could easily be achieved because the background colour of one cell is stretch until the end of the table, and not the content within the cell. However, I'd like to do this with CSS. Here's some CSS: Code:
body, p {
color:#666666 ;
font-family: Verdana, Arial ;
font-size:7.5pt ;
font-weight:normal;
}
body {
height:100%;
margin: 0px;
background-color: #2F201E;
}
#container {
width: 968px;
height:100%;
}
#nav {
width: 201px;
border-right: 3px solid #FFFFFF;
background: #8D603B;
float: left;
min-height:100%;
}
I've tried switching "min-height" and "height" but they don't seem to do what I want.... if anyone could help me out it would be MUCH appreciated! Thanks a lot! I put together a new web layout with divs and css at www.verbazon.net/index.php. I have a php include for that main content box text that shows up, and as you can see, it screws up the content box images separating them. If anyone can help me fix this I appreciate it. My Css file is located at www.verbazon.net/style.css Hi, I guess I can't post the URL of my test page with the problem which would make it a lot easier to explain. I don't quite see why anyone would want to re-create the page from pasted code when they could just look at the actual page but oh well. Anyway, I'm working on a website that is supposed to look like a folder -- it is composed of a top graphic, content area, bottom graphic, all wrapped in an outer div. It looks like it ought to in Firefox. In IE there is a gap between the top graphic and the main content div. I've tried making sure all relevant margins, padding etc are set to 0. I can't put the top graphic inside the content div (fixed a similar problem this way on another project) as it is wider! Here is the page code: Code: <%@ LANGUAGE=JScript %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <link rel=stylesheet type="text/css" HREF="kahn.css"> <title>Crollard Kahn</title> </head> <body> <div class="Outer"> <img src="images/top2h.png" style="border: none; margin: 0; padding: 0;"> <div class="Main"> <div class="InnerMain"> <div style="text-align: left; padding: 10px; margin: 0 0 10px 0; background-color: #5C0D10; color: ffffc2; font-size: medium;"> <!--<img src="home_selected.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0">--> Top navigation bar here... </div> <div class="Left"> <div class="InnerLeft"> Left navbar<br>here<br>...<br>...<br>...<br>... </div> </div> <div class="Right"> <div class="InnerRight"> <h1 class="Header1 Top">Header</h1> <p>Text.</p> <p>More Text.</p> <p>More Text.</p> <p>More Text.</p> </div> </div> <div style="clear: both; margin: 0; padding: 0;"></div> </div> <!-- InnerMain --> </div> <!-- Main --> <img src="images/footer2.png" style="border: none; margin: 0; padding: 0;"> </div> <!-- Outer --> </body> </html> Here is the stylesheet: Code: BODY { background: #868B6B; margin: 0; padding: 0; text-align: center; font-family: MS Sans Serif; color: black;}
DIV.Outer { width: 980px; background-color: #868B6B; margin-left:auto; margin-right:auto; margin-top: 0;}
DIV.Main { width: 950px; background-color: #ffffc2; padding: 0 0 10px 0; margin-left:auto; margin-right:auto; margin-top: 0;}
DIV.InnerMain { width: 918px; background-color: #ffffd9; padding: 0 0 10px 0; margin-left:auto; margin-right:auto;}
DIV.Left {float: left; width: 220px; text-align: center; padding: 0 0 0 0; }
DIV.InnerLeft {width: 212px; margin-left: auto; margin-right: auto; padding: 0 0 0 0;}
DIV.Right {float: right; width: 696px; padding: 0 0 0 0; text-align: center; border-left: 1px solid #5C0D10;}
DIV.InnerRight {width: 668px; margin-left: auto; margin-right: auto; padding: 0 0 0 0; text-align: left;}
.Header1 { font-weight: bold; font-size: x-large; font-family: Times New Roman; color: #5B0D0F; font-variant: small-caps; }
.Header2 { font-weight: bold; font-size: large; font-family: Times New Roman; color: #5B0D0F; font-variant: small-caps; }
.Question { font-weight: normal; font-style: italic; color: black; font-variant: small-caps;}
.Answer { color: black; }
.CK { font-variant: small-caps; }
.Topic { font-weight: bold; color: black; }
.TopicLink { font-weight: bold; color: black; text-decoration: underline; }
P.List { margin-bottom: 2em; }
.Top { margin: 0; } /* weird firefox blank space otherwise */
I'm fairly new to CSS, but am trying to leave tables behind as much as possible. Can anybody please tell me how to fix this? Regards, Elisabeth OK not only am I having problems giving a background image to individual cells. I have a problem where I cannot give the whole document the same background. I mean the background appears but one table (tab2) and one cell (td1) do not show the image that should span their areas too. Ive included the css, I think I may be some suspisious code. If you could please have a look for me. Thanks (see attached) Hi All, I think the following is a css problem that I have tried to solve but without success and cause a markup validation error that I can't get rid of. Here you can see the original problem simonedegan.net/index_III.html which I tried to correct (see he simonedegan.net) but when I go to validate the code I have the following errors: Line 92, Column 24: ID "flashcontent" already defined. <div class="style4" id="flashcontent">This SlideShowPro photo gallery requires t Line 88, Column 24: ID "flashcontent" first defined here. <div class="style3" id="flashcontent"> Originally I changed the padding from 15px to 200px to allow a proper alignment of the words in the parent pages (e.g. simonedegan.net/news.html). If it is the case how can I create a 'rule' with the padding of 15px on the left only for the main page where the flash instance is (i.e. simonedegan.net) without affecting the parent pages? Many thanks for helping P.S.: my apologies to the moderator for the links. I did not know how to post the questions without URLs so I removed the initial http://. Again my apologies. This may be a stupid question, but is there an easy way to make a div have an image on the left and content on the right... BUT then also make sure that, if the image's height is larger than the div, the div still covers the bottom. I know you can use a "float killer" div, however if I want a float killer on EVERY div class of this type, is there some easy way to tell the css to ALWAYS include code at the bottom? Also what method would a good coder use to vertically align the content on the right so that there isn't a lot of empty space? Thanks is there a way to have a different background image in the .content area on different pages? this is the site: http://bradleyrose.net/WaterStreetRestaurant/pages/catering&parties.html cobble-stone-road-4.jpg is used on all pages, is there a way to use a different image on some pages? hi, i successfully managed to text wrap content around an image that was floated to the left (within a div element).... however, i now want an image with a caption and thus i want to text wrap the content around the div element containing the image and caption which is floated to the left... however, i cannot work out how to do this and performing a google search has not helped - can someone help me here? Hi http://www.sential.co.uk/releases.html http://www.sential.co.uk/style.css the box model is based on the thrashbox it works fine on the other pages, except the releases page where there is an image at the bottom of the box. It has the incorrect alignment on the left border. And only in IE Any help would be very appreciated. -Luke This is what I would like to accomplish (though, vertical scrolling..) http://www.csszengarden.com/?cssfile=037%2F037%2Ecss Must look at it with mozilla, btw.. doesn't work in IE. I can't figure out how the hell that person did that. Here is what I have so far... Forgive all the extra tags I don't need. I've been trying everything I can think of... h1{ position: absolute; top: 0px; left: 0px; z-index: 99; background-image: url(top.png); background-repeat: no-repeat; background-attachment: fixed; background-color: transparent; height: 358px; width: 800px; visibility: visible; background-position: top left;} h2{ position: fixed; top: 0px; background-image: url(sidestar.png); background-repeat: repeat-y; background-attachment: scroll; height: 6000px; width: 40px; z-index:1;} H1 is the code for the image I want to be on top, H2 is the "body" I want to disappear behind the image. When that is loaded, the image stays fixed in location, but the body scrolls on top of it, eating the image from the bottom. Any ideas what is wrong? If you have firefox, you can check out what is happening he http://www.fatboyraceworks.com/webnik/ |
|||||||