I have the following:
HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<div>
<a href= https://google.com>Google</a>
<a href= https://google.com>Google</a>
<a href= https://google.com>Google</a>
</div>
</body>
</html>
CSS
a:hover{
text-decoration: none
}
a:first-child{
color: #CDBE70
}
a:nth-child(3){
color: #FFC125
}
I just started learning HTML and I have a problem. What I have above displays 3 links to google but they are all on the same line. I want each of the links to be on a new line. I tried using <p> and changed all the a's to p's in the CSS code but it doesn't do anything.
If the links are semantically in a list, you should reproduce that in the markup as well:
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
If you don't want to have bullets in front of the links, you can remove them with CSS list-style-type: none; on either the ul or the lis.
CSS:
Add display: table in your tag
a{display: table;}
You can do it with CSS by using float:left; and clear:left;
a {
float:left;
clear:left;
}
Try using break to give a line break between the three links like this;
<div>
<a href= https://google.com>Google</a><br/>
<a href= https://google.com>Google</a><br/>
<a href= https://google.com>Google</a><br/>
</div>
<br> produces a line break in text.
Line break tag can be placed in other HTMl elements like
paragraphs, lists, tables and headings
Use line break tag for minor formatting issues. For larger issues
use tables and align attribute.
Line break tag does not require a closing tag.
For increasing the gap between the lines of text use CSS margin property.
• margin-bottom: 0
• margin-left: 0
• margin-right: 0
• margin-top: 0
Use the <br/> tag to break the row.
Google<br/>
But with this solution you'll have to modify the css, as the next <a> is no longer a child. Instead you can use nth-of-type and first-of-type:
a:hover { text-decoration: none }
a:nth-of-type(3) { color: #FFC125 }
a:first-of-type { color: #CDBE70 }
This will assure that only <a> tags are part of the selectors.
or you can put each link in it's own <div>:
<div class="menu">Google</div>
<div class="menu">Google</div>
<div class="menu">Google</div>
a:hover { text-decoration: none }
div.menu:nth-child(3) a { color: #FFC125 }
div.menu:first-child a { color: #CDBE70 }
Simply add <br/> or <p> tag after each of your link ,it will be displayed on new line. :)
see this Demo
and css
<style>
div a{
display:list-item;
}
</style>
You can try this:
Working Demo
a{
display:block;
margin-bottom:10px;
}
a:hover{
text-decoration: none
}
a:first-child{
color: #CDBE70
}
a:nth-child(3){
color: #FFC125
}
In order for you to break into a new line, you should look to use the display: block; declaration in your css.
Here's a few reasons as to why to use display instead of float.
Floating elements is all well and good, but can become messy due to the 'floated element' coming out of the DOM, which makes it harder to position other elements.
a elements default to display:inline, meaning multiple a tags appear in a single line. By changing them to display:block; means that only one will be in a row at a time (i.e. what you are looking for).
A quick demo would be something like:
a:hover {
text-decoration: none
}
a:first-child {
color: #CDBE70
}
a:nth-child(3) {
color: #FFC125
}
a {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>Result</title>
</head>
<body>
<div>
Google
Google
Google
</div>
</body>
</html>
You can do what Twitter's Bootstrap does all over the place and surround your elements with divs with proper classes. What I would do is:
CSS
.anchors a:hover{
text-decoration: none
}
.anchors div:first-child a{
color: #CDBE70
}
.anchors div:nth-child(3) a{
color: #FFC125
}
HTML
<div class="anchors">
<div>
<a href= https://google.com>Google</a>
</div>
<div>
<a href= https://google.com>Google</a>
</div>
<div>
<a href= https://google.com>Google</a>
</div>
</div>
I surrounded a tags with divs to make the a tags selectable by their indexes in css. In order to access them in the dom, defined a wrapper div and named its class anchors. I am first selecting the wrapper div (.anchors) and accessing it's child divs with indexes and then their anchors.
Here is the working fiddle.
Related
Is it possible to change the background-color of a div inside a link using only a :visited pseudo class and without using Javascript?
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {background-color:blue;}
a:visited {background-color:green;}
.smallbox {
background-color: #666;
height: 50px;
width: 50px;
}
.smallbox:hover {background-color:blue;}
.smallbox:visited {background-color:green;}
</style>
</head>
<body>
<div class="smallbox"></div>
</body>
</html>
Yes, I believe you can do this. Just remember the visited pseudo class belongs to the link, not the div.
a:hover .smallbox {background-color:blue;}
a:visited .smallbox {background-color:green;}
a:visited .smallbox:hover {background-color:blue;}
.smallbox {
display: block;
background-color: #666;
height: 50px;
width: 50px;
}
<span class="smallbox"></span>
As pointed out by Dekel in the comments, a div inside an anchor element is invalid HTML. You could cheat and put a span inside the link and set its display property to "block", but that's probably not really better.
If you just need a link that behaves like a block element rather than an inline element, consider switching the anchor tag's display property to block and removing the inner element entirely as suggested in this post: <div> within <a>
Instead of applying it to a div, why not apply it directly to the "a" tags, as you did, and remove the div? Why do you need it? a: hover { background-color:blue; } should work just fine. You just need to add a display:block to the a:hover style, as well.
Or, if you have multiple a tags on the page and only want to apply it to one of them, you can use an id and apply it to that:
<a id="someId" href="#">My Link</a>
CSS:
#someId {
background-color: blue;
display: block;
}
friends, sorry for that irritating questions but I didnt really get the sense of some stuff here, im new to HTML/CSS...
overflow:hidden under ul{}
if I dont use it here, then the green background of the ul element doesnt appear anymore. and it is used to cut content which is bigger than its element. but in that code, which content is bigger than which element so that the background disappears? in other words why does the background of the total width of that ul-element dissappear because of these floating li-elements?
display: inline-block
I was wondering about the sense of inline-block here. the only thing I recognized is, that by using inline-block here, the vertical padding does work now. so why doesnt vertical padding work here if i use block or inline instead of that inline-block, I thought padding does work in ALL directions no matter if block inline or inline-block?
li a:hover, .dropdown:hover .dropdown-btn {
does li a: hover mean that the code is for all "a" which are directly under the parent "li" or also for the "a"s within the (which are not directly under the parent li because their parent is div)?
And what does .dropdown:hover .dropdown-btn exactly mean?
Heres the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li class="dropdown">
Dropdown
<div class="dropdown-menu">
Link 1
Link 2
Link 3
Link 4
</div>
</li>
</ul>
</body>
And the CSS file:
body {
font-family: 'Arial', sans-serif;
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
ul {
list-style-type: none;
margin:0;
padding: 0;
background-color: #1ebb90;
overflow: hidden;
}
li {
float: left;
}
li a, .dropdown-button {
display: inline-block;
color: #ffffff;
text-align: center;
padding: 18px 22px;
text-decoration: none;
}
To get things started, I can help with the overflow:hidden. That is because of the css float instruction.
When you float:left or float:right a couple of elements, they will go side-by-side... but they will also lose their height.
<div id="wrap">
<div id="boxLeft">Box Left</div>
<div id="boxRight">Box Right</div>
</div>
* {position:relative;box-sizing:border-box;}
#wrap{width:70%;border:2px solid red;}
#boxLeft {background:pink;}
#boxRight{background:palegreen;}
[id^=box]{width:50%;height:40px;padding:30px;text-align:center;}
Demo 1 - Not floated
Demo 2 - Floated, height is gone
Demo 3 - Fixed height with overflow on parent
The li a:hover means any a tag under the li -- not necessarily directly under the li.
See this demo
.dropdown:hover .dropdown-btn
This means: when user hovers over an element with class="dropdown", the child element with class="dropdown-btn" gets styled.
Demo
I am trying to remove an underline from an href, that is wrapped in a div element. But for some reason it is not being removed.
Can anyone please help me? Below is the code.
<style>
a .menu_items {
text-decoration:none;
font-size: 34px;
color:red;
}
</style>
</head>
<body>
<div class="menu_items"> Pizza </div>
Try this:
a {
text-decoration:none;
}
Cause you are trying add text-decoration to the div with class .menu_items but not for tag a
you can do this and it will be easier after developing more pages and you will not have to create a style for each one you only have to call your style from your css
i explain you...you have to found your css default in your project or create a new one and load in your page where you want to call the styles that you will create in your css file....insert this in your css
a {
text-decoration:none;
font-size: 34px;
color:red;
}
and in your page after loading your css file you only have to copy this as you were codding
<body>
<div class="menu_items"> Pizza </div>
</body>
i hope i helped you
Please try putting the A link inside the DIV then reverse the CSS order. I believe the other way around is not valid.
just delete the selector '.menu_items' like this
<style>
a {
text-decoration:none;
font-size: 34px;
color:red;
}
</style>
<a href="#">
<div class="menu_items">
Pizza
</div>
</a>
here's the jsfiddle
The CSS property for removing the underline is
text-decoration:underline;
You will need to apply this to your anchor element.
See this here-> http://jsfiddle.net/CzDkH/
Hope this helps!!!
Place this above all your styles:
a {
text-decoration:none;
}
Get in the habit of placing all a , html , and body style properties at the top of your styles too! It will save you from headaches like this.
Happy styling :)
If you only want to do it for the class "menu_items" and not in the rest of the page, the only thing is you've got it back to front. It's like this:
.menu_items a {
text-decoration:none;
font-size: 34px;
color:red;
}
Similarly you've got the div inside the a tag, and should have the a tag inside the div
<div class="menu_items">Pizza</div>
I began to learn html'n'css, but I've encountered one thing that I cannot explain. I have a html file, that has a div which acts like a link (in the application I am setting the div size and want for the whole box to act like a link). I cannot remove the text underline decoration for the text in the div though (Link1 in the Example is always underlined). The selector should be "any div within a link element", and because the link is red, I think it is correct.
I managed to do this by introducing a special class for removing the underline explicitly (Link2 in the Example is ok), but I would like to have all the menu styles in one place.
The question is, whether can someone explain why the removing deco like this (Link1) does not work. Moreover, I would like to ask if the organization of the menu is a good style, or if I should reorganize the code, e.g: having this for example:
<div>Blabla</div>
and the style:
a.menuitem {...}
a.menuitem div {width:...;}
Here is the minimal (non-)working Example:
<html>
<head>
<style>
a div.menuitem {
text-decoration: none;
color: red;
}
.remove-under {
text-decoration: none;
}
</style>
</head>
<body>
<a href="./index.html">
<div class="menuitem">Link1</div>
</a>
<a href="./index.html" class="remove-under">
<div class="menuitem">Link2</div>
</a>
</body>
</html>
Thanks a lot!
Semantically speaking a <div> should not go inside an <a>. div tags are block elements where anchor tags are inline elements - and block elements should never go inside inline elements. Instead use <span> if you need to stylize something different inline but in your case, additionally, you can add a class to the <a> which would work better.
Here is your new code:
<a href="./index.html" class="menuitem">
Link1
</a>
<a href="./index.html" class="remove-under menuitem">
Link2
</a>
You can have multiple classes to an element by putting a space, so Link2 has the class "remove-under" and "menuitem"
Update your CSS to remove the underline:
.remove-under {
text-decoration:none;
}
In order to get your whole a tag to be a link (not just the text) add the follow css for your menuitem class:
.menuitem {
display:block;
width: 100px;
height: 50px; /* or whatever your desired width and height */
background: red; /* to show that the whole anchor will be link, not just text */
}
This is not the ideal solution. You really should not be putting block level elements inside inline elements.
However, if you absolutely must get it working, you can add display: inline-block; to the div.
a div.menuitem {
text-decoration: none;
color: red;
display: inline-block;
width:100%;
}
.remove-under {
text-decoration: none;
}
You have 2 problems here:
You can't do something like this
<div></div>
because a is an inline element. What you do here is an invalid HTML code. DO it like this:
<div></div>
You try to apply text-decoration:none on the div element and you should apply it to the a element.
a {text-decoration:none;}
I know that h1 tag is important for SEO, so all my title is H1 (bravo!)
Now, I need to have a title (as the first line of a text ) a little different on some pages.
Usually, I just duplicate h1 as h2 and alternate.
The question: Is it possible to add a class to the title tag... (I have try without success)
You can style a header like this:
h1 { color: red; }
Or like this:
<h1 class="fancy">Fancy</h1>
.fancy { font-family: fantasy; }
If it's not working:
Check you don't have an old stylesheet cached (ctrl-F5 to reload)
Check you don't have any rules overriding your class (inspecting with Firebug or similar is very helpful here).
Check for typos in the HTML and CSS
Edit:
It sounds like you had h1 .myClass instead of h1.myClass - there's an important distinction:
h1 .myClass { } /* any element with class="myClass" within an <h1> */
h1.myClass { } /* any <h1> with class="myClass" */
Sure you can:
<h1 class="someclass">…</h1>
The class attribute is a in the attribute group coreattrs of core attributes that can be used with the h1 element.
It sounds like you are using h1 for all titles on the page. Typically you would have a single h1 tag on the page for what the page contains (with text at least partly matching the title of the page), and lesser header tags for headlines of different parts of the content. That way you give most information to the search engines about what's important on the page. There are of course pages that doesn't fit into this model, but many do.
There are many different ways that you can specify a style for headers. For example:
For all h1 tags:
h1 { font-weight: bold; }
For all h1 and h2 tags:
h1, h2 { margin: 10px; }
For all h1 tags inside an element with id="main":
#main h1 { background: #ccc; }
For all h2 tags with class="Info":
h2.Info { color: #000; }
For all h3 tags inside an element with class="More":
.More h3 { text-decoration: underline; }
You can add a class to an <h1> tag. Like this:
<h1 class="myclass"> ... </h1>
You can easily style it like this:
<style type="text/css">
.myclass { color : green }
</style>
The following should work:
<html>
<head>
<style type="text/css">
h1.custom {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<h1 class="custom"> test </h1>
</body>
</html>
The < title > tag is in your < head > section, so it wouldn't really make sense to add a class to it.
You can add a class to your < h1 > tag, though.
<h1 class="title">
<div class='row' id='content-wrapper'>
<div class='clear'/>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-wrap'>
<h1 class='error-item'>404</h1>
<h2>Page Not Found!</h2>
<p>Sorry, the page you were looking for in this blog does not exist.</p>
<div class='clear'/>
<a class='homepage' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Go To Home</a>
</div>