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
0 Cooper Cecil · September 5, 2014
Very nice and thank you. The only change I had to make was margin-top = 25% not 10%.

That got it.Cool!
+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.
0 Cooper Cecil · September 5, 2014
As you can see, It is centered down, but not to the right. 

Another question....My link is now directing to a second page, "Who we are". I have put two pictures in the file. The first picture is fine. The second picture is turned over to the left, sideways. But, the picture in the original file is right side up. Somehow, between my computer file folder and the code, it flipped over. Any ideas?

Thanks.
0 Cooper Cecil · September 5, 2014
/images/forum/upload/2014-09-05/30ba205dcf274d7f1270fea9f92b783a.png
+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.
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>
+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 Aubree Keegan · September 2, 2014
Can you post all of your code Cooper? It seems to be working for me.
+1 Cooper Cecil · September 2, 2014
nope, that moved it back up to the top. lol
+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
  • 2

HTML / CSS / Web Design

106,936 followers
About

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

Links
Moderators