I've only recently really gotten into trying to learn how to do web-development, and the reason I actually got into it, was because I was incredibly curious on how to make this: https://imgur.com/a/dvghHmD.
Not the chat, but in the bottom-left, you can see what I'm looking at. I'd really like to make something similar, with a drop-shadow. Currently, this is what I got:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
}
<style>
.rectangle {
height: 100px;
width: 400px;
background-color: #FFFFF;
border-radius: 15px;
position: fixed;
bottom: 0;
margin-bottom: 2.5%;
margin-left: 2.5%;
}
.rectangle {
-webkit-box-shadow: 0px 0px 53px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 0px 53px 0px rgba(0,0,0,0.24);
box-shadow: 0px 0px 53px 0px rgba(0,0,0,0.24);
}
.rectangle class = "full-height"
#rectangle {
}
</style>
<style>
.text {
color: #151515;
text-align: left;
width: 300px;
font-family: 'Roboto', sans-serif;
position: absolute;
bottom: 0;
margin-bottom: 2%;
margin-left: 6%;
</style>
</head>
<body>
<div class="rectangle"></div>
<div class="text"> </div>
<div class="text"><span class="text"> <h2 style="font-size:21px"> This is a test text! This text is quite fine. I have no idea what I'm doing. <h2> </span>
</div>
</body>
</html>
Okay, so, you can most likely tell I have no clue what I'm doing. I've really been enjoying working on this, but I still have no clue really how to do a lot of things. Here are a few of those things:
How do I make a box like this always appear responsively to the size of the screen?
How do I 'parent' the text to the box, so that the text scales according to the box, and not independently? I don't know how to better describe it.
Would there be a more effective way of going about this (or have there been made any github depositories that already made this, so I could take a look at that code)?
To any of you who see this, thank you so much for reading. I really appreciate any help!
You can use relative positioning for sizing the box according to the screen
OR
You can use 'Responsive Media Queries'(https://www.w3schools.com/css/css_rwd_mediaqueries.asp)
For scaling text according to the popup, you may use the 'rem' unit is CSS. What it basically does is it scales your text according to the size of the parent.
Check this link: (https://css-tricks.com/almanac/properties/f/font-size/)
Hope this helps. :)
Before diving into CSS, first structure your HTML appropriately. You ask about parenting items and that's done with wrapping things with opening/closing tags:
HTML:
<div id="message_container">
<div id="message_content">message</div>
</div>
CSS:
With your HTML proper, then you work on styling:
#message_container {
/* to position it at bottom-left (dependent on the parent) */
position: absolute;
bottom: 2em;
left: 2em;
/* to position the contents within the box (ie the message text) */
display: flex;
justify-content: center;
align-items: center;
/* to style the message box in particular ways */
padding: 2em;
border-radius: 40px;
box-shadow: 4px 4px 20px rgba(0,0,0,0.3);
width: 100%;
max-width: 200px;
}
Responsive optimization:
Once your structure (HTML) and style (CSS) are solid, then you can think about responsiveness. To do this, you'd want to be exploring CSS #media rules to change the box style properties according to some conditions (e.g. screen width). Its all subjective, so you have to trial-and-error yourself to clean up the layout at different screen sizes.
For example:
/* for screens smaller than 320px width */
#media (max-width: 320px) {
/* make the message slimmer, and center it */
#message_container {
padding: 0.5em;
padding-top: 1em;
padding-bottom: 1em;
left: 50%;
transform: translate(-50%,0);
}
/* make the message text smaller */
#message_content {
font-size: 0.9em;
}
}
Controlling the box:
If you want this box to appear-and-disappear according to different events (like 2 seconds after the page fully loads, or when the user clicks something elsewhere), then you'll be looking at using Javascript. There's plenty of tutorials for that.
This is the general process.
Codepen
#message_container {
/* to position it at bottom-left (dependent on the parent) */
position: absolute;
bottom: 2em;
left: 2em;
/* to position the contents within the box (ie the message text) */
display: flex;
justify-content: center;
align-items: center;
/* to style the message box in particular ways */
padding: 2em;
border-radius: 40px;
box-shadow: 4px 4px 20px rgba(0,0,0,0.3);
width: 100%;
max-width: 200px;
}
#media (max-width: 320px) {
#message_container {
padding: 0.5em;
padding-top: 1em;
padding-bottom: 1em;
left: 50%;
transform: translate(-50%,0);
}
#message_content {
font-size: 0.9em;
}
}
<div id="message_container">
<div id="message_content">message</div>
</div>
Related
I have a navbar div in my website. Sometimes it stays at the top and sometimes it adds unnecessary margin-top. I'm not sure what's wrong. I checked my website, it's not collapsing with any margin for any of my div. I am very confused. I tried to use position but that did not work. Can anyone help? Here's my code snippet :
.container-navbar{
background-color: #ffffff;
height: 60px;
display: flex;
justify-content: space-between;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
transition:5s;
}
.button-collapse-sidebar{
padding-top: 10px;
padding-left: 10px;
}
.button-collapse-sidebar button{
height: 40px;
width: 60px;
font-size: 20px;
border:none;
background-color: blue;
color: #ffffff;
}
.button-collapse-sidebar button:hover{
transition: 1.5s;
cursor: pointer;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
z-index: 2;
}
.user{
display: flex;
}
.user-name{
padding: 18px;
}
.user-name i{
padding-left: 5px;
}
.user-name i,a{
text-decoration: none;
}
.user-picture{
margin-top:5px;
margin-right: 5px;
width: 60px;
position: relative;
overflow: hidden;
border-radius: 50%;
height: 50px;
}
.user-picture img{
width: 100%;
margin: auto;
position: absolute;
top: 20px;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container-navbar">
<div class="button-collapse-sidebar">
<button class="button-collapse"><i class="fa fa-bars" aria-hidden="true"></i></button>
</div>
<div class="user">
<div class="user-name">
Admin name<i class="fas fa-circle"></i>
</div>
<div class="user-picture">
<img src="" alt="user-picture">
</div>
</div>
</div>
</body>
</html>
so i update the code and add the body{ margin:0; } here i have 2 different file html but with same html tag and css but for some reason my main one not working but my test html it work and not adding the unnecessary margin-top.
When a browser renders an HTML page, it applies basic styles before you’ve even written a single style.
For Example, the <h1> to <h6> HTML tags in all browsers differ from the normal text:
in general, their font sizes are larger, their font-weight is bold(font-weight: bold), and they have margins on the top & the bottom.
While all browsers apply their basic styles, each browser has its specific styles different from other browsers, and that, of course, causes an inconsistency problem. That’s the problem that you are talking about in this question.
The attempt to solve the browser inconsistency problem has produced two approaches: the Normalize CSS approach and the CSS Reset approach.
If you are talking about this margin, you can simply add
body{
margin : 0px;
}
in your CSS. That should solve your issue. If you only want to remove margin on the top, use margin-top instead.
As for now, you can get used to adding this at the top of your css-file:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
This will remove all paddings and margins and box-sizing will simply make it easier for you. Mozilla box-sizing.
that's a simple reset you can do for your website:
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
Now the code below is displaying perfectly on different mobile platforms and different mobile browsers. For some reason when I load it onto my desktop browser the image overlaps the links.
On mobile the image is perfectly centered above the links and desktop version image is overlapping the links. Any help?
The main issue is the placement of the image.
CSS:
html {
font-size: 20px;
box-sizing: border-box;
}
body {
background-color: #1abc9c;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
.btn {
border: 5px solid #2c3e50;
color: #2c3e50;
display: block;
font-family: 'trebuchet ms';
font-size: 2rem;
letter-spacing: 0.1rem;
padding: 1rem;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
.btn::before {
content: "";
background-color: #E26A6A;
box-shadow: 10px 10px 0 #F1C40F,
20px 20px 0 #3498DB;
position: absolute;
left: 0.25rem;
top: 0.5rem;
height: 102%;
width: 102%;
z-index: -1;
transition: all 0.4s ease;
}
.btn:hover::before {
box-shadow: none;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.tools
{
position:absolute;
top: 25px;
left: 0px;
z-index: 2;
}
html:
<body>
<img src="tools.png" class="tools">
<div class="wrapper">
< MICROSOFT_LOGGER >
<br>
<br>
< OFFICE_TOOL_LOGGER >
<br>
<br>
< WEB_MON_COMPUTER >
<br>
<br>
< WEB_MON_ANDROID >
</div>
</body>
https://codepen.io/brandon-humphrey/pen/wvMGJzN
Desktop view: https://ibb.co/6YVZC13
Mobile view: https://ibb.co/7QFcdn3
That is because you're using position: absolute to position your image. What this does to your element is that it removes it from the normal document flow, and no space is created for it in the page layout anymore.
I recommend you read more about positioning in CSS so that you could figure out what you need and do it!
Small hint: What you might want is using Flexbox mainly to position everything properly, you can have a better result just by setting the flex-direction in body to column (Although I recommend putting your flexbox as styles for divs not the whole body). Also, remove the CSS class you wrote for tools, and the height you specified for the body.
The fact that you get the effect you want on mobile is a fluke. The wrapper for buttons is vertically centered, so there's space enough for the image to sit on top and not cover your buttons. Once the vertical space is reduced because the screen is landscape your absolutely positioned image covers the buttons.
If you want the effect to be consistent, I suggest you remove all your styling for the tool class and add flex-direction:column; to your body styles. You may still have to fiddle with it for your full effect, but this will get you the basics.
I have designed a page layout with HTML and CSS but when I put padding for “Left for logo” div then the height of this div increases and I lose the arrangement of page.
In addition, because I’m a beginner for CSS layout, please let me know that my page is correct.
HTML
<!doctype html>
<html lang="fa">
<head>
<meta charset="utf-8">
<title>homepage</title>
<link href="css/home-stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header class="header-container">
<div class="header-area"></div>
<div class="logo-ads">
<div class="left">
Left for logo <!-- Set Div As your requirement -->
</div>
<div class="right">
Right for ads<!-- Set Div As your requirement -->
</div>
</div>
</header><!-- end of header -->
<div class="navigation">
navigation
</div><!-- end of nav -->
<div class="main">
main content
</div><!-- end of main -->
<div class="footer-container">
<div class="footer-end">
footer
</div>
</div><!-- end of footer -->
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
/* header elements */
.header-container {
width: 100%;
}
.header-area {
height: 35px;
width: 100%;
background-color: #bb0700;
padding-right: 0px;
}
.logo-ads {
height: 110px;
width: 1000px;
background-color: #CFD1A9;
padding-right: 0px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
z-index: 0;
}
.left {
float: left;
height: 110px;
width: 30%;
background-color: #F9F9E4;
padding-right: 0px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
box-sizing: border-box;
}
.right {
float: right;
width: 70%;
height: 110px;
}
.navigation {
height: 35px;
width: 1000px;
background-color: #2A2929;
padding-right: 0px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
color: #fff;
z-index: 1;
}
.main {
height: 1000px;
width: 1000px;
background-color: #F7E3E3;
padding-right: 0px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
z-index: 2;
}
.footer-container {
height:35px;
width: 1000px;
background-color: #F2F1F1;
padding-right: 0px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
z-index: 3;
}
.footer-end {
height: 35px;
width: 1000px;
background-color: #bb0700;
padding-right: 0px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
z-index: 4;
}
I can see you are starting to understand CSS and are trying to learn more by doing. I hope this helps you a bit and you keep asking questions until you get awesome, then you come back and help newcomers, we've all been there.
First, let's make sure you understand the CSS box model
CSS BOX MODEL
Every element consists of content + padding + size (width/height) + border + margin. If you don't want those elements to be taken into account, you can use
element {box-sizing: border-box;} // The width and height properties (and min/max properties) includes content, padding and border, but not the margin
No need for unities in 0 quantities
You don't need to declare unities in any 0 values, since 0em, 0px, 0% are all the same. 0. save your time and file-size.
Shorthand
Shorthand in css greatly reduces not only your time writing, but the size of the file, it is a good practice to always reduce where you can.
Instead of writing:
div {
padding-top:10px;
padding-right:8px;
padding-bottom:5px;
padding-left:3px;
}
You could shorthand it, always following the sequence: TOP, RIGHT, BOTTOM, LEFT
div {
padding:10px 8px 5px 3px;
}
Floats are the devil's way of laughing at you
You should not rely on floats when layouting a website. If you have an image inside a section that should be floated left/right, or something as simple, that is fine; but managing layout with floats will take your time and your soul. There are simply many issues that come with floats and it is not worth the trouble of fixing everything. There are plenty of grid systems and frameworks like Bootstrap and Foundation that cover all those for you. Those troubles may include:
browsers rendering some types of elements differently
different display types (inline, inline-block and block are the most common) position themselves differently
you must clear your floats or your layout will become a mess
there are no easy way to vertically center elements using floats or equal heights
you won't be able to rearrange them easily with media queries
They are slow to render in the DOM
So your best shot is to layout using a grid-system and arranging elements using flexbox
Understanding Grid Systems
In case you’re new to CSS grid systems, we’ll start with a quick definition. In basic terms, a grid system is a structure that allows for content to be stacked both vertically and horizontally in a consistent and easily manageable fashion. Additionally, grid system code is project-agnostic giving it a high degree of portability so that it may be adopted on new projects.
Understanding Flexbox
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices
So flexbox is highly supported nowadays: http://caniuse.com/#search=flex, with the exception of Internet Explorer 9 and lower, and even then there are polyfills for that, you can search for one if you want to support it, they are quite easy to implement as well.
If you want to learn the awesome stuff you can do with flexbox, Wes Bos has a really nice tutorial on his website
I hope these tips help you out, bump me if you need anything else.
The padding property defines the distance between the content and the border. So if you add 10px padding left, the element will have 10px more space between the left and the right border. If you want to add padding but keep the size of the border, just decrease the height/weight property by your padding
#example{
height:70%;
padding-top:30%;
}
All you have to do is to add overflow: hidden; to the container of the logo and ads div. that is .logo-ads. then you can add how much padding you need to your 'Left for logo'(.left) using padding
.logo-ads {
height: 110px;
overflow: hidden;
width: 1000px;
background-color: #CFD1A9;
padding-right: 0px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
z-index: 0;
}
Add the overflow: hidden; to your .logo-ads class
I've created a couple of simple buttons using a link and some CSS to give it a background and I'm trying to center it on my page. However, because the text in one of the buttons is longer than the other, the buttons are of different sizes and for consistency, I'd like them to be the same width.
How can I keep these buttons the same size? Trying to float them and use percentage widths results in them not being centered. The relevant markup is below.
<section class="buttonsSection">
<a class="button" href="#">Very Long Sentence</a>
<a class="button" href="#">Short Phrase</a>
</section>
.button {
padding: 10px 15px;
background-color: deepskyblue;
color: white;
}
.buttonsSection{
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
.buttonsSection a {
margin: 3px;
}
JSFiddle: http://jsfiddle.net/Dragonseer/eTvCp/11/
Answer
While both of the answer below are valid, I'm updating my answer to using Flexbox. Most modern browsers have excellent support for it, including IE11 which will be released in the very near future. Flexbox appears to provide a much better solution to doing complex layouts which requires less effort than it's alternatives, such as floating items.
use a fixed width with inline-block on the buttons.
Working Fiddle
.button {
padding: 10px 15px;
background-color:deepskyblue;
color: white;
display: inline-block;
width: 20%; /*or any other width that suites you best*/
}
.callToAction {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
using inline-block provides a little-bit of margin between the elements (caused by a white-space in the HTML) so I removed the marin from the CSS, but you can put it back.
Easily done with flexbox:
.button {
padding: 10px 15px;
width: 150px; /* Fixed width links */
background-color:deepskyblue;
color: white;
margin: 3px;
}
.callToAction {
margin: 30px 0;
display: flex; /* Magic! */
justify-content: center; /* Centering magic! */
}
Working Example
.button
{
width: 150px; /* Your custome size */
background-color:deepskyblue;
color: white;
margin: 3px;
padding: 10px 15px;
}
Section a
{
width: 150px; /* for your all buttons */
}
The 'close window' image loaded by the code below is meant to be clickable.
When the page loads, everything displays properly but the area that is clickable is just a couple of pixels wide, a pixel or two high and just below and just above the centre of the image. I've included snips of code and relevant css.
All works just fine with IE9 in IE9 mode (the entire image is clickable). But the symptom I mentioned - the microscopic clickable area that isn't on the image occurs in Firefox 7, Chrome, Safari and Opera.
I've tried using an onclick in the image and tried putting the class declaration in the link tag but the same thing happens. I've also tried:
a {
display: block;
border: 1px solid white;
text-align: center;
}
I suspect I'll feel quite dumb when one of you points out the error of my ways.
I'm stumped.
.advCloser {
float: right;
padding: 5px 5px 0px 0px;
}
.advTitle {
position: relative;
top: -10px;
font-size: 125%;
padding: 0px 0px 0px 5px;
color: DarkBlue;
}
<div><img src="images/closeWindow.png" alt="Close window" class="advCloser"/><br/><div class="advTitle">Advanced configuration page</div></div>
You might get better results if you float the a tag, and not the image, also I would set the a tag to be a block with the same width and height as the image. This should make it work consistently with all browsers.
<style type="text/css">
.advCloser {
display: block;
height: 50px; /* set to the height of the image.*/
width: 50px; /* set to the width of the image.*/
float: right;
padding: 5px 5px 0px 0px;
}
.advTitle {
position: relative;
top: -10px;
font-size: 125%;
padding: 0px 0px 0px 5px;
color: DarkBlue;
}
<style>
<div>
<a class="advCloser" href="javascript:advConfigPageOpen();">
<img src="images/closeWindow.png" alt="Close window" />
</a>
<br />
<div class="advTitle">Advanced configuration page</div>
</div>
A slight alternative, without editing your existing classes may work as well:
<style type="text/css">
.advCloser {
float: right;
padding: 5px 5px 0px 0px;
}
.advTitle {
position: relative;
top: -10px;
font-size: 125%;
padding: 0px 0px 0px 5px;
color: DarkBlue;
}
.block-link {
display: block;
height: 50px; /* set to the height of the image.*/
width: 50px; /* set to the width of the image.*/
}
<style>
<div>
<a class="block-link" href="javascript:advConfigPageOpen();">
<img src="images/closeWindow.png" alt="Close window" class="advCloser" />
</a>
<br />
<div class="advTitle">Advanced configuration page</div>
</div>
Try adding a width to the image. Hopefully that will give the link tag something to work with in the compliant browsers.