I created a menu with a href="#" links and it works in all pages of my website but on the page "about it doesnt work and i think its because ive also another "href="#"" funcion in another div.... how can i solve this?
MENU:
<a class="toggle-menu" href="#">
<i></i>
<i></i>
<i></i>
</a>
<div class="menu-drawer">
<ul>
<li>Home</li>
<li>About</li>
...
INSIDE OF ABOUT PAGE, I'VE:
<li class="About">
<a href="#">
<img width="347" height="500" src="https://files.cargocollective.com/c791011/dino-a-cores.jpg" class="imgvor wp-post-image" alt="" srcset="https://files.cargocollective.com/c791011/dino-a-cores.jpg 1000w, https://files.cargocollective.com/c791011/dino-a-cores.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" style="width: 347px; height: 500px; left: 402px; top: 280.667px; mix-blend-mode: multiply;">
(the class="about" is one funcion that ive, one picture follow my cursor on about section.)
thank you
Related
This question already has answers here:
Separators for Navigation
(9 answers)
Closed 5 years ago.
Hi I'm trying to put a splitline between the tab "Home" and "Cart" and the tab "Help" and "Contact".
.tab-separator {display: inline-block;
padding-right: 5px;
border-right-style: solid;
border-right-width: thin;
border-right-color: red;
height: 10px;
}
<div class="tab-separator">
<div class="tab-menu" id="tab" style="display: inline-block;">
Home
</div>
</div>
<div class="tab-menu" id="tab1" style="display: inline-block;">
Cart
</div>
<div class="tab-separator">
<div class="tab-menu" id="tab2" style="display: inline-block;">
<a href="#">
Help
</a>
</div>
</div>
<div class="tab-menu" id="tab3" style="display: inline-block;">
Contact
</div>
I tried to do so by displaying the border right of the div that surrounds the div tab. But I have a problem I don't manage to move the splitline as I wish. I want it to not be so high, but if I set a margin top it doesn't work, it will move every tabs.
So what I want is the splitline to be a little lower, maybe 2 pixels lower.
You can put "|" easily with UL LI
ul li {
display: inline-block;
}
ul li:not(:last-child):after {
content: "|";
}
<ul class="standard-nav visible-lg">
<li><a id="intro-linker" class="scroll" href="#intro">Start a fire</a>
</li>
<li><a id="about-linker" class="scroll" href="#ourfires">Our fire</a>
</li>
<li><a id="services-linker" class="scroll" href="#pastfires">Past fires</a>
</li>
<li><a id="team-linker" class="scroll" href="#team">Chief fire lighter</a>
</li>
<li><a id="portfolio-linker" class="scroll" href="#seriesfires">Series of fires</a>
</li>
<li><a id="contact-linker" class="scroll" href="#contact">Get fired up</a>
</li>
</ul>
this can easily be done using border-right, like this :
.right_separator{
border-right: 1px solid;/*This will add a border for the right of the element*/
padding-right: 3px;
}
<div class="tab-menu right_separator" id="tab" style="display: inline-block;">
<a href="#">
Home
</a>
</div>
<div class="tab-menu right_separator" id="tab1" style="display: inline-block;">
<a href="#">
Cart
</a>
</div>
<div class="tab-menu right_separator" id="tab2" style="display: inline-block;">
<a href="#">
Help
</a>
</div>
<!-- Don't add .right_separator for the last element-->
<div class="tab-menu" id="tab3" style="display: inline-block;">
<a href="#">
Contact
</a>
</div>
I've created this content with drupal. Below the image you have a next page button.
I also set a button for next image on top of the image (pager) so if the visitor clicks on the image it would go next page.
How can i stretch the link over my image, drupal generated 2 divs and the images are variable in height.
<div class="view-content">
<div class="container12">
<div class="pagerfoto column12">
<h2 class="element-invisible">Pagina's</h2>
<div class="item-list">
<ul class="pager">
<li class="pager-next first">
›
</li>
<li class="pager-last last">
</ul>
</div>
</div>
</div>
<div class="container12">
<ul>
<li class="views-row views-row-1 column12">
<div>
<div class="views-field views-field-field-image">
<div class="field-content">
<img width="900" height="675" alt="" src="http://www.logicaarchitectuur.be/test/sites/default/files/styles/gallery_large/public/desert.jpg?itok=J6D4TAEL" typeof="foaf:Image">
</div>
</div>
</li>
</ul>
</div>
site
.pagerfoto{
z-index:1;
position:absolute;
padding-top:1.71429em;
display:block;
}
.pagerfoto ul li.pager-next a{
display:block;
margin:0 auto;
padding:0;
text-indent: -9999px;
}
This is the current css i use for ma a label.
Try giving this css:
.view-project11 {
position: relative;
}
.item-list {
left: 50%;
position: absolute;
top: 50%;
}
If I understand your question correctly you would like the user to click on the image and then the page will go to the next image.
wrapping your image in the tag will allow you to do that.
example
<a width="900" height="675" href="/test/project11?page=1">
<img width="900" height="675" alt="" src="http://www.logicaarchitectuur.be/test/sites/default/files/styles/gallery_large/public/desert.jpg?itok=J6D4TAEL" typeof="foaf:Image">
</a>
Need a little assistance.
Click here and scroll down to Print Marketing block...those 4 blocks have to be side by side but the 4th one is going down for some reason...
Here is the block of code for that area
<div class="eleven columns bottom-4">
<h3 class="title">Print Marketing</h3>
<div class="five columns item element-2">
<a href="#">
<img src="images/img/sellers/slide1a.png" alt="" class="pic" />
</a>
</div>
<!-- End -->
<!-- item 2 -->
<div class="five columns item element-2">
<a href="#">
<img src="images/img/sellers/slide1b.png" alt="" class="pic" />
</a>
</div>
<!-- End -->
<!-- item 3 -->
<div class="five columns item element-2">
<a href="#">
<img src="images/img/sellers/slide1a.png" alt="" class="pic" />
</a>
</div>
<!-- End -->
<!-- item 4 -->
<div class="five columns item element-2">
<a href="#">
<img src="images/img/sellers/slide1b.png" alt="" class="pic" />
</a>
</div>
<!-- End -->
</div>
CSS is as follows..
.container .columns {
float: left;
display: inline;
margin-left: 10px;
margin-right: 10px;
}
.container .five.columns {
width: 280px;
}
.container .eleven.columns {
width: 640px;
}
I have tried many things on it. Even gave them an inline style which doesnt work either...Any ideas on this because all of them have the same class that is applied to them but one block whacks all of the rest.
Let me know thanks.
You could always try to nest the divs within a table, if you're trying to align them to a grid like that.
On the third div block, you need to add clear:left; (either inline or via a class).
i have full width slider and i have button on each image with link
but when i apply hover effect on first slider anchor tag its not working while its working for second slider,when i write a:hover{background:blue;} its not working for first slider.
here is my html
<ul class="cbp-bislideshow" id="cbp-bislideshow">
<li style="background-image: url('images/slides/slide1.jpg'); opacity: 1;">
<div class="info">
<h2>The Real Thing</h2> <label>Quality. Beauty. Durability. Only from </label>
<a class="link" title="Get Inspired" href="#"><span>Get Inspired</span></a>
</div>
<img alt="image01" src="images/slides/slide1.jpg">
</li>
<li style="background-image: url('images/slides/slide2.jpg'); opacity: 0;">
<div class="info">
<h2>The Real Thing2</h2> <label>Quality. Beauty. Durability. Only from.</label>
<a class="link" title="Get Inspired" href="#"><span>Get Inspired</span></a>
</div>
<img alt="image02" src="images/slides/slide2.jpg">
</li>
</ul>
i use this slider
http://tympanus.net/Blueprints/BackgroundSlideshow/
try
.info{
z-index:999;
position:relative;
}
Might be because of the order in which you've got your elements.
Try setting the elements out like below. If you're trying to do what I think you are the image will be covering the html above it so the hover effect won't work.
<li style="background-image: url('images/slides/slide2.jpg'); opacity: 0;">
<img alt="image02" src="images/slides/slide2.jpg">
<div class="info">
<h2>The Real Thing2</h2> <label>Quality. Beauty. Durability. Only from.</label>
<a class="link" title="Get Inspired" href="#"><span>Get Inspired</span></a>
</div>
</li>
Hi so I'm working on a site with an image gallery and I decided to use a Codeigniter and a library called Image CRUD for some of the backend stuff, and Twitter Bootstrap for the front end. Its pretty basic stuff. The problem is Image CRUD generates a lot of its own code for the front end so I'm having trouble getting it to look the way I want. Im trying to make a responsive gallery that resizes and stays centered on a bunch of different devices. This should be a piece of cake with bootstrap, but for some reason it just won't work. Any help would be greatly appreciated!
Heres the code for the images that Image CRUD outputs:
<ul class='photos-crud'>
<li id="photos_206">
<div class='photo-box'>
<img src='link_to_thumb__b551b-6.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_203">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_204">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_205">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_202">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
<li id="photos_201">
<div class='photo-box'>
<img src='link_to_thumb.jpg' width='290' height='260' class="img-responsive basic-image" />
<div class="clear"></div>
</div>
</li>
</ul>
The issue may be with your image width/height having exact dimensions. If you can get rid of that and let bootstrap take over, that'd be great. Responsive images are usually 100% of the parent width and that parent having a percentage of something else. Maybe you can use SASS to #extend bootstrap styles into the generated elements so..
.photos-crud { #extend .row }
.photos-crud > li { #extend .col-md-3}
Something like that will setup the grid for laying out the images, then if you can remove the auto-generated dimensions, great, but if not maybe use !important to override the dimensions like..
.photos-crud > li img {width:100% !important; height:auto !important;}