I've been working on my first child theme for WordPress for a couple of days and have pretty much got everything working as expected apart from one thing.
[http://stevefleming.co.uk/blog/][1]
I've tested in Fire Fox and Chrome and the right hand 'widget' div is being pushed
below. It's not happening on other pages and yes, I did customize the page. I've looked at a working one and then this page and can't see any obvious difference.
Hope somebody can help before I lose my mind.
Thanks
Steve
Just put your #sidebar before your #main in the markup, so that its float affects the main section.
<div id="sidebar">
</div>
<!-- /#sidebar -->
<div id="main">
</div>
<!-- /#main -->
Add "float: left" to your main so that it should look like:
#main {
width: 620px;
float: left;
}
Related
I'm trying to add in a sponsor logo into the top right corner of the Navigation Pane of my website using CSS.
Here is my website link: www.headlightshortfilm.com.au
Does anyone know how to do this using CSS? Squarespace can't help me so I was about to pay a Squarespace specialist to do it but I feel it must be pretty simple. I thought i'd try here first :)
Add this Div after your <div id="topNav" style="padding-right: 0px;"></div>
<div class="sponsored-logo">
<img src="imageURL">
</div>
Add this class on your stylesheet
.sponsored-logo {
float: right;
}
Add float: left; to your #logo and #topNav
Hope this helps.
I'm trying to figure out how to add an image between blog posts (i.e., a graphic basic divider line, not a border) on my website: www.sacspartans.org
I know how to create and div, add the image, etc. But I don't know what file to make the modification to. Does anybody know?
I'm using Toolbox, the bare bones starter theme.
Any help would be much appreciated.
EDIT: I opened up the index file... but I'm not sure where to add my div.
Add the div right above <?php endwhile; ?>
Make it so that the three divs are like this:
<div class="div">
//blogpost 1
</div>
<div class="div">
//pic
</div>
<div class="div">
//blogpost 2
</div>
CSS
.div {
float: left;
display: inline;
//rest of css
}
I'm looking for a way to make sure the height of a scrollable, fixed element adapts to fit all the whitespace down until the footer.
Please see the following fiddle which is the layout I'm working on.
Been stuck on this for 2 days, it's about time to move on.
Better to see the fiddle in firefox, sidebar scrollbar not scrolling in chrome for some reason but that's a different issue.
<header></header>
<div id="platformContainer">
<section id="platformContent">
<div id="platformBody">
<ul class="mainList">
...
</ul>
</div>
</section>
<section id="toolBarContainer">
<div id="toolBarContent">
<ul id="toolBarList">
...
</ul>
</div>
</section>
<footer></footer>
Assuming you want the toolBarList container 100% height - this is what you already have. The sidebar is 100% height. The list within, however, is only set at 200px:
#platformContainer #toolBarContainer #toolBarContent ul#toolBarList{
height: 200px;
...
}
Changing that to height:100%; makes it fill the entire height of the document. The problem now is accounting for the header and footer. This is a common question, however, and I've answered it myself here: https://stackoverflow.com/a/14892331/1317805 as have many other people. You'll need to ensure that the header and footer aren't hidden by or covering the content area.
I think you might need javascript to do this – 9edge
Not at all!
Also, please note when using section tags:
Use of the element is not to be thought of as outlining content that needs to be styled visually in a particular way. If this is the case the author may be best advised to just use a semantically neutral div.
Your #platformContent and #toolBarContainer styling may yield unexpected results.
http://www.w3.org/WAI/GL/wiki/Using_HTML5_section_elements
In fact, your styling of those sections can be completely replaced with:
#platformBody, #toolBarContent {
position:relative;
height:100%;
top: 70px;
width: 100%;
}
I have a problem using a clickable adverting skin as background of my Wordpress site. My site is this: http://www.tvindiretta.com. If you scroll down any page of my site you will see that the top of the background covers the content and mess all up... I think that I should add a white background in foreground. I really need your help, I'm a noob in CSS and programming.... I read about this parameters googling for...
display: block; ??
text-indent: px; ??
overflow: hidden; ??
z-index:22 ???
...but I don't know how to solve this problem... Here is my Wordpress theme CSS file http://www.tvindiretta.com/wp-content/themes/videoplus/style.css Thanks a LOT for any help in advance
P.S. This site: IMPRONTALAQUILA.ORG in certain pages shows the same ad and also other similar skins without any bug or problem... how can I get the same result? I want the background to be fixed so that users see it browsing any part of the page
Remove fixed from
background: white url(http://www.affiliago.it/accounts/default1/banners/SKIN_BAKECA.jpg) no-repeat fixed;
In your body style.
UPDATE:
Add in your css:
.myClass{
background-color:white;
width:994px;
margin:0 auto;
}
And add those styles to:
<div class="clear"> to <div class="clear myClass">
<nav> to <nav class="myClass">
<div class="wrap"> to <div class="wrap myClass">
I am trying to get a few lines of text under my li menu. I want it to float right with padding. Also, for some reason it is way to far down below my menu and too far right. This happened when I tried just using
<div style="float: right;">
I am going to put it in my wordpress header.php
I am not an HTML or CSS coder. I use wordpress themes and I pull out CSS that I like from the web and then I change it up using firebug. This annmariedavis.com comes from a child theme that I modified.
add <div style="float: right; width: 323px;">some text</div> before </nav> or right after it, depends on where you want text to be located above or below line