SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alignment and screen sizes

    Hi, I'm fairly new at web design and am working on a website for my Dad and Brother's business:

    http://www.blackgoldkc.com

    In a regular-sized monitor, the four images in the main content line up exactly how I want them to look. But in a wider-screen monitor, there's a large amount of empty space between the big image and the three smaller ones to the right.

    Is the solution to 'align: center' everything, or is there an easier way? I just want the images to have the same position regardless of the size of one's computer monitor.

    Thanks for any help.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As you have fixed size images you are probably better off putting them in a fixed width container and using margin:auto to keep them centred on the viewport.

    You could scale the images but the results can be varied.

    Here is an example:

    Code:
    <!DOCTYPE html>
    <head>
    <title>BLACK AND GOLD TAVERN</title>
    <link rel="stylesheet" href="index.css">
    <style type="text/css">
    html, body {
    	margin: 0;
    	padding:0
    }
    p {
    	margin: 0;
    	padding: 0;
    	font: 14px Georgia;
    }
    #header {
    	min-height:250px;
    	background:#000000;
    	padding-top: 20px;
    	text-align:center
    }
    h2 {
    	color: white;
    	font-family: Georgia
    }
    #info{padding:1px 0}
    #navbar {
    	background: #FFCC00;
    	padding-top: 15px;
    	text-align: center;
    	padding:10px 0;
    }
    #main-content {
    	background: #FFCC00;
    	min-height: 670px;
    }
    .image-wrap{
    	max-width:1200px;
    	min-width:800px;
    	margin:auto;	
    }
    #left-column {
    	height: 500px;
    	overflow:hidden;
    	margin:0 200px 20px 10px;
    }
    #left-inner {
    	width:100%;
    	float:left;
    }
    #left-inner img {
    	width:100%;
    	height:auto;
    	min-height:500px;
    }
    #right-column {
    	min-height: 550px;
    	width: 200px;
    	padding-right: 10px;
    	float: right;
    }
    #bar {
    	padding-right: 10px;
    	padding-bottom: 35px;
    	float: right;
    }
    #sandwich {
    	padding-right: 10px;
    	padding-bottom: 35px;
    	float: right;
    }
    #tabletop {
    	padding-right: 10px;
    	float: right;
    }
    #welcome {
    	width: 650px;
    	height: 50px;
    	padding-left: 10px;
    	font: 24px Georgia bold;
    	color: black;
    }
    #footer {
    	height: 70px;
    	padding: 0px 15px 0px 100px;
    	clear: both;
    }
    #navbar a {
    	font: 20px Georgia bold;
    	text-decoration: none;
    	color: black;
    }
    #navbar a:hover { color: white; }
    #footer a { text-decoration: none; }
    #footer a:hover { color: white; }
    </style>
    <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
    <div id='wrapper'>
    		<div id='header'>
    				<div id='logo'> <img src = 'http://www.blackgoldkc.com/logo1.jpg' width='230' height='185'></div>
    				<div id='info'>
    						<h2>3740 Broadway Blvd | Kansas City, MO | 816-561-1099</h2>
    				</div>
    		</div>
    		<div id='navbar'> <a href='http://www.blackgoldkc.com'>HOME</a> | <a href='http://www.blackgoldkc.com/about.html'>ABOUT US</a> | <a href='http://www.blackgoldkc.com/specials.html'>MENU</a> | <a href='http://www.blackgoldkc.com/events.html'>UPCOMING EVENTS</a> | <a href='http://www.blackgoldkc.com/hours.html'>HOURS</a> </div>
    		<div id='main-content'>
    				<div class="image-wrap">
    						<div id='right-column'>
    								<div id='bar'><img src='http://www.blackgoldkc.com/bar1.jpg' width='150' height='140'></div>
    								<div id='sandwich'><img src='http://www.blackgoldkc.com/sandwich1.jpg' width='150' height='140'></div>
    								<div id='tabletop'><img src='http://www.blackgoldkc.com/tabletop1.jpg' width='150' height='140'></div>
    						</div>
    						<div id='left-column'>
    								<div id="left-inner"><img src='http://www.blackgoldkc.com/outside1.jpg' width='600' height='500'> </div>
    						</div>
    				</div>
    				<div id='footer'>
    						<p>Welcome to the Black & Gold Tavern! The Black & Gold Tavern opened on New Year's Eve, 2012, at the site of the bar formerly known as The Newsroom. <a href='http://www.blackgoldkc.com/about.html'>READ MORE</a></p>
    						<br/>
    						<p>Copyright 2013 The Black and Gold Tavern | Find us on <a href='http://www.facebook.com/BlackGoldTavern?fref=ts'>FACEBOOK</a> | CONTACT US </p>
    				</div>
    		</div>
    </div>
    </body>
    </html>
    Copy and paste that code and run it in the browser while online and you should see the effect.

    Be careful when using height for text containers as that will stop any content showing outside if the user resizes the text (or if text wraps). Use min-height instead if you want an initial height or just let the content dictate the height.

  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I did that. There is still an amount of space between the big image and the three smaller ones. Do I just create some padding to bring them closer together?

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Maybe this is what you wanted.. please note I rewrote your HTML and CSS

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>BLACK AND GOLD TAVERN</title>
    <link rel="stylesheet" href="index.css">
    <style type="text/css">
    html, body {
    	margin: 0;
    	padding:0
    }
    p {
    	margin: 0;
    	padding: 0;
    	font: 14px Georgia;
    }
    #header {
    	min-height:250px;
    	background:#000000;
    	padding-top: 20px;
    	text-align:center
    }
    h2 {
    	color: white;
    	font-family: Georgia
    }
    #info{padding:1px 0}
    #navbar {
    	background: #FFCC00;
    	padding-top: 15px;
    	text-align: center;
    	padding:10px 0;
    }
    #main-content {
    	background: #FFCC00;
    	min-height: 670px;
    }
    .image-wrap{
        overflow:hidden;
    	width:760px;
    	margin:0  auto;
    }
    .image-wrap img{  vertical-align:top;  width: 100%}
    .image-wrap img+img{margin-top: 40px}
     #right-column{ float:right; width:18%; }
     #right-column img{ max-width:150px; }
     #left-column{ float:left; width: 82%; }
     #left-column img{ max-width:600px}
    
    
    #welcome {
    	width: 650px;
    	height: 50px;
    	padding-left: 10px;
    	font: 24px Georgia bold;
    	color: black;
    }
    #footer {
     	width:760px;
    	margin:0  auto;
    }
    #navbar a {
    	font: 20px Georgia bold;
    	text-decoration: none;
    	color: black;
    }
    #navbar a:hover { color: white; }
    #footer a { text-decoration: none; }
    #footer a:hover { color: white; }
    #footer p {margin-top:.5em}
    </style>
    <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
    <div id='wrapper'>
    		<div id='header'>
    				<div id='logo'> <img src = 'http://www.blackgoldkc.com/logo1.jpg' width='230' height='185'></div>
    				<div id='info'>
    						<h2>3740 Broadway Blvd | Kansas City, MO | 816-561-1099</h2>
    				</div>
    		</div>
    		<nav id='navbar'> <a href='http://www.blackgoldkc.com'>HOME</a> | <a href='http://www.blackgoldkc.com/about.html'>ABOUT US</a> | <a href='http://www.blackgoldkc.com/specials.html'>MENU</a> | <a href='http://www.blackgoldkc.com/events.html'>UPCOMING EVENTS</a> | <a href='http://www.blackgoldkc.com/hours.html'>HOURS</a> </nav>
    		<div id='main-content'>
    				<div class="image-wrap">
    						<div id='left-column'><img src='http://www.blackgoldkc.com/outside1.jpg' width='600' height='500'></div>
    						<div id='right-column'>
    								 <img src='http://www.blackgoldkc.com/bar1.jpg' width='150' height='140'> 
    								 <img src='http://www.blackgoldkc.com/sandwich1.jpg' width='150' height='140'> 
    								 <img src='http://www.blackgoldkc.com/tabletop1.jpg' width='150' height='140'> 
    						</div>
    				</div>
    				<div id='footer'>
    						<p>Welcome to the Black & Gold Tavern! The Black & Gold Tavern opened on New Year's Eve, 2012, at the site of the bar formerly known as The Newsroom. <a href='http://www.blackgoldkc.com/about.html'>READ MORE</a></p>
    						<p>Copyright 2013 The Black and Gold Tavern | Find us on <a href='http://www.facebook.com/BlackGoldTavern?fref=ts'>FACEBOOK</a> | CONTACT US </p>
    				</div>
    		</div>
    </div>
    </body>
    </html>
    reasons for changes in the HTML
    1) BRs are not needed between block elements
    2) you had no start HTML stag :/
    3) switched the order of your pic containers, it seems more logical that the main image ( the large one, I assumed) should be first in the source code
    4) as long as we are using HTML5 , might as well use NAV tags for navigation, especially if we arent putting links in lists
    5) tided up superfluous divs
    Last edited by dresden_phoenix; Jun 12, 2013 at 17:44.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by zircona1 View Post
    Do I just create some padding to bring them closer together?
    Ray's (dresden_phoenix) example above shows you how to bring them closer together in a fixed width scenario. My code example in my first post shows the alternative (responsive) version where the large image stretches to fill the available space as the screen grows and shrinks and looks quite good in my opinion but if you want a fixed width then Rays example is the one to follow.

    Quote Originally Posted by Ray
    3) switched the order of your pic containers, it seems more logical that the main image ( the large one, I assumed) should be first in the source code
    Actually the op's original code was in source order but in my example I changed the source order to allow for the stretchy behaviour of the large image as floats must come first as you know

  6. #6
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tips. I'll play with the design a little more.

  7. #7
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    My code example in my first post shows the alternative (responsive) version where the large image stretches to fill the available space as the screen grows and shrinks and looks quite good in my opinion but if you want a fixed width then Rays example is the one to follow.
    I used the code that you edited, and it looks much better now! I have a few questions, specifically about this part:

    Code:
    .image-wrap{
    	max-width:1200px;
    	min-width:800px;
    	margin:auto;	
    }
    #left-column {
    	height: 500px;
    	overflow:hidden;
    	margin:0 200px 20px 10px;
    }
    #left-inner {
    	width:100%;
    	float:left;
    }
    #left-inner img {
    	width:100%;
    	height:auto;
    	min-height:500px;
    }
    #right-column {
    	min-height: 550px;
    	width: 200px;
    	padding-right: 10px;
    	float: right;
    Does this basically create two containers inside a larger container for the pictures to be displayed?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by zircona1 View Post

    Does this basically create two containers inside a larger container for the pictures to be displayed?
    Hi,

    Yes, basically when you have two columns but you want one column to be fluid you can't just float both columns.

    Therefore you must first float the fixed width column so that it is first in the html. Then the content that follows will wrap alongside the float but to stop the content also wrapping underneath the floated column you need to use a margin to avoid the float. You must remember that margins on static elements will slide under a float because floats are removed from the flow so in order to keep a static element in a square box to the side of say a 200px float you must use a margin equal to or greater than the width of the float which would be 200px.

    This creates a float to the right but then a rectangular block to the left that fills and stretches the available space and will flex with the browsers width.

    The reason that I then added an extra 100% floated inner element was in order to avoid a float drop scenario because if you place an element in the left column and you simply apply clear:both to it it will then clear the floated right column in apparent error. Using a 100% float to contain the content on this "non-floated" side ensures that any clear statements in that section do not affect any other floats outside that context. (It can be done in less code by applying overflow:hidden to the static element (and zoom:1.0 for ie6 and 7) but then means you are restricted to having any visible overflow in the future which may be limiting.)

    The float drop problem is explained in this very old and tired demo.

  9. #9
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.blackgoldkc.com

    Oh for God's sake.

    Last night I changed the picture on the main page, and added another small picture in the right column. This lined up perfectly on my PC at home. Now, when I look at it on a smaller screen, the right column pictures don't line up with the picture in the left column.

    How can I make the pictures in the right column line up with the length of the picture in the left hand column?

    This is frustrating.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You'd need to change the min-height of the image to match the height of the pictures on the right.

    i.e.
    Code:
    #left-inner img {
        height: auto;
        min-height: 707px;
        width: 100%;
    }
    Of course now you are really starting to stretch that image and perhaps you need to think carefully about how you want this to look. It was ok with three images at the side but with 4 images you are stretching things a little. Maybe the left picture should have been a background image instead and you just reveal more or less of it as required and then overlay the real text content on top of the image as normal browser text (Mon- sun and menu text etc). After all "content" is what is important to the web and not pictures of text.

  11. #11
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help! I decided just to scrap the 4th picture.

    Is there a way I can move my footer up a bit? Would I just have to reduce the size of the left column?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to stop and think a bit about what you are doing when you make random changes and how the changes will affect the layout.

    To return to the previous display you would need to change the height and min-height again.

    Code:
    #left-column {
    	overflow:hidden;
    	height:515px;/* match min-height of image */
    	margin:0 200px 20px 10px;
    }
    #left-inner {
    	width:100%;
    	float:left;
    }
    #left-inner img {
    	width:100%;
    	height:auto;
    	min-height:515px;
    }
    However, because you have now added important text to your big image the text content will be cut off because we are hiding the overflow to keep the image level with the images on the right.

    Therefore you will need to keep the image at full height and scale the width only which won't look as good but keeps your content in view.

    Code:
    #left-column {
    	overflow:hidden;
    	height:515px;/* match height of image */
    	margin:0 200px 20px 10px;
    }
    #left-inner {
    	width:100%;
    	float:left;
    }
    #left-inner img {
    	width:100%;
    	height:515px;
    }

    As I mentioned above you really don't want to add important text as an image as that goes against every concept of good and accessible web design. You may as well just draw your whole site in photoshop and upload a picture of the whole site if you follow that line of thinking. It's not what the web is about. You must have accessible content in the form of normal browser text for most of the information you want to convey.

    I would remove all that text from your image and just overlay it in normal browser text so the content is actually in the html and accessible to all. Of course you would have to position it as required so would take a little while to do but you shouldn't really add information to an image unless its the odd word or two for a heading or logo and then you can use an accessible image replacement technique.

    It almost looks like you could instead have an image slider with perhaps captions over the top providing information.

    http://webdesignledger.com/resources...slider-plugins
    http://streetsmash.com/responsive-jq...lider-plugins/

  13. #13
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, sorry for all the questions, I keep getting asked 'can you put this there?'


Bookmarks

Posting Permissions

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