As shown on this page
I have tried all I can to make the overflown part of the logo to display on-top of the slideshow but it wouldn't work. The CSS is as shown below.
#logo {
float: left;
position: absolute;
margin-top: -58px;
width: 250px;
margin-left: -52px;
}
.clear {
clear:both
}
#gallery {
width: 100%;
float: left;
margin-bottom: -28px;
position: absolute;
height: 509px;
}
#gallery a {
float:left;
position:absolute;
}
#gallery a img {
border:none;
width: 100%;
float: left;
position: absolute;
margin-bottom: -28px;
}
#gallery a.show {
z-index:500;
width: 100%;
position: absolute;
margin-bottom: -28px;
height: 509px;
float: left;
}
#gallery .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#gallery .caption .content {
margin:5px
}
#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}
Just add z-index for your logo id then it should work. Half of your logo is sitting behind the slider.
#logo {
float: left;
position: absolute;
margin-top: -58px;
width: 250px;
margin-left: -52px;
z-index:599;
}
Related
I am working on a fluid grid (DreamWeaver CC) site. I have a header-Wrapper div containing stacked elements using z-index. I am now trying to add a div after the header-Wrapper but this div is floating behind the header-Wrapper. This is my first time working with z-index so I'm rather flummoxed.
I have tried position and display css elements for the mobileNav div and also tried to use a height element for the header-wrapper. Nothing. the mobileNav div seems to be ignoring the header-Wrapper altogether and acting like it is the first div in the gridContainer.
Thanks for your help
site: miki.nantucket.net/redac-2.php
html
<body>
<div class="gridContainer clearfix">
<div id="header-wrapper" class="fluid">
<div id="rotation" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/rotations.php" ?></div>
<div id="Weather" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/weather.php" ?></div>
<div id="Navigation" class="fluid "><ul>
<li>Nav1</li>
<li>Nav2</li>
<li>Nav3</li>
<li>Nav4</li>
<li>Nav5</li>
<li>Nav6</li>
<li>This is not styled yet</li>
</ul></div>
</div><!--end header-wrapper-->
<div id="mobileNav" class="fluid">This is the content for Layout Div Tag "mobileNav"</div>
</div>
</body>
CSS
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 92.625%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
background-color:#FBFAF6;
}
#header-wrapper {
position:relative;
width: 100%;
padding:0;
margin:0;
}
#rotation {
position:absolute;
z-index:1;
}
#Navigation {
display:none;
width: 100%;
}
#Weather {
text-align:right;
font-size:13px;
padding:5px 0px 10px 0px;
position:absolute;
z-index:50;
top:0px;
left:0;
background: #4b829f;
background: rgba(75,134,159, .8);
color: #ffffff;
}
#mobileNav {
position:relative;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 93.4166%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
margin-left: auto;
}
#header-wrapper {
}
#rotation {
}
#Navigation {
display:block;
position:absolute;
z-index:100;
top:49px;
left:0;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
width: 23.7288%;
}
#Weather {
}
#mobileNav {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 88.875%;
max-width: 1232px;
padding-left: 0;
padding-right: 0;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#header-wrapper {
}
#rotation {
}
#Navigation {
display:block;
position:absolute;
z-index:100;
top:49px;
left:0;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
width: 17.7215%;
}
#Weather {
}
#mobileNav {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}
CSS for included responsive slider
/*responsive hero slider*/
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.caption {
position: absolute;
display: block;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
margin:0;
text-align: center;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
font-size:18px;
font-stretch:expanded;
}
Thank you. Due to the various elements, I do need the absolute positioning but your comment about allowing for the space in the header-wrapper gave me an idea. I put an image into the header-wrapper, fiddled around with the z-index property here and there. Probably not the most elegant way to do it but it's working!
Thank you.
html
<div class="gridContainer clearfix">
<div id="header-wrapper" class="fluid">
<div id="rotation" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/rotations.php" ?></div>
<div id="Weather" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/weather.php" ?></div>
<div id="Navigation" class="fluid "><ul class="navBump">
<li>Nav1</li>
<li>Nav2</li>
<li>Nav3</li>
<li>Nav4</li>
<li>Nav5</li>
<li>Nav6</li>
<li>This is not styled yet</li>
</ul></div>
<div id="LogoWrapper" class="fluid "><div id="Logo" class="fluid "><img src="images/sitewide/Logo.png"></div><div id="LogoTag" class="fluid "><?php include $_SERVER['DOCUMENT_ROOT']."/includes/layout/logtag.php" ?></div></div>
<img src="images/rotations/redac2/image1a.jpg">
</div><!--end header-wrapper-->
<div id="mobileNav" class="fluid">This is the content for Layout Div Tag "mobileNav"</div>
</div>
CSS
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 92.625%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
background-color:#FBFAF6;
}
#header-wrapper {
position:relative;
width: 100%;
padding:0;
margin:0;
}
#header-wrapper img {
position:relative;
z-index:1;
}
#rotation {
position:absolute;
top:0;
left:0;
z-index:5;
margin-left: 0;
width: 100%;
}
#Navigation {
display:none;
width: 31.0344%;
margin-left: 0;
}
#Weather {
text-align:right;
font-size:13px;
padding:5px 0px 10px 0px;
position:absolute;
z-index:50;
top:0px;
left:0;
background: #4b829f;
background: rgba(75,134,159, .8);
color: #ffffff;
margin-left: 0;
width: 100%;
}
#mobileNav {
z-index:0;
width: 100%;
margin-left: 0;
}
#LogoWrapper {
position:absolute;
top:0;
left:0;
z-index:1000;
}
#Logo {
}
#LogoTag {
font-size:12px;
color:#797979;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 93.4166%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
margin-left: auto;
}
#header-wrapper {
}
#rotation {
width: 100%;
margin-left: 0;
}
#Navigation {
display:block;
position:absolute;
z-index:100;
top:49px;
left:0;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
width: 23.7288%;
margin-left: 0;
}
#Weather {
width: 100%;
margin-left: 0;
}
#mobileNav {
margin-left: 0;
width: 100%;
}
#LogoWrapper {
}
#Logo {
}
#LogoTag {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 88.875%;
max-width: 1232px;
padding-left: 0;
padding-right: 0;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#header-wrapper {
}
#rotation {
width: 100%;
margin-left: 0;
}
#Navigation {
display:block;
position:absolute;
z-index:100;
top:49px;
left:0;
background: #4b8a9f;
background: rgba(75,134,159, .8);
color: #ffffff;
width: 24.0506%;
margin-left: 0;
}
#Weather {
width: 100%;
margin-left: 0;
}
#mobileNav {
width: 100%;
margin-left: 0;
}
#LogoWrapper {
}
#Logo {
}
#LogoTag {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}
rotating images CSS
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.caption {
position: absolute;
z-index:25;
display: block;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
margin:0;
text-align: center;
background: #4b829f;
background: rgba(75,134,159, .8);
color: #ffffff;
font-size:18px;
font-stretch:expanded;
}
Your #mobileNav is appearing behind all of the #header-wrapper content because all of the #header-wrapper content is using position: absolute;. Absolutely positioned elements like #Weather and #Navigation are removed from the flow of the document as if they were never there. You probably just want to float them into their positions, but if absolute positioning is required, then you'll need to account for them with some space in the parent element.
I am trying to insert a close button on top right of the hover image in CSS.
However the image appear in the middle of the hover image. I am unsure of which area i made a mistake.
jsfiddle
these are my css code , also i have insert them to jsfiddle for my demo
body {
margin: 0;
padding: 0;
background: #EEE;
}
#pagecenter {
background-color: transparent;
width: 1200px;
min-width: 1200px;
height: auto;
min-height: 100%;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
position: relative;
border-collapse: collapse;
}
.wrap {
overflow: hidden;
margin: 50px;
}
/*20 for 5 box , 25 for 4 box*/
.box {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
color: #FFF;
}
/*border width control*/
.boxInner {
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
overflow: hidden;
background: #66F;
}
.boxInner img {
height: 100%;
width: 100%;
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
/*This hover is for small image*/
.thumbnail:hover img{
cursor:pointer;
border: 1px solid transparent;
}
/*This hide the image that is in the span*/
.thumbnail span{
position: absolute;
padding: 5px;
visibility: hidden;
color: black;
text-decoration: none;
}
/*This is for the hidden images, to resize*/
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
width:100%; /* you can use % */
height: auto;
padding: 2px;
}
/*When mouse over, the hidden image apear*/
.thumbnail:hover span{
position:fixed;
visibility: visible;
max-width:600px;
top: 0;
left: 0;
right:0;
bottom:0;
margin: auto;
z-index: 200;
}
.close{
position:absolute;
right:-10px;
top:-10px;
display:none;
z-index:1;
}
.thumbnail:hover span .close{
display:block;
}
you will need to give width and height
JS Fiddle
.thumbnail span .close{
position:absolute;
right:-10px;
top:-10px;
display:none;
width:30px;
height:30px;
z-index:1;
}
I was looking the way to create image view as have Facebook or Google Plus but i can't put the image at middle of div.
This is my code:
.overflow {
background-color: rgba(0,0,0,.9);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.overflow .left-img-box,.overflow .right-content-box {
display: inline;
height: 100%;
}
.overflow .left-img-box {
display: block;
left: 0;
margin: auto;
position: absolute;
text-align: center;
top: 0;
vertical-align: middle;
width: 70%;
}
.overflow .right-content-box {
background: #fff;
position: absolute;
right: 0;
top: 0;
width: 30%;
}
.overflow .left-img-box img {
margin: auto;
max-height: 100%;
}
You can see the example: http://fiddle.jshell.net/N6md8/5/
You can do something css like:
img {
margin:auto;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
max-height:100%;
max-width:100%;}
reference: http://codepen.io/shshaw/full/gEiDt
I beleive you can go with position:fixed as well :)
I have been searching the web for a while now for an answer to my question. I would like to extend a div background-color beyond the div (and the container div as well) so it reaches the width of the browser. Like so http://vinnusal.is/
The problem with the example above is I'm using a padding/margin fix which creates an annoying scroll to the right. I have tried overflow without any luck.
I know this could be done with a container div that is 100% and nesting divs that are smaller. However I would like to use another way if possible, because this is my first shot at a fluid site with all complications that follow.
Thanks in advance,
Helgi
Here is the HTML markup:
<body>
<div class="gridContainer clearfix"> <!-- Container -->
<div class="gridContainer clearfix header" id="header"> <!--Header begins-->
<img src="pics/hvitt.png" alt="VFI Logo" name="logo" id="logo">
<!-- Menu Horizontal -->
... irrelevant markup for menu...
</div>
<!-- Header ends -->
<div class="gridContainer clearfix submenu" id="submenu"> <!-- Submenu begins -->
<h1><!-- InstanceBeginEditable name="title" -->Articles<!-- InstanceEndEditable --></h1>
And the CSS:
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 88.626%;
padding-left: 1.1869%;
padding-right: 1.1869%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#submenu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#article {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#leftColumn {
clear: none;
float: left;
margin-left: 2.6785%;
width: 100%;
display: block;
}
#rightColumn {
clear: none;
float: left;
margin-left: 2.6785%;
width: 100%;
display: block;
}
#header2 {
clear: none;
float: left;
margin-left: 2.6785%;
width: 100%;
display: block;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 91.4836%;
padding-left: 0.7581%;
padding-right: 0.7581%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#submenu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#article {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#leftColumn {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
}
#rightColumn {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
}
#header2 {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 78.9565%;
max-width: 1232px;
padding-left: 0.5217%;
padding-right: 0.5217%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#submenu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#article {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#leftColumn {
clear: none;
float: left;
margin-left: 1.3215%;
width: 100%;
display: block;
}
#rightColumn {
clear: none;
float: left;
margin-left: 1.3215%;
width: 100%;
display: block;
}
}
You can use the :before pseudo element with absolute positioning and negative z-index to extend the background color of a contained div the entire way to the edge of the page.
#container {
width: 100px;
margin: 0 auto;
background-color: #FFFFCC;
}
.stripe {
background-color:#CCFFFF;
height: 100px;
position: relative;
}
.stripe:before {
content:"";
background-color:#CCFFFF;
position: absolute;
height: 100%;
width: 4000px;
left: -2000px;
z-index: -1;
}
<div id="container">
<div>one</div>
<div class="stripe">two</div>
<div>three</div>
</div>
The accepted answer seems to rely on a fixed height, which I find rare in these days of responsive sites, so building on top of the answer given by Stephen Ostermiller (thanks!) The following code worked for me and surrounds objects of a dynamic height:
.container{
background-color:#000;
padding-bottom:30px;
}
.stripe {
background-color:#000;
position: relative;
display: grid;
}
.stripe:before {
content:"";
background-color:#000;
position: absolute;
height: 100%;
width: 200vw;
left: -100vw;
z-index: -1;
}
Kevin Powell made a Youtube Video about how to do this
https://www.youtube.com/shorts/81pnuZFarRw
All you have to do is add a class to the element and add a couple of lines of CSS! You're basically making a color the whole background and then clipping it based on the element.
CSS
.full-bleed {
box-shadow: 0 0 0 100vmax red;
clip-path: inset(0 -100vmax);
}
HTML
<div class="full-bleed"></div>
Boom, you're done!
Both solutions will cause an overflow.
try this:
.container{
background-color:#000;
padding-bottom:30px;
}
.stripe {
position: relative;
display: grid;
}
.stripe:before {
content:"";
background-color:#000;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
width: 100vw;
margin-left: -50%;
transform: translateX(-50%);
z-index: -1;
}
I want this image in the html tag to only fill the max-width of 320px like it's supposed to. However it's going beyond that. Horizontal scroll bars show up and image tiles for 166 more pixels. In the IOS simulator and my ipone All the other elements span the width correctly.
#media only screen and (max-width : 320px) {
html {
margin:0;
padding:0;
background: url('../_images/iphoneCardboard_flat.png')repeat;
}
Update: These are some tags that might be relevant.
#band1 {
position: absolute;
top:0;
left:0;
height:50px;
width:100%;
background-image: url('../_images/iphoneGradient.png');
z-index:-1;
}
.barbLogo {
position: absolute;
top:3px;
margin-left:165px;
width:320px;
}
#band2{
position: absolute;
top:-75px;
left:0;
height:50px;
width:100%;
background-image: url('../_images/iphoneGradient.png');
z-index:-1;
}
#gridBgContainer{
position: absolute;
margin:0;
top:50px;
left:0;
height:200px;
background:url('../_images/gridBg.png');
background-repeat: repeat;
display: table;
z-index: 1;
}
#wrapper {
position: relative;
top:0px;
left:0;
right:0;
margin: 0 auto 0 auto;
width:100%;
text-align: center;
z-index: 3;
}
#socialLinks {
position: absolute;
margin-top: 14px;
float:right;
right:0px;
}
#top-menu {
position: absolute;
top:0px;
left: 0px;
width:320px;
z-index: 100;
}
section#homeContent {
position: absolute;
top: 400px;
width:320px;
z-index: 10;
}
section#faqContent {
position: absolute;
top:900px;
width:320px;
z-index: 10;
text-align:left;
}
footer {
position: absolute;
font-size: 1.15em;
top: 1230px;
padding: 0 1% 0 1%;
width: 100%;
height: 75px;
text-align: center;
z-index: 10;
}
.footer{
text-align:center;
padding: 2% 0 0 0;
}
#band3{
position: absolute;
top: 1255px;
left:0;
height:50px;
width:100%;
background-image: url('../_images/iphoneGradient.png')repeat-x;
z-index: -1;
}
you should set the width property
#media only screen and (max-width : 320px) {
html {
margin:0;
padding:0;
background: url('../_images/iphoneCardboard_flat.png')repeat;
width: 320px;
}