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;
}
Related
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.
I want my code to do what it is doing in this snippet but on my browser it's displayed as in the picture. I think it is flexbox causing this issue. Anyone has any idea why this could be and how to fix it?
I have checked whether if it is anything on other classes but this div is completely separate from the other divs and their classes
.activity-snippets {
display: flex;
}
.activity-post-link {
height: 215px;
width: 33.33333333%;
padding-right: 12px;
padding-left: 12px;
flex-grow: 0;
}
.activity-post-link img {
max-width: 100%;
}
.activity-post-link a {
text-decoration: none;
}
<div class="activity-snippets">
<div class="activity-post-link">
<a>
<img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
<h2>
My Girl's Cave for $55
</h2>
</a>
</div>
<div class="activity-post-link">
<a>
<img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
<h2>
Turning a French Door Into a Shower Wall.
</h2>
</a>
</div>
<div class="activity-post-link">
<a>
<img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
<h2>
LOVE SHELF
</h2>
</a>
</div>
</div>
If the snippet looks good but your actual full code doesn't, then there must be something else in your code preventing the text to wrap.
Looks like your flex items are being sized correctly but your text is overflowing. Check if there's some white-space: nowrap; being applied to those h2s anywhere in your full code.
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
I am trying to style the page http://techno-french.com/french-news-room and for the life of me, I cannot figure out why the H1 heading,
Learn French Online Free with Mots de L’actu
is partly obscured by the right floated div above it. I have tried putting 2em of bottom margin on the Div above, and then tried putting top margin on the Div containing the Heading. It works fine in Dreamweaver outside of WordPress, so I suspect the CSS is right, but inside of WordPress, the heading slips under the Div above it. I'm not expert, but this seems to be coded correctly:
Here's the code:
<div style="float: left; width:360px; height:467px;">
<h2 style="text-align: center;">Top Stories: Le Progres</h2>
[WordPress shortcode for an advanced iFrame]
</div>
<div style="float: right; width:517px; height:560px; margin-bottom: 2em;">
<h2>Funny Helps Learning</h2>
[WordPress shortcode for an advanced iFrame}
</div>
<div style="float: left; clear: both;">
<h1 style="text-align: center; color: #0b00dd;">Learn French Online
Free with Mots de L'actu
</h1>
TEXT
</div>
Wrap you left and right float div's into another div and add clearfix to it. It should work fine.
<div id="wrapper" class="clearfix">
<div style="float: left; width:360px; height:467px;">
<h2 style="text-align: center;">Top Stories: Le Progres</h2>
[Wordpress shortcode for an advanced iFrame]
</div>
<div style="float: right; width:517px; height:560px; margin-bottom: 2em;">
<h2>Funny Helps Learning</h2>
[Wordpress shortcode for an advanced iFrame}
</div>
</div>
<div style="float: left; clear: both;">
<h1 style="text-align: center; color: #0b00dd;">Learn French Online
Free with Mots de L'actu</h1>
TEXT
</div>
CSS:
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
<div id="ai-div-news7"> is set to height 560px as is its parent div, but above #ai-div-news7 there is an <h2> that is forcing #ai-div-news7 down.
Please view the console for that website and also visit validator.w3.org.
Changing <div style="float: right; width:517px; height:560px; margin-bottom: 2em;"> to <div style="float: right; width:517px; margin-bottom: 2em;"> fixes the problem.
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?