whats up.
I am trying to code fixed navigation that stays at the top of the page all the time and I am dealing with the problem that my fixed navigation blinks every time when a href got clicked. Any ideas how to fix that?
HTML:
<nav id='nav_bar' >
<div class="row" align="center">
<div class="col-md-3"><div class="miniLogo"></div>
</div>
<div class="col-md-9">
<div class="footerContainerActive" align="center">
<div class="footerLinksContainer">Apie mus</div>
<div class="footerLinksSkirtukas"></div>
<div class="footerLinksContainer">Paslaugos</div>
<div class="footerLinksSkirtukas"></div>
<div class="footerLinksContainer">Galerija</div>
<div class="footerLinksSkirtukas"></div>
<div class="footerLinksContainer">Kontaktai</div>
</div>
</div>
</div>
</nav>
Javascript:
https://pastebin.com/wssgU5ZY
CSS:
https://pastebin.com/7nV9aHT1
Include this in your CSS File.
.a:hover,.a:active,.a:focus
{
text-decoration:none;
}
Related
So bit of background on my issue. I'm using an external carousel and I am trying to modify each image section to include text. There seems to be an overflow:hidden on the sp-carousel-frame class that is making it not visible but without this the unselected images on either side go full size.
I basically need the item-text class to be displayed.
I really hope I explained this ok.
I'm going include an image that shows the issue below.
HTML
<script src="https://wordpress-84115-1849710.cloudwaysapps.com/wp-content/themes/inspiration-marketing-theme/assets/js/carousel.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container collaboration-header">
<div class="row">
<div class="col-md-12">
<h1>Collaboration and Teamwork</h1>
</div>
</div>
</div>
<div class="container main-carousel">
<div class="row">
<div class="col-md-12">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello World
</div>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.collaboration-header h1{
text-align: center;
padding: 1.5em 0;
}
.main-carousel {
margin-bottom: 20% !important;
}
The JSFiddle Below:
Here is my JSFiddle
Add Class this carousel-caption on item-text
<div class="item-text carousel-caption">
Hello World
</div>
https://jsfiddle.net/lalji1051/3hyb82fg/1/
OK I got it solved basically although I probably need to tweak it a bit to get it perfect what I did was disable the overflow:hidden on the sp-carousel-frame and change it to visible. Then on the parent div col-md-12 I attached another class called overflow:
HTML
<div class="col-md-12 overflow">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello Hows it going like
</div>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div><!-- End sp-carousel-frame -->
<hr />
</div><!-- Close Col-md-12 -->
CSS:
.sp-carousel-frame {
overflow: visible !important;
}
.overflow {
overflow: hidden !important;
padding: 0 !important;
}
Updated JSFiddle
I wrote a website as shown here.
Code is:
<div id="mainDiv" class="container">
<div id="header">
<div class="plc">
<h1></h1>
<nav>
<div id="navPos">
<div style="position: relative;right: 113px;">Register</div>
<div style="position: absolute;right: 255px;top: 37px;">Login</div>
<div style="position: absolute;top: 38px;right: 123px;">Market</div>
</div>
</nav>
</div>
</div>
<div id="body" class="container-fluid">
<div id="container">
<div id="overlay"></div>
<div id="menu"></div>
<div id="formPos"></div>
<div id="or">OR</div>
<div id="fbReg">
<img src="images/fbOne.png" id="fbIcon">
<div id="fbPos">Register with Facebook</div>
</div>
<div id="gReg">
<img src="images/gPlus.jpg" id="gIcon">
<div id="gPos">Register with Google</div>
</div>
<div id="cliPos">
<img src="images/Bistip-in-media.png" id="imgCli">
</div>
</div>
</div>
<div id="footer">
hello
</div>
</div>
CSS can be found in that jsfiddle. The problem is: Only body is scrollable, but header and footer aren't scrollable. As a result, I can't see the footer. How can I fix it?
For best results, expand the output window of jsfiddle
Anytime you find no scroll, is because there is overflow:hidden; property, which should be removed or changed to 'auto'
In your Case:
1) Remove overflow:hidden; or overflow:auto;
2) If you do not want scroll in your content(i.e. portion excluding header & footer)
DEMO
CSS
html,body
{
overflow:auto; /* Or just REMOVE overflow*/
}
#body
{
overflow:auto; /* Or just REMOVE overflow*/]
}
I have a page that essentially behaving as I want it, except that I would like to place an image every so often along a horizontal scroll track. This JS Fiddle shows the code: http://jsfiddle.net/bretwhiteley/39cLc0vm/
So what I am trying to do is add an image that is the height of the "Scrolling" DIV 1000px from the left. I tried to use the following code, with no luck:
<div class="Timeline_Break" style="margin-left:1000px;">
<div style="margin-left:1000px"><img src="http://s.w-x.co/TWC_logo_100x100.gif" style="width:20px;height:130px"></div>
</div>
The Styling is:
.Timeline_Break {
position: fixed;
z-index: 99;
}
test this code
jsfiddle
<div id="Header">
Google Chart ...
</div>
<div id="Map">Map</div>
<div id="Footer">
<div id="FooterLeft">
<div class="Timeline_Title">Industry</div>
<div class="Timeline_Title">Infrastructure</div>
<div class="Timeline_Title">Individuals</div>
</div>
<div id="FooterRight">
<div id="Scrolling">
<div class="Timeline_Banner">
<div style="margin-left:400px;"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:20px">
</div>
</div>
<div class="Timeline_Banner">
<div style="margin-left:700px"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:20px">
</div>
</div>
<div class="Timeline_Banner">
<div style="margin-left:200px"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:20px">
</div>
</div>
<div style="color:red;position:relative">
<div style="color:blue;position:absolute;top:0px;left:500px"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:130px">
</div>
</div>
</div>
</div>
</div>
My HTML code:
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span12">banner</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
<div class="span4">9</div>
Css:
.span4:nth-child(3n+1){
color: red;
}
In result there must be 1, 4, 7 red colored. But it's not.
Example: http://jsfiddle.net/473UR/
How to solve that problem?
.nth-child works with the consecutive element. If there is any other elements comes in between it starts calculating from the first.
<div class="span4">1</div> <-- this is first-child -->
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span12">banner</div>
<div class="span4">4</div> <-- sequence reset.
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
<div class="span4">9</div>
That's because .span12 counts as a child too. If you remove it, it will work
You need to move your banner div and it will work
EXAMPLE
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
<div class="span4">9</div>
<div class="span12">banner</div>
I have the following:
<!-- BLUE BOX --!>
<div style="width:100%;position:relative;min-height:100%">
<div style="position:absolute;left:1px;top:15px;">
IMAGE GOES HERE
</div>
<div style="position:absolute;left:20px;top:0;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">
messages go here
</div>
</div>
<!-- PINK BOX --!>
<div style="width:100%;position:relative;min-height:100%">
<div style="position:absolute;right:1px;top:15px;">
IMAGE HERE
</div>
<div style="position:absolute;right:20px;top:0;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">
messages go here
</div>
</div>
here is the image of the HTML output:
Please help me getting those divs in vertical order, I don't want them to float over each other, I want the message div to get the automatic height according to content too.
You should use floats for this. float:left , float:right and a clear:both inbetween :
<div style="width:100%;position:relative;min-height:100%;float:left">
<div style="float:left">img</div>
<div style="float:left;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">First messages go here</div>
</div>
<div style="clear:both;width:100%;position:relative;min-height:100%">
<div style="float:right">img</div>
<div style="float:right;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">messages go here</div>
</div>
You can see it in action here : jsfiddle
Remove absolute position form your message DIV. Write like this:
<div style="position:relative;">
<div style="position:absolute;left:1px;top:15px;">
IMAGE GOES HERE
</div>
<div style="margin-left:20px;margin-right:20%;background-color:#2b5797; color:#fff;min-height:40px;border-radius:5px;padding:10px;">
messages go here
</div>
</div>
<div style="position:relative;">
<div style="position:absolute;right:1px;top:15px;">
IMAGE HERE
</div>
<div style="margin-right:20px;margin-left:20%;background-color:#b91d47; color:#fff;border-radius:5px;padding:10px;min-height:40px">
messages go here
</div>
</div>
Check this http://jsfiddle.net/y44NC/2/