So I have created a slider for a homepage, that slides some images with a title and teaser text using jQuery. Everything works fine, and I went to check IE and found that IE 6 and 7 kills my slider css completely. I can't figure out why, but for some reason I can't hide the non active slides with overflow: hidden; I've tried tweaking the css back and forth, but haven't been able to figure out what's causing the problem.
I've recreated the problem in a more isolated html page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da" dir="ltr">
<head>
<style>
body {
width: 900px;
}
.column-1 {
width: 500px;
float: left;
}
.column-2 {
width: 200px;
float: left;
}
.column-3 {
width: 200px;
float: left;
}
ul {
width: 2000px;
left: -499px;
position: relative;
}
li {
list-style: none;
display: block;
float: left;
}
.item-list {
overflow: hidden;
width: 499px;
}
</style>
</head>
<body>
<div class="column-1">
<div class="item-list clearfix">
<ul>
<li class="first">
<div class="node-slide">
<img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
<div class="infobox">
<h4>Title 1</h4>
<p>Teaser 1</p>
</div>
</div>
</li>
<li>
<div class="slide">
<img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
<div class="infobox">
<h4>Title 2</h4>
<p>Teaser 2</p>
</div>
</div>
</li>
<li class="last">
<div class="slide">
<img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
<div class="infobox">
<h4>Title 3</h4>
<p>Teaser 3</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="column-2">
...
</div>
<div class="column-3">
...
</div>
</body>
</html>
I've tracked down that it is the
ul {
position: relative;
}
on the ul element that is causing the overflow: hidden not to work, but why that is, I don't know. Also this is needed to make the slider javascript work using the left attribute on the ul to slide it. Any ideas as to how you can fix this is most welcome.
It is a well-known bug in IE6 and IE7. To solve it, you need to add position:relative to the container. Since in your case body is the container, I'd suggest you add a div directly under the body and give it position:relative. It should solve your problem.
This problem is apparently a known bug for IE 6 + 7, which was fixed in IE8.
To avoid this, in this case you can replace:
ul {
left: -499px;
position: relative;
}
with:
ul {
margin-left: -499px;
}
This however gave some problems with the background I used on the infobox div, but nothing I couldn't solve with a few style hacks.
Related
I have a menu icon which is displayed when window reaches certain size.
Everything is fine but the position of this icon. I don't know how to get this to the right side of the site - the most favourable would be to define the right property.
Here's what it look like now:
And I would like it to be really close to the right boundary of the window.
Here's the code:
HTML:
<div class="header">
<div class="row">
<div class="col-sm-offset-1">
<img src="images/logo.svg">
</div>
<div class="col-xs-offset-1">
<div class="iconcont">
<a href="javascript:void(0);" class="icon" onclick="header()" >
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
</div>
<div class="menu" id="mainmenu">
Home
News
Members
History
Projects
</div>
</div>
</div>
</div>
CSS:
/* HEADER */
.header {
background-image: url("images/stars.png");
width: 100%;
height: 150px;
}
header img {
height: 100%;
width: 100%;
}
/* MENU */
.menu {
background-color: transparent;
overflow: hidden;
}
.icon {
display: none;
}
#media screen and (max-width: 1370px) {
.menu a {
display: none;
}
.icon {
display: block;
}
}
.iconcont {
top: 55px;
position: relative;
}
I tried to wrap it in div (iconcont) but the right or left property doesn't work as I want. I guess it's because the whole menu is "col-xs-offset-1" (Flexbox Grid) but I don't know how to fix this and not ruin everything else.
EDIT:
For anyonewondering I fixed it. I put the icon in another div col-offset-5 but AFTER menu. I don't know why I hadn't done it in the first place.
Maybe add an ID to the class you want special treatment for and then make an exception with that?
HTML
<div class="col-xs-offset-1" id="header-layout">
<div class="iconcont">
<a href="javascript:void(0);" class="icon" onclick="header()" >
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
</div>
<div class="menu" id="mainmenu">
Home
News
Members
History
Projects
</div>
</div>
CSS
#media screen and (max-width: 1370px) {
#header-layout
{ display: flex;
align-items: flex-end;
}
}
I am attempting to implement three images horizontally into a HTML website. However when i format it using CSS nothing is happening, I am very confused as it should theoretically work. I would greatly appreciate if anyone could help me out, thank you.
HTML page image part:
</p>
<div class="row">
<div class="column">
<img src="gosportSunset.jpg" alt="Sunset" style="width:33%">
</div>
<div class="column">
<img src="gosport.jpg" alt="Gosport" style="width:33%">
</div>
<div class="column">
<img src="gosportRace.jpg" alt="Race" style="width:33%">
</div>
</div>
</p>
CSS image formatting part:
/* Three image containers */
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
If the grid is not working try to add box-sizing: border-box; in .column
.column {
float: left;
width: 33.33%;
padding: 5px;
box-sizing:border-box; // important
}
Instead of using div structure you can try something with ul & li, also make use of "column-count" property using which you can define the number of columns you want in a horizontal row.
Refer link for more understanding about "column-count" property:
https://www.w3schools.com/cssref/css3_pr_column-count.asp
<!DOCTYPE html>
<html>
<head>
<style>
ul {
column-count: 3;
list-style: none;
}
</style>
</head>
<body>
<div class="row">
<ul>
<li>
<img src="gosportSunset.jpg" alt="Sunset "/>
</li>
<li>
<img src="gosport.jpg" alt="Gosport" />
</li>
<li>
<img src="gosportRace.jpg" alt="Race" />
</li>
</ul>
</div>
</body>
</html>
I've done a fair bit of searching online, but I'm unable to find the solution anywhere.
Does anyone know the best way to achieve the layout below responsively?
The HTML:
<div class="simple-gallery">
<div class="simple-gallery--preview">
<img src="http://placehold.it/657x400"/>
</div>
<div class="simple-gallery--thumbs">
<ul>
<li>
<img src="http://placehold.it/657x400"/>
</li>
<li>
<img src="http://placehold.it/657x400"/>
</li>
<li>
<img src="http://placehold.it/657x400"/>
</li>
</ul>
</div>
</div>
I've tried many many different ways to achieve this responsively through CSS including using Bourbon's Neat which got me the closest, however iconically it didn't "feel" very clean.
Thanks for all your help everyone. I think I may have posed the question a little wrong. By responsive I meant that it would allow all four images to scale proportionally (just learnt there's a difference between the words proportionate and proportional).
Heres my attempt which meets my requirements
/* quick and dirty reset */
* {
margin: 0;
padding: 0;
}
/* center element*/
body {
width: 960px;
margin: 0 auto;
}
/* actual code */
.simple-gallery {
width: 60%;
}
.simple-gallery img {
width: 100%;
}
.simple-gallery ul {
list-style-type: none;
line-height: 0;
}
.simple-gallery .simple-gallery--preview {
width: 74%;
float: left;
margin-right: 2%;
}
.simple-gallery .simple-gallery--thumbs {
width: 22.2%;
float: left;
}
.simple-gallery .simple-gallery--thumbs ul li {
margin-bottom: 10%;
}
<div class="simple-gallery">
<div class="simple-gallery--preview">
<img src="http://placehold.it/657x400" />
</div>
<div class="simple-gallery--thumbs">
<ul>
<li>
<img src="http://placehold.it/657x400" />
</li>
<li>
<img src="http://placehold.it/657x400" />
</li>
<li>
<img src="http://placehold.it/657x400" />
</li>
</ul>
</div>
http://codepen.io/anon/pen/YPZjdE
To test what I mean either change the width of the body or .simple-gallery and everything should maintain their ratios.
I'm certain it can be improved, even if it's only adapting it to use whole numbers.
Thanks again to all who replied, I'm definitely interested in seeing a better way of doing this which I know exists.
I'm sure there is a better way to do it but you can optionnaly go with this
.conjoined-input input[type="text"] {
min-width:80%;
}
.conjoined-input input[type="button"] {
float: right;
width:19%
}
It really depends on what you mean by "responsive" in this case. One would want the thumbnails to go underneath, others would want to just resize the preview.
In all cases you should investigate media queries. It is very flexible approach to manipulating elements depending on various conditions.
The simplest introduction ive seen is short video on youtube: https://www.youtube.com/watch?v=fA1NW-T1QXc
I also found useful this cheat sheet: http://mac-blog.org.ua/css-3-media-queries-cheat-sheet/
Since you used bourbon, you could also read about MQ in sass: http://css-tricks.com/approaches-media-queries-sass/
The other approach to learning media queries (IMO the best) is to look at the frameworks (bootstrap and foundation for example) and copy their solutions. They are flexible and tested by community.
PS. Ouh and i forgot to mention one more approach: Just use some responsive grid framework. You can customize your own version of bootstrap, foundation, grid960 etc. To suit your needs.
Try this :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
.simple-gallery{
position: relative;
z-index: 1;
}
.simple-gallery--preview{
width: 472px;
float: left;
min-height: 1px;
margin-left: 20px;
}
.simple-gallery--thumbs{
width: 380px;
float: left;
min-height: 1px;
margin-left: 20px;
}
.simple-gallery--thumbs>div{
position: relative;
overflow: hidden;
max-width: 100%;
margin-top: 9px;
}
.simple-gallery--thumbs>div:first-child{
margin-top: 0;
}
#media only screen and (max-width: 480px) {
.simple-gallery--thumbs>div:first-child{
margin-top: 9px;
}
.simple-gallery--thumbs>div>img{
width: 100%;
}
.simple-gallery--preview{
width: 100%;
}
.simple-gallery--thumbs{
width: 100%;
}
}
</style>
</head>
<body>
<div class="simple-gallery">
<div class="simple-gallery--preview">
<img src="http://placehold.it/540x417"/>
</div>
<div class="simple-gallery--thumbs">
<div><img src="http://placehold.it/380x133"/></div>
<div><img src="http://placehold.it/380x133"/></div>
<div><img src="http://placehold.it/380x133"/></div>
</div>
</div>
</body>
</html>
Please try something like this...
<div id="space">
<div id="large"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
</div>
DEMO
I think this give you the structure what you need.
I am new to html,css and am currently working on a page.
I am unable to align the menu at the right bottom side.It is clashing with my 3 pictures in the middle. Also logo at the bottom left keeps changing when ever I make changes to the images at the centre. Kindly go through the code and let me know.
body {
margin: 0;
padding: 0;
}
.background{
position: relative;
}
.background .text {
position: absolute;
top: 300px;
left: 300px;
width: 300px;
}
.logo {
position:absolute;
left: 10px;
bottom: 10px;
}
#bottomnav ul {
list-style: none;
display: inline-block;
width: 100%;
position: absolute;
right:0px;
bottom:0px;
}
#bottomnav ul li {
width: 0%;
float: right ;
text-align:right;
}
.images{
width:250;
height:250;
display:inline;
float:right;
border:2px solid #FFF;
margin-top:300px;
}
<body>
<div class="background">
<img src="images/landing_page.png"/>
<div class="text">
<h1>welcome</h1>
<p>office</p>
<p>ink</p>
</div>
<div class="logo"> <img src="images/logo_03.png"/> </div>
<div class="images">
<img src="images/top1.jpg" width="400" style="float:right"/>
<img src="images/top2.jpg"width="400" style="float:right"/>
<img src="images/top3.jpg" width="400" style="float:right"/>
</div>
<div id="bottomnav">
<ul>
<li>Home</li>
<li>About </li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
Divi,
check out clearfix.
http://nicolasgallagher.com/micro-clearfix-hack/
You will need to apply the fix to the image parent container (.images).
Also you are using a lot of absolute positing, when it is not necessarily needed.
You could float the logo left and image container right, while applying an explicit width to each.
Also why do you have .images set to 250 width, and images are 400 width?
I am unsure if this is the answer you're looking for, but this solution solves the problem you were having regarding the menu not showing up on the bottom right hand side (I think is what you were trying to achieve with some of your css): http://jsfiddle.net/swm53ran/72/
I reorganized the structure of your html a little bit because you said the logo should be at the bottom (I'm assuming below the other larger pictures).
<div class="background">
<img src="images/landing_page.png"/>
<div class="text">
<h1>welcome</h1>
<p>office</p>
<p>ink</p>
</div>
<div class="images">
<img src="images/top1.jpg" width="400" style="display:inline-block;"/>
<img src="images/top2.jpg"width="400" style="display:inline-block;"/>
<img src="images/top3.jpg" width="400" style="display:inline-block;"/>
</div>
<div class="logo"> <img src="images/logo_03.png"/> </div>
<div id="bottomnav">
<ul>
<li>Home</li>
<li>About </li>
<li>Contact Us</li>
</ul>
</div>
</div>
heres the css:
#bottomnav {
display:inline-block;
float:right;
}
#bottomnav ul {
list-style: none;
}
#bottomnav ul li {
display: inline-block;
}
Useful tip: when dealing with css, less is more, try to be concise in your styles so that you dont have to write over styles with other styles and force your way around the DOM.
hope this helps/gets you pointed in the right direction.
I'm trying to lay the header of my page out so that it looks like this:
I would like to avoid using tables if posible. I'm html and css beginer co I cannot get it working :(.
This is my best try till now:
Html:
<div class="rightAlign" >
<div class="notificationArea">
<img src="../bigHeaderImage.png" />
</div>
<div>
<div>
<img src="../smallImage.png" />Some info<br/>
Other info
</div>
<div>
<div class="ignoreRightAlign">
<a href="#" >Menu1</a>
<a href="#" >Menu2</a>
</div>
<a href="#" >Menu3</a>
</div>
</div>
</div>
CSS:
.rightAlign
{
clear: both;
text-align: right;
}
.ignoreRightAlign
{
float: left;
}
It does not work as desired of cause: Menu line is not on the bottom aligned to bottom of "Big header picture".
Thank you for any help, ideas and advices
To get your menu to line up with the bottom of your big image though you need to absolutely position the menu items within a relative parent. I've simplified it a bit, but here are the necessary pieces to make it happen:
<html>
<head>
<title>test</title>
<style type="text/css" media="screen">
.right
{
float: right;
}
.header
{
position: relative;
}
.menu
{
position: absolute;
bottom: 0;
right: 0;
left: 250px;
}
.info p
{
float: right;
}
.rightHeader
{
float: right;
}
</style>
</head>
<body>
<div class="header">
<img src="bigimage.png" />
<div class="rightHeader">
<div class="info">
<img src="smallimage.png" /><p>Some info <br /> Other info</p>
</div>
<div class="menu">
Menu 3
Menu 1
Menu 2
</div>
</div>
</div>
</body>
</html>
W3 visual formatting model is also a great read for learning how CSS layouts work.
Also:
Have you tried CSS "position"?
.smallPicture
{
position: absolute; //Or relative (among other options)
right: 15px; //Or whatever it needs to be
top: 0; // Can be in ##px or ##em or %
}