Current webpage condition image:
I am a new programmer currently teaching myself HTML / CSS / JavaScript. I am practicing making a webpage and trying to get out of the tutorial swamp by getting my hands dirty.
I've made one webpage I'm happy with and this is my second one. My problem I believe is with my .png image in my html file as when it loads in it loads very large and makes the page overflow by a lot. Even after changing the width and adding a overflow: hidden; it takes away the scroll bars but the page is still messy.
I've tried the overflow: hidden; on the html, body{} and the img tag itself. I will provide my code and photos of the page currently to show you the issue. In the meantime overflow hidden will be turned off.
(There's a photo of the page in the link). Code posted below
* {
margin: 0;
padding: 0;
}
.wrapper {
padding: 1170px;
margin: auto;
}
img {
max-width: 200px;
max-height: 200px;
}
header {
background-color: purple;
background-image: url(../imgs/mountains.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Practice2 page</title>
<link rel="stylesheet" href="stylesheets/practice2.css">
</head>
<body>
<header>
<div class="wrapper">
<div class="logo">
<img src="imgs/image1.png" alt="logo" width="200">
</div>
<ul class="nav-bar">
<li>HomePage</li>
<li>About Me</li>
<li>Contact Me</li>
<li>News</li>
</ul>
</div>
<div class="hook">
<h1>DeadInside</h1>
Learn More
</div>
</header>
</body>
</html>
The problem is with your .wrapper class, it has padding:1170px and that causes the wrapper elem to be way bigger that the body
Try as this
.wrapper {
padding: 10px;
margin: auto;
}
You can use the padding in all the diorections with the
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
More about this property on W3Schools
Related
For some reason my html and css isn't taking up the entire width of the page, even though I set margin and padding to 0, and width to 100%. It's always worked before, but I have no idea why it isn't working this time. The only thing that has been implemented so far is the just the background and navbar. I have attached an image to demonstrate how it appears right now. Any help would be appreciated.
*{
margin: 0;
padding: 0;
width: 100%;
box-sizing: border-box;
font-family: sans-serif;
}
body{
overflow-x: hidden;
}
.container{
width: 100%;
height: 100vh;
background: #42455a;
}
.navbar ul{
display: inline-flex;
margin: 50px;
}
.navbar ul li{
list-style: none;
margin: 0px 20px;
color: #b2b1b1;
cursor: pointer;
}
.logo img{
width: 30px;
margin-top: -7px;
margin-right: 48px;
}
.active{
color: #19dafa !important;
}
<!DOCTYPE html>
<html>
<head>
<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- CSS File -->
<link rel="stylesheet" type="text/css" href="check.css">
<title>Webpage title</title>
</head>
<body>
<div class="container">
<div class="navbar">
<ul>
<!-- logo -->
<li class="logo"><img src=""></li>
<li class="active">Home</li>
<li>Services</li>
<li>Product</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
You're using Bootstrap.css, which defines a max-width: 540px rule on any element with class="container" when the browser viewport width is wider than 576px:
To fix this, use a different class name other than container, or extend the .container rule in your own stylesheet to set max-width: none;.
But, in my frank opinion, the best solution is to not use Bootstrap.css and to instead take responsibility for styling your own website. I feel Bootstrap has gotten bigger and bigger over the years it takes just as much effort to "learn Bootstrap" as it does to learn how to write one's own base common stylesheet.
Cannot make the logo and text appear in a row on header tag of webpage by applying flex in CSS. My code is along with this post and also attached output on web browser (Chrome) at the end..
Is this problem caused by a mistake in below code. New to webdesign, can anyone find what's wrong with my code. I want to apply flex on <header> tag so that img and <nav> content will be in a row. But that's not happening. See the webpage screenshot at the post end.
.container {
width: 1024px;
min-height: 300px;
margin-left: auto;
margin-right: auto;
}
header {
background-color: #63BC7D;
min-height: 100px;
display: flex;
}
main {
/*background-color: #179E3F; */
min-height: 300px;
display: flex;
align-items: center;
/*justify-content: space-between;*/
}
.cards {
background-color: #AC1149;
min-height: 300px;
display: flex;
justify-content: space-between;
}
.card1 {
background-color: #6EB806;
min-height: 300px;
width: 30%;
}
.card2 {
background-color: #36E059;
min-height: 300px;
width: 30%;
}
.card3 {
background-color: #00FF09;
min-height: 300px;
width: 30%;
}
.herobox1 {
flex: 2;
/*background-color: #8D4E85;*/
}
.herobox2 {
/*background-color: #684F96;*/
flex: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bike Repair Shop</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="cssReset.css">
</head>
<body>
<div class="container">
<header>
<div class="logo">
<img src="https://via.placeholder.com/140x100" alt="Website Logo">
</div>
<nav>
Book
Online
About
Contact
</nav>
</header>
<main>
<div class="herobox1">
<h1>Mobile bike repairs </h1>
<p>Many people have difficulty getting their bikes to a bike shop. We call to your office or home anywhere in greater Dublin.</p>
<p>Fast, convenient bike servicing with up-front pricing. All without the hassle of taking your bike into a shop. </p>
</div>
<div class="herobox2">
<img src="https://via.placeholder.com/140x100" alt="Person servicing bike in Dublin">
</div>
</main>
<div class="cards">
<div class="card1"></div>
<div class="card2"></div>
<div class="card3"></div>
</div>
</div>
</body>
</html>
Wrapping a div around the texts and adding a padding-top seems to resolve it.
<nav>
<div style="padding-top: 18%;">
Book
Online
About
Contact
</div>
</nav>
https://jsfiddle.net/sLmj568x/
header{ flex-direction: column; }
Add this code to your CSS code.
Yes, finally with the help from this forum I understand my mistake. As you people said cssreset caused the trouble. I need to first cssReset.css and then my custom styles.css to get the correct effect. Otherwise the effect made using styles.css is overriden by cssReset.css A simple mistakes. Thanks everyone.
I've been learning HTML/CSS for about two weeks.
I've been making dummy websites just for practice and I've been struggling lately with a header problem. I will post code/pictures to help be as specific as I can.
I'm attempting to head a header on my web page with a solid background color going across the top, then a logo(title) on the left hand side of the header and a nav/search bar on the right hand side all within a container of 1020px.
Everything seems to look fine full screen but when I make my browser half width it seems to make my nav/search bar go off the screen on the right hand side and when I scroll over the header background color is missing.
I'm unsure why it's doing this so if someone has a fix could you explain to my not only why it's doing this but how/why I need to do what I need to do to fix it. Thank you so much!
My HTML file
<html>
<head>
<title>Dummy Site</title>
<link rel="stylesheet" type="text/css" href="stylez.css">
</head>
<body>
<header>
<div class="container">
<div id="logo">
<h1>Another Dummy Site</h1>
<em>Just another dummy web page</em>
</div>
<div id="nav">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<form>
<input type="search" placeholder="search 4 somethin">
</form>
</div>
</div>
<div class="clearfix"></div>
</header>
</body>
</html>
CSS:
*{
margin: 9;
padding: 9;
}
body {
font-family: monospace, sans-serif;
width: 109%;
background: #ccc;
}
header{
background: #fc9;
}
.container{
width: 1020px;
margin: 9 auto;
}
#logo{
float: left;
}
#nav{
float: right;
}
.clearfix::after{
content:"";
clear: both;
display: table;
}
Here is a pic of the site in full screen
Here is a pic of it in the browser half screen - notice the scroll bar and cut off on the right.
Here is a pic of when I scroll to the right
try this
.container {
max-width:1020px;
width:100%;
margin:0 auto;
}
jsfiddle
I'm building a website for class, based on a provided template, and I'm struggling to make it so that my text will move as the window gets resized (right now, resizing the window obscures the text and associated buttons).
Ideally, I'd like for the page to be anchored in such a way that the focus remains on the text/buttons - and by extension, the bottom right corner of the image - as the window is resized.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<!-- This tells mobile devices not to zoom out the page, start with scale=1 -->
<link rel="stylesheet", type="text/css", href="Vendors/css/normalize.css">
<link rel="stylesheet", type="text/css", href="Vendors/css/grid.css">
<link rel="stylesheet", type="text/css", href="Vendors/css/ionicons.min.css">
<link rel="stylesheet", type="text/css", href="Resources/css/style.css">
<link rel="stylesheet", type="text/css", href="Resources/css/queries.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<title>Whitetail Acres Tree Farm</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="Resources/img/logo-white.png" alt="Omnifood logo" class="logo">
<ul class="main-nav">
<li>Food Delivery</li>
<li>How it Works</li>
<li>Our Cities</li>
<li>Sign up</li>
</ul>
<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
</div>
</nav>
<div class="hero-text-box">
<h1>Schedule <br> Your Visit!</h1>
<a class="btn btn-full js--scroll-to-plans" href="#">I'm hungry</a>
<a class="btn btn-ghost js--scroll-to-start" href="#">Show me more</a>
</div>
</header>
And here is my CSS:
/* Universal Reset*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html
{
background-color: #ffffff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.clearfix {zoom: 1}
.clearfix:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
header{
background-image: url(img/hero.jpg);
background-size: cover;
background-position:bottom, right;
height: 100vh;
background-attachment:inherit;
}
.hero-text-box{
position: absolute;
width:1080px;
top:80%;
left:55%;
text-align: right;
transform: translate(-50%, -50%);
}
.row{
max-width: 1140px;
margin:0 auto;
}
section{
padding: 80px 0;
}
.box{
padding: 1%;
Looks like you havent defined a width for the row.
Try something like:
.row{
max-width: 1140px;
width: 100%;
margin:0 auto;
}
When I do web applications I love to use bootstrap. It gives me a bunch of css classes out of the box that help me create a responsive frontend that will do what I need it to on any screen size. Long story short, I would use media queries, the bootstrap layout grid, or a combination of both.
There are many tutorials on youtube. This guy shows how the basics work for the bootstrap layout grid. https://youtu.be/GDwWmrpCa30
Media queries are useful when you need your UI to do something different based on the current device screen size. This can be used without the need for bootstrap, but can also be used with bootstrap to make really responsive apps. There are also countless tutorials on youtube for that also, but here is a good one to check out. https://youtu.be/2KL-z9A56SQ
Media Query Example:
#media only screen
and (*Your threshold criteria goes here* EXAMPLE: max-width : 1000px) {
//css goes here with whatever css you want to fire at this threshold
}
Let me know if I can be of further assistance. Good luck.
When setting an exact width to an absolutely positioned element, you should expect that it will stay at that width, regardless of browser size.
.hero-text-box{
position: absolute;
top:80%;
left: 49%;
text-align: right;
transform: translate(-50%, -50%);
max-width: 1080px;
width: 100%;
}
Also, the left value should be less than 50% because of the transform rule that moves it off screen.
Im trying to use a full screen image as my headers background but for some reason the image is not showing up and I cant figure out what im doing wrong. Can someone help? The image is in the same folder as the html and css files btw.
CSS
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header{
background-image:url(headerbackground.png);
width: 100%;
height: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
float: right;
}
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<div id="header">
<ul class="col-4">
<li>SOBRE</li>
<li>TRABALHOS</li>
<li>CONTACTO</li>
</ul>
</div>
</header>
</body>
</html>
Since you've given your header div (#header) no explicit height and floated the only child it has, it collapses and acts like it has no content. Either give it a height or add overflow:auto to the CSS rules for it.
Agree with #j08691.
Working with html layout and css, it's always helpful, for me at least, to add following css:
border: 1px solid green; //or any color you like
so that we can see clearly how is the layout.
additional, in case you have issue with src image size, you may use
background-size: cover;