WordPress.org

Ready to get started?Download WordPress

Forums

Montezuma
How do I get my header not to be weird? (56 posts)

  1. ConsiderThis1
    Member
    Posted 10 months ago #

    OOPS I forgot my link
    http://health-boundaries.com/

  2. CrouchingBruin
    Member
    Posted 10 months ago #

    Hi, Karen:

    Wow, you've made quite a bit of progress from when I last saw your site. Did you mean to take the site title out?

    How do I get a border like the one you used in Sandbox?

    OK, if I didn't tell you about Firebug or Chrome Developer Tools, I apologize, but I'm going to give you a quick lesson, now, because it will be a big help when you are trying to figure out the CSS of a particular web element, either on your site or on someone else's.

    Firebug is a free extension for Firefox, while Chrome Developer Tools (AKA Chrome DevTools) comes built-in with Chrome. Hopefully you are using one of those two browsers. I prefer Chrome DevTools, but both work very well for what you need.

    I'm going to give you a little tutorial on how to use Chrome DevTools to figure out the answer to your question, then you can use this technique for other CSS questions that will arise.

    First, open up the sandbox site in Chrome. Right-click somewhere on the header image and select Inspect Element from the pop-up menu.

    The DevTools console will open up in the bottom half of your browser window. The left pane shows the source code, with the code for the element that you are inspecting highlighted. As you move your mouse over each line of code in the left pane, you'll see the corresponding element in the top pane highlighted. The img element should currently be highlighted. What's important to note for now is that the element has an ID of headerImage.

    The right-pane shows all of the CSS rules which affect that particular element in descending order of specificity. That is, the properties in the rules at the top will override any identical properties in the rules below it. If you scroll down the right pane, you'll see some rules where the properties are in a strike-through font, signifying that the property was overriden by another rule above it.

    At the top of that pane, you'll see a rule for the selector #headerImage. The pound sign (#) signifies that the selector is for an ID. So what I do, and what you should do, is give every element that you will be targeting with some sort of unique CSS an ID, because using a CSS selector with an ID gives you one of the highest specificity values. The one property for #headerImage is the border property:

    #headerImage {
       border: solid 5px #339;
    }

    So what I would do is:
    1) add an ID for your image element.
    2) add a CSS rule to style it. You should add it to the various.css virtual CSS file, since that file will be loaded after all of the other virtual CSS files, which is important if you are trying to override a rule with an identical specificity - the rule which appears last wins.

    How do I get the logo over the white text box?

    Are you referring to the search field that is just above the Recent Posts in the side bar?

    How do I change the menu lettering to be darker?

    Look at the menus_menu1.css virtual file. If you do a search on the word color, you'll see the three rules which affect the menu color.

    As far as seeing what the original code for header.php looks like, the way I would do it is to copy & paste the contents of your current header.php file to somewhere safe, then click on the shallow button that's labeled subtemplate-header. That will revert the code back to the default. Copy & paste that code somewhere that you can refer to later on, then copy & paste back your modified code and click the SAVE Changes button.

  3. ConsiderThis1
    Member
    Posted 10 months ago #

    Hi CrouchingBruin,
    This is exciting ~~~ HUGE increase in things I can learn from you.

    LOL ~ no, I did not want to lose the words, I just could not work out how you got them there. I found a mention in your code of "transparent" but I didn't really understand how it worked.

    I use Chrome. I right click on the body of a site and choose "View page source" ~~~ Is that what you mean?

    I have to go switch to a different backup battery, and check on dinner.

    I'll study what you wrote before I reply again.

    Thank You So SO much!!!!

    Karen

  4. CrouchingBruin
    Member
    Posted 10 months ago #

    I right click on the body of a site and choose "View page source" ~~~ Is that what you mean?

    No, you right-click on the element that you want to look at and select Inspect element. For example, since you want to see how the blue border is created, you right-click on the header image from my sandbox site, select Inspect element, and the CSS for the image element will show up in the right pane of the DevTools console.

  5. ConsiderThis1
    Member
    Posted 10 months ago #

    Hi CrouchingBruin,
    Ah ha! That's pretty nifty. Very specific information.

    Tomorrow I'm going to try changing my header approach to Image... from Logo, which I'm using now.

    First I have to make my image shorter, top to bottom, instead of scaling the whole image to get it shorter.

    I'm no longer sure I want it across the entire top. There sure are a lot of options in creating a visual affect.

    Question ~ the colors I use in Sitebuilder all have 6 letters or numbers or a combination of both... Is WordPress simply sleeker to use 3???

    VERY EXCITED ~~ to have found ~~ been shown ~~ where the menu padding is... VERY KEEN to work with that tomorrow.

    I'm WAY happy with all the work before me... the options!!!

    Thank you So VERY much!!!!

  6. ConsiderThis1
    Member
    Posted 10 months ago #

    Hi CrouchingBruin...

    Well, I got the border: http://health-boundaries.com/

    Unfortunately it's a little more Picasso than I had in mind.

    I switched the image in my css from the Logo area to the Banner area, but that doesn't appear to have affected how it looks. I thought it would go across the whole top, but... not so much.

    I want the banner to be even less high than the picture that's inside the border... I'm trying to get enough room for the drop down menus to be rather long and yet still be entirely visible on a laptop screen, that's small like mine...

    Since I can't find any dimensions that you put in, besides 100% I'm unclear what to do...

    Maybe the 100% attached to the border... that might explain it...

    What do you think???

  7. ConsiderThis1
    Member
    Posted 10 months ago #

    Ah ha. When I changed the image from logo to banner in the sub template for header, it switched,

    Oh Dear, CroughingBruin...

    I just this minute got it centered using
    left-margin: 100px;

    but that put a margin top and bottom, too... which I don't want.

    And, how do I get the border to be on the edges of the image?????

  8. ConsiderThis1
    Member
    Posted 10 months ago #

    /* The header area full width background */
    #banner-bg 	{
      	img src="http://health-boundaries.com/wp-content/uploads/2013/09/NowLessTallandScaled.jpg";
    	max-width: 90%;
      	margin: 100px;
        border: solid 50px #339;
    
    }
    
    /* The header area */
    #banner {
      	position: 				"width=device-width";
      	background-color:		#ffff99;
    }
    
    #logo-area {
      	<a href="<?php echo get_option('home'); ?>/"></a>
    }
    
    @media only screen and (max-width: "width=device-width") {
    	#banner > div, #banner > nav {
    		float: none;
    		width: 100%;
    	}
    }
    
    /* The main row, with the #content
  9. ConsiderThis1
    Member
    Posted 10 months ago #

    Monday ~
    Hi CrouchingBruin ~

    I've got my image about right. For a moment the border was right, so I was really excited. But when I adjusted my image, the border went Picasso on e again.

    Also, I tried adding the code I found in other ShowingOff sites for centering the image... but that didn't work. The only way so far that I've gotten it toward the middle was to pad it there... but that doesn't seem like an appropriate method.

    Please will you help?

    Oh, and how do I get the words on top of the image, AND in sync with it when the page responds????

    I'm going to look for a widget that I can put in the header, I saw that you had a widget...

    Hope you are having a truly lovely day!

    As an aside, Do you like Carrots????

    Karen

  10. CrouchingBruin
    Member
    Posted 10 months ago #

    Question ~ the colors I use in Sitebuilder all have 6 letters or numbers or a combination of both... Is WordPress simply sleeker to use 3???

    No, you can either use 6 or 3 characters. The three characters are just a shorthand in case you don't need a palette with so many different shades of color. If you use three characters, it's the same as if each character were doubled for six characters. That is, #fff is the same as #ffffff, and #234 is the same as #223344. With three characters, you can create 4,096 distinct colors (16 x 16 x 16). With six characters, you can get 16,777,216 distinct colors, although, the difference between two closely related colors, like #aabbcc and #aabbcd is so slight that you probably wouldn't notice the difference. For most designers, a three character color is good enough, but you may have a very specific color that can only be expressed in six characters.

    OK, first things first, give this a try. In the rule for #banner-bg:

    1. Take out max-width: 70%;.
    2. Take out the position="center"; line; not only is the syntax incorrect (you use colons and not equal signs), but center isn't a valid value for the position property.
    3. Change the values for margin from 0px to 0 10%

    So change this:

    #banner-bg 	{
    	img src="http://health-boundaries.com/wp-content/uploads/2013/10/NowBetter.jpg";
    	max-width: 70%;
    	position="center";
    	padding: 0px 0px 0px 0px;
    	margin: 0px;
    	border: solid 5px #339;
    	border-radius:	0px;
    }

    to this:

    #banner-bg 	{
    	img src="http://health-boundaries.com/wp-content/uploads/2013/10/NowBetter.jpg";
    	padding: 0px 0px 0px 0px;
    	margin: 0 10%;
    	border: solid 5px #339;
    	border-radius:	0px;
    }

    The 0 10% value for margin means use 0 margin for the top and bottom, but a 10% margin on the left and right. Adjust the value to suit the aesthetics you're looking for.

    Now, when your site is viewed on a smaller device, like a smart phone, you probably want to get rid of the side margin so the image goes all the way across. You may have noticed that when you make your browser window narrower, at some point the menu turns into a drop-down list, specifically, when the browser width is less than 767 pixels. Take a look at the menus_menu1_mobile.css virtual CSS file. This file has sections called media queries, which activate at certain screen widths. That's what helps to make sites responsive.

    About a dozen lines down, you'll see this section:

    @media only screen and (max-width: 767px) {
    	/* Hide default menu */
    	ul#menu1,
    	a.rsslink,
    	img.avatar,
    	.post-categories i	{
    		display: 	none;
    	}
    
    	.menu1-mobile {
    		display:	block;
    	}

    What this does is hide the regular menu (#menu1), along with some other elements, when the width goes down below 767px, and displays the drop-down menu (.menu1-mobile) instead.

    So to remove the margin from #banner-bg, go down to the bottom of menus_menu1_mobile.css, and change this:

    #content {
    		padding:	0 20px 20px 20px;
    	}
    }

    to this:

    #content {
    		padding:	0 20px 20px 20px;
    	}
    #banner-bg {
    		margin:		0;
    	}
    }

    You want to make sure you put the #banner-bg section in just before that closing brace for the media query, which is the very last line. Then the margins on the image should disappear at the same point when the menu turns into a drop-down list.

    I do like carrots, I like dipping them in an edamame hummus that I get at the local supermarket.

  11. ConsiderThis1
    Member
    Posted 10 months ago #

    Hi CrouchingBruin,
    Happiness! I'll go try that in a moment, but first: I'm SO SO happy about the carrots. I've been a bit worried.

    Years ago when I wasn't housebound and used to drive, I used to stop, park and go talk to kids if I saw a group of them smoking. I'd tell them that eating carrots reduces the incidence of lung cancer by about 67%, and that lots of people had told me about aged relative, in their 80s and 90s who had smoked all their lives, loved and eaten a lot of carrots, and were alive and well. The kids would then add more stories to my mental file of why eating carrots is a really good thing if you smoke.

    Now I can look at your avatar without worrying. :-)

    :-)

  12. ConsiderThis1
    Member
    Posted 10 months ago #

    Hi Again CrouchingBruin,
    It didn't quite work... I changed the margin thing, centering and border. The centering is GREAT. But the border still goes around the tag line and menu. I want it around the picture, only.

    So now I'm not sure I'm still supposed to change the code for the menu.

    On third reading, I think I am... so will do.

    But please will you help me get the border around the picture, and only the picture?

  13. ConsiderThis1
    Member
    Posted 10 months ago #

    OH!!! I misunderstood. I wasn't reading properly and didn't see that I had to go to a different css file. Once I saw that I changed it and tried making my screen smaller. SO COOL!

    Thank you.

    !!!!!

    I forgot to ask you how to get words over the header image... Please will you tell me when you get time?

    Karen

  14. CrouchingBruin
    Member
    Posted 10 months ago #

    But the border still goes around the tag line and menu. I want it around the picture, only.

    In your header.php file, add an ID to the img tag to make it easier to select with a CSS rule. In this example, I added the ID headerImage:

    <img id="headerImage" src="http://health-boundaries.com/wp-content/uploads/2013/10/NowBetter.jpg" />

    Go back to the rule for #banner-bg and remove the line that says img (I forgot to have you do that with my previous message; that line doesn't do anything). Cut the line for the border property, that's the line that creates blue border around the border area; we're going to paste it into a new rule.
    So change this:

    #banner-bg 	{
    	img src="http://health-boundaries.com/wp-content/uploads/2013/10/NowBetter.jpg"
    	padding: 0px 0px 0px 0px;
    	margin: 0 10%;
    	border: solid 5px #339;
    	border-radius:	0px;
    }

    to this:

    #banner-bg 	{
    	padding: 0px 0px 0px 0px;
    	margin: 0 10%;
    	border-radius:	0px;
    }

    Then create a new rule for the image:

    #headerImage {
    	border: solid 5px #339;
    }

    Go back into header.php. Just after the img element, and before the logo-area div, add another div that contains the text you want. Be sure to give it a unique ID:

    <div id="imageText">This is some random text</div>

    If you then look at the site, the text should appear below the image, but before the tag line ("What you don't know..."). To move the text up over the image, you can then add this CSS rule (various.css would be a good place to put it):

    #imageText {
       margin-top:  -50px;
       margin-left: 50px;
    }

    The negative value for margin-top will move the div upwards by 50px (if it were a positive value, it would move downwards), and the margin-left value will move the div to the right by 50px. Adjust the values as needed. You can also add properties for styling the text within the div, like color, font-size, etc.

    By the way, I don't inhale my cigar smoke. Most cigar smokers don't inhale, which gives them a greatly decreased risk for lung cancer compared to cigarette smokers. But thank you for caring about my health.

  15. ConsiderThis1
    Member
    Posted 10 months ago #

    Hi,
    It's wonderful to know that the line in #banner-bg wasn't doing anything, because it didn't seem to change things. But I was never sure I'd gotten the coding right. Whew. Wonderful to just take it out. Thank you.

    The next bit of what I'm supposed to do is a little harder for me to grasp.

    **** Got it!

    Totally AMAZING to see the border go around the picture. How COOL!

    It took me awhile to figure out how those little marks on the left hand edge separate things, but now I think I've got the structure. NEAT!

    Okay... now going to the Words...

    I've just, for the first time, seen the difference in the code at the left hand side on the header sub template and the layout.css. I don't know how long it would have taken me, without your help, to appreciate that there's so much difference.

    OOPS ***** all the words went up into the picture ***** the tag line is up there, too.

    I now see that the header.php contains the =
    while the css contains :

    When I added the css to the header.php it made the image text stay in the image and it moved the tag line below the image, but, I don't think this is what I'm supposed to have in terms of code. It looks like the imageText and Tagline are joined as if they were one set of words...

    I'm happy to know about the cigar thing, I didn't know that. Thank you!!!!

  16. CrouchingBruin
    Member
    Posted 10 months ago #

    OK, the first thing is to the CSS lines out of header.php, they only go in the CSS files.

    Now, the next part is going to be a bit trickier. You'll be putting the tagline and menu into a separate row div so it's separate from the current banner div that contains the image and the text which floats over it.
    Right now you have something that looks like this in your header.php file:

    <div id="banner-bg" class="cf">
    	<div id="banner" class="row">
      		<img id="headerImage" src="http://health-boundaries.com/wp-content/uploads/2013/10/NowBetter.jpg">
      		<div id="imageText">Health Boundaries</div>
    		<div id="logo-area" class="col12">
    			<p id="tagline"><?php bloginfo( 'description' ); ?></p>
    		</div>
    		<?php wp_nav_menu( array(
    			'container' => 'nav',
    			'container_class' => 'menu-wrapper',
    			'container_id' => 'menu1-wrapper',
    			'menu_id' => 'menu1',
    			'menu_class' => 'cf menu',
    			'theme_location' => 'menu1',
    			'fallback_cb' => 'bfa_page_menu'
    		) ); ?>
    	</div>
    </div>

    We're going to change it to look like this:

    <div id="banner-bg" class="cf">
    	<div id="bannerImage" class="row">
      		<img id="headerImage" src="http://health-boundaries.com/wp-content/uploads/2013/10/NowBetter.jpg">
      		<div id="imageText">Health Boundaries</div>
    	</div>
    	<div id="banner" class="row">
    		<div id="logo-area" class="col12">
    			<p id="tagline"><?php bloginfo( 'description' ); ?></p>
    		</div>
    		<?php wp_nav_menu( array(
    			'container' => 'nav',
    			'container_class' => 'menu-wrapper',
    			'container_id' => 'menu1-wrapper',
    			'menu_id' => 'menu1',
    			'menu_class' => 'cf menu',
    			'theme_location' => 'menu1',
    			'fallback_cb' => 'bfa_page_menu'
    		) ); ?>
    	</div>
    </div>

    The first thing you'll notice is that I've changed the name of the banner div to bannerImage in the second line.
    Then right after the imageText div, I added a closing /div tag to close out the bannerImage div.
    Finally, I added an opening div with an ID of banner that encloses the logo-area and menu.
    You can take a look at the sandbox site to see how I implemented it. The CSS I used for #imageText is:

    #imageText {
    bottom: 50px;
    left: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #ff9;
    }

    I also removed the margin: 0 10%; property from #headerImage; it seemed to center better that way.

  17. ConsiderThis1
    Member
    Posted 10 months ago #

    Good Morning CrouchingBruin,
    My php had LOTS more stuff in it than you thought. I wasn't successful in removing everything I tried after things didn't work. I would forgot whether I'd been changing layout.css, content.css, or a php file. Early on I did not see the difference between css files and php files, except that they were reached via different pages.

    I stopped worrying about the abandoned code, that I couldn't tell from the essential code, when I decided I'd get another Monteazuma site for the legal part of my original site. I could copy that into files for this site to get back to their original, pristine form, plus the essential changes.

    But you cleared up the mess for me with the new code. And, DELIGHT, it works. Of course it works!

    Let me see if I understand, though. You put the big things, the "divisions" into the php file. That identifies the key parts of the pages.

    Then, you "implement" using the css files. Is that how it works?

    Now, on to Sandbox and the css files.

    Thank you for doing Sandbox for me. Up until I looked at Sandbox I kept thinking I was going to put the text directions into LOGO, which was NOT right.

    Sandbox showed me clearly where it went.

    So, I now have TEXT.

    But, sadly, it isn't responsive in relation to the picture.

    Yesterday when I couldn't get the text where it was supposed to be, I tried adding text to the picture itself. I did several tests and got what looked workable, but the picture kept importing in as a thumbnail.

    I asked a specific question about this, but no one replied.

    Here is my Home page with the original quite big image in the body of the text: http://health-boundaries.com/

    Here is my test page when I found I could not get the new image to be big: http://health-boundaries.com/new-test-for-text-size-responsive/

    The tiny picture in the body text comes from a file that is the same as the picture in my homepage body text.

    I put another picture on the page to see if it showed up as tiny, but it didn't.

    I'm thinking that maybe my image is too big and that if it were, say 900 instead of 971, that it would show up Large.

    I'm going to go work with that, again...

    Thank you for your help.

    Your endurance is remarkable. I had no idea it would take this long to get my header into shape. I'm truly amazed you haven't put me on Ignore, being fed up with how slow I am to catch on. I am just SO grateful to you.

    Karen

  18. ConsiderThis1
    Member
    Posted 10 months ago #

    :-( No luck.

    I tried 767 because you'd said that was a threshold for screen size response. The 767 image still became a thumbnail when I inserted into page.

    So I tried 600. No luck.

    So I removed a plugin that had previously caused some things to behave differently than previously. No luck.

    Except that I'm getting a lot better at using GIMP. :-)

    The image on this page is 600 wide:http://health-boundaries.com/foods-containing-b12/

    so I don't know why I can't get the Now image to be the right size.

    I wonder if I change the image's name from Now, which is like the header, if it will break the spell...

  19. ConsiderThis1
    Member
    Posted 10 months ago #

    I made a new file, named it Different575Text.... and it still shows up as tiny.

  20. ConsiderThis1
    Member
    Posted 10 months ago #

    Just to be clear, I don't care about the image. What I wanted to do was see if words incorporated into the image would work when the page was doing its responsive thing.

    I was afraid to try it with the actual header image, since it's taken rather long to get that right. I don't want to mess it up.

    There may be a way to make the words respond in coordination with the picture... without them being a part of the picture. ????

  21. ConsiderThis1
    Member
    Posted 10 months ago #

    Hi CrouchingBruin,

    I'm puzzled about why your Sandbox site opens up so cleanly, while my site opens up with big, dark text, then settles into the font size and leading that's the same as yours.

    I've compared the Inspect Element of each page, everything appears to be the same, except that everytime there's mention of css, yours and mine are different. I was going to change all mine to match yours, but then wondered if the numbers relate individually to when a style was created.

    How can I get my page to open up cleanly, like yours?

  22. CrouchingBruin
    Member
    Posted 10 months ago #

    Hi, Karen:

    Let me see if I understand, though. You put the big things, the "divisions" into the php file. That identifies the key parts of the pages.

    Then, you "implement" using the css files. Is that how it works?

    Yes, the code which defines the elements of the page go into the PHP files and the rules for styling that content (including color, size, placement) go into the CSS files.

    Yesterday when I couldn't get the text where it was supposed to be, I tried adding text to the picture itself. I did several tests and got what looked workable, but the picture kept importing in as a thumbnail. I asked a specific question about this, but no one replied.

    When you click the Add Media button, a dialog titled Insert Media appears, and you can pick an image from your uploaded files. On the right, in that gray section, pull down the scroll bar so you can see the very bottom. There's a drop-down labled Size. Try picking either Large or Full size; I think the default is Medium, which is why all of your images are being inserted the same size.

    I'm puzzled about why your Sandbox site opens up so cleanly, while my site opens up with big, dark text, then settles into the font size and leading that's the same as yours.

    The sandbox site actually does the same thing, but there is so little content on it that the change happens very fast. That is, on sites that have a lot of content, especially lots of pictures, the site seems to load all of the content first, with default sizes, then applies the CSS styling to the text when the load has finished. Not sure why that is so, I'll have to research it a little more.

  23. ConsiderThis1
    Member
    Posted 10 months ago #

    Hi CrouchingBruin,
    Wow!!!! Who knew. When I read your answer re the picture size, I was sure you were wrong on this one... Ha!. Not at all. I found the drop down menu, tried it, and sure enough. HAPPINESS!!!!

    Well, my site is pretty tidy now! Or will be once I replace the heading image with one with text.

    Thank you So very much.

    An aside: The man I hire to help me said he was leaving here to go to his granddaughter's basketball game, which of course reminded me of your site.

    Is one of the girls your daughter? Has their season begun? I lost all my tabs, I did something earlier that I shouldn't have done, and lost my tabs, so now I have to go and find them all again, Showing off, and Lady Eagles. Else I could just look at your site and see the news.

    I can't sleep, so I got up to work on my site.

    Best I get to it. :-)

    Kare

  24. ConsiderThis1
    Member
    Posted 10 months ago #

    Oh Dear, CrouchingBruin,
    My Breadcrumbs have changed. Your Breadcrumbs didn't change.

    I've been looking at the respective Inspect Element for well over an hour and I can't see a difference.

    There must be a difference, but I cannot see it.

    I'm So sorry to bother you with this when we thought it was all sorted.

    Also, while we're still talking about php and css. When I go to my php files they don't look anything like those that show up when I Inspect Element... I couldn't find any code that matched what was shown in Inspect Element for my site.

    So, is the question, Where is it? or,
    Why isn't it shown?

    Karen

  25. CrouchingBruin
    Member
    Posted 10 months ago #

    When I go to my php files they don't look anything like those that show up when I Inspect Element... I couldn't find any code that matched what was shown in Inspect Element for my site.

    So, is the question, Where is it? or,
    Why isn't it shown?

    I may have mentioned this before, but PHP code is executed on your host's server, so you will not see the PHP code when you Inspect element. For example, this is what the DIV which contains your tag line looks like when you inspect it in DevTools:

    <div id="logo-area" class="col12">
    	<p id="tagline">What you don't know about Vitamin B12 could hurt you.</p>
    </div>

    But this is what it looks like in header.php:

    <div id="logo-area" class="col12">
    	<p id="tagline"><?php bloginfo( 'description' ); ?></p>
    </div>

    The code in between the <?php ?>brackets contains a PHP function called bloginfo();. The bloginfo() function outputs information about your site. If 'description' is used as the parameter, then the function returns the tag line (description) of your site. If 'name' is used as the parameter, then the function returns the name (site title) of your site. That's why I copied the contents of my header.php file to a PasteBin, since you won't be able to see what my header.php file looks like otherwise.

    My Breadcrumbs have changed. Your Breadcrumbs didn't change.

    I've been looking at the respective Inspect Element for well over an hour and I can't see a difference.

    There must be a difference, but I cannot see it.

    Yes, this one is hard to see. What happened was that you left a slash off the closing DIV tag, so the browser interpreted it as an opening DIV tag instead. Look at your header.php file, about the fifth line down. A slash should be added before the word div to make it a closing div. I've commented the line below:

    <div id="banner-bg" class="cf">
    	<div id="banner" class="row">
          		<img id="headerImage" src="http://health-boundaries.com/wp-content/uploads/2013/10/NowBetter.jpg" />
           		<div id="imageText">Health Boundaries</div>
          	<div>    <<<<--- This should be </div>
         	<div id="banner" class="row">
            	<div id="logo-area" class="col12">

    Is one of the girls your daughter? Has their season begun? I lost all my tabs, I did something earlier that I shouldn't have done, and lost my tabs, so now I have to go and find them all again, Showing off, and Lady Eagles.

    Both of my daughters played on the team last year. My oldest has graduated but my youngest daughter is still on the team. The season will be starting next month.

    Lady Eagles
    Showcase pages

  26. ConsiderThis1
    Member
    Posted 10 months ago #

    Hi CrouchingBruin,
    Yes, you did explain about what I see and what's at the server. I forgot when I was trying to see what I'd done wrong. Even now, after you told me to look for the slash, when I tried to find where I'd missed the slash, without using your comment to guide me, because I was sure that if I knew what to look for I could find it... I couldn't.

    How do you see those things?

    I can see now that I thought the closed div after the word boundaries, was the closing. I missed seeing that there was another line between. Maybe now that this happened I'll be able to look at the div things with better attention to detail.

    In any case, I'm REALLY happy to see my Breadcrumbs crossing my entire page again.

    I love the pictures of the Lady Eagles! The energy I see in their pictures sort of helps me put more of my energy into working on my site... I think their enthusiasm is contagious! Happily!

    Karen

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.