i am surprised why these links have different color?here is code
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ka-ge" lang="ka-ge" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<style>
#links {
margin: 0 auto;
width: 4800px;
font-size:70px;
clear: both;
display: block;
}
#test a {
float: right;
}
</style>
<body bgcolor="green" >
<img src ='english.gif' style="float:right" width="88" height="88">
<img src ='russian.gif' alt="Russian flag" style="float:right" width="88" height="88"/>
<img src="georgian.jpg" style="float:right" width="88" height="88"/>
<div id="links">
<a href=" index.html " >მთავარი </a>
ბაკურიანი
გუდაური
ზღვა
კახეთი
სვანეთი
ვარძია
ქართლი
ძველი_თბილისი
</div>
</body>
</html>
when i run this in google chrome,everything has same color,except ზღვა(sea),კახეთი(kakheti),ვარძია(vardzia),ქართლი(qartli) all this name are in blue color,while others in other color,could you help me why is so?
These are the default styles for :visited or :active.
The :visited selector is used to select visited links.
The :active selector is used to select and style the active link.
A link becomes active when you click on it.
EDIT: To make them all the same style you can do this:
a, a:active, a:visited {
color: red;
}
That would style normal links, active links and visited links. You can also do rollovers using a:hover.
Related
I am trying to create 1 search menu. With the search history that will appear when I click input search box
When I use class:focus ~ .class2, they work ? Please show me how we work
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.header__search-input:focus .header__search-input-history {
display: block;
}
.header__search-input-history {
display: none;
}
</style>
</head>
<body>
<div class="header__search-input-wrap">
<input type="text" class="header__search-input" placeholder="Search">
<div class="header__search-input-history">
<h3 class="header__search-input-history-title">History Search</h3>
<ul class="header__search-input-history-list">
<li class="header__search-input-history-item">
<a class="header__search-input-history-link" href="">History Item</a>
</li>
<li class="header__search-input-history-item">
<a class="header__search-input-history-link" href="">History Item</a> </li>
</ul>
</div>
</div>
</body>
</html>
Add the following css. This makes use of the + sibling selector
.header__search-input-history{
display: none;
}
.header__search-input:focus + .header__search-input-history
{
display: block;
}
Example here: https://codepen.io/jriches/pen/QWveZqW
I want to open a link in the same tab with html when clicking a word. Nevertheless, even if I've tried it using target="_self" and not using any target, it only works with target="_blank", but, as you may know, this opens the link in another tab.
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
min-width:360px;
}
a{
color:#009900;
text-decoration:none;
}
a:hover
{
text-decoration:underline;
}
p
{
font:0.8em sans-serif;
}
h1
{
font:1.5em sans-serif;
color:#fff;
background:#006600;
padding:5px
}
</style>
</head>
<body>
<h1>play</h1>
<p>YT player</p>
</body>
</html>
<a target="_self" href="https://www.youtube.com" >YT player</a>
Use _self
<a target="_self" href="https://www.youtube.com" >YT player</a>
I'm sure you might have figured it out by now (over a year later), but your code:
<a target="_self" href="https://www.youtube.com" >YT player</a>
is written a bit strange. Try:
YT player
This works for me:
<p>YT-Player</p>
I just started learning webdesign and I'm having this ongoing problem and I've posted a question about it before. Everything I tried didn't work but I made a few changes so I wanted to rephrase the question and add some more details.
I'm making a simple website for a Romanian artist and it will have an English version and a Romanian version (switching languages with tiny flags in the nav bar).
It's all written in WordPad, using just html and css, and all pages are in the same root folder. I have several html files and one css file (so it's an external file), which is linked in the head of each page. I have English versions and Romanian versions and they're all linked accordingly from the navigation.
Now, my issue is that the CSS will only work on the main English page and refuses to on any of the others, no matter which language, despite all of them having the same head, header and footer structure.
I tried Firefox and Chrome and it's the same story.
I clicked on "Page Source" on all the pages when opened in a browser, corrected any errors showing up, and the link to the css and all pages works when I click it.
I initially had several CSS files, one for each html file, but I deleted them except for one (I misunderstood the process initially and didn't realize they can all have the same css file). So now there is only one CSS file in the root folder "Style.css".
All html files are saved in "Unicode" encoding.
Except for the modified words, this is the exact css, as well as html structure of the main English page (on which the CSS works):
h1 {
display: inline-block;
font-family: Tahoma;
}
nav {
display: inline-block;
float: right;
font-family: Tahoma;
}
address {
float: right;
}
article.figures figure {
display: inline-block;
float: left;
}
aside {
float: right;
Font-family: Verdana;
}
footer {
color: grey;
font-family: Tahoma;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Name</title>
<LINK rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="description" content="Name, visual artist">
<meta name="keywords" content="Name, visual artist, abstract, painting, fine art">
<meta name="author" content="Me">
</head>
<body>
<header>
<img src="images\paint logo.jpg" width="150" height="110" alt="artists logo">
<h1>Name </h1>
<nav>
<a href=///C:/Users/.../main page in English.html>Galleries</a>
<a href=file:///C:/Users/.../News.html>News</a>
<a href=file:///C:/Users/.../About.html>About</a>
Shop
<a href="file:///C:/Users/.../webpageinRomanian.html">
<img src="images\romanian flag.jpg" width="20" height="15" alt="Romanian">
</a>
</nav>
</header>
<address>email</address>
<article class="figures">
<figure>
<img src="images\painting.jpg" width="335" height="325" alt="painting">
<figcaption>Paintings from 2010 - 2015</figcaption>
</figure>
<figure>
<img src="images\2.jpg" width="335" height="325" alt="painting 2">
<figcaption>2009 - 2000</figcaption>
</figure>
<figure>
<img src="images\3.jpg" width="335" height="325" alt="painting 3">
<figcaption>1990 - 1999</figcaption>
</figure>
</article>
<footer>copyright Name
<br>
<A HREF="https://www.facebook./...">
<IMG SRC="images/fb logo.png" width="30" height="30" ALT="Facebook">
</A>
<A HREF="https://www.behance....">
<IMG SRC="images/behance logo.png" width="30" height="30" ALT="Behance">
</A>
<br>Webdesign by me
</footer>
</body>
</html>
This is a page on which the same CSS doesn't work:
h1 {
display: inline-block;
font-family: Tahoma;
}
nav {
display: inline-block;
float: right;
font-family: Tahoma;
}
address {
float: right;
}
article.figures figure {
display: inline-block;
float: left;
}
aside {
float: right;
Font-family: Verdana;
}
footer {
color: grey;
font-family: Tahoma;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Name News</title>
<LINK rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="description" content="Name, visual artist">
<meta name="keywords" content="Name, visual artist, abstract, painting, fine art">
<meta name="author" content="Me">
</head>
<body>
<header>
<img src="images\paint logo.jpg" width="150" height="110" alt="artists logo">
<h1>Name </h1>
<nav>
<a href=///C:/Users/.../main page in English.html>Galleries</a>
<a href=file:///C:/Users/.../News.html>News</a>
<a href=file:///C:/Users/.../About.html>About</a>
Shop
<a href="file:///C:/Users/.../webpageinRomanian.html">
<img src="images\romanian flag.jpg" width="20" height="15" alt="Romanian">
</a>
</nav>
</header>
<address>email</address>
<h2>What's New</h2>
<h3>Upcoming exhibitions:</h3>
<ul>
<li>July 2016</li>
<li>October 2016</li>
</ul>
<footer>copyright Name
<br>
<A HREF="https://www.facebook./...">
<IMG SRC="images/fb logo.png" width="30" height="30" ALT="Facebook">
</A>
<A HREF="https://www.behance....">
<IMG SRC="images/behance logo.png" width="30" height="30" ALT="Behance">
</A>
<br>Webdesign by me
</footer>
</body>
</html>
Which might work on this website, but I swear, it won't work in my browsers.
It's driving me nuts.
I'd be extremely grateful for any help!
EDIT:
This is what shows up in the developers console for the 'News' page:
And this is the root folder:
Try this inside your <head>
Source: w3schools
<base href="http://www.yourwebsite/" target="_blank">
Well it is working for me... make sure that the html and css files actually are in the same folder
/folder
--thing.html
--other.html
--style.css
And as pointed out in comment don't use c:/ to referer to files
Basically I am trying to create an email template using HTML and Dreamweaver. It's my first template. The fact that I cannot use <div> tag for email templates is really giving me headache. I am having difficulty aligning the social icons with the "I am social text". They both are assigned with align="center" inside the td tag. The image that is displayed below is "footer" section of my email template.
Here's the screenshot:
I am only posting the code for footer section because my content and header section is working fine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TrickyPhotoshop Newsletter</title>
<style type="text/css">
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 15px;
background: #CCC;
}
h4.copyright, p.copyright {
padding-left: 50px;
color: #FFF
}
h4.social {
padding-left: 50px;
color: #fff;
}
p.footer {
color: #FFF;
}
</style>
</head>
<body>
<table width="600" align="center" bgcolor="#999999">
<tr>
<td align="center"><h4 class="social">I am also social</h4></td>
</tr>
<tr>
<td align="center"><p class="footer">
<a href="http://www.facebook.com/trickyphotoshop">
<img src=
"images/Facebook-256.gif" width="25px" height="25px"/>
</a>
<a href="http://www.tricky-photoshop.com">
<img src="images/g+.gif" width="25px" height="25px" />
</a>
<a href="http://www.twitter.com/trickyphotoshop/">
<img src="images/twitter.gif" width="25px" height="25px" />
</a>
</p></td>
</tr>
<tr>
<td height="10"><h4 class="copyright">Copyright Area</h4></td>
</tr>
<tr>
<td height="10"><p class="copyright">
© All rights reserved
</p></td>
</tr>
</table>
</body>
</html>
Basically I want two things:
I want to properly align "I am also social" text with the three icons i.e. facebook, twitter, google+
As you can see there is a huge space between "Copyright Area" and "All Rights Reserved". I want to remove this space.
I know that my code is not too much professional but it's my first HTML code.
You should change the style as follows:
h4.social {
/* remove: padding-left: 50px; */
color: #fff;
}
h4.copyright, p.copyright {
padding-left: 50px;
margin: 0px; /* add this line */
color: #FFF;
}
I recommend using this chrome extension for "playing" with CSS changes
I have two questions:
When i run the code below, it shows me names of links in large form, after i reload, it is good, so what is problem?
I want to put spaces between names like this:
მთავარი ბაკურიანი გუდაური ზღვა კახეთი სვანეთი ვარძია ქართლი ძველი_თბილისი
How could i do this?
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<style>
#links {
margin: 0 auto;
width: 3000px;
font-size:70px;
clear: both;
display: block;
}
#test a {
float: right;
}
</style>
<body bgcolor="blue" >
<img src ='english.gif' style="float:right" width="88" height="88">
<a href="indexR.html"><img src ='russian.gif' alt="Russian flag" style="float:right" width="88" height="88"/>
<a href="index.html"> <img src="georgian.jpg" style="float:right" width="88" height="88"/>
<div id="links">
<a href=" index.html " >მთავარი </a>
ბაკურიანი
გუდაური
ზღვა
კახეთი
სვანეთი
ვარძია
ქართლი
ძველი_თბილისი
</div>
</body>
</html>
For question 2.): you could simply put a non breaking space in between:
კახეთი
სვანეთი
ვარძია
Which results in:
კახეთი
სვანეთი
ვარძია
Or you can add paddings/margins inside your style definitions so that anchors ("a tags") reserve some space to the left and/or right. The latte certainly is the preferred way to go.
You could use for space, it is a valid HTML string for space so it'll be validated by W3C too.
use between links to get spaces
<a href=" index.html " >მთავარი </a>
ბაკურიანი
გუდაური
indexR and index need closing </a> tags. Also for spaces use or css margins or padding.
For using space in your html application use
1) Entity name
 
;
Or
2) Entity Number
 
;
You can use %20 the HTML-ASCII syntax for the space character. I have found that sometimes doesn't work that well with links.
Add padding in anchor tag CSS file.
Directly applies to all anchor tag:
ul li a{ padding: 10px; }
Or if using any class then,
.classname ul li a{ padding: 10px; }
Though   is totally valid but do try this as this is a elegant way
<style>
.links
{
display:flex;
align-items:center;
justify-content:space-around;
}
.links a
{
flex:1;
text-align:center;
}
</style>
<div class="links“>
კახეთი
სვანეთი
ვარძია
</div>
How to make space between exemple: Home About Contact
.menu{
text-align: right; /*exemple*/
}
.menu1 {
list-style-type: none;
display: inline-flex;
}
.test{
color:red;
text-decoration: none ;
padding-inline-end: 55px; /*exemple */
}
<div class="menu">
<ul class="menu1">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>