I will not add the code but I need to make my button not just go to another page, but go to the middle section of the page. Like I want the button to lead to a scrolled down page. Does anyone know what to do ?
add id in the div of the page like <div id="hello">some thing here</div> and on button you can use something like this <button>scroll</button>
I'm assuming that just want your button to scroll down to section of the page. if i'm wrong then comment I'll edit the answer according to it.
#hello{
margin-top:20px;
margin-bottom:500px;
}
.height{
height:500px;
}
html{
scroll-behavior:smooth;
}
<div>
<button>
<a class="scroll" href="#hello">scroll</a>
</button>
<div class="height">
</div>
<div id="hello">Hello</div>
</div>
I believe the simplest way to achieve this would be to create a pair of tags, one for the button and one that is invisible at the desired destination. A basic example would be as follows:
<body>
<div id="header">
<h1>Title</h1>
</div>
<div class="outer">
<div class="inner">
<button>Go To 3rd Section</button>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</div>
<div class="inner">
<h1>My Second Heading</h1>
<p>My second paragraph.</p>
</div>
<div class="inner">
<a id="third"></a>
<h1>My Third Heading</h1>
<p>My third paragraph.</p>
</div>
</div>
</body>
After applying the appropriate css for your application, this would be a very simple way to link to a particular part of the page. The destination 'a' tag has a specified id
<a id="destination"></a>
while the corresponding button, which is wrapped inside an 'a' tag, has the href pointing to a particular id
<button>Destination</button>.
Hope this answers your question!
Related
I need to put a link href="/favourites_new/" in the text so that when I click on the card (not on the text itself) I could go to another page. There is my simple code
<div class="left-card-parent">
<div class="left-card">
<h1 class="left-card-h2"> ⬅</h1>
<p>selected</p>
</div>
</div>
How should I solve my problem?
Add all you code inside an tag
for example
<a href=your link here>
<div class="left-card-parent">
<div class="left-card">
<h1 class="left-card-h2"> ⬅</h1>
<p>selected</p>
</div>
</div>
</a>
So, what I am trying to do, is put a div inside a div. The text editor reads the second div's end as the first one's.
This kind of stumped me, so I haven't really tried anything else
<div id="navbar">
</div>
<div id="else">
<div>
</div>
<div id="project1">
</div>
</div>
The last div should go with the first one.
<div id="navbar">
<div id="outer">
<div id="innerOne">
</div>
<div id="innerTwo">
</div>
</div>
</div>
Be sure to make good use of indenting and spacing if you want to make things easier on yourself!
If you notice in your code when you declare the first div you immediately close it again and start a new one, every other div wants to be nested inside it.
<div id="navbar">
A Div on it's own
</div>
<div id="else">
A new div on the same 'level' as the last
<div>
a Child of the else div
</div>
<div id="project1">
second Child of the else div
</div>
end of else
</div>
Figuring the nesting is easier when you:
Indent the code, and
Add comments to track the (matching) closing tags
<div id='navbar'> // open navbar
<div id='else'>
</div> //end else
<div id='project1'>
</div> //end project1
</div> //end navbar
(my code block thing is being buggy, but I hope you understand what I was saying...)
In HTML after most opening tag should come the content and then the closing tag
in your case ...
There are self-closing tags also, which don't need a closing one for example: <img src="">
Your code is wrong, because after the <div id="else"> you have another div opening tag, but there should be a closing tag before it, like this:
<div id="navbar">
</div>
<div id="else">
</div>
<div id="project1">
</div>
Nesting divs should look like this:
<div id="navbar></div>
<div id="else">
<div id="project1"></div>
</div>
I have the following code:
<div class="trigger">
<p>Original Text</p>
</div>
<div class="content">
<p>lorem...</p>
</div>
<script>
//when p tag inside trigger is clicked content is shown or hidden
</script>
I would like to have an extra attribute to get from the p tag to be toggled between the original text.
For example:
<p title="Othe text to be toggled">Original text</p>
So every time the p tag is clicked it's content change between the original text and the other text.
In this case I don't that title will accomplish its goal, I don't know which html attribute would be the best for this case. Thanks for your time
Thanks to #msanford. data-* was the perfect solution for me!
<div class="trigger">
<p data-other="Other text">Original Text</p>
</div>
<div class="content">
<p>lorem...</p>
</div>
<script>
//when p tag inside trigger is clicked content is shown or hidden
</script>
Like if I had:
<div class="body">
<div class="logo">
<img...>
</div>
<p>some text</p>
</div>
Could I go...
<div class="body">
<div class="logo">
<img...>
</div class="logo">
<p>some text</p>
</div>
...so that it knows to end the second div and not the first?(this is a light example of what I am trying to do, but I think you get it)
(and if it is possible, a way using just HTML or css)
If your motive is to identify the closing tag effectively means, possibly you can use the comments
<div class="body">
<div class="logo">
<img...>
</div> <!-- logo div closed here -->
<p>some text</p>
</div>
Proper formatted code will help to find the closing tag hierarchy.
Nope.
Closing tags always close the most recently opened matching tag. In your example, it simply works as desired. And the alternative would not be valid markup: tags cannot overlap.
I don't think you can, but great news coming: you don't need to!
The moment you put a </div>, than the closest (going backwards) div (and therefore its class/classes) will close.
Indentation helps understanding how it works:
<div class="first">
<div class="second">
<div class="third"> <!-- Next closing div closes "third" -->
</div> <!-- Next closing div closes "second" -->
</div> <!-- Next closing div closes "first" -->
</div>
Another example:
<div class="first">
<div class="second"> <!-- Next closing div closes closest one, in this case "second" -->
</div>
<div class="third"> <!-- Next closing div closes "third" -->
</div> <!-- Next closing div closes "first" -->
</div>
Notes:
You might want to look into learning how to style element's children, like all the <p> elements in all <div> elements which have the class="cool".
This could avoid the need to close and reopen the same classes multiple times.
This game teaches child selection in a great and visual way: http://flukeout.github.io
Lastly, note that there currently is no parent selector in CSS. What that is (Er.. would be) you'll figure out yourself soon after learning about child selection.
I have got some elements on my page, they should all be styled the same except for every other one, where I just want to change some styling.
Here is the CSS which I was hoping would select the div inside the stack of different elements:
.stagger_reviews[class=inner]:nth-child(2n+2) {
background-color:#003;
}
Here is the HTML:
<div class="stagger_reviews">
<!-- Later use PHP to load reviews, CSS should switch the images from left to right -->
<article class="container box style1">
<a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
<div class="inner">
<header>
<h2>Martyn Ball</h2>
</header>
<p>
I found this service on a Google Search, didn't expect it to be so great!
</p>
</div>
</article>
<article class="container box style1">
<a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
<div class="inner">
<header>
<h2>Martyn Ball</h2>
</header>
<p>
I found this service on a Google Search, didn't expect it to be so great!
</p>
</div>
</article>
</div>
As you can see I just want to adjust the one div inside each article which has the class name inner. And maybe some other elements as well but once I have this working I can do that.
The style isn't being applied to the second inner div, I have made about 4 copies of the article and none are being changed.
Here is the solution, I put the nth-child in the wrong place.
.stagger_reviews > article:nth-child(2n+2) div[class=inner]