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/
Related
I will explain with a little example here:
I have html page with some content already, and without modifying that content I want to insert some message (say inserting an image) in middle of the already existing content by leaving the div at top.
Take look at this picture, which is before doing some css work:
http://i.stack.imgur.com/uhJbx.png
Description: Image inserted in the content at the top of the content with div is at the top
And now after applying the css, I want to place some where in between the content, like this:
http://i.stack.imgur.com/67YFf.png
Description: Image inserted with css aligned in middle of the content but div is at the top
HTML:
<div class="myimg">
<img src=http://s14.postimg.org/miss2r3xt/html_css.jpg />
</div>
<p>Some paragraph </p>
<strong>What is HTML?</strong>
<strong>What is CSS?</strong>
<p>Some paragraph</p>
CSS:
.myimg {
position: absolute;
}
Here is link for a simple example, that I am trying to modify at jsfiddle.
Let me know if you guys can help!!!
For adding some elements with CSS, take a look at :after et :before.
For example, you can add this line to your css
strong:before{
content:url('http://s14.postimg.org/miss2r3xt/html_css.jpg');
}
If you accept jQuery solution, this would place the image after the first paragraph in the content:
$(document).ready(function(){
var theImg = $('.myimg').remove();
$('p').first().after(theImg);
});
If you have a marker in your content, then use that marker instead of $('p').first().
Your fidlle, updated with this approach:
http://jsfiddle.net/ZjCfp/9/
Try out below css to position the image with out modifying the html content:
.myimg {
margin-top: 100px;
}
div.myimg + p {
position: absolute;
top: 0px;
left: 0px;
}
Have a look at the working demo here: Demo
I have a page where I'm trying to use a lot of CSS.
I have a main wrapper class with background and everything and then a content class within that. Within the content class I then have IDs for various articles.
Within some of these articles I'd like images aligned to the right, but I don't seem to be able to do this.
From what I know
<div class="article">
In 1904, Sunderland's management was embroiled in a payment scandaat he would repay the money after his benthe money, claiming it had been a gift. An investigation conducted by the as part of a "re-signing/win/draw bonus", which violated the Association's rules. Sunderland were fined £250 (£20 thousand today), and six directors were suspended for two and a half years for not showing a true record of the club's
<div class="picha">
<img src="image/test.png">
</div>
</a>
</div>
should apply picha (i.e. align right, set a border) to the image...but it doesn't.
How is this handled?
Or better yet is there a way to set rules for images within a ID that isn't specifically for images? i.e. text is handled one way but all images posted in that id get special treatment.
edit- so updated attempt:
css has:
div.article {
border: solid;
background-color:red;
}
div.article img{
border: 10px solid #f1f1f1;
float: right;
}
and page has:
<div class="article">
<a name="article1">
random text
<img src="image/test.png">
</a>
</div>
The image shows and alligns right but is below the text and outside the text's box, I'd like it quite neatly inside the article box but to the right.
If I add float left to the text then the article box stretches but the image remains below the text.
edit2- and I'm a stupid newbie. Had to have the image before the text. Done!
If you want to access this nested div, you can either do as #Aquillo said.
Or do this:
.article .picha
{
/*Your css*/
}
and
.article .picha img
{
/*Your img css*/
}
Why don't you use?:
div.article {
// This applies to all content
}
div.article img {
// This applies to the image
}
div.article span {
// This applies to everything inside a span
}
You could write your text inside a span like this:
<div class='article'>
<img src='' />
<span>My text</span>
</div>
This way you don't need a wrapping div for you image.
I have a box which displays the contents of a chosen file using jquery.
The code for the box is
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
I want the close-lightbox div to be always at the bottom of the box.So the css for it is
#close-lightbox{color:red;position:absolute;bottom:0;padding-left:30%;}
Div lightbox has overflow:auto.
Now, what happens is that if the lightbox-content is not big and it fits the fixed size of lightbox then there is no scrolling and the close-ligthbox does appear at the bottom as I wanted.
But if the lightbox-content is big and doesn't fit the fixed size of lightbox then there is scrolling but the close-lightbox appears at the bottom of the lightbox BEFORE that scrolls down which means it appears on the middle of the lightbox-content.
Any suggestions how I can fix that?
.lightbox{
height:auto;
overflow:hidden;
}
.lightbox-content{
height:270px;
overflow:auto;
}
Change the height of this based on your needs of your lightbox.
You could wrap lightbox in its own wrapper, and position the close-lightbox relative to it.
HTML
<div class="lightbox-wrapper">
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
</div>
CSS
.lightbox-wrapper {
position: relative;
}
#close-lightbox {
position: absolute;
bottom: 5px;
left: 30%;
}
Take a look at this fiddle - http://jsfiddle.net/joplomacedo/4chu6/
EDIT Ohgodwhy's solution is actually cleaner if you're able to move lightbox's overflow:auto to lightbox-content -> While I was at it, I made fiddle with his solution - http://jsfiddle.net/joplomacedo/4chu6/2/
I'm trying to convert my site from using tables to just using css and divs but I'm running into a lot of problems with trying to figure how to exactly do it, I've been looking for tutorials on centering a site with css and how to put divs side by side but I can't really find one that does both and I keep getting confused by how to exactly achieve this, I asked around a bit and I got told to use absolute positioning but still I can't really wrap my head around this.
So basically how would I arrange the 2 central div side by side while keeping the whole thing centered in the browser? The following image is the layout I'm trying to achieve:
the blue boxes are eventual other stuff I might want to put in them, such as a blog requiring again the use of side by side divs.
right now I have the following layout:
<div id="wrap">
<div id="banner"> banner </div>
<div id="navbar"> navigation links </div>
<div id="body"> stuff </div>
<div id="footer"> stuff </div>
</div>
General idea: http://jsfiddle.net/JjbJE/
A little specific but provide you a great adventure to learn HTML | CSS : http://jsfiddle.net/JjbJE/3/
float:left|right this property does the side by side trick
clear:both this property clear away the float property
Other things are pretty easy to learn, just head to W3Schools
First you need a main container to center everything. Then two separate divs. See the HTML below:
<div id="main">
<div class="box">Left Box</div>
<div class="box">Right Box</div>
<div class="clear"></div>
</div>
Here is the CSS you will need:
#main{
width:960px;
margin:0 auto;
}
.box{
width:450px;
float:left;
border:solid 1px #000000;
}
.clear{
clear:both;
}
Hope that helps.
Here's my general overview on converting to a CSS based layout - if you have a table based layout, this is a good plan - in the end you can do more, Google will like you more, and it's much cooler.
My strategy is to look at all the groups of things on your page. Whatever needs to go into a group together, put inside a div. Assign this div a class and/or id to style it. If the divs are grouped, put them together in a div too.
In your case, you have two chunks of content to group inside of divs. Style them to be the size and shape you like, background, border, whatever is needed. Then group them together in an additional div, and center it. This and the rest of the page content can go inside a container div, which will determine the width of the page, how it's aligned, etc.
One possibility is to have a centered wrapper class and contain the divisons inside of that:
<div class="wrapper">
<header></header>
<div id="middle">
<div class="main-article clearfix"></div>
<aside></aside>
</div>
<footer></footer>
</div>
Then to style, center the wrapper, float the aside and main-article:
.wrapper { width: 1024px; margin: 0 auto; /* the auto centers it */ }
header, footer, aside, { display: block; }
.main-article { width: 50%; float: right; }
aside { width: 50%; float: left; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
Note: This is untested, and uses the clearfix from the HTML5 Boilerplate.
Update 01.22.2014: This "Holy Grail Layout" has ben solved by Flexbox. Check out Solved By Flexbox for more information on recreating this layout (and many more).
I'm fairly new to html and all that jazz so I might be misusing certain code.
I want to put the G+1 button and facebook like button next to each other and also centered right under the image on my main page.
Here is my site www.entitee.org
And the appropriate block of code (I hope)
<div class="socialmedia">
<div style="float:left; padding-left:400px;">
<div id="gplus"></div><g:plusone count="false"></g:plusone>
<div style="width:47px;overflow:hidden;float:right;">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=137562953001123&xfbml=1"></script>
<fb:like layout="button_count" href="http://www.facebook.com/pages/ENTiTEE/162658567144308" send="true" width="225" show_faces="false" action="like" font=""></fb:like>
</div>
</div>
</div>
I'm not sure if I'm misusing the div style or div align items but I can't seem to get it with padding or anything.
Thank you!
I use G+1 medium size, and I added this code in css.
It aligns facebook, twiter and google +1 on same line.
#___plusone_0, #___plusone_0 iframe {
display:inline !important;
height:23px !important;
}
I looked at the code on your site and here are some steps you could take and would get you in the right direction:
remove the float:left from the style attribute for the google plus button
add this to BOTH the facebook and google plus div's style tag display:inline-block;
your div that has the class set to class="socialmedia" has an inner div that has the width set to 60 px make it bigger maybe 100 px
Those steps should get them together on the same line. As always test your site in more then one browser. Good luck!
Use the "medium" size Google +1 button, and add this to your css:
div#___plusone_0 {
vertical-align: bottom !important;
}
div.social{
width:147px;
height:23px;
float:right;
vertical-align:top !important;
}
try to change the DIV tags to SPAN and probably will since span tags can be inline
more info: https://developers.google.com/+/web/+1button/
Your link and the code posted don't match up so I am going off the link provided.
You have both your +1 button and facebook button jammed into a div that is 60px. You need a width of at least 38p + 47px = 85px to fit both. Since there isn't enough room for the floated facebook div it falls beneath.
In conclusion increase the containing divs width. Which would be this div below:
<div style="float:left; width:60px; float:left; padding-left:400px;">
PS: Hi r/trees
css:
.social
{
display:inline-block;
font-size: 1px; /*very important for G+ button*/
/*vertical-align:middle*/
}