Unglood
|
Jumping headers is the topic.
http://cannonbeachlive.com/tide-tables/ is the page.
Jumping nav bars seems to have been addressed in the forums by (thank you abland) max-width. I have tried max-width on the header above. No happy!
The site is "pure" 4.1
I guess I should have read betwixt the lines first and, instead of having two header images - as in link above - only have made 1 header image extending the full width of the body.
Is that how I can correct this, by making 1 full-width image?
Thank you.
|
|
Abland
|
Hi, Unglood,
I set all my themes with widths and relative position to correct the jumps. The following just targets the elements but doesn't change the original rules in case you want to revert.
In sidebar-header.php find:
<div class="cbl-shapes">
<div class="cbl-object1295549866" data-left="87.84%"></div>
<div class="cbl-object1760427099" data-left="0.18%"></div>
</div>
Add a custom id to each object: (you can have more objects, too)
<div class="cbl-shapes">
<div id="custom-item-1" class="cbl-object1295549866" data-left="87.84%"></div>
<div id="custom-item-2" class="cbl-object1760427099" data-left="0.18%"></div>
</div>
In header.php add a custom id to the body tag:
<body <?php body_class(); ?> id="custom-item">
Add the following to your style.css:
#custom-item .cbl-shapes {
position: relative;
display: block;
height: 100%;
margin: 0 auto;
overflow: visible !important;
}
/*establishes midpoint of all shapes and items*/
#custom-item #custom-item-1,
#custom-item #custom-item-1 {
left: 50% !important;
right: auto;
}
/*these are here in case they're used*/
#custom-item .cbl-headline {
left: 50% !important;
right: auto;
}
#custom-item .cbl-slogan {
left: 50% !important;
right: auto;
}
Then in style.css adjust the placement with margin-left. Negative margins go left of center. Adjust each margin to your own placement:
#custom-item .cbl-shapes {
width: 1120px; /*your site width*/
}
#custom-item #custom-item-1 {
margin-left: -500px;
}
#custom-item #custom-item-2 {
margin-left: 200px;
}
#custom-item .cbl-headline {
margin-left: -500px;
}
#custom-item .cbl-slogan {
margin-left: -500px;
}
This second batch of styles are to customize to your site. Now that it's fixed with a width and relative it doesn't jump on load.
|
|
Unglood
|
Quote Abland:
I set all my themes with widths and relative position to correct the jumps. The following just targets the elements but doesn't change the original rules in case you want to revert.
---------
This second batch of styles are to customize to your site. Now that it's fixed with a width and relative it doesn't jump on load.
Abland. Thank you. I knew i'd have to come to grips with your previous detailed explanations. I'm sure they are spot on. I was just trying to easily circumvent additional coding - in case it bit me in the future!
to paraphrase an old joke "....Abland gave me my Relatives, thank heaven I can choose my friends"
Thank you. I'll let you know...
|
|
Unglood
|
Quote Abland:
I set all my themes with widths and relative position to correct the jumps. The following just targets the elements but doesn't change the original rules in case you want to revert........
Abland you are a wizard. Thank you much. This works better than requested due to the now available pixel positioning. You must exceed your customer expectations. (How do you do that with XP & IE 7/8!!)
2 comments:
1) I'm thinking you meant this:
/*establishes midpoint of all shapes and items*/
#custom-item #custom-item-1,
#custom-item #custom-item-2 {
left: 50% !important;
right: auto;
}
instead of this:
/*establishes midpoint of all shapes and items*/
#custom-item #custom-item-1,
#custom-item #custom-item-1 {
left: 50% !important;
right: auto;
}
and,
2) in your honor, my custom-item id is named #ablanded
Thanks.
|
|
Unglood
|
Quote Abland:
I set all my themes with widths and relative position to correct the jumps. The following just targets the elements but doesn't change the original rules in case you want to revert.
There's no way this fix for the Header jumping could have affected the Footer moving from "Outside" to "Inside" the Sheet - is there?
just askin'!
|
|
Abland
|
Hi, Unglood,
Hey, thanks for the honorary id
It wouldn't affect the footer - but you are missing a closing div, so in footer.php find:
<footer class="cbl-footer">
and add a closing div:
</div>
<footer class="cbl-footer">
|
|
Unglood
|
Quote Abland:
you are missing a closing div, so in footer.php find:
<footer class="cbl-footer">
Thanks much - again - Abland.
Next time i'm gonna have to rename my art-styles to abl-styles
|
|
Unglood
|
I give in. Uncle. Enough time on detail is enough...
The .slogan has me beat. Probably 6 hours i've spent trying to stop a .slogan from jumping around in the Header here: http://northcoastcomputers.com
I've sedder up like Abland's solution above and the .slogan does not behave like the objects.
I've messed with the sidebar-header code, the style sheet code, the numerous left's, margin-left's, absolutes, relatives, percentages and pixels and I give-in.
What on god's green earth do i have to do to stop the .slogan jumping?
How hard can it be?
(And, as an aside, I have now "solidified" some ideas about how i feel on the on the "would you pay $700 for Artisteer" topic that's out there somewhere.)
|
|
Abland
|
Hi, Unglood,
#ablanded .ncc-slogan {
left: 50% !important;
right: auto;
margin-left: -550px px !important;
}
Adjust the margin to what you need.
|
|
Abland
|
And don't use the extra px in margin-left
|
|
Unglood
|
lol. easy for you Abland! I don't know where you are or what you do with your days but.... thanks for all your help. truly appreciated.
what was the difference in the coding? Was it the !important after the margin- left ?
I feel like such an ... an... an... imbecile! I think i'm going to look for another job now. Would you like fries with that!!
|
|
Debayne
|
Sorry to drag up an old post but is there a way to do this and keep the site responsive?
Basically my client wants header items lined up perfectly with the main body elements on normal and widescreen which has been a challenge, but now header element jump is an issue.
I tried the above and although it works, the items no longer line up on all screen ratios
Thanks in advance
|
|
ScottN
|
Yep, headers and menus jumping around on each page load -- a real mess in Artisteer. I guess it's no longer a supported product, which is a shame.
|
|