I have a WordPress site, and the comment section nested itself inside the content section. I'm trying to get it to drop under. I think it has to do with the way I've floated the content items.
Currently, in page sectioni section, I have something like this:
<div class="guts">
<div class="column-left">
<p>copy</p>
</div>
<div class="column-right">
[gallery]
</div>
</div>
with the css looking like this
.column-left{
float:left;
display: block;
width: 35%;
margin-right:5px;
}
.column-right{
float: right;
width: 65%;
margin-right:-5px;
}
.guts{
margin: -13px 15px;
display:block;
}
I tried to break it out using the php... but that isn't my forte and I was not successful, it seems like this could be done with proper css or php. I'd be open to either option.
Can see the site live here
When using floats you need to ensure you use clear:both afterwards.
Try this
<div class="guts">
<div class="column-left">
<p>copy</p>
</div>
<div class="column-right">
[gallery]
</div>
<div style="clear:both"></div>
</div>
See here for more information.
p.s. don't use inline styles like I have, use a class instead.
Related
I have do research and cannot find the resolution on how to make the newsletter's block displayed as center position. I understand there have HTML code scripts and also its css.
I got some answer but well that not working, hope community give some help on this.
Please check the image where the newsletter block is at left(newsletter-block-not-center).
HTML codes im used:
<div style="background-color: #fff;">
<div class="container">
<div class="inner-container">
<div>
<br/>
<br/>
<br/>
<br/>
<h2 style="text-align: center;">Subscribe now and save more than everything!</h2>
<p style="text-align: center; font-size: 16px; color: #999; line-height: 23px;">Grab a fantastic saving when you subscribe now. It's not just a saving, great tips, free gitft and other secrets are awaiting you.</p>
<div class="newsletter-container">{{block type="newsletter/subscribe" template="newsletter/subscribe.phtml"}}</div>
</div>
</div>
</div>
</div>
And here is css update im attached on the existing css under path: /skin/frontend/ultimo/default/css and css file name is styles.css
Css updated (adding into it):
.class{ display:inline-block; text-align:center; float:center; }
and there have existing newsletter css which is available in this link:
http://myarttees.com/v1/skin/frontend/ultimo/default/css/styles.css
help me on how to make the newsletter centered. :(
I think the easiest solution is to give display:block by fixed width and then center it.
.newsletter-container {
/* display: inline-block; */
/* text-align: center; */
display: block;
width: 360px;
margin: 0 auto;
}
So, I have these two images. The HTML structure is like this:
<div class="buttonContainer">
<div class="innerButton">
<img src="...">
<p> Some text </p>
</div>
</div>
But as you can see, both containers have different heights (because of the length of the p content. I'm not a very experienced at CSS, so any help is welcome.
.innerButton{
min-height: /*set your height*/;
}
Hope this helps
Set height attribute to the <p> containing your text. But if the text is too long, it will overflow out of the <p>
Truncate your text: You can truncate your text using the following code.
<p id="greetings">
Hello universe!
</p>
CSS
#greetings
{ width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Then text will become
Hello univ…
A good question and one I encounter a lot.
Firstly you have two options that work well. Go the pure CSS route or use some jQuery. The latter being easier to implement and to be honest, overheads are not too bad either.
The reason I've not gone for using min-height is I am assuming you might want this working responsively where min-heights can be an annoyance. This method means you never need to specify heights explicitly which in my opinion is better.
1. Pure CSS (using display table)
.buttonGrouping.css{
display: table;
border-spacing: 20px;
}
.css .buttonContainer{
display: table-cell;
margin: 0 20px;
border: 1px solid #ccc;
}
HTML for CSS tables
<!--Example using CSS-->
<div class="buttonGrouping css">
<div class="buttonContainer">
<div class="innerButton">
<img src="http://placehold.it/350x150">
<p> Some text </p>
</div>
</div>
<div class="buttonContainer">
<div class="innerButton">
<img src="http://placehold.it/350x150">
<p> Some text </p>
<p> Another para </p>
</div>
</div>
</div>
2. jQuery (using matchHeight.js)
Note you I've included the matchHeight plugin in the live example at the bottom. The plugin can be found here.
CSS:
.buttonGrouping.jquery{
clear: both;
}
.jquery .buttonContainer{
float: left;
display: block;
border: 1px solid #ccc;
margin: 0 20px;
}
And initialize the script on the element...
$(".jquery .buttonContainer").matchHeight();
Please note the .jquery in the script is just a class i added to each example to separate them out.
Live examples
This code:
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div id="columns">
text
</div>
Is coded with this css:
#columns {
width: 200px;
float: left;
margin-left: 20px;
margin-right: 20px;
}
The problem is that if I put any text below the three columns created, it just adds another column! I want the footer to be below these columns, but I can only do this so far by setting this:
footer {
/*height: 50px;*/
text-align: center;
position:absolute;
bottom:0;
}
And this just makes the page longer, i.e. puts a huge gap between this content and the footer.
Any solutions?
Thanks
Elements are floated left making document flow modified. Document flow needs to be reset right before writing footer. It can be done by setting property clear:both for the footer (in fact just after .columns are finished).
A working jsfiddle is here.
CSS:
footer{
clear: both;
}
Suggestion (outside scope of question):
You should change id="columns" to class="columns" as in valid html markup, id's should be unique. (thanks michael)
try this
demo
css
*{
margin:0;
padding:0;
}
#columns {
width: 200px;
float: left;
margin-left: 20px;
margin-right: 20px;
background-color:red;
}
.clearfix{
clear:both;
}
footer {
/*height: 50px;*/
text-align: center;
position:absolute;
border:1px solid red;
}
html
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div class="clearfix"></div>
<footer>footer</footer>
When using any floated items, the default behavior is for them not to count towards other content in that area, so they'd appear to one side of other content.
Of course, if you want to prevent that, the clear property will essentially continue below any floated items on one (or either) side before it.
footer {
height: 50px;
clear: both; /* can also use `clear: left` here */
}
try after removeing bottom:0; and put below html code after third column
<div id='footer'>
<p>Footer Content</p>
</div>
You need to use the css clear for your problem
like clear :both for id/class of you div
text
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div style="clear:both"></div>
<footer>footer</footer>
How to make a div stop wrapping?
Set this style on your div. It works in Chrome and IE. I haven't tested other browsers.
overflow: auto;
Do you mean you want <div class="objectives"> to appear below <div class="icon">? If so, div.objectives { clear: left; } should do the trick.
Or do you want the entirety of <div class="objectives"> to appear alongside <div class="icon">? If so, div.objectives { float:left; } should make it happen. You may also need to specify a width on div.objectives. Alternatively, remove the float code and set both div.objectives and div.icon to { display: inline-block; vertical-align: top; }.
This works just edit the code and replace it with the code below
<div class="icon"><img align="left" alt="" src="/resource/uploads_scope/issues/090113/090113_pairedText_featuredSkills.png"></div>
<div style="overflow: auto;">
<h5>Featured Skills:</h5>
<p>Compare and contrast; vocabulary; shades of meaning.<br>
<strong>Other Key Skills: forming and supporting a claim, inference, author’s craft, key ideas.</strong></p>
</div>
<div style="clear:both;">
</div>
</div>
I need to make a menu that looks like this:
The upper entries need to have a right margin of (lets say) 20px.
Problem arises, when I add the sub-menus, especially like the red one with the «large Menu-Entry». The top menu needs to stay in place and all the sub-menus need to be centered under that top menu. But either the top-entry is enlarged (which makes the green part shift to the right) or the sub-entries aren't positioned at the center of the top-entry...
As the menu-entries are dynamic, I can't predict how wide they are and thus I can't apply any math.
Also - the sub-entries are only visible, if the user is on the according page (means - the green part only shows «Menu1» if the user is on the red page)
I «could» use some javascript to do it after the page loaded, but I'm trying to avoid that.
I tried all sorts of stuff, including negative margins and whatnot - but nothing seems to work... Any ideas?
[edit]
some html here - tried to fumble around like crazy with no results (except the one from Brad, but that one doesn't work with IE)
<div class="center">
<div class="menu-container">
<div class="menu-title">Title 1</div>
<div class="menu-items">
Testomat<br />
Yo, this is a long text
</div>
</div>
<div class="menu-container">
<div class="menu-title">Title 1</div>
<div class="menu-items">
Testomat<br />
Yo, this is a long text
</div>
</div>
</div>
CSS:
.menu-container{
width: 100px;
float: left;
}
.menu-items, .menu-title{
text-align: center;
}
If you don't care about IE: Have you tried using display:table-cell?
You could try something like:
<div class="menu-container">
<div class="menu-title">
Menu1
</div>
<div class="menu-items">
<div class="menu-item">large menu item</div>
<div class="menu-item">sub</div>
<div class="menu-item">sub</div>
</div>
</div>
With CSS:
.menu-container {
display : table;
width: 100px;
}
.menu-title, .menu-items {
display : table-cell;
width: 100%;
text-align: center;
}
Naturally, the content within the table-cells will wrap to 100px.
My first approach uses different html mark-up to your own, but gives the visual effect you you're looking for with, perhaps, a slight increase in semantics:
html:
<dl>
<dt>Title One</dt>
<dd>Testomat</dd>
<dd>Yo, this is a long text</dd>
</dl>
<dl>
<dt>Title Two</dt>
<dd>Testomat</dd>
<dd>Yo, this is a long text</dd>
</dl>
css:
dl {
width: 100px;
float: left;
position: relative;
text-align: center;
color: #0f0;
}
dl:nth-child(odd) {
color: #f00;
}
Demo of the above at JS Fiddle.
Edited, to add the following:
On looking at your posted mark-up, and applying the css:
.menu-container {
width: 100px;
float: left;
text-align: center;
overflow: hidden;
color: #0f0;
}
.menu-container:nth-child(odd) {
color: #f00;
}
JS Fiddle demo
I'm not sure why you're experiencing difficulties. Admittedly, at the moment, I'm only able to test on Chrome and IE 8 (Win XP), but the above seems to work. Am I missing something important in your problem description?