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>
Related
Picture
if you click on this link you will see at left corner of the navigation bar i want to create an folat image like it
so i started to get some codes to preform it
so i found this
<html>
<head></head>
<body>
<div class="menu">
<li>
<img style="float: left;margin-left: -50%;" src="../images/logo.png" alt="Tera Host inc." height="60" width="200">
</li>
</div>
</body>
</html>
but its appearing at the top of the page i want something on the top left corner so an friend told me to do something
You have to make 2 divs following each other
And on each one you do style="float:left;"
And when yuu re done with the floating left
Make a big div that contain those divs
and on the ending do
so if anyone could help me pls reply the whole code
Thanks in advance
I am not very clear with your question! But i just gave a try in an assumption and I think you need to make the menu & logo float separately.
You can check this fiddle,
https://jsfiddle.net/8brvykvn/1/
<div class="header">
<a href="#" class="logo">
<img src="../images/logo.png" alt="Tera Host inc." height="60" width="200"></a>
<ul class="menu">
<li>Dashboard</li>
<li>Game Monitor</li>
<li>TS3 Admin</li>
</ul>
css:
.header a{
float: left;
margin-right:10px;
}
.header .menu{
float : left;
margin : 0;
padding: 0;
}
.header:after{
content:'';
display:block;
clear: both
}
.header .menu li{
list-style:none;
display:inline-block;
}
.header .menu li > a{
margin-right:10px;
}
I want to have the same size for 3 containers defined as follows:
<div class="workingItemContainer">
<div id="workingItemContainer" runat="server">
<a class="workingItem" runat="server" id="workingQuoteAnchor">
<%=quoteNumberAnchor%>
</a>
<br />
<a class="workingItem" runat="server" id="workingPOMAnchor">
<%=pomNumberAnchor%>
</a>
<a class="workingItem" runat="server" id="workingProdCancelAnchor">
<%=prodCancelNumberAnchor%>
</a>
</div>
</div>
This is the code the code in css that implements the background and the font:
.workingItemContainer {
text-align: center;
}
.workingItemContainer div {
display: inline-block;
background-color: #ff9900;
}
If I display the workingQuoteAnchor, it shows differently from the others.
Maybe try removing the <br> tag that is after the #workingQuoteAnchor . That is most probably creating the extra space. Also if you need any spaces do that using CSS instead of changing the DOM for such cosmetic purpose.
I added : max-width in
.workingItemContainer div {
display: inline-block;
background-color: #ff9900;
}
and solved the problem.
For some reason my background color does not cover the entire page width on my mobile device, However, it looks fine on a regular desktop. I cannot find the problem.
Here is my style.css:
#media only screen and (min-width : 250px) and (max-width : 780px)
{
#pageHeader{
border:none;
background-color:"background-color:#F5F5DC";
}
#pageHeader nav {
height:300px;
width:100%;
}
#pageHeader nav ul {
padding-left:0;
width:100%;
}
#pageHeader nav ul li {
width:100%;
text-align:center;
margin-left:25px;;
}
#pageheader nav a:link, #pageHeader nav a:visited {
height: 60px;
padding: 5px 23px;
text-decoration: none;
dislay: block;
width:100%;
}
#pageHeader img{
width: 100%;
height: auto;
margin-bottom: 3%;
}
}
Here is my html:
!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
</head>
<body>
<div id="pageHeader" style="background-color:#F5F5DC">
<img src="style/logo.jpg" name="logo" width="431" height="94" alt=""/>
<br />
<br />
<nav>
<ul>
<li >Home</li>
<li style="margin-left:25px">All Products</li>
<li style="margin-left:25px">Blog Using Ruby</li>
<li style="margin-left:25px">User Javascript Page</li>
<li style="margin-left:25px">Submit Concerns using Perl</li>
<li class="active" style="margin-left:25px">About Us using HTML5</li>
<li style="margin-left:25px">Asp Help Pages</li>
<li style="margin-left:25px;"><img src="style/cartimage.jpg" name="shopping cart" /></li>
</ul>
</nav>
</div>
</div>
<h1 align="center">About Us</h1> </br> </br>
<div align="center" id="pageBody">
<table width="100%" border="0" cellpadding="6">
<tbody>
<tr>
<td> Code omitted </td>
</tr>
</tbody>
</table>
<div id="pageFooter">
Copyright |Admin Log In
</div>
</div>
</body>
</html>
Look that you have an extra tag when you close your
<div id="pageHeader" style="background-color:#F5F5DC">
If you are using more code, and floating some tags, dont forget to put the "overflow:hidden" in the container that "contains" the tags floated!
Remove the explicit height on the nav element - let the flow content dictate that rather than setting it explicitly. If you clear fix the floats in the unordered list using the CSS-
.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
(See http://css-tricks.com/snippets/css/clear-fix/)
The list will take the height of its contents.
You will also want to remove the margin left on the list item elements (these are at 100% plus the 25px margin), replacing it with padding-left and setting box-sizing: border-box on the list items (or just set the margin to zero when at a smaller viewport width as your design doesn't seem to need it).
The unordered list will need to look something like this-
<ul class="group">
<li>Home</li>
<li>All Products</li>
<li>Blog Using Ruby</li>
<li>User Javascript Page</li>
<li>Submit Concerns using Perl</li>
<li class="active">About Us using HTML5</li>
<li>Asp Help Pages</li>
<li><img src="style/cartimage.jpg" name="shopping cart" /></li>
</ul>
In either case you should remove the inline margin-left: 25px styles - you will find it much more maintainable to keep these externally in your CSS.
A few days ago I was working on a classic menu. It has a logo on the left and some menu buttons on the right. This was my first try – fiddle1. But someone from this community told me that menus normally aren't coded like that but with <ul>and <li>.
So I tried to rebuild that menu – fiddle2. Unfortunately nothing works.
My first issue is that I have the feeling that the <div id="menubuttons"> is not located IN the <div id="header">. The second problem is that <div id="menubuttons" align="right"> isn't aligned right as it should be.
Can you help me to get the visual result of fiddle1 with <ul>and <li> tags?
ul element by default will take margin
So please add css like this, it will remove the default margin and padding
ul{margin:0; padding:0}
#menubuttons { float:right}
Check this Demo
I changed some code, try this:
http://jsfiddle.net/WnneG/
<ul style="float:left;paddin:0px;margin:0px;">
<li class="menubutton"> Home
</li >
<li class="menubutton"> Info
</li>
<li class="menubutton"> Spenden
</li >
<li class="menubutton" align="right" style="margin-right: 20px;"> Kontakt & Impressum
</li >
</ul>
replace this line of code:
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" align="right">
with:
<div id="header_logo" style="float:left;">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" style="float:right;">
hopefully you will get your desired result if this help You please mark it as green
See the code in the fiddles you posted. Yours tries to create a menu from divs, while the one you are trying to get to, has <li> items with float: left;
Put to <li> tag style display:block;float:right; like this: <li style="display:block;float:right">
Use float = right instead of align for the div menubuttons.
#menubuttons {
margin-right: 0;
margin-top: 0;
height: 2.5em;
line-height: 2.5em;
display: block;
float:right;
}
I have created a version of your menu. I think this helps: http://jsfiddle.net/yBTJF/4/
.menu
{
height: 30px;
background: #FFFFFF;
line-height: 30px;
list-style: none;
padding: 0 5px;
margin: 0px;
}
If you want :hover, all you have to do is create a selector in your CSS:
.menu a:hover
{
// ...
}
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.