Graphic Getting Cut Off: jQuery Image Slider - javascript

My Navigation buttons are not displaying the entire HOVER and ACTIVE states on my Promotional Slider. The Circle needs to show, its getting cut off at the bottom and I do not know why.
Anyone Have any Suggestions?
Here is the Page:
http://newsite.702wedding.com/aaaa-promo-slide-index.asp
The Problem should be apparent. JUST THE CIRCLES i am worried about. Rest works fine for me.
Thanks

On .paging a, add some you need to add some padding-bottom.
So, replace your padding rule with this:
padding: 2px 4px 3px 8px;
To line all the numbers up correctly requires quite a few millions of changes. I've tested in Firefox.
Follow all of these steps:
On .paging, remove the letter-spacing / line-height rules.
On .paging, set these rules:
padding-left: 6px;
width: 236px;
display: block;
text-align: center
On .paging a, set these rules:
float: left;
margin: 24px 0 0 32px;
padding: 2px 0 3px 0;
width: 24px

Related

How to set the scroll bar to my popup window?

I have threnter image description hereee images inside my popup window, and i need to set the scroll bar to be able to see all of them, but it´s not posible to scroll throw the popup window to see the images below. Hope someone can help, enter image description here
Regards. Sorry, but I can not show the code for a personal reason, hope you understand,
CSS properties below
.popup {
background-color: #08303a;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
border-radius: 3px;
text-align: center;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
padding: 10px;
text-align: center;
width: 400px;
max-height: 350px;
height: 350px;
overflow:scroll;
opacity: 0;
transition: .3s ease all;
transform:scale(0.7);
}
Without seeing your code - I believe this one will be a case of setting the following CSS property to your pop-up window:
overflow: scroll;
For future reference - it's useful to put the code you've worked with onto Stack Overflow so people can review your code and give you a definitive answer. Without it, people will just have to guess.
Hope that helps.

How to stop script resizing border box?

Whenever clicking the buttons to complete the sum, the box automatically resizes. I want to make sure the box remains a certain shape and doesn't adjust when the buttons are clicked.
I've tried padding eat and none seems to work. Rather new to css so excuse any obvious errors!
This is my css as I can't upload the photo because of the limit:
div {
border-style: solid;
text-align: center;
background: white;
border-width: 5px;
width: 300px;
margin-left: 450px;
margin-top: 50px;
padding: 50px 50px 100px 50px;
box-shadow: 0px 0px 30px gray;
}
the html
the script, just repeated near identically for each button
Try to use a normalize.css or a reset.css
Just include it in you html like other css files
https://necolas.github.io/normalize.css/

Bootstrap CSS Menu Box Type Issue

I am making a site in Bootstrap and am unable to achieve making a simple menu.
I want to make something like this:
So far I have achieved this:
I tried but cant make my CSS to work properly.
Here is my CSS Code:
.navbar-nav li a {
height: 90px;
line-height: 60px;
margin: 0 10px;
background-color: #f1f1f1;
font-size: 1.1em;
border-radius: 10px;
}
Any help would be appreciated.
Check this fiddle https://jsfiddle.net/gward90/h8cnbL5w/1/
To adjust the look of your buttons play with the padding of .nav>li>a Thats a BS default css class. The default padding value is set to padding: 10px 15px
You also need to remove the height from your .navbar-nav li a class that is whats making your buttons so large you also don't need the line-height.

kendoSlider increase/decrease button size

I'm trying to figure out how to decrease the size of the buttons on the kendoSlider (for that matter, the slider is also too large).
Their documentation doesn't really make any mention of it.
Why do I want to do this? I've recently added it to my footer and the buttons are so big that it's bumped up the size of my footer entirely. I'd rather decrease the button size instead of completely changing the size of my footer.
I would assume it's something with the CSS for the slider, but I haven't had any luck with that so far.
Here's an image to demonstrate what I mean:
if the Buttons to big, why just hide them?
With
showButtons: false
in the configuration.
The size of the Buttons you can change via css. For example:
.k-slider .k-button, .k-grid .k-slider .k-button {
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
/* new */
border: 1px solid red;
width: 20px;
height: 20px;
}
.k-slider .k-button .k-icon {
margin-top: 1px;
vertical-align: top;
}
Inspect the HTML element with chrome devtools or firefox.
I think the "size" of the slider you can adjust with this class:
.k-slider-wrap {
width: 100%;
height: 100%;
}
For the sprite-size eventually this helps out.
Or just creatte your own one.

Set border based on padding from content

As far as I know padding is the space between border and content. I tried using padding but instead of the border shrinking down to the content, the content gets pushed to a new line.
What I want is the content to stay but the border autoscale/auto size to the content. And if possible, if the content is resized (let's say different reso or the browser window gets smaller), the border also follows the content but still keeping the padding value (in my case, 10px)
Been playing around with margin and padding since yesterday, but still no idea how to do it.
Any help will be really appreciated, guys.
td;dr: How to get border to autosize/autoscale to content.
html:
<div id="container">
<div id="eachitem">
</div>
</div>
css:
#container {
margin: 0px 60px 0px;
}
#eachitem {
padding: 5px 2px 5px 5px;
border: 5px solid black;
}
Container is for position the whole content into postion based on margin.
Each item is for an individual item based on a list. That is where I want the border to autosize/autoscale to, to the items.
Since different content have different length. I want it to scale down to the max content as shown in image below:
Click Demo
#eachitem {
padding: 5px 2px 5px 5px;
border: 5px solid black;
float:left;
width:250px;
}
Try to use word-wrap property.
#container {
margin: 0px 60px 0px;
}
#eachitem {
padding: 5px 2px 5px 5px;
border: 5px solid black;
word-wrap: break-word;
}
Here is an example with your code.
After you edit your question, I see you want border to fit the content exactly? Well, try this.
#container {
margin: 0px 60px 0px;
}
#eachitem {
padding: 5px 2px 5px 5px;
border: 5px solid black;
display: inline-block;
word-wrap: break-word;
}
Here is an example.
Resizing padding, margins and border weights based on content size is nasty in any language, due to the unpredictable nature of text. Content length, font weight and sizes, display resolution and window size all affect text in myriad ways. Additionally, most high-level languages like JS cannot compute text dimensions without actually rendering it first. This means you must first display the text, then compute how much space it occupies, then twiddle the surrounding properties. And depending on the APIs available, you might not even be able to predict what values to use. In that case, you have to iterate over multiple values, see what it looks like, and if it is not correct, run through all the steps again. Not a fun endeavour to get into.

Categories

Resources