I have this html css so far
<html><head><style type="text/css">
.img_list {
width: 50px;
height: 50px;
position: relative;
}
#img_list .icon {
width: 30px;
height: 30px;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
li{
list-style:none;
}
</style></head>
<body>
<ul id="img_list">
<li>
<img src="images.jpg" alt="Image Title" class="img_list" />
<img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
<a>Charlie Chaplin</a>
</li>
<li>
<img src="images.jpg" alt="Image Title" class="img_list"/>
<img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
<a>Charlie Bean</a>
</li>
</ul>
</body>
</html>
this is the rendered image
![enter image description here][1]
what i wanted was to have the down arrow image to overlay on top of the image itself at the bottom right of each image.
i tried playing with top, bottom, right left but its not consistent with browsers size.
how do i change my css to have this work correctly.
Simply add position: relative; to the list items.
li {
list-style:none;
position: relative;
}
You're getting that result because you are positioning the icon relative to the container, #img_list. Try adding position:relative; to your li css definitions, and removing it from the #img_list{ definitions:
li{
list-style:none;
position:relative;
}
See this live Demo (with replacement images): http://jsfiddle.net/wm4rj/
try this one:
<html>
<head>
<style type="text/css">
#img_list li {
list-style:none;
position:relative;
line-height:50px;
}
#img_list li .img_list {
width: 50px;
height: 50px;
}
#img_list li .icon {
width: 30px;
height: 30px;
position: absolute;
z-index: 99;
bottom: 20px;
left:0;
}
</style>
</head>
<body>
<ul id="img_list">
<li>
<img src="images.jpg" alt="Image Title" class="img_list" />
<img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
<a>Charlie Chaplin</a>
</li>
<li>
<img src="images.jpg" alt="Image Title" class="img_list"/>
<img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
<a>Charlie Bean</a>
</li>
</ul>
</body>
</html>
Related
I'm quite new in web development. I encoutered a problem which is present only in the Internet Explorer - the CSS style of Main Menu is applied after refresh(just F5, not CTRL-F5). I used MVC .NET to make backend of site. I have no idea how to solve this problem.
The web site with this problem is:
http://jakubkowalczykart.com/
Thank you in advance.
#Edit: Cope snippet which reproduces problem. While opening in Chrome or Firefox it looks good, but in IE it doesn't
Style:
.main_menu {
min-height: 40px;
z-index: 10;
height: 8vh;
position: fixed;
top: 0;
width: 100%;
opacity: 0.90;
background: black;
}
.menu_image {
height:100%;
}
.menu_list {
margin: 0 auto;
height: 70%;
list-style-type: none;
overflow: hidden;
}
.menu_container {
display: flex;
align-items: center;
height: 100%;
}
.menu_list {
margin-right: 3vw ;
height: 70%;
list-style-type: none;
overflow: hidden;
}
.menu_list li {
height: 100%;
float: left;
}
Html:
<html>
<head>
</head>
<body id="body">
<div class="main_menu" id="main_menu">
<div class="logo">
<div id="logo_img" ></div>
</div>
<div class="menu_container">
<ul class="menu_list">
<li>
<a href="#">
<img id="first_menu" class="menu_image" src="http://jakubkowalczykart.com/Content/Images/smallportfoliobutton.png" />
</a>
</li>
<li>
<a href="#">
<img id="second_menu" class="menu_image" src="http://jakubkowalczykart.com/Content/Images/smallshopbutton.png" />
</a>
</li>
<li>
<a href="#">
<img id="third_menu" class="menu_image" src="http://jakubkowalczykart.com/Content/Images/smallaboutbutton.png" />
</a>
</li>
<li>
<a href="#">
<img id="fourth_menu" class="menu_image" src="http://jakubkowalczykart.com/Content/Images/smallcontactbutton.png" />
</a>
</li>
</ul>
</div>
<div class="main_container" id="main_container">
</div>
<div class="footer">
</div>
</body>
</html>
I am trying to learn HTML/CSS ,for that I am trying to convert a PSD TO HTML,here is what I am trying to do
Here what I have don't so far
,as you see there is space between my two divs ,and I don't seem to undestand why ,
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" >
</head>
<body>
<header>
<div class=Container>
<p> <span style="font-size:16px;color:#b4b4b4 ">phu concepts</span><br>
<span style="font-size:52px "><span style="color:#990202">TEST</span>
<span style="color:#f1a2a2">PROJECT</span></span>
</p>
<img src="Images/ChatImg_02.png" style="position: relative;float:right;top:-90px" >
<div id="headerDIV" >
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
SERVICES
</li>
<li>
GALLERY
</li>
<li>
CONTACT US
</li>
</ul>
</div><!--headerDIV-->
</div><!--headerDivContainer-->
<div id="topRedStrip"></div>
</header>
<section id="main">
<div class=mainContainer>
<div class="slider"> <!---THIS is the DIV that doesn't listen-->
<img src="Images/sliderImage_06.png" alt="Slider Image" style="position:relative; float:left">
</div>
</div><!--Container-->
</section>
<footer>
</footer>
</body>
</html>
and here is my css
#headerDIV
{
}
header p
{
font-family: "myriad Pro";
margin-bottom:0;
margin-top:0;
width:500px;;
}
#chatDiv
{
position:relative;
float:right;
}
#topRedStrip
{
position:relative;
top:12px;
background-repeat: repeat-x;background-image:url('../images/redStrip_03.jpg');
width: 100%;
z-index: -2;
height: 8px;
}
.slider
{
position:relative;
float:left;
}
#headerDIV
{
position:relative;
top:0;
right:-90px;
z-index:-1;
background-image:url('../images/headerBLACk_03.png');
background-repeat:no-repeat;
width:470px;
height: 200px;
float: right;
}
.Container
{
margin: 0 auto;
width:936px;
}
.mainContainer
{
margin: 0 auto;
width:936px;
height:auto;
}
header ul
{
padding: 0;
margin:0;
z-index: -1;
}
header li
{
list-style-type: none;
float:left;
padding-left: 30px;
font-family: "myriad Pro";
font-size:12px;
color: #504848;
padding-top:9px;
}
Can anyone tell me why I get empty space between the div,
Thanks
Every major browser has an inspect mode which allows you to examine the box model and to alter CSS definitions until they match. I suggest you dig into these tools, as they will open you the door to handle all of these questions.
Here's Chrome as example:
Once you have entered the inspection mode, you can browse through the elements and see what is causing the distance.
It seems to be because the height of your header div is 200px:
#headerDIV
{
position:relative;
top:0;
right:-90px;
z-index:-1;
background-image:url('../images/headerBLACk_03.png');
background-repeat:no-repeat;
width:470px;
**height: 200px;**
float: right;
}
It doesn't need to be 200px when the only thing in it is the black navigation bar.
I want to add my clickable company logo to the header, which will redirect them to homepage. I tried this, but it makes the whole header clickable.
<div id="header">
<a style="display:block" href="profile.php" >
<label>
<img src="images/logo.png" height="50x" width="180px" />
</label>
</a>
</div>
I have added the CSS associated with it:
div#header a
{
position:fixed;
height:40px;margin:0;width:100%;
padding-left:30px;background: #00BFFF
}
Use CSS.
Don't use INLINE CSS STYLE. Instead create css file and paste code and include it in page.
<style type="text/css">
div.header
{
display: block;
height: 40px;
position: absolute;
width: 100%;
}
div#header a img
{
cursor:pointer;
}
.header .logo
{
display: block;
float: left;
padding: 4px 3px;
}
img
{
border: 0 none;
height: auto;
max-width: 100%;
vertical-align: middle;
}
</style>
<div class="header">
<a href="action.php" class="logo">
<img title="Title" alt="Alter" src="img/4.png">
</a>
</div>
Please remove display: block from anchor :-
<div id="header">
<a href="profile.php" ><label><img src="images/logo.png" height="50x" width="180px" /></label></a>
</div>
try this
</style>
div#header
{
position:fixed;
height:40px;margin:0;width:100%;
padding-left:30px;background: #00BFFF
}
</style>
<div id="header">
<a s href="profile.php" > <img src="slider-button-left.png" height="50x" width="180px" /></a>
</div>
tried to find a way to change a main image when hovering over an LI
Looking at Using only CSS, show div on hover over <a> I thought I could make it work, but when I moved the div it of course no longer worked.
Here is how I would do it with JavaScript - can you show me how to do the same with pure CSS on the same html?
<html>
<head>
<script>
var myImages = {li1:"image1.jpg",li2:"image2.jpg",li3:"image3.jpg"};
window.onload=function() {
var lis = document.getElementById('myList').getElementsByTagName('li');
for (var i=0;i<lis.length;i++) {
lis[i].onmouseover=function() {
document.getElementById('image1').src=myImages[this.id];
}
}
}
</script>
</head>
<body>
<img id="image1" />
<ul id="myList">
<li id="li1">show image1</li>
<li id="li2">show image2</li>
<li id="li3">show image3</li>
</ul>
</body>
</html>
As requested in your comment:
http://jsfiddle.net/wjBjZ/
This is a basic example showing the list and the image(s) behaving as you requested. Play with the positioning for fine tuning.
Implementing your comment
http://jsfiddle.net/QgJTN/2/
#main {
position: absolute;
top: 0px;
left: 10px;
border: solid 5px red;
}
#myList{
background: #ccc;
position: absolute;
top:110px;
}
#myList span{
cursor: pointer;
}
#myList img{
display: none;
width: 100px;
height: 100px;
position: absolute;
top: -110px;
left: 10px;
border: solid 5px red;
}
#myList li:hover{
background: #888;
}
#myList li:hover img{
display:block;
}
HTML
<img id="main" src="http://lorempixel.com/100/100/abstract/" />
<ul id="myList">
<li>
<span>List Item One</span>
<img src="http://lorempixel.com/100/100/abstract/" />
</li>
<li>
<span>List Item Two</span>
<img src="http://lorempixel.com/100/100/fashion/" />
</li>
<li><span>List Item Three</span>
<img src="http://lorempixel.com/100/100/city/" />
</li>
</ul>
Im trying to set up a way of viewing photos when you hover over them and im having some trouble with floating and positioning. I've got it to work like this...
**HTML**
<div id="container-collection">
<div id="clothes1"><img src="Images/smallest/JPEG/IMG_3148.jpg" alt="1" width="211" height="316" onMouseOver="MM_showHideLayers('closeup1','','show')" onMouseOut="MM_showHideLayers('closeup1','','hide')"></div><div id="clothes2"><img src="Images/smallest/JPEG/IMG_3124.jpg" alt="2" width="211" height="316" onMouseOver="MM_showHideLayers('closeup2','','show')" onMouseOut="MM_showHideLayers('closeup2','','hide')"></div>
<div id="closeup1"><img src="Images/Smaller/bigger ones/JPEG/IMG_3148_1.jpg" width="432" height="648" alt="11"></div> <div id="closeup2"><img src="Images/Smaller/bigger ones/JPEG/IMG_3124_1.jpg" width="432" height="648" alt="11"></div>
</div>
**CSS**
#container-collection { width: 900px; margin:0 auto; padding-top: 90px; }
#clothes1 { float:left; left:0px; top:5px; width:209px; height:316px; z-index:1; }
#clothes2 { float:left; left:5px; top:5px; width:209px; height:316px; z-index:1; }
#closeup1 { float:left; left:400px; top:-316px; width:427px; height:648px; z-index:2; visibility: hidden; }
#closeup2 { position:relative; left:423px; top:-648px; width:427px; height:648px; z-index:3; visibility: hidden; }
but theres got to be a better way.
Cheers.
There are many JavaScript plugins you can use to quickly achieve this.
For example, try the bootstrap plugin:
http://twitter.github.com/bootstrap/javascript.html#popovers
NB: the data-content attribute in the <a> tag could hold HTML content. Just look out for the use of quotes.
<a href="#" rel="popover" data-content="<img src='image2.jpg' />" data-original-title="A Title">
<img src="image1.jpg" border="0" />
</a>
Optionally, a much simpler version to show a preview can be done with CSS only, utilizing hover.
<style>
a.info
{
position: relative; /*this is the key*/
z-index: 204;
color: #000;
text-decoration: none;
}
a.info:hover
{
z-index: 205;
background-color: gainsboro;
}
a.info span{display: none}
a.info:hover span
{
/*the span will display just on :hover state*/
display: block;
position: absolute;
top: 3em;
left: 1em;
}
</style>
<a class="info" href="javascript:focus();">
<img src="image1.jpg" /><span><img src="image2.jpg" /></span>
</a>