I have header with an image, but when I shrink the window, text below the image appears at right side of image. I try clear: both and it doesn't work, but after adding div with height 100px it works properly. I use Bootstrap class for responsive layout.Thanks in response.
Edited: JSfiddle link
HTML:
<header class="row-fluid">
<div class="col-md-12">
<img src="img/logo.png" alt="Pastegraph" style="float: left;">
</div>
<a href="https://github.com/misteraverin/pastegraph">
<img class="fork" src="img/forkme.png" alt="forkme">
</a>
<!-- <div style="height:100px;"></div> -->
</header>
CSS:
img.fork {
position: absolute;
top: 0;
right: 0;
}
Screenshot of the text appearing near the image:
Related
Hello I am making a picture slider (like Netflix) by using swiperjs. But I have issues with my next and prev buttons. With the CSS I have, the buttons take 100% height of the whole screen and don't stick next to the slider.
.thumbTiles .swiper-button-prev,
.thumbTiles .swiper-button-next {
height: 100%;
width: 4%;
width: calc(4% - 5px);
top: 0;
bottom: 0;
margin: 0;
background-color: rgba(20, 20, 20, 0.5);
}
<section class="thumbSection">
<h2 class="thumbTitle">Popular Now</h2>
<div class="thumbTiles swiper-container">
<!-- Navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<a class="thumbTile" href="#">
<img class="thumbTile__image" src="https://imagelink" alt="The Queen's Gambit">
</a>
</div>
<div class="swiper-slide">
<a class="thumbTile" href="#">
<img class="thumbTile__image"
src="https://imagelink
alt="Dark">
</a>
</div>
With this code the navigation buttons appear like this (I don't know if it's clear on the image but the Next & Prev Buttons taking 100% height of the page.
Next & Prev Buttons taking 100% height of the page
Do you know how can I make them stick next to the slider and 100% height of their parent Div (like on the Netflix web page) instead of the whole screen ?
I used the code from this guy's link (https://jsfiddle.net/iamstratos/oudachrn/1/) but when I tested it he have the same issue as me.
Thank you for the help :)
Trying to build a webpage where I have half page image and other half text.
So far this is what I have, I have it working, just when I shrink the page, the text overlaps the photo.
.css file:
.z-img{
padding: 0 0 10px 0;
border: none;
border-radius: 0;
position: fixed;
}
.z-content {
padding: 70px 0 10px 0;
color: #c0d1ca
}
html file:
<div class="container-fluid">
<div class="row">
<div class="span6">
<div class="z-img">
<img src="...." width="732" height="432">
</div>
</div>
<div class="span6 text-center">
<div class="z-content">
<div class="well">
<h2> About Me: </h2>
</div>
<div>
<blockquote>
<p>............</p>
</blockquote>
</div>
</div>
</div>
</div>
I want to ensure when I shrink the page lets say on a mobile, I do not want the text overlapping the image. Also possible to have the image shrink and enlarge according to the screen size instead of having it as a static size? I do want it to cover half the page though
I have figured it out, I just had to add the class="img-responsive" tag to my photo tag.
Hy. I work with 960gs (12 columns) and I try to put the title after the logo in the bottom part of it. The solution I find doesn't work too good because it place the title under logo.
HTML:
<div id="header" >
<div class="container_12">
<header>
<div class="grid_4">
<a href="index.html" title="Pagina principala - CRCE" rel="home">
<img src="images/CRCE_logo.png" alt="logo CRCE"/>
</a>
</div>
<div id="titlePosition"class="grid_10">
<a href="index.html" title="" rel="home">
<img src="images/titlu_crce.png" alt=""/>
</a>
</div>
</header>
</div>
</div>
CSS:
#header{
background: #798AF7;
background-repeat: repeat-x;
height: 205px;
overflow: visible;
border-bottom: 30px solid #37459D;
display: block;
}
#titlePosition{
position: bottom;
}
The logo is on 4 columns and the title on 10 columns. Also I will put the language chooser(selector) and FB logo in the right top so I think that's a challenge. I've attached an image for details too, see how I want to look at the final header
I don't think you can use the columns in that fashion, it should sum to 12.
Because the logo from first Column overlaps on the second. Make your logo column as just 2 cols and have your title as 10 cols.
<div class="grid-container">
<div class="grid-2 logo-wrapper">
<img class="logo" src="logo.jpg">
</div>
<div class="grid-10">
<!-- Look how the grids can be nested further-->
<div class="grid-container">
<div class="grid-10 text-right"> Language selector</div>
<div class="grid-10 text-right"> Facebook </div>
<!-- You can use top margin -->
<div class="top30px grid-12"> Title</div>
</div>
</div>
</div>
Now set the logo image to absolute position
.logo
{
position:absolute;
left:0;
right:0;
}
Then for the parent around the .logo set it to relative.
.logo-wrapper
{
position:relative;
}
I have given my solution considering pseudo grid system, because i haven't used 960gs - grid system.
General Idea:
You can consider that following 3 element are in different rows occupying 10 columns
language selector
Facebook icon and
Site Title
Tips:
Avoid absolute position for Title as you can achieve it through
nested grids as shown in the above HTML
Use top margin to push the
title further below to the required position.
Having issues with what I assumed would be a simple task, maybe just need another set of eyes.
We have a banner image and on the right side is a computer monitor. the "screen" has been cut out so that portion of the banner is transparent (.PNG).
I need to place a carousel behind the cutout image, so that it gives the impression that the carousel is "playing" on the screen.
Right now I am trying to do this with Slick Carousel but if anyone else has a recommendation for a better carousel that is also responsive I'm open.
http://codepen.io/tconroy/pen/ZYRaRd
Above is a codepen of what I have so far -- The main issue I am encountering is that the slides are in front of the image content (overlapping the image), when it should be behind the image content (playing behind the banner, and just visible through the transparent "gap" in the screen).
I've used placeholder images for the slides, however those are the actual dimensions of each image we will be using. The images should be "centered" in their slide, with the background color visible. (basically the images are being overlaid onto the colored slides).
HTML
<div class="inner-wrap">
<header>
<div class="contain-to-grid">
<div class="inner-carousel-wrapper">
<div class="inner-carousel">
<div class="slide yellow">
<img class="" src="http://lorempixel.com/350/347/sports" alt="">
</div>
<div class="slide purple">
<img class="" src="http://lorempixel.com/416/347/abstract" alt="">
</div>
<div class="slide red">
<img class="" src="http://lorempixel.com/381/346/city" alt="">
</div>
<div class="slide blue">
<img class="" src="http://lorempixel.com/338/346/transport" alt="">
</div>
<div class="slide green">
<img class="" src="http://lorempixel.com/343/347/nature" alt="">
</div>
<div class="slide orange">
<img class="" src="http://lorempixel.com/361/347/cats" alt="">
</div>
</div> <!-- .inner-carousel -->
<img src="http://i.imgur.com/HodKXD4.png">
</div> <!-- .inner-carousel-wrapper -->
</div>
</header>
</div>
<section class="container">
Notice how the "slides" above are overlapping the ipad square (bottom right of monitor)? The slides should appear "behind" the ipad.
</section>
SCSS
$lesson-blue: #33B2E6;
$lesson-green: #26B789;
$lesson-orange: #F58231;
$lesson-yellow: #FFD648;
$lesson-red: #E43533;
$lesson-purple: #616373;
.inner-carousel-wrapper {
background: black;
}
.inner-carousel {
position: absolute;
float: right;
margin-left: 54.3%;
margin-top: 6.0%;
width: 45.7%;
height: 76%;
}
.inner-carousel .slide {
&.blue {background: $lesson-blue; }
&.green {background: $lesson-green;}
&.orange {background: $lesson-orange;}
&.yellow {background: $lesson-yellow;}
&.red {background: $lesson-red;}
&.purple {background: $lesson-purple;}
img {
margin: 0 auto;
padding: 6%;
width: 60%;
}
}
JS
$('.inner-carousel').slick({
accessibility: false,
autoplay: true,
autoplaySpeed: 2500,
arrows: false,
draggable: false,
slide: '.slide'
});
I'm not sure if this is an option for you or not, but you can assign an id to your background image, give it absolute positioning and then alter its z-index. Something like this should work:
HTML
<img id="bg" src="http://i.imgur.com/HodKXD4.png">
CSS
#bg {position:absolute;z-index:2;}
http://codepen.io/anon/pen/ZYRaNE
A couple things together fix this:
.contain-to-grid {
/* background: #333; */
}
.inner-carousel-wrapper {
/* background: black; */
}
.inner-carousel {
z-index: -1;
}
Demo
You'll need to adjust sizing/position a bit, but it should work otherwise.
I am making a responsive site for a mobile. The HTML should not be changed but the css should handle the positioning of the elements so as to not effect the main site.
BACKGROUND INFORMATION
The desktop site has a navigation bar set at the bottom of the screen with a contact number below it whilst the site title and logo is placed at the top. For the mobile this is unfeasable so I've put the navigation bar at the top of the screen alongside the title and logo. The number has remained at the bottom as desired. Between the top header and the contact number at the bottom, I have placed the bulk content area. The content is being displayed correctly by using the height:calc(100% - 336px) property to set the content wrapper 100% - the total height of the top header and the contact number. The content wrapper is then set absolute to a position top: 176px to meet the bottom of the top header. The content inside the content wrapper does not fit inside the wrapper so overflow-y:scroll is used to ensure that the user can scroll through the content area.
PROBLEM
The content area within the wrapper is not scrolling.
CODE
CSS
.PageContentBox {
top: 176px!important;
height: calc(100% - 336px);
z-index: 12;
width: 100%;
overflow-y: scroll;
left: 0px!important;
}
#content {
padding: 0;
height: 100%;
overflow-y: scroll; /*This here for testing purposes*/
}
HTML
<div class="PageContentBox">
<div id="content">
<div id="pages">
<div class="page" id="page0">
<h1>HEADER</h1>
<div class="grid grid-pad" style="padding: 0 0 0 0!important">
<div class="row" id="r1">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Applications</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
<div class="row" id="r2">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Performance</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
<div class="row" id="r3">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Specifications</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to set position on your .PageContentBox: top: and z-index don't work unless you define position.
Here is you updated Fiddle with the position set to absolute.
In your question you save already given the solution just use that only.
You have specified that absolute but not used it in css. Just use it and it will work no need to put the #content css.
css should be like this:
.PageContentBox {
position: absolute;
top: 176px!important;
height: calc(100% - 336px);
z-index: 12;
width: 100%;
overflow-y: scroll;
left: 0px!important;
}
See the example
I am getting desktop and mobile view like this and I think its fine. What you say?