Text not lined up properly?

Question

I have a website that I thought was OK, but apparently some people have issues with the text, and because of that I may have shot myself in the foot when it comes to showing off my portfolio to employers. The major problem is I'm not seeing what other people are seeing. Or, maybe they are seeing what I'm seeing, but it's just not designed well.

First of all, I would like you to check my website: http://mmking9999.com

After browsing around for a bit, please have a look at my code and tell me where I went wrong. If you have any other suggestions, let me know. Here's the code for the main page:















































Welcome to my website!  My name is Mike Murray, a rookie game developer/designer. Here, you'll find stuff about what I do and what I hope to become in the future.  I am an avid gamer, and it was that passion that led me to want to create the video games that people like to play.  Having played video games for over 20 years, I figure I should be able to create something cool with the knowledge I have!

And here is the CSS I'm using:

/*The code for the body sets the default settings for all pages */
body 
{
    background-image:url('http://mmking9999.com/Images/sitewallpaper.png');
}

/* Link colours. I use bright colours to contrast the black window. */
a:link {
COLOR: #86C6FE;
}
a:visited {
COLOR: #FF0000;
}
a:hover {
COLOR: #FFFF00;
}
a:active {
COLOR: #00FF00;
}

/* Main window. Used to display text and images */
img
{
    margin: 2px;
    height: auto;
    width: auto;
    float: left;
}

h1
{
    color:red;
    text-align:center;
    font-family:calibri;
}

p
{
    /* font */
    color:rgb(255,255,255);
    font-family:"Small Fonts", calibri, arial, "Times New Roman";
    font-size:18px;
    text-align:left; width:700px; margin-left:200px;
}

/* Main window. All info is displayed in here */
div.window
{
    background-image:url('http://mmking9999.com/Images/IframeWindow.png');
    background-repeat:no-repeat;
    position:relative;
    width:60%;
    height:70%;
    top:80px;
    left:500px;

    /*text*/
    /*color:rgb(255,255,255);
    font-family:"Small Fonts", calibri, arial, "Times New Roman";
    font-size:18px;*/

}

/* Menu */
div.menu
{
    position:relative;
    width:40%;
    height:10%;
}

/*Site logo */
div.logo
{
    position:relative;
    width:40%;
    height:5%;
    left:500px;
}

/*Images (so they aren't constrained by the attributes defined in div.window)*/
div.image
{
    position:absolute;
    left:20px;
}

/* In case I need another row of images */
div.image2
{
    position:relative;
    left:-150px;
    width:90%;
    height:90%;
}

/*Menu urls*/
div.portfolio_url
{
    position:relative;
    left:-175px;
    top:30px;
}

div.blog_url
{
    position:relative;
    left:-305px;
    top:90px;
}

div.random_url
{
    position:relative;
    left:-445px;
    top:150px;
}

div.email
{
    position:relative;
    top:250px;
    left:-600px;
}

div.linkedin
{
    position:relative;
    top:250px;
    left:-580px;
}

div.twitter
{
    position:relative;
    top:250px;
    left:-560px;
}

/*iframe
{

    position:relative;
    top:80px;
    left:280px;
    width:60%; height:70%;
}*/

Thanks for any advice you can provide.

Elec Boothe · Accepted Answer

http://d.pr/i/OhIF

Try using position:absolute rather than relative on your divs.

Text not lined up properly?

Answers (1)

Related Questions