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.
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'm new about wordpress but I want put two rectangles under the header of my page where every rectangles in linked at another page. How I can do this? what I must use to do this?
Set two div with same width in header.php and under the div give <a> attribute for redirection.
As the previous answer said put these in header.php and insert in the divs whatever you want.
<style>
.rect{
display:inline-block;
vertical-align:top;
border:solid 1px black;
width:20px;
height:30px;
}
</style>
<div class='rect_cont'>
<div class='rect'></div>
<div class='rect'></div>
</div>
I have two divs declared as,
<div id="icdAid" align="center" ></div>
<div id="errorMsg" align="center" ></div>
How can I add space between them?
You can add this to your CSS
#icdAid
{
margin-bottom:10px;
}
This will add a space of 10px to the bottom of icdAid div.
JSFIDDLE DEMO
In html - use <br/> to add new line.
In css - #icAid{ margin-bottom: 20px; }.
Also align attribute is deprecated, use css for that div{ text-align: center; }
Your should use the CSS solution
#icdAid {
margin-bottom: 15px;
}
This is used if you want the results replicated to wherever you use the icdAid id. But if you want a fix on a single page use <br/> tags in-between the close and open tags of you <div>'s.
With the CSS solution you have more control over the spacing as <br/> tags are a set width.
I've a little problem with arranging nav/div on a website. Google didn't revealed me a solution, but to be honest, I didn't really know how to search for it...
What I'd like to have at the end:
On the left side, a <nav> (data selection) is visible. On the right side, several <div> (graphs) are shown like a table with 2 columns and infinite lines, resp. max. two graphs side by side. The field of the <nav> shall be independently which means no <div> from the right side should be below of the <nav>.
How I have to implement the css file?
If you click this hyperlink, you'll see the current situation of the arrangement:
Screenshot of the nav and the divs
Later on: the goal is to realize a Drag&Drop behavior as described here: HTML5 Drag&Drop. It should be possible, to drag the data from the <nav> and to drop it into any of the graph-<div> for visualization.
Thanks!
In your CSS try:
display: inline-block;
CSS
nav {
width:30%; //<----Occupying 30% of total width, change it as required
float:left;
}
#charts-wrapper {
float:left;
width:68%; //<----Occupying 68% of total width and occurs on right of nav, change it as required
margin-left:1%;
margin-top:10px;
}
.charts {
float: left;
width:32%; //<-----Equal area within charts
margin-left:0.5%;
}
Demo Fiddle
From what i understand from reading your question you would like to have a navigation bar on the left and another container with images/graphs on the right?
Here is a js fiddle I put together quick demonstrating floats: http://jsfiddle.net/HzS3m/1/
HTML:
<body>
<nav id="nav">
HTML
CSS
JavaScript
jQuery
</nav>
<div id="graphs">
<img src="#">
<img src="#">
<img src="#">
</div>
</body>
CSS:
nav{
width:20%;
height:200px;
background-color:#f00;
float:left;
}
#graphs{
width:80%;
overflow:auto;
background-color:#ff0;
float:right;
text-align:center;
}
img{
width:300px;
height:90px;
border:1px solid #000;
}
Floats are a good way to align html/div elements side by side.
Hope this is of some help to you.
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.