I am beginner level front end developer i need help in psd to html when I slice
the image its size is 1920px and in html, div size is 100% but image is going out of the browser. What are my mistakes kindly help me what should I have to do to make it good I want to learn PSD to html.
Also guide me how to use slice tool in adobe Photoshop ?
html, body { margin: 0px; padding: 0px; border: 0px; }
#wrap{
width: 1920px;
background-color: #e7e7e7;
}
.menu{
width: 100%;
background-color: #202628;
}
.slider{
width: 100%;
}
<html>
<head>
<title>psd to html</title>
<meta charset="utf-8" content="text/html" http-equiv="content-type">
<link href="css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="wrap">
<header>
<ul class="menu">
<li>SiteName</li>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="slider">
<img src="images/banner.png" alt="banner">
</div><!-- end slider-->
</header><!--end header-->
</div><!-- end wrap -->
</body>
</html>
You should add css for image tag and also remove fix width of your #wrap and apply max-width.
Try this:
#wrap{
max-width:1920px;
width:100%;
}
.slider img{
width: 100%;
max-width:100%;
}
Related
So I have trouble trying to complete these two requirements.
My portfolio should have a link with an id of profile-link, which opens my GitHub or FCC profile in a new tab.
The height of the welcome section should be equal to the height of the viewport.
I thought I would have already cleared them but somehow the script in codepen says I haven't. So I'm not sure if I did what I was supposed to.
Any help is greatly appreciated!
#projects {
margin-top:1000px;
}
#navbar{
display:flex;
align-items: center;
justify-content:center;
top:0;
width:100%;
position: fixed;
}
#welcome-section{
height:100vh;
font-size:100px;
}
#body {
margin-top: 100px;
}
#media screen and (max-width:768px){
#navbar {
font-size:10px;
}
}
<html>
<nav id="navbar">
<div id="logo">
<h2>PORTFOLIO</h2>
</div>
<ul id="navlinks">
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<body id="body">
<welcome id="welcome-section">
<h1> Welcome! </h1>
</welcome>
<div id="projects">
<a class="project-tile" href="https://codepen.io/imsmoothlikebutter/pen/BaQeWwO" target="blank"> Project example </a>
</div>
<div>
freeCodeCamp
</div>
</body>
</html>
you should add following tag in your html code -
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
In tag use target as "_blank" instead of "blank"
In #media query you need to specify what happens to specific html element when viewport size is as per your declared size for that #media query
ex.-
#media screen and (max-width:768px){
#navbar {
font-size:10px;
}
#body{
height:400px;
}
}
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.
I am trying to set a background image for a header. This is what I want it to look like:
This is what I am getting:
So, a tiny weird strip at the bottom end. Here is my code:
html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="JavaScript2.js"></script>
</head>
<body>
<div id="header">
<nav class="cf" id="menu">
<ul>
<li>ABOUT</li>
<li>FOLK</li>
<li>JAZZ</li>
<li>SIGNATURE</li>
<li>NYLON</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div id="container">
<div id="logo">
<img id="rays" src="Images/PNGs/rayons.png">
<img id="base" src="Images/PNGs/baseLogo.png">
<img id="roue" src="Images/PNGs/roue.png">
<img id="letters" src="Images/PNGs/title.png">
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="JavaScript2.js"></script>
</body>
</html>
css
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: absolute;
background-image: url("Images/menu.jpg");
width: 100vw;
height: 10vh;
opacity: 1;
z-index: 6;
background-size: 100% 100px;
}
I have tried adding a size property to the background, like so:
background-size: 100% 100px;
And that's how I am getting the tiny strip at the bottom. Without that property I get nothing at all. Also, the header is not as long as the page although I have set the width at 100vw. Thanks of your time.
I made some changes to your header:
#header {
/*position: absolute;*/
background-image: url("Images/menu.jpg");
/*width: 100vw;
height: 10vh;
opacity: 1;
z-index: 6;*/
background-size:cover;/*added this*/
padding: 5px;/*added this*/
}
JSfiddle: https://jsfiddle.net/sg7dfpzj/
Hope that helps, cheerio!
Remove height for #header Class
#header {
position: absolute;
background-image: url("Images/menu.jpg");
width: 100vw;
/*height: 10vh;*//*Remove this*/
opacity: 1;
z-index: 6;
background-size: 100% 100px;
}
Add a padding top and bottom for the header until you have all the image showing, the problem with empty spaces, you dont tell the browser how to show the image,
add some more content or add a padding top and bottom.
Where is your code for the class="cf" and id="menu" for the line <nav class="cf" id="menu"> in the body section of the HTML code?
There might be an error there. Check it out.
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;
I'm trying to make a banner that fills all the screen horizontally but it isn't working as expected. There's some space that isn't fullfilled with it like you can see here: http://i.imgur.com/12NrL7R.png
I'd appreciate some help, thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Best webpage ever</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="banner">
<ul id="menu">
<li>Home</li>
<li>Students</li>
<li>XXX tuga</li>
</ul>
</div>
<div id="container">
<div id="content">
<p>cona</p>
</div>
</div>
<div class="banner">
</div>
</body>
</html>
.banner{
background-color: black;
width: 100%;
height: 200px;
}
html, body {
margin:0;
padding:0;
}
Try this, the body/html by default has padding, so you might want to try to remove that...
body tag applies some spacing in most browsers. Be sure to have:
body {
margin: 0;
padding: 0;
}
add this to your css:
body{
padding:0px;
}
let me know if that helps