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
Related
I am facing with a problem that my top menu overlaps the body. When actually menu must be placed above body.
I've already tried display: block; but it didn't help
Can you look trough it please ?
Here my Demo
Okay, try this. Give the menu div
style="display:table;"
and hope it will solve your issue. Before it doesnot assume any space for div itself, but only for the content and the main div occupies the space right from the top.
Here is the fiddle. I have given there inline css. But I suggest to define a class for menu and put the css in there.
Have you created a container div for the entire page? And then have a background div and a separate menu div?
<div id="page_container">
<div id="background"> Background code
<div id="menu">Menu code
</div>
<div id="body_content">Content in body code
</div>
</div>
</div>
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'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;
}
I am working with WordPress and I am trying to modify my template so that on my blog pages. I have a menu on the right hand side of the page while the blog content is on the left. The problem I am having is that all the space under the menu <div> is wasted and I would like to have the blog content wrap/flow around the menu <div>. Normally I would float the menu <div> to the right, however the WordPress engine outputs this <div> after the blog content so I am not sure how to float it to the upper right corner of the page.
I have created a JSFiddle example to illustrate.
You can use a short bit of JavaScript to move the menu as necessary. See the JSFiddle I forked from yours.
Essentially I modified the HTML to add ids to the menu and the blog content, something like this:
<div id="blog">
<p>...</p>
</div>
<div id="menu">
...
</div>
Then I styled them like so in CSS. Note that the menu has an explicit width but the blog content itself does not.
#blog { }
#menu {
float: right;
width: 400px;
}
Then I used a quick bit of JQuery to move the menu into the blog so that it can float right and the text will wrap around it:
$('#blog').prepend($('#menu').remove());
Essentially what the JavaScript does is it removes the menu from the dom and then inserts it as the first child in #blog.
You need to set float of menu to right and put it on top of the post div.
For example, the CSS should be like this:
#post {width: 500px;}
#menu {
float: right;
width: 250px;
height: 100px;
color: #6666FF;
border: solid 1px #333;
}
And HTML:
<div id="post">
<div id="menu">lorep ipsum</div>
</div>
You can wrap text around a div like you would do with an image e.g: http://jsfiddle.net/Nbpen/
I've been stuck on a float issue for a little while so I am hoping the community can help me again. I have a new webform here. As usual it looks fine in everything but IE7 (or IE8 in compatibility).
For some reason some of the containers are ending up with the form field on a new line below the form text. CSS is not my strong point, otherwise I'd be able to fix this I am sure. Can anyone tell me what I am missing here?
I tried adding float: left to the form text but that ended up with a whole other mess.
Try to small change markup: place items with a float before items without it (from the same row). It should help.
I know it's been a long time since this was posted, but I found a solution that I like for this. The gist is using 'expression' tag in your CSS for IE7 only to move the floated element to be the first element of the parent in the DOM. It will be semantically correct for all other browsers, but for IE7 we modify the DOM to move the floated element.
In my case, I have:
<div>
<h1></h1>...<p>any other content...</p>
<small class="pull-right"></small>
</div>
In my CSS for pull-right, I use:
.pull-right {
float:right;
*zoom: ~"expression( this.runtimeStyle.zoom='1',parentNode.insertBefore( this,parentNode.firstChild ))";
}
The result is that IE7 moves my <small> to be the first element of <div> but all other browsers leave the markup alone.
This might not work for everyone. Technically, it is modifying the markup but only in the DOM for IE7 and it's also a javascript solution.
Also, I understand there may be some performance issues with expression (it's slow), so perhaps it's not ideal there are a lot of floats like this. In my case, it worked well and allowed me to keep semantically correct HTML.
If you float your .formText left, float your span.required left, and then float your inputs left as well you should be able to line them up on the same line.
I'd modify your markup a bit. your <span class="formText"> should really be a <label>
For example:
<P class=formRow>
<label for="FirstName">First Name<SPAN style="FLOAT: left" class=required>*</SPAN></label>
<INPUT id=FirstName class=formTextbox name=FirstName>
</P>
and your css would be something like this:
.formRow {
clear: both;
}
.formRow label {
float: left;
width: 150px;
}
.formRow input {
float: left;
}
You could try to make the span tags you have for the text a fixed width, float them left, and do the same for the input field you want to correspond with. I'd also recommend using a label tag instead of a span tag on forms. No real solid reason for it, it's just that a label was meant for exactly what you have the span tag doing.
What you want to do is add a clear:both as the last sibling of your floated elements.
So something like:
<div style="float:left;">
<!-- children of div here -->
</div>
<div style="clear:both;">
<!-- leave empty -->
</div>