This is the current state:
and I want it like this:
I have done editing through photoshop to show my desired output. I have tried many things but i'm not successful.
This is the HTML:
<body>
<header>
<h1>Maxtergo - Guaranteed Perfect Product</h1>
<nav class='main-menu'>
<ul>
<li>
<a class='active' href='#'>Home</a>
</li>
<li>
<a href='#'>Portfolio</a>
</li>
<li>
<a href='#'>Services</a>
</li>
<li>
<a href='#'>Feature</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>Help</a>
</li>
</ul>
</nav>
</header>
<div id='slider'>
<div id='bannerscollection_zoominout_opportune'>
<div class='myloader'></div>
<!-- CONTENT -->
<ul class="bannerscollection_zoominout_list">
<li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText2" ><img src="images/02_opportune.jpg" alt="" width="2500" height="1172" /></li>
<li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText3" ><img src="images/03_opportune.jpg" alt="" width="2500" height="1172" /></li>
<li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText4" ><img src="images/04_opportune.jpg" alt="" width="2500" height="1172" /></li>
<li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText5" ><img src="images/05_opportune.jpg" alt="" width="2500" height="1172" /></li>
And no css is on the slider.
and this is header CSS:
header {
overflow: hidden;
padding: 25px 0px;
width: 960px;
margin: 0 auto; }
To make sure your header is shown above add z-index
header {
z-index: 99999;
overflow: hidden;
padding: 25px 0px;
width: 960px;
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
Firstly wrap up your both of your <header> and "slider" inside a
wrapper. Make sure that you have to provide it position "relative".
After that you have to go for making <header> as position absolute and
provide height and width as per your requirements. Then you must have to
add z-index to <header>. your <header> styles we will code here'll
look like this:
header {
position:absolute;
top:0;
bottom:auto;
left:0;
right:0;
margin:auto;
width:100%;
height:auto;
}
Related
I have a light slider with different images with different heights. If I set isAdaptiveHeight set to true then it will automatically adjust the height according to image but this looks not good to me.
I want to set the fixed height of the image and if any image is small then I want to set that image in the center of fixed height. This is my fiddler: http://jsfiddle.net/mbjvc5u8/1/.
The first image is small and others are large so I don't want to adjust UI. I want a fixed height of lightslider with a centered image. I have tried but I am not able to do it.
I hope that this will work for you:
$('#lightSlider').lightSlider({
gallery: true,
item: 1,
loop: true,
slideMargin: 0,
thumbItem: 9,
onSliderLoad: function() {
$("img").addClass("preferredHeight");
}
});
.demo {
width: 420px;
}
ul {
list-style: none outside none;
padding-left: 0;
margin-bottom: 0;
}
li {
display: block;
float: left;
margin-right: 6px;
cursor: pointer;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.preferredHeight {
max-height: 127px;
position: relative;
left: 50%;
transform: translate(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
<div class="demo">
<ul id="lightSlider">
<li data-thumb="http://sc.reel-scout.com/up_images/2/2650782.jpg?10/24/2019 5:31:11 AM">
<img src="http://sc.reel-scout.com/up_images/2/2650782.jpg?10/24/2019 5:31:11 AM" />
</li>
<li data-thumb="http://sc.reel-scout.com/up_images/1/2650811.jpg?10/24/2019 5:31:11 AM">
<img src="http://sc.reel-scout.com/up_images/1/2650811.jpg?10/24/2019 5:31:11 AM" />
</li>
<li data-thumb="http://sc.reel-scout.com/up_images/5/2650815.jpg?10/24/2019 5:31:11 AM">
<img src="http://sc.reel-scout.com/up_images/5/2650815.jpg?10/24/2019 5:31:11 AM" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" />
</li>
</ul>
</div>
Am New to Asp.net and CSS.
I Need to Show Horizontal Menu only image like this
image 1 image 2 image 3 image 4
So I tried like this
CSS
#UlIcon
{
height: 100%;
list-style:list-style-image;
text-align:center;
padding-left: 5px;
}
#UlIcon li { display:inline; width : 100px; height:100%;}
#LiNew
{
list-style-image:url(/IMG/New.png);
}
#LiSave
{
list-style-image:url(/IMG/Save.png);
}
#LiDelete
{
list-style-image:url(/IMG/Delete.png);
}
#LiLog
{
list-style-image:url(/IMG/New.png);
}
#Padding-right {padding-right:15px;}
ASP.NET CODE
<div id="DivMenuRight">
<ul id="UlIcon">
<li id="LiNew"></li>
<li id="LiSave"></li>
<li id="LiDelete"></li>
<li id="LiLog"></li>
</ul>
</div>
But it shows empty. If I Remove display: inline in li css, the image shows vertically in center of the div. What am doing wrong here?
How do I get the solution?
Am using Visual Studio 2008 and CSS2.1
the css list-style-image will place an image next to each point or listed text. it act as an image bullet
I am of the opinion you would like to have this
<div id="DivMenuRight">
<ul id="UlIcon">
<li id="LiNew">
<img src="link1">
</li>
<li id="LiSave">
<img src="link2">
</li>
<li id="LiDelete">
<img src="link3">
</li>
<li id="LiLog">
<img src="link4">
</li>
</ul>
</div>
then you can use css to display all list elements inline-block
example display:inline-block
here is a snippet
img {
display:inline-block;
width:50px;
height:50px;
}
li {
display:inline-block;
}
<div id="DivMenuRight">
<ul id="UlIcon">
<li id="LiNew">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTCjDQxLj9LSCLsCI2iCDEawZVlJ7tlRuBQDHenXo_KaFhdTUiTGw">
</li>
<li id="LiSave">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqyRrA_-5TM0vpRU8BcTPFpGubyzgHGtvE9FQzpnVMPnKnoZwkmQ">
</li>
<li id="LiDelete">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShZ_bYswgHlQLrUn8egsNTTZn5nCmSz1NcFmvtUzujpZhrBflUiQ">
</li>
<li id="LiLog">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTCjDQxLj9LSCLsCI2iCDEawZVlJ7tlRuBQDHenXo_KaFhdTUiTGw">
</li>
</ul>
</div>
HTML :
<nav class="header"> <img src="smiley.gif" class="logo">
<ul class="navigation">
<li id="a" class=""><span></span>A
</li>
<li id="b" class=""><span></span>B
</li>
<li id="account" class="right"> <span></span>Test Test
<ul class="dropdown">
<li>Log out
</li>
</ul>
</li>
</ul>
</nav>
From a previous question I was told to use inline-block to get the list to sit on the same line as the image (logo). however when I make the image the full height of the header it still drops the list down. What am I doing wrong?
JSFiddle
Change in .navigation class position from relative to absolute.
.navigation {
position: absolute;
display: inline-block;
z-index: 1000;
}
fiddle
I have a problem with my navigation bar. When loading the page, sometimes it changes to look like its in steps however when you refresh it changes back to normal. I cant seem to find out what im doing wrong! Please help!!
Website is http://www.pearsonfoods.com.au
<div id="nav">
<a href="index.html" >
<div class="navBlock" style="color:red;"><p>Home</p>
</div>
</a>
<a href="about.html">
<div class="navBlock"><p>About us</p>
</div>
</a>
<a href="where.html">
<div class="navBlock"><p>Where we sell</p>
</div>
</a>
<a href="foods.html">
<div class="navBlock"><p>Our Foods</p>
</div>
</a>
<a href="contact.php">
<div class="navBlock"><p>Contact us</p>
</div>
</a>
</div>
Your markup is not well-formed. <a> is an "inline element" and <div> is a "block element". Block elements cannot exist within inline elements.
Your navigation list is better structured as a simple unordered list:
<ul>
<li>Home</li>
<li>About us</li>
<li>Where we sell</li>
</ul>
See? So much cleaner :)
Style each <li><a> as a block-flow element with display: block; (note this does not affect the inline/block semantics of elements, it's strictly a visual thing) and apply float: left; to the <li> elements.
html
<ul class="nav">
<li class="current">Home</li>
<li> About Us</li>
<li> Where we sell</li>
<li> Our Foods</li>
<li> Contact Us</li>
</ul>
css
.nav {
width: 900px;
margin: 0 auto;
}
.nav li {
background-color: rgba(0, 0, 0, 0.72);
border-radius: 10px 10px 0px 0px;
width: 180px;
float:left;
}
.nav li a{
color:#fff;
text-decoration:none;
text-align:center;
line-height:50px;
display:block;
}
.nav li a:hover,.nav li.current a{
color:red;
}
Link to running example
I am using light box for image but the close array display at the left top but i want it to the right I am new to CSS.
My HTML code is given for light box on linkbutton one
<div class="linkbutton">
<img src="image/smallicon_2.png" alt="" />
</div>
</div>
<div id="page_two" class="panel">
<div class="main_heading_two">Strategy</div>
<div class="menu">
<ul>
<li class="stix"></li>
<li><img src="image/overview.gif" /></li>
<li class="stix"></li>
<li><img src="image/strategy_active.png"/></li>
<li class="stix"></li>
<li><img src="image/draxxin.gif"/></li>
<li class="stix"></li>
<li><img src="image/excede.gif"/></li>
<li class="stix"></li>
<li><img src="image/results.gif"/></li>
<li class="stix"></li>
<li><img src="image/reference.gif"/></li>
<li class="stix"></li>
</ul>
</div>
<div class="rightclass_one"><img src="image/whiteslide.png"/></div>
<div class="pagetwo_text"><p>Get up to 21 days of BRD therapy strategy using longer-duration antimicrobials DRAXXIN ® (tulathromycin) Injectable Solution and EXCEDE ® (ceftiofur crystalline free acid) Sterile Suspension.
</p></div>
<div class="pagetwo_list_text">Advantages for Producers:
<ul><li>Fewer treatments</li>
<li>Less stress on cattle</li>
<li>Fewer mortalities</li>
<li>Cattle can recover in their own pen
</li>
<li>Lower treatment costs and higher profits
</li></ul></div>
<div class="pagetwo_list_text2">Extended duration strategy
</div>
<div>
<ul>
<li class="midmenu_1"><img src="image/backward.png"/></li>
<li class="midmenu_2"><img src="image/forward.png"/></li>
</ul>
</div>
<div class="right_text"><p>Either way you use them, it takes both DRAXXIN and EXCEDE for control and treatment of BRD in high-risk cattle to give you the longest duration of BRD therapy
</p></div>
<div class="image_21"><img src="image/pagetwo_graph_two_4.png"/></div>
<div class="ratemeter"><img src="image/pagetwo_graph_one.png"/></div>
<div id="one" class="image_one" ><img src="image/optiononetwo.png"/></div>
<div id="two" class="image_two"><img src="image/optiononeone.png"/></div>
<div id="three" class="image_one_one" ><img src="image/pagetwo_graph_two_11.png" /></div>
<div id="four" class="image_two_two" ><img src="image/pagetwo_graph_two_22.png"
/></div>
<div class="option_image"><img src="image/option_1.png" onclick="showHideDiv()"/></div>
<div class="option_image_label">Option 1</div>
<div class="option_image_one"><img src="image/option_1.png" onclick="showHideView()"/></div>
<div class="option_image_label_one">Option 2</div>
<div class="fourteen_day"><img src="image/button_14days.PNG"/></div>
<div class="heading_one">Post Metaphylaxis Interval (PMI)</div>
<div class="linkbutton_one">
<img src="image/smallicon_1.png" alt="" />
</div>
<div class="seven_day"><img src="image/button_7days.PNG"/></div>
<div class="heading_two">Post Treatment Interval (PTI)</div>
<div class="linkbutton_two">
<img src="image/smallicon_1.png" alt="" />
</div>
</div><!-- End of page two-->
Belos is my css which used for light box
.lb-data .lb-close {
width:35px;
position: absolute;
float: right;
padding-bottom: 0.7em;
outline: none;
top:-35px;
}
Image shows cross sign on right side but far away from image
apply:
right:0px;
float won't work in conjunction with absolute positioning.
Write like this:
.lb-data .lb-close {
width:35px;
position: absolute;
padding-bottom: 0.7em;
outline: none;
top:-35px;
right:0;
}
& there is no need to define float when you use position:absolute because float is not work with position:absolute
It's not easy to answer without seeing some other html code, anyway float and position: absolute don't work together. I suggest you to remove the floating and add right: 0; to your css definition. You should also be sure that the parent of .lb-close has set position: relative;
.lb-data .lb-close
{
width:35px;
position: absolute;
/*float: right;*/ <-- delete this
padding-bottom: 0.7em;
outline: none;
top:-35px;
right: 0; <-- new line to add
}
One important thing float doesn't work with absolute-position so you don't need to define float over here u just need to add right:0; i hope this will work smoothly....
.lb-data .lb-close {
width:35px;
position: absolute;
padding-bottom: 0.7em;
outline: none;
top:-35px;
right:0;
}
UPDATED ANSWER
see here the demo is working fine:-
http://jsbin.com/ilixux/5/edit
I have made this through position:relative; to its parent and position:absolute; to its child and now its working fine as you can see....
add left: to your css code and place it where you exactly desire it.
eg:
left: 100px;