[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 152
  • Last Modified:

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

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
Donnie Walker
Asked:
Donnie Walker
  • 2
  • 2
1 Solution
 
COBOLdinosaurCommented:
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
 
Donnie WalkerAuthor Commented:
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
 
COBOLdinosaurCommented:
<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
 
Slick812Commented:
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
 
Slick812Commented:
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

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now