Solved

How do I divide my menu-logo-menu header so it is centered and resized?

Posted on 2015-01-17
5
128 Views
Last Modified: 2015-01-19
I have a Wordpress site that I have been struggling with here :

http://rentawebguy.net/nfz/

This is a mod of the WP Twenty Twelve theme.

the menu top right, logo and menu top left are responsive but the column widths are wrong and are not aligned right.

the left menu should align right, the logo should be center and the right menu should align left as shown in the attached graphic.

I used this responsive code:
/*  SECTIONS  */
.section {
      clear: both;
      padding: 0px;
      margin: 0px;
}

/*  COLUMN SETUP  */
.col {
      display: block;
      float:left;
      margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
      .col {  margin: 1% 0 1% 0%; }
      .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
img.header-image  {

box-shadow: none;
}
}
 

ANY help that solves this problem is greatly appreciated.
masthead.png
0
Comment
Question by:Donnie Walker
  • 2
  • 2
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40556322
If you had validated the page, or even done a view source; you would be aware that you have some PHP exposed in the client along with other errors.

With something that sloppy; you need to clean it up so it is safe and stable before you worry about presentation issues.

Based on the look of the page my guess is that the math is wrong for the left menu segment, but there is little point in trying to do diagnostics on a page with serious errors.

Cd&
0
 

Author Comment

by:Donnie Walker
ID: 40556345
what php is exposed?

this is the Wordpress 2012 theme and has been around since then.

whatever errors you are seeing have nothing to do with the problem I am having.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40556374
<aside id="text-6" class="widget widget_text">			<div class="textwidget"><span  style="font-size: 80%;
    text-align: right;">Copyright &copy; 2009-[b]<?php echo date("Y") ?> [/b] No Fry Zone, LLC. All Rights Reserved</font></span></div>
		</aside></div><!-- #footer-widgets -->

Open in new window


In and of itself not a security issue, but who knows what else is on that site if you are not willing to clean up your code.

Perhaps another Expert will come along willing to work at that level, but I'm out. Sorry I can't help you.

Cd&
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
ID: 40558423
hello again Donnie Walker,  I fully agree with COBOLdinosaur about your page code being a Mess, for instance look at this mess of CSS classes JUST in the body tag -
<body class="home page page-id-2 page-parent page-template page-template-page-templates page-template-full-width page-template-page-templatesfull-width-php custom-background two-column right-sidebar full-width custom-font-enabled single-author">

more than 13 CSS class names, how is this at all useful?

Anyway, back to your problem - - -
This time, I have gotten your page code at -
http://rentawebguy.net/nfz/
and I have abandon ALL of your html and css for the menu responsive process.
I will outline the process I used to build my HTML stuctures for responsive menu, I started with the central element, the <img> for logonfz.png . Then I placed three <a> links on each side of the <img>, it was not centered so I added a <div> with style as "text-align:center", centering all.
I needed the Margins for the <a> to be responsive so I placed them in a <div> and the style as "display:inline-block; width:38%;"   and set the <a> margins at 6%  ,  , . This did not do well so I reduced it to "width:35%;"   and set the <a> margins at 3.3%
This looked ok until the page width got to about 1250px, so I had to add a -
@media only screen and (max-width: 1280px) {
and Reduce the <div> width percentage and the <a> margins.
this worked down to about 800px page width, where an <a> would drop to a second line SO then I built a menu <div> under the image with ALL six <a> in it, , . . It is hidden on any page width greater than 790px,  at 790px the side-Menus are hidden, and the one-menu beneath  is revealed.
this looks OK until a page width of about 500px, I need to drop the six <a> into Two rows, so I added a <br /> that is not displayed until page width of 490px.

code below -
<style>
.sideMenu {position:relative; top:-52px; display:inline-block; text-align:right; width:35%;}
.sideMenu a {margin:3.3%;}

.oneMenu {display: none; text-align:center; width:28em; margin: 1px auto;}
.oneMenu a {margin:1%;}
.oneMenu b {display: none;}

@media only screen and (max-width: 1280px) {
.sideMenu {width:31%;}
.sideMenu a {margin:2.5%;}
}

@media only screen and (max-width: 790px) {
.sideMenu {display:none;}
.oneMenu {display:block;}
}

@media only screen and (max-width: 490px) {
.oneMenu {width:15em;}
.oneMenu b {display: inline;}
}
</style>
<div id="page" class="hfeed site">
	<header id="masthead" class="site-header" role="banner">
		<hgroup>
			<h1 class="site-title">
				<a href="http://rentawebguy.net/nfz/" title="No Fry Zone" rel="home">No Fry Zone</a>
			</h1>
			<h2 class="site-description">
				Sunless Airbrush Tanning			</h2>
			</hgroup>
<div style="text-align:center;">
<div class="sideMenu">
  <a href="http://rentawebguy.net/nfz/">SUNLESS?</a>
  <a href="http://rentawebguy.net/nfz/prices/">PRICES</a>
  <a href="http://rentawebguy.net/nfz/photos/">PHOTOS</a>
  </div>
<a href="http://rentawebguy.net/nfz/"><img src="noFry_files/logonfz.png" style="width:250px;" alt=""></a>
<div class="sideMenu" style="text-align:left;">
  <a href="http://rentawebguy.net/nfz/free/">FREE?</a>
  <a href="http://rentawebguy.net/nfz/faq/">FAQ</a>
  <a href="http://rentawebguy.net/nfz/contact-us/">CONTACT&nbsp;US</a><br />
  </div>
<div class="oneMenu">
  <a href="http://rentawebguy.net/nfz/">SUNLESS?</a>
  <a href="http://rentawebguy.net/nfz/prices/">PRICES</a>
  <a href="http://rentawebguy.net/nfz/photos/">PHOTOS</a><b><br /></b>
  <a href="http://rentawebguy.net/nfz/free/">FREE?</a>
  <a href="http://rentawebguy.net/nfz/faq/">FAQ</a>
  <a href="http://rentawebguy.net/nfz/contact-us/">CONTACT&nbsp;US</a><br />
</div>

</header><!-- #masthead -->

Open in new window

I only messed with this in my developers Firefox browser, and I liked how it acted as I dragged window to smaller widths.
0
 
LVL 33

Expert Comment

by:Slick812
ID: 40558438
And COBOLdinosaur, has some Good information and help at his site, you might look at this on page -
http://coboldinosaur.com/pages/css-best-practices.html

and then look at some of the many pages there about CSS.

I would recommend that you learn more about the CSS width as a percentage - "width:21.345%"
and the CSS max-width and min-width  , you can combine these CSS elements and get a really GOOD responsive page code.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

705 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now