I am using Basel Theme on my OpenCart 3.0.3.2 store. I added Basel Carousel on my page but its showing margin on left and right side of the Carousel. Please help me with making it to full-screen and also I want to remove margin (space) between banners.
I can provide you codes if you want. There is a twig, tpl and php file for this.
Each module in your theme wraps in .container, and this wrappers you can find in
/catalog/view/theme/basel/template/common/header.twig
<div class="container">
{{ position_top }}
</div>
/catalog/view/theme/basel/template/common/footer.twig
<div class="container">
{{ position_bottom }}
</div>
Depends on which layout position your Carousel is. Just remove container from class. But in this case all modules in this position will be 100% width, know that.
Or you can do it with only CSS. Find and add at the end of a document
/catalog/view/theme/basel/stylesheet/stylesheet.css
.widget.carousel-widget.contrast-bg {
position: unset;
min-height: 130px; /* you can change it according to your images height */
background: none;
padding: 0;
}
.widget.carousel-widget .slick-slider {
position: absolute;
background: #f7f7f7;
left: 0;
width: 100%;
padding: 30px 0; /* you can change it any way you like */
}
.grid-holder .item.slick-slide {
padding: 0 5px 20px 5px; /* 5px is for left and right padding between images, you can set in 0 if you like */
}
UPDATED
All modules in this template are covered in <div class="content">...</div>, so we can release them by adding </div>..<div class="content"> around the module content. And this will be like
<div class="content"></div>
our module content
<div class="content"></div>
Go to catalog/view/theme/basel/template/extension/module/basel_carousel.twig
On the beginning of the document you will find
<div class="widget ...
Change it to
</div>
<style>
.full-width {
padding-left: 40px !important; padding-right: 40px !important;
}
.grid-holder .item.slick-slide {
padding: 0 0px 20px 0px;
}
.grid-holder .slick-list {
padding-right: 3px;
}
</style>
<div class="full-width widget ...
On the end of the document add
<div class="container">
And you can do the same in catalog/view/theme/basel/template/extension/module/basel_product.twig
Related
This is code for the div
width: 110px;
height: 10px;
background: #ffff;
border-radius: 30px;
margin-top: -10px;
and this is how it displays it
But if display is set as list-item it shows up,any other display won't work
I'm not sure what i messed up,and why height shows 0
height only works on block box, and display: list-item uses block box by default. I guess your original css may contain inline-type display and cause height not working. Here is an example to show the results in different cases:
.bar {
width: 110px;
height: 10px;
background: #ffff;
border-radius: 30px;
margin-top: -10px;
}
.display-block {
display: block;
}
.display-inline {
display: inline;
}
.display-list-item {
display: list-item;
}
<body style="background: #999;padding: 10px">
<div>Div (default display is "block")</div>
<div class="bar"></div>
<div>Span (default display is "inline")</div>
<span class="bar"></span>
<div>With "inline" display</div>
<div class="bar display-inline"></div>
<div>With "block" display</div>
<div class="bar display-block"></div>
<div>With "list-item" display</div>
<div class="bar display-list-item"></div>
</body>
Ref: MDN - Introduction to the CSS basic box model - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content_area
Another possible case is that there are other display, height or max-height settings in the current css hierarchy and override the original ones. You may check the css applied to the target div is what you want.
Hey I create Ember application , And I try to set Sticky Footer.
I try to do this by this tutorial Sticky Footer On CSS-Tricks , Cause it's work for me once.
But with Ember its dosen't work
My css:
.mainFooter {
height:100px;
color:white;
background-color: #0c2635;
text-align:center;
}
.wrapper {
min-height: 100%;
margin-bottom: -100px;
}
.wrapper:after {
content: "";
display: block;
}
.mainFooter, .wrapper:after {
height: 100px;
}
My HTML:
<footer class="mainFooter">
SOME TEXT
</footer>
As I said, it's dosent work.
I watch the source code via the Inspector and I saw that Ember added its own wrapper to content the I put in the application.hbs file, this wrapper have a class named ember-view so I try to do:
.ember-view {
min-height: 100%;
}
But it's dosent work either, the footer displayed in the middle of the page.
Someone maybe try this and successid?
I would like to know about a solution to this problem.
I don't know how to fake an Ember app in jsfiddle/codeopen so I upload the app to my server, url: http://drawyourgif.pe.hu/dist/
EDIT
According to the solution that kumkanillam sugest I did so:
Application.hbs:
{{outlet "modal"}}
{{partial "header"}}
<div id="gif" class="wrapper">
{{outlet}}
</div>
{{partial "footer"}}
app.js
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
rootElement: '#gif',
Resolver
});
And I get this error in the console:
ember.debug.js:43272Uncaught TypeError: Cannot read property 'tagName' of undefined
What I did wrong?
.ember-view will be included for all ember component by default so it's not good to apply css property for this class.
there may be many ways but the below should help.
You can wrap your application.hbs to render inside your page-wrap div.
for this you need to include the below line in
index.html
<div id="app-name" class="wrapper">
{{content-for "body"}}
</div>
application.hbs
<h1> Content </h1>
{{outlet}}
<div id="footer">
<p>I'm the Sticky Footer. inside application.hbs</p>
</div>
Configure rootElement in app.js. that will force entire app to include it in app-name div.
app.js
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
rootElement: '#app-name',
Resolver
});
app.css
#wrapper {
min-height: 100%;
overflow: auto;
}
#footer {
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 50px;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
}
Final Update:
You don't need to change anything in app.js. just look at the sample twiddle. I think this will help you
SAMPLE TWIDDLE
Here is a solution that uses flexbox. You may not want to use flexbox because you're unfamiliar with it, but I'll submit this answer for later google searches.
Here's a codepen with very little content in the main body: http://codepen.io/anon/pen/KgXgjV
Here's the same css with much more content in the main area: http://codepen.io/anon/pen/dpVpBK
Here is an example of why position: absolute doesn't work: https://ember-twiddle.com/f620502b8172f4181c9d58503e02e39c?openFiles=templates.application.hbs%2C
HTML
<html>
<body>
<div id="root" class="ember-application">
<div id="ember332" class="ember-view">
<div class='main-content'>
<h1>Welcome to Ember Twiddle</h1>
<br />
<p>
this page has very little content
</p>
</div>
<div id="footer">
<p>I'm the Sticky Footer. inside application.hbs</p>
</div>
</div>
</div>
</body>
</html>
CSS
/* this is just to reset codepen */
/* probably not necessary on ember */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* end reset */
html, body, #root {
height: 100%;
}
.ember-view {
display: flex;
flex-direction: column;
min-height: 100vh;
background: lightblue;
}
.main-content {
flex: 1;
}
#footer {
width: 100%;
height: 50px;
background-color: grey;
}
I am programing a webpage with html and CSS. My pseudo class :hover stopped working on my webpage, but :focus still works. Hover was working fine, and then I made an unrelated edit (added an image to one of my blocks), and noticed it had stoped working. I deleated my last change and it still did not work.
I have checked everything and ran both the html and css through validators and there are no errors other than something about using character encoding, but I know it worked fine without that. It really makes no sense!
I will show my page and my code. Keep in mind this is my very first webpage, I know that I did not optimize my background images properly, and may have some unnecessary divs, but I feel pretty good about it considering a week ago I did not know what html was. I have heavily commented and organised my CSS, you can find my hover code near the top along with the rest of the none classes/ID's. The hover link is the only link on the webpage on the sidebar.
http://www.adrianhoulewebprojects.com/HomePage.html
Here is my HTML
<!--Home Page for adrianhoulewebpojects.com Version 1.0-->
<!--Written by Adrian Houle-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/HomePageStyle.css">
<title>Adrian Houle Web Projects</title>
</head>
<body>
<div id="Sidebar">
<h3>Projects</h3>
<ul>
<li>
Under Construction
</li>
<li>Unfinished Project #2</li>
<li>Unfinished Project #3</li>
<li>Unfinished Project #4</li>
<li>Unfinished Project #5</li>
</ul>
</div>
<div class="box">
<div class="HalfSpacer"></div>
<div class="TransBox" id="Header">
<h1>Welcome to<br>AdrianHouleWebProjects.com</h1>
</div>
<div class="Spacer"></div>
<div class="TransBox" id=About>
<h2>About:</h2>
<p>Welcome to my website. I had a bit of time over the holidays and decided to finally get around to learning web programming. The purpose of this website is to give me a place to practice and display what I learn in the form of web projects. I may also be making some blogs that will also serve to showcase my travelling and hobbies.</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="NewStuff">
<h2>Coming Soon</h2>
<ul>
<li>
<h3>Australia Travel Blog</h3>
<img src="http://www.adrianhoulewebprojects.com/img/AustralianFlag100by50.gif" alt="Australian Flag" >
<p>2013-2014 Australia Travel Blog coming soon.</p>
</li>
</ul>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Contact">
<h2>Contact Info:</h2>
<p class="Italic">Please report any compatibility, accessibility, or security issues to:</p>
<p>Adrian Houle</p>
<p>adrianhoule#gmail.com</p>
</div>
<div class="Spacer"></div>
<div class="TransBox" id="Footer">
<p>Website by Adrian Houle</p>
</div>
</div>
<div class="BottomBorder"></div>
</body>
</html>
Here is my CSS
/***************************************** Info *********************************************************/
/*Style Sheet for HomePage of adrianhoulewebprojects.com*/
/*Written by Adrian Houle*/
/*For any issues with my website (compatibility, accessibility, white-hat reports) feel free to contact me at
adrianhoule#gmail.com
/*Page Purpose: Create a homepage that welcomes users to my website and directs them to various projects*/
/***********************************************************************************************************/
/************************************* Table of Contents **************************************************/
/*CSS layout*/
/* -none specific elements*/
/* -classes*/
/* -ID's and children of ID's*/
/* -Other*/
/************************************************************************************************************/
/************************************** CSS code ****************************************************/
/* -none specific elements ***********************************************************************************/
p {
font-size: large;
font-weight: bolder;
}
a {
color: blue;
}
a :hover, :focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
/* -classes **************************************************************************************************/
/*Element that contains everything except the sidebar and has the main background image.*/
.box {
display: block;
position: relative;
width: 100%; /*test and adjust to keep it from expading the browser*/
height: 100%;
border: 3px solid black;
right: 0;
top: 0px;
padding: 0;
background-image: url(http://www.adrianhoulewebprojects.com/img/CautionStripes.png);
}
/*Allows for synchronised space adjustment between elements*/
.Spacer {
position :relative;
height: 100px;
}
/*Allows for synchronised space adjustment between elements*/
.HalfSpacer {
position :relative;
height: 30px;
}
/*Every element that contains text belongs to this class*/
/*This class has nothing to do with transgender boxes, or gender boxes in general*/
.TransBox {
width: 70%;
padding: 1em;
z-index: 1;
left: 20%;
position: relative;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
moz-box-shadow: 0 0 5px 5px #888; /*shadow effect with cross compatibility*/
webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
.Italic {
font-style: Italic;
}
/* -ID's and children of ID's********************************************************************************/
/*Sidebar, to be fixed to the left hand side of the screen. Must allow conent to the right of it*/
#Sidebar {
height: 100%;
width: 10%;
left: 0px;
top: 0px;
padding: 2%;
display: inline;
position: fixed;
background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
border-style: solid;
border-width: 3px;
z-index: 2;
}
#Sidebar ul {
padding-left:0;
}
#Sidebar li {
margin: 10%;
}
/*Header text*/
#Header h1 {
text-align: center;
}
#Footer p {
text-align: center;
}
/* -Other (empty)*****************************************************************************************/
Thank you for any help.
CSS is very touchy about putting extra spaces in it. Combine a with :hover like this:
a:hover, a:focus{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
Also want to make it a:focus unless you want every element to be affected.
Remove the space between a and :hover
a:hover{
background-color: yellow;
text-decoration: none;
font-size: larger;
}
I have the following HTML code where the subnav div is a collection of div tags that will act as tabs across the featuredexhibit div. Problem is that there is a white space adding between the top of the featureexhibit div and bottom of the subnav tab.
HTML:
<div id="subnav">
<div id="subnavtab">Plan Your Visit</div>
<div id="subnavtab">Tour the Museum</div>
<div id="subnavtab">Program & Events</div>
<div id="subnavtab">Membership</div>
<div id="subnavtab">Donate</div>
</div>
<div id="featuredexhibit">
Featured Exhibit - this can be a rotating menu of exhibits
</div>
CSS:
#subnav { margin-top: 20px; width: 740px; display: inline-block; }
#featuredexhibit { width: 732px; height: 200px; background-color: #A7A9AC; margin: 0; }
#subnavtab { background-color: #A1CD3A; float: left; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; display: inline-block; }
I have tried using the Chrome Developer Tools to find the issue but I do not have any luck or I do not know what to look for.
There doesn't seem to be any problem with your code.
Are you sure no other CSS is conflicting? Make sure the CSS tags you are using are from the last CSS added in the HTML.
For example,
<link rel="stylesheet" type="text/css" href="css-1.css">
<link rel="stylesheet" type="text/css" href="css-2.css">
If there are common tags in "css-2.css", then it will over ride any similar tags of "css-1.css"
You should give a float to the subnav and then clear the featuredexhibit and then only it couldn't save a space between them.
#subnav{float: left;}
#featuredexhibit{clear: both;}
See this Demo
I'm honestly not sure why the white space is there, but I got it fixed in Chrome by removing the inline-block and creating a clear both.
CSS
.subnav { margin-top: 20px; width: 740px; }
.featuredexhibit { width: 732px; height: 200px; background-color: #A7A9AC; margin: 0; }
.subnavtab { background-color: #A1CD3A; float: left; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; }
.clear { clear: both; }
HTML
<div class="subnav">
<div class="subnavtab">Plan Your Visit</div>
<div class="subnavtab">Tour the Museum</div>
<div class="subnavtab">Program & Events</div>
<div class="subnavtab">Membership</div>
<div class="subnavtab">Donate</div>
<div class="clear"></div>
</div>
<div class="featuredexhibit">
Featured Exhibit - this can be a rotating menu of exhibits
</div>
jsFiddle: http://jsfiddle.net/vFFx5/
I know this is old, but since I just ran into this issue I might as well point future visitors to this article: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
The problem seems to be that a new line counts as white space character in a row of inline-block elements. To solve this use floated blocks or flexbox.
Basically I'm making a navigation bar and due to Jquery doing a lot of resizing to make a website look 'pretty' I don't want to use a horizontal list and so each button is created like so:
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
(yes they're all image buttons for good reason)
but the only problem is they're fixed and set to "top 0" at the top of the page and as a result cannot sit next to each other but rather overlap, any idea on how I can I still keep the position to fixed and they top to 0 yet keep them next to each other?
HTML
<div id="top">
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
</div>
CSS
#top a.button { position: fixed; top: 0; padding: 12px; background: url('glacial_ice.jpg'); text-decoration: none; color: black; border-radius: 0px 0px 25px 25px; }
#top { position: relative; top:0; padding-left: 25px; }
Init function (runs on $(document).ready())
$('a.button').animate({
height: '+=5px',
}, 20, function() {
$('a.button').animate({
opacity: 0.6,
height: '-=5px',
}, 20);
});
Thanks
Put them all in a container, i.e. id="header", give the header position:fixed;top:0;etc...
Then, for each of the link/buttons give them:
position:relative;display:inline-block;float:left;
if you want them centered, then in the #header use text-align:center; and remove float:left from the links
So the container will be fixed, but the buttons inside will be relative and not overlap.
hope this helps!
very crude example
http://jsfiddle.net/6SCTZ/
<div id="header">
<div class="button">button1</div>
<div class="button">button2</div>
<div class="button">button3</div>
</div>
CSS:
#header { position:fixed;top:0;width:100%;height:30px;background:black; text-align:center }
.button {position:relative;display:inline-block;color:white;margin:0 5px 0 5px;}
Just put whatever elements need to be fixed within a container element (in this case, I'll use a div with an ID of "top_fixed").
Consider the following html:
<div id='top_fixed'>
<a href='http://google.com'>Google</a>
<a href='http://yahoo.com'>Yahoo</a>
</div>
<div id='tall'></div>
Now, the following CSS:
a { display: inline; }
#top_fixed { position: fixed; top: 0; left: 0; width: auto; }
#tall {height: 2000px; background: #000;}
DEMO: http://jsfiddle.net/mHKNc/1/