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>
Related
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.
I have searched and searched on this site for a solution to this and tried to apply all results too my simple HTML but none have appeared to work.
I'm sure there is a really easy way to do this because at the moment there isn't really any code as will explain.
I want a simple layout, 3 divs. One Main Page div containing two horizontal divs, I want the two inside divs to contain a picture that will be used as the div backgrounds enclosed in the Main Page div, I can get the backgrounds on but cannot rid the page of the white line, that I'm sure you guys are sick of reading about.
I get the line appearing between "header" and "site" divs. I'm sure this is an easy solution.
I have want to keep the HTML as simple as possible and only plan to have 3 three links that I will put in once the space has gone, as I'm sure I can apply the solution to further divs.
I'm also struggling to upload code, please advise
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="mainwrap">
<div id="header">
</div>
<div id="site">
</div>
</div>
</body>
</html>
CSS:
#header{
width:1080px;
margin:0;
height:285;
background: url(header.jpg);
float:left;
}
#site{
width:1080px;
margin:0;
height:480;
float:left;
background: url(main.jpg);
}
#mainwrap{
width:1280px;
height:750px;
margin:auto;
background-color:#FFFFCC;
}
Many Thanks if someone can post a solution.
You're having this problem because of the font size of the container. Set the line-height and font-size of the container to 0 and the space will disappear.
If it still doesn't fix it, remove any whitespace (including tabs or line breaks) from your HTML so the code blocks are touching each other like so:
</div><div>
// ^^ no space here
However, remember that font style declarations will cascade down into the container's children, so be sure to set the font-sizeand line-height back to normal inside them.
I tried entering your code in to jsFiddle, but I wasn't able to reproduce the same results you were seeing (with the white lines). May just be my browser...
However, I think this will help solve your issue. I've found it's always a good idea to include a CSS Reset in your CSS file. This gets rid of all those unwanted spaces, margins, and other things that are a pain to work with later.
Try adding the CSS from this site:
http://meyerweb.com/eric/tools/css/reset/
Or just Google "CSS Reset" and use any of the CSS samples. You would add the CSS to your existing CSS... the reset just makes sure all the margins, padding, etc are set to zero.
Adding to each element in css file
{overflow: hidden;}
works for me.
Like Mr. Brice Said you need to set the smaller line-height as possible to fix the small size to your div of the source code of your page but take care if in the CSS of your general Body the line-height are diferent, like the example:
body{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#545454;
line-height:18px;
}
If your div needs a diferent line-height, and font-size to some speciffic section of website you need to set a class to then, link this:
#mainwrap{
width:1280px;
height:750px;
margin:auto;
background-color:#FFFFCC;
line-height:18px;
}
If you want your line between divs disappear you simply add one line of code in your CSS. This line of code is BORDER I believe that 1 to 3 pixel border would be ok.
#header{border:1px;}
You can change the colour of your border the same way as well:
#header{border-color:#ffffff;}
For example:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="mainwrap">
<div id="header">
</div>
<div id="site">
</div>
</div>
</body>
CSS
#header{
border:1px;
width:1080px;
margin:0;
height:285;`enter code here`
background: url(header.jpg);
float:left;}
#site{
border:1px;
width:1080px;
margin:0;
height:480;
float:left;
background: url(main.jpg); }
#mainwrap{
border:1px;
width:1280px;
height:750px;
margin:auto;
background-color:#FFFFCC;}
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.
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.
I have been using the examples here to setup a webpage that has columns with equal heights (using only HTML and CSS), and it is working relatively well. Here is the complete HTML and CSS code that I am using.
Newbie questions:
(1) As you can see, I tried to make the left column (id="column_bottom") have a white (#f5f5f5) background with black text, and the right column (id="content_bottom") with black background with white (#f5f5f5) text, but one side is always overriding the other. What can I do to make it what I want?
(2) Also, you can see in the CSS that I have defined fonts and background colors for body, but somehow that is not carrying through, what should I do?
Thanks!
P.S. I am looking for a pure HTML/CSS solution, and prefer not to use javascript.
You're close. In your code, just change your styling to the columns themselves, like so:
#content_bottom {
color: #f5f5f5;
background:#000000; /* right column background colour */
}
#column_bottom {
color: #000000;
background:#f5f5f5; /* left column background colour */
}
the code below will create two boxes side-by-side and the container will always wrap those boxes, no matter how tall they are. this should solve your issue of having columns of the same height.
html:
<div class="container">
<div class="box">blah</div>
<div class="box">blah<br/><br/>blah</div>
<div class="clear"></div>
</div>
css:
.container { position:relative; width:100px; border:1px solid red; }
.box { position:relative; float:left; width:40px; border:1px solid blue; }
.clear { clear:both }