I am trying to make a website for my niece, kind of like a homepage for her. I have a little experience coding and I got stuck positioning an image. I don't know whats wrong with it.
Here's my HTML code:
<html>
<head>
<title>MWM</title>
<h1>Welcome to ---- HomePage!</h1>
<link rel="stylesheet" type="text/css" href="C:\Style.css">
<script language="javascript">
function MouseRollover(MyImage)
{MyImage.src = "C:\N2.png";}
function MouseOut(MyImage)
{MyImage.src = "C:\N1.png";}
function MouseRollover2(MyImage)
{MyImage.src = "C:\C2.png";}
function MouseOut2(MyImage)
{MyImage.src = "C:\C1.png";}
function MouseRollover3(MyImage)
{MyImage.src = "C:\Y2.png";}
function MouseOut3(MyImage)
{MyImage.src = "C:\Y1.png";}
function MouseRollover4(MyImage)
{MyImage.src = "C:\H2.png";}
function MouseOut4(MyImage)
{MyImage.src = "C:\H1.png";}
</script>
</head>
<body>
<!--Cartoons-->
<a class="Dec" href="C:\Cartoons.html">
<img class="border size" src="C:\C1.png" onMouseOver="MouseRollover2(this)" onMouseOut="MouseOut2(this)">
</a>
<!--Google-->
<a Class="Dec" href="http://www.Google.com">
<img id="N" class="border size" src="C:\N1.png" onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)">
</a>
<!--Youtube-->
<a Class="Dec" href="C:\W\Youtube.html">
<img Id="y" class="border SY" src="C:\Y1.png" onMouseOver="MouseRollover3(this)" onMouseOut="MouseOut3(this)">
</a
<!--Facebook-->
<a Class="Dec" href="http://Facebook.com">
<img id="H" class="border size" src="C:\H1.png" onMouseOver="MouseRollover4(this)" onMouseOut="MouseOut4(this)">
</a>
<!---->
</body>
</html>
and here's my CSS:
body {Background-color: lime;}
h1 {text-align: center;Color: Black;}
/**/
.Border {border-style: inset;border-width: 10px;border-bottom-color: #454545;border-right-color: #454545; border-top-color: #DEDEDE; border-left-color: #DEDEDE;}
.Dec {text-decoration: None;}
.Size {height: 57px;width: 227px;}
.SY {height:77px;Width: 227px}
/*
Postion Equation: (Height+20Border+IconLeft+20Image growth)="Height"
(Width+20Border+IconLeft+20Image growth)="Width"
*/
#C {position:absolute;}
#N {position:absolute; TOP:163px; LEFT:275px;}
#Y {position:absolute; TOP:260px; LEFT:542px;}
#H {position:absolute; TOP:163px; RIGHT:275px;}
/**/
img:link {}
img:visited {}
img:hover {height: 77px;width: 247px;}
img:hover.SY {height: 97px;Width: 247px;}
/**/
Even though I did everything the same I still cant make the "Facebook Link" work!
I made every other option works perfectly fine except that one. I tried using Margin-Top:163px; and Margin-Right:275px; in CSS but that just moved everything down... I want it to change picture when you hover over it and also for it to grow in size...
You dont need to use JavaScript at all.
Of what I understand, you only want the picture to change on hover. So this is what you'll need to do.
HTML
CSS
#fbimage{
background-image:url('fbimage.png');
}
#fbimage:hover{
background-image:url('fbhoverimage.png');
}
You forget a > after the Youtube link:
<!--Youtube-->
<a Class="Dec" href="C:\W\Youtube.html">
<img Id="y" class="border SY" src="C:\Y1.png" onMouseOver="MouseRollover3(this)" onMouseOut="MouseOut3(this)">
</a>
<!-- Right up ^ here-->
<!--Facebook-->
<a Class="Dec" href="http://Facebook.com">
<img id="H" class="border size" src="C:\H1.png" onMouseOver="MouseRollover4(this)" onMouseOut="MouseOut4(this)">
</a>
<html>
<head>
<title>MWM</title>
<style>
.container{
background-color: lime;
width:100%;
height:100%;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
position:absolute;
}
h1 {text-align: center;color: black;font-size:3em;}
ul{
list-style-type:none;
}
a{
display:block;
border-style: inset;
border-width: 10px;
border-bottom-color: #454545;
border-right-color: #454545;
border-top-color: #DEDEDE;
border-left-color: #DEDEDE;
height:100px;
width:200px;
position:absolute;
background:red;
float:left;
text-align: center;
vertical-align: middle;
color:white;
font-size:2em;
line-height:100px;
}
a.cartoon{
top:0;
left:0;
background:url(C:\C1.png) blue;
}
a.cartoon:hover{
background:url(C:\C2.png)aqua;
}
a.google{
top:200;
left:200;
background:url(C:\G1.png) yellow;
}
a.google:hover{
background:url(C:\G2.png)gold;
}
a.youtube{
top:400;
left:400;
background:url(C:\Y1.png) red;
}
a.youtube:hover{
background:url(C:\Y2.png)darkred;
}
a.facebook{
top:600;
left:600;
background:url(C:\F1.png) green;
}
a.facebook:hover{
background:url(C:\F2.png)lawngreen;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to ---- HomePage!</h1>
Cartoon
Google
Youtube
Facebook
</div>
</body>
</html>
Related
I've been trying to create a responsive navbar with just two images (which are hyperlinks and transparent) and I can't seem to get the formatting right. The way I want it to look is:
First image: width:60%
Second image: width: 40%
Both have the same height
Border: 2px solid black (around both images)
Padding: 10px (Around both images and between the two)
Keep the navbar on the top of the page
Hover effect that changes the background color
Basic Idea
The closest I've come is this code:
HTML:
<head>
<div id="outerdiv" class="navbar-fixed-top">
<img id="image1" src="image1.png" alt="Find"/>
<a href="add.php" > <img id="image2" src="image2.png" alt="Add"/></a>
</div>
</head>
CSS:
<style>
img{
display:inline-block;
border: 2px solid black;
background-color:#499FE2;
}
img:hover{
background-color: #91BCEE;
}
#image1{
width:60%;
float:left;
}
#image2{
width:40%;
float:left;
}
#outerdiv{
background-color: #black ;
}
a{
display: block;
}
</style>
The main problem I'm having is that I cannot figure out where to implement the padding so that it will separate the two images and surround them.
First you need to clean up you HTML code into valid HTML so that your CSS selectors are able to apply styles to the elements in the DOM. Remove the backslashes from your HMTL code to give you this;
<head>
<div id="outerdiv" class="navbar-fixed-top">
<img id="image1" src="image1.png" alt="Find"/>
<a href="add.php" > <img id="image2" src="image2.png" alt="Add"/></a>
</div>
</head>
Add a -4px left-margin to the images to counter the space used by the borders (this prevents the second image from going to next line since they occupy 60% + 40% of the entire page width, yet right + left borders of images take up 4px).
Also add display:block; property to the "#outerdiv" selector and change the value of the display property for the "a" selector to inline.
img{
display:inline-block;
border: 2px solid black;
background-color:#499FE2;
margin-left:-4px;
}
img:hover{
background-color: #91BCEE;
}
#image1{
width:60%;
float:left;
}
#image2{
width:40%;
float:left;
}
#outerdiv{
background-color:black;
display: block;
}
a{
display: inline;
}
see working snippet
img{
display:inline-block;
border: 2px solid black;
background-color:#499FE2;
margin-left:-4px;
}
img:hover{
background-color: #91BCEE;
}
#image1{
width:60%;
float:left;
}
#image2{
width:40%;
float:left;
}
#outerdiv{
background-color:black;
display: block;
}
a{
display: inline;
}
<head>
<div id="outerdiv" class="navbar-fixed-top">
<img id="image1" src="image1.png" alt="Find"/>
<a href="add.php" > <img id="image2" src="image2.png" alt="Add"/></a>
</div>
</head>
<div id="visible" style="float:left;">
<img src="image1.jpg" id="boom">
</div>
<div id="first" style="float:left; ">
<span class="bob">Flatkit</span>
</div>
I tried the following code,but it didn't helped me.
#visible #first:hover ~ #visible>#first
{
display:inline-block;
}
#visible :hover >#first
{
display:inline-block;
}
#visible :hover + #first
{
display: inline-block;
}
It would be great if anyone can help me. I know it can be done using JavaScript but I want to execute this using CSS3
#visible, #first{ float: left;} /* use stylesheets! not inline styles */
#first{ display:none; } /* hidden initially... */
#visible:hover + #first{ display:block; } /* show on #visible hover */
<div id="visible"> HOVER ME!</div>
<div id="first"><span class="bob">Flatkit</span></div>
#visible, #first{ float: left;} /* use stylesheets! not inline styles */
#first{display:none;}
#visible:hover + #first{ display:block; }
.one{
width:100px;
height:100px;
text-align:center;
border:1px solid red;
}
.two{
width:100px;
height:100px;
text-align:center;
border:1px solid blue;
margin-left:5px;
}
<div id="visible" class="one"> Visible </div>
<div id="first" class="two"><span class="bob">Next Div</span></div>
<html>
<head>
<style>
#first
{
display:none;
}
#visible:hover ~ #first
{
display:inline-block;
}
</style>
</head>
<body>
<div id="visible" style="float:left;">
Hello
</div>
<div id="first" style="float:left;">
<span class="bob">Flatkit</span>
</div>
</body>
</html>
I am self-taught in HTML and CSS, but one problem I have recently been running into is modifying links with CSS. I have done it in the past before, many times with no error, but now all the ways I can think of and that I find on the internet do nothing.
I have tried all of these ways, and none worked:
a.linkclass:link{text-decoration:none;}
.linkclass a:link{text-decoration:none;}
#linkid a:link{text-decoration:none;}
a#linkid:link{text-decoration:none;}
{note, these were not done all at the same time, just examples}
My HTML and CSS are as follows(after looking over and over, I could find nothing wrong that could cause these problems)
body{
margin:0;
background-color:eaf7ff;
}
#menubar{
max-height:10%;
min-height:3%
height:5%;
background-color:BBBBBB;
border-bottom:1px solid black;
max-width:100%;
min-width:100%;
width:100%;
float:left;
position:fixed;
display:inline-block
}
#pushbox{
max-height:10%;
height:10%;
background-color:black;
max-width:100%;
min-width:100%;
width:100%;
}
#box1{
background-color:eaf7ff;
}
#tag1{
background-color:eaf7ff;
margin:0;
}
#box2{
background-color:fff7ea;
}
#tag2{
background-color:eaf7ff;
margin:0;
}
#box3{
background-color:eaf7ff;
}
#tag3{
background-color:eaf7ff;
}
#box4{
background-color:fff7ea;
}
#tag4{
background-color:eaf7ff;
}
#box5{
background-color:eaf7ff;
}
#tag5{
background-color:eaf7ff;
}
#copyright{
}
.content{
max-width:100%;
min-width:100%;
width:100%;
min-height:80%;
height:85%;
}
.contenttag{
max-height:10%;
height:10%;
max-width:100%;
min-width:100%;
width:100%;
}
a.menulink{
border:1px solid black;
background-color:red;
}
a:link {
text-decoration: none;
color:black;
}
a:visited {
text-decoration: none;
color:black;
}
a:hover {
text-decoration: none;
color:black;
}
a:active {
text-decoration: none;
color:black;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- ==========MENUBAR==========-->
<div id='menubar'>
<h1>
<a href='#tag1' class='menulink'>OPT1</a>
<a href='#tag2' class='menulink'>OPT2</a>
<a href='#tag3' class='menulink'>OPT3</a>
<a href='#tag4' class='menulink'>OPT4</a>
<a href='#tag5' class='menulink'>OPT5</a>
</h1>
</div>
<!-- ==========CONTENTBOX1==========-->
<div id='tag1' class='contenttag'></div>
<div id='box1' class='content'>
<h1>ContentBox1</h1>
</div>
<!-- ==========CONTENTBOX2==========-->
<div id='tag2' class='contenttag'></div>
<div id='box2' class='content'>
<h1>ContentBox2</h1>
</div>
<!-- ==========CONTENTBOX3==========-->
<div id='tag3' class='contenttag'></div>
<div id='box3' class='content'>
<h1>ContentBox3</h1>
</div>
<!-- ==========CONTENTBOX4==========-->
<div id='tag4' class='contenttag'></div>
<div id='box4' class='content'>
<h1>ContentBox4</h1>
</div>
<!-- ==========CONTENTBOX5==========-->
<div id='tag5' class='contenttag'></div>
<div id='box5' class='content'>
<h1>ContentBox5</h1>
</div>
<!-- ==========COPYRIGHT==========-->
<div id='copyright'><center>
copyright © Vladimir Plenskiy <?php echo date("Y"); ?>, Template by Timothy Leitzke
</center>
</div>
</body>
</html>
The 'a.menulink' by itself did not work. (Sorry if this is confusing, it is currently 12:14 AM and I have also been working on a project in Unity and some art on my computer for the past 24+ hours)
--edit--
for those who do not understand what my problem is, even though the format is right. The CSS styling using classes and ids does not work(the examples that I tried are all at the first CSS stylesheet. that style sheet is not one used on the page, as seen in the header, only ONE is used)
According your HTML proper CSS for your links should be:
.menulink:link {text-decoration:none;}
i'm creating a div with the image and putting overlay on the top . when you hover on image the overlay will appear but it's not taking the padding
<div class="col-lg-6 text-center full-width">
<div class="overlay">
<p class="overlay-price-product">
$9.00
</p>
<p class="color-white">
MENS,T-SHIRT
</p>
<p>
<a href="#">
<button type="button" class="btn btn-default-buy">
add to cart
</button>
</a>
</p>
</div>
<img src="img/men_shirt_1.jpg" class="spaces">
</div>
My CSS
.full-width{
padding-right: 0px !important;
padding-left: 0px !important;
background-color: #F6F6F6;
}
now the problem is here its taking padding for the image class but its not taking overlay class padding
.overlay{
opacity: 0;
transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
position: absolute;
padding: 20px;
}
.spaces{
padding:20px;
}
i wan't my overlay to be the exact size of image any suggestions ? or any efficient way of doing it?
You can use this code below: Here is the Live Demo
<div class="container">
<img src="http://hdwallpick.com/wp-content/uploads/2015/02/sunshine-on-green-nature.jpg" width="200"/>
<div class="overlay">
<p class="overlay-price-product"> $9.00 </p>
<p class="color-white"> MENS,T-SHIRT </p>
<p><button type="button">add to cart</button></p>
</div>
</div>
.container{
width:200px;
height:200px;
background:green;
position:relative;
}
.container img{
width:100%;
height:100%;
}
.overlay{
width:100%;
height:100%;
background:red;
opacity:0;
position:absolute;
text-align:center;
box-sizing:border-box;
padding:20px;
top:0;
transition:all .5s;
transform:scale(.9, .9);
}
.overlay:hover{
opacity:1;
transform:scale(1, 1)
}
There is another way. I will show an example. Here will be the three-type zooming effect.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Powerful Zooming Effect Using jQuery </title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300, 300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'Image/image1.jpg' //<-- No comma after last option!
})
$('#image2').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400, 400],
magnifierpos: 'right',
cursorshade: true,
cursorshadecolor: 'pink',
cursorshadeopacity: 0.3,
cursorshadeborder: '1px solid red',
largeimage: 'Image/image2.jpg' //<-- No comma after last option!
})
$('#image3').addimagezoom()
})
</script>
<style type="text/css">
.magnifyarea
{
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<p>
<img id="image1" border="0" src="Image/image1.jpg" style="width: 300px; height: 225px" /><p>
<p>
<img id="image2" border="0" src="Image/image2.jpg" style="width: 300px; height: 225px" /><p>
<p>
<img id="image3" border="0" src="Image/image3.jpg" style="width: 300px; height: 225px" /><p>
</form>
</body>
</html>
By default, background applies to the inner space, including padding.
If you don't want this, you can change with background-clip property. In your case,
.overlay {
background-clip: content-box;
}
fiddle
Add this css in overlay class
.overlay{
box-sizing: border-box;
}
I tried to reproduce your code. As you can see the padding works on the overlay.
Can you check if one of the paragraph tags inside the overlay class has some padding or margin?
Other option will be that some other css code overrides the overlay container elsewhere. You should check this with a browser inspector.
.container {
background:green;
}
.overlay {
position: absolute;
width:150px;
height:150px;
padding: 20px;
background:red;
}
.overlay:hover {
opacity:.5;
}
.spaces {
width:150px;
height:150px;
padding:20px;
}
<div class="container">
<div class="overlay">
<p>I'm overlay</p>
<p class="overlay-price-product">
$9.00
</p>
</div>
<img class="spaces" src="http://hdwallpick.com/wp-content/uploads/2015/02/sunshine-on-green-nature.jpg" />
</div>
I have a website that I thought was OK, but apparently some people have issues with the text, and because of that I may have shot myself in the foot when it comes to showing off my portfolio to employers. The major problem is I'm not seeing what other people are seeing. Or, maybe they are seeing what I'm seeing, but it's just not designed well.
First of all, I would like you to check my website: http://mmking9999.com
After browsing around for a bit, please have a look at my code and tell me where I went wrong. If you have any other suggestions, let me know. Here's the code for the main page:
<html>
<head>
<link rel="stylesheet"
type="text/css" href="http://mmking9999.com/css/style.css" />
</head>
<body>
<!--Site logo. Clicking on it will redirect to this page.-->
<div class="logo">
<img src="http://mmking9999.com/Images/SiteLogo.png" />
</div>
<!-- Menu window goes here. The text are images that link to other pages.-->
<div class="menu">
<img src="http://mmking9999.com/Images/MenuWindow.png" />
</div>
<div class="portfolio_url">
<img src="http://mmking9999.com/Images/portfoliourl.png" />
</div>
<div class="blog_url">
<img src="http://mmking9999.com/Images/blogurl.png" />
</div>
<div class="random_url">
<img src="http://mmking9999.com/Images/randomurl.png" />
</div>
<div class="email">
<img src="http://mmking9999.com/Images/emailicon.png" />
</div>
<div class="linkedin">
<img src="http://mmking9999.com/Images/linkedinicon.png" />
</div>
<div class="twitter">
<img src="http://mmking9999.com/Images/twittericon.png" />
</div>
<div class="window"><br><br><p>Welcome to my website! My name is Mike Murray, a rookie game developer/designer. Here, you'll find stuff about what I do and what I hope to become in the future. I am an avid gamer, and it was that passion that led me to want to create the video games that people like to play. Having played video games for over 20 years, I figure I should be able to create something cool with the knowledge I have!</p></div>
</body>
</html>
And here is the CSS I'm using:
/*The code for the body sets the default settings for all pages */
body
{
background-image:url('http://mmking9999.com/Images/sitewallpaper.png');
}
/* Link colours. I use bright colours to contrast the black window. */
a:link {
COLOR: #86C6FE;
}
a:visited {
COLOR: #FF0000;
}
a:hover {
COLOR: #FFFF00;
}
a:active {
COLOR: #00FF00;
}
/* Main window. Used to display text and images */
img
{
margin: 2px;
height: auto;
width: auto;
float: left;
}
h1
{
color:red;
text-align:center;
font-family:calibri;
}
p
{
/* font */
color:rgb(255,255,255);
font-family:"Small Fonts", calibri, arial, "Times New Roman";
font-size:18px;
text-align:left; width:700px; margin-left:200px;
}
/* Main window. All info is displayed in here */
div.window
{
background-image:url('http://mmking9999.com/Images/IframeWindow.png');
background-repeat:no-repeat;
position:relative;
width:60%;
height:70%;
top:80px;
left:500px;
/*text*/
/*color:rgb(255,255,255);
font-family:"Small Fonts", calibri, arial, "Times New Roman";
font-size:18px;*/
}
/* Menu */
div.menu
{
position:relative;
width:40%;
height:10%;
}
/*Site logo */
div.logo
{
position:relative;
width:40%;
height:5%;
left:500px;
}
/*Images (so they aren't constrained by the attributes defined in div.window)*/
div.image
{
position:absolute;
left:20px;
}
/* In case I need another row of images */
div.image2
{
position:relative;
left:-150px;
width:90%;
height:90%;
}
/*Menu urls*/
div.portfolio_url
{
position:relative;
left:-175px;
top:30px;
}
div.blog_url
{
position:relative;
left:-305px;
top:90px;
}
div.random_url
{
position:relative;
left:-445px;
top:150px;
}
div.email
{
position:relative;
top:250px;
left:-600px;
}
div.linkedin
{
position:relative;
top:250px;
left:-580px;
}
div.twitter
{
position:relative;
top:250px;
left:-560px;
}
/*iframe
{
position:relative;
top:80px;
left:280px;
width:60%; height:70%;
}*/
Thanks for any advice you can provide.
http://d.pr/i/OhIF
Try using position:absolute rather than relative on your divs.