I'm not even sure how to link to show the problem since webpack and React combine all the CSS into one thing.
Here is a codepen of what the site shows: https://codepen.io/livebacteria/pen/bJpRxq
Code:
<html lang="en"><head>
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json">
<!--
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<style type="text/css">body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
</style><style type="text/css">.App {
text-align: center;
}
.roomContent {
width: 85%;
}
.roomId {
width: 85%;
background-color: darkgray;
top: 0;
float: top;
text-align: center;
overflow: hidden;
}
.messageList {
margin-left: 15%;
}
#sign-in-button {
position: fixed;
left: 0;
bottom: 0;
height: 2%;
width: 5%;
background-color: red;
overflow-x: hidden;
}</style><style type="text/css">#room-list {
left: 0;
height: 100%;
width: 15%;
background-color: #797979;
overflow-x: hidden;
}
#rooms {
background-color: darkgray;
margin: .2em;
border: .2em solid black;
border-radius: .5em;
}
.active {
transition: background-color 0.2s ease-in-out;
background-color: white;
color: black;
}</style><style type="text/css">.message {
background-color: lightgrey;
}
.alter {
background-color: teal;
color: white;
}
ul {
list-style: none;
}
.username {
left: 0;
font-weight: bold
}
.msgContent {
text-align: justify;
}
.timestamp {
right: 100%;
}
li {
display: -webkit-flex;
display: flex;
}</style><script charset="utf-8" src="/main.301d260d2d5d7cc6e354.hot-update.js"></script><script charset="utf-8" src="/main.1b967c31a26f143b4c18.hot-update.js"></script><script charset="utf-8" src="/main.71fa75690276c3793425.hot-update.js"></script><script charset="utf-8" src="/main.bd4f9c2dd0d0d73a5767.hot-update.js"></script><script charset="utf-8" src="/main.674bf126f112209cc501.hot-update.js"></script><script charset="utf-8" src="/main.d51f6dd5d844ba3b041f.hot-update.js"></script><script charset="utf-8" src="/main.3b7da7fe7854caba082b.hot-update.js"></script><script charset="utf-8" src="/main.83cd193b84cfa377dad0.hot-update.js"></script><script charset="utf-8" src="/main.2a3407b574c86757e486.hot-update.js"></script><script charset="utf-8" src="/main.593394f8893e7c304918.hot-update.js"></script><script charset="utf-8" src="/main.ca86c32b9f61b8f0bb0b.hot-update.js"></script><script charset="utf-8" src="/main.8bbf712997dd0b0cc98c.hot-update.js"></script><script charset="utf-8" src="/main.8dc8d68395e79c2c6dbd.hot-update.js"></script><script charset="utf-8" src="/main.8f1d3411148d4555e4db.hot-update.js"></script><script charset="utf-8" src="/main.03f056389193af93776c.hot-update.js"></script><script charset="utf-8" src="/main.9cac50b16b883a71fef4.hot-update.js"></script></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"><div class="App"><div class="roomListInfo"><div id="room-list"><section id="informationalHeader"><div><h1>Bloc Chat</h1></div></section><section id="rooms"><div><div class="active">room_1</div><div class="">room_2</div><div class="">room_3</div><div class="">Additional Information</div><div class=""></div><div class="">Mentor chat</div><div class="">retest</div><div class=""></div></div></section><section id="createRooms"><div><form><input type="text" id="nameEntry" value=""><input type="submit" disabled="" value="Create Room"></form></div></section></div></div><div class="roomContent"><h1 class="roomId">room_1</h1><div class="messageList"><div><div><ul><li class="username">LiveBactera</li><li class="msgContent">Testing</li><li class="timestamp">No Data</li></ul></div></div></div></div><div class="userInfo"><div><div><button>Sign Out</button><p>Tyler Poore</p></div></div></div></div></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script><script src="/main.937734484660ad27272f.hot-update.js"></script>
</body></html>
But, my problem is that I'm trying to build a chat application / website that you know, looks like one. Perhaps like Slack of all things. I'm having major overlapping issues with different components. I want a top header bar to stay stuck to the top, a nav bar on the left side that is stuck as well and, finally, the content should be scrollable.
I don't even know where to start for CSS. I've done loads of tutorials but nothing makes sense. There feels like there is more to CSS than there is in JS. The only code that works to achieve the sidebar look I'd like to have is the position: fixed style in CSS. I've read that this can cause major issues with other /fixed/ elements and sure enough it has.
The more I mess with the CSS the worse it gets, I had to restart almost the whole project because it got so bad.
I am guessing you want roomListInfo on the left, and roomContent on the right?
Some quick fixes:
you need them to be side-by-side instead of stacked on top of each other. You could do this by making them both display: inline-block, and make roomListInfo have width: 15% to match the width: 85% on roomContent. It looks like you tried adding it on room-list instead, so you should undo that.
Next, to get roomContent to cling to the top of the "line" (cause both are now on a line, like a line of text) that both elements now exist on, instead of sitting on the bottom of it, add vertical-align: top to it.
There are different ways to solve this problem. CSS can be confusing to start out with but once you get the core concepts down (classes, Id, declarations) then this will become a lot easier.
A good tip is to separate your CSS into it's own file and then load it using
<head>
<link rel="stylesheet" type="text/css" href="YOUR_CSS_FILE_NAME.css">
</head>
I would definitely start one-by-by with this page. Don't try to do too many things at once and don't get overwhelmed.
Go through each section thoroughly before moving onto the next.
For the sample below I simulated putting the CSS into a different file, I moved it to the CSS Window and removed the Style Tags.
Then I went through and changes some of the HTML and added the appropriate styles based on what I think you are asking for.
This is just one way to solve this problem, it doesn't mean it's the best.
https://codepen.io/anon/pen/ROaZGo
Related
I made a responsive home design with only html and css. When I deploy it locally the responsive part works perfectly, so I sended the files to the owner of the page, but he told me that the page wasn't responsive. He deployed it locally and in fileZila but it's like there's no media queries.
This are my html head tags.
<head>
<title>Alpha</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0; minimumscale=1.0, maximum-scale=1.0; user-scalable=0;" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
And here is some example of my css code, I'm not even using sass because for the project I can't use libraries (it's a pretty old page)
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #c91111;
}
.navbar button{
margin-right: 25px;
}
.navbar img{
height: 4rem;
width: 19rem;
margin: 10px;
background-color: white;
}
And at the end I have some responsive code.
#media screen and (max-width: 270px) {
.navbar button{
width: 6rem;
font-size: 13px;
}
.menu_item{
justify-content: flex-start;
width: 11rem;
height: 15rem;
}
.menu_item_4{
height: 17rem;
}
.menu_item a{
padding: 1rem;
font-size: 16px;
}
.mobile-item{
padding: 0 !important;
}
}
Here is the live example https://serviciosi.online/alpha/testhome/
Now it isn't responsive on my computer when I enter that link, even though the files haven't been changed.
Is there something I'm missing?
You Should Probably Check the file permissions and owner of the file
EX:
As the last time I used responsive CSS was quite a while ago, I'm not sure if this would impact it, but in your <meta> tag in your HTML code, you switch between using semicolons and commas to separate the elements, which is generally not advisable in coding.
If this doesn't work, have you considered using percentage-based margins in order to have it automatically adjust?
max width is 270px so it wont work on resolution greater than 270px
I created some social media icons on my website. My links are working fine on the desktop but nothing happens on tapping them in a mobile browser. Here is the website https://theopenbay.weebly.com and here is the code —
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
padding: 10px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none!important;
margin: 5px 2px;
border-radius:50%;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-telegram {
background: #30a2e7;
color: white;
}
.fa:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<!-- Add font awesome icons -->
</body>
</html>
and welcome to SO. I found the issue. The icons were blocked by the "navmobile" element. It covered the icons, so it wasn't possible to "press" the icons.
This was caused by the display block styling of that element. So by removing that you'll be able to make those icons clickable again.
your problem is, that div#navmobile is overlaping your footer, #navmobile has z-index:8, what you can do, is that you can change div#my-footer's position to relative and z-index higher than 8, here is the code (you should add to css):
#my-footer{position:relative; z-index:99}
I solved it by changing display: block to display: table which reduced the navmobile height.
Context: the images posted by Iliass Nassibane above.
I want to make this code good for all devices. If I open it with like a smartphone, it looks very bad.
If you can tell me something to improve too, I would appreciate it!
Here is my index and stylesheet.
Thanks!
index.html:
.background {
width: 99%;
height: 100%;
}
.title {
margin-top: 9%;
color: white;
font-family: "Lucida Console", "Courier New", monospace;
}
.subtitle {
margin-top: 1%;
color: #9c9c9c;
font-family: "Lucida Console", "Courier New", monospace;
}
.socials {
bottom: 0;
}
.fa {
padding: 20px;
font-size: 30px;
width: 1%;
height: 2%;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-twitter {
background: #55ACEE;
color: white;
float: left;
clear: both;
}
.fa-telegram {
background: #34abdf;
color: white;
float: left;
clear: both;
}
.github {
margin-right: 55px;
}
<!DOCTYPE html>
<html>
<head>
<title>zDoctor_ | Developer</title>
<meta name="keywords" content="Minecraft, zDoctor, zDoctor_, Telegram, Github, Doctor, doctor">
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body style="background-color: #262a2e" class="background">
<div class="title"><center><h1>zDoctor_</h1></center></div>
<div class="subtitle"><center><h3>Java & Web Developer(I think)</h3></center></div>
<div class="socials">
</div>
<div class="github">
<center><a class="github-button" href="https://github.com/zDoctor-Dev" data-size="large" aria-label="Follow #zDoctor-Dev on GitHub">Follow #zDoctor-Dev</a></center>
</div>
</body>
</html>
It says there is too much code and I need to add more details, but I don't know what to write ^^' so I'm just typing some random things.
One trick is to make absolutely everything relative to the viewport. That way you at least get a properly responsive site on all window aspect ratios.
Whether or not it looks OK on all sizes is something to be considered once you've done this - for a simple design, for example with lots of stuff just centered, you should not need to go into media queries.
You can't make a circle by having width in % and height in %, they are %s of different things so you won't get the underlying square you need. Think about using vmin for the units here and giving them each say 3vmin and see how it works out.
You can even define your font sizes in terms of vmin and they will adjust along with everything else (though be aware that going very very small wont work on some browsers).
So, if you find yourself using px, stop and reconsider.
Also look up more 'modern' ways of doing things like achieving centering and space filling. e.g. flex. Check that everything you are using is both standard and not deprecated. For example using HTML for formatting such as '<center'> isn't now the thing.
For the future, start thinking mobile first when you do a design - but as I say the design you have shown so far should be fine on a smaller viewport if you head for vmin.
edit your meta tag to this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
You can't simply improve like this. You have to add a meta tag for view port in HTML like: <meta name="viewport" content="width=device-width, initial-scale=1.0">In CSS you have a feature named media query like
#media screen and (min-width: /*Your size in which you want the thing to change*/930px) {
body {
/*Your command like mine is*/
background-color: black;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background-color: red;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
The above code will change when the size will be decreased. You have to make one for yourself. This is my tip to use query string.
I am having trouble getting the hero image and the background to show up. The files are in the same folder, with images, css, and javascript folders for those files. HTML is in main folder, others are sub-folders. I am using code I found at w3schools that looks like it should work, but I cannot get the images to show. The backup background color does show up.
I read several threads that suggested removing the ", adding a / or .../ to path name, I checked the file name and extension and nothing has worked.
What did I do wrong?
Here is my code:
html {
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
background-image: url("/images/funky-lines.png");
background-color: #cccccc;
}
.hero-image {
background-image: url("/images/the-road.jpg");
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
article,
aside,
footer,
header,
nav,
section {
display: block
}
nav {
font-family: 'Source Sans Pro', sans-serif;
font-size: 36px;
}
h1 {
font-size: 2em;
margin: .67em 0
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects
}
b,
strong {
font-weight: inherit
}
b,
strong {
font-weight: bolder
}
small {
font-size: 80%
}
img {
border-style: none
}
button,
input,
optgroup,
select,
textarea {
margin: 0
}
menu {
display: block
}
[hidden] {
display: none
}
<!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">
<title>Dorcraft Industries | Fallout 4</title>
<meta name="description" content="Discussion of Fallout 4">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?
family=Indie+Flower|Rokkitt|Source+Sans+Pro:700" rel="stylesheet">
</head>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Dorcraft Industries</h1>
<h3>in Fallout 4</h3>
</div>
</div>
<!-- <header><img src="images/banner.jpg" alt="Dorcraft Industries banner
image">
</header> -->
<nav>Home | The Game | Characters | About Us</nav>
<div>
<p>Is anything working?</p>
</div>
</body>
</html>
Ok, I changed the links to add two dots (..) in front of the URL and that seems to work. The examples I saw on W3Schools and in answers here showed three dots (...) and that did NOT work.
Thanks, that seems to have solved it.
Reading your post, your current folder structure is as below.
folder/
index.html
css/
style.css
images/
image1.jpg
image2.jpg
etc
js/
main.js
So when you try to use any image in your css you should add ../ in front of any url directing to an image. This ensures that the file will start looking from one folder up, instead of the current folder.
i.e.
background-image: url("../images/image1.jpg")
I was wondering if someone had an answer as to why the CSS for my HTML file only appears to be formatted in Google Chrome, but appears not formatted in Microsoft Edge, or Internet Explorer. First time post over here, so feedback would be much appreciated.
Here's my CSS and then my HTML:
html {
margin: 0;
padding: 0;
background-color: #777;
}
body {
width: 70%;
margin: 0 auto;
font: 100% Arial, Helvetica, sans-serif;
padding: 1em 50px;
background: white;
border-bottom: 10px solid gold;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 2em;
font-weight: normal;
font-style: italic;
margin: 0 0 .4em;
color: #ddd;
background-color: rgb(44, 45, 140);
padding: 5px 10px;
}
p {
line-height: 1.6;
text-align: justify;
width: 60%;
margin: 0;
margin-bottom: 1em;
}
a {
text-decoration: none;
color: red;
}
a:hover {
color: black;
}
//And here's my HTMl
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>External styles</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>HTML and CSS</h1>
<p>Page 2</p>
<p>One way to visualize how HTML and CSS work together is to think about a new building under construction. As the building goes up, the structure of the building is built first. At just the structural level, all you see is the frame of the new building, and other than the basic shape, you don’t really know how the building is going to look. Once the frame is complete, the “skin” of the building is added. This could be brick, wood, glass, stucco, or any number of outer materials that determine what the final look of the building will be.</p>
<p>HTML and CSS work much the same way. HTML gives us the structure, or “frame”, of our pages. We can use CSS to then control how this structure looks, where elements are positioned, and add additional decorative styling. What’s more, much the same way a building can change dramatically by adding a new façade; web pages can change their visual design by simply changing the page’s CSS.</p>
<p>This separation of structure and presentation creates a very flexible and efficient workflow where the structure of pages is independent of how the pages are presented. This allows you to update styling without changing page content, and provide different visual designs based on the context of where the page is being displayed.</p>
</body>
</html>
if your structure project
root
index.html
style.css
If you include style.css,
<link href="style.css"/>
But if your structure project
root
index.html
assets
style.css
You can include location style.css
<link href="assets/style.css"/>