I have a white container on top of the bg but it stops even though min-height is set as 100%, heres the CSS for this container and in bottom I have included image of what happens when I scroll to the bottom:
Container where post is:
Yellow Bg:
.home-body {
background-color:#EAC117;
height: 100%;
.home-main-content {
width:800px;
min-height: 100%;
position:absolute;
overflow:hidden;
margin-left:56.5%;
left:-500px;
top:51px;
border-left:1px solid black;
border-right:1px solid black;
background-color:#fff;
background-repeat:repeat-y;
.home-post-echoed-container {
width:400px;
position:absolute;
margin-left:50%;
left:-200px;
top:200px;
overflow:hidden;
}
.home-echoed-posts {
width:600px;
overflow:hidden;
left:-98px;
position:relative;
background-color:#fff;
margin-bottom:-5px;
border-top:1px solid;color:#0a527e;
border-left:1px solid;color:#0a527e;
border-right:1px solid;color:#0a527e;
}
.home-echoed-posts-post {
margin:10px;
color:black;
}
.home-echoed-posts-email {
margin:10px;
color:black;
}
.home-echoed-posts-date {
margin:10px;
color:black;
}
You are doing it wrong.
To center something you should use (instead of absolute positioning):
.foobar{
margin: 0 auto;
width: 800px;
}
As for "why comments are not expanding the container", it is hard to guess without code, but there are two reasonable possibilities: positioning or floats. There nothing i can do about it. But if they are floated, then easies is to have container with following css:
.container{
overflow: hidden;
}
It is a bit counter-intuitive, but works like charm. You can read more about it here.
Update: and read this article too.
Update 2:
Looks like it is the worts case scenario. You are using positioning .. for everything. YOu really need to learn how to use floats.
.home-post-echoed-container {
width: 600px;
margin: 0 auto;
padding-top: 200px; // im guessing what top:200px was doing
overflow:hidden;
}
.home-echoed-posts {
width:600px;
float: left;
background: #fff;
margin-bottom: -5px;
border: 1px solid #0a527e;
border-bottom: 0;
}
Something like this. But I'm really just guessing.
html, body
{
height:100%;
}
Make sure you include that in the top of your CSS script, else setting .home-main-content to min-height:100%; won't work, because to CSS, if undefined elsewhere, 100% is simply the height of the current div.
Also ensure that you have that same property set if your .home-main-content is surrounded by another div.
Related
I'm trying to develop my first responsive website but I'm having some trouble (of course).
I need an element (sort of a menu) to contain 4 row of elements and each element has an image to the left and some text to the right. Now, the issue I'm having is that I can't seem to be able to make the elements center vertically correctly. I've tried several methods that seem to work for a lot of people so I thought I'ld ask if anybody knows why nothing seems to work for me.
This is what the image CSS looks like:
.tablaBuscadorElementos > img {
position: relative;
width: 20px;
height:20px;
left:0;
right:0;
top:0;
bottom:0;
margin:0 auto;
float:left;}
Here is the fiddle: http://jsfiddle.net/mampy3000/9JZdZ/1/
Appreciate any help!
since your elements are inline-block , you can inject an inline-block pseudo-element 100% height and vertical-align:middle it to img and span : DEMO
basicly (+ below update of your CSS):
.tablaBuscadorElementos:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
.tablaBuscadorElementos {
height:22%;/* instead min-height so value can be used for pseudo or direct child */
border: 1px solid black;
padding:0px;
width:100%;
}
.tablaBuscadorElementos > span {
font-size:20px;
width:80%;
vertical-align:middle; /* align to next inline-block element or baseline*/
border:1px solid black;
display:inline-block;/* layout*/
}
.tablaBuscadorElementos > img {
vertical-align:middle; /* align to next inline-block element or baseline*/
width: 20px;
height:20px;
}
.tablaBuscador, .tablaBuscadorElementos{
display:block;
}
.tablaBuscadorElementos:before {
content:'';
height:100%;/* calculated from 22% parent's height */
display:inline-block;/* layout*/
vertical-align:middle;/* align to next inline-block element or baseline*/
}
You can do this by adding this css to .tablaBuscador
position: fixed;
top: 50%;
margin-top:-100px; /* half of height */
More info here: How to center a table of the screen (vertically and horizontally)
The newer option would be to use calc() but you might run into browser support issues.
position: fixed;
top:calc(50% - 100px).
Here are which browsers support calc(): http://caniuse.com/#feat=calc
Your code needs a major tune-up. You are floating elements, using vertical-align on them, positioning them relatively with left, right, top, and bottom set to 0. None of these make any sense. Here's a cleaned up fiddle: http://jsfiddle.net/jL2Gz/.
And here's a tuned up code:
* {
padding: 0;
margin: 0;
}
body {
height:100%;
}
.tablaBuscador {
font-family: "Maven Pro", sans-serif;
height:200px;
width:40%;
}
.tablaBuscador > div {
border: 1px solid black;
padding: 10px 0;
}
.tablaBuscador > div > span {
font-size:20px;
width:80%;
border:1px solid black;
}
.tablaBuscador > div > img {
width: 20px;
height: 20px;
}
.tablaBuscador > div > * {
display: inline-block;
vertical-align: middle;
}
I have couple of rectangle boxes aligning in 1 column straight and each boxes has a content in it. Previously I have this below:
.frmPhases
{
width:800px;
border:solid 2px #CCC;
background: #EEE;
height:auto;
padding:14px;
position:relative;
margin-bottom:50px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
It displays just fine but with 1 flaw, its width isn't consistent. So every new boxes come in, I have to set its width manually base on its content's maximum width. (This requires id, which would make my CSS code REALLY long)
Now I improved the code to this:
.frmPhases
{
width:auto;
display:inline-block;
border:solid 2px #CCC;
background: #EEE;
height:auto;
padding:14px;
position:relative;
margin-bottom:50px;
margin-top: 50p
margin-left: auto;
margin-right: auto;
}
Now it has consistent width, but the rectangle boxes isn't centralized. The only way to centralize it if I would to manually key in the margin-left, which looks fine but on different resolution it does not. Any idea how to centralize it?
Currently trying to build a gallery page for a client's website and I've noticed that a simple float:left does not give me what i'm looking for.
What I want is for the images to line up perfectly regardless of their size as the images that I have supplied are all in different sizes.
.gallery img {
margin:0 !important;
border:1px solid white;
width:33%;
float:left;
}
That's the code that i'm using & the website is responsive.
use height: auto; and max-width: 100%;
.gallery img {
margin:0 !important;
border:1px solid white;
height: auto !important;
max-width: 100%;
float:left;
}
I have a fixed width layout I am trying to make responsive, I have looked at the code and #wrapper div isn't adjusting to full width when I use the different views in Dreamweaver.
The footer I get a scroll bar and the footer, slider, top-bg are all not going full width. But the content area does?
I changed the wrapper to 100% thinking that this would adjust everything within the page to move full screen but that hasn't worked?
CSS:
/* Containers */
#wrapper {
width:100%;
}
#top {
width:900px;
margin:0 auto;
}
#top-bg {
background-color:#03274B;
width:100%;
overflow:auto;
}
#topnav {
width:900px;
margin:0 auto;
}
#topnav-bg {
clear:both;
background-color:#072C53;
width:100%;
padding:15px 0;
border-top:2px #2B4D71 solid;
border-bottom:2px #2B4D71 solid;
}
#banner-bg {
width:100%;
background-image:url(../images/bg/blue-bg.fw.png);
background-repeat:repeat;
}
#banner {
padding:0px 0;
width:900px;
margin:0 auto;
}
#subbanner {
width:900px;
margin:0 auto;
padding:30px 20px;
}
#subbanner-bg {
width:100%;
}
#subbanner h1 {
font-size:48px;
margin-bottom:20px;
padding-bottom:20px;
border-bottom:1px #000 solid;
}
#content-wrap {
width:900px;
margin:0 auto;
}
#leftside {
width:425px;
margin-right:50px;
float:left;
}
#leftside h2 {
padding-bottom:10px;
margin:20px 0px 10px 0px;
border-bottom:1px #000 solid;
}
#rightside {
width:425px;
float:right;
}
#rightside h2 {
padding-bottom:10px;
margin:20px 0px 10px 0px;
border-bottom:1px #000 solid;
}
#content {
}
#content-bg {
}
#content-wrap {
}
#footer {
width:100%;
margin:0 auto;
padding:20px 0;
}
#footer-bg {
clear:both;
background-color:#03274B;
width:100%;
}
#footer p {
}
Without posting your HTML markup we have to make some assumptions. I also suggest you do not use the design views in Adobe Dreamweaver as they bear very little relation to how a browser will render your page, I suggest you press F12 (Windows) or option + F12 (Macintosh) to view your page in your preferred browser.
The CSS you posted appears a little broken, I am assuming that in areas such as top {...} you actually have #top {...} as top is a non-standard element.
That being said you still have areas in your CSS such as:
#top {
width:900px;
margin:0 auto;
}
The element with id="top" will only ever be 900px wide despite the size of it's parent element (possibly id="wrapper").
Let's assume you have markup similar to the following:
<div id="wrapper">
<div id="top">
<div id="top-bg">
</div>
</div>
</div>
Despite the fact that #top-bg has width: 100% it will only ever be 900px wide as it is a child of #top and width percentages are relative to the parent container's width.
I know that this has been addressed in many places, but the template I modified was a bit quirky and I believe that I know what is causing the problem. I just don't know what to do to fix it.
The template sets the left and right borders to 200px. I think what it needed to do was make 2 more columns instead of a border that size. I want the partial grey lines on the sides of the page to go all the way down but they don't. I know it's because the content doesn't go all the way down, but for the life of me I can't figure out what to do with this. Should I just start this all over from scratch?
I apologize ahead of time for the page quality it just has random information in it to hold places.
link to page
Site
#container {
width: 950px;
padding:0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
height:100%;
}
#banner {
text-align: right;
background-color: #E39A2D;
padding: 0px;
margin: 0px;
color: #ffffff;
}
/ here is where it goes a little wrong*/
#outer{
border-left: solid 200px #E39A2D;
border-right: solid 200px #E39A2D;
background-color: #ffffff;
height:100%;
}
#inner{margin:0; width:100%; height:100%; }
#left {
width:200px;
float:left;
position:relative;
margin-left:-200px;
margin-right:1px;
border-left:2px solid #564b47;
height:inherit;
}
#right {
width:200px;
float:right;
position:relative;
margin-right:-200px;
margin-left:1px;
border-right:2px solid #564b47;
height:inherit;
}
#content{
position: relative;
margin: 0px;
height:150%;
}
I'm not looking to make it full page length that I know how to do. I'm just looking to extend the lines all the way down the left and right sides.
Thanks ahead of time.
The borders you want to edit are the ones from the #outer div:
#outer{
border-left: solid 200px #564B47;
border-right: solid 200px #564B47;
}
Anyway your code seems a bit weird, using borders for layout is not the right way to go and it will give you problems. Check this out: http://www.barelyfitz.com/screencast/html-training/css/positioning/