Links, positioning and sizing

+3 Cooper Cecil · August 30, 2014

Maybe this is yet to come in my training, but I would like to position my links where I want them on my page. Say my opening page is all image and I want a Big giant link in the middle of the page, say 2x6 inches that goes to page two of my web site. How can I position and size my link? If there is a tutorial for this...thanks

Post a Reply

Replies

- page 1
Oldest  Newest  Rating
+4 Predrag Kostic · August 30, 2014
You can use:
text-align:center;

to align the link.

Example:
<!doctype html>
<html>

<head>
<title>Title</title>
<style type="text/css">
a {
text-align: center;
}
</style>
</head>

<body>
<a href="index.html">Hello</a>
</body>

</html>


It can be a div, header, paragraph etc. that you align.


Use:
font-size: 50px;

to modify the size of the text.

Example:
<!doctype html>
<html>

<head>
<title>Title</title>
<style type="text/css">
a {
text-align: center;
font-size: 100px;
}
</style>
</head>

<body>
<a href="index.html">Hello</a>
</body>

</html>
+2 Cooper Cecil · September 2, 2014
Wow, thanks! It worked great. The only thing is that it is still on the left side, but BIG and centered on the left. I need to move it right 50% of the page to be "centered" in the page.

Thanks for your help. I just found the tutorials for div and positioning. I'm getting a little ahead of myself.

C
+2 JOhaL jaTT · September 2, 2014
try this mate.....


<!doctype html>

<html lang="en">

<head>

<title>Castle, inc </title>

<style type="text/css">

body{background:url("yourimage.jpg");

}

#link{



text-align:center;



}



#link > a{

         position:relative;

         top:-20px;

font-size: 100px;

    text-decoration:none;



}

</style>

</head>

<body>

    <div id="link">

        <a href="http://google.com">Our team</a>

    </div>

</body>

</html>
+1 Predrag Kostic · September 4, 2014
<!doctype html>

<html lang="en">

<head>
    <title>Castle, inc</title>

    <style type="text/css">
        a {
            display: block;
            text-align: center;
            font-size: 100px;
        }
    </style>
</head>

<body background="Castle logo reduced jpeg.jpg">
    <a href="http://google.com">Castle</a>
</body>

</html>

This should work.
+1 Predrag Kostic · September 5, 2014
The following code should center your link on the page:

<!doctype html>

<html lang="en">

<head>
    <title>Castle, inc</title>

    <style type="text/css">
        a {
            display: block;
            text-align: center;
            font-size: 100px;
            margin-top: 10%;
        }
    </style>
</head>

<body background="Castle logo reduced jpeg.jpg">
    <a href="http://google.com">Castle</a>
</body>

</html>


As for the second image, try opening it in an image editing software to make sure your image viewer is not rotating it against your will or something. Also try providing your code every time you have a problem without it we can't know for sure how to help you.
+1 Cooper Cecil · September 1, 2014
Thank you kind sir. I'll be giving it a try!
+1 Cooper Cecil · September 2, 2014
I got a no go. Link still small in upper left corner.




<!doctype html>

<html lang="en">
<head>
    <title>Castle, inc </title>
    
    <style type="text/css">
    a {text-align: center;
    fontsize: 100px;
    }
        
        
        
    </style>
</head>
<body background="Castle logo reduced jpeg.jpg">
    <a href="http://google.com">Our team</a>
    
</body>
</html>
+1 Aubree Keegan · September 2, 2014
<!doctype html>
<html lang="en">
<head>
<title>Castle, inc </title>
<style type="text/css">
#big_link{
    width: 1024px;
    margin: 250px auto;
}
a{
    text-align: center;
    font-size: 100px;
}
</style>
</head>
<body background="Castle logo reduced jpeg.jpg">
    <div id="big_link">
        <a href="http://google.com">Our team</a>
    </div>
</body>
</html>
+1 Cooper Cecil · September 2, 2014
nope, that moved it back up to the top. lol
+1 Aubree Keegan · September 2, 2014
Can you post all of your code Cooper? It seems to be working for me.
  • 1
  • 2

HTML / CSS / Web Design

107,044 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators