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.
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;
}
I am having an issue with my webpage.
My div tags on the right side are overlapping onto my center column... I have set a min-width to my parent div tag but it did nothing to help elevate the problem.
Plus my navigation bar is giving me a little issue.. ENGAGEMENT will fall under the ABOUT tab when I re-size my web page. I have display: block; and display: inline; set in my CSS. It works fine just the re-sizing is hurting my web-page..
My layout is basic..
<body>
<div style="width:100%; margin-top: -18px; clear: both;">
<div style="width: 100%; height: 100px; background-color: white;">
<p style="padding-top: 3%;font-size:30px; font"><i>Welcome</i></p>
</div>
<div style="width: 100%; display: block; overflow: hidden; ">
<div><li>About</li></div>
<div><li>Books</li></div>
<div><li>Electronics</li></div>
<div><li>Apparel</li></div>
<div><li>Activities</li></div>
<div><li>Engagement</li></div>
</div>
<div style="float: left; background-color: white; margin-left: 80px;">
</div>
<div id="left-col" style="clear: left;">
</div>
<div id="central-col">
</div>
<div id="right-col" style="text-align: center; clear: right; ">
</div>
<div id="footer"><p style="text-align: center;">KNOWLEDGE IS POWER</p> </div>
</div>
</body>
It would be better if you have given full code (may be on jsfiddle) because it is hard to understand what these divs are doing by looking at your code. (You have made so many of them.)
For your solution, I think you have to remove
width: 100%
from second and third div.
You have set margin-left to 80px, so whenever you resize the window, it will always have a margin of 80px from left.
Also I want to know the use of
overflow: hidden;
in your code.
I just started to design a small Webpage to present some designs.
It's a page with 2 columns, with a picture and some text for each.
The problem I have right now: when I add more text to one column, the picture of the other column moves.
Check out my fiddle:
http://jsfiddle.net/JannikS/tMY57
My HTML markup:
<div id="designrow">
<div class="design">
<img src="http://www.webdesign-is-art.com/wp-content/uploads/2008/05/goodbytes-webdesign.jpg" />
<h3>Title </h3>
<p>Short description of our design..</p>
</div>
<div class="design">
<img src="http://www.webdesign-is-art.com/wp-content/uploads/2008/05/goodbytes-webdesign.jpg" />
<h3>Title </h3>
<p>Short description of our design..<br /> but with some more text!</p>
</div>
</div>
and CSS:
.designrow {
float: left; }
.design {
width: 300px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
display: inline-block;
}
.design img{
width: 100%;
height: 100%;
}
you're giving your columns display:inline-block, remove that and float:left instead
heres the fiddle: http://jsfiddle.net/tMY57/3/
I'm working on the "About Us" header on this page
Basically the little div there with the images and blue "About Us" block was an image, but for SEO purposes, I'm now replacing it with a structure that can use an <h1>...</h1> tag.
As you can see, the layout of the images and header tag works perfectly, but it's pushed the right column of the page in under the content.
I've checked, and double-checked and it looks like all floats are properly contained (unless I missed something) so I'm not sure how to fix this.
Can anyone tell me what I'm doing wrong here?
The HTML:
<div class="page_header">
<div>
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-1.jpg">
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-2.jpg" alt="" />
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-3.jpg" alt="" />
<h1>About Us</h1>
</div>
</div>
The CSS:
/* Page Headers
----------------------------*/
.page_header div {
overflow: hidden;
min-width: 665px;
}
.page_header img, .page_header h1 {
float: left;
margin: 10px 10px 0 0;
}
.page_header img:nth-child(2) {
clear:right;
}
.page_header h1.about-us {
line-height: 90px;
background: #00f;
color: #fff;
padding: 0 42px;
}
Thanks in advance!
Hey Ortund Actually wrote a HTML markup in bit of improper way so you should write like this :-
<div id="main">
<div id="content">
<div id="sidebar-primary">
</div>
see the attached image its working fine through this method :-
That is because your <div id="sidebar-parimary"> should reside inside the <div id="main"> element.
Currently it is:
<div id="main">
<div id="content">...</div>
</div>
<div id="sidebar-primary">..</div>
it should be:
<div id="main">
<div id="content">...</div>
<div id="sidebar-primary">..</div>
</div>
I want to create a simple box with a header bar containing a title and some tool buttons. I have the following markup:
<div style="float:left">
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: left; background-color:green;">title</div>
<div style="float: right; background-color:yellow;">toolbar</div>
</div>
<div style="clear: both; width: 200px; background-color: red;">content</div>
</div>
This renders fine in Firefox and Chrome:
http://www.boplicity.nl/images/firefox.jpg
However IE7 totally messes up and puts the right floated element to the right of the page:
http://www.boplicity.nl/images/ie7.jpg
Can this be fixed?
Specify width in outermost div.
If that width in your content div means this is the total width of your box, simply add it to the outermost div, and (optionally) remove it from content, like this:
<div style="float:left; width: 200px;">
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: left; background-color:green;">title</div>
<div style="float: right; background-color:yellow;">toolbar</div>
</div>
<div style="clear: both; background-color: red;">content</div>
</div>
This is just a quick answer, so I hold my hands up if it doesn't quite work. I think Marko's solution will probably work if you just add min-width rather than width. If you are trying to cater for ie6 as well, you may need to use a hack, as min width is not supported by ie6 and it's descendants.
So this should work with IE7 and other modern browers. Set the min-width to whatever is appropriate.
<div style="float:left; min-width: 200px;">
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: left; background-color:green;">title</div>
<div style="float: right; background-color:yellow;">toolbar</div>
</div>
<div style="clear: both; background-color: red;">content</div>
</div>
I fixed it using jQuery to emulate the behaviour of the non-IE browsers:
// IE fix for div widths - size header to width of content
if (!$.support.cssFloat) {
$("div:has(.boxheader) > table").each(function () {
$(this).parent().width($(this).width());
});
}
Try putting position:relative; to parent-element and to the child-element. It solved the problem for me.
Got to know recently that the right floated elements need to be appended with the divs before the other elements. This is the easiest fix without adding a line of change.
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: right; background-color:green;">title</div>
<div style="float: left; background-color:yellow;">toolbar</div>
</div>
Make this <div style="background-color:blue; padding: 1px; height: 20px;> the parent of the 2 floating divs also clear:all