I have an image that is floated to the left that wraps text around it fine, however, I have a problem when a Ul and Li come into play. I wasn't quite sure how to explain this, so here is a picture:
code:
<div style="overflow:auto;">
<center>
<h2>Ultimath V. 1.6.1 Released</h2>
</center>
<img align="left" src="images/ultimath_quadratic_tablet_land.png">
<center>Many new features and updated features, such as:</center><br>
<ul margin-left="15px">
<li>Changed Search function to no longer bring you to homepage if not activated</li>
<li>Multiple UI Fixes and upgrades</li>
<li>Tablet specific layouts! (example to left)</li>
<li>All inputs now automatically accept numbers (no more fumbling with switching to number keyboard!)</li>
<li>Major Step by Step revamp! All solvers are now MUCH more specific!</li>
</ul>
</div>
<br>
<hr>
Thanks in advance!
WRONG:
<ul margin-left="15px">
CORRECT SYNTAX:
<ul style="margin-left: 15px">
Also try set up margin-right: 15px; for your image.
Instead of float: left, you should using display:inline-block.
Live Demo
Related
I am trying to get rid of unwanted space in a WordPress page. Here is the link to the page: http://lectorbookclub.com/current-conversations/. I'm trying to use CSS to fix it because I only have access to editing the CSS and HTML.
I used Firebug to gather this code:
<div id="content" role="main">
<article id="post-12581" class="post-12581 post type-post status-publish format- standard hentry category-fall-2013 category-uncategorized tag-end-of-year-post clear-fix">
<div class="featured-image">
<a href="http://lectorbookclub.com/2014/05/01/eng-202b-summary-post/" title="Permalink to Eng 202B Summary Post" rel="bookmark">
<img src="http://s0.wp.com/wp-content/themes/pub/oxygen/images/archive-thumbnail-placeholder.gif?m=1335191815g" alt="" class="attachment-archive-thumbnail" scale="0"/>
</a>
</div>
<header class="entry-header">
<h1 class="entry-title">
<div class="entry-meta">
<span class="entry-date">
<span class="byline">
<span class="comments-link">
<span class="edit-link">
</div>
</header>
<div class="entry-summary clear-fix">
Read Article →
You have a few options depending on how you want to go about this.
My first suggestion is simple just based off of what you have shared. (that said this does not mean this is the only way, or the best way or the clean way)
You may want to adjust your CSS to move the individual entries a few pixels from the right by adding a right margin.
.entry-summary {
margin-right: 45px;
}
Or you may want to add a left margin to .entry-header
.entry-header {
margin-left: 15px;
}
There are various other options as well. Hope this helps.
(try to be more concise and direct in the future. ask your question with all needed details for others to understand so that you may receive an answer more quickly and that others may feel more motivated to help!)
In your CSS stylesheet:
#page {max-width: 960px; }
Substitute 960px for whatever size you want it to be.
Okay, I realized it had to do with the article tag (which wraps around the date and the entries). I played around with the width of the article tag in CSS and this seemed to be the answer. Thank you all so much for looking at this problem!
I would consider making the text in entry-header align right.
header.entry-header { text-align: right; }
I don't know how else header.entry-header is used in your theme, but on the page you provided, that would probably produce the alignment you are looking for.
I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}
Hey guys I'm trying to implement Paper unfoding effect in a webpage of a wesite I'm developing. Im using the pfold jquery plugin, but I want a text to appear on hover and I did it many times but doesnt work. Here is my code:
HTML:
<div class="uc-container">
<div class="uc-initial-content">
<!--<img src="fm.png" alt="FM" /> -->
<img src="fm.png" alt="Fm" title="Fm" id="hoverFm">
<p class="textSponsor">92.7 BIG FM</p>
<span class="icon-eye"></span>
</div>
<div class="uc-final-content">
<img src="fm.png" alt="FM" />
<div class="title"><h4>FM</h4> </div>
<span class="icon-cancel"></span>
</div>
</div>
And This is the CSS For same:
#hoverFm .textSponsor{
position: relative;
margin-right: auto;
margin-left: auto;
visibility: hidden;
}
#hoverFm:hover .textSponsor{
visibility: visible;
}
When Im doing this the text just simply comes below my picture . I'm not getting where I'm going wrong. And when I'm creating a new div which contains only <img> and <p> tag then my image is getting small (I guess its because of the code I wrote for resizing and paper folding effect which is gettin hampered due to this and then also text on hover is not coming)
If you guys wanna see what actually I'm making :
The link to the demo site is: http://tympanus.net/Development/PFold/index3.html
and the code for same is available at link: http://tympanus.net/codrops/2012/10/17/pfold-paper-like-unfolding-effect/comment-page-2/#comment-450779
And the github link for code is: https://github.com/codrops/PFold
I tried it a lot to figure out but was unable so please help someone. It will really be appreciated. Thanks in Advance!!
#hoverFm:hover .textSponsor
This does never really happen, because .textSponsor is not a child of #hoverGM, it is a sibling. You need to use the next selector, which is +:
#hoverFm:hover + .textSponsor
You could also change the structure to
<div class="uc-initial-content" id="hoverFm">
<img src="fm.png" alt="Fm" title="Fm">
<p class="textSponsor">92.7 BIG FM</p>
Then your original selector would work because now it really is a child.
Problem:
A button group I've created using bootstrap css appears cut off on the left, as you can see below.
Code:
I have the following HTML logic:
<div class="span5">
<div class="row show-grid">
<div class="btn-group>
<button class="btn dropdown-toggle hidden-desktop visible-phone btn-warning" data-toggle="dropdown">show info <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><div id="address"><?php echo anchor("mycontroller/method1/".$objectid,'addresses'); ?></div></li>
<li><div id="logs"><?php echo anchor("mycontroller/method2/",'logs'); ?></div></li>
<li><div id="status"><?php echo anchor("mycontroller/method3/",'status'); ?></div></li>
</ul>
</div>
<br/>
<div class="span2"><?php echo anchor("mycontroller/method4/","Back to List")?></div>
</div><!-- end class row show-grid-->
<br/>
</div>
What I've Tried So Far:
I've been using Firefox's Inspect tool to try to find the differences between the top button and the bottom, but I don't know what property I should be looking for. I've tried modifying properties like:
padding-left
padding-right
margin-left
margin-right
I've also tried to reduce the number of classes applied to the button so that I only had:
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
But that didn't resolve the problem. Can someone point me in the right direction? Perhaps by naming the types of properties I should be tracking down? It's probably a CSS specificity problem... because I haven't modified any of the bootstrap stuff.
Thanks
Why are you using a button group for buttons that aren't grouped together? The reason it's "cut off" is because button groups are supposed to be merged together.
Regardless, it's displayed like that because the inner borders of the buttons don't have rounded edges. You can fix it by manually applying the border radius:
border-top-left-radius: 4px; border-bottom-left-radius: 4px
Give this CSS
.btn{
display:block;
padding:XXpx;
margin:XXpx;
height:XXpx;
width:XXpx;
}
this is a hack fix but on the containing div that is wrapped around the button - you may simply have
overflow:hidden
Inspect in chrome with firebug and go up and you will most likely see this.. Bootstrap hides data that overflows the columns.
OMG,
the answer is:
to change from:
<div class="btn-group>
to:
<div class="btn-group">
You forgot the "
You can see the live fix here: http://jsfiddle.net/kCsEs/
Following solved my problem
.btn {
width:auto !important;
}
I feel like a moron having to ask this, but I have always evaded CSS at all costs, and as I now find myself needing it again, I have been scavenging Google for an example with no luck.
Basically I have icons specific to each category, and would like to create a horizontal nav bar in CSS/HTML using these, but also displaying a text link under them as well. I have found snippets for doing one or the other, but every time I try and combine the two together, the entire page seems to breakdown.
Can anyone provide an example of how this can be done? If it helps, it would basically look like...
[-IMAGE-] [-IMAGE-] [-IMAGE-]
[-TEXT-] [-TEXT-] [-TEXT-]
The effect can be easily get through background-position in CSS with proper padding-top applied to the li elements:
background-position: top;
padding-top: 50px; /* Height of image */
Here is an example fiddle.
Update:
Here is the more descriptive fiddle with different images on different li elements.
http://jsfiddle.net/LajUZ/2/
HTML:
<ul class="nav">
<li class="navitem">
<div class="icon">
[icon]
</div>
<div class="text">
[text]
</div>
</li>
<li class="navitem">
<div class="icon">
[icon]
</div>
<div class="text">
[text]
</div>
</li>
</ul>
CSS:
.navitem
{
float: left;
}