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>
+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>
+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
+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.
+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>
0 Cooper Cecil · September 2, 2014
!doctype html>

<html lang="en">
<head>
    <title>Castle, inc </title>
    
    <style type="text/css">
    #big_link{
        width: 1024px;
        margin: 250px auto;
        display: block
    }
    
    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">Castle</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
  • 2

HTML / CSS / Web Design

107,083 followers
About

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

Links
Moderators