My Code:
<a id="entire" href="/check-appointment.php">
<div id="check_box">
<div id="check_content">
<a id="boxis" href="/check-appointment.php">I am a sales rep</a>
<br> making a request on behalf of the client.
</div>
</div>
</a>
CSS:
#check_box {
width:423px;
height:250px;
margin-left:100px;
margin-top:10px;
}
#check_content {
font-weight:bold;
font-size:37px;
}
Problem:
I am unable to make the work with the I am trying to get that entire div to be part of the
How can i make it work?
If you have an HTML5 DocType it should work, anything before that won't allow inline elements a to wrap block level elements div.
Even if you use an anchor unless you do some z-indexing then your inner link likely won't be seen how you are expecting...since it's the same link it shouldn't be a problem, but that then becomes repetitive.
Related
Is it possible to not apply a css class to a specific element in the class?
For example:
<div className="container-fluid bg-2 text-center">
<h3>LinkedIn</h3>
<a target="_blank" href= {"https://www.linkedin.com"}><img src={linkedin} className={"linkedin"}/></a>
<p>Please follow my LinkedIn account to get updated on my experiences and skills and join my network!</p>
</div>
In this code I would like to exclude the img tag from the container class so the CSS isn't applied to that element. I know I could just make two separate divs of the same class and put the anchor tag in the middle but I want to know if I can do this programmatically.
div.dummy :not(a):not(img) {
background: black;
color: white;
font - size: 20 px;
width:100%;
height:50px;
position:relative;
}
<div class="container-fluid dummy bg-2 text-center">
<h3>LinkedIn</h3>
<a target="_blank" href={ "https://www.linkedin.com"}>
<img src={linkedin} class={ "linkedin"}/>
</a>
<p>Please follow my LinkedIn account to get updated on my experiences and skills and join my network!
</p>
</div>
You can see in the above demo that except img tag, all are getting affected.
Try using :not selector
Read here consulting can i use
else have a particular css for the img overriding any css you want.
The`:not(selector) selector matches every element that is NOT the specified element/selector.
:not(.container>img) {
background-color: blue;
//your css here
}
I created an icon at the side of my page that can be clicked to go back to the top of the page.
I thought this would be fairly simple, like so:
#back_to_top{
position:fixed;
right:0px;
bottom:80px;
padding:10px;
background-color:#fff;
opacity:0.5;
border-radius:10px 0px 0px 10px;
cursor:pointer;
}
#back_to_top img{
width:50px;
height:50px;
}
#content{
height:9999px;
}
<a id="top_of_page"></a>
<div id="content">loads of content</div>
<div id="back_to_top">
<a href="#top_of_page">
<img src="media/top.png">
</a>
</div>
However, when I click the icon it actually moves down the page by the same amount of pixels each time.
I have no other anchors or anything else with a similar ID.
My anchor tag is the first tag in my body.
my 'loads of content' is all generated dynamically from php.
I know its working in the snippet but I can't share a full example, however, any ideas why this might act this way, would be really appreciated.
Adding an a element with href="#" should do the trick.
Here you have an example of it working:
<h1>MOON</h1>
<div style="height: 700px;"><small>scroll down</small></div>
To the moon!
I prefer to use the Javascript window.scrollTo method. Passing in 0,0 will scroll the page to the top left corner instantly.
Syntax: window.scrollTo(x-coord, y-coord)
x-coord - Pixels along horizontal axis
y-coord - Pixels along vertical axis
This method allows you to scroll to any point on the page.
Depending on whether you want to use a link tag <a> or a <button> tag you have two simple approaches.
For a link tag:
<a href='#'>To Top</a>
is all you need.
For a button tag:
<button onclick="window.scrollTo(0,0)>To Top</button>
Both of these work well.
Here is what I am trying to accomplish in HTML/CSS:
I have images in different heights and widths, but they are all under 180x235. So what I want to do is create a div with border and vertical-align: middle them all. I have successfully done that but now I am stuck on how to properly a href link the entire div.
Here is my code:
<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
</div>
Please note that for the sake of copy pasting here easily, the style code is inline.
I read somewhere that I can simply add another parent div on top of the code and then do a href inside that. However, based on some research it won't be valid code.
So to sum it up again, I need the entire div (#parentdivimage) to be a href link.
UPDATE 06/10/2014: using div's inside a's is semantically correct in HTML5.
You'll need to choose between the following scenarios:
<a href="http://google.com">
<div>
Hello world
</div>
</a>
which is semantically incorrect, but it will work.
<div style="cursor: pointer;" onclick="window.location='http://google.com';">
Hello world
</div>
which is semantically correct but it involves using JS.
<a href="http://google.com">
<span style="display: block;">
Hello world
</span>
</a>
which is semantically correct and works as expected but is not a div any more.
Why don't you strip out the <div> element and replace it with an <a> instead? Just because the anchor tag isn't a div doesn't mean you can't style it with display:block, a height, width, background, border, etc. You can make it look like a div but still act like a link. Then you're not relying on invalid code or JavaScript that may not be enabled for some users.
Do it like this:
Parentdivimage should have specified width and height, and its position should be:
position: relative;
Just inside the parentdivimage, next to other divs that parent contains you should put:
<span class="clickable"></span>
Then in css file:
.clickable {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
z-index: 1;
}
The span tag will fill out its parent block which is parentdiv, because of height and width set to 100%. Span will be on the top of all of surrounding elements because of setting z-index higher than other elements. Finally span will be clickable, because it's inside of an 'a' tag.
Going off of what Surreal Dreams said, it's probably best to style the anchor tag in my experience, but it really does depend on what you are doing. Here's an example:
Html:
<div class="parent-div">
Test
Test
Test
</div>
Then the CSS:
.parent-div {
width: 200px;
}
a {
display:block;
background-color: #ccc;
color: #000;
text-decoration:none;
padding:10px;
margin-bottom:1px;
}
a:hover {
background-color: #ddd;
}
http://jsbin.com/zijijuduqo/1/edit?html,css,output
Two things you can do:
Change #childdivimage to a span element, and change #parentdivimage to an anchor tag. This may require you to add some more styling to get things looking perfect. This is preffered, since it uses semantic markup, and does not rely on javascript.
Use Javascript to bind a click event to #parentdivimage. You must redirect the browser window by modifying window.location inside this event. This is TheEasyWayTM, but will not degrade gracefully.
I'm surprised no one suggested this simple trick so far! (denu does something similar though.)
If you want a link to cover an entire div, an idea would be to create an empty <a> tag as the first child:
<div class="covered-div">
<a class="cover-link" href="/my-link"></a>
<!-- other content as usual -->
</div>
div.covered-div {
position: relative;
}
a.cover-link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
This works especially great when using <ul> to create block sections or slideshows and you want the whole slide to be a link (instead of simply the text on the slide). In the case of an <li> it's not valid to wrap it with an <a> so you'd have to put the cover link inside the item and use CSS to expand it over the entire <li> block.
Do note that having it as the first child means it will make other links or buttons inside the text unreachable by clicks. If you want them to be clickable, then you'd have to make it the last child instead.
In the case of the original question:
<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<a class="cover-link" href="/my-link"></a> <!-- Insert this empty link here and use CSS to expand it over the entire div -->
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
<!-- OR: it can also be here if the childdivimage divs should have their own clickable links -->
</div>
Make the div of id="childdivimag" a span instead, and wrap that in an a element. As the span and img are in-line elements by default this remains valid, whereas a div is a block level element, and therefore invalid mark-up when contained within an a.
put display:block on the anchor element. and/or zoom:1;
but you should just really do this.
a#parentdivimage{position:relative; width:184px; height:235px;
border:2px solid #000; text-align:center;
background-image:url("myimage.jpg");
background-position: 50% 50%;
background-repeat:no-repeat; display:block;
text-indent:-9999px}
<a id="parentdivimage">whatever your alt attribute was</a>
This can be done in many ways.
a. Using nested inside a tag.
<a href="link1.html">
<div> Something in the div </div>
</a>
b. Using the Inline JavaScript Method
<div onclick="javascript:window.location.href='link1.html' ">
Some Text
</div>
c. Using jQuery inside tag
HTML:
<div class="demo" > Some text here </div>
jQuery:
$(".demo").click( function() {
window.location.href="link1.html";
});
I simply do
onClick="location.href='url or path here'"
What I would do is put a span inside the <a> tag, set the span to block, and add size to the span, or just apply the styling to the <a> tag. Definitely handle the positioning in the <a> tag style. Add an onclick event to the a where JavaScript will catch the event, then return false at the end of the JavaScript event to prevent default action of the href and bubbling of the click. This works in cases with or without JavaScript enabled, and any AJAX can be handled in the Javascript listener.
If you're using jQuery, you can use this as your listener and omit the onclick in the a tag.
$('#idofdiv').live("click", function(e) {
//add stuff here
e.preventDefault; //or use return false
});
this allows you to attach listeners to any changed elements as necessary.
A link with <div> tags:
<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
Something in the div
</div>
A link with <a> tags:
<a href="http://www.google.com">
<div>
Something in the div
</div>
</a>
This doesn't happen all the time. A bug is not a bug if cannot be reproduced!
First, I thought this was a mistake of my young programming skills but same error appears in my two sites, apparently under the same circumstances.
<a style="display:block;" href="link">
<div>text1</div>
<div>text2</div>
</a>
Sometimes, while browsing, links with divs inside them render strangely, duplicate elements appear on the page with no reason, text gets distributed between different links, a real mess.
Real screenshots:
http://cupacupelor.ro/img/help.jpg
http://www.carbroker.ro/img/help.jpg
Anyone faced this problem? Is there a solution? I'm not interested of fixes involving JavaScript!
I guess your divs in links cause inconsistency in some browsers (may be your css playing here).
"Semantics", valid markup are some buzz words.
So why would you want DIVs in an <A> tag. You can try someting like this
<a href="#">
<span class="divstyle">Text 1</span>
<span class="divstyle">Text 2</span>
</a>
then in CSS
.divstyle {
display: block; //and other styles etc
}
Check your page in a HTML validator. I'm 90% sure that you can't have a <div> element inside inline elements like <a>. Even though you've set the link to display:block, it's still not allowed and the browsers may be spitting their dummy.
What you can do is use spans instead, setting them to block:
<style type="text/css">
.link, .link span { display: block; }
</style>
<a class="link" href="example.com">
<span>text1</span>
<span>text2</span>
</a>
I always thought that replacing the <center> tag with <div style="text-align:center;"> will get me the same results. Apparently I was wrong.
This is a portion of my HTML:
(you can also see it in action in the page I created for this question :
http://www.catmoviez.com/ErrorPageSO.aspx
<div style="margin: 0 auto; background-color:red;border:5px solid black;margin-top:5px;width:750px;text-align:center;">
<span style="width:560px;padding-right:10px;text-align:left;float:left;">
<h1>Oops... We're sorry.</h1>
<h3>You've just encountered an unknown error. <br /></h3>
This site is a work-in-progress, we have already been informed of the error and will do our best to fix it. <br />
We would be thankful if you could contact us through the appropriate button and elaborate on what caused this error to appear.<br />
<br />
<h3>
You can go back to the <a style="text-decoration:underline;" href="Default.aspx">Home page</a> and continue using Moviez.NET.
</h3>
</span><span style="width:180px;float:left;"><img src="Resources/Images/404.jpg" /></span>
</div>
I want to do 2 things:
Get Rid of the <center> tag while keeping the div in the center of the page.
Make sure the outer DIVs background color and border affect the inner spans.
UPDATE:
Objective 1 is completed.
Time for objective #2.
Use margin: 0 auto; on your enclosing <div>
<div style="margin: 0 auto; background-color:red;border:5px solid black;margin-top:5px;width:750px;text-align:center;">
<span style="width:560px;padding-right:10px;text-align:left;">
<h1>Oops... We're sorry.</h1>
<h3>You've just encountered an unknown error. <br /></h3>
This site is a work-in-progress, we have already been informed of the error and will do our best to fix it. <br />
We would be thankful if you could contact us through the appropriate button and elaborate on what caused this error to appear.<br />
<br />
<h3>
You can go back to the <a style="text-decoration:underline;" href="Default.aspx">Home page</a> and continue using Moviez.NET.
</h3>
</span><span style="width:180px;"><img src="Resources/Images/404.jpg" /></span>
</div>
See it in action.
Reference: CSS: centering things
If you want to simply center the text, you this css style:
text-align:center;
However, if you are looking to center the element or div itself, there are quite
some solutions for that, one being below:
.mydiv
{
margin:0 auto;
}
Or even with something like this:
.mydiv
{
width:300px; // the width can sometimes be ignored based on inherent size of element.
margin-left:auto;
margin-right:auto;
}
Or even with something like this:
.mydiv
{
margin-left:50%;
margin-right:50%;
}
So you see, there can be more possibilities.
Inline content is aligned with text-align, block content is aligned with margins (set to auto for the case of centring). See Centring Using CSS.
if you are trying to center the div on the page, I usually use this method for my main wrapping div to center the page.
making the left positioning at 50% and then margining back left half of the width of the div.
example below.
#mainspace {
position:absolute;
left:50%;
margin-left:-450px;
height:auto;
width:900px;
border:none;
}
Try this, it has worked for me when I wish I still had that
<center>
tag
< p style="text:align-center" > example image or text < / p >