I have been created css3 image slideshow, Its working perfect, but location of slideshow is absolutely incorrect.
Here is the code in html:
<div id = "header">
<div class = "wrap">
<div class = "logo">
<img src = "img/photo.jpg" alt = "" />
</div>
<div class = "navigation">
<ul>
<li>HOME</li>
<li>ABOUT </li>
<li>HISTORY </li>
<li>NEWS </li>
<li>CONTACT </li>
<li>CONTACT </li>
<li>CONTACT </li>
</ul>
</div>
</div>
</div>
<div class = "wrap">
<div class="slides">
<ul>
<li><img src="slide-1.jpg" alt="" /></li>
<li><img src="slide-2.jpg" alt="" /></li>
<li><img src="slide-3.jpg" alt="" /></li>
<li><img src="slide-4.jpg" alt="" /></li>
</ul>
</div>
</div>
<div class = "wrap">
<p>Saina Nehwal (About this sound pronunciation (help.info); born 17 .../p>
</div>
Here is my working jsfiddle: http://jsfiddle.net/qj6s0xdh/
Can anyone help me to align the position of slideshow?
Thanks in advance.
Is this what you want?
http://jsfiddle.net/qj6s0xdh/2/
I don't think the float: left; in the #header is what you want.
Here is the slider is now center-aligned by just adding following to the ul of slider
width: 60%;
margin: auto;
display: block;
Add the following properties:
.slides ul li {
width:100%;
}
.slides ul li image {
margin:0 auto;
}
Related
So I am trying to select the 6th child of the Unordered list and it just can't seem to select the item. Is it because the LI's have an anchor as a child?
.nav-links ul:nth-child(6) {
margin-left: auto;
}
<ul>
<li>Vectors</li>
<li>Photos</li>
<li>PSD</li>
<li>Video</li>
<li>More <i class="fa-solid fa-caret-down"></i></li>
<li id="nth">Submit</li>
<li>
<img src="Gmail_icon_(2020).svg.png" alt="" width="20px">
</li>
<li>
<img src="meta-logo.png" alt="" width="30px">
</li>
</ul>
Edit: Updated to select the sixth immediate li child, instead of every sixth child anywhere under the ul.
Your selector is set up to select the ul that is the 6th child, when it appears you want the 6th li. Not sure what your intent is with the margin, but this will fix your selector:
/* also omitted the '.nav-links' qualifier because it's not in your markup */
ul > li:nth-child(6) {
margin-left: auto;
background: red;
}
<ul>
<li>Vectors</li>
<li>Photos</li>
<li>PSD</li>
<li>Video</li>
<li>More <i class="fa-solid fa-caret-down"></i></li>
<li id="nth">Submit</li>
<li>
<img src="Gmail_icon_(2020).svg.png" alt="" width="20px">
</li>
<li>
<img src="meta-logo.png" alt="" width="30px">
</li>
</ul>
I want to place an image between the bullet point and the text in an unordered list, I have tried several ways but the last one closest to the point was this:
<ul>
<li>
<img src="../2/question/img/zeplin.png" alt="zeplin" style="float: left;">
<p>Zeplin</p>
</li>
<br>
<li>
<img src="../2/question/img/dropbox.png" alt="dropbox" style="float: left;">
<p>Dropbox</p>
</li>
</ul>
This is a photo of the goal:
How can I write this?
li img {
height: 50px;
display: flex;
margin-right: 10px;
}
<ul>
<li>
<img src="https://i.picsum.photos/id/103/2592/1936.jpg?hmac=aC1FT3vX9bCVMIT-KXjHLhP6vImAcsyGCH49vVkAjPQ"
alt="zeplin" style="float: left;">
<p>Zeplin</p>
</li>
<br>
<li>
<img src="https://i.picsum.photos/id/1029/4887/2759.jpg?hmac=uMSExsgG8_PWwP9he9Y0LQ4bFDLlij7voa9lU9KMXDE"
alt="dropbox" style="float: left;">
<p>Dropbox</p>
</li>
</ul>
Simply use list-style-image property in your unordered list and put the image url inside url method. Example:
ul {
list-style-image: url('your_image.png');
}
li img, p {
display: inline-block;
}
<ul>
<li><img src="https://i.stack.imgur.com/wlm3P.png"><p>Zeplin</p>
<li><img src="https://i.stack.imgur.com/DgOJ5.png"><p>Dropbox</p>
</ul>
In CSS, how would I select the .button element? I have tried just .button but it is not working at all. The only way I can get it to hide is by hardcoding style="display: none;
<div id="navBar">
<nav>
<li><a class="button">☰</a>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Schedule</li>
<li>Media</li>
<li>Sponsors</li>
<li>Contact Us</li>
<li><img src="images/fbicon.png"></li>
<li><img src="images/ticon.png"></li>
</ul>
</nav>
</div>
You could do something like creating a css class called .only-mobile like this
.only-mobile {
display: none;
}
And then using media queries you can change .only-mobile to display in block etc.
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;
}
I am having a stacked list where I want to float an img (icon) and the text. However, I feel its a pain to clear after each list item. What's the solution here? Any tips how to make it more clean?
<ul>
<li><img src="#" /> Home</li>
<div class="clear"></div>
<li><img src="#" /> About</li>
<div class="clear"></div>
</ul>
You could make the li elements to clear..
<ul>
<li class="clear"><img src="#" /> Home</li>
<li class="clear"><img src="#" /> About</li>
</ul>
If you only float the contents of the li (the img and the a) then you can just set the overflow of the li to auto or hidden and it will work as expected.
li{overflow:auto;}
Demo at http://jsfiddle.net/SqWHB/
Yes, use a class for the clearfix:
and add this css:
.clearfix:before, .clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
You need the clear only one time and that is after the ul.
<ul>
<li><img src="#" /> Home</li>
<li><img src="#" /> About</li>
</ul>
<div class="clear"></div>