Is it accessible when I wrap the header in a link? - html

I have a header and I would like to create a back to homepage link from it. Is it a mistake if I do this?
<a href="index.php?menuid=1" title="Go back to the homepage.">
<header>
<h1>Title of the page</h1>
</header>
</a>
If it's better to create link from the <h1> then how to expand the link to the size of the header? Because the link on it looks like this:

If you want the entire header to be a link, that is the correct way to do it (at least in modern HTML5 browsers). If you want your <h1> to be the full width of <header> then add
h1 {
width: 100%
}
to your CSS (though you should add an id or class to the h1 and select through that, better than a general h1).

Adding my answer for what is worth (also updated you fiddle)
header{
display:block;
height:210px;
width:560px;
text-align:left;
background-color:#eb4172;
border: 20px solid transparent;
}
h1 {
background-color:#00aaff;
width:100%;
height:100%;
display:block;
}
h1 a{
width: 100%;
display: block;
height: 100%;
}

Related

How do I make an image clickable in a navigation bar?

I've currently created a navigation bar for my website for university assignment. I've implemented an image on their which is the universities logo which I'd like to link to the university homepage. However, when I try to use the anchor tag '' to make the image clickable to link to the homepage, it messes up for the style of my navigation bar and would like to know if there's a workaround. I know the issue is that the image will take on the styles of the anchor tags I have declared for the navigation bar. I'll include images of before and after creating the link and show the HTML and CSS of that section.
This is the navbar before making the image clickable.
This is the HTML for it:
<div class="top_nav">
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
This is the CSS for it:
.top_nav {
overflow: hidden;
background-color: #2c3e50;
border-bottom: 20px solid #ed0162;
position: fixed;
top: 0;
width: 100%;
}
.top_nav a {
float: left;
color: white;
text-align: center;
padding: 30px 20px;
text-decoration: none;
font-size: 17px;
margin-bottom: 0;
font-family: monospace;
}
.top_nav a:hover {
background-color: #ed0162;
color: white;
}
.logo {
float: left;
margin: 15px;
}
This is the HTML and webpage after I try to make the image clickable:
There is now big spacing inbetween and the hover style now affects the image when I don't want it too.
The HTML code after:
<header>
<div class="top_nav">
<a href="https://www.ntu.ac.uk/">
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
</a>
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
</header>
I've tried removing the 'logo' class from the image style but it doesn't really change it that much.
There are lots of ways to do this but flexbox makes it really easy. also will simplify your css. Just wrap the image in a anchor tag to make it clickable.
.top_nav {
display:flex;
justify-content:space-around;
align-items:center;
overflow: hidden;
background-color: #2c3e50;
font-size:2vw;
width: 100%;
}
.top_nav a {
width:10%;
color: white;
text-decoration: none;
font-family: monospace;
}
.top_nav a:hover {
background-color: #ed0162;
color: white;
}
img{
width:100%;
}
#short{
width:2.5%;
}
<div class="top_nav">
<a id='short' href='https:\\www.google.com'><img class="fa facebook" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png" scale="0"></a>
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
I find that it's generally pretty poor practice to use element names (such as a and div) in CSS selectors at all, for this exact reason.
Consider adding something like class="navigation" to each link in your navbar, and then change the .top_nav a selector to .top_nav .navigation. Then you could add a similar class to the logo <a>.
Not only does this make the CSS more specific, but much more readable when someone else (or you in six months' time) has a look at this without any other context of the rest of the page.
One way to solve this is to use the :first-of-type pseudo css selector. Something like that would be the correct way to handle it:
.top_nav a:first-of-type {padding: 0;}
EDIT
I'm sorry, on the original answer i miss the part to advice you wrapping your image with a element. So change this:
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
To:
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge" />

How do I incorperate a line break in a web app? (HTML,CSS)

So I have been researching this for the past 10 or so minutes and am now bringing it to this community. I don't know how to make a break like this:
I know there used to be an "hr" tag like so, but its depreciated and I'd prefer to use something else. Its a common thing for login pages where its Email login "or" login with a social account. If you have any tips or find anything, please link it down below!
Thanks in advance!!
I personally would use an HR with confidence, but if I didn't want to use HRs I'd try something like this, using the :after selector.
p {
text-align: center;
}
p span {
background-color: #fff;
display: inline-block;
padding: 0 3px;
}
p:after {
content: '';
display: block;
border-bottom: 1px solid black;
margin-top: -8px;
}
<p><span>or</span></p>
The <hr> is not deprecated.
In HTML5, the <hr> tag defines a thematic break.
In HTML 4.01, the <hr> tag represents a horizontal rule.
However, the <hr> tag may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.
All the layout attributes are removed in HTML5. Use CSS instead.
For more check https://www.w3schools.com/tag_hr.
An alternative would be to use for example <div>s and borders (check the snippet):
.thisIsFormContainer
{
position:relative;
float:left;
border:1px solid #000;
border-radius:4px;
text-align:center;
padding:20px;
}
.top
{
position:relative;
width:90%;
margin:0px auto 10px auto;
padding:0;
border-bottom:1px solid #09f;
}
.fieldGroup
{
position:relative;
width:90%;
margin:0px auto 0px auto;
padding:0;
text-align:left;
}
.item
{
position:relative;
}
<div class="thisIsFormContainer">
<div class="top">
<div class="item">Send us an email!</div>
</div>
<div class="fieldGroup">
<div class="item">Address:</div>
<div class="item">Country:</div>
</div>
<div class="fieldGroup">
<div class="item">State:</div>
<div class="item">City:</div>
</div>
</div>

Creating Images with small text tags to the right in pure css

I am trying to create a mock up of a PSD file and i'm having trouble getting some tags at the bottom of a blog post to behave.
Here is a link to the image;
http://imageshack.com/a/img923/5718/rfVFqe.png
(I'm not allowed to post real images yet)
Here is my css code so far for it;
.comment { content:url(comment.png) ; height:auto; width:auto; }
and then in the html;
<div class="comment"><p>comments</p></div>
the text does not appear at all however. I'm not sure if I can make it work this way?
Thanks all.
I did a similar thing for a footer of a page recently, but I had to use img and p tags.
<div class="comment">
<img src="svg/phone.svg" alt="Phone">
<p>800-888-0123</p>
<img src="svg/email.svg" alt="Email">
<p>billy#billsplumbing.ca</p>
</div>
That was my markup, and my CSS looked something like:
div.comment *{
display:inline-block;
margin:0 .2rem;
}
div.comment p{
margin-right:1rem;
}
div.comment img{
height:25px;
width: 25px;
}
I don't know if this is quite what you're looking for, but this is how I did basically what you are showing.
Why not use background: url(comment.png) instead? And then add some padding-left to the div.
Code:
.comment{
background: url('https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/bubble-24-24.png') no-repeat;
padding-left: 30px;
height: 24px;
float: left;
margin-right: 10px;
}
.comment p{
margin: 0
}
<div class="comment"><p>Comments</p></div>
<div class="comment"><p>Comments</p></div>
<div class="comment"><p>Comments</p></div>

Need Help in Div Management Please

I am a Beginner Website Developer, I want to make my college's project but stuck at the beginning because my navigation div and small divs in navigation div are not going to transform or transit at once. when i apply transition at one of em with absolute position all (also apply absolute position to other three small divs) the all three of em except first disappears. Code is linked. I want to make navigation just like IMDB's Navigation. (with downside transition and with links and picture at one end.)
-Thank in advance.
HTML CODE:
<body>
<div id="Papadiv">
<header id="Header">
<Div id="Logodiv">
<img src="Images/Logo.jpg" height="100px" width="100px" />
</Div>
<Div id="Titlediv">
<font size="+5" face="Comic Sans MS, cursive">MobilePassion.com</font>
</Div>
</header>
<nav id="Nav1">
<div id="navoption1">
<a href="Index.html">
New Arrivals</a>
</div>
<div id="navoption2">
<a href="Famousmodels.html">
Famous Models</a>
</div>
<div id="navoption3">
<a href="Whoweare.html">
Who We Are?</a>
</div>
<div id="navoption4">
<a href="Contactus.html">
Contact Us</a>
</div>
</nav>
/* CSS Document */
#Nav1
{
background-color: #FDAA2F;
height:50px;
width:800px;
}
#navoption1
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption2
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption3
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
}
#navoption4
{
background-color:#FD771E;
height:10px;
width:160px;
border-radius:20px;
float: left;
color:#722703;
padding:20px;
text-align:center;
#navoption1:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink;
background-image:url(Rose%20(1).jpg)
}
#navoption2:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
#navoption3:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
#navoption4:hover
{
color:#C13D04;
background-color: #F5530E;
animation:alternate;
text-decoration:blink
}
I think first off you need to do some research on how to build a "CSS Mega Drop Down Menu". (That's usually what they are called and you should be able to find a good example in which you can structure your styling off of.)
A "classic" drop down menu usually contains lists nested (or in your case - divs) within parent list items.
"Here" is a good step by step example that I think should get you off and running.
I have been rtying to find a good resource for an example. These are good examples to learn from i think. http://code-tricks.com/simple-css-drop-down-menu/ , http://css-tricks.com/simple-jquery-dropdowns/ . It would also be wise for user experience to use hoverintent (http://cherne.net/brian/resources/jquery.hoverIntent.html) or a delay. This creates a better user experience.

How to put text on an image

I'm trying to write text over an image with the CSS and HTML below but it's not working..
CSS
.social_media_head{
background: url(newsletter_image.gif) no-repeat center;
position: relative;
right: -9px;
height: 0;
width: 325px;
padding: 30px 0 0 5px;
}
.media_name h2{
position: relative;
top: 2px;
}
.media_name {
position: relative;
top: 2px;
}
HTML
<div class="social_media_head">
<h2 class="media_name">Social Media</h2>
</div>
Example jsfiddle
Update
I'm very sorry if the image I'm referring to is wrong. The image I want to put text on is the image on top of the social media icons (facebook, twitter, youtube)...i.e. Image inside class = "social_media_head".
Once again I'm sorry for the confussion.
you can do this by setting z-index of text higher than image and position absolute
.text{
z-index:101;
position:absolute;
/set the position of text you want
}
.image{
z-index:100;
}
and to text above image
.media_name h2 should be h2.media_name
h2.media_name {
color: red;
margin-top: -30px;
top: 2px;
}
full screen Result and fiddle
Try the following to avoid H-tags, and for the box to adjust for height the image is inline rather than as background: (see code here http://jsfiddle.net/jySZB/1/)
(due to update, the old code is removed and kept in the link above - see new link and code below) -
UPDATE: if "over an image" means above rather than on top (which do make more sense in this case), try this code instead:
http://jsfiddle.net/jySZB/2/
HTML:
<div class="social_media_head">
<div>Social Media</div>
<img src="http://satcomng.com/types/twitter.png" alt="" />
<img src="http://satcomng.com/types/twitter.png" alt="" />
<img src="http://satcomng.com/types/twitter.png" alt="" />
</d
CSS:
.social_media_head {
display:block;
}
.social_media_head div {
color:red;
font-size:26px;
font-weight:bold;
font-family:sans-serif;
clear:both;
}
Result:
Tip: as the images are inline here they are easy to convert to click-able links to go the the social sites (I used only one image for example).
Works for me (simplified): http://jsbin.com/uqazel/1/
Maybe you need to set an appropriate height.