I have the following HTML with the div.logo centered in the middle.
What would be the easiest cross browser solution to allow me to put another box contactDetails onto the left or right but retain the centered image?
HTML:
<div id="page-wrap">
<header>
<div id="logo">
<img src="_assets/images/logo.png" width="500" height="518"/>
<h3>New Website Soon</h3>
</div><!--END logo-->
<div id="contactDetails">
<p>Content</p>
</div>
</header>
</div><!--END page-wrap-->
CSS:
*{
padding: 0;
margin: 0;
}
body{
background:url('../images/background.png') repeat;
margin: 0 auto;
}
div.page-wrap,header,div.logo,h1{
font-family: arial;
text-align: center;
margin:0;
}
div.page-wrap,header,div.logo,img{
border-radius: 5px;
}
div.contactDetails{
float: left;
margin: 0;
}
Position the contact box absolutely.
For what it's worth, none of your CSS above will work because you're using a dot to signify the class of the div, rather than a # pound sign to signify ID of the div (div.logo corresponds to <div class="logo">, div#logo corresponds to <div id="logo">)
#page-wrap {
/* parents of absolutely positioned elements must have a position */
position: relative;
}
#contactDetails {
position: absolute;
top: 0;
right: 0;
/* you could use 'left: 0;' instead, to move to the left edge */
width: 300px;
}
Related
I am implementing an image selector for a carousel :
The structure is the following :
A <div> container with some horizontal padding to spare place for the chevrons.
A <div for the chevron on the left with: position : absolute; left:0;
A <div for the chevron on the right with: position : absolute; right:0;
a <div> to contain the images with white-space: nowrap; overflow:hidden
Problem : If I don't force top:0 on the chevrons, I get this result :
Can someone explain why?
Here is the JSFiddle
HTML:
<div class="container">
<div class="img-container">
<ul>
<li><img src="http://placehold.it/150x100/EEE04A/ffffff?text=Image%201">
</li><li><img src="http://placehold.it/150x100/5cb85c/ffffff?text=Image%202">
</li><li><img src="http://placehold.it/150x100/5bc0de/ffffff?text=Image%203">
</li><li><img src="http://placehold.it/150x100/f0ad4e/ffffff?text=Image%204">
</li><li><img src="http://placehold.it/150x100/FF3167/ffffff?text=Image%205"></li>
</ul>
</div>
<div class="button-left">
<img src="http://placehold.it/50x100/cccccc/ffffff?text=<">
</div>
<div class="button-right">
<img src="http://placehold.it/50x100/cccccc/ffffff?text=>">
</div>
</div>
CSS:
ul {
padding-left: 0;
margin: 0;
list-style:none;
}
.container {
width: 450px;
padding: 0 50px 0 50px;
position: relative;
}
.img-container {
overflow:hidden;
white-space: nowrap;
}
.img-container li {
display:inline-block;
}
.button-left {
position: absolute;
left: 0;
/* top: 0; */
}
.button-right {
position: absolute;
right: 0;
/* top: 0; */
}
I think the other answers skirt around the real issue, which is that you have two stacked rows of content (the slides and, below them, the arrows). You could fix this with absolute positioning but I think it'd be much cleaner to just keep them in the same horizontal row to begin with. A simple example using float:
JSFiddle
Absolute positioning doesn’t require a ‘relative’ element (as set on the .box element above). If you absolutely position an element without a positioning context, then the positioning will take place relative to the entire page. (The exception is if you don’t specify any top, bottom, left, or right values. In that case, even if there is no positioning context, the context will automatically become the immediate container element, and the element will still be in flow.)
So if you don't specify top or left position for some element with position: absolute they consider these position according to their normal position in DOM. Same is in your case they are taking top position from their normal position in DOM.
To place an element with position absolute we should provide these properties explicitly in most cases to avoid problems.
You give the img-container position:absolute; and width:450px;
ul {
padding-left: 0;
margin: 0;
list-style:none;
}
.container {
width: 450px;
padding: 0 50px 0 50px;
position: relative;
}
.img-container {
overflow:hidden;
white-space: nowrap;
position: absolute;
width: 450px;
}
.img-container li {
display:inline-block;
}
.button-left {
position: absolute;
left: 0;
/* top: 0; */
}
.button-right {
position: absolute;
right: 0;
/* top: 0; */
}
<div class="container">
<div class="img-container">
<ul>
<li><img src="http://placehold.it/150x100/EEE04A/ffffff?text=Image%201">
</li><li><img src="http://placehold.it/150x100/5cb85c/ffffff?text=Image%202">
</li><li><img src="http://placehold.it/150x100/5bc0de/ffffff?text=Image%203">
</li><li><img src="http://placehold.it/150x100/f0ad4e/ffffff?text=Image%204">
</li><li><img src="http://placehold.it/150x100/FF3167/ffffff?text=Image%205"></li>
</ul>
</div>
<div class="button-left">
<img src="http://placehold.it/50x100/cccccc/ffffff?text=<">
</div>
<div class="button-right">
<img src="http://placehold.it/50x100/cccccc/ffffff?text=>">
</div>
</div>
I have several chat boxes and other div elements that need to be positioned at the bottom of the screen, aligned to the right.
Problem #1: Elements do not have the same height, and the smaller ones are vertically aligned with the top of the highest element. Fiddle: http://jsfiddle.net/sd69jdxp/
#container { position: fixed; bottom:0; left:0; right:0; }
.chat { border: 1px solid #999; float: right; position: relative; margin: 0 5px; }
Problem #2: Using the approach of
display: inline-block; vertical-align: bottom;
to align divs to the bottom of the page, the links (anchors) over the first (smallest) chat box are not clickable, as the parent container overlaps the links. And it's not possible to set a lower z-index to the chat container than to the content behind, since the chat boxes are children of the chat container and they MUST have a higher z-index than the page content. How can this issue be solved?
Fiddle showing this issue: http://jsfiddle.net/xw689yv8/
Summary
How can I force all divs to be aligned with the bottom right of the screen, without having the chat container (parent div of chat boxes) overlap the content in the page behind the chat boxes, thus making it unclickable?
Use pointer-events: none on the container; elements underneath it will now be clickable.
Arrange the chat boxes inside the fixed container with display: inline-block and vertical-align: bottom.
The chat boxes get pointer-events: auto so they and their children can be clicked.
For IE10 and below, check out this answer to an older question to transfer click events.
Example
See it full screen and select the text input sitting underneath the invisible container.
.under {
position: absolute;
bottom: 200px;
right: 200px;
}
#container {
position: fixed;
bottom: 0;
right: 0;
pointer-events: none;
}
.chat {
border: 1px solid #999;
display: inline-block;
vertical-align: bottom;
position: relative;
margin: 0 5px;
pointer-events: auto;
}
.title {
padding: 0.5em;
background-color: blue;
color: white;
}
.text {
padding: 10px;
}
<div class="under">
<input type="text" value="select me!" />
</div>
<div id="container">
<div class="chat">
<div class="title">This is the chat title</div>
<div class="text">
<p>Text 1</p>
<p>Text 2</p>
<p>Text 3</p>
</div>
<div class="chatbox">
<input type="text" />
</div>
</div>
<div class="chat">
<div class="title">This is the chat title</div>
<div class="text" style="height:250px">
<p>Text 1</p>
<p>Text 2</p>
<p>Text 3</p>
</div>
<div class="chatbox">
<input type="text" />
</div>
</div>
</div>
I am not sure how you want to align them so I put them over each other.
http://jsfiddle.net/ouu94tfv/
#container { position: fixed; bottom:0; left:0; right:0; }
.chat { border: 1px solid #999; right:0; position: absolute; bottom: 0; margin: 0 5px; display:inline-block; float:right;}
.title { padding: 0.5em; background-color: blue; color: white; }
.text { padding: 10px; }
I can't seem to make my images align side by side, they just keep stacking on top of each other. I have only enough knowledge to fumble my way through with instructions and I'm stuck here.
HTML:
<div class='sticky-bar'>
<div class='sticky-bar-inner'>
<div>
<a href='https://www.facebook.com/salvageinteriors' target='_blank'>
<img src='img.png' />
</a>
</div>
</div>
</div>
I cant seem to get the rest of the code in here, but it just keeps repeating the above.
CSS:
.sticky-bar {
background: none repeat scroll 0 0 #FFFFFF;
bottom: 0;
color: #000000;
font-weight: 700;
left: 10px;
margin: 9px;
opacity: 0.6;
position: fixed;
width: 45px;
z-index: 62;
}
.sticky-bar-inner {
display: inline-block;
margin-left:auto;
padding: 20px 0;
text-align: left;
width:90%;
}
Try this:
Use float:left property. It will use to align div's side by side and when the parent width is reached then , the images will align in next line.
HTML:
<div class='sticky-bar'>
<div class='sticky-bar-inner'>
<div class="inner-divs">
<a href='https://www.facebook.com/salvageinteriors' target='_blank'>
<img src='img.png' />
</a>
</div>
</div>
</div>
CSS:
Set width for .sticky-bar-inner class
.sticky-bar-inner {
padding: 20px 0;
width:500px;
}
and set float:left property to inner image divs.
.inner-divs{
float:left;
}
I want to build CSS popup (or block) from three elements (top, middle, bottom).
I have always do it in simple way but there was no text area above the top/bottom part.
Now i have to build a custom background but don't have any idea how. Height of popup (block) should be dependent of content.
Is it possible to do without any JS hacks?
Slice it into nested boxes etc.
What i've tried is to create a container first, the a div for the arrow, then the content (with your background gradient) and a wrapper for the content (with the red background) and the content inside.
HTML
<div class="popup">
<div class="arrow"></div>
<div class="content">
<div class="wrapper">
<div class="top">Content top</div>
<div class="red-area">Your main content</div>
<div class="bottom">Bottom</div>
</div>
</div>
</div>
Now you've a nice html basis, with which you can play with floating, padding, margin, background-colors and rounded corners, like this:
CSS
* { margin: 0; padding: 0 }
body { background: #eee; padding: 50px; }
/* .popup { width: 250px; } */ /* If you wanto to manually set a width for the whole popup */
.arrow {
float: left;
width: 25px;
height: 50px;
margin-top: 10px;
background: white; /* your arrow image here */
position: relative;
}
.content {
margin-left: 25px;
background: white;
background: white url("your/gradient-image.jpg") repeat-x center bottom;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.25);
}
.wrapper {
padding: 15px;
background: #ff7f7f;
}
I've floated the arrow to the left, left margin for the content and paddings for the wrapper.
It depends on border-radius and box-shadow which are supported in newer browsers.
If you like to support older browsers, then i recommend you to use more images for the visual effects.
Hope this helps. jsFiddle example
Try this:
-Divide the layout in 3 divs: top/bottom, with a fixed height and the top/bottom image as a background; and middle, using the middle image and repeating the background. Something like:
<!--Container-->
<div class="popup-container">
<!--Top part-->
<div class="top" style="height: 20px; background-image: url(top.jpg);"></div>
<!--Now the middle div with the background repeating only vertically-->
<div class="middle" style="height: auto; background-image: url(middle.jpg);
background-repeat: repeat-y;"></div>
<!--Bottom part-->
<div class="bottom" style="height: 20px; background-image: url(bottom.jpg);"></div>
</div>
Take a look on ColorBox it's so easy to use and u can customize it's css to do whatever you want.
you also able to define the popup content as a content from another page like that:
$.colorbox({href:"simplepage.html"});
Now the popup width will fit to whatever your page have....
it's apowerful tool try it.
I have found simple way to do it!
First create related block, inside content and three absolute blocks. Each of color don't overlaps other! Look at the example:
HTML:
<div class="popup-container">
<div class="content">
test 1<br />
test 2<br />
test 3<br />
test 4<br />
test 5<br />
test 6<br />
</div>
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
CSS:
.popup-container {
position: relative;
}
.content {
z-index: 9999;
}
.top {
position: absolute;
width: 100%;
height: 20px;
background-color: red;
top: 0;
z-index: -1;
opacity: 0.5;
}
.middle {
position: absolute;
width: 100%;
background-color: yellow;
bottom: 40px;
top: 20px; /* height of top */
z-index: -1;
opacity: 0.5;
}
.bottom {
position: absolute;
width: 100%;
height: 40px;
background-color: blue;
bottom: 0;
z-index: -1;
opacity: 0.5;
}
http://jsfiddle.net/bhnuh/5/
I have a div that contains three elements, and I am having problems correctly positioning the last one. The div at the left has to be at the left, the one in the middle needs to be centered, and the third one needs to be to the right.
So, I have something like:
#left-element {
margin-left: 9px;
margin-top: 3px;
float:left;
width: 13px;
}
#middle-element {
margin:0 auto;
text-align: center;
width: 300px;
}
#right-element {
float:right;
width: 100px;
}
My html looks like this:
<div id="container-div">
<div id="left-element">
<img src="images/left_element.png" alt="left"/>
</div>
<div id="middle-element">
I am the text inside the middle element
</div>
<div id="right-element">
I am the text in right element
</div>
</div>
Any ideas?
Thanks!
You haven't included css for your container div, but whenever it contains floating elements you should hide overflow like so:
#container {
overflow: hidden;
width: 100%; /* for good measure */
}
When you position the middle div you are setting margins that span the entire container, so any further elements are getting positioned on the line below. Note, at least for most modern browsers, further. If you reorder your elements, like so:
<div id="container">
<div id="left-element">
<img src="images/left_element.png" alt="left"/>
</div>
<div id="right-element">
I am the text in right element
</div>
<div id="middle-element">
I am the text inside the middle element
</div>
</div>
You should find it works. Better method, as I'm not quite sure whether that is supposed to work, would be to use css positioning. Apply the following css:
#container {
overflow: hidden;
width: 100%;
min-height: 36px; /* Remember absolute positioning is outside the page flow! */
position: relative;
}
#left-element {
position: absolute;
left: 9px;
top: 3px;
width: 13px;
}
#middle-element {
margin: 0 auto;
text-align: center;
width: 300px;
}
#right-element {
position: absolute;
right: 0px;
top: 0px;
width: 100px;
}
I think you problem is that you floated the left and right element but not the center one. Try something like this:
CSS:
<style>
#container { display:block; margin:0; padding:0; width:640px; height:400px; outline:1px solid #000; }
#left-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ccc; }
#middle-element { float:left; display:block; margin:10px 0; padding:0; width:200px; height:380px; background:#eaeaea; }
#right-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ddd; }
</style>
HTML:
<div id="container">
<div id="left-element">Left Element</div>
<div id="middle-element">Middle Element</div>
<div id="right-element">Right Element</div>
</div>
The problem is specifically that the middle div has a width set but is not floated, meaning it is still a block level element. Even though the div itself does not go the entire width of the container, it is still treated as such. You need to do 2 things - float the middle div, then clear the floats so the container grows with the height of the child divs. The clearfix method is preferred since it does not cause issues with CSS3 properties that naturally extend outside the bounds of the element they are applied to (box-shadow, text-shadow, etc).
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
I had the exact same issue. I used this approach. I made the center element display inline-block. That way I didn't have to give the elements specific width or the main container a specific height. The blocks only took up as much space as the content inside. Hope this helps.
.main-nav {
text-align: center;
padding: 2em 3em;
background: #f4f4f4;
}
#logo {
margin: 0;
width: 50px;
float: left;
margin-top: 18px;
}
#logo-link {
float: left;
display: inline-block;
}
.name {
display: inline-block;
}
.nav {
float: right;
margin-top: 18px;
}
.nav li {
float: left;
margin-right: 15px;
margin-top: 5px;
}
.nav li:last-child {
margin-right: 0;
}
<header class="clearfix">
<div class="main-nav">
<img src="img/site-logo.svg" alt="Munchies" id="logo">
<div class="name">
<h1>The Munchies Family Site</h1>
<h2>Designer</h2>
</div>
<nav class="nav clearfix">
<ul>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
strong text