0

I am working on a website for my personal use and have developed a splash page. I have a couple of images with some lines to split the page up up a little bit. Here is the splash page.

The main issue I have is that I have used absolute position within my CSS for the position of each element. Obviously depending on the screen that the viewer will be using, it will be positioned left/right, not in the middle. I thought of using a center starting point and using relative positioning. Would that be the correct way to go down?

Is there a specific way in which I can achieve the elements to be centered and in that "formation" no matter on the screen resolution?

HTML

<DOCTYPE html>
<html>
    <head>
        <title>Daniel Hopkins Personal Website</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    <body>
        <div class="hr_top">&nbsp;</div>
        <div class="hr">&nbsp;</div>
        <div class="hr_bot">&nbsp;</div>
        <center>
            <div class="logo">
                <img src="logo.png"/>
            </div>
            <div class="logoname">
                <img src="logoname2.png"/>
            </div>
            <div class="enter"><b><a href"home.html">Enter</a></b>
            </div>
    </body>
</html>

CSS

body {}
.hr {
    width:2px;
    height:350px;
    background-color:#000000;
    position:absolute;
    top:140px;
    left:884px;
    z- index:10;
    background: -webkit-linear-gradient(white, black, white);
}
.logo {
    position:absolute;
    top:200px;
    left:640px;
    z-index:10;
}
.logoname {
    position:absolute;
    top:260px;
    left:900px;
    z-index:10;
}
.hr_top {
    width:600px;
    height:2px;
    position:absolute;
    top:180px;
    left:640px;
    z-index:10;
    background: -webkit-linear-gradient(left, white, black, white);
}
.hr_bot {
    width:600px;
    height:2px;
    background-color:#000000;
    position:absolute;
    top:442px;
    left:640px;
    z-index:10;
    background: -webkit-linear-gradient(left, white, black, white);
}
.enter {
    position:absolute;
    top:400px;
    left:910px;
    z-index:10;
    font-size:22px;
    font-variant:small-caps;
    font-style:bold;
    font-family:Helvetica;
    color:black;
}
a:link {
    text-decoration:none;
    color:#000000;
}
/* unvisited link */
 a:visited {
    text-decoration:none;
    color:#000000;
}
/* visited link */
 a:hover {
    text-decoration:underline;
    color:#000000;
}
/* mouse over link */
 a:active {
    text-decoration:underline;
    color:#000000;
}
/* selected link */
Jeff Noel
  • 7,500
  • 4
  • 40
  • 66
Dan Hopkins
  • 23
  • 1
  • 1
  • 3
  • »is there a way in which I can achive the elements to be centered« There are a few, please use search engine first; after that try the SO search. Right now there is a link in the sidebar to [How to center a div in a div - horizontally?](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally) which has 700 upvotes - so there might be some useful answer already waiting for you. I guess, the question already showed up as you typed your question (You know, the area above the editor, where similar questions are suggested). – feeela Jul 19 '13 at 12:41
  • possible duplicate of [How to center a div in a div - horizontally?](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally) – feeela Jul 19 '13 at 12:42
  • That wasn't the question I asked. I need all the elements to work around each other. I know I could simply use
    or use margins. What I don't know is how to, once centered, get the same layout of the elements displayed, since. Hence why i've used absolute positioning
     – Dan Hopkins Jul 19 '13 at 12:46
  • Well, just use a wrapper element a set it's display property to `relative`. That way all the absolute positioned children will count from that centered parent element. – feeela Jul 19 '13 at 12:51
  • Why _are_ you positioning everything absolutely? It sounds like you're starting out and learning the basics so it concerns me that you've chosen such a route. – Kyuuji Jul 19 '13 at 13:19
  • You can format your code quite easily by pasting it in JSFiddle and pressing the *Tidy Up* button. This prevents tidying your development code. By the way, Your code should not get tidied up once in production! It'd take more bytes for no reason. – Jeff Noel Jul 19 '13 at 15:10

1 Answers1

1

Put all of the elements you want to be centered in a container div and position the container div. Then you can position the other elements inside it like you need to

#container{
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}

Edit reiterating our conversation in the comments

Here is a jsFiddle to show my method. In your situation it would resemble something like this, but you'll have to do the exact values yourself.

Using this method, the container is absolutely positioned in the center and the other elements can be positioned absolutely in reference to the container using pixels or percents (depending on preference/if the container's height is variable percents would be better).

If you want it to be centered vertically as well you can format it like so:

#container {
  position: fixed;
  height:200px; //whatever you desire it to be
  width:200px; //whatever you desire it to be
  top: 50%;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  margin-top:-100px;// Half the height of container
}
Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
  • But say someone was dual screen a TV and a laptop screen, the absolute position of the container will move depending on the screen that is used, for example, if it was viewed on a tablet, or a mobile. – Dan Hopkins Jul 19 '13 at 12:44
  • This takes into account the window size no matter what it is and evenly spaces it out between left and right – Zach Saucier Jul 19 '13 at 12:45
  • @Dan Hopkins [Please read about the very basics of CSS.](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started) The positioning offset hasn't to do with the screen size but with the actual window size. – feeela Jul 19 '13 at 12:46
  • @DanHopkins Here is an example of my method in practice: http://jsfiddle.net/Ut5T6/ . It stays centered no matter what – Zach Saucier Jul 19 '13 at 12:48
  • Having images dead in the center is great. If you look at my webpage it displays multiple elements (text, lines and images). What I don't understand is, once having something centered. How can I get them into the position they are currently in. If I centered them all, they'd just go below each other surely? – Dan Hopkins Jul 19 '13 at 12:52
  • I approximated a result [here](http://jsfiddle.net/Ut5T6/1/) for you. You can do the exact things yourself – Zach Saucier Jul 19 '13 at 12:57
  • @Zeaklous So in theory. Its centering it and then absolute position using left %ages etc? Rather then pixels position from 0,0? Thats a great help. I was trying to figure out the concept so I can develop it in the rest of my site. And thats the answer I was looking for. – Dan Hopkins Jul 19 '13 at 13:01
  • Glad to hear it. You can accept the answer and upvote it if you think the problem is solved. Let me know if you need anything else – Zach Saucier Jul 19 '13 at 13:02
  • I've accepted (can't upvote till i have 15 rep, ha) so one final thing, to do it the way I was after, is to center the each element and position via top, left %ages? Correct? – Dan Hopkins Jul 19 '13 at 13:06
  • You can position each element within the container using either pixels (they will be in reference to the parent container div) or percents (also in reference to the parent div). I just like percents better, but since the height/width of the parent div is fixed you can use either – Zach Saucier Jul 19 '13 at 13:17