Why am I getting broken links in just a single section of my website, hosted on Github pages? The webiste is lanl.github.io/LaGriT . The relevant part of the HTML layout file looks like this:
<div id="top_right">
Home <br>
<div class="grid" id="searchBar">
<div>
<div id="search">
<form role="search" method="get" action="{{ site.baseurl }}//pages/search">
<input id="searchString" name="searchString"
placeholder="Enter text here" type="text">
<input id="searchButton" name="googleSearchName" type="button" value="Search">
</form>
</div>
</div>
</div>
</div>
The corresponding part of the CSS file looks like this:
#top_right {
position:absolute;
top:20px; right:200px;
width:400px;
background:#000;
}
If you use your browser's developer tools and inspect some elements, you will see that the <div id="header_wrap"> overlays (is on top of) the <div id="top_right">.
DOM elements are stacked based on the order they appear in the page source; later elements are put on top of earlier elements.
The easiest way to fix that is to set a higher z-index on top_right.
#top_right {
position: absolute;
top: 20px;
right: 200px;
width: 400px;
background: #000;
z-index: 100; /* <----- */
}
You could also change the order of the elements declaration, for example put your top_right div at the end of the HTML source so it is on the top of the z-index stack. Since you're using position: absolute it shouldn't matter where it appears in the source, but it will change the tab order, so that may not be desireable.
I am using w3.css in my codeiniter project and I want to put them next to each other.
Here is my code:
<a type="button" class="w3-btn w3-blue w3-pull-left" href="http://localhost/cblog/posts/ikkinchi-post">Tahrirlash</a>
<form action="http://localhost/cblog/posts/delete/2" method="post" accept-charset="utf-8">
<input type="submit" value="O`chirish" class="w3-btn w3-red">
</formm>
Why do you have type="button" attribute on your link?
To display the elements on one line change their style to:
display: inline-block;
Or if you don't need padding
display:inline;
So it will look like this
a,form{
display:inline-block;
}
You can take a look at the documentation for W3.css and see if there's a class that will make an element display inline and maybe use the classes designed for navigation bars. If there's not, then you can create a class yourself and assign it to the element you wish.
.displayInline { display: inline;}
This question already has answers here:
Make a div into a link
(30 answers)
Closed 9 years ago.
I want to make it so that a whole div is clickable and links to another page when clicked without JavaScript and with valid code/markup.
If I have this which is what I want the result to do -
<a href="#">
<div>This is a link</div>
</a>
The W3C validator says that block elements shouldn't be placed inside an inline element. Is there a better way to do this?
It is possible to make a link fill the entire div which gives the appearance of making the div clickable.
CSS:
#my-div {
background-color: #f00;
width: 200px;
height: 200px;
}
a.fill-div {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
HTML:
<div id="my-div">
</div>
<div onclick="location.href='#';" style="cursor: pointer;">
</div>
a whole div links to another page when clicked without javascript and
with valid code, is this possible?
Pedantic answer: No.
As you've already put on another comment, it's invalid to nest a div inside an a tag.
However, there's nothing preventing you from making your a tag behave very similarly to a div, with the exception that you cannot nest other block tags inside it. If it suits your markup, set display:block on your a tag and size / float it however you like.
If you renege on your question's premise that you need to avoid javascript, as others have pointed our you can use the onClick event handler. jQuery is a popular choice for making this easy and maintainable.
Update:
In HTML5, placing a <div> inside an <a> is valid.
See http://dev.w3.org/html5/markup/a.html#a-changes (thanks Damien)
Without JS, I am doing it like this:
My HTML:
<div class="container">
<div class="sometext">Some text here</div>
<div class="someothertext">Some other text here</div>
text of my link
</div>
My CSS:
.container{
position: relative;
}
.container.a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent: -9999px; //these two lines are to hide my actual link text.
overflow: hidden; //these two lines are to hide my actual link text.
}
My solution without JavaScript/images. Only CSS and HTML. It works in all browsers.
HTML:
<a class="add_to_cart" href="https://www.example.com" title="Add to Cart!">
buy now<br />free shipping<br />no further costs
</a>
CSS:
.add_to_cart:hover {
background-color:#FF9933;
text-decoration:none;
color:#FFFFFF;
}
.add_to_cart {
cursor:pointer;
background-color:#EC5500;
display:block;
text-align:center;
margin-top:8px;
width:90px;
height:31px;
border-radius:5px;
border-width:1px;
border-style:solid;
border-color:#E70000;
}
Nesting block level elements in anchors is not invalid anymore in HTML5. See http://html5doctor.com/block-level-links-in-html-5/ and http://www.w3.org/TR/html5/the-a-element.html.
I'm not saying you should use it, but in HTML5 it's fine to use <div></div>.
The accepted answer is otherwise the best one. Using JavaScript like others suggested is also bad because it would make the "link" inaccessible (to users without JavaScript, which includes search engines and others).
jQuery would allow you to do that.
Look up the click() function:
http://api.jquery.com/click/
Example:
$('#yourDIV').click(function() {
alert('You clicked the DIV.');
});
Well you could either add <a></a> tags and place the div inside it, adding an href if you want the div to act as a link. Or else just use Javascript and define an 'OnClick' function. But from the limited information provided, it's a bit hard to determine what the context of your problem is.
.clickable {
cursor:pointer;
}
Something like this?
<div onclick="alert('test');">
</div>
AFAIK you will need at least a little bit of JavaScript...
I would suggest to use jQuery.
You can include this library in one line. And then you can access your div with
$('div').click(function(){
// do stuff here
});
and respond to the click event.
we are using like this
<label for="1">
<div class="options">
<input type="radio" name="mem" id="1" value="1" checked="checked"/>option one
</div>
</label>
<label for="2">
<div class="options">
<input type="radio" name="mem" id="2" value="1" checked="checked"/>option two
</div></label>
using
<label for="1">
tag and catching is with
id=1
hope this helps.
I have a submit button which is simply marked up as this:
<input type='submit' name='foo' value='Continue ⇢' class='button' />
I would like to make the rightward dotted arrow a tad larger.
<input type='submit' name='foo' value='Continue <span class='makemeatadlarger'>⇢</span>' class='button' />
is obviously not working... Is there a simple way to do this (I am not interested in adding tons of outher divs/spans and preferable without having to use images)
UPDATE
Inspired by accepted answer below I came up with this:
html
<button type='submit' name='foo' value='Continue' class='button'>Continue</button>
css
.button:after {
content: ' ⇢';
font-size: 220%;
height: 26px;
margin-top: -19px;
float: right;
}
example
And heres a live example over at jsfiddle
I don't believe so because taking the span out takes it out of the button. The best way would be a button instead of an input like so: <button type="submit" name="foo" class="button">Continue <span class='makemeatadlarger'>⇢</span></button>
You must style the button text as a whole, not just a portion. To achieve your desired effect wouldn't it be much easier to create an image?
Below is an exceedingly simple HTML page.
1) I would like to add a menu across the top, which means that the position of that edit box may have to change(?) or must it? Is the text box positioned relative to its enclosing div (which will follw the menu's div)?
2) I want to add more form elements, and position them precisely, with coords relative to the start of the form, just after the menu (I am generating the HTML programatically, if it helps to know that; for instance, I can add a fudge factor).
3) and after the last of those I want a submit button, which is always guaranteed to be at the bottom of the page, no matter how many input elements I add in the middle (so, perhaps wrap the form's controls in a div?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<form action="HTTP://localhost/b/submitted.php" method="post">
<div class="TEdit" id="TextEditBox1" style="position: absolute; top:56px; left: 72px; width: 121px; height: 21px;">
<input type="text" name="TextEditBox1">
</div>
<div class"submit_button" style="position:absolute; top:102px; left:132px;"><input type="submit" name="submitButton" value="Submit"></div>
</form>
</body>
</html>
For the most part, if you just put the page elements in the code in the order you wish to see them, flow of the page will lay them out as you've described.
For pixel perfect positioning, you can use absolute positioning as you have in there, but that's not that "best" way to do it.
I think the best thing for you to do would be to read up on CSS positioning over at w3schools if you want a good understanding of how to layout page elements.