When i click on
<a href="images/full/3.jpg#light"> <!-- redirect to Div id=light" -->
the image not display on Div Id=light but in a new page ;
fails to find a solution.
<html>
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- scripts -->
<link href="style1.css" rel="stylesheet" type="text/css" media="screen" />
<head>
scrollmenu1.light{}
</head>
<body>
<!-- div destination -->
<div id="light">
<img src="images/thumbs/9.jpg" height="190px">
</div>
<div class="scrollmenu1">
<a href="images/full/3.jpg#light"> <!-- redirect to Div id=light" -->
<img src="images/thumbs/8.jpg" height="190px">
<div class="caption">Caption 1</div>
</a>
<a href="images/full/4.jpg">
<img src="images/thumbs/4.jpg" height="190px">
<div class="caption">Caption 2</div>
</a>
</div>
</body>
</html>
CSS
/* sezione diapositive */
.images{
text-align:center;
margin:10px auto;
}
.images a{
margin:0px 3px;
display:inline-block;
text-decoration:none;
padding: 3px;
color:white;
}
.images a:hover {
background-color: blue;
}
/* scroll zona 2 */
div.scrollmenu1 {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu1 a {
display: inline-block;
color: white;
text-align: center;
padding: 3px;
text-decoration: none;
}
div.scrollmenu1 a:hover {
background-color: blue;
}
A link is an anchor that takes you to a place or location specified by the address, in this case the address in the href = " ". Sorry if that seems too obvious for you but I feel like I needed to remind you of it for the sake of clarity. With that being said, unless you make your code go to a certain div when you click on a link, it won't just magically do it by itself. You can redirect you page to the div you want by specifying the address in the href attribute of the link you click as in here:
<div class="scrollmenu1">
<a href="images/full/3.jpg#light"> <!-- redirect to Div id=light" -->
<img src="images/thumbs/8.jpg" height="190px">
<div class="caption">Caption 1</div>
</a>
<a href="#Id-Name-Of-The-Div-You-Want-To-Go-To-On-Click">
<img src="images/thumbs/4.jpg" height="190px">
<div class="caption">Caption 2</div>
</a>
</div>
Notice the difference in the href attribute in your link that I changed. This will redirect you to the div. However, like other have pointed out in their comments, you can't just make the image you clicked on to magically appear in the div you want by just having it in between your "a" tags like that. You need some javascript or other ways for that. By default, links don't work like that. Also, doing some research before posting questions is a good practice. It will help you learn things better.I hope that helped
Related
I am trying to style my page but nothing happens. I think that my css code is wrong. This is my html code:
<!DOCTYPE html>
<html>
<head>
<ul>
<li>About</li>
<li>Contact</li>
<li>Download Links</li>
</ul>
<link rel="stylesheet" type="text/css" href="style.css/">
<div id="footer">
<div class="container">
<div class="column">
<h4>My Links</h4>
<p>
Facebook
<br>
Youtube
</p>
</div>
<div class="column">
<h4>My Story</h4>
<p></p>
</div>
</div>
</div>
</head>
</html>
This is my css code:
#header-nav li {
display: inline;
padding-left: 20px;
}
#header-nav {
display: block;
float:right;
margin-top:0;
}
#header {
background-color: #1abc9c;
height: 150px;
line-height: 150px;
}
.container {
max-width:1000px;
margin:0 auto;
}
#header-title {
display: block;
float: left;
font-size: 20px;
font-weight: bold;
}
#header a {
color: white;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.1em;
}
#header a:hover {
color: #222;
}
I keep my files in desktop in a file:
Where is a problem in my code?
Please do write your code in a readable format, indentation is very important not only to yourself, but to everyone who might read it ESPECIALLY when you are asking people where the problem may be as it would ease the process for everyone, that would be appreciated.
Problems I have noticed:
In the HTML file:
The "head" tag is used for meta-data; document title, linking to CSS file and other information that is not displayed on the page.
All of the nested tags in the "head" should be instead be nested on the "body" tag except for the "link" tag.
I don't understand why there is an empty paragraph tag.
In the CSS file:
The last slash in your href attribute is what is causing trouble, removing it will link the CSS to the HTML (If the file is in the correct directory).
You are referencing nonexistent elements by using "#header-nav", "#header", "#header-title" none of which are valid ID names.
Your html needs tidying up:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<ul id="header-nav">
<li>About</li>
<li>Contact</li>
<li>Download Links</li>
</ul>
</div>
<div id="footer">
<div class="container">
<div class="column">
<h4>My Links</h4>
<p>
Facebook<br>
Youtube
</p>
</div>
<div class="column">
<h4>My Story</h4>
<p></p>
</div>
</div>
</div>
</body>
</html>
You also need to make sure you refer to your classes in the css file. At the moment I can only see .container. You don't have header id anywhere in your html.
I can see a couple of errors in your code-
You haven't linked your CSS file to your HTML
Your HTML body is missing and instead all the codes are there in the head
In your CSS file, you haven't referred to classes or containers, you have used # which is used for referencing ids which are not in your HTML code.
my left sidebar has no structure and I want it to be like a menu with a background color. I also have no idea how to make the changes in CSS so I can change the width and height...etc
here is the code for the sidebar
<div class="sidebar">
<nav>
<h1>Menu</h1>
<ul>
<li><strong>Home</strong></li>
<li><strong>Workshop </strong></li>
<li><strong>Team </strong></li>
<li><strong>Resources </strong></li>
<li><strong>Publication </strong></li>
<li><strong>Opportunities </strong></li>
</div><!-- /sidebar -->
CSS syntax can be called for in three ways.
Internal CSS: <style> tags, which must be underneath a <head> element that precede your <body>.
External CSS: Linking external CSS with just the CSS syntax, void of any HTML tags. You connect the two documents with a <link> tag using the href attribute
Block-level/Inline elements: CSS can be placed inside of block-level elements and inline elements (a list of which appear here)
Here is how to color your sidebar's background using the first method:
<head>
<style>
.sidebar {
background-color: gray;
}
</style>
</head>
And here's one way to add containers/boxes around your sidebar using the first method:
<head>
<style>
.box {
background-color: #eee;
margin-top: 5px;
padding: 10px;
text-align: center;
}
.sidebar {
display: block;
width: 150px;
font-family: Arial, sans-serif;
}
.row:after {
clear: both;
content: "";
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="sidebar">
<div class="box">
<strong>Home</strong>
</div>
<div class="box">
<strong>Workshop</strong>
</div>
<div class="box">
<strong>Team</strong>
</div>
<div class="box">
<strong>Resources </strong>
</div>
<div class="box">
<strong>Publication</strong>
</div>
<div class="box">
<strong>Opportunities</strong>
</div>
</div>
</div>
</body>
I'm not sure if this is exactly what you're looking for, but you can change the font, margins, and padding underneath the <style> tag however you want.
Also, I would suggest going through w3school's CSS introduction just to familiarize yourself with how it all works. Another tip: Make sure all of your starting tags have the necessary end tags! For example, in the code you wrote a closing </ul> and </nav> are missing.
Alright, so I have no idea why this isn't working, but take a look. My top right navigation items are terribly screwed up. Everything else works great so far. Any suggestions would be much appreciated. Also, side-note, is there a way for me to have an "a" tag that heads to a directory (Music) and for me to customize the directory page? I'll make a separate question on that in a minute. Also, I would love to have my own player that shows metadata. Anyway, I'll try to stay on topic so you don't have to answer those, just the CSS help. Thanks!
The HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="description" content="AnonSeeker is a collection of HTML, CSS, and JavaScript files designed for privacy. We offer things such as a browser, bookmarks, proxies, music, a text/code editor, and much more, completely password-protected!">
<link type="text/css" rel="stylesheet" href="css/style.css">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shortcut icon" href="favicon.ico">
<!-- Favicon -->
<title></title>
</head>
<body>
<!-- All Navigation Items -->
<div class="container" id="all-navigation">
<!-- Top Left Navigation Items -->
<div class="container" id="top-left-naviagtion">
<!-- Goto Browser -->
<div class="container goto-browser top-left-navigation-item">
<a href="html/anon-seeker-browser.html" class="goto-browser top-left-navigation-item">
<img src="img/browser.png" alt="browser-img" class="goto-browser top-left-navigation-item">
</a>
</div>
<!-- Goto Bookmarks -->
<div class="container goto-bookmarks top-left-navigation-item">
<a href="html/bookmarks.html" class="goto-bookmarks top-left-navigation-item">
<img src="img/bookmarks.png" alt="bookmarks-img" class="goto-bookmarks top-left-navigation-item">
</a>
</div>
<!-- Goto Music -->
<div class="container goto-music top-left-navigation-item">
<a href="html/music.html" class="goto-music top-left-navigation-item">
<img src="img/music.png" alt="music-img" class="goto-music top-left-navigation-item">
</a>
</div>
</div>
<!-- Top Right Naviagtion Items -->
<div class="conatiner" id="top-right-navigation">
<div class="container goto-ace top-right-navigation-item">
<a href="html/ace-editor.html" class="goto-ace top-right-navigation-item">
<img src="img/ace-editor.png" alt="ace-editor-img" class="goto-ace top-right-navigation-item">
</a>
</div>
</div>
</div>
<!-- Middle Elements -->
<div class="container" id="middle-elements">
<!-- Center AnonSeeker Image -->
<div class="container middle-img">
<img src="img/anonseeker.png" alt="anonseeker.png" class="middle-img">
</div>
<div class="container search-box">
<input type="text" placeholder="Search" class="search-box">
</div>
</div>
</body>
</html>
The CSS
html, body {
margin: 0;
}
#all-navigation {
width: 100%;
height: 100%;
}
#top-right-navigation {
top: 10px;
right: 10px;
padding: 15px;
}
#top-left-navigation {
top: 10px;
left: 10px;
padding: 15px;
}
.top-right-navigation-item {
padding: 5px;
}
.top-left-navigation-item {
padding: 5px;
}
#middle-elements {
text-align: center;
padding: 5px;
}
top-left-navigation spelling wrong in your html so not working your css. Just replace CSS mentioned below code. Hope this will help you
#top-right-navigation {
position:absolute;
top: 10px;
right: 10px;
padding: 15px;
}
#top-left-naviagtion{
position:absolute;
top: 10px;
left: 10px;
padding: 15px;
}
I'm currently in the process of creating a HTML/CSS layout for a Kiosk-style site.
However, I am having a few issues making the alignment of the images and text to work exactly how I want.
The logo and header should be fixed in the same place across every page, whereas I might need to expand the amount of buttons on-screen.
Here is the illustration of an example: Example Image, where:
Black box represents logo
Blue boxes represent individual buttons
Current HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="style.css">
<html>
<body background="background.png">
<div id="logo">
<img src="logo.png">
</div>
<br>
<div id="icons1">
<img src="button-wmcweb.png"></a>
</div>
<div id="icons1">
<img src="button-appointments.png"></a>
</div>
<div id="icons1">
<img src="button-prescriptions.png"></a>
</div>
<br>
<div id="icons2">
<img src="button-somccg.png"></a>
</div>
<div id="icons2">
<img src="button-patient.png"></a>
</div>
<div id="icons2">
<img src="button-nhschoices.png"></a>
</div>
</body>
</html>
CSS:
body {
text-align:center;
}
#mainContainer {
margin:0 auto;
}
#icons1 {
display: inline-block;
}
#icons2 {
display: inline-block;
}
Is using inline blocks the best practice for what I'm trying to achieve?
Any help would be much appreciated.
I have created for you a JSFiddle with what you want as a starting point.
Click for the full screen mode for the fiddle.
There is the full code below for the ease of referencing.
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body background="background.png">
<div id="logo">
<div id="logoimg">
<img src="http://cs614926.vk.me/v614926650/93b6/n9S5OGKt8L0.jpg" />
</div>
<div id="logotext">lorem ipsum</div>
</div>
<div class="row"> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a>
</div>
<div class="row"> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a>
</div>
</body>
</html>
style.css:
body {
text-align: center;
}
#logoimg, #logotext, .row > img {
display: inline;
}
#logo, .row {
margin: 30px 10px;
min-width: 1000px;
}
#logotext {
min-width: 320px;
vertical-align: top;
font-size: 36px;
padding: 0 20px;
}
img {
width: 320px;
resize: noresize;
}
a:link {
text-decoration:none;
}
For more info on HTML/CSS, consider checking the following w3school tutorials: HTML and CSS.
Your HTML was wrong in a few places. No opening <a> tag, multiple id's with the same name, and the <link> for the css needs to be inside the <head></head> tags, as shown below.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Is this what you're looking to achieve?
http://jsfiddle.net/Q8gVL/
I am creating a web site and want to add a hover effect on my buttons by loading another image/button with slightly different color suit that I created in Photoshop.
When I apply the code nothing happens.
Here is my code:
CSS:
#main{
position: relative;
background-color:#ececec;
height:900px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#main .button2{
position: absolute;
left:0.5%;
top: 71.5%;
z-index:20;
width:170px;
height:40px;
}
#main .button2:hover{
background-image : url(images/buttBootsRollover.png);
}
HTML:
<div id="main">
<article>
<section>
<a href="#index.php" > <img src="images/buttGloves.png" class="button" /></a>
<a href="#index.php" > <img src="images/buttBoots.png" class="button2" /></a>
<a href="#index.php" > <img src="images/buttEqu.png" class="button3" /></a>
</section>
</article>
Here is the picture which might give a better overview :
Eventually I want to add the same hover effect on all of the 9 buttons
The way you are doing this is a bit off. You're setting the background-image property on an element that contains an image which (presumably) takes up the whole space of your element. You're going to give yourself a headache trying to work with that, so rather than explain why you're getting the result you are, I'm just going to tell you not to do it that way and give you a solution:
Get rid of the img elements inside your div elements. Change the background-image property of your button2 class to the image that you want as the default. Leave your .button2:hover property as is.
This is what you are looking for. but I'm sure you haven't try in Google at-least. I recommend you to follow a simple CSS tutorial first.
#main{
background-color:#ececec;
height:500px;
width: 600px;
margin:0px auto;
}
.button{
z-index:1000;
width:170px;
height:40px;
display:block;
background-repeat:no-repeat;
}
#but_one{
background-image : url(images/but_one.png);
}
#but_two{
background-image : url(images/but_two.png);
}
#but_three{
background-image : url(images/but_three.png);
}
#but_one:hover{
background-image : url(images/but_one_h.png);
}
#but_two:hover{
background-image : url(images/but_two_h.png);
}
#but_three:hover{
background-image : url(images/but_three_h.png);
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="main.css" />
<title>hi css</title>
</head>
<body>
<div id="main">
<a href="index.php" ><img id="but_one" class="button" /></a>
<a href="index.php" ><img id="but_two" class="button" /></a>
<a href="index.php" ><img id="but_three" class="button" /></a>
<div>
</body>
</html>
maybe to achieve what you want you need the help of jquery
<div class="box">
<a href="#index.php" > <img src="images/buttGloves.png" class="button" /></a>
<div class="overlay">play me!</div>
</div>
<div class="box">
<a href="#index.php" > <img src="images/buttBoots.png" class="button2" /></a>
<div class="overlay">play me!</div>
</div>
<div class="box">
<a href="#index.php" > <img src="images/buttEqu.png" class="button3" /></a>
<div class="overlay">play me!</div>
</div>
jquery
$(function(){
$(".box").hover(function(){
$(this).find(".overlay").fadeIn();
}
,function(){
$(this).find(".overlay").fadeOut();
}
);
});
Working demo
Just have one background image and hide a bit of it.
For example - double up as demonstrated here http://jsfiddle.net/edheal/Qb7YG
Here is the code
CSS:
#wibble
{
background-image: url(http://well-spun.co.uk/portfolio/technologies/images/rollover.png);
background-position: left top;
background-repeat: no-repeat;
height: 14px;
width: 200px;
}
#wibble:hover
{
background-position: left -14px;
}
HTML:
<div id="wibble">
</div>
The image is 28px high - just show either the top or bottom half depending if it is hovering.