I have this html with a wordpress theme
div class="fullWidthDarkBlue">
<div class="hpRentArrears">
<section id="black-studio-tinymce-8" class="widgetcontainer widget_black_studio_tinymce"><div class="textwidget"><h2>Rent Arrears</h2>
<p>Does ...t on your behalf.</p>
</div>
</section>
</div>
<div class="clearer"></div>
</div>
<div id="footer">...
And some css like this:
#footer {
margin-top:0px;
border:none;
}
.fullWidthDarkBlue {
width:100%;
background:#365162;
padding-top:30px;
}
.hpRentArrears {
width:346px;
float:left;
background:#f2f1ed;
border:2px solid #a7cfdb;
}
.hpRentArrears p {
margin:0;
}
.clearer {
clear:both;
}
All works well except in FF there is a gap between the bottom of the dark blue box and the footer. I find I can remove this gap by putting a border onto the #footer - but I don't really want to
What's causing the gap and how do I get rid of it?
I tested your piece of code, its working fine in ff, safari and chrome. Must be the footer inside element that is throwing some margin.
Share your code and i will fix it.
Related
Here is a prototype of what I am trying to implement
Here is what I currently have : JsFiddle
I am trying to get the picture of the guy on the laptop to align correctly with and to the right of the paragraph components - Business Traveller, Office Supply Purchases, etc...
What I've tried is using Align attribute, changing my img src code to
<img id="laptop" align="middle" src="zoom-39988392-3.JPG" height = "90" width ="90" />
but that didn't have any effect.
I also tried Float but that messed up my margins and the organization of my left components.
Is there a way I can do this without floating?
See the fiddle
The HTML and CSS that i've used is as follows. Used float:left
HTML
<div class="container">
<div id="choices">
<p class="choice">Business Traveller</p>
<p class="choice">Office Supply Purchases</p>
<p class="choice">Stay at home parent</p>
<p class="choice">Entertainment</p>
<p class="choice">Profile 6</p>
</div>
<div class="image"></div>
</div>
CSS
html, body, .container {
height:100%;
}
#choices {
width:30%;
float:left;
}
.choice {
margin-top:0px;
margin-left:20px;
text-align:center;
width:100%;
background-image: url("http://i.imgur.com/H43sVoi.png");
padding-top:15px;
padding-bottom:15px;
}
.image {
height:100%;
width:65%;
background-color:red;
float:left;
}
You will have to work with the height and width of each divs. I just made it roughly.
You have to create two columns. 1 column for the menu and the second column for the image. If you do this, you wont have trouble floating.
I'm trying to make a custom splitter which is a <div> between page1 and page2, but some weird lines is showing which I don't know where they came from, or how to hide them!
spiltter.png
pattern1.png
Snippedshot
.zikzak, .splitter, .split-content
{
float:left;
width:100%;
}
.splitter
{
height:250px;
}
.split-content
{
margin-top:-50px;
height:250px;
background:url(img/pattern1.png) repeat;
}
.zikzak
{
position:relative;
height:50px;
}
HTML:
<div class="splitter">
<div class="zikzak" style="background:url(img/spiltter.png) repeat-x"></div>
<div class="split-content"></div>
<div class="zikzak" style="background:url(img/spiltter2.png) repeat-x"></div>
</div>
Problem with you image called spiltter.png As the image edges are transparent not solid, that's why you are getting strange behavior.
To solve this bug you have to filled image edges with solid color.
Image
I tried this with the following CSS and HTML. It looks fine when the browser is of full width and scrambled when browser is resized. I WANT the elements to be where there and a HORIZONTAL SCROLL has to appear when the BROWSER is RESIZED. Pretty new to web programming. Text-align:center for positioning the center column would not work because, every time a new text is added in the left or right, it gets relocated and also center column element in ROW1(text) and ROW2(Button) do not appear along the same line. That is, text appears a bit right and the button a bit left. Text-align won't work here.
CSS:
#charset "utf-8";
/* CSS Document */
body
{
background-color:#000;
}
.wrapper
{
width:70%;
margin:0 auto;
padding:2px;
background-color:#fff;
}
.second_row
{
padding:2px;
margin-top:10px;
}
.center_container
{
width:30%;
margin:0 auto;
}
.left_container
{
width:33%;
float:left;
}
.right_container
{
width:33%;
float:right;
}
.topelements
{
margin-top:0px;
color:#777;
padding:2px;
}
.topelements a:link
{
color:#29a3cc;
}
.topelements a:active a:hover
{
color:#29a3cc;
}
.logo
{
overflow:hidden;
}
HTML code:
<div class="wrapper">
<span class="topelements float_left" >Mail us: admin#admin.com</span>
<span class="topelements float_right">Left links My xyz</span>
<span class="topelements center_container">Welcome to xyz ! Sign in or Signup.</span>
</div>
<div class="wrapper second_row">
<span class="left_container">Srini</span>
<span class="right_container">Vas</span>
<form class="center_container">
<input type="text" placeholder="Goooooooooooo!" />
<input type="submit" value="Search" />
</form>
</div>
<div class="wrapper">
If you want to align you object in the center, there are a couple of different ways. First of all, there is the text-align:center; which you don't need right now. There is also object-position:center; which basically does the same, but with an object. This way isn't the best, but you could add a certain percentage of padding to either side but that's not recommended. Lastly, there's alignment-adjust:central;. This may not be perfect for your situation but just try out all of these and see if they work. Good luck!
One way that would work is to set your wrapper width to a fixed value (something in 800px for example). As long as this width was longer than all the content you are putting within that wrapper, everything should work as you want. The browser will automatically place a horizontal scroll bar when the window gets smaller than the width of the wrapper.
This is just a small error I found in the CSS and I don't know if this will help too much. The div you added was not referred to as a div, but a class. For example, if you wanted to style a div in CSS, you would do this:
#divname {
CSS for div goes here...
}
On the other hand, if you wanted to add a little style to a class, you would go like this:
.classname {
CSS for class goes here...
}
If you were wondering what the difference for each is, the answer is simple. A class can define multiple objects while the divs are just limited to one object or element.
I'm currently updating a pretty old website (last update was around 2001), and have agreed to use HTML5 and CSS3.
For the general design, I'm working on a very clean white and gray tones style, with many paddings and margins. My problem resides in the home page: I'd like to have a 3-column centered layout. But where to start? I've tried some floating, but in vain.
Am I doing this right ?
HTML:
<div class="colwrapper">
<div class="ltcol"></div>
<div class="ctcol"></div>
<div class="rtcol"></div>
</div>
CSS:
.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; }
.ltcol { float:left; }
.ctcol { margin-left:340px; }
.rtcol { float:right; }
your css should be like this:
.ltcol, .ctcol { float:left; }
.rtcol { float:right; }
The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the flow in relation to other block elements. This allows naturally-flowing content to wrap around the floated element. This concept is similar to what you see every day in print literature, where photos and other graphic elements are aligned to one side while other content (usually text) flows naturally around the left- or right-aligned element.
For More details you must have to read this intresting article.
See This Demo: http://jsfiddle.net/akhurshid/YRWLV/
Your HTML is very clean - this is a great step forward.
You need to add a float: left to all the columns. To ensure the float is cancelled after your columns, it is best to add a clear div after the floated columns.
HTML:
<div class="colwrapper">
<div class="ltcol">Column 1</div>
<div class="ctcol">Column 2</div>
<div class="rtcol">Column 3</div>
<div class="clear"></div>
</div>
CSS:
.colwrapper { width:1020px; }
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; background-color: #efefef }
.ltcol { float:left; }
.ctcol { float:left; }
.rtcol { float:left; }
.clear { clear: left; }
So you add css3 tag for this questio so I suggest you to make this with css3 column layout:
More info
for example
HTML
<div class="colwrapper">
<div>text</div>
</div>
CSS
.colwrapper div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
It does not work on IE.
Use one of these tried and tested implementations instead of rolling out your own. In addition to the fact that you'll be getting tested and working code, you'll add responsiveness to your site with almost zero effort.
http://cssgrid.net/
http://960.gs/
http://framelessgrid.com/
http://goldengridsystem.com/
and lots more if you google..
could also use Flexbox property for this now as well so you don't need to worry about floats or clearfix's.
main{
/* .colwrapper{ */
display: flex;
flex-flow: row;
justify-content: center;
}
main > section{
/* .ltcol,.ctcol,.rtcol{ */
display:flex;
flex-flow:column;
align-items:center;
padding:10px; padding:.625rem;
}
main > section:nth-child(2){
/* .ctcol{ */
margin:0 20px; margin:0 1.25rem;
}
http://caniuse.com/flexbox shows the support for it isn't quite as far along as you would probably like, however, there are ways to improve support by mixing old versions of the syntax with the new http://css-tricks.com/using-flexbox/ has a great write up on it from Chris Coyier if you want to play with this for a next project (this post is fairly old). You can also get more details at http://html5please.com/#flexbox
Also, if you're using HTML5 I'd probably go with sections over divs for a more semantic structure, so a comparison would look something like this:
<main>
<section></section><!-- or <nav></nav> -->
<section></section><!-- or <article></article> -->
<section></section><!-- or <aside></aside> -->
</main>
instead of...
<div class="colwrapper">
<div class="ltcol"></div>
<div class="ctcol"></div>
<div class="rtcol"></div>
</div>
Just try putting the rtcol div beofre le ltcol div.
<div class="colwrapper">
<div class="rtcol">X</div>
<div class="ltcol">X</div>
<div class="ctcol">X</div>
</div>
http://jsfiddle.net/EDjpy/
Morning,
I have the following HTML:
<div id="sah_padding">
<div id="sah_holder">
<div id="sah_name">Hello [agent_name]</div>
<div id="sah_logout">✖</div>
</div>
You are working with [customer_name]
</div>
and I have the following CSS:
#sah_padding{
padding:10px 10px 10px 10px;
}
#sah_holder{
padding-bottom:10px;
clear:both;
}
#sah_name{
float:left;
width:50%;
}
#sah_logout{
text-align:right;
}
#logout_link{
color:#fff;
text-decoration:none;
font-weight:bold;
}
However my login link and Hello message aren't aligning correctly, the logout link is a few pixels below the hello message and I need them to be on the same horizontal line. What am I doing wrong?
if you set line-height :1 to #logout_link element, it should correct the alignment
(of course feel free to choose a different value to adjust it)
Give float to your #sah_logout also. Write like this:
#sah_logout{
float: left;
text-align:right;
}
Check this http://jsfiddle.net/QUNT2/
Check the line-height of your elements!!!
You need to set a float to #sah_logout as well:
#sah_logout{
float: left;
text-align:right;
}
You can even make it say, float: right. It's entirely your choice. Doing only a text-align: right will modify how the inner contents of the container behave, not how the div behaves within the flow.
Also, you might have a few problems with the parent div not wrapping correctly around the children divs (as all children now have float properties), so you might need to add another div, with clear: both set in its style:
<div id="sah_holder">
<div id="sah_name">Hello [agent_name]</div>
<div id="sah_logout">✖</div>
<div style="clear: both"></div>
</div>
Instead of wasting time with block level elements why don't you simply use inline elements for both the "Hello" text and the logout link? That's what inline elements are supposed to do - stay in line with each other.
<div id="sah_padding">
<div id="sah_holder">
<span id="sah_name">Hello [agent_name]</span>✖
</div>
<span>You are working with [customer_name]</span>
</div>
Its is highly unlikely that you would need any of the CSS code you previously used for elements inside sah_holder unless you want to style them differently.
check it your updated html :-
<div id="sah_padding">
<div id="sah_holder">
<div id="sah_name">Hello [agent_name]</div>
<div id="sah_logout">You are working with [customer_name]</div>
</div>
</div>
your updated css:-
#sah_padding{
padding:10px 10px 10px 10px;
}
#sah_holder{
padding-bottom:10px;
border:1px solid red;
overflow:hidden;
}
#sah_name{
float:left;
width:50%;
}
#sah_logout{
float:right;
}
.logout_link{
color:black;
text-decoration:none;
font-weight:bold;
}
or you can see the demo:- http://jsfiddle.net/WnecH/11/