Here : http://thunderstorm999.byethost9.com/
On resizing browser, menu icons on the top right position change it's position. If I resize the browser towards left then the top right menu icons shifts to left wherease i need the icons to be at the absolute position on the top right itself. It has to be static. I used absolute position to share class but then the icons shifts absolutely to left and then i have to give more than 1000px of margin left inorder to pull it to left. i
body{
margin:36px;
}
.logo{
float:left;
padding-left:100px;
}
.share{
list-style:none;
}
.share li{
display:inline;
float:right;
}
.share img{
margin-right:20px;
}
aside{
position:relative;
}
.navigation{
float:left;
list-style:none;
position:absolute;
text-align:center;
}
.navigation img{
margin-left:-30px;
margin-top: 30px;
}
.social{
position:relative;
}
.social_icons{
text-align:center;
position:absolute;
list-style:none;
top:480px;
left:-10px;
}
.social img{
margin-bottom:10px;
}
.main{
position:relative;
display:block;
padding:0;
}
.main-image{
position:absolute;
margin-left:100px;
margin-top:40px;
padding:0;
border-left:1px dotted red;
border-bottom:1px dotted red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Speck</title>
<link rel="stylesheet" type="text/css" href="normalize.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<header>
<div class="logo">
<img src="images\logo.png"/>
</div>
<ul class="share">
<li><img class="image1" src="images\fade.png"/></li>
<li><img class="image2" src="images\cart.png"/></li>
<li><img class="image3" src="images\share.png"/></li>
</ul>
</header>
<aside>
<ul class="navigation">
<li><img id="image1" src="images\explore.png"/></li>
<li><img src="images\material.png"/></li>
<li><img src="images\team.png"/></li>
<li><img src="images\contact.png"/></li>
<li><img src="images\merchandise.png"/></li>
</ul>
</aside>
<aside class="social">
<ul class="social_icons">
<li><img id="image1" src="images\fb.png"/></li>
<li><img src="images\vimeo.png"/></li>
<li><img src="images\linkedin.png"/></li>
</ul>
</aside>
<section class="main">
<div class="main-image">
<img class="image1" src="images/slides/circus-aerial-act.jpg" style="display: block;">
</div>
</section>
<footer>
</footer>
</body>
</html>
is there any better option? Please tell me where am I going wrong. I have used class 'share' in the html. Please follow the link above.
Use a fixed width on the share class and it will work:
.share {
list-style: none;
width: 1000px; // Example
}
Related
I'm trying to make a slider in a webpage, but overflow:hidden is hidding' everything instead just hide what comes out of the screen.
i need the images to be aligned and everything that comes out of the screen to be hidden.
My fiddle here:
HTML
<div>
<ul>
<li><img src="http://b-i.forbesimg.com/geristengel/files/2013/05/i-ella-fashion-closet.jpg" class="imgs"/></li>
<li><img src="http://cdn.playbuzz.com/cdn/2bff0e00-cbe8-49e5-85d4-7e4c052df449/f097abfe-d3d6-42c5-9768-11616bc985e2.jpg" class="imgs"/></li>
<li><img src="http://www.lakecityphotography.com/design/images/fashion.jpg" class="imgs"/></li>
<li><img src="http://www.thefashionhall.com.br/wp-content/uploads/2012/12/hnjh.jpg" class="imgs"/></li>
</ul>
</div>
CSS:
ul{
list-style:none;
}
li{
position:absolute;
}
.imgs{
height:130px;
width:180px;
float:left;
}
div{
overflow:hidden;
position:relative;
}
Fiddle:
https://jsfiddle.net/mkv9x2fg/2/
Try removing the position absolute from the li
ul {
list-style: none;
white-space:nowrap;
}
li {
display:inline-block;
}
.imgs {
height: 130px;
width: 180px;
}
div {
overflow: hidden;
position: relative;
}
<div>
<ul>
<li>
<img src="http://b-i.forbesimg.com/geristengel/files/2013/05/i-ella-fashion-closet.jpg" class="imgs" />
</li>
<li>
<img src="http://cdn.playbuzz.com/cdn/2bff0e00-cbe8-49e5-85d4-7e4c052df449/f097abfe-d3d6-42c5-9768-11616bc985e2.jpg" class="imgs" />
</li>
<li>
<img src="http://www.lakecityphotography.com/design/images/fashion.jpg" class="imgs" />
</li>
<li>
<img src="http://www.thefashionhall.com.br/wp-content/uploads/2012/12/hnjh.jpg" class="imgs" />
</li>
</ul>
</div>
EDIT: made the li inline-block and set the div to hide the overflow.
It's a little unclear what the OP is trying to do.
Try setting a div width like width: 200px; heigth: auto: max-height: 500px;
<html>
<head>
<style>
ul{
list-style-type:none;
font-size:0px;
letter-spacing:10px;
}
li{
display:inline-block;
}
</style>
</head>
<body>
<ul>
<li><img src="photo.jpg"></li>
<li><img src="photo.jpg"></li>
<li><img src="photo.jpg"></li>
<li><img src="photo.jpg"></li>
<li><img src="photo.jpg"></li>
</ul>
</body>
</html>
It's different in Firefox, Chrome and IE. In Firefox when I use font-size:0px and letter-spacing:10px, the <li> elements have the letter-spacing 10px but in Chrome and IE it doesn't work, why is that?
Since you have only images inside the list, try changing your CSS to :
ul, ul li {
list-style-type:none;
padding: 0;
margin: 0;
}
I would use the word-spacing property, and not the letter-spacing ;)
av been scratching my head because of this for too long.I would like to change the width and height of easy slider version 1.7,i have gone through the faqs part of this site after researching in so many other places and cudn't get a solution.Please help.
<!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>
<title>Pilot project</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>
<link href="pilotp.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="v1.7.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="header">
<div class="menu">
<ul>
<li>Home</li>
<span>
Web Hosting
Domain Registration
</span>
</li>
<li>Consultancy
<span>
I.S Audit
Information Security
</span>
</li>
<li>
Career's
</li>
<li>
Contact Us
</li>
<li>
Testimonials
</li>
</ul>
</div>
</div>
<div id="container">
<div class="slidercontainer" style="background-color:fuchsia;width:800px;height:300px"><!--Will hold the slider -->
<div id="content" style="background-color:yellow;width:800px; height:299px;">
<div id="slider" style="background-color:pink;width:800px;height:298px;">
<ul>
<li><img src="images/01.jpg" alt="Css Template Preview" /></li>
<li><img src="images/02.jpg" alt="Css Template Preview" /></li>
<li><img src="images/03.jpg" alt="Css Template Preview" /></li>
<li><img src="images/04.jpg" alt="Css Template Preview" /></li>
<li><img src="images/05.jpg" alt="Css Template Preview" /></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
this is the css
/* Easy Slider */
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider ul li, #slider2 ul li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:800px;
height:241px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:696px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(../images/btn_next.gif) no-repeat 0 0;
}
/* numeric controls */
ol#controls
{
height:28px;
margin-top:-20em;
margin-bottom:1em;
margin-right:0px;
margin-left:8px;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
}
ol#controls li
{
margin:0 15px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a
{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a
{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/*just added */
ol#controls { margin: -30px 0 0 0 !important; }
/* // Easy Slider */
See line 73-76 in the CSS file screen.css:
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
And also change the width of the container:
#container{
margin:0 auto;
position:relative;
text-align:left;
width:696px; /* change this */
background:#fff;
margin-bottom:2em;
}
I have fixed it and it involved changing (increasing or decreasing) the width and height of
#slider ul li
{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:796px;
height:246px;
overflow:hidden;
}
The width and height of the images are of importance also.
Thank you for you assistance!
In javascript file (easyslider.js) remove:
obj.width(w);
obj.height(h);
I am prototyping a Wordpress template and I'm trying to place the same elements on the header like this: http://dl.dropbox.com/u/768097/about.pdf
Here are the HTML and CSS files: http://acreedy.oliveandpickle.com/
I need 4 columns in the header and everything should be placed under the images.
HTML:
<div id="header">
<h1>Alan Creedy</h1>
<ul id="quickInfo">
<li class="mission">Mission Statement</li>
<li>Helping People Think for Themselves</li>
<li>1.919.926.0688</li>
<li>Email Me</li>
</ul>
<ul id="menu">
<li class="current">Home</li>
<li>About</li>
<li>Best Practice Ideas</li>
<li>Management Tools</li>
<li>Preneed</li>
<li>Case Studies</li>
<li>Recommended Resources</li>
<li>Think Tank Forum</li>
</ul>
</div>
CSS:
#header {
border-bottom:3px solid #1582AB;
height:200px;
margin:0 auto;
padding:46px 0 0;
width:1000px;
position:relative;
}
#header h1 {
background:url("images/alan_creedy_headshot_transparent.png") no-repeat left top;
font-size:40px;
height:140px;
padding:8px 0 0 215px;
margin:0;
}
#quickInfo {
position:absolute;
right:10px;
top:10px;
width:400px;
}
#quickInfo li {
list-style-type:none;
}
.mission {
font-size:18px;
}
#menu {
margin:0 auto;
padding:0;
width:1000px;
}
Floating left will most certainly fix your issue, though keep in mind whenever you add padding or margin to your floated element that you will have to adjust your width as well. I checked out your page and you didn't compensate that change. Fix the width accordingly and you should be good to go :D
~ Chris
http://twitter.com/TheCSSGuru
If you're using html5 then you could use aside or section elements instead of div's.
<style>
.column {
float: left;
width: 200px;}
</style>
<aside class="column">
Column1
</aside>
<section class="column">
Column2
</section>
<section class="column">
Column3
</section>
<section class="column">
Column4
</section>
I have an outer div, and inside of that, I have an inner div which contains a list of images. When the images are wider than the outer div, I want to have it scroll horizontally, but instead, it just puts the image on the next line instead of expanding. If I add many rows, the div does scroll vertically, but horizontally, it doesn't do it. This happens on every browser I've tried - Firefox, Chrome, IE, and Safari.
Here is the css:
#grid-container { left:33px; position:relative; width:300px; }
#grid { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul { width:305px; }
#grid-container li { float:left; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center; }
.image-row { float:left; margin-left: 10px; }
.grid-image { height:50px; margin-left:-20px; }
Here is the html:
<div id="grid-container">
<div id="grid">
<div id="row1" class="image-row">
<ul>
<li>
<img id="img1" class="grid-image" src="images/img1.jpg">
</li>
<li>
<img id="img2" class="grid-image" src="images/img2.jpg">
</li>
<li>
<img id="img3" class="grid-image" src="images/img3.jpg">
</li>
<li>
<img id="img4" class="grid-image" src="images/img4.jpg">
</li>
</ul>
</div>
<div id="row2" class="image-row">
<ul>
<li>
<img id="img5" class="grid-image" src="images/img5.jpg">
</li>
<li>
<img id="img6" class="grid-image" src="images/img6.jpg">
</li>
</ul>
</div>
</div>
</div>
The problem is img4 is showing on the second row (with img5 and img5 on the third row), even though it should on the first row and the grid div should scroll horizontally. It does scroll vertically. Can I force the div to expand? If I remove the width from the grid div, I do get the horizontal scroll bar, but the image is still on the second row.
Will this do? I simplified it somewhat.
CSS (you can remove the borders, they are just so you can see what is happening):
#grid-container {position: relative; width: 300px; height: 400px; overflow: auto; border: 1px red solid;}
#grid {border: 1px blue solid;}
#grid ul {height: 40px; list-style-type: none; white-space: nowrap; padding: 0; margin: 0; border: 1px green solid;}
#grid ul li {display: inline; padding: 0; margin: 0;}
#grid ul li img {height: 50px;}
HTML:
<div id="grid-container">
<div id="grid">
<ul>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
</ul>
<ul>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
<li><img src="testimage.jpg"></li>
</ul>
</div>
</div>
You need to put a white-space:nowrap; on the UL and LI tags. You also need the LI elements to be display inline rather than floating them.
CSS:
#grid-container { left:33px; position:relative; width:300px; }
#grid { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul { width:305px; }
#grid-container li {
display:inline;
list-style-type:none;
padding:5px 15px 5px 15px;
height:88px;
margin:0;
text-align:center;
}
ul, li{
white-space:nowrap;
}
HTML:
<div id="grid-container">
<div id="grid">
<div class="image-row">
<ul>
<li>
<img id="img1" class="grid-image" src="test.jpg" />
</li>
<li>
<img id="img2" class="grid-image" src="test.jpg" />
</li>
<li>
<img id="img3" class="grid-image" src="test.jpg" />
</li>
<li>
<img id="img4" class="grid-image" src="test.jpg" />
</li>
</ul>
</div>
<div class="image-row">
<ul>
<li>
<img id="img5" class="grid-image" src="test.jpg" />
</li>
<li>
<img id="img6" class="grid-image" src="test.jpg" />
</li>
</ul>
</div>
This works in latest versions of IE, FF, Safari and Chrome.
try this:
#grid-container li {
display: inline;
list-style-type:none;
padding:5px 15px 5px 15px;
height:88px;
text-align:center;
white-space: nowrap;
}
You're already on the right path: Your approach to set "float: left;" on the <li>s, in combination with setting "width: 305px" on the <ul>s should basically work to avoid float dropping.
However, a few things to check:
Are 305px really enough? (It must be at least as large as the combined width of the elements in row 1, including margins, paddings and borders) Try setting it to a much larger value. overflow: auto won't help, since the floats will always wrap instead of causing an overflow. Setting a large enough width works perfectly for me (at least in my own example).
Other things to try:
Try it without floating ".image-row".
Try setting a width on the images.
You have the id "row1" twice in your HTML - that's invalid.