|
CSS - Picture Outside Main Box
I am trying to add a border to my pictures. I read a tutorial about it but however in firefox it escapes from the box. In IE it looks fine. Has anyone had this problem before? Any tips on fixing it?
Thank you here is the link http://www.conceptofgravity.com/test/pictures_test.html Similar TutorialsI am using this: http://bonrouge.com/3c-hf-fluid.php At that code stands the #main div starts off at minimum height and expands with content. The #clearfooter div stops it covering the footer when it expands. However. I need the #main div to start off filling the gap between the header and footer rather than it being an expanding element. The reason is that I need a background to cover the area between #header and #footer. I have run out of ideas on how to accomplish this. The CSS I have created so far is: PHP Code: html { height: 100%; } body { margin: 0; padding: 0; height: 100%; background-image: url(../images/2500px_height_bg.gif); font-family: Verdana, Arial, 'Times New Roman', Serif; text-align: center; } #wrap { min-height: 100%; } * html #wrap { height:100%; } #contain_header { height: 20px; text-align: center; padding: 0; } #header { margin:0 auto; width: 760px; height: 20px; background-image: url(../images/header_bg.gif); line-height: 20px; vertical-align: center; } #clearfooter { clear: both; height: 21px; overflow: hidden; background-color: red; } #contain_footer { height: 21px; background-image: url(../images/contain_footer_bg.gif); background-repeat: repeat-x; margin-top: -21px; text-align: center; padding: 0; } #footer { margin:0 auto; width: 760px; height: 21px; background-image: url(../images/footer_bg.gif); line-height: 21px; vertical-align: center; z-index: 1000; } #wrap_content { position: absolute; width: 100%; min-height: 100%; margin-top: -21px; padding-bottom: 31px; padding-top: 20px; background-color: transparent; } * html #wrap_content { height: 100%; } #main { position: relative; top: 0px; left: 0px; height: 100%; background-color: white; } * html #main { height: 1px; } Any suggestions welcome Hello, My site contains a basic slideshow that is encapsulated in a "main" div tag. For some reason I cannot center it on the page! I can move it back and fourth but I cannot center it. Can someone please help. www(dot)katieandconrad(dot)com Regards, CB Thanks for taking the time to read my question. I have a MainBox that I have all my page in. <div id="MainBox"></div> I had a height set and both IE and FF displayed ok, but if the content was higher than the box, FF expanded and IE didn't. So I took the height off and IE expaned and FF shrunk to nothing. What's up with that? I've attached the code and the one pic. What can I do to get them to display the same? right now all files go in the same folder. Thanks, Brad I 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! 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 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. 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. Hello I'm sure this should be easy can has been done but I can't find an example that doesn't break in some way. I want to position and extra column outside and to the right of the main centered content div. The purpose of this is to place extra less important information which can / will be hidden for 1024 resolutions. The problem I have is that either of my methods break. One option was to position the item 100% from the left and then give it a negative left margin. But this pushes the box into the main content when the resolution comes down to 1024. The other was to put it inside the main content, float it right and give it a negative right margin to "drag" it out of the main div. The problem with this one is that I get a horizontal scroll bar when reducing to 1024. I want the column to be hidden if the res is 1024 or less. Here is the CSS: Code: <style>
* {
margin: 0px;
padding: 0px;
}
#Wrapper {
width: 1000px;
min-height: 500px;
margin: 0 auto 0 auto;
background-color: #C0C0C0;
}
#RightColumn {
width: 150px;
min-height: 400px;
margin-right: -150px;
float: right;
background-color: #000000;
}
</style>
And here is the HTML: Code: <body> <div id="Wrapper"> <div id="RightColumn"></div> </div> </body> It's the basic stuff but I want to get it right before I add anything else. Thanks for an help or suggestions Doc 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 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 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, This is probably an easy question, but I can't seem to find the answer. I have website created and linked to a stylesheet that controls the way all my links display. On one page I have a link that I want to display differently. So I am using the span tag. Now I have the color correct, just not sure how I put in the active link and visited link within the span tag, etc... Heres what I have done so far. <a href="index.html"><span style="color : white; ">Index Page</span></a> Hope someone can help. Thanks Hi, I have created a main div and that div have a border color. Know I want that every thing to be within that main div container except footer. But when I put multiple div and use especially float or position the multiple div exceed the border of main div.thing Know how can I put every thing within that main border. I am pasting the css and HTML code. Immediate help appreciated. CSSCODE; #maincotainer { margin-left:auto; margin-right:auto; width:900px; } #containerwithborder { border:1px solid #CCCCCC; width:900px; } #header { margin:0; } #content { padding:1px; clear:both; } #footer { clear:both; margin-right:auto; margin-left:auto; height:78px; width:900px; background-image:url(images/footerbackground.jpg); } #box1 { position:relative; float:left; width:614px; } #box2 { margin-top:30px; position: absolute; float:left; margin-left:630px; } .manu { margin-left:2px; clear:both; position:relative; float:left; background-image:url(images/manuback.jpg); width:235px; height:307px; } .manuitem { padding-top:28px; } .manuitem ul { margin:0; padding:0; } .manuitem ul li { display:block; } .manudevider { background-image:url(images/manudevider.jpg); height:2px; margin-bottom:10px; margin-top:7px; } .errow_spacing { padding-right:10px; padding-left:20px; } #flashportion { position:absolute; margin-left:265px; float:left; width:345px; height:307px; } #servics_manu { position:relative; float:left; width:238px; margin-top:5px; } .serviceslist { padding-left:40px; padding-top:10px; } .serviceslist ul { margin:0; padding:0; } .serviceslist li { list-style-image:url(images/errow2.jpg); text-decoration:underline; } #welcome { margin-top:10px; position:absolute; float:left; margin-left:250px; width:630px; } 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/ 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;
}
On the home page of my site (http://awsmiedev06.awecomm.com), there is a large clickable area for Life Insurance, Health Insurance & Disability Insurance. However, when you get into the internal pages of the site, the clickable area is much smaller, making it harder to click on the 3 Insurance Navigation items. You have to almost click on top of the words to get the arrow to turn into a hand so you can click on it. Why is this? Why is the clickable area large (and perfect) on the home page but not on the internal pages? This is the code for the navigation items: Code: .cl2a /*disability*/
{
background-image:url('images/awh-hover.png');
background-repeat:no-repeat;
width:349px;
height:42px;
float:right;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#1e5aa2;
padding-top:9px;
display:block;
margin-left:-24px;
}
.cl2d /*disability*/
{
background-image:url('images/cl_2.jpg');
background-repeat:no-repeat;
width:349px;
height:42px;
float:right;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
margin-left:-4px;
}
a.cl2:hover /*disability*/
{
width:346px;
height:42px;
float:right;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color :#163752;
padding-top:9px;
display:block;
margin-left:-2px;
}
.cl3a /*life*/
{
background-image:url('images/aws-hover.png');
background-repeat:no-repeat;
width:295px;
height:42px;
float:left;
margin-left:-13px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#1e5aa2;
padding-top:9px;
display:block;
}
.cl3d /*life*/
{
background-image:url('images/cl_3.jpg');
background-repeat:no-repeat;
width:295px;
height:42px;
float:left;
margin-left:-13px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}
a.cl3:hover /*life*/
{
width:295px;
height:42px;
float:left;
margin-left:-13px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}
.cl4a /*health*/
{
background:url('images/awd-hover.png') no-repeat top left;
width:328px;
height:42px;
float:left;
margin-left:-5px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#1e5aa2;
padding-top:9px;
display:block;
}
.cl4d /*health*/
{
background-image:url('images/cl_4.jpg');
background-repeat:no-repeat;
width:328px;
height:42px;
float:left;
margin-left:-5px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}
a.cl4:hover /*health*/
{
width:328px;
height:42px;
float:left;
margin-left:-5px;
text-decoration:none;
font-family:Arial;
font-weight:bold;
font-size:24px;
text-decoration:none;
color:#163752;
padding-top:9px;
display:block;
}
Any help will be greatly appreciated!!! 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! I'm trying to place some content inside a main "box", and I can't seem to get the length of the "box" div to expand to fit the content inside it. It seems like the DIVs inside aren't actually inside it. The only way I can make it fit is if i actually specify a "height" on the first DIV. <div style="width:700px; background-color:#000000; border-width:.1em; border-style:solid; padding:2em; margin-left:auto; margin-right:auto; margin-top:2em; border-color:#999999; height:1000px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color:#FFFFFF;"> <div style="width:300px; float:left; margin:2em; clear:both;"><center><img src="../images/halihomeless.jpg" /></center> <br /><center><img src="../images/luvhali.jpg" /><br /> <div style="width:250px; margin-top:1em; background-color:#121212; padding:.5em; padding-top:1em; padding-bottom:1em; text-align:justify;">placeholder text </div> </div> <div style="width:300px; float:right;margin:2em;"><center><img src="../images/haitihomeless.jpg" /></center> <br /><center><img src="../images/luvhaiti.jpg" /> <div style="width:250px; margin-top:1em; background-color:#121212; padding:.5em; padding-top:1em; padding-bottom:1em; text-align:justify;">placeholder text </div> </div> <div style="float:right; width:650px; margin-bottom:2em; right:52px; top:15px; padding:2em; color:#CCCCCC; font-size:10px;">IMAGE" align="right" border="0" / ></a><p>luvHALI and luvHAITI are ministries of Deep Water Church in Halifax, Nova Scotia, Canada.</p><p>To donate to either project, please visit <a href="placeholderforcanadagives">Canada Gives</a>.</p><p>If you wish, you can visit Deep Water Church</a> for more information about who we are.</p><p>1657 Barrington Street | Suite 536 | Halifax, NS, Canada | B3J 2A1 | 902.880.4266</p></div> </div> Thanks so much for any help! Robin this should be simple, but i just don't seem to have the hang of css yet what i want right now is a div for the links and stuff at the top, a bar on the left with the content to the right, and then the footer for more links and stuff, basically something like this site http://www.c21homeservices.com/common/mkttrends.php?mtt=selling only using css the man problem right now is that i can't get the content box positioned so that it has a 5px border around it or something so you see its parent box as a border and as more content is put into it the page justs gets longer at the content box with its parent moving with it maybe just looking at what i have will help more the HTML Code: ...... <body> <div id="all"> <div id="head"> Head Section </div> <div id="main"> Bar <div id="content">Content Goes Here</div> </div> <div id="footer"> footer </div> </div> </body> </html> and the css Code: body {
background-color:#ff0000;
}
#head {
height:200px;
}
#all {
margin-left:3%;
margin-right:3%;
background-color:#a0a0a0;
}
#main {
background-color:#ff00ff;
}
#side_bar{
background-color:#99ff99;
}
#content{
position:relative;
float:right;
width:80%;
right:10px;
background-color:#ffffff;
padding:5px;
}
#footer {
height:200px;
}
those funky colors are so i can see the divs |
|||||||