The page in question is this: http://amytdatta.com/ironic-bironic (password: tyma) - it's a pre-release page for a new album I worked on, sorry!
I'd like to have the video and the text nav below scale and center to the browser window without the need for a scrollbar. I've tried all kinds of approaches using min height / max height but just can't seem to get the intended result. I'm guessing that I don't know which elements to target and how to target them.
Any advice for a good solid approach would be really appreciated. Also, since i'm using Virb I can only do overrides to the CSS, so I can't delete lines.
Thanks very much.
Without actually seeing your website since it's password protected I would suggest something along the lines of the folllowing:
You set a wrapper around your elements, in your case the nav and the video. And then set the CSS for the video and nav to have an auto margin. Which should center it both horizontally and verically. You might want to add a wrapper for the 2 components to keep them nicely stacked together and then put an auto margin on that wrapper, but the below should already work.
Html:
<div id="container">
<div id="nav"><!-- nav here --></div>
<div id="video"><!--video here--></div>
</div>
CSS:
#container {
width:100%;
height:100%;
}
#video{
margin:auto;
}
#nav {
margin:auto;
}
Related
I have an absolutely positioned form that appears roughly 200px below where it should be on the page load. If I open up Chrome Dev Tools and disable and re-enable any CSS image it goes where it should be.
This only happens in Google Chrome.
I've tried using the chrome specific CSS rules below but it doesn't work.
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
How can I fix this?
Here is the page in question: http://info.iconixx.com/Iconixx-Incentives_imc_incentives1.html
It's likely nested in a different element then your wanting it to be. Make note of the parent element.
Find the element in which that header image is coming from. Likely <header></header>
Then make sure that element is defined as position: relative;
Within those tags have the relevant mark-up of the element you are trying to position within this area.
<header>
<div id="absoluteelement">
</div>
</header>
Now when you do:
#absoluteelement {
position:absolute;
top:50px;
left: 200px;
// more
}
It will be positioned top and left coordinates from the parent element, so top and left from the top and side of <header> just double check your code and nesting. Also, make sure you have all widths and heights defined for that area. Hope this helps.
I think you should really take a look how your markup is structured and consider reformatting it. For 1 the left box in the banner comes after the Form which is on the right. Just like anything else you should build left to right.
<div id="banner">
<div id="left_content"></div>
<div id="right_form"></div>
</div>
You could then....
#left_content{ float:left; }
#right_form{ float:right; }
This isn't going to give you the exact look you want... but using this approach will really help eliminate thse types of issues to begin with.
I'm having some trouble getting this done 'right'...
its a two parter. :)
1.) is getting the layout to look like how I need it (without resorting to tables!), but for some reason I can get the divs and nested divs to 'act right'... (surely its my error/mis-understanding)
I am trying to get a layout like so, using only DIVS and display..etc..
http://dmstudios.net/misc/layout.jpg
I have attempted it myself (so you dont think Im just looking for a handout) :)..
but some things like the vertical alignment of the custom div container isnt working..etc
Here is my JSFiddle attempt: http://jsfiddle.net/yeKxU/1/
JSFiddle Code:
<div class="container">
<div class="logo"><img src="http://academickids.com/encyclopedia/images/thumb/5/53/150px-Blue_morpho_butterfly_300x271.jpg" /></div>
<div class="custom">
<div class="president">item1</div>
<div class="mission">item2</div>
<div class="active">item3</div>
</div>
<div class="url">www.nike.com</div>
<div class="freetext">random text</div>
</div>
CSS:
* {
border: 1px dashed blue;
padding:0;
margin:0;
}
div{
display: inline-block;
border:2px solid;
border-radius:2px;
border-color:#FF0000;
}
.container{
width:450px;
padding:0;
margin:0;
}
.logo{
padding:0;
margin:0;
}
.custom{
vertical-align:top; /* doesnt work to move the 'custom div' to the top */
/* width:63%;*/ /*needs to auto stretch to fit the rest of the space after image*/
}
.custom div{
display:block;
background-color:#EEEEEE;
}
.url{
width:100%;
}
.freetext{
width:100%;
}
Couple notes: the '3' fields to the right of the image div, will have varying data in them.. (meaning I am not clear if they will need to wrap or not...hopefully not a problem)
The second portion of the question, is about implementing some dynamic capabilities. (jQuery I imagine should work)..
2.) Knowing the general (perfect scenario) layout I am trying to achieve above...
I need to also code things in a way.. that is certain parts of the data are MISSING, then that 'cell' (div) is removed/hidden (or something)
*(I am building this using PHP printed to screen, to spit out the HTML/DIVS..etc and using variables to populate the content of the DIV/image..etc)
So for example..
if the IMAGE was not there (variable is empty).. Id like the the CUSTOM div that has 3 child divs in it 1 for each of the text fields) to expand all thew way to the LEFT.. as the logo/image DIV will have nothing (or be removed/hidden since its empty)
Same goes for the text fields in the CUSTOM DIV container.. if one of those fields are BLANK... its should NOT just have a blank/empty placeholder... it should be removed/hidden.. and the rest of the data butted up to the TOP (under any other fields that may be present)
I've seen examples (sorta) where you have some DIV blocks on the stage.. click on one.. it removes it.. the other DIVS move over...etc... (sorta the same thing, except I cant manually click things to remove them)..
So maybe some jQuery to go through the 'DIVS' see if its empty and then remove itself?
-or-
would just having some sort of layout that is fluid/liquid work? be better? so I dont really need to check if its empty.. if nothing is IN the cell/DIV.. then the other just adjust their WIDTH/POSITION to make-up for it?
Let me know what you guys think? JSFiddle examples are appreciated!
Thanks!
to get the layout in question one you do like this...
#divA {float:left;}
#divB {float:left;}
before divC you can put an empty div (id="empty") like this...
#empty {clear:both;}
this should fix the design, assuming you have your width seth on the divs...
for question 2 i suggest you create the divs dynamically, when you create your content on page... if you want examples, just let me know...
There are a lot of properties you can set on your divs, one is max-width... one risk of not setting any value on width on your divs is that if your total width get wider than your holding container your divB will stack up under divA... and i think you dont want that to happen... :) you can do some experiments with min-width and max-width on your divs to get the behavior you want because i guess you have some values on your pic to play with...
divA {
float:left;
max-width:50px;
}
divB {
float:left;
min-width:400px;
}
as example, you have to find your values, trial and error-way i guess...
there is also a lot of guides on internet if you search on css and positioning... happy hunting!
Ok here is the site:
http://danberinger.com/
If you view the source for the HTML and CSS you can see that I have set the height of the div in the middle to 100% and given it an overflow property value of hidden, it is called "main_content". I realized that the height value is having no effect on what is displayed, the overflow value of hidden is allowing the background color of the main_content div to extend down to the footer. I guess I am wondering what the best way for me to achieve a variable div height on each page or "main_content" while maintaining the background color. Am I doing this the right way or am I using some kind of css hack that is not the proper way to do it. All insight is welcome. Make sure to take a look at the source HTML and CSS before giving me an answer.
The easiest solution would be to assign the background color to your body element. Something like this:
body {
margin: 0;
padding: 0;
width:100%;
height:100%;
background-color:#cccccc;
}
This will also eliminate the few pixel white border around the edges, if you want to maintain that, take out the margin and padding declarations.
I might have misunderstood what you want, but try this:
Replace div#intro_container with:
div#intro_container {
width:830px;
margin:auto;
overflow: hidden;
background-color:#333333;
}
And remove the height property from div#messagebox.
I prefer to do in this way:
In the content of div 'main-content', add
In your case it was
<div id="main_content">
<div id="navigation">..</div>
<div id="intro_container">..</div>
</div>
It cam be rewritten as
<div id="main_content">
<div id="navigation">..</div>
<div id="intro_container">..</div>
<div style="clear:both"></div>
</div>
AFAIK This is a standard way to achieve what are you doing.
I have a container background defined in CSS like this;
.container {
background:#fff;
margin-left:auto;
margin-right:auto;
position: relative;
width:970px;
border:1px solid #000;
padding:5px 10px;
}
The problem is I have a jqGrid put in the bottom of the container (near the bottom edge) and when its initially drawn it does fit inside the container panel and looks correct. Something like this (please pardon my non-l33t graphic skillz):
alt text http://img67.yfrog.com/img67/7162/screenshot002f.jpg
But then when I populate the grid with rows it outgrows the container and it looks really tacky, something like this (I circled the original container background edges):
alt text http://img80.yfrog.com/img80/5419/screenshot003fr.jpg
I am sure its something I am doing wrong with the CSS. Any advice would be appreciated.
EDIT: The problem isn't the width its the height of the container being overlapped by the new height of the now populated grid
I've seen this happen many times when you have floats inside. Add a clearing div just before closing container. You should always clean up after floats.
<div class="container">
<div id="nav" style="float:left;">
...
</div>
<div id="grid" style="float:left;">
...
</div>
<div style="clear:both;"></div> <!-- this does the trick -->
</div>
I disagree with adding float to container. Although this will work, having unnecessary floats will give you more problems down the road. Only use floats where necessary and clear it when done floating.
Also in my experience, overflow doesn't mean anything here unless you define height. I don't think setting overflow on container fixes the issue here. Correct me in the comments if I'm wrong.
.container { overflow:hidden; }
assuming you are dealing with floats, this is one way to make the container actually contain them.
Your container is fixed width and won't grow. What you're probably looking for is min-width. In other words, change:
width:970px;
to:
min-width:970px;
As a note, IE 6 and 7 treat width as min-width, but other browsers do not.
I think you need this in your CSS:
overflow: auto;
Depending on your float situation for the container and the inside grid, you can do a number of different things. You might be able to get away with just adding a clear,
clear:both;
You also can float the parent. This is called, setting a float to fix a float. So if your grid has a
float:left;
Then you can just add
float:left;
to your container css. I really like the Complex Spiral article on containing floats.
I've used the last example on this page for equal height columns.
http://www.ejeliot.com/blog/61
The problem is, when you click an internal anchor link, the content is shifted up, and the overflow is making the top part of the page disappear.
For example, click this link
http://www.noosanativeplants.com.au/~new/articles/botany-words/
Then click a letter to jump to that section. You will notice what I am describing.
Is there a way to combat this, or is this a short coming of the technique? Do you recommend I use the background image technique for faux equal height columns? I'd rather not use this, as one page has a different background, and would require a bit of reworking to do the background for this page.
Thanks
I really recommend you to use the fail-safe faux columns method. If you are not a layout expert (no offence, seriously), stay away from the padding/margin/overflow magic and the one true layout technique. The latter is elegant but it can cause unwanted side-effects if you are to do heavy JS/DOM manipulations and all (see the problems listing).
As slink said you have two overflow: hidden rules in your css:
#main-container {
overflow:hidden;
}
And
#content {
overflow:hidden;
}
If you disable/remove these you will able to use your scrollbars again. Unfortunately the padding / negative margin "hack" will be visible. I recommend you to completely remove this solution and use faux columns. Faux columns background can be added to your #main-content or even the #content div (not just like the example in the ALA article that sets the background image to the body tag).
Good luck!
Update: Sorry, let me correct myself: to use faux columns in your case it is better to set the current background to the html element and the faux background to body element.
Assuming your equal height columns are the left menu and right content in that example, you could just use a margin-left property on the right-column and set the background colour of the container to the desired left-column colour. This would assume your right content always has a greater height than the left, but there are other ways round this.
#container {
width: 960px;
background-color: #000;
}
#menu {
float:left;
width: 240px;
}
#content {
float:right:
margin-left: 240px;
background-color: #fff;
}
<div id="container">
<div id="menu">
<ul>
<li>Home</li>
</ul>
</div>
<div id="content">
stuff goes here
</div>
</div>
The problem is caused by two overflow: hidden; rules defined on elements #content and #main-contaniner.