I'm new in coding and I'm stucked with a resize problem.
My header is an image with two buttons on top (which will be the menu). I want to build a responsive template. But when I resize the window the two buttons doesn't entirelly follow the image and stays below the image.
How can I fix it?
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>My Website</title>
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/flowtype.js"></script>
<style type="text/css">
body {
overflow-x: hidden;
}
.image-banners {
position: absolute;
z-index: -1;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
top: 0em;
left: 0em;
}
.banner-title {
position: relative;
font-family: 'Segoe UI', sans-serif;
font-size: 2em;
text-shadow: 0.05em 0.05em black;
color: rgba(255, 255, 255, 1);
top: -0.5em;
left: 2em
}
nav {
position: fixed;
margin-top: 2.5em;
margin-left: 23em;
font-family: 'Segoe UI', sans-serif;
font-size: 0.5em;
line-height: 2.6em;
}
.link-nav {
text-decoration: none;
color: rgba(215,215,215,1);
}
.menu-button-left {
background: rgba(143,3,6,1);
background: -webkit-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1));
background: -moz-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1));
width: 15em;
height: 2.5em;
text-align: center;
float: left;
border-radius: 0.3em 0 0 0.3em;
border-right: 0.1em solid;
border-color: rgba(106,2,4,1);
}
.menu-button-left:hover {
background: rgba(106,2,4,1);
background: -webkit-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1));
background: -moz-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1));
}
.menu-button-right {
background: rgba(143,3,6,1);
background: -webkit-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1));
background: -moz-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1));
width: 15em;
height: 2.5em;
text-align: center;
float: left;
border-radius: 0 0.3em 0.3em 0;
}
.menu-button-right:hover {
background: rgba(106,2,4,1);
background: -webkit-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1));
background: -moz-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1));
}
</style>
</head>
<body>
<header>
<img class="image-banners" src="images/Banner.png" />
<h1 class="banner-title body">MY WEBSITE</h1>
<nav>
<a class="link-nav body" href="#1"><div class="menu-button-left"><b>BUTTON 1</b></div></a>
<a class="link-nav body" href="#2"><div class="menu-button-right"><b>BUTTON 2</b></div></a>
</nav>
</header>
<script type="text/javascript">
$('body').flowtype({
minimum : 400,
maximum : 1000,
minFont : 5,
maxFont : 40,
fontRatio : 30
});
</script>
</body>
Thanks for you
First of all, it is common in these cases to create jsfiddle links or something similar to demonstrate your problem. In that case you can find one here.
Now to add responsiveness to your buttons you need to use media queries. (this applies in general for the responsive design) Please have a look how to use the media queries here and I guess you will be ready enough to solve it.
Related
I’ve just started to learn HTML/CSS. My goal is to prepare a parallax effect on my test website. I constructed a code with parallax effect in CSS, but the problem is that the images located under the container is unsmooth during scrolling the page (the image extends and rips).
Please consider that I used border-radius method which rounds corners of the containers under which an images are located. I noted that when I cut border-radius method then the unsmoothing effect doesn’t occur. But my goal is to leave this border-radius method unchanged
I know that I can construct similar parallax effect in JS, but my goal is to understand reason why parallax effect doesn’t work correctly in CSS together with border-radius method.
I focused that the unwanted effect occurs only in the case when the browser page is narrowed. Please see the differences between the effect in Codepen one with code (part of the browser page in which finishing page is showed is narrowed):
https://codepen.io/marartgithub/pen/vYpPEjQ
and second one in full page (the problem doesn’t occur):
https://codepen.io/marartgithub/full/vYpPEjQ
I'm sorry if the problem is not the biggest one and for some of you could be insignificant, but my goal is to understand why not all which I wanted works fine to be better programmer.
I would use a :before pseudo tag to achieve this effect. Here are the changes I made:
I remove the about bg div and set each box to flexbox as that will be a cleaner way to acheive this layout.
Then, I removed the border-radius from .about-us-box and added it to .about-us-box:before. In the :before styling, I set it the size of the parent container (.about-us-box) and then set it to have a border radius. You will see box-shadow attribute as border-radius doesn't curve the inside corner. Box-shadow takes care of that for us.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
}
/* n a v */
.nav {
height: 50px;
background-color: #333;
text-align: center;
line-height: 50px;
font-size: 0;
}
.nav-item {
display: inline-block;
}
.nav-item a {
padding: 0 50px;
color: whitesmoke;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
transition: color 0.3s;
font-size: 16px;
}
.nav-item a:hover {
color: royalblue;
}
/* h e a d e r */
.header-jpg {
position: relative;
height: 300px;
background-image: url('https://cdn.pixabay.com/photo/2016/09/29/13/08/planet-1702788_1280.jpg');
background-size: cover;
background-position: 0 50%;
}
.header-text {
position: absolute;
color: whitesmoke;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header-bg {
position: absolute;
height: 100%;
width: 100%;
}
.header-text h1 {
direction: rtl;
margin-bottom: 10px;
text-transform: lowercase;
letter-spacing: 2px;
text-shadow: 2px 2px 6px gold;
}
/* m a i n */
main {
margin: 50px auto;
width: 1200px;
}
main h2 {
margin-bottom: 20px;
text-transform: uppercase;
text-align: center;
font-weight: 100;
font-size: 16px;
}
.about-us-box {
position: relative;
height: 300px;
margin: 40px 0;
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
z-index: 0;
}
.about-us-box:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px 0 20px 0;
z-inex: 1;
background-color: transparent;
border-radius: 20px 0 20px 0;
box-shadow: 0 0 0 13px #fff;
}
.top {
background-image: url('https://cdn.pixabay.com/photo/2017/08/06/07/10/coffee-2589761_1280.jpg');
}
.middle {
background-image: url('https://cdn.pixabay.com/photo/2017/06/10/16/19/iphone-2390121_1280.jpg');
}
.bottom {
background-image: url('https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090_1280.jpg');
}
.about-us-text {
text-align: center;
color: whitesmoke;
padding: 2rem 1rem;
background-color: black;
}
.about-us-text h3 {
margin-bottom: 10px;
text-transform: uppercase;
}
/* f o o t e r */
footer {
height: 80px;
line-height: 80px;
background-color: #333;
color: #ddd;
text-align: center;
font-size: 20px;
}
.icon-box {
margin-left: 20px;
}
.icon-box a {
margin: 0 5px;
color: #ddd;
text-decoration: none;
font-size: 20px;
transition: color 0.3s;
}
.icon-box a:hover {
color: royalblue;
}
.ti {
padding-right: 10px;
font-size: 26px;
margin-right: 10px;
}
.elem-main {
width: 300px;
margin: 0 auto;
}
.prices-table {
margin: 0 auto;
}
.prices-table td {
padding: 10px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TASK - WE LOVE COFFEE</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/#tabler/icons#latest/iconfont/tabler-icons.min.css" />
<link rel="stylesheet" href="./css/style_en.css" />
</head>
<body>
<header>
<div class="header-jpg">
<div class="header-bg"></div>
<div class="header-text">
<h1>Creative design</h1>
<p>With our support you will create a dreamlike website</p>
</div>
</div>
</header>
<nav class="nav">
<ul>
<li class="nav-item">home</li>
<li class="nav-item">services</li>
<li class="nav-item">pricing</li>
<li class="nav-item">contact</li>
</ul>
</nav>
<main>
<h2>About us</h2>
<div class="about-us-box top">
<div class="about-us-text">
<h3>We love coffee</h3>
<p>
We interested in coffe in our team on years. We love his smell and
taste. We love the process on which coffee beans goes through
starting from day of cutting during harvest then heat treatment to
grinding process in our coffee grinder and passing it through a
espresso machine.
</p>
</div>
</div>
<div class="about-us-box middle">
<div class="about-us-text">
<h3>We all are creative</h3>
<p>
Characteristic of our work requires from us to be continously a
creative persons, because of competentive market and our clients
demands which expects from us to provide unconventional solutions
supported theri business.
</p>
</div>
</div>
<div class="about-us-box bottom">
<div class="about-us-text">
<h3>We like our job</h3>
<p>
We are young team of simmilar thingking and creative and full
positive energy persons. We meets as well outside of our job to
receive a good balance between proffesionall acvivity and private
life.
</p>
</div>
</div>
</main>
<footer>
<p>
© 2022 Creative design
<span class="icon-box">
<i class="ti ti-brand-facebook"></i>
<i class="ti ti-brand-twitter"></i>
</span>
</p>
</footer>
</body>
</html>
I currently achieve the look of the first image here by applying border-collapse: separate to the table and border-right: dashed 1px #dddddd as well as position: sticky and left: 0 to the td:
When scrolling horizontally, is there a pure CSS way of making a shadow appear as follows:
There is no pure CSS way to detect a position: sticky element. But there is a way to detect it with JS and interact with any element on it.
var observer = new IntersectionObserver(function(entries) {
if(entries[0].intersectionRatio === 0)
document.querySelector("#nav-container").classList.add("nav-container-sticky");
else if(entries[0].intersectionRatio === 1)
document.querySelector("#nav-container").classList.remove("nav-container-sticky");
}, { threshold: [0,1] });
observer.observe(document.querySelector("#nav-container-top"));
body {
margin: 0px;
font-family: Roboto, Tahoma;
}
#logo-container {
background-color: #bdc3c7;
height: 100px;
}
#nav-container-top {
background-color: #bdc3c7;
height: 1px;
}
#nav-container {
background-color: #2980b9;
height: 60px;
line-height: 60px;
color: white;
text-align: center;
font-size: 25px;
position: sticky;
top: 0;
font-weight: 700;
transition: font-size 0.2s ease-out;
}
.nav-container-sticky {
background-color: #e74c3c !important;
font-size: 18px !important;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
#main-container {
background-color: #ecf0f1;
height: 2000px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo-container"></div>
<div id="nav-container-top"></div>
<div id="nav-container">Navigation Container</div>
<div id="main-container"></div>
</body>
</html>
Took manual from here https://usefulangle.com/post/108/javascript-detecting-element-gets-fixed-in-css-position-sticky
Display="Position: Relative;" is Juggling in IE (Browser Mode: IE7/8/9 - Document Mode: Quirks) But If I changed Document Mode from Quirks to IE7/8 or even 9 it's working fine. How to set through CSS this issue? Please see sample code below:
CSS
.aFlyOut{
padding: 10px;
bottom: 0px;
border: 1px solid #a6adb3;
background-color: #FFFFFF;
position: relative;
z-index: 9999;
}
.aFlyoutCollapse
{
background-image: url("/vtpOnline/images/settings.png");
background-repeat: no-repeat;
background-position: 100% 50%;
cursor:pointer;
width:40px;
height: 20px;
text-indent: 21px;
color: #FFFFFF;
}
.aFlyoutExpand
{
background-image: url("/vtpOnline/images/settings.png");
background-repeat: no-repeat;
background-position: 100% 50%;
cursor:pointer;
width:40px;
height: 20px;
text-indent: 21px;
color: #FFFFFF;
}
.aFlyoutButton{
height: 12px;
float: right;
width: 38px;
cursor: hand;
padding-right: 4px;
}
.aFlyout{
float: right;
background-color: #FFFFFF;
border:1px solid #a5acb2;
right: 6px;
#right: 8px;
padding: 0px;
}
.aFlyoutHeader{
padding: 4px 6px 3px 0;
background: url("/vtpOnline/images/actionFlyoutHeaderIcon.gif") #090999 no-repeat;
color: #FFFFFF;
text-indent: 23px;
font-size: 11px;
font-weight: bold;
}
.aFlyoutLinkWrapper{
padding:5px;
}
.aFlyoutLinkWrapper a{
padding: 5px;
color: #010356;
font-size: 11px;
display: block;
text-decoration: none;
}
.aFlyoutLinkWrapper a:hover{
color: #0060ff;
background-color: #f2f2f2;
}
.aFlyoutRefreshLink{
background: url("/vtpOnline/images/addNote.png") no-repeat 0 50%;
text-indent: 12px;
#text-indent: 10px;
}
HTML
<div class="aFlyoutButton" id="aFlyoutLink">
<!-- Action Flyout Action Button -->
<div class="aFlyoutExpand" title="Actions" id="aFlyoutButton" onMouseOver="aFlyoutExpand()" onMouseOut="aFlyoutExpandCollapse()" onClick="aFlyoutExpandCollapse()"> </div>
<div id="aFlyout" class="aFlyout" style="display: block;" onMouseOver="aFlyoutExpand()" onMouseOut="aFlyoutExpandCollapse()">
<!-- Action Flyout Action Header -->
<div class="aFlyoutHeader" style="color: #FFFFFF;font-size: 11px !important;"> Actions </div>
<!-- Action Flyout Links Panel -->
<div class="aFlyoutLinkWrapper" style="width: 100px;"> <a class="aFlyoutRefreshLink" href="#" id="j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION" name="j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION" onClick="aFlyoutExpandCollapse();;A4J.AJAX.Submit('j_id_jsp_2094016106_0','j_id_jsp_2094016106_1',event,{'oncomplete':function(request,event,data){Richfaces.showModalPanel('AddNoteModalPanel');setValues();return false;},'similarityGroupingId':'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION','parameters':{'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION':'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION'} ,'actionUrl':'/vtpOnline/faces/order/edit/default.jsf'} );return false;">Notes</a> </div>
</div>
</div>
When i mouse hover it shows:
However, it should be as:
Document mode quirks means that you're essentially running a pre-IE6 rendering engine. A good solution to solve this is to add a doctype to the top of your HTML document. This will put the browser in standards mode by default, and will allow your position:relative; to work as expected.
The simplest doctype is the HTML5 one:
<!DOCTYPE html>
Put that on line 1 of your HTML. There is no way to force standards mode via CSS.
Thanks everyone, it has been resolved; please see following code reference. I've changed position from relative to absolute and set top & height to fix the positioning.
.aFlyOut{
position: absolute;
top: 28px;
height: 70px;
}
My site has a wrapper with three background images. A static top and bottom image and a third image that repeats along the y axis. For some reason the top background image is getting cut off and I can't figure out way.
Here is a link to the live site: http://storrepictures.weebly.com/projects.html
I have offset the top and bottom images so you can see what they look like. You can see that the top one is cut off. I've tried messing around with some of the div padding settings but can't seem to get it to work.
One interesting note: The background images used to be JPEGs (I switched to PNG files because I needed transparency). When I was using JPEGs this was not a problem - the three images lined up perfectly.
Let me know if it would help to have the actual code posted. From what I've been reading on this forum, people seem to like looking at the live site and I didn't want to make the post too long.
Thanks a lot for all your help.
*Here's the CSS:
body {
background: #ffffff;
font-family: Tahoma, arial, sans-serif;
font-size:12px;
color:#666666;
margin: 0;
padding: 0;
}
#wrapper {
background: url(containerbg.png) center repeat-y;
}
#wrappertop{
background: url(containertop.png) no-repeat;
background-position: 0px -40px;
}
#wrappertbtm{
background: url(containerbtm.png) no-repeat;
background-position: 34px 480px;
padding-bottom: 65px;
}
.title{
width: 1022px;
min-height: 30px;
_height: 30px;
padding: 10px 0px 10px 0px;
font-size: 30px;
}
.title, .title a {
color: #fff;
}
#container {
width: 100%;
position: relative;
top: 125px;
bottom: 0px;
margin: 0px;
padding: -300px 0px 0px 0px;
}
#content{
width: 800px;
min-height: 500px;
_height: 500px;
margin: 0pt auto;
}
#content a{
color: #ff6633;
text-decoration: none;
}
.weebly_header{
background: url(%%HEADERIMG%%) no-repeat;
}
And here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<style>
#content
{
height:400px !important;
}
</style>
<![endif]-->
</head>
<body class="wsite-theme-light">
<div id="wrapper">
<div id="wrappertop">
<div id="wrappertbtm">
<div id="container">
<div id="header">
<div id="headerleft">{logo max-height="60"}</div>
<div id="navigation">{menu}</div>
</div>
<div id="content">{content}
<div id="footer">{footer}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
From what I can see, your body element has padding and margin values interfering:
body {
background: url(theme/backgroundtop.jpg?909894) left top repeat-x,
url(theme/backgroundbottom.jpg?909894) left bottom repeat-x,
url(theme/backgroundmid.jpg?909894) left repeat;
font-family: Tahoma, arial, sans-serif;
font-size: 12px;
color: #666666;
height: 100%;
margin: 100px 0 0 0;
padding: 100px 0 0 0;
}
You should get rid of these rules:
body {
/* ... */
margin: 0;
padding: 0;
}
and all should be fine.
Note: setting height: 100% to the body element is meaningless, you might wanna remove that, too.
Note #2: you have only 3 values for the multiple backgrounds of the body, which will be parsed as T/LR/B, while the order or those values indicates you should change their order, i.e. backgroundtop / backgroundmid / backgroundbottom instead of backgroundtop / backgroundbottom / backgroundmid
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 8 years ago.
I want it to be as simple as this, but I know it isn't:
img {
opacity: 0.4;
filter: alpha(opacity=40);
}
img:hover {
#thisElement {
opacity: 0.3;
filter: alpha(opacity=30);
}
opacity:1;
filter:alpha(opacity=100);
}
So when you hover over img, it changes the opacity of #thisElement to 30% and changes the opacity of the image to 100%. Is there a way to actually do this using only css?
So this is the HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="C:\Users\Shikamaru\Documents\Contwined Coding\LearningToCode\Learning jQuery\js\jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="briefcase.js"></script>
<link rel="stylesheet" type="text/css" href="taskbar.css"/>
<link rel="stylesheet" type="text/css" href="briefcase.css" />
<title>Briefcase</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div class="mask"></div>
<div class="float">
<div id="album1">Album Title</div>
<img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" />
<img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" />
<img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" />
</div>
<div class="gradientTop"></div>
<div class="gradientBottom"></div>
</body>
</html>
And this is the CSS:
body {
font: normal small/3em helvetica, sans-serif;
text-align: left;
letter-spacing: 2px;
font-size: 16px;
margin: 0;
padding: 0;
}
div.gradientTop {
position: absolute;
margin-top: 5px;
z-index: 2;
width: 206px;
height: 30px;
float: left;
background: -webkit-linear-gradient(rgba(255, 255, 255, 2), rgba(255, 255, 255, 0))
}
div.gradientBottom {
position: absolute;
margin-bottom: 5px;
z-index: 2;
width: 206px;
height: 120px;
float: left;
bottom: -210px;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
}
div.float {
border-right: 1px solid orange;
position: absolute;
z-index: 2;
margin-left: 5px;
margin-top: 5px;
float: left;
width: 200px;
}
div.mask {
position: relative;
z-index: 1;
margin-top: 5px;
float: left;
width: 206px;
height: 805px;
background-color: white;
}
img.left {
z-index: inherit;
margin-bottom: 3px;
float: left;
width: 200px;
min-height: 200px;
/* for modern browsers */
height: auto !important;
/* for modern browsers */
height: 200px;
/* for IE5.x and IE6 */
opacity: 0.4;
filter: alpha(opacity=40)
}
img.left:hover + #album1 {
opacity: .4;
}
img.left:hover {
opacity: 1.0;
}
#album1 {
z-index: 2;
width: 200px;
color: white;
text-align: center;
position: absolute;
background: orange;
top: 70px;
}
The only way to do this with CSS is if the element to affect is either a descendent or an adjacent sibling.
In the case of a descendent:
#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
opacity: 0.3;
}
Which will apply to elements such as:
<div id="parent_element">
<div id="child_element">Content</div>
</div>
For adjacent siblings:
#first_sibling:hover + #second_sibling {
opacity: 0.3;
}
Which works for mark-up such as:
<div id="first_sibling">Some content in the first sibling</div> <div id="second_sibling">and now in the second</div>
In both cases the latter element in the selector is the one chosen.
Given your pseudo-code example, you probably want something like:
img:hover + img {
opacity: 0.3;
color: red;
}
JS Fiddle demo.
I know you're probably looking for a pure-css way of doing what you want, but I'd suggest you use HTML+CSS+JS as the wonderful MVC structure that they are.
HTML is your Model, containing your data
CSS is your View, defining how the page should look
JS is your Controller, controlling how the model and view interact.
It's the controlling aspect that should be taken advantage of here. You want to control a view of an item on a user interaction. That's exactly what JS is meant for.
With very minimal JavaScript, you could toggle a class on and off of #thisElement when the img is hovered over. It certainly beats playing CSS selector games, although I'd understand if you're only willing to accept a pure-css answer.