CodingForums.com
Page 1 of 3 1 23
Show 40 post(s) from this thread on one page

CodingForums.com (http://www.codingforums.com/index.php)
-   HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)
-   -   Need some help formatting Website for all monitor sizes (http://www.codingforums.com/showthread.php?t=283808)

Jake_A_T 12-08-2012 05:33 PM
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>

tempz 12-08-2012 06:38 PM
Is your website live?

sunfighter 12-08-2012 06:39 PM
I have a windows machine and use FF. Things are messed up.

tempz 12-08-2012 06:47 PM
@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.

Jake_A_T 12-08-2012 06:57 PM
@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!

Jake_A_T 12-08-2012 06:58 PM
@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).

tempz 12-09-2012 01:21 AM
I'll start fixing all the problems I can see.

Jake_A_T 12-09-2012 04:06 AM
@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.

tempz 12-09-2012 08:05 PM
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 ;)

Jake_A_T 12-09-2012 08:56 PM
@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! :thumbsup:

tempz 12-09-2012 09:59 PM
I will update your website live from:

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

:)

Jake_A_T 12-09-2012 10:45 PM
@tempz

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

Jake_A_T 12-10-2012 04:28 PM
@tempz

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

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! :)

tempz 12-10-2012 11:09 PM
Quote:
Originally Posted by Jake_A_T (Post 1298761)
@tempz

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

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

Jake_A_T 12-10-2012 11:36 PM
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!! :)


All times are GMT +1. The time now is 06:28 PM.
Page 1 of 3 1 23
Show 40 post(s) from this thread on one page

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.