I would Like to have a banner across an image. Both the image and banner (banner-snippet) are in the same parent element so the the black banner is pushed out of view. How can I fix this.
You can see my source here:
<div id="slide-banner">
<img src="http://upload.wikimedia.org/wikipedia/commons/0/0c/GoldenGateBridge-001.jpg"/>
<div id="slide-banner-snippet">
</div>
</div>
#slide-banner {
margin-top: 70px;
margin-right: auto;
margin-left: auto;
padding: 0px 0px 0px 0px;
height: 350px;
width: 916px;
border: 1px solid #ccc;
border-radius: 3px 3px 3px 3px;
overflow: hidden;
}
#slide-banner img {
height: auto;
width: 916px;
}
#slide-banner-snippet {
height: 55px;
width: 916px;
background-color: #000;
}
http://jsfiddle.net/uSw8S/
Absolutely position the element you want to float, ie:
position:absolute;
top:0;
z-index:1;
You can make #slide-banner relatively positioned and make slide-banner-snippet absolutely positioned and add bottom:0;
#slide-banner {
margin-top: 70px;
margin-right: auto;
margin-left: auto;
padding: 0px 0px 0px 0px;
height: 350px;
width: 916px;
border: 1px solid #ccc;
border-radius: 3px 3px 3px 3px;
overflow: hidden;
position:relative;
}
#slide-banner img {
height: auto;
width: 916px;
}
#slide-banner-snippet {
height: 55px;
width: 916px;
background-color: #000;
position:absolute;
bottom:0;
}
http://jsfiddle.net/uSw8S/2/
You can just put
<div id="slide-banner-snippet">
</div>
before
<img src="http://upload.wikimedia.org/wikipedia/commons/0/0c/GoldenGateBridge-001.jpg"/>
Example Here
Related
I am trying to create a fluid page layout with a fixed header. But I am having issues with making the fixed header fluid.
Here is the code:
.container {
max-width: 68.5em;
margin: 0px auto;
border: 1px solid #000;
height: 1000px
}
header {
position: fixed;
top: 0;
border: 1px solid red;
height: 55px;
width: 100%;
}
<section class="container">
<header>
</header>
</section>
Js Fiddle Link: http://jsfiddle.net/s2myn87q/4/
Since most browsers use the following style in their default stylesheet:
body {
margin: 8px;
}
You can use
header {
left: 8px;
right: 8px;
width: auto; /* default value */
}
body {
margin: 8px;
}
.container {
max-width: 68.5em;
margin: 0px auto;
border: 1px solid #000;
height: 1000px
}
header {
position: fixed;
left: 8px;
right: 8px;
top: 0;
border: 1px solid red;
height: 55px;
}
<section class="container">
<header>
</header>
</section>
i have this main_window div which is 800px wide, and 550 px height, then there is two divs that should be next to it, troubleshooting_area and timeline div, those two make up for the 550 in height but need to be floating to the right of the main window
the two divs below should be next to the main window, how can i achieve that??
here is a demo http://jsfiddle.net/S8RC3/3/
<div class="appview_fullscreen app_ama">
<center><strong>Auto Mechanics Alliance</strong> </br>
<i>let us come together and become one</i>
</center>
<div class="main_area">
<div class="tabs_area">
</div>
<div class="main_window">
</div>
<div class="troubleshoot_area">
</div>
<div class="timeline">
</div>
</div>
</div>
body
{
width: 100%;
height: 100%;
margin: 0px;
}
.appview_fullscreen
{
width: 1005px;
background-color: black;
color: white;
font-size: 20px;
margin: 0px;
padding: 2px;
}
.main_area
{
border: 2px solid green;
padding: 2px;
margin: 0px;
}
.tabs_area
{
border: 1px solid green;
height: 20px;
}
.main_window
{
min-height: 550px;
border: 1px solid green;
width: 800px;
margin: 2px 1px 1px 1px;
}
.troubleshoot_area
{
border: 1px dotted green;
height: 200px;
width: 200px;
}
.timeline
{
border: 1px solid green;
height: 350px;
width: 200px;
}
In your case, I would simply add:
position: absolute;
top: 76px;
left: 808px;
to your .timeline and .troubleshoot-area classes.
You can see an updated fiddle here: http://jsfiddle.net/S8RC3/4/
Try these ways.
CSS
body
{
width: 99%;
height: 100%;
margin: 0px;
}
.appview_fullscreen
{
width: 1005px;
background-color: black;
color: white;
font-size: 20px;
margin: 0px;
padding: 2px;
}
.main_area
{
border: 2px solid green;
padding: 2px;
margin: 0px;
}
.tabs_area
{
border: 1px solid green;
height: 20px;
}
.main_window
{
min-height: 550px;
border: 1px solid green;
width: 800px;
margin: 2px 1px 1px 1px;
display:inline-block;
}
.troubleshoot_area
{
border: 1px dotted green;
height: 200px;
width: 200px;
position: absolute;
top: 76px;
left: 808px;
}
.timeline
{
border: 1px solid green;
height: 350px;
width: 200px;
float:right;
position: absolute;
top: 76px;
left: 808px;
}
DEMO Fiddle
#container {
width: 1000px;
margin: 0 auto;
background-color: #000000;
}
#header {
width: 884px;
height: 113px;
position: relative;
margin: auto;
background-image: url(mybanner.png);
background-repeat: no-repeat;
border-bottom: 5px solid #333;
}
#leftnav{
float: left;
width: 140px;
height: 800px;
background-color: #F8AA3C;
border-right: 1px dashed #694717;
}
#body{
width: 550px;
height: 800px;
background-color: #333;
margin: auto;
padding: 10px 0px 0px 10px;
}
Missing information such as what is your DOM structure and what the element that trying to put left to some container, I saw you used float:left style so my guess it is some block element, in that case I can only suggest adding position: relative style to your leftnav element.
Firefox behaves differently than Chrome and Safari (I haven't tested others browsers) when you combine outline and pseudo-elements.
Is there a way to fix it or is this a bug?
.main {
position: relative;
width: 100px;
height: 100px;
margin: 10px auto;
border: 2px solid #f00;
outline: 2px solid #00f;
}
.main:after {
content: 'Hello';
position: absolute;
width: 100px;
text-align: center;
bottom: -50px;
}
.wtf {
width: 400px;
margin: 90px auto;
}
<div class="main"></div>
<div class="wtf">
<p>In Chrome and Safari the 'Hello' is outside of the outline.</p>
<p>In firefox the outline is extended and the 'Hello' is inside the outline. Bug from Firefox or is there a way to fix this?</p>
</div>
Demo: http://codepen.io/romainberger/pen/nuxlh
Edit:
Tested in Firefox 20.0, Chrome 28 and Safari 5.1
Now used to
box shadow
as like this
.main {
position: relative;
width: 100px;
z-index:1;
height: 100px;
margin: 10px auto;
border: 2px solid #f00;
box-shadow:0px 0px 0px 3px #00f;
}
.main:after {
content: 'Hello';
position: absolute;
text-align: center;
bottom: -50px;
left:0;
right:0;
z-index:2;
}
.wtf {
width: 400px;
margin: 90px auto;
}
Demo
No need to use z-index.
.main {
position: relative;
width: 100px;
height: 100px;
margin: 10px auto;
border: 2px solid #f00;
box-shadow:0px 0px 0px 3px #00f;
}
.main:after {
content: 'Hello';
position: absolute;
text-align: center;
bottom: -50px;
left:0;
right:0;
}
.wtf {
width: 400px;
margin: 90px auto;
}
This question already has answers here:
div set height equal
(4 answers)
Closed 8 years ago.
this is my html of my little game.
<div id="game">
<div id="choice" onmouseover="npcRoll()">
<p>Chosse your weapon!</p>
<button id="rock" onClick="choose(1)">Rock</button>
<button id="paper" onClick="choose(2)">Paper</button>
<button id="scissors" onClick="choose(3)">Scissors</button>
<p>You chose <span id="userChoice">none</span>!</p>
</div>
<div id="confirm">
<p>When you are ready, click on <strong>Fight</strong>.</p>
<button id="resulot" onClick="resulte()">Fight!</button>
</div>
<div id="clear"></div>
</div>
And this is my CSS
body {
background-color: #DFEFF0;
text-align: center;
}
button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 100px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
padding-top: 36px;
}
button:active {
font-size: 22px;
border: 2px solid #328505;
color: #32A505;
border-radius: 100px;
width: 100px;
height: 100px;
padding-top: 36px;
}
#rock {
width: 100px;
height: 100px;
background-color: white;
background-image: url(img/rock.png);
background-repeat: no-repeat;
background-size: 80px 80px;
background-position: center center;
}
#paper {
width: 100px;
height: 100px;
background-color: white;
background-image: url(img/paper.png);
background-repeat: no-repeat;
background-size: 80px 80px;
background-position: center center;
}
#scissors {
width: 100px;
height: 100px;
background-color: white;
background-image: url(img/scissors.png);
background-repeat: no-repeat;
background-size: 80px 80px;
background-position: center center;
}
#result {
background-color: #ECECEC;
border:2px solid gray;
border-radius:25px;
width: 200px;
height: 100px;
}
#choice {
border: 2px solid #87231C;
border-radius: 12px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
background-color: #FF5A51;
width: 350px;
float: left;
}
#game {
border: 2px solid #fff;
border-radius: 15px;
background-color: white;
width: 500px;
margin: 0 auto;
display: block;
overflow: auto;
}
#confirm {
border: 2px solid #00008B;
border-radius: 12px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
background-color: #1E90FF;
width: 142px;
height: 100%;
float: right;
}
#clear {
clear: both;
}
You can check it out here on http://jsfiddle.net/RWfhQ/ . I want to make the blue div to be same size as the red one. I want to make them same size. It's possible that blue div may get bigger than red one, so I need to have them same size.
Thank you very much.
The obvious solution is to use position: relative on #game container and position: absolute on #confirm:
#confirm {
...
position: absolute; // <-- stretch the div
top: 0;
bottom: 0;
right: 0;
}
In this case you don't need height: 100% and float: right anymore.
http://jsfiddle.net/RWfhQ/1/
Since this is a fixed width, you could use the faux-columns trick. Wrap both in a <div> to handle the background, and use a background image which is half blue and half red.