We want to apply a curved shadow line on our menu, at the bottom (see Image).
This shadow/curve must be in-front of the sub menu. So the shadow overlaps the sub menu. This is the problem, because when we hover to the sub menu the sub menu will disappear.
This is because the wrapper got a higher Z-Index then the sub menu.
#header {
width: 100%;
height: 153px;
background: url("/public/images/headerBackground.png") no-repeat center center;
}
#header .wrapper {
position: relative;
left: 50%;
margin-left: -470px;
z-index: inherit;
pointer-events: all;
}
#navigation li ul {
display: none;
position: absolute;
z-index: -1;
background-color: #c40b29;
-webkit-box-shadow: 0px 1px 30px 18px rgba(46, 50, 50, 0.3);
-moz-box-shadow: 0px 1px 30px 18px rgba(46, 50, 50, 0.3);
box-shadow: 0px 1px 30px 18px rgba(46, 50, 50, 0.3);
float: left;
width: 152px;
height: 166px;
margin-left: 0px;
margin-top: -2px;
}
For an image of the design we got:
http://s18.postimg.org/uiaf1waxl/Schermafbeelding_2014_03_17_om_16_10_26.png
Related
I want to replace button style with a style-component
What is the way?
<SC.CarouselBox
loop={true}
cssMode={true}
navigation={true}
mousewheel={true}
keyboard={true}
slidesPerView={1}
pagination={{
"clickable": true
}}
className="mySwiper"
>
<SC.CarouselBlur></SC.CarouselBlur>
{sliderItems.map((item, i) => (
<SwiperSlide
<img src={item.img}/>
</SwiperSlide>
))}
</SC.CarouselBox>
i am add swiper components in styled-components, because i want change swiper style
but I can not add a button because the button is not given as a component
const CarouselBox = styled(Swiper)`
width: 100%;
height: 100%;
display: inline-grid;
`;
const Btn = styled('button')`
bottom: 10px;
position: absolute;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(50px);
border-radius: 10px;
width: 34px;
height: 34px;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
cursor: pointer;
z-index: 2;
outline: none;
border: none;
`;
I used a separate button:
navigation={{
nextEl: ".swiper-next",
prevEl: ".swiper-prev",
}}
<SC.Btn className="swiper-next">
next
</SC.Btn>
<SC.Btn className="swiper-prev">
back
</SC.Btn>
The correct syntax is slightly different. You don't need to wrap your button in brackets like a string. Instead you should write your code like this:
const Btn = styled.button`
bottom: 10px;
position: absolute;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(50px);
border-radius: 10px;
width: 34px;
height: 34px;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
cursor: pointer;
z-index: 2;
outline: none;
border: none;
`;
I have a div with text inside, with a line-height that is more than the height of the text. This means there is space on top and below each line of text.
There is a vertical border along the right hand side, the top of which I want to be aligned with the top of the text. I need to somehow align the text to the top of it's line.
Is this possible or can someone help me out here?
div{
border-left: 1px solid black;
line-height: 30px;
}
<div>Hello</div>
Without messing with the line-height:
div{
position: relative;
font-size: 16px;
line-height: 24px;
width: 25px;
padding: 0px 0px 0px 10px;
}
div:before {
position: absolute;
content: '';
top: 6px;
left: 0px;
bottom: 6px;
width: 0px;
border-left: 1px solid black;
}
The values top and bottom should equal (line-height - font-size) / 2 but due to different character height will need some manual nudging.
Demo: http://jsfiddle.net/NcbB7/
How can i get my back to top button to stick to the side of the screen. So when i resize it, it will stay stuck to the left? Right now i have it in a container and it works well on smaller screens, but when i see it on a desktop it is in that container instead of all the way to the left of the screen.
#back-top {
position: relative;
z-index: 1000;
opacity: .7;
position: fixed;
bottom: 30px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
font-size: 8px !important;
width: 75px;
height: 75px;
display: block;
margin-bottom: 7px;
background: url(../img/weed2.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
I have an OUTER div with two inner divs:
one of them is VERTICAL SIDEBAR whose content is fairly short
second one is div with MAIN PAGE whose content varies
They are both set to float: left, so they are next to each other.
I already learned that when setting height or min-height in percentage, all the parents need to have their height specified also.
I would like them both to be stretched to the end of the page. Havent managed to do that, problems begin when MAIN PAGE div is longer than monitor height( so there needs to be scrollbar), then I usually end with that nasty scrollbar inside MAIN PAGE div or I end with the SIDEBAR div being too short.
ok you should set the Outer divs css like so
.outer{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:auto;
}
This will set the outer div to completely fill the window, with a side bar to scroll the length of the rest of the page. You would only have one main side scrollbar.
Now if you want the sidebar to just fill the page. set its css like so:
.sideBar{
position:absolute //can be relative if necesary.
top:0;
bottom:0;
overflow:none;
}
Now this sets the sidebar to the exact height of the outer div. so it will span the entire page and the overflow is set to none to ensure no scrollbar.
Now the outer div's and sidebar div's height should be dictated by the main div, and you should only have one clean scroll bar.
You could do something like this:
jsFiddle
Setting display: table-cell on both div's inside the outer div with display: table-row will ensure they are always the same height, you'll have to set display: table on body for this to work, or you could just set it directly on the outer div instead of table-row. That will work just fine. This approach should work on anything better than IE7.
CSS:
html {
position: absolute;
bottom: 0px;
top:0px;
left: 0px;
right: 0px;
overflow: scroll-x;
}
body {
height: 100%;
padding: 0px;
margin: 0px;
display: table;
}
.outer {
display: table-row;
height: 100%;
width: 100%;
}
.sidebar, .mainpage {
display: table-cell;
height: 100%;
}
.sidebar {
width: 200px;
background-color: #EFEFEF;
}
HTML
<div class="outer">
<div class="sidebar">sidebar</div>
<div class="mainpage">mainpage</div>
</div>
After seeing your site, this is the fix:
.Page {
width: 970px;
min-height: 100%;
width: 100%;
display: table;
}
.Sidebar {
width: 257px;
background: url(img/sidebar-bg.png) repeat-y;
margin-left: 23px;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
EDIT: I forgot the .Page styles, I added it.
EDIT: Also, if you want to center it, then use this:
html, body {
height: 100%;
min-height: 100%;
padding: 0px;
margin: 0px;
}
body {
padding: 0px;
margin: 0px;
line-height: 21px;
background: url(img/bg-page-01.jpg) no-repeat;
background-position: 50% 0%;
}
.Page {
height: 100%;
display: table;
margin: 0 auto;
}
.Sidebar {
width: 257px;
height: 100%;
background: url(img/sidebar-bg.png) repeat-y;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
height: 100%;
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
If your talking about height issues here, then use this:
html, body {
height: 100%;
min-height: 100% /* for firefox */
}
#main, #sidebar {
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-khtml-box-sizing: border-box;
box-sizing: border-box; /* eliminates increased height due to padding & child margins */
}
#sidebar { background: blue; width: 200px; float:left; margin: 0; }
#main { background: green; width: 960px; margin: 0 0 0 200px; }
edit: fiddle: http://jsfiddle.net/jTwqe/
I'm not really sure what your issue is, but is an alternate solution.
.outer { display: table; }
.sidebar, .main { display: table-cell; padding: 10px; }
.sidebar { background: green; }
.main { background: blue; }
Fiddle: http://jsfiddle.net/Q5CmR/
In Chrome, the website bmr1.com shows the search widget with a magnifying glass as the submit buttons background image. In order to get the submit button to move I added Float:Right and Margin-top, to get it into the correct position. I also had to add position:relative, so that the button would be positioned on top of the text box. Issue is the same margin-top: of 31px that fixes Chrome, makes IE9's submit button way too high and out of place.
bmr1.com
<div id="search-2" class="widget widget_search"><h4 class="widgettitle"><cufon class="cufon cufon-canvas" alt="Search" style="width: 64px; height: 22px; "><canvas width="80" height="28" style="width: 80px; height: 28px; top: -4px; left: -1px; "></canvas><cufontext>Search</cufontext></cufon></h4><form role="search" method="get" id="searchform" action="http://bmr1.com/">
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" placeholder="" widdit="on" autocomplete="off">
<input type="submit" id="searchsubmit" value="">
</form><div id="predictad_div" class="predictad"></div></div>
#sidebar1 { position: relative; }
#search-2.widget.widget_search {z-index:0; background-color: #363636; margin-right:15px; margin-bottom:25px; padding: 10px 10px 10px 10px; color:#363636; max-width:231px;}
#search-2.widget.widget_search #s{width:94%; padding: 5px;position:relative;}
#search-2.widget.widget_search h4 {font-size:140%; background-color: #84c4e7; padding: 5px 10px 5px 10px; border: 1px solid #fff; margin-bottom:10px;}
.widget_search .screen-reader-text {margin-bottom:-20px;float:right;}
#mp_cart_widget-3.widget.mp_cart_widget { background-color: #cdcdcd; margin-right:15px; margin-bottom:25px; padding: 10px 10px 10px 10px; max-width:231px;}
#mp_cart_widget-3.widget.mp_cart_widget h4 { font-size:140%; background-image:url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/greysliver.png'); background-repeat: repeat-x; padding: 5px 10px 6px 10px; margin-bottom:10px; color:#fff; }
#mp_categories_widget-3.widget.mp_categories_widget { background-color: #363636; margin-right:15px; margin-bottom:20px; padding: 10px 10px 10px 10px; color:#fff; max-width:231px;}
#mp_categories_widget-3.widget.mp_categories_widget h4 { font-size:140%; background-color: #84c4e7; padding: 5px 0px 5px 10px; border: 1px solid #fff; margin-bottom:10px; color:#363636;}
#mp_categories_widget-3.widget.mp_categories_widget a {text-decoration:none; color:#fff; margin-left: 30px; }
#sidebar ul {font-size:18px; font-weight:bold; }
ul#mp_category_list {padding-right:10px;font-size:18px; }
ul#mp_category_list .children {text-align:left;list-style: none;margin-left:10px; font-size:15px !important;}
.widget_search #searchsubmit {
background-image:url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png');
background-color:transparent;
border:none;
background-repeat:no-repeat;
color:transparent;
height: 28px;
width:30px;
cursor: pointer;
float:right;
padding: 8px 16px;
margin-top:-31px;
position:relative;
}
Try this:
.widget_search #searchsubmit {
background-image: url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png');
background-color: transparent;
border: none;
background-repeat: no-repeat;
height: 28px;
width: 30px;
cursor: pointer;
position: absolute;
z-index: 10;
top: 3px;
right: 0;
}
#search-2 form {position: relative;}
Also, I highly recommend to use a css reset! This will make every slight difference in lay-out between browsers go away. You will need to overwrite some of these values, but it saves you a lot of frustration in the long run!
An example: http://meyerweb.com/eric/tools/css/reset/
I agree with the previous commenter, use a reset.css! Different browsers has different default margin, padding etc values for everything and it makes your webpage look different in each of them.
To fix the problem you should do the followings.
First, give a fixed height for your text input field:
#search-2.widget.widget_search #s{width:94%;height:20px; padding: 5px;position:relative;}
Change is that I have applied a 20 pixel height for the element
Then apply the following to the submit button:
.widget_search #searchsubmit {
background-image:url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png');
background-color:transparent;
border:none;
background-repeat:no-repeat;
color:transparent;
height: 28px;
width:30px;
cursor: pointer;
float:right;
bottom:31px;
position:relative;
}
You should use shortcodes like background: url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png') no-repeat; to make your code shorter and cleaner
I hope this will fix your issue.