Wordpress noob alert! In my home page's HTML editor, I've added a div that is the footer. Loaded in this is a row of logo images that are supposed to sitting a straight line - however, they display staggered vertically. The top left logo (Ocean Basket) sits correctly, the next one has too much padding / margin, the next even more and then next logo even more and so on. I've set the padding and margin to 0 in the css, floated the images left - I cannot understand why this is happening! Any ideas anybody?
test site at http://inexshopfitting.co.za/
try adding display: block; to the images and get rid of the <br> in between.
(for example by adding #home_logostrip_box br{ display:none; } to your themes css file)
That should do it.
I had 5 images floated next to each other (20% each) and it worked fine in HTML, but not when site was converted to Wordpress; the images where floated but they 'stairstepped/staggered'. Like mentioned before, there are bracketed 'br' elements between each image---inserted by Wordpress. I fixed by adding to my images' container class, .classname br { display: none }. It worked perfectly.
Related
We have been using empty anchor tags with css for years to allow hover states with no issues. Here is a sample of the css and html.
a#phone:link, a#phone:visited { width:34px; height:34px; display:inline-block; background:url(phone.png) center top no-repeat; }
a#phone:active, a#phone:hover { background:url(phone-hover.png) center top no-repeat; }
After a lot of digging I finally got cke to stop deleting my empty anchor tags, here is what I did if interested or helpful. I tried to set the removeEmpty but that didn't work until I added protectedSource:
config.contentsCss = '/css/editor.css';
config.protectedSource.push(/<a[^>]*><\/a>/g);
enterCKEDITOR.dtd.$removeEmpty.a = 0; code here
That finally prevented cke from deleting the tag, however the icons still does not appear in the wysiwyg editor. Its all there in code view...
I have stylesheetparser installed and the other styles in the linked css file are displaying correctly, including floating divs that have a width/max-width defined.
When I view the web page in Dreamweaver or a web browser, all the icons are there and working great, but the links/icons don't appear in cke. I can/have added a no-break space, but that adds margin/line-height, and just messes up the alignment design and layout.
What am I missing? Is this expected behavior? I don't think it should be. Is this a bug?
Any thoughts/ideas/help? Thanks!
I've been trying to create a couple of typical layout examples using Singularity, and I have a question about grid-span and floats.
I've created a sample scss stylesheet and html layout. Here's the complete example on Sassmeister.
http://sassmeister.com/gist/a7ca98b7520b12bd6241
My question is whether the containing content div <div id="content"> is necessary? I'm having to use it with a clearfix mixin in order to 'pull' the div down and keep the footer below the content section and aside.
Is there another way to achieve this layout with Singularity, without having to use the surrounding clearfix div? Is there an option for grid-span in the main section that will either not use a float, or self clear this section?
To understand your problem you have to learn how floats and clearing work.
0.
When you float an element, it is removed from the flow. It's vertical height does not count when calculating the height of the container.
1.
The intended usage of floats is to add images to a long sheet of text. The text would wrap around the floated image and increase its overall height and stretching the container vertically, just like an object submerged into water increases the height of water surface.
Before:
After:
2.
If the floated image is located very close to the bottom of the text, it will pop it's bottom out of the bottom of the container, just like an iceberg exposing it's top from the water.
3.
Now imagine that your text is comprised of paragraphs and each paragraph starts with a title. When there's an image floated at the bottom of a paragraph, the image would stretch into the next paragraph, pushing the next paragraph's title aside.
4.
If you don't want that to happen, you apply clearing to paragraph titles:
h2 { clear: both; }
This basically tells the titles: don't let floated images push you aside, let them push you down instead.
5.
But web pages have become more than formatted text, and HTML/CSS didn't provide any means of formatting layouts. So we started using floats for layouts. It's ugly, it's like using wallpaper to sew your clothes, but we have no better option (until Flexbox becomes a thing, and it seems to already).
What happens when you float all content in a container? There will be no flow left, no text to stretch the container vertically, and it's height will be zero (plus border and padding):
6.
You already know that in order to make containers regain their height (wrap around the floated content) we have to apply a clearfix to the container. But what a clearfix actually is?
When you apply a clearfix to a container, you use :after in CSS to create an additional element within the container, after all it's content. Then you apply clearing to the little mother fcuker:
.container:after {
content: '';
display: block;
clear: both;
}
7.
Now back to your question! What's the alternative of using the clearfix?
You've probably have guessed already.
If you've got got content below the floated element, simply apply clear: both to the next element below the floated one! Just like we did in #4 for paragraph titles.
In your case:
footer { clear: both; }
And here's a demo: http://sassmeister.com/gist/df8af8a3c7f8d3df2796
I'm having a problem on a website with Safari 7 (on OSX).
The website address is:
<Edit: Address not valid anymore. Sorry.>
If you click on vertical newsletter button, on the right edge of the content box, an overlay will pop-up.
This overlay looks good on most browser, but there is a problem with safari.
The overlay content is an absolutely positioned box of fixed width. It contains a div with the class "bg", which is a div with CSS position set to fixed and CSS top, right, bottom left set to 0.
The desired (and normally obtained) effect, is that this bg box sizes up to the width and height of the viewport. In safari, it just behaves as if it had it's position set to "absolute" - it just sizes up to the width and height of the container div.
Is this a known issue with Safari? Is there a bug filed? An update?
I could probably fix that by rewriting small parts of the HTML, CSS and JavaScript (if someone has an easier solution, you're welcome to share it!) but I'd like to understand what's happening at first.
I'm not sure what's going on with that positioning thing, but here was my approach to get the same result across the browsers:
#overlays .overlay { /* line 1081 */
...
width: 100%;
height:100%;
...
}
#overlays .overlay .content.text { /* line 1185 */
...
margin:0 auto;
...
}
You could use Z-index but Z-index is not reliable with position:fixed, as shown in this fiddle: http://jsfiddle.net/mZMkE/2/ use translateZ transformation instead.
transform:translateZ(1px);
on your page elements.
EDIT: In your code, Add this css:
.bla, .projects, .contact {
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
}
and then remove z-index refs from those elements and .intro.
Also You can try in other browsers as well
I'm trying to figure out how to code a footer exactly like this:
http://elevationchurch.org/
Basically, the footer isn't in view until you reach the bottom of the content. So if you have a tall desktop browser that doesn't have a lot of content and the end of the content container is in view, the footer is still hidden, but you scroll down and the footer is revealed.
If you notice, scale your browser down to a more "mobile" size, and the footer is still "right-there" waiting to be revealed.
I feel like the answer is so easy, but I've scoured the code for javascript and css tricks, and I'm not seeing it.
Any suggestions?
So checking via chrome's developer tools:
style.css has
html, .inspiration, .inspiration #outer, .inspiration #container, .inspiration #content {
height: 100%;
}
and if you enable/disable that css line, the content shrinks/expands as expected, so that's what's doing the magic.
I'm trying to get two images to repeat ( one shadow image on the right, the other on the left) in the background exactly like this site.
So far I am unable to get the CSS code correct:
http://www.elegantthemes.com/preview/Modest/
I examined the code for that site and have the shadow images I wish to use. I tried to duplicate the code that Elegant Themes is using on a WordPress site running Headway:
.right-shadow { background: #ffffff url(images/right-shadow.png) repeat-y top right; }
.left-shadow { background:url(images/left-shadow.png) repeat-y top left; }
But it did not work.
Then I tried:
body {background:#ffffff url(http://website.com/wp-content/uploads/2012/07/right-shadow.png) repeat-y right top;}
This worked for the right shadow image - it appears correctly
Then I tried
body {background:#ffffff url(http://websitebuddha.com/wp-content/uploads/2012/07/left-shadow.png) repeat-y left top;}
This worked for the left shadow image - it appears correctly
Now when I tried and combine the code to display both shadow images along Y left and Y right as such:
body {background:#ffffff url(http://website.com/wp-content/uploads/2012/07/right-shadow.png) repeat-y right top, url(http://website.com/wp-content/uploads/2012/07/left-shadow.png) repeat-y left top;}
It does not work - both images do NOT appear
I also tried this:
body {
background-image: url(http://website.com/wp-content/uploads/2012/07/right-shadow.png), (http://website.com/wp-content/uploads/2012/07/left-shadow.png);
background-repeat: repeat-y right top, repeat-y left top;
}
This also does not work - both images do NOT appear
How can I get this to work exactly as it does with the Modest Theme by Elegant themes?
Thanks for reading.
I think you can use Multiple Backgrounds for your solution.
The background property has been overhauled to allow for multiple backgrounds in CSS3.
CSS
body {
background: url(http://www.elegantthemes.com/preview/Modest/wp-content/themes/Modest/images/left-shadow.png) 0 0 repeat-y,
url(http://www.elegantthemes.com/preview/Modest/wp-content/themes/Modest/images/left-shadow.png)center right repeat-y;
}
I hope this will help you :- http://tinkerbin.com/Iw4yJ1H3
here's one way you could do it. Not using backgrounds as such. Although you could place the images as backgrounds on the divs or simply have them added as images within the divs. You could even do away with the divs and sinmply use images instead of the divs.
http://jsfiddle.net/6UEXc/
Hope that helps.