7 Replies - 651 Views - Last Post: 14 May 2013 - 08:39 PM

#1 jeonsah  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 99
  • Joined: 30-August 09

Website alignment help

Posted 14 May 2013 - 04:09 PM

Hello everyone,

I have recently picked up html & css to start designing my own website. I have a lot of experience with other types of languages so this is not too hard for me to pick up. Currently I have created a site, with a custom navigation bar and logos. The website is primarily composed of images with very little actual text. The problem I am running into is when the browser (google chrome) is not maximized, the entire website is scrambled pretty bad... I would like it so when the browser is smaller than max size, nothing scrambles, the site centers itself, and there is a horizontal bar to scroll. A good example of what I am going for:

http://www.anthonybr...dercoating.com/

Here is my code(please bare with me, as I am new to html & css):
<!DOCTYPE html>
<html>
  <head>
    <title> HomePage</title>
  </head>
  <body style="width:100%;" bgcolor="#0" text="#ffffff">
    <center>
           <img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/JoshsWheelsWebsitePicture_zpsc01b2349.jpg" />
           <img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/Website%20Work/Dun-RiteLogoFinalv1_zpsa5ab27e0.jpg" />
           <img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/JoshsWheelsWebsitePicture_zpsc01b2349.jpg" />
    </center>
    <p><i><marquee bgcolor=Grey>If you're going to get it done, get it Dun-Rite.                                                                                                                      
					Custom Automotive Polishing & Powder Coating.
                                                                                                                      Email or Call us at: DunRiteEnterpriseLLC@gmail.com or 719-235-0092 for a quote.</marquee> </p>
    <hr>
       <center>
            <img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/Website%20Work/corolla_zps24631298.jpg"/>
            <a href="Dun-Rite Website.html"><img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/Website%20Work/Home-polished_zpsfeb7db9d.jpg" /></a>
            <a href="About Us.html"><img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/Website%20Work/AboutUs-polished_zps7c27bba7.jpg" /?</a>
            <a href="Gallery.html"><img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/Website%20Work/Gallery-polished_zps2b63d779.jpg" /></a>
            <a href="Sale.html"><img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/Website%20Work/ForSale-polished_zps8d549038.jpg" /></a>            
	    <a href="Contact Us.html"><img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/Website%20Work/ContactInfo-polished_zps88807637.jpg" /></a>
            <img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/Website%20Work/corolla2_zps2269aeb4.jpg"/>
       </center>
    <hr>   
    <left>
           <img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/Website%20Work/Menu_zps3d2f8b81.jpg"/> 
    </left>
    <br>
    <right>
      <font color="#f8f007">          Hours of Operation:</font>
      <br>
      <font color="#f8f007">             Monday - Friday</font>
      <br>
    <font color="#f8f007">                 9AM - 5PM</font>
    </right>
  </body>
</html>



I have tried fixing this issue by changing the width of the body and it works but then the website is extremely wide and you must use a horizontal scroll bar even if the browser is maximized. Anyways, hopefully someone can help me find a solution to this problem that will work on my computer and other people's computers.

Thank you very much!!!!

Is This A Good Question/Topic? 0
  • +

Replies To: Website alignment help

#2 Toadill  Icon User is offline

  • D.I.C Regular

Reputation: 45
  • View blog
  • Posts: 411
  • Joined: 08-January 12

Re: Website alignment help

Posted 14 May 2013 - 04:38 PM

I may be wrong but I think the body has to be width 100% height 100% in order for it to work.
Was This Post Helpful? 0
  • +
  • -

#3 Toadill  Icon User is offline

  • D.I.C Regular

Reputation: 45
  • View blog
  • Posts: 411
  • Joined: 08-January 12

Re: Website alignment help

Posted 14 May 2013 - 04:43 PM

Something like

 <style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}



This is using CSS style.
If you are not using CSS try doing this.

<body style="width:100%; height:100%;" bgcolor="#0" text="#ffffff">


This post has been edited by Toadill: 14 May 2013 - 04:48 PM

Was This Post Helpful? 0
  • +
  • -

#4 Toadill  Icon User is offline

  • D.I.C Regular

Reputation: 45
  • View blog
  • Posts: 411
  • Joined: 08-January 12

Re: Website alignment help

Posted 14 May 2013 - 04:58 PM

Here is the current best solution I have, I have found. The idea is to give a height to the image container so that the max-height works.

<!DOCTYPE html>
<html>
<head>
<style>
* {
  padding: 0;
  margin: 0;
}
.fit {
  max-width: 100%;
  max-height: 100%;
}
.center {
  display: block;
  margin: auto;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="Javascript">
function set_body_height()
{
    var wh = $(window).height();
    $('body').attr('style', 'height:' + wh + 'px;');
}
$(document).ready(function() {
    set_body_height();
    $(window).bind('resize', function() { set_body_height(); });
});
</script>
</head>
<body>
<img id="the_pic" class="center fit" src="pic.jpg" >    
</body>
</html>




http://www.cssplay.c...background.html
Here is a example page of how to do this

Right click the page and view source.

This post has been edited by Toadill: 14 May 2013 - 04:59 PM

Was This Post Helpful? 0
  • +
  • -

#5 Toadill  Icon User is offline

  • D.I.C Regular

Reputation: 45
  • View blog
  • Posts: 411
  • Joined: 08-January 12

Re: Website alignment help

Posted 14 May 2013 - 05:10 PM

Here I just tested this it seems to be working correctly let me know.

<!DOCTYPE html>

<html>

<head>

<style>
* 
{
  padding: 0;
  margin: 0;
}
.fit 
{
  max-width: 100%;
  max-height: 100%;
}
.center 
{
  display: block;
  margin: auto;
}

</style>

<script src="http://code.jquery.com/jquery-latest.js">
</script>

<script type="text/javascript" language="Javascript">

function set_body_height()
{  
var wh = $(window).height();
    
$('body').attr('style', 'height:' + wh + 'px;');

}


$(document).ready(function() 
set_body_height();
$(window).bind('resize', function() 
{ 
set_body_height(); 
}
);
}
);

</script>

</head>

<body>

<img id="the_pic" class="center fit" src="DragonTattoo.jpg" >    

</body>

</html>




This post has been edited by Toadill: 14 May 2013 - 05:26 PM

Was This Post Helpful? 0
  • +
  • -

#6 Toadill  Icon User is offline

  • D.I.C Regular

Reputation: 45
  • View blog
  • Posts: 411
  • Joined: 08-January 12

Re: Website alignment help

Posted 14 May 2013 - 05:19 PM

Here is another example that should let you put images side by side and resizes like you wanted

<!DOCTYPE html>
<html lang="en">
<head>
<title>Adjust Photo on Browser Window</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery-photo-resize.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("img").photoResize({
bottomSpacing: 15
});
});
</script>
<style type="text/css" media="screen">
body { text-align: center; }
</style>
</head>
<body>
<img src="http://farm4.staticflickr.com/3480/3782576547_efbeb4fc3a_z.jpg?zz=1" alt="">
</body>
</html>



Here is a link for you
http://css-tricks.co...ckground-image/

This post has been edited by Toadill: 14 May 2013 - 05:29 PM

Was This Post Helpful? 0
  • +
  • -

#7 jeonsah  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 99
  • Joined: 30-August 09

Re: Website alignment help

Posted 14 May 2013 - 07:33 PM

Ive tried the solution you said and I cannot get it to work. Since then I have changed a few things. I have made css file with all of the styling. All of the main code is in a .html file. I have made one giant logo picture at the top. Then I have made a custom navigation bar right below it. When I compress the browser window, the logo stays the same but the horizontal navigation bar breaks into a vertical list....

When I resize the browser window, you can see the margins around the logo adjusting to keep the logo centered. However, the navigation bar does not center itself....

Here is my code in in the css file:
body {width:100%;height:100%;background-color:#000000; color:white;text-align:center;}
h1 {width:100%;background-color:#000000;color:#FFFFFF;text-align:center;}
p {background-color:#00000; color:white;text-align:center;}
div {background-color:#000000;}
a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
ul{list-style-type:none;margin-left:10em;padding:0;}
li{float:left;}



Here is my code in the .html file:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Dun-RiteStyle.css">
</head>
<body>
  <div class="center">
  <h1><img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/Website%20Work/HomePageHeader_zpse88cfc7e.jpg" /></h1>
  <ul>
    <li><img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/Website%20Work/corolla_zps373511ef.jpg"/></li>
    <li><a href="Dun-Rite Website.html"><img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/Website%20Work/Home-polished3_zps67320a25.jpg" /></a></li>
    <li><a href="About Us.html"><img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/Website%20Work/AboutUs-polished2_zps59162303.jpg" /?</a></li>
    <li><a href="Gallery.html"><img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/Website%20Work/Gallery-polished2_zps07ce1153.jpg" /></a></li>
    <li><a href="Sale.html"><img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/Website%20Work/ForSale-polished2_zps4c458771.jpg" /></a></li>
    <li><a href="Contact Us.html"><img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/Website%20Work/ContactInfo-polished2_zps1f49c2ef.jpg" /></a></li>
    <li><img src="http://i1319.photobucket.com/albums/t674/DRELLC/Previous%20Work/Website%20Work/corolla2_zps12762150.jpg"/></li> 
  </ul>
  </div>
</body>
</html>



Basically, Ive made the navigation bar the same width as the logo. I want the navigation to auto adjust with the logo when the browser is resized. Then when theres no margin left, the horizontal scroll bar activates.

This post has been edited by jeonsah: 14 May 2013 - 07:50 PM

Was This Post Helpful? 0
  • +
  • -

#8 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1381
  • View blog
  • Posts: 3,510
  • Joined: 28-November 09

Re: Website alignment help

Posted 14 May 2013 - 08:39 PM

http://www.blog.bawe...html-the-basics

Start here, read through the Web Design sections as well on that, just keep hitting next.

That covers everything you should need to know to get this done.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1