Solved

Styling of Masthead

Posted on 2014-04-03
10
259 Views
Last Modified: 2014-04-03
There are two images, side by side, in the "masthead" portion of www.mauivacationrental.com/location.htm   When the window is progressively narrowed, the images shift from side-by-side to vertically-stacked, and then the images become reduced in size.  I would like the images to remain side-by-side unless the window is much smaller.  If you examine the behavior of the menu buttons, or the row of logos toward the footer, they also shift from side-by-side to vertical, but they remain horizontal until the window is quite narrow.  By contrast, the images in the masthead collapse to a vertical orientation at the slightest narrowing of the window.  Thank you for your assistance.


p7affinity-1-01.cssglobal-css.css
0
Comment
Question by:ddantes
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
10 Comments
 
LVL 3

Assisted Solution

by:Conner Turner
Conner Turner earned 200 total points
ID: 39975695
Hello ddantes,

It sounds like you want to include responsive images?

Try and include a max-width property on the image this can be achieved in css:

.img-responsive {
     max-width: 100%;
}

Open in new window


Now we need support for IE as it does not understand the max-width attribute this would be achieved by using an HTML if within the <head> of you code:

<!--[if IE]>
	<style>.ie-support {width:100%;}</style>
<![endif]-->

Open in new window


Now this may all be well however adaptive images do not play nicely with just a single attribute , you will have to limit the container that the image is wrapped into with the same property so make sure to include the same code as a wrapper

Lastly you may want to keep the images inline whilst the browser is being positioned or within a narrow content window you can add a row wrapper:
.row {
  margin-left: -15px;
  margin-right: -15px;
}

Open in new window


Here is all the code put together:

CSS:
.img-responsive {
     max-width: 100%;
}
.img-wrapper {
    max-width: 100%;
    width: 100%;
}
.row {
  margin-left: -15px;
  margin-right: -15px;
}

Open in new window


HTML:
<div class="row">
    <div class="img-wrapper">
        <img src="myimage.jpg" class="img-responsive" alt="My Image">
    </div>
</div>

Open in new window


I hope that i have understood your question, if you need anymore help or this solution does not work for you then please just ask!

HTH,
Conner
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39975734
In general, you want to have a container div and then a left and right.  The simple way for this is something like this
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .left{width:65%;float:left;}
    .left img{width:100%;}
    .right{width:35%;float:left;}
    .right img{width:100%;}
    </style>
</head>
<body>
<div class="container">
 <div class="left"> 
<img src="http://www.mauivacationrental.com/images/logo1.png">
  </div>
  <div class="right">
<img src="http://www.mauivacationrental.com/images/location-title.png">
  </div>
  
</body>
</html>

Open in new window


Even better, use media queries and I can see you have started that
/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/
@media only screen and (min-width: 0px) and (max-width: 700px) {
body {

Open in new window


For each screen width, set the image to a different size  and possibly use different images at 100%.  This will give you the best readability because scaling type in images does not always come out great.

Looking at what you have in your header, there is no reason for any of the text to be an image.  You would be much better off if that was clear text.  You can  use a font from https://www.google.com/fonts or https://typekit.com/ or a handful of others.  By using clear text, it will be searchable by google/bing and you can make it much easier to read.  

I may have mentioned this before, but if you are trying to make a site responsive, it starts out easy but as you can see gets a bit complex.  I like to use bootstrap http://getbootstrap.com/ or foundation http://foundation.zurb.com/ as my core responsive grid.

There are a lot of choices on how you can do this and get the same visual effect.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39975747
>Now we need support for IE as it does not understand the max-width

what?  Please see http://caniuse.com/minmaxwh 

Also, conditional statements are not supported as of ie10 http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

The website is obviously originally done a long time ago and is being upgraded...let's help him move forward and not back....
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:ddantes
ID: 39975861
Thanks to both experts.  The second expert's solution maintains both images inline, no matter how narrow the window becomes, but that wasn't my intention.  I think I didn't articulate the question clearly.    

In order for the size of the images to be adequate on a small screen, they need to shift to a vertical configuration.  But I didn't want that shift to happen until the window was quite narrow.  For example, the row of images near the footer maintains a horizontal layout until the window is quite narrow, and then the layout shifts to a couple of rows, and finally to completely vertical orientation.

In the masthead, I would like to maintain a horizontal layout of the two images until a narrower window size is reached, then shift to vertical.  The first solution does accomplish that, but the window width threshold for shifting to vertical is only slightly narrower than the status quo.  If the shift to vertical layout could happen at an even narrower window width, that would fulfill this question.

I agree it's generally unnecessary to use an image for text.  I'm just a little compulsive about wanting to preserve the appearance of Lucida Calligraphy Bold font across browsers, and that doesn't happen very well without "solidifying" the appearance in an image.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39975889
Media queries are what you want.

@media only screen and (min-width: 0px) and (max-width: 700px) {
   .className img {width:00px;}
   .className2 img {width:00px;}
}


@media only screen and (min-width: 701px) and (max-width: 900px) {
   .className img {width:00px;}
   .className2 img {width:00px;}
}

@media only screen and (min-width: 901px) {
   .className img {width:00px;}
   .className2 img {width:00px;}
}

Open in new window


The older iphone is 340px wide and about the narrowest you need to worry about.  The sample above is to resize. But you can also use background images as well and swap out for images that are 100% size.
0
 
LVL 3

Expert Comment

by:Conner Turner
ID: 39975968
>>Now we need support for IE as it does not understand the max-width
>
>what?  Please see http://caniuse.com/minmaxwh 

Sorry, i must make it clear which versions of IE i am referencing.
0
 

Author Comment

by:ddantes
ID: 39975987
Thank you.  I'll need a little explanation of your code before I can implement it.   Am I serving three different images to different devices?    What actual widths belong in the image styling?
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39975996
The only one you versions you are referencing is going to be old.    

fyi, as of last November, even google has dropped support for ie9 http://googlesystem.blogspot.com/2013/11/google-drops-support-for-ie9.html
0
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 300 total points
ID: 39976020
You will have to plan out what sizes to use.  As much as you can, you want to use your images full size.  If you only have a 340px space for your image, then don't serve a 600px wide image and shrink it in the browser.  Although that is not as bad as the other way around.  If you have a 300px wide image and force it to expand to 600px, the text will look blown out.

When you are making a responsive site, you have to do a bit more planning.

Let's take 700 to 900px viewport.  The left side takes up about 65% of the total width.  That's about 450 to 580px of space.  For the larger screen, you may want to go bigger.  For the smaller screen, keep the same width, but stack the left over the right.  This will prevent the two from shrinking to the point they can not be read.
0
 

Author Comment

by:ddantes
ID: 39976059
Thank you both!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Need Assistance Implementing ShockWaveFlash Object in Excel VBA 3 34
Flex container in CSS 8 46
Check input text, Number 7 55
iframe stay to the left of page 5 30
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question