Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 38
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    35
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Need some help formatting Website for all monitor sizes

    Hi there,

    I've been designing a site using HTML/CSS for the past day, and I have the homepage complete. It looks great on my 24" Mac (in Safari, Firefox, and Chrome), and it looks good on my 15" Mac laptop (except when I use Firefox, for some reason the alignment is all off). The real issue is when I view my site on a 13" Maclaptop - the site appears very zoomed in and everything is overlapping and out of alignment. I'll post my CSS and HTML code below in addition to a screenshot of how it should look and how it does look on the 13". Any help trying to resolve the issue would be greatly appreciated!

    Proper View: http://www.flickr.com/photos/8046922...ream/lightbox/

    View on 13": http://www.flickr.com/photos/8046922...ream/lightbox/

    CSS:

    Code:
    html,body
    {
    	width: 100%;
    	height: 100%;
    	margin: 0px;
    	padding: 0px;
    	overflow-x: hidden;
    }
    
    div
    {
    padding: -8px;
    margin: -8px;
    }
    
    body
    { 
    background: url(../images/background.jpg) no-repeat center center fixed; 
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    width: 100%;
    height: 100%;
    }
    
    .logo
    {
    	position: relative;
    	float: left;
    	margin-top: -10px;
    }
    
    .logo1
    {
    	position: relative;
    	float: right;
    	margin-top: -10px;
    }
    
    .logo2
    {
    	position: relative;
    	float: right;
    	margin-top: -10px;
    	margin-right: 35px;
    }
    
    .logo3
    {
    	position: relative;
    	float: right;
    	margin-top: -10px;
    	margin-right: auto;
    }
    
    .logo4
    {
    	position: relative;
    	float: right;
    	margin-top: -10px;
    	margin-right: auto;
    }
    
    .logo5
    {
    	padding-left: 20px;
    	position: relative;
    	float: left;
    	margin-top: 500px;
    	opacity:0.2;
    filter:alpha(opacity=20);
    }
    
    .logo6
    {
    	padding-right: 20px;
    	position: relative;
    	float: right;
    	margin-top: 500px;
    	opacity:0.2;
    filter:alpha(opacity=20);
    }
    
    .imageborder
    {
    	border:6px solid #333333;
    }
    
    #header
    {
    position: relative;
    top: 45px;
    min-width: 100%;
    height: 80px;
    background-color: #CC9900;
    z-index: -2;
    }
    
    #container
    {
    height: 100%;
    margin-left: 350px;
    margin-right: 350px;
    margin-bottom: 4em;
    text-align:center;
    }
    
    #title
    {
    height: 100px;
    margin-left: 150px;
    margin-right: 150px;
    margin-top: -40px;
    z-index: 1;
    
    }
    
    #menu
    {
    width: 100%;
    height: 50px;
    margin-top: -8px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    text-align:center;
    letter-spacing:4px;
    word-spacing:1px;
    font-family: "Arial Black";
    font-size: 125%;
    color: #ffffff;
    z-index: 7;
    }
    
    #mainarea
    {
    margin-top: 0px;
    width: 100%;
    }
    
    #content
    {
    height: 100%;
    margin-left: 10px;
    text-align: middle;
    font-family: "Book Antiqua";
    font-size: 100%;
    color: #000000;
    }
    
    #oneline
    {
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    text-align: center;
    font-family: "Times New Roman";
    letter-spacing:4px;
    font-size: 140%;
    color: #ffffff;
    }
    
    #paperpagetitle
    {
    margin-left: auto;
    margin-right: auto;
    margin-top: -50px;
    height: 200px;
    text-align: middle;
    font-family: "Tahoma";
    letter-spacing:8px;
    font-size: 600%;
    color: #CC9900;
    }
    
    #oneline1
    {
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -80px;
    text-align: center;
    font-family: "Times New Roman";
    font-size: 140%;
    color: #ffffff;
    }
    
    #oneline2
    {
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -40px;
    text-align: center;
    font-family: "Arial";
    letter-spacing:4px;
    font-size: 90%;
    color: #ffffff;
    z-index: 5;
    }
    
    #papercontent
    {
    width: 100%;
    margin: 0 auto;
    margin-top: 80px;
    padding: 0 0 120px 0;
    text-align: middle;
    font-family: "Helvetica";
    font-size: 150%;
    color: #ffffff;
    }
    
    	#content .menu
    	{
    	margin: 10px 0;
    	display: block;
    	text-align: center;
    	}
    	.valid {margin: 10px 0 0;}
    
    #footer 
    {
    position: relative;
    padding-bottom: 1px;
    min-width: 100%;
    height: 80px;
    z-index: 3;
    text-align: middle;
    font-family: "Helvetica";
    font-size: 100%;
    color: #ffffff;
    background-color: #CC9900;
    }
    
    #footercontainer
    {
    position: absolute;
    float: left;
    padding-bottom: 29px;
    margin-left: 510px;
    width: 47%;
    height: 60px;
    z-index: 3;
    text-align: middle;
    font-family: "Helvetica";
    font-size: 100%;
    color: #ffffff;
    }
    
    #footercontent
    {
    	float: left;
    padding-top: 15px;
    margin-left: auto;
    margin-top: 6px;
    height: 85px;
    z-index: 4;
    text-align: middle;
    font-family: "Helvetica";
    font-size: 100%;
    color: #ffffff;
    }
    
    #footercontent1
    {
    	float: right;
    padding-top: 15px;
    margin-right: auto;
    margin-top: 25px;
    height: 85px;
    z-index: 4;
    text-align: middle;
    font-family: "Helvetica";
    font-size: 100%;
    color: #ffffff;
    }
    
    a:link { color:#ffffff; text-decoration:none; }   
    a:visited { color:#ffffff; text-decoration:none; } 
    a:hover { color:#000000; text-decoration:none; }   
    a:active { color:#000000; text-decoration:none; } 
    
    .header1 a:link { color:#ffffff; text-decoration:none; }   
    .header1 a:visited { color:#ffffff; text-decoration:none; } 
    .header1 a:hover { color:#000000; text-decoration:none; }   
    .header1 a:active { color:#000000; text-decoration:none; } 
    
    .header2 a:link { color:#ffffff; text-decoration:none; }   
    .header2 a:visited { color:#ffffff; text-decoration:none; } 
    .header2 a:hover { color:#CC9900; text-decoration:none; }   
    .header2 a:active { color:#CC9900; text-decoration:none; }
    HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <html>
    
    <head>
    <title> Elvis Tribute Artist: Pete Paquette </title>
    <!-- Pete, Paquette, Elvis --><cmt>
    
    <link rel="stylesheet" href="css/main1.css"/>
    <style type="text/css">
    
    </style>
    </head>
    
    <body>
    
    <div id="header">
    
    </div>
    
    <img src="images/petelogo.png" alt="Paquette Productions" width="325" height="325" class="logo5" />
    <img src="images/petelogo.png" alt="Paquette Productions" width="325" height="325" class="logo6" />
    
    <div id="container">
    
    <div id="menu">
    <b><a href="index.html">HOME</a>     |     <a href="page1.html">BIO</a>     |     <a href="page2.html">TOUR DATES</a>     |     <a href="page3.html">VIDEOS</a>     |     <a href="page4.html">SIGN UP</a></b>
    
    </div>
    
    <img src="images/petelogo.png" alt="Paquette Productions" width="70" height="70" style="margin-top: -64px" class="logo" />
    <a href="http://www.facebook.com/pages/The-Official-Pete-Paquette-Fan-Club/263124813762333" target="_blank"><img src="images/facebook.png" alt="Facebook" width="30" height="30" style="margin-top: -40px" class="logo2"/></a>
    <a href="http://www.youtube.com/user/PaquetteProductions1" target="_blank"><img src="images/youtube.png" alt="YouTube" width="30" height="30" style="margin-top: -40px" class="logo1"/></a>
    
    <div id="mainarea">
    
    	<div id="content">
    
    <br>
    <br>
    <br>
    
    <div id="oneline">
    ELVIS TRIBUTE ARTIST
    </div>
    
    <br>
    
    <div id="paperpagetitle">
    PETE PAQUETTE
    </div>
    
    <div id="oneline1">
    One of Canada's top Elvis Tribute Artists and recipient of numerous awards
    </div>
    
    <br>
    
    <center><iframe width="900" height="500" src="http://www.youtube.com/embed/XWqBRTKNhGM" frameborder="0" allowfullscreen></iframe></center>
    
    <img src="images/awards.png" alt="Awards" style="margin-top: -5px" />
    
    <div id="oneline2">
    <i><b>"Like"</b> my Facebook Fan Club page by <span class="header2"><a href="http://www.facebook.com/pages/The-Official-Pete-Paquette-Fan-Club/263124813762333" target="_blank">clicking here!</a></i></span>
    </div>
    
    </div>
    </div>
    
    </div>
    
    <div id="footer">
    
    <div id="footercontainer">
    <div id="footercontent">
    
    <p align="justify">Copyright 2013</p>
    
    </div>
    
    <div id="footercontent1">
    
    <a href="http://www.facebook.com/pages/The-Official-Pete-Paquette-Fan-Club/263124813762333" target="_blank"><img src="images/facebook.png" alt="Facebook" width="30" height="30" class="logo3"/></a>
    <a href="http://www.youtube.com/user/PaquetteProductions1" target="_blank"><img src="images/youtube.png" alt="YouTube" width="30" height="30" class="logo4"/></a>
    
    </div>
    </div>
    </div>
    </div>
    
    </body>
    </html>
    Last edited by Jake_A_T; 12-09-2012 at 04:33 AM.

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Is your website live?

  • Users who have thanked tempz for this post:

    Jake_A_T (12-11-2012)

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,347
    Thanks
    23
    Thanked 618 Times in 617 Posts
    I have a windows machine and use FF. Things are messed up.

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    @Jake

    Hi, can you zip up your image folder and upload it to http://ge.tt/

    1. Res: 1360x768 - Chrome website doesn't look great.


    I will continue to update.

  • Users who have thanked tempz for this post:

    Jake_A_T (12-11-2012)

  • #5
    New Coder
    Join Date
    Oct 2012
    Posts
    35
    Thanks
    16
    Thanked 0 Times in 0 Posts
    @tempz

    Hey,

    My site isn't live yet (just got started on it yesterday and was trying to get the homepage done), but i've uploaded a zip file of my site (index.html, css and images) here if you want to take a look: http://ge.tt/3844sAT/v/0?c

    Thanks!

  • #6
    New Coder
    Join Date
    Oct 2012
    Posts
    35
    Thanks
    16
    Thanked 0 Times in 0 Posts
    @tempz

    just wanted to add that all of the extra images in the folder are from another project I had completed (just forgot to delete the unnecessary images).

  • #7
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    I'll start fixing all the problems I can see.

  • Users who have thanked tempz for this post:

    Jake_A_T (12-11-2012)

  • #8
    New Coder
    Join Date
    Oct 2012
    Posts
    35
    Thanks
    16
    Thanked 0 Times in 0 Posts
    @tempz

    Thank you very much!! If you have any other questions or need anything else you can just leave a reply - i'll check here often.

  • #9
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Okay, I have been playing with your code. You have lots of issues with your code; the way it's layed out.

    I have changed most of it; made it easier to understand and other users to help you write code.

    I have changed a lot of your css and added my own.

    preview: http://i.imgur.com/5SAWC.jpg

    I will continue to update and change things as I go

  • Users who have thanked tempz for this post:

    Jake_A_T (12-11-2012)

  • #10
    New Coder
    Join Date
    Oct 2012
    Posts
    35
    Thanks
    16
    Thanked 0 Times in 0 Posts
    @tempz

    Wow...thanks for the update!! It looks awesome, and thank you so much for taking the time to look and work on it - I really appreciate it a lot!

  • #11
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    I will update your website live from:

    http://dev.tempz.webatu.com/petewebsite/


  • Users who have thanked tempz for this post:

    Jake_A_T (12-11-2012)

  • #12
    New Coder
    Join Date
    Oct 2012
    Posts
    35
    Thanks
    16
    Thanked 0 Times in 0 Posts
    @tempz

    That's great, thanks! - i'll definitely look forward to checking out its progress

  • #13
    New Coder
    Join Date
    Oct 2012
    Posts
    35
    Thanks
    16
    Thanked 0 Times in 0 Posts
    @tempz

    Hey, I just wanted to add that everything is looking great so far - better than I could have expected!

    For the longest time (before posting this on this site) I was trying to add a Facebook "like" button in the black box listing the 3 awards (sort of near the bottom of the box and centred), but all that was appearing was a big white box (no matter what method I tried). Basically I was trying to get this: http://developers.facebook.com/docs/.../plugins/like/ , but couldn't, so I settled on that line of text that links to the page to like. If it doesn't take long and you know how to add this it would be amazing, but if not no worries at all because you've already done more than I could have imagined!

  • #14
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Quote Originally Posted by Jake_A_T View Post
    @tempz

    Hey, I just wanted to add that everything is looking great so far - better than I could have expected!

    For the longest time (before posting this on this site) I was trying to add a Facebook "like" button in the black box listing the 3 awards (sort of near the bottom of the box and centred), but all that was appearing was a big white box (no matter what method I tried). Basically I was trying to get this: http://developers.facebook.com/docs/.../plugins/like/ , but couldn't, so I settled on that line of text that links to the page to like. If it doesn't take long and you know how to add this it would be amazing, but if not no worries at all because you've already done more than I could have imagined!
    You don't need @name any more - I was talking to at first not sunny didn't want you to get confused

    If you would like to show me where you want to put the like button via the live website (printscreen).

    I still have some things to fix
    1. Layout issues
    2. Code issues
    3. colour scheme

  • Users who have thanked tempz for this post:

    Jake_A_T (12-11-2012)

  • #15
    New Coder
    Join Date
    Oct 2012
    Posts
    35
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Ah haha, makes sense to start off like that to reduce confusion!

    Here's a screenshot of where I was thinking to place the "Like" button (so basically on top of the black box but a bit up from the bottom edge of the box): http://www.flickr.com/photos/8046922...ream/lightbox/

    No problem at all, I definitely appreciate the time spent on it more than anything!!


  •  
    Page 1 of 3 123 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •