asasass
November 10, 2017, 3:33am
1
I’m trying to bind two things together. A cover/onclick to a scrollbar with links inside. All help would be greatly appreciated.
this:https://jsfiddle.net/82dc9hda/2/1
<style>
#cover {
width: 260px;
height: 168px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/rlHPMrR.jpg");
border: 3px solid #0059dd;
}
#text {
font-family: Tahoma;
font-weight: bold;
font-size: 30px;
color: #0059dd;
text-align: center;
margin:-150px;
text-decoration: none;
}
</style>
<div id="cover" onclick=""></div>
<div id="text">Links</div>
to this being in a scrollbarhttps://jsfiddle.net/cytyhbk2/3/1
<style>
html,body {
width:249px;
height:100%;
margin:0;
margin-top:-1px;
background:#000000;
}
li {
padding-bottom:20px;
}
ul {
width:249px;
margin:0;
padding:0;
margin-top: -1px;
list-style: none;
text-align: left;
}
a:link {
color: #000000;
width: 243px;
height: 20px;
display: block;
background: green;
}
a:visited {
color: #000000;
background: red;
}
a:hover {
color: #000000;
}
h3 {
color: blue;
font-weight:bold;
line-height:1;
font-size:25px;
margin: 0;
}
.no_pad {
padding:0;
}
</style>
<ul>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li class='no_pad'>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
</ul>
The final product should look like this.
Using onclick, after you click on the image the scrollbar would appear.
I’m confused. What are you wanting to do using an iframe that can’t be done without using an iframe?
asasass
November 10, 2017, 3:55am
3
I meant Scrollbar . I fixed it.
Basic CSS. Give the container overflow: scroll
asasass
November 10, 2017, 4:02am
5
I’m working off of this, but everything is jumbled all over the place.
It needs to all be separated out.
asasass
November 10, 2017, 4:12am
6
Final product should look like this:
Image/ click/ scrollbar behind.
asasass
November 10, 2017, 4:19am
7
This:
<style>
html,body {
width:249px;
height:100%;
margin:0;
margin-top:-1px;
background:#000000;
}
li{
padding-bottom:20px;
}
ul {
width:249px;
margin:0;
padding:0;
margin-top: -1px;
list-style: none;
text-align: left;
}
a:link {
color: #000000;
width: 243px;
height: 20px;
display: block;
background: green;
}
a:visited {
color: #000000;
background: red;
}
a:hover {
color: #000000;
}
h3 {
color: blue;
font-weight:bold;
line-height:1;
font-size:25px;
margin: 0;
}
.no_pad {
padding:0;
}
</style>
Goes with the below part.
This
<ul>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li class='no_pad'>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
</ul>
That’s easy enough to do. Give each element an appropriate class name (up to you to decide what makes sense to you) so instead of
<div style="background-image: linear-gradient( to right,transparent 0 ,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px ),url('https://i.imgur.com/rlHPMrR.jpg');display:block;width:260;height: 168px;border: 3px solid #0059dd; cursor: pointer; border: 3px solid #0059dd;font-family:Tahoma; font-weight: bold;font-size:30px; color:#0059dd;text-align: center;line-height:100px;text-decoration: none;">Links </div>
<div style="width:260px;height:174px;overflow:auto;background-color:yellowgreen;color:white;scrollbar-base-color:black;font-family:sans-serif;padding:10px;">
you have something like
<div class=“my-first-div”>Links</div>
<div class=“my-other-div”>
off-topic - A div to hold only the text “Links” doesn’t seem semantic to me, but I’ll assume you have a reason
Then take all of the CSS you have in the style attribute and use those rules using the class you gave the elements as the selector
.my-first-div {
background-image: linear-gradient( to right,transparent 0 ,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px ),url('https://i.imgur.com/rlHPMrR.jpg');
display:block;
width:260;
height: 168px;
border: 3px solid #0059dd;
cursor: pointer;
border: 3px solid #0059dd;
font-family:Tahoma;
font-weight: bold;
font-size:30px;
color:#0059dd;
text-align: center;
line-height:100px;
text-decoration: none;
}
.my-other-div {
width:260px;
height:174px;
overflow:auto;
background-color:yellowgreen;
color:white;
scrollbar-base-color:black;
font-family:sans-serif;
padding:10px;
}
asasass
November 10, 2017, 4:37am
9
How would you do it instead?
asasass
November 10, 2017, 4:39am
10
This is how it was set up before, I was using iframe then.
<div style="width:260;margin-top:8px;" onclick="myscr2=document.getElementById('myscroll2'); myscr2.style.display='block'; this.style.display='none'">
<a href="" style="background-image: linear-gradient( to right,transparent 0 ,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px ),url('https://i.imgur.com/rlHPMrR.jpg');display:block;height: 168px;border: 3px solid #0059dd; cursor: pointer; border: 3px solid #0059dd;font-family:Tahoma; font-weight: bold;font-size:30px; color:#0059dd;text-align: center;line-height:100px;text-decoration: none;" target="frame2">Links</a></div>
<div id="myscroll2" style="display: none;">
<iframe style="display:block;border:0;margin-top:8px;" width="266" height="174"name="frame2" ></iframe>
</div>
If “links” is associatiated with the list of links, I would most likely use the nav tag
The HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
asasass
November 10, 2017, 4:55am
12
What way do I have it set up, and why is that not good?
asasass
November 10, 2017, 5:01am
13
This is what I have so far:
<style>
#cover {
width: 260px;
height: 168px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/rlHPMrR.jpg");
border: 3px solid #0059dd;
}
</style>
<div id="cover" onclick=""></div>
asasass
November 10, 2017, 5:07am
14
<style>
#cover {
width: 260px;
height: 168px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/rlHPMrR.jpg");
border: 3px solid #0059dd;
}
#text {
font-family: Tahoma;
font-weight: bold;
font-size: 30px;
color: #0059dd;
text-align: center;
margin:-150px;
text-decoration: none;
}
</style>
<div id="cover" onclick=""></div>
<div id="text">Links</div>
With the inline style and inline script it’s close to impossible to easily see what is going on and much more difficult to work with. Because page content is most important, coming up with good HTML to hold the content is the first step. Once that is good, then CSS can be added to make it look better. Then JavaScript can be added to to make it behave better.
Here’s a good article by @louislazaris
1 Like
asasass
November 10, 2017, 5:21am
16
I’m lost and have no idea how to set this up.
asasass
November 10, 2017, 5:33am
17
<div id="cover" onclick="
var button = document.getElementById('cover'); {
} else {
}"
asasass
November 10, 2017, 5:46am
18
I’m trying to bind
this:
<style>
#cover {
width: 260px;
height: 168px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/rlHPMrR.jpg");
border: 3px solid #0059dd;
}
#text {
font-family: Tahoma;
font-weight: bold;
font-size: 30px;
color: #0059dd;
text-align: center;
margin:-150px;
text-decoration: none;
}
</style>
<div id="cover" onclick=""></div>
<div id="text">Links</div>
to this being in a scrollbar
<style>
html,body {
width:249px;
height:100%;
margin:0;
margin-top:-1px;
background:#000000;
}
li{
padding-bottom:20px;
}
ul {
width:249px;
margin:0;
padding:0;
margin-top: -1px;
list-style: none;
text-align: left;
}
a:link {
color: #000000;
width: 243px;
height: 20px;
display: block;
background: green;
}
a:visited {
color: #000000;
background: red;
}
a:hover {
color: #000000;
}
h3 {
color: blue;
font-weight:bold;
line-height:1;
font-size:25px;
margin: 0;
}
.no_pad {
padding:0;
}
</style>
<ul>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li class='no_pad'>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
</ul>
l think the HTML structure is flawed. <div> tags are block level elements, but for the first you give it width which renders it more like an inline element. Then the second has a negative margin used in an attempt to have it render “on top, or in” the first. I think something like this would be better
.....
<div id=“cover”>
<nav id=“text”>
<h1>Links</h1>
<ul>
<li>
<span>text</span>
<a href=“”></a>
</li>
.....
</ul>
</nav>
.....
</div>
.....
Then it would be easier to style both the “Links” text where you want it to be and give scrollbars to the list of links.
asasass
November 10, 2017, 8:18am
20
What’s the difference between what you suggested, and how I set it up?
<style>
.auto {
display: block;
padding: 0px;
margin: 0;
width: 266px;
height: 174px;
overflow: auto;
background: #000000;
}
li {
padding-bottom: 20px;
}
ul {
margin: 0;
padding: 0;
margin-top: -1px;
list-style: none;
text-align: left;
}
a:link {
width: 243px;
height: 20px;
display: block;
background: green;
}
a:visited {
color: #000000;
background: red;
}
a:hover {
color: #000000;
}
h3 {
color: blue;
font-weight: bold;
line-height: 1;
font-size: 25px;
margin: 0;
}
.no_pad {
padding: 0;
}
</style>
<div class="auto">
<ul>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
<li class='no_pad'>
<h3>
Text
</h3>
<a href='' target='_blank'>
</a>
</li>
</ul>
</div>
