I have 3 hyper links. I would like one to be aligned left, one aligned in the center, and the last aligned to the right; all on one line, symmetrically. I've centered headings using ALIGN="CENTER" etc. But after some research i found out that element (A) doesn't recognize that as a command necessarily. So, what is the proper method for getting these hyperlinks to align the way i need? This is literally my first day using HTML or any kind of programming language for that matter. Your help and patience is appreciated, Thank you.
There are many approaches to this depending on markup, but the most common approaches involve using floats or absolute positioning. Since you haven't provided any code to start with, I'll just give you a basic example.
HTML:
<div class="wrapper">
<a class="pull-left">Left Link</a>
<a>Center Link</a>
<a class="pull-right">Right Link</a>
</div>
CSS:
.wrapper { text-align: center; }
.pull-left { float: left; }
.pull-right { float: right; }
JSFiddle: https://jsfiddle.net/x4hrgdaL/
There are a few ways to do that, a table would be one, but this way is quick way. Not responsive however.
JS Fiddle
.hyperlink {
display: inline-block;
}
.one {
text-align: left;
width: 30%;
}
.two {
text-align: center;
width: 30%;
}
.three {
text-align: right;
width: 30%;
}
<div class="hyperlinkContainer">
<a class="hyperlink one" href="#">Hyperlink 1</a>
<a class="hyperlink two" href="#">Hyperlink 2</a>
<a class="hyperlink three" href="#">Hyperlink 3</a>
</div>
According to my understanding:your code looks like the following:
<a align="left">link1</a> <a align ="center">link 2</a> <a align="right">link 3</a>
If u want the alignment of the links to be in a format which you have mentioned,include the content in tag.
Ex:
<div align="left"><a>link1</a></div>
Related
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" />
I'm creating a horizontal nav bar in CSS and would like the icons to be placed in the following order from left to rigiht: +Matthew, Gmail, Images, 3x3 Square Block, Alarm Clock, Google Plus, Smiley Face. The problem is that the 3x3 Square Block always locates to the far right and does not fit in with the rest of the list. The block was created using a separate div and blocks with CSS. How do I make it so that I can place it as the fourth item from the left? Also, I am struggling to properly align my Google Plus icon with the rest of the list items. Whenever I try to set a seperate padding for the icon, it moves all of the icons down as well. Here's my code:
<ul>
<li><a class ="headerLink matthew" href="#home">+Matthew</a></li>
<li><a class ="headerLink gmail" href="#news">Gmail</a></li>
<li><a class ="headerLink images" href="#contact">Images</a></li>
<li>
<div id="googleApps"> <a href="https://www.google.com/drive/">
<div class ="googleDocs"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
</div>
<li> <a class="headerLink alarm" href="https://www.nba.com">☎</a> </li>
<li><img class="headerLink googlePlus" src="http://www.siam.org/publicawareness/images/Google-plus-icon.png">
<li><a class="headerLink profPic" href="https://plus.google.com/+MatthewThrasher/posts">☺</a></li>
</ul>
#googleApps {
height:20px;
width:20px;
position:relative;
float:right;
}
#googleApps:hover .square {
background-color:black;
}
.headerLink {
font-size: 12px;
color:#989898;
text-decoration:none;
font-family:"Arial", arial, sans-serif;
padding-left:30px;
}
.matthew:hover, .gmail:hover, .images:hover {
text-decoration:underline;
}
.square {
background-color:#737373;
float:left;
position: relative;
width: 30%;
padding-bottom: 30.66%;
margin:1.66%;
}
.square:hover {
background-color:black;
}
.driveLink {
width:20px;
height:20px;
background-color:white;
color:white;
/*Important:*/
position:relative;
}
.alarm {
font-size: 25px;
}
.googlePlus {
height: 30px;
width: 30px;
}
.profPic {
font-size: 30px;
}
I'm not sure if you have more CSS in your document but you're missing a bit of CSS to actually make your menu horizontal.
You can make it horizontal by adding to your CSS:
li {
display: inline-block;
}
Extra properties in your CSS was pushing your squares to the side.
Remove float:right and it should align properly.
Pretty much everything else was caused by missing closing tags.
I fixed up the code and made comments where they were missing: http://jsbin.com/letuwahuqe/1/edit?html,css,output
Just some tips as you continue coding - you should really pay attention to your formatting and syntax. Not sure how you're working on your stuff but the code you copy and pasted here has a lot of inconsistent spacing in both HTML and CSS. This makes it really hard to catch mistakes like missing tags and especially difficult for other people looking at your code to understand.
I recommend using something like Sublime Text (it's free!) which will make your life a lot easier!
You can do this by adding the following CSS to your code:
li {
display: inline;
}
I think this will do it!
I also resized your icon:
<img class="headerLink googlePlus" src="http://www.siam.org/publicawareness/images/Google-plus-icon.png" style="height: 20px; width: 20px;">
i am currently having problem aligning facebook share button and tweet button with each other as i am weak in CSS.
here is my code:
<div class="fb-share-button" data-href="http://www.hootpile.com/<?php echo $username; ?>" data-layout="button"></div>
Tweet <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
But they don't seem to align themselves with each other.
Your problems is linked to the structure.
One is a DIV and the other a A link.
You shall place both of then into a li list
See exemple bellow, just adapt the img uri & destination linked
.social-icon-fb {
background: url('../images/social-icon-fb.png') no-repeat;
width: 42px;
height: 42px;
display: block;
}
.social-icon-twitter {
background: url('../images/social-icon-twitter.png') no-repeat;
width: 42px;
height: 42px;
display: block;
}
<ul class="list-inline">
<li>
<a href="https://www.facebook.com/">
<span class="social-icon-fb"></span>
</a>
</li>
<li>
<a href="https://www.twitter.com/">
<span class="social-icon-twitter"></span>
</a>
</li>
</ul>
Adding the following CSS class to your page should work. If you're placing the two buttons side-by side in a containing div.
.fb_iframe_widget {
vertical-align: top;
}
Have you tried applying the style
display: inline-block;
If you apply the css to both class for the buttons then you should be able to get them to align..
please take a look at my jsfiddle for a css solution
https://jsfiddle.net/digitaliss/koo6o16n/
Here is the url for the home page: http://www.auvsishow.org/auvsi2015/public/mainhall.aspx
Here is the current markup for the "Attendee" Button.
Thanks all.
The easiest way for doing this is putting div tag inside a tag.
<a href="Content.aspx?ID=1526">
<div id="home_travel_btn">
</div>
</a>
#home_travel_btn {
width: 437px;
height: 128px;
float: left;
background-image: url(http://www.auvsishow.org/auvsi2015/custom/images/interface/Travel_btn_sprite.png);
}
Check example:
http://jsfiddle.net/DariuszMusielak/4j4wyukz/
This seems simple to me, but after days of trying (I have very limited experience) and searching for a solution, I have drawn a blank.
I am creating a page of links on a single html page with embedded css style for use in a browser window.
I wish to simply align my link to the left of my div, with a text explanation of the link which aligns to the right of the div. There is a wrapper div which contains two of these other div's (right and left), which contain boxes (categories) of links. The first example is merely using periods to create the desired space.
So far I have tried the below HTML:
<html>
<body>
<div class="wrapper">
<div class="div_body_side1">
<div id="div_category01">
<p>
<A HREF="http://www.webaddress" > Short Description
</A>.................... Longer description of where this link will take you
</p>
</div>
</div>
</div>
</body>
</html>
I also thought I may try this method (below) but I don't know how to color the text in the long description and align it to the far right of the category div.
<tr>
<td>
<A HREF="http://www.webaddress" > Short Description</A>
</td>
<td>
Longer description of where this link will take you
</td>
</tr>
Will I have to create two more side-by-side divs inside each category to achieve what I'd like?
I will also need the divs and text to 'shrink' (scale) horizontally for small laptop use and I know that a lot of div's (floating) somehow prevents proper scaling.
I apologise for my lack of expertise, but I really have been looking for a solution for days.
Thank-you in advance for any assistance.
.............
..................................................
Hello again.
Unfortunately, Billy Chan's answer did not work (but thank you for reminding me to use the 'title' attribute). I have tried it with a list of three links and what happens is the output looks like this:
link1link2link3 explanation1explanation2explanation3
Here is what I used:
<div>
<span class="link">
Whatever</span>
<span class="explanation">Whatever explain</span>
<span class="link">
Google search
</span>
<span class="explanation">Secure Google search page
</span>
<span class="link">
<a href="http://www.google.com/ncr" >Google search</A>
</span>
<span class="explanation">US Google search page
</span>
</div>
...with the following CSS:
<style>
.link, .explanation {display:inline}
.link {float: left}
.explanation {float: right}
</style>
I shall now try the other solutions that have been kindly provided.
Thank-you all so much.
.......................................
Thank-you dbaseman, but your solution requires two more divs within my category divs, does it not? I can't apply your "div class="right"" to my Category divs (which are an IDs), can I?
Will now try Urg mu's solution. Cheers.
Oh.. Urg mu - it seems you have provided a solution for colouring the text only. Your solution isn't going to align my 'long explanation' to the right is it?
On to Naveen Sharma. I'm sorry but can you please explain what your solution is actually supposed to do?
Thank you all again. I am learning a lot.
Cheers.
Please see this horrible jsFiddle version of what I am trying to achieve. Yes, it includes lots of testing things and also the 'solutions' provided here.., and you will have to drag your browser window to the far right and the 'result' window to the far left to see my two divs side-by-side:
http://jsfiddle.net/wreckanoid/CdN2z/
Direct answer:
Use two spans to wrap links and explanation. Example
<div id="catgory01">
<span class="link">Whatever</span>
<span class="explanation">Whatever explain</span>
</div>
Then define style of the two spans
<style>
.link, .explanation {display:inline}
.link {float: left}
.explanation {float: right}
</style>
The reason to wrap the link is you may not want all your links behave like this.
This answer should work, but you may find problem is your link anchor or explanation is too long, they may overlap. Just pay attention to that.
A further answer: The correct way to explain a link is to use title attribute
Whatever
This way when you hover the link, you get the hint.
In The HTML that you have given add folowing line of code
<style>
.div_body_side1 p a{width:200px;float:left}
</style>
LIVE DEMO
CSS
div { width:400px; border:red 1px solid; padding:10px 0px; }
p { overflow:auto; margin:0px;
background:url('http://reference.wolfram.com/legacy/MathematicaCharacters/Ellipsis.gif') 100% repeat-x ;
}
a {
float:left; padding:0px 5px 0px 10px;
background-color:#fff;
}
.desc {
float:right; padding:0px 10px 0px 5px;
background-color:#fff;
color:#333;
}
HTML
<div>
<p>
<a href="#link" >IAClient</A>
<span class="desc">QUT Internet Access Client</span>
</p>
<p>
<a href="#link" >AARNet</A>
<span class="desc">AARNet's FTP & HTTP Mirror</span>
</p>
</div>
http://jsfiddle.net/CZt8R/
One simple way is to use float: left and float: right on the link and the description, respectively.
HTML
<a href="http://www.webaddress" > Short Description </a>
<div class="right">.................... Longer description of where this link will take you</div>
CSS
a { float: left; }
.right { float: right; }
Here's a demo.
Edit post update
Two keys to getting this kind of layout:
Use fixed (percentage-based) left-margins for the links, and for the descriptions
Display a long string of ellipses "..............." and use overflow-x: hidden to hide the excess
Another demo.
Here is what I have settled on.
I may add some underscores between the links and the explanations, but I think I now have the basis for a great, embedded CSS link menu page for browser use.
Here is the result:
http://jsfiddle.net/wreckanoid/zV9Sd/embedded/result/
Here is the code:
http://jsfiddle.net/wreckanoid/zV9Sd/
.wrapper
{
position:relative;
background-color: #e7ecfa;
width: 90%;
margin-left:15%;
margin-right:15%;
height:auto;
display: block;
overflow:auto;
border:inset .5em #ccffff;
margin: 1em auto;
box-shadow: 0 0.3em 1em #000000;
}
.div_body_side1
{
float: LEFT;
position:relative;
text-align: left;
/* border: solid 1px #d1d7e5; */
width: 45%;
display: block;
margin-left: 2.5em;
margin-right: 1em;
margin-top: 2em;
margin-bottom: 2em;
padding: .5em;
white-space:normal;
clear:none;
}
.div_body_side2
{
clear:none;
float:left;
position:reative;
text-align: left;
/* border: solid 1px #d1d7e5; */
width: 45%;
display:inline;
margin-right: 1em;
margin-top: 2em;
margin-bottom: 2em;
padding: .5em;
}
#div_category01, #div_category02, #div_category03, #div_category04, #div_category05, #div_category06, #div_category07, #div_category08, #div_category09
{
background-color: #eff5fb;
margin: 1em 1em;
width: auto;
display: block;
border:ridge 6px #ff3333;
box-shadow: 0 0.3em 1em #000000;
position:relative;
clear:both;
}
.center
{
text-align: center;
}
.right
{
float: right;
padding-right: 20px;
color: #cc6600;
}
body
{
margin:0;
padding:0;
}
h1
{
text-align: center;
}
h2
{
text-align: center;
}
img.center
{
display: block;
margin: 0 auto;
}
a
{
color: blue;
padding-left: 20px;
}
Here is the HTML:
</head>
<body>
<div class="wrapper">
<H1> Test Bookmarks Menu</H1>
<a href="http://www.qut.edu.au" >
<IMG SRC="http://www.tils.qut.edu.au/graphics/logo.gif"
BORDER="4" title="QUT logo" alt="QUT logo" class="center" /></a>
<div class="div_body_side1">
<div id="div_category01">
<H2>CATEGORY 1 HEADER</H2>
<br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
<a href="https://www.google.com/ncr" > Google USA
</a>
<span class="right">
Google Secure, USA
</span><br><br>
<a href="https://encrypted.google.com/" > Google Encrypted
</a>
<span class="right">
Google Secure, Encrypted
</span><br><br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
</div><!-- close category01 -->
</div><!-- close div_body_side1 -->
<div class="div_body_side2">
<div id="div_category05">
<H2>Category 5 Header </H2>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
<a href="https://www.google.com/ncr" > Google USA
</a>
<span class="right">
Google Secure, USA
</span><br><br>
<a href="https://encrypted.google.com/" > Google Encrypted
</a>
<span class="right">
Google Secure, Encrypted
</span><br><br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
</div><!-- close category05 -->
</div><!-- close div_body_side2 -->
Thanks to all you people I feel I'm now getting a grip on this CSS stuff.. ! :-)
I will be adding the 'title' tag to all the links, too.
Cheers.