I want to implement a "center frame" like a narrow and tall page in the center of my webpage.
And I want to make sure it has 200 pixels of space both in left and right. The following css rule works for left, but right is nearly on the right of body.
div#centerframe
{
background:rgba(255, 255, 255, 0.85);
box-shadow:0em 0.5em 2em 0.3em;
margin-left: 200px;
margin-top: 200px; /* top works too */
margin-right: 200px;
float:left; /* because I want it to expand with its content */
padding-top: 90px;
padding-bottom: 90px;
padding-left: 90px;
padding-right: 90px;
}
I made a fiddle to show you the bad behaviour, but it behaves as I want in this fiddle :
http://jsfiddle.net/UMscz/
however, with the same dom, it doesn't work on my site.
the body rule is like this :
body
{
position:relative;
width:100%;
height:100%;
padding:0;
margin:0;
overflow:auto;
}
and my dom is like
<body>
<div id='centerframe'>
<div id='article_wrapper'>
</div>
</div>
</body>
So how can I make sure that '#centerframe' has a certain pixels of space in right and left ?
The reason I'm trying to do is I want to show fixed size ads on the page.
Thanks !
Edit :
And I'm sure that nothing in the content "pushes" it to stretch. I don't set any width rules in the content so that it resizes according to centerframe and its padding.
Edit 2:
I spotted the problem. But it is still strange. I had some elements that pushes its width, in index.php (inline style). But when I click to a link, and go to show_article.php, the width of the centerframe remains as in the index.php.
So when I removed the width rule in index.php, it also fixed the width in show_article.php, even though the width rule was only in index.php.
So, does the css rule remain when going to another page? It shouldn't, right ?
this will work :
div#centerframe
{
background:rgba(255, 255, 255, 0.85);
box-shadow:0em 0.5em 2em 0.3em;
margin-left: 200px;
margin-top: 200px; /* top works too */
margin-right: 200px;
padding-top: 90px;
padding-bottom: 90px;
padding-left: 90px;
padding-right: 90px;
max-width:100%;
}
(remove float left and add max-width)
you can also wrap your center div with 2 fixed size div.
I guess you're using a Framework like drupal or Joomla.
View source of show_article.php from your browser (ctrl+u), that must contain index.php header with your css rules
Related
I am trying to achieve a scrolling body with fixed header and fixed sidebar. I think I am almost there except that the body scrolls on top of the header. I wish I could simply increase the z-index of the header in relation to the body but this doesn't work since the header is mostly transparent.
Here is the site: link
Any ideas?
Thanks
Edit: I should clarify that I want the content to be invisible as it scrolls underneath the header, not simply as a layer beneath it.
Use the same background image for your body and header, but with background-position:fixed.
This way, the header will have opacity for the content to scroll beneath and be hidden. Using fixed position will ensure that the two images appear seamless.
On a side note, I am unable to view the entire sidebar on your site, you may want to reconsider using such a rigid layout.
Here is your code:
#thebody {
display:inline-block;
position:relative;
width:984px;
margin-left: 0px auto;
margin-right: 0px auto;
font-size:24px;
text-align:center;
height:100%;
z-index:-1;
}
#theheader {
display:inline-block;
font-size:26px;
width: 984px;
margin-left: 0px auto;
margin-right: 0px auto;
background-color:none;
clear:both;
}
The way z-indexs work is, anything to be included in the layering needs to also have an z-index set. So, in your code right now, only #thebody is set. Add this to #theheader:
#theheader {
display:inline-block;
font-size:26px;
width: 984px;
margin-left: 0px auto;
margin-right: 0px auto;
background-color:none;
clear:both;
z-index: 10; /* addition */
}
This places #theheader over the #thebody. Good luck, and let me know if you have questions.
I'm creating a div which has to have a close button in the upper right corner just like in the image
image http://rookery9.aviary.com.s3.amazonaws.com/4655000/4655386_f01b_150x250.jpg
The first image was made in photoshop. I'm trying to do the same but with CSS. "Fechar" is the close button (in Portuguese). What is the better way to properly position it without workarounds, with clean CSS and Web Standards?
Here is my code: http://jsfiddle.net/wZJnd/
This is as far as I could reach.
I would use absolute positioning inside a relatively positioned #header:
HTML
<div id="header">
<h1>Your Title</h1>
Close
</div>
CSS
#header {
width: 700px;
height: 200px;
position: relative;
text-align: center;
background: #000 url(the-logo.png) no-repeat 30px 10px;
}
#header .close {
position: absolute;
top: 20px;
right: 20px;
}
This will cause the a.close link to use the #header as its coordinate system and position it 20px from the top and right edge.
In my experience padding, margins and float are more sensitive to rendering inconsistency and font size changes than positioning. As a result, I use position whenever possible.
You could do a :
img.close {
float:right;
margin:25px 25px 0 0;
}
I would work with div wrappers around the img
So you would have a div for your header "div.header" that would contain these div :
div.logo : The logo on the left containing an img tag;
div.title : The title of the page;
div.close : The close button that would contain your img tag.
I better like using the padding than the margin attribute. I think it works better for compatibility purposes.
I've been searching through forums to find a solution for the problem I'm facing and couldn't find any. So here I am, again, asking for remedy.
I have this page which encase personal profile form. That form is enclosed in page container div and is quite long that it requires main scrollbar in order to see those hidden. And there's a footer section at the bottom of the page where copyright statements are displayed.
My problem is I can't find a way to make my page container div to stretch along with the body element. I've applied height: inherit to that div but still it refused to stretch so that it covers till the border of the footer section. Now, there is big gap between the footer and that div filled with body background color. Here's a screencap for better understanding.
screencap
/*Form container*/
#form_container{
width: 600px;
background-color:#FDAE80;
margin-top: 15px;
margin-left: 110px;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
}
body{
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
background-color: #683468;
}
/*Page Container*/
div.mcontainer{
width: 1032px;
height: inherit;
background-color: #ffffff;
}
/*Footer Section*/
div.footer{
width: 1032px;
height: 80px;
border-top: 1px solid #683468;
margin-top: 10px;
text-align: center;
font-family: Arial;
font-size: 12px;
color: red;
position: relative;
bottom: 0px;
background-color:black;
}
Any help would be appreciated.
EDIT Just to clarify, Footer section is inside page container div. Here my html - htm
Try adding a clearing element as the last item in your page container, after all the form elements. Could be <br clear="all" /> or a div with style clear:both.
A better idea - remove the height: inherit; from your mcontainer style. This fixed it for me.
try adding html to the height to:
html, body {
height: 100%;
}
as discussed on A List Apart: http://www.alistapart.com/articles/footers/
Try to use overflow: hidden; on div.mcontainer.
If you have floating elements in your container, try placing clear-both-div at the end of the container div:
<div id="mcontainer">
...code
<div style="clear:both;"></div>
</div>
I had the same problem, now I am using java script (jQuery) to solve it.
In my case it was the div for the menu bar and I calculated the height from the main container plus the height from the header.
$(document).ready(function(){
var h = $(".main").height() + $(".main").position().top
$(".lmenu").css({height:h+"px"})
$(".rmenu").css({height:h+"px"})
});
Right now it seems to make more sense to use the height of the body:
$("body").height()
If there is a version without javascript, it would be interesting to know. But meanwhile this could be a workaround.
Maybe you should try adding: clear: both to footer class
I've found a lot of similar questions, and tried out several solutions (including some of the so-called "holy grail" CSS layouts), but they don't quite do what I need.
I have a containing div (a CSS containing block) with id right. Inside it on the left side, I want a fixed-width div (a splitter bar, but it doesn't matter what it's being used for; id splitpane); on the right, filling the rest of the space, another div (id right-box below).
I've tried making the two inner divs display: inline-block (with vertical-align: top), setting the left one to width: 3px, but then there's no way to set the right to have width 100% - 3px. I've also tried using the float: left/margin-left: -100%/margin-left: 3px trick, but it has the same problem: the 100% plus the 3px overflows the parent containing block and causes a scroll bar to pop up. (Of course, it's not the scroll bar per se that's the problem; I could use overflow: hidden to remove it, but then content on the right would be truncated.)
Currently I'm using width: 99.5% for the right div, but that's a terrible hack (and is subject to overflow depending on screen width). It looks a bit like this:
<div id="right"><div id="splitpane"></div><div id="right-box">
...
</div></div>
With CSS as follows (float version, but the inline-block version is similar):
#right {
display: inline-block;
vertical-align: top;
height: 100%;
width: 85%; /* this is part of a larger div */
}
#right-box {
width: 99.5%; /* stupid hack; actually want 100% - 3px for splitter */
height: 100%;
}
#splitpane {
float: left;
width: 3px;
height: 100%;
background: white;
border-left: solid gray 1px;
border-right: solid gray 1px;
cursor: e-resize;
}
Is it even possible to do this? This is for an internal app., so solutions only need to work in Firefox 3 (if they are specific to FF3, though, preferably it's because the solution is standards-compliant but other browsers aren't, not because it's using Firefox-only code).
DIVs are the wrong element type for this since they don't "talk" to each other. You can achieve this easily with a table:
<table style="width:200px">
<tr>
<td id="splitpane" style="width: 3px">...</td>
<td id="rightBox" style="width: 100%">...</td>
<tr>
</table>
The 100% will make the rightBox as wide as possible but within the limits of the table.
This is possible. Because block level elements automatically expand to take up any remaining horizontal space, you can utilise a block level element next to an uncleared floated element with your desired width.
<style type="text/css">
div {
height: 100px;
}
#container {
width: 100%;
}
#left {
background: #FF0;
}
#splitpane {
position: relative;
float: right;
background: #000;
width: 3px;
}
</style>
<div id="container">
<div id="splitpane"></div>
<div id="left"></div>
</div>
See http://jsfiddle.net/georeith/W4YMD/1/
why you didn't use margin-left (since it was float layout) on right box?
so no need to create a splitter div...
#right{
width:200px; /*specify some width*/
}
#rightbox{
float:left;
margin-left: 3px; /*replace the splitter*/
/*margin: 0 3px; /*use this to give left & right splitter*/ */
}
yeah something like that, i hate empty div, it's not semantic and it's like putting a splitter on the "old" table way
If the div #right-box is only going to contain non-floated content it might be an idea to just put the content inside #right instead and let it wrap around the floated #splitpane.
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
.product{
display: inline;
float: left;
}
So, how can I fix this?
Add overflow:auto; to .product1
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
Assuming #John Millikin is correct, the code
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
Here's how the class should look:
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
This looks like a job for clearfix to me ...
Try the following:
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
display:inline
float:left
is your problem
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
Update: After viewing your link Your height issue as displayed, is because the floats are not being cleared.