Header menu height increases but nothing happens in HTML source code? [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I've a problem that this website's Header menu :
آسفالت
is increasing it's height . if you stay at website for about 2-3 minutes , header menu will become whole of your page and you need to scroll to see other content of website .
but i couldn't find any css rules that's doing this . also i didn't find anything in JS files .
What is the problem ?

I think the problem could be in the orbit slider code : at each slide the picture loses 2px in its height and the #header-outer div, that doesn't have an height property, seems to increase.
Without a sample code to try is really difficult to help you, but as workaround/solution, you can add an height property set to the initial height of #header-outer div (92px)
Your style.css entry should be like this (added height only)
#header-outer{
width: 100%;
top: 0px;
left: 0px;
position: fixed;
background-color: #FFF;
z-index: 9998;
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.22);
padding: 28px 0px 0px;
overflow: visible !important;
height: 92px;
}

Related

How to set background invisible in react on one component on top of another [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
In React on a button click I make a small component (compSmall) visible on top of another big component (compBig). using css properties on compSmall such as
position: absolute;
width: 300px;
height: 150px;
margin-left: 40%;
margin-top: 200px;
border: 1px solid #0083a5;
z-index: 100;
But when compSmall is visible on top of compBig, background (means content of compBig) still visible . But I want content of compBig is to be not visible clear or blur when compSmall is visible.
How to achieve this.
PS:
I can only apply properties on compSmall, not on CompBig. Since CompBig is the whole application component except compSmall.
What about make compSmall with the same size of compBig, so you will not see the compBig and inside the compSmall you can create another component or just a div with those css properties.
JSX
<CompBig>
<CompSmall className="compSmall">
<div className="content"></div>
</CompSmall>
</CompBig>
CSS
.content {
position: absolute;
width: 300px;
height: 150px;
margin-left: 40%;
margin-top: 200px;
border: 1px solid #0083a5;
z-index: 100;
}
.compSmall {
/* Add the blur effect */
filter: blur(8px);
height: 100%;
width: 100%
}

Firefox ignoring Height: 100% css tag on div in favour of content [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am designing a simple website available below:
-- Removed --
And for the life of me, I can'f figure out why, for the left column (that contains the jQuery UI accordion) I have the height set for 100%, but Firefox ignores this and auto sizes to the size of the accordion content. Everything looks great on Chrome and Safari, but not Firefox...
Now the weird part, is that if I give a custom height to the "accordion" class, or the "scrollable" class, then it will have the correct properties.
The end result would be having the support button static at the bottom of the page, and for the accordion to be 100% of the parent div (which would be the size of the window) and be scrollable (like chrome and safari)
Does anyone out there have any information here?
well I know it won't (directly) help you but here your main problem is that overflow: auto doesn't work on firefox...
I tried the below, and it works in all browsers.
set height:100% for the tbody , tr and td.
<table class="main-table">
<tbody style="height: 100%;">
<tr style="display: table-row; height: 100%;">
<td class="list-view" style="opacity: 1; height: 100%;">
When you say that you are setting the height to 100%, where are you doing so? I assume that you're adding this into your style.css file. The jQuery UI has auto properties for height set that you need to override. Taken straight from the jquery-ui.css file:
.ui-accordion .ui-accordion-icons {
padding-left: 2.2em;
}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
padding-left: 2.2em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
position: absolute;
left: .5em;
top: 50%;
margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
overflow: auto;
}
The best place to start would be to start editing these features in the jquery-ui.css file (I see you downloaded the file rather than using the CDN. Border-top is your best bet). Try to get the height to fit what you want. When using bootstrap, materialize, etc you often have to go in and edit the downloaded css file because you're changes won't override theirs. Do a quick text search for "accordion" in the jquery-ui.css file and you can quickly find wherever they're defining height properties for the element. Hope this helps.

How to remove spacing between the top of a border and a div [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
I currently have a div that is displaying a chart. In my HTML page, I have given it the ID of "main". In my CSS, I am trying to bring the chart a bit more up in the page, however, have had issues. I currently have a border, and am trying to bring the chart up to the border. In other words, I won't want any padding/space between the div and the top of the border. This is how it looks like right now:
And here is how my CSS code looks like right now:
#main {
position:relative;
width:95%;
left:3%;
border: 3px solid green;
padding-top: 0px;
}
Any help would be appreciated. Thanks!
Try applying negative marging or negative top to your chart container...
Ex:
#main {
position:relative;
width:95%;
left:3%;
border: 3px solid green;
padding-top: 0px;
top:-20px
}
or
#main {
position:relative;
width:95%;
left:3%;
border: 3px solid green;
padding-top: 0px;
margin-top:-20px;
}

Template conversion from XHTML 1 to HTML5 , CSS Error [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This is a simple 3-column template, with Side-bars on Left and on Right sides and content in the middle. I'm not able to understand the spacing between the columns, there's too much of space between the content(post) column and right side-bar.
[side-bar] [content/ post / matter]_____space/gap___[side-bar]
I'm not able to reduce/remove the '_space/gap ' to make the template look like
[side-bar] [content/ post / matter] [side-bar]
Before posting this here, I've tried chrome-developer tool to know and refactor it, I've not been able to understand it.
JSFiddle Example
Change this section of your code:
#right {
float: right;
width: 180px;
padding: 10px 30px 10px 0;
}
to this:
#right {
float: left;
width: 180px;
margin-left: 10px;
padding: 10px 30px 10px 0;
}
Floating right will hold that container to the rightmost position it can attain within its own container.

CSS Rectangle As links [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have 3 rectangles that I've created with CSS. I want them to be clickable and link them to a file called "index.html". I've been searching over the web but could not find a way to do it. Is there also a way where hovering your mouse over the rectangle would just have the index.html file pop up but not open in a completely new window? Here is a snippet of what I have so far:
.rec
{
height: 100px;
width: 125px;
}
#d1
{
background : lightgreen;
border: 2px solid black;
display: inline-block;
left: 0%;
}
#r1
{
background : red;
border: 2px solid black;
display: inline-block;
left: 10%; position: relative;
}
#r3
{
background : white;
border: 2px solid black;
display: inline-block;
left: 20%; position: relative;
}
You should see JavaScript and jQuery tutorials. It's what, mostly, makes web pages interactive. Although in here, the best solution is clearly to use
<a href="index.html">
it would be good for you to learn them, and their incredible power. Check this fiddle here: http://jsfiddle.net/qjntjyyr/
As you can see, it's quite simple. In the next fiddle, I'm using an event for when the mouse goes over the squares.
http://jsfiddle.net/qjntjyyr/1/
Have fun with it, you can manipulate almost everything you want.
The clickable rectangles:
Index
Index
Index
As for the little box that appears when you hover them, you could use a title="" in the anchor tag, but that has the default styling the OS gives it. To customize one yourself you'd need JavaScript.
I found an interesting link to learn for your problem:css-trick
But the first answer is a good one to use.

Categories

Resources