?
Solved

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

Posted on 2015-01-17
5
Medium Priority
?
144 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
[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
  • 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 34

Accepted Solution

by:
Slick812 earned 2000 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 34

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
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 tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

649 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