div.horizontalRule {
clear:both;
width:100%;
background-color:#d1d1d1;
height:1px;
margin-top:5px;
margin-bottom:5px;
}
This is what I am doing now but the Margins seem to have no effect! I am not sure why but the text above and below this "horizontal rule" touch the horizontal rule with no margins. Is there a way to implement margins in this scenario?
http://jsfiddle.net/fwqSH/
Problem is your not closing the div:
You cannot close a div as you did there must be a closing tag as so:
<div></div>
and not
<div />
corrected jsfiddle:
http://jsfiddle.net/fwqSH/1/
EDIT
Final solution was to add a min-height of 1px because an empty div sometimes do weird things.
Final CSS:
div.horizontalRule {
min-height: 1px;
clear:both; width:100%;
border-bottom:1px solid #d1d1d1;
height:1px; padding-top:5px;
margin-top:5px;
margin-bottom:5px;
}
The reason the text below it butts right up against the line is because you didn't properly close the div. The browser sees <div /> and thinks that the paragraph after that is part of the div. So change your HTML to something like this:
<div class="horizontalRule" runat="server"></div>
If this is a horizontal rule, I recommend adding your class to the horizontal rule tag, <hr class="horizontalRule" /> This may help resolve some div interaction glitches.
Related
Every section is overlapping to the 'home-screen' section. Here's the live link Hello Sylhet.
But the page should be like this
The problem is incorrect use of position:absolute property on section#home-screen. This section is being overridden by the elements coming after it. You need to push the elements further down using either margin-top or an empty div, so that #home-screen is visible.
Try this CSS:
#icon-search {
margin-top:60%;
}
Try to modify the value of this property and the height of section#home-screen to get the display that you are seeking.
NB 1: As #Obsidian Age correctly mentioned in the comment, if you replicated your problem using JS Fiddle, Codepen or such, you would have got a precise answer with the code much quickly.
NB 2: If you want a piece of advice, don't position #home-screen as absolute. position:absolute is tricky, especially if it is not within a position:relative block element. Try to avoid it unless you absolutely (pun intended) need to use it. Make the #home-screen a flexbox and then, push the next section up with a negative margin. Run the below snippet to see an example.
.home-screen,
.icon-search {
display:flex;
align-items:center;
justify-content:center;
}
.home-screen {
border:1px solid red;
height:60vh;
}
.icon-search {
background-color:#fff;
justify-content:space-around;
margin: -25px auto 0;
height:50px;
width:90%;
border:1px solid blue;
border-radius: 25px;
}
<div class="home-screen">
<div class="searchbox">Search me <input type="text"></div>
</div>
<div class="icon-search">
<div class="icons">icon1 icon2 icon3</div>
</div>
I am creating a web page that needs to be responsive.
Here is an image of it:
Here is the HTML:
<div class="smallBoxes">
<div class="leftHomeBox">
<a class="Description" id="Desc_1">WHEN?</a>
</div>
</div>
and the CSS:
.smallBoxes{
display:block;
margin-left:25%;
margin-right:20%;
width:auto;
}
.leftHomeBox{
width:100%;
float:left;
margin-bottom:10px;
padding:10px;
padding-bottom:0;
height:65px;
}
.Description{
border:5px solid #ffffff;
padding:5px;
}
I am trying to keep the "when" box in the centre of the div, for all screen sizes. AS things are now, both margins will change, but at different rates eg they do not stay consistent relative to each other and so the "when" box doe s not stay central.
I have looked at other websites and have not been able to find a working example.
I have tried using
margin-left:20%;
margin-right:20%;
width:auto;
but this does not work. I have been working on this all day and I have read all I can find but I cannot seem to get this to work. I have tried every possible thing I can think of.
Surely this is something that is required often and cannot be very difficult to achieve, but I am not able to find a clear answer to how to achieve this, or what I am doing wrong.
If someone could provide a fiddle of a working solution I would be very grateful.
use
CSS
.leftHomeBox{
text-align:center
}
DEMO
.Description
{
display:block;
margin-left:auto;
margin-right:auto;
}
This should be work.
You can apply a text-align: center on an <a> tag.
.leftHomeBox{
text-align:center
}
It will center the link without using margins
Fist of all, pls see this Question and the Demo
You can see even set the margin:0px; to the element, there's still a space between the text and the element border. It's a problem when I put Chinese and English text in one line, because the space for English and Chinese is not the same. Anybody know how to solve this?
I know it's not a big issue, but want to make it perfect to look, also want to learn more about css and html. Thank you for your attention.
You can reduce the height's lines of paragraphs with the line-height property:
* {
margin:0px !important;
padding:0px !important;
}
.di_header{
display:table;
width:100%;
}
.di_h_en{
width:30%;
height:100px;
display:table-cell;
vertical-align:bottom;
text-align:left;
border:solid 1px red;
}
.di_h_cn{
width:70%;
display:table-cell;
vertical-align: bottom;
text-align:right;
border:solid 1px red;
}
.di_h_en p{
font-size:32px;
line-height:30px;
border:dashed 1px black;
}
.di_h_cn p{
font-size:24px;
border:dashed 1px black;
}
<div class="di_header">
<div class="di_h_en"><p>I'm left</p></div>
<div class="di_h_cn"><p>I'm chinese 我是中文</p></div>
</div>
Here, I put a line-height a little smaller, so it reduces the margin with border. Play with the 30px value to see the change.
this is happening becuase both <p> contains different font-size.. you can fixed them by using line-height property.
Add the line-height in the CSS. you use 32px font-size on another p element.
.di_h_cn p{
font-size:24px;
border:dashed 1px black;
line-height:38px; /* Add this line*/
}
Here is a DEmo. http://jsfiddle.net/kheema/TkfSx/13/
Can you try using margin-bottom:0 for <p>.
Just keep font-size same for both or like mentioned above use line-height and play with it until you are satisfied.
demo:
Jsfiddle
or
Jsfiddle2
I think you want to remove the margin at the top of text inside the cell. If this is what you want then remove the height:100px from the .di_h_en{your-styles-here}
I have a outer container, containing two links. They are aligning horizontally. The first one contains a div with background image and the second one is just text. The problem is the whole outer container acts as the first anchor, links to the first url while it is supposed to link nothing. Here's the simplified layout
<div id="links-block">
<div id="edit-quote-button"></div>
Preview the PDF
</div>
Here is the example JSFiddle. I am just wonder how to structure this set of elements, to prevent this problem.
Define this css
a{display:inline-block;vertical-align: top;}
#preview-pdf-link {
float: right;
margin-top: -30px; // remove this line
color: #999999;
}
Demo
here is your new html structure
<div id="links-block">
<a class="g-link" href="http://www.google.com"><div id="edit-quote-button"></div></a>
<a class="y-link" href="http://www.yahoo.com" id="preview-pdf-link">Preview the PDF</a>
<div class="clear"></div>
</div>
add this css to your css file
.g-link{
display:block;
float:left;
}
.y-link{
display:block;
}
.clear{
clear:both;
height:0px;
width:0px;
display:block;
}
hope this will work for you
It's not a great idea to have a div inside the a like that (invalid in pre-HTML5). If you set the edit-quote-button div to display: inline-block it will work better, though. Then remove the negative top margin on the Yahoo link.
We have a page that ordinarily has two elements arranged side-by-side. Despite exploring a few angles for this, we can't seem to make it work. We're not averse to using JavaScript, it just feels that a CSS based solution ought to be possible. Is there a way of using just CSS (and possibly extra markup if necessary) to make element2 centre when it appears on its own?
Examples
Sometimes we have two elements, side by side.
<div id="container">
<div id="element1">content</div>
<div id="element2">content</div>
</div>
But in some conditions only element2 is on the page e.g.:
<div id="container">
<div id="element2">content</div>
</div>
There is a pure css solution, however it won't work in versions of IE less than 7 because it won't understand the sibling selector (+), for that you may want to consider a JavaScript solution (perhaps Dean Edwards' IE7). Anyway, some example css:
div#element2{
width:100px;
margin:0 auto;
}
div#element1{
width:50px;
float:left;
}
div#element1 + div#element2{
width:50px;
float:left;
margin:0;
}
The key is the line div#element1 + div#element2 which selects div#element2 given that it directly follows div#element1.
I think Phil was on the right track, but you should try using the CSS last-child pseudo-class. As far as I know, first-child and last-child are the only way in CSS to approximate an if construct.
div#container div#element2:last-child {
width:100px;
margin:0 auto;
}
div#element1{
width:50px;
float:left;
}
div##element2{
width:50px;
float:left;
margin:0;
}
The CSS above basically says "if element2 is the last child element of its parent use this set of styles, otherwise use these other styles.
This should even work in IE7.
A strict CSS2 solution:
#container {
text-align:center;
}
#element1, #element2 {
display:inline-block;
}
The inner elements should layout like inline text inside #container, but remain blocks inside.
This is standard CSS, but getting browser support might take some trickery.
it's not cool solution becouse tables are not "trendy" anymore but it solves the problem completly (under all ie)
<style>
#container {
margin:0 auto;
width:100px;
}
#container table{
width: 100%;
text-align:center;
}
#element1{
background-color:#0000ff;
}
#element2 {
background-color: #ff0000;
}
</style>
<div id=container>
<table cellspacing=0 cellpadding=0>
<tr>
<td id="element1">content</td>
<td id="element2">content</td>
</tr>
</table>
</div>