I have a page that displays a span and an image, the idea is that the span appears above the image so that the image appears behind the transparent parts of the text: http://www.luckysaddleupholstery.com.
The webpage is fairly simple:
<body>
<div id="content" >
<div id="nav">
<ul id="pages">
<li class="selected">
LUCKY SADDLE</li>
<li >
designs</li>
<li >
info</li>
<li >
contact</li>
</ul>
<ul id="subpages">
</ul>
<div id="layoutItem40" class="layoutItem textItem titleText" style="left: 0px; top: 196px; width: 556px;"><span style="font-size: 42px; line-height: 42px; color: #B84C59;">VINTAGE. MODERN. TRADITIONAL. BY HAND. STUFFING. HIERLOOM. nostalgic. shabby. recycle. textiles. worn. forgotten. spring. unique. restore. </span>
</div>
<img id="logo" src="/static/img/logo.png"/>
<div id="contact"><strong>T</strong> 07961 706 522<br /><span><strong>E</strong> ruth#luckysaddleupholstery.com</span>
</div>
</div>
<div id="bodyWrapper" style="top: 14px; position: absolute;">
<div id="body" style="position: relative;">
<div id="layoutItem49" class="layoutItem imageItem" style="left: 288px; top: 0px; width: 748px;">
<img src='/static/media/imgs/Richard-Moore-Chair-Main.jpg' />
</div>
</div>
</div>
</div>
</body>
</html>
The relevant parts of the css:
.layoutItem {
position: absolute;
margin-top: 3px;
margin-left: 1px;
}
.textItem span {
z-index: 10;
margin-top: 2px;
position: relative;
}
.imageItem img {
z-index: 1;
position: relative;
}
#nav {
width: 172px;
height: 100%;
top: 0px;
position: fixed;
padding-left: 1px;
}
There is more css that effects the elements and their parents but this is all text styling, rather than positioning.
The concept is that the large text in the nav column overlays the body div - which contains the image, allowing the image to be scrolled underneath.
The image and text are rendered from a CMS system which is why the html is slightly convoluted, although very customisable!
The renders fine in Firefox, but recently seems to have become broken in recent versions of Safari / Webkit.
Related
This bit works fine in Chrome, but the links don't work in IE or Edge unless I turn off position: fixed. Anyone have any ideas? I've searched for all kinds of similarly-worded questions, and nothing has proved helpful. Not sure why having position: fixed disables any interactivity in IE.
<style>
.act-nav {
position: fixed;
height: 100%;
top: 273px;
width: 230px;
background-color: #000;
text-align: center;
}
.act-nav a {
display: block;
margin: 10px;
width: 210px;
}
</style>
<div>
<div class="act-nav">
<a class="act-button-yellow act-button" href="#map">Map</a>
<a class="act-button-yellow act-button" href="#stations">Stations</a>
<a class="act-button-yellow act-button" href="#talks">Talks</a>
<a class="act-button-yellow act-button" href="#reqs">Open Reqs</a>
</div>
</div>
<div role="main" style="min-height:1000px;max-width:10em;margin:1em auto;background:red">this is the main content</div>
<ul role="navigation" style="position:fixed;left:0;top:0;height:100%;width:10em;background:orange">
<a><li>menu item</li></a>
<a><li>menu item</li></a>
</ul>
At this site, there is a div.social below the Online Bookings at top right of the screen.
http://imgur.com/a/QhlIL
Note: I've not been able to upload images to SO for months - always says the image is too large (> 2MB) when it is 140 KB.
For some reason .social is not displaying, nor its sub-elements:
<div class="social">
<a title="Trip Advisor" href="#" target="_blank">
<div class="tripAdvisor"></div>
</a>
<a title="Facebook" href="#" target="_blank">
<div class="facebook"></div>
</a>
<a title="Instagram" target="_blank" href="#">
<div class="instagram"></div>
</a>
<a title="YouTube" target="_blank" href="#">
<div class="youtube"></div>
</a>
</div>
<style>
.headRight .tripAdvisor {
background: url(../images/social/tripadvisor.png) no-repeat;
width: 28px;
height: 22px;
}
</style>
.social is set to display: block; and there is enough room to fit the icons in.
Help appreciated.
Just checked the bug on your website.
You must apply the style to the child divs of .social
.social div {
display: inline-block;
margin-right: 15px;
display: inline; // remove this line
zoom: 1;
}
remove the
"display: inline"
Just keep
.social div {
display: inline-block;
margin-right: 15px;
zoom: 1;
}
from that class. Will work perfectly.
Here is the repository for my personal website: https://github.com/flakpanzer40/flakpanzer40.github.io
As you may notice, the particles I've used are simply showing below my name, image, and description. I've tried numerous times to overlap them so that the particles happen in the back, but to no avail. I've tried absolute positions, z-index, re-arranging the DIVs, etc. I'm terrible at CSS.
Can anyone help?
Please add following styles:
.container {
/*other css*/
position: relative;
z-index: 1;
}
.particles-js-canvas-el {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
Use the following Code:
HTML:
<div id="particles-js" style="">
<canvas class="particles-js-canvas-el" width="1903" height="952" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"></canvas>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/EvanRen.jpg" alt="Evan Ren" style="width:500px;height:600px;border:5px solid white;border-radius: 50%;">
<div class="intro-text">
<span class="name">University of Waterloo Computer Science</span>
<hr class="star-light">
<span class="skills">Problem_solving expert - Hardworking - Passionate</span>
</div>
</div>
</div>
</div>
</div>
CSS:
#particles-js {
width: 100%;
height: 100%;
background-color: #13717c;
position: relative;
top: 0;
}
It is important that the parent (#particles-js) has position: relative so that you can use absolute positioning for the children.
I have seen this question have been asked many times, but mine is a little complicated.
I am using bootstrap on my website, and basically, I am trying to join two images one half is a customer image, other half is a business image. What actually I'd like is, when one hover overs the first half i.e the customer image, the second half i.e the business image should turn to the second half of the customer image and the vice versa when someone hovers over the business image.
Here's my HTML code.
<div class="pics">
<div class="1half">
<div class="col-sm-2" style="padding-right: 0;" id="b1">
<img src="image/b1.png" alt="" width="340px" style="float: right;">
</div>
<div class="col-sm-2" style="padding-right: 0; display: none;" id="c1">
<img src="image/c1.png" alt="" width="340px" style="float: right;">
</div>
</div>
<div class="2half">
<div class="col-sm-2" class="flash" style="padding-left: 0;" id="c2">
<img src="image/c2.png" alt="" width="338px">
</div>
<div class="col-sm-2" class="flash" style="padding-left: 0; display: none;" id="b2">
<img src="image/b2.png" alt="" width="338px">
</div>
</div>
In the above code, what I want is when someone hovers over #b1: #c2 should go away, and #b2 should be visible. I tried implementing CSS changes but it doesn't work.
I have added the link on JSfiddle here. http://jsfiddle.net/2R5bq/
Basically on hover, both should be the same.
No need for so many div's. One main wrapper, two image wrappers/masks is all you need. See this JSFiddle a threw together.
HTML
<div id="imageWrapper">
<div id="imageLeftImageWrapper">
<image src="http://lorempixel.com/320/180/animals/" />
</div>
<div id="imageRightImageWrapper">
<image src="http://lorempixel.com/320/180/cats/" />
</div>
</div>
CSS
#imageWrapper {
position: relative;
width: 320px;
height: 180px;
}
#imageWrapper #imageLeftImageWrapper {
position: absolute;
top: 0px;
left: 5px;
width: 160px;
height: 180px;
overflow: hidden;
}
#imageWrapper #imageRightImageWrapper {
position: absolute;
top: 0px;
right: 0px;
width: 160px;
height: 180px;
overflow: hidden;
}
#imageWrapper #imageRightImageWrapper img {
position: absolute;
right: 0px;
}
#imageWrapper #imageLeftImageWrapper:hover,
#imageWrapper #imageRightImageWrapper:hover {
width: 320px;
z-index: 1;
}
I have floated two elements right in the header of my website which are <div id="twitter"> and <div id ="navbar>, but there appearance becomes skewed when I view them in IE6 and IE7. I believe that I either need to clear the floated elements or apply a clearfix but I am unsure as to where.
here is an image of the issue in IE6 and IE7:
This is the desired result as it would appear in modern browsers.
Here is a link to the web page: http://www.bestcastleintown.co.uk/pg/
CSS:
#twitter {
background: red;
float: right;
height: 40px;
margin-bottom: 40px;
width: 200px;
}
#navbar {
font-size: 2.2em;
float:right;
}
HTML:
<div id="main_header">
<div id="inner_main_header">
<div>
<div id="main_logo">
<div class="home_page_logo left">
<img src="PG_awards_logo.gif">
</div>
</div>
<div>
<div id ="twitter" class="padall">
Follow us
</div>
<div id ="navbar" class="right">
<ul class="nav NG">
<li>home</li>
<li>enter</li>
<li>categories</li>
<li>judging</li>
<li>sponsorship</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Change #navbar style to this:
#navbar{
font-size: 2.2em;
float: right;
width: 60%;
overflow: auto;
}
Just give the #navbar some width and overflow other than visible.