I am sure this is a very confusing matter for most new developers.
And i am sorry if this subject was asked before, but i cant find a solution for a long time.
I am trying to create a video cover background, place some divs above it and then keep making divs under it.
Things become a little complicated when i started to work beneath the video cover.
- they appear beneath which is okay, but styling them with for example margins or placing tags affect immidiately the video cover div above which is confusing.
this is my code:
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="header-video" style="background: #0e284d url('https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/intro-video-poster.jpg?v=1.1.65') 50% bottom no-repeat;">
<video preload="none" poster="https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/empty.gif" autoplay loop>
<source src="https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/intro.mp4?v=1.1.65" type="video/mp4">
</video>
</div>
<div class="header-bg js-parallax" style="background: #0e284d url('https://cont-edu.technion.ac.il/wp-content/uploads/2016/04/intro-home.jpg') 50% 0 no-repeat;">
</div>
</div>
<div style="z-index: 100;">
<p>
some text here
</p>
</body>
</html>
preview pen
I am willing to place a video cover at the top of the sit. then add some content above the video. and then keep adding content under the video without affecting the positions and styles of the video and its above content.
any help would be aprriciated. thanks!
EDIT: By under the video i mean down the webpage..not actually under the video.
Not sure if this is the professional way to make it work.
I had to create another div under the video. and it also had to be with some content in it.
I have added a div with visibility set to hidden.
Then i could keep working on rest of the page.
I would appriciate any further comments about the topic and improvements.
thank you!
Related
I'm a newbie in the world of web development. So, please don't mind if this is a really dumb question but I was doing a project for Free Code Camp and I ran into this problem where I just couldn't get rid of the spaces on left and right.
Here is my pen which I'm coding:
http://codepen.io/K-Jabeen/full/oxOjjQ/
<section id="home">
<div class="container-fluid">
<center>
<br>
<img class="img-responsive" src="http://ivanmyc.site11.com/wp-content/uploads/2014/07/Web-Development_icon.png" />
<h1>Pixel Developers</h1>
<h4>Where pixel perfect web solutions are created...</h4>
<br>
<br>
<br>
<br>
<br>
</center>
</div>
</section>
Plz tell me how to solve this.
Thanks!
Remove the container-fluid class from the first div:
<div class="container-fluid">
...so it becomes:
<div>
Alternatively, you can add margin: 0 -15px; to the css of #home.
Your main page should have this css added to it: margin:0 auto;width:100%;The word 'auto' tells the browser to keep the main page centered no matter how wide the screen is. Width 100% tell the browser that image spans the screen from side to side. That should get rid of any side gaps. Make sure your code does not have any existing side margins or padding. If so, set it to zero.
I've been struggling with this for days now and I really can't work out how to add an overlay image on top of my full screen slideshow background.
I thought it would be as simple as placing a styled DIV around the supersized 'ul', but I can't even find where to do this.
Here is a link to my site so far: http://www.vinylsoundfiles.co.uk/autonamy
and here is a link to the pattern that I'd like to overlay: http://vinylsoundfiles.co.uk/autonomy/wp-content/themes/garnish/images/header-pattern-light.png
Any help would be MASSIVELY appreciated! Thanks in advance.
Below is my code as shown when I 'inspect element'. You can see the ul at the bottom, which is what I presume I need to put my styled div around, however I don't know where to find this ul element and even if I do find it, I'm not sure if this solution to my objective will work.
[code]
<!DOCTYPE html>
<html class="" lang="en-US">
<head></head>
<body class="home page page-id-45 page-template-default gecko layout-2cl">
<div id="container"></div>
<div id="fancybox-tmp"></div>
<div id="fancybox-loading"></div>
<div id="fancybox-overlay"></div>
<div id="fancybox-wrap"></div>
<ul id="supersized" class="quality" style="visibility: visible;"></ul>
</body>
[code]
I have a pre-code page coded as follows:
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video"></div>
<div class="content"></div>
</div>
</div>
Where linearBg is a gradient background, the back board of the website.
Wrapper is the container for the inner div's, and the rest are content oriented.
So I've already implemented this with styles and all sorts, but the thing is I want to add:
<div class="watermark"></div>
Underneath/behind both the content and video div, sort of like a reverse watermark,
I've tried z-indexing but I'm not an expert. Could you guide me on to do make this possible?
http://jsfiddle.net/nEWCP
All I need is to get the watermark behind both the video and content div's.
Something like this?
http://jsfiddle.net/yXTYM/3/
The trick is:
position: relative on the video and content div
position: absolute on the watermark div and no positioning, so that it starts where the previous element (nav) ended
height: 100% on the watermark so that it spans to the bottom of the wrapper
overflow: hidden on the containing div so that the watermark doesn't extend below it
Let me know if this is what you had in mind.
From your description, I don't think that you would even need a new HTML element. If you want a "reverse watermark" as you've described it, it sounds like you want a different background behind the content and video elements. Something different from the gradient.
Really all you need to do is define a class in your CSS that adds the watermark when you need it.
Here's a basic example. The orange color simulates your watermark behind only the video and content.
.watermark { background: url('/path/to/watermark.png'); }
<div id="linearBg">
<div id="wrapper">
<div class="logo"></div>
<div class="navigation"></div>
<div class="video watermark"></div>
<div class="content watermark"></div>
</div>
</div>
http://jsfiddle.net/82saE/
I think I have what you're after - a wrapping element that mirrors the dimensions of linearBg - giving you a gradient background with a repeating image as well.
A bit of head scratching going on here, so any pointers would be much appreciated!
I have a header div that has the property overflow:hidden. On the left of this header is the page title, and on the right a number of images. This works perfectly well and everything shows as it should.
However, I now need to wrap these images around div tags (they will become clickable, and updated via Ajax - so I need to define the postback div for each image). As mentioned, without wrapping the image around a div tag, they show fine. However, as soon as I add the div tags, they disappear (though still show in the page source). The div tags take the simple form of and no styling is associated with them.
I'm sure I'm missing something here, but for the life of me it's totally bypassing me right now!
Thanks :-)
Your question is bit unclear for me, any way if i understood your question
If you need to have click event you can use asp:ImageButton to hold the image.
if you really need to use div
<div class="header"> // this is the one with overflow hiddden
<div class="left"> // this div holds the page title ; float:left
<h1>Title</h1>
</div>
<div class="right"> // this div to hold the divs which contain images
// if all your images are same height set the same height to this div and float:right
<div class="image"> // this div holds the image; make float:left set height and width
<img/>
</div>
<div class="image">
<img />
</div>
<div class="image">
<img />
</div>
</div>
</div>
Hope this helps
This may be the simplest question ever, but try as I might I simply couldn't figure it out. I'm working on a website right now and I wish to use as few <div> elements as possible to keep the HTML pretty and easy to edit. At the moment I essentially have:
<html doctype etc etc>
<head>
<title and meta tags>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="body"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
Very simple and elegant, yes? However the client wants their header to consist of a single large image which contains their company name and logo. So my options were pretty clear - either use an <img> tag, or set the background-image property on the header <div>. However then I got to thinking about SEO. For Google's sake it would be nice if the header <div> contained an <h1> element with her website's title, but then this element would have to be hidden so that human users only see the background image.
Although if you were to use the display:none; css property then the entire <div> disappears, including the background. Is there a good way to hide the contents of a <div> without hiding the <div> itself?
Have you tried to apply the hide on the H1 itself?
<div id="header">
<h1>Company title</h1>
</div>
Your style would be: #header h1{display:none;visibility:hidden;}
UPDATE
Apparently, we're both just having one of those days. If you want to make the H1 truly SEO/Screen reader friendly, it would be better to do this with your CSS:
#header h1{
width:XXXpx;
hight:XXXpx;
background:url('image/location.png');
text-indent:-9999px;
overflow:hidden;
}
This way your text is actually there on the page and rendered, it's just kind of off screen.
You could replace #header div with h1 if you want this tag, set background image on said h1 and even put some text in it (company name) and use text-indent to hide it.
Plus, in your quest to minimize number of elements you can use body as a wrapper, and if you need full page background just set in on html element.
Set display: none on the H1 tag rather than the div, and use the background image on the div.