Hello fellow web developers, I am quite new to web development and have been practicing on my own. I'm trying to create a website and am currently using HTML and CSS. I want the following presentation for the homepage of my website:
I have been testing around with wrappers and body wrappers so that when I open the website on one monitor all the elements are displayed in the middle like the picture above, and when I open the website on my other smaller monitor it should be the same and display all the elements with the same layout. The problem is the navigation bar the title and everything changes position once the window size changes.
Here is the code i currently have:
<!DOCTYPE html>
<html>
<title>WUNI</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<body>
<!-- !PAGE CONTENT! -->
<div>
<!-- NAV BAR -->
<a id="nav">
Archive
Home
Contact
</a>
<div id="title">
<h1 class="max-width">WUNI</h1>
</div>
<p id="motto" class="max-width">With a wide range of skills, we generate cohesive content that
span from physical posters to interactive 3D web content
</p>
</div>
<!-- BODY BORDER XD -->
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<!-- Footer -->
<footer id="footer">
<i></i>
</footer>
</body>
</html>
and here is my css:
body {
background-color: red;
margin-right: auto;
margin-left: auto;
max-width: 960px;
padding-right: 10px;
padding-left: 10px;
}
/**
* Using max-width
* will improve the browser's handling of small windows.
* This is important when making a site usable on small devices.
*/
.max-width {
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
/* end of special */
/* NAV BAR */
#nav{
display: inline-block;
padding-top: 20%;
padding-left: 0%;
}
.item{
color: white;
text-decoration: none;
font-size: 50px;
padding-bottom: 20px;
padding-left: 50px;
font-family: Impact;
}
.item:hover{
background-color: blue;
}
/* END NAV BAR */
#title{
position: absolute;
color: white;
font-size: 150px;
text-align: center;
font-family: Impact;
top: 10%;
left: 30%;
}
#motto{
position: absolute;
color: white;
font-size: 20px;
text-align: center;
font-family: Impact;
top: 70%;
left: 20%;
}
#footer{
position: fixed;
left: -3%;
bottom: 0;
padding-bottom: 8%;
width: 100%;
background-color: transparent;
color: white;
text-align: center;
}
/* BODY BORDER */
#top, #bottom, #left, #right {
background-color: white;
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 30px;
}
#left { left: 0; }
#right { right: 0; }
#top, #bottom {
left: 0; right: 0;
height: 30px;
}
#top { top: 0; }
#bottom { bottom: 0; }
/* END BODY BORDER */
If anybody could help me out, I would greatly appreciate it! :D
I would recommend using a grid system to achieve this. A grid system solves all the issues you are having currently with your css. One of my personal favorites is bootstrap as it works across browsers, various screen sizes and comes bundled with a bunch of other useful features as well.
As you are new to web development and bootstrap, you can use a visual bootstrap builder such as layitout to get off the ground really quickly.
Also another tip based on your css, you might want to think about making your font sizes responsive too. This answer should be a good starting point
Use Css grid system, with template areas and media queries. In this video is a clear example to achieve what you want https://youtu.be/7kVeCqQCxlk
Related
I'm very new to CSS/HTML so apologies for the crass coding. I'm having trouble having my website stay consistent on different desktops. On mine it looks exactly as I'd like it to --> X. However on my friends' desktops the word "Catitude" is shifted way past the top and cropped.
I have a div containing the head .
<link href='https://fonts.googleapis.com/css?family=Bungee
Shade'rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
[CSS]
#parent {
position: absolute center;
background-color: #FFE1E9;
height: 690px;
width: 1368px;
margin: auto;
border-style: double;
border-color: #B8BEFF;
border-width: 20px;
}
.text {
position: relative;
top: -150px;
left: 166.4px;
width: 1035px;
height: 141px;
font-family: "Bungee Shade";
font-size: 150px;
color: #B8BEFF;
}
[HTML]
<div id="parent">
<h1 class = "text">CATTITUDE</h1>
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://i.imgur.com/Ttpth8c.png" usemap="#image-map" IMG STYLE = "position:relative; top:-360px" >
instead of using px ie ;
top: 1035px;
left: 141px;
use percentage % :
top: 25%;
left: 10%;
based on your requirments
The problem is you dont automatically center for your text!
Therefore your layout will be displayed differently on differnet displays as the resolution may vary.
Try this code for your text element:
.text {
position: relative;
top: -150px;
margin-left: auto;
margin-right: auto;
width: 1035px;
height: 141px;
font-family: "Bungee Shade";
font-size: 150px;
color: #B8BEFF;
}
I'm making a gaming site and I'm having some troubles with text positions. What im trying to achieve is having my navbar text ontop of a custom navbar backgroud
how it looks now
navbar
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
height: 100%;
margin:0;
padding:0;
}
.topnav{
position:absolute;
text-align: center;
margin:auto;
width: 50%;
}
.topnav a {
line-height: 200px;
padding: 50px;
display: ;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
}
.navbackground {
position:absolute;
top: -50px;
left:0;
right:0;
bottom: 700px;
margin:auto;
width: 50%;
}
.banner {
position:relivent;
top: 10px;
left:0;
right:0;
bottom:0;
margin:auto;
width: 100%;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<img src="nav.png" class="navbackground ">
<img src="wallpaper.JPE" class="banner" >
</body>
</html>
I was considering adding the nav.png as a background image in the topnav class but i couldn't seem to get it to scale if you no how to scale it correctly or have any suggestions please let me know!
ps.. I'm new to CSS, HTML please cut me some slack :)
Even tough z-index property works (it controls how do elements stack on each other), since you have stated you are new to HTML, you should understand that probably the best way to achieve what you need is to correctly order your elements.
You now have:
topnav
link1
link2
link3
topnav background
webpage background
The elements are rendered on the way you write them. So, for example, to get the background to be rendered first, you have to write it first.
webpage background -- this will be rendered first
topnav
link1
link2
link3
topnav background
Also, for the topnav background, you need to place it before the topnav. But if also what you want is for the topnav to be relative to the background, you also will need to nest them:
webpage background
topnav background -- background is the parent of topnav
topnav
link1
link2
link3
That way, the order of rendering is:
Draw webpage background
Draw topnav background
Draw topnav (nothing here, just a placeholder)
Draw links
As you can see, your topnav in this case is kind of useless. You can just apply a background to the topnav and discard the topnav background element:
webpage background
topnav -- here we apply the background using background CSS property
link1
link2
link3
I hope that made it clear. You can achieve the same results without changing your HTML using z-index, but I recommend first to have a clear HTML and semantic.
You have to set z-index (higher one for nav)
More on w3schools.
topnav{
z-index: 1000;
}
You need to add z-index to the parent of Nav.
Setting it as a background image would be the better option, in my opinion.
You can scale the background image using the background-size CSS property which you set to either contain or cover (Depending on how you want it to behave if the aspect ratios of div and png don't match, see https://www.w3schools.com/cssref/css3_pr_background-size.asp).
Rather than scaling the background I'd suggest either scaling the image in an image editor to match the size of your navigation-div or setting the dimensions of the div to match your png.
Same for the background image. You could make it the background-image of the body or a surrounding div.
Here's an example: https://jsfiddle.net/hg5jxn3s/7/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
height: 100%;
margin:0;
padding:0;
background: url(wallpaper.JPE) no-repeat top left;
background-size: cover;
}
.topnav{
background:url(https://i.stack.imgur.com/h54t6.png) no-repeat top left;
background-size: contain;
position:relative;
text-align: center;
margin:0px auto;
width: 900px;
height: 150px;
padding:70px 0px;
}
.topnav a {
line-height: 1em;
padding: 0px 50px;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</body>
</html>
You'll notice that I've changed the width from flexible (50%) to a fixed width. I've done this because the navigation items themselves don't scale in your setup, so at a certain size they'd break into a second row which doesn't work with that background-image that well.
You can see what it would look like if you change the above CSS for topnav to:
.topnav{
background:url(https://i.stack.imgur.com/h54t6.png) no-repeat top left;
background-size: 100% 100%;
position:relative;
text-align: center;
margin:0px auto;
width: 50%;
height: auto;
padding:70px 0px;
}
see https://jsfiddle.net/hg5jxn3s/10/
Are you looking for something like this? ;)
Basicly in your code, give your .topnav{ ... } a position of relative + give it the background image as I did in this fiddle. Then make a new html div with a class="nav" and add the css .topnav .nav{ position: absolute; left: 10%; width: 80%; } and give the .topnav a a style of line-height: 60px; width: 24%; display: inline-block;
I think that were like almost all changed I made.
body {
background-color: black;
height: 100%;
margin: 0;
padding: 0;
}
.topnav {
display: block;
margin: 20px auto;
width: 80%;
height: 60px;
background-image:url(https://i.stack.imgur.com/h54t6.png);
background-repeat: no-repeat;
background-position: center;
background-size:100%;
position: relative;
}
.topnav .nav {
position: absolute;
left: 10%;
width: 80%;
}
.topnav .nav a {
line-height: 60px;
display: inline-block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
width: 24%;
}
.navbackground {
position: absolute;
top: -50px;
left: 0;
right: 0;
bottom: 700px;
margin: auto;
width: 50%;
}
.banner {
position: fixed;
top: 20px;
left: 0;
right: 0;
margin: auto;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<img src="https://cdna.artstation.com/p/assets/images/images/005/718/562/large/josh-bruce-headerfinal.jpg?1493246411" class="banner">
<div class="topnav">
<div class="nav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</div>
</body>
</html>
I have been working on a new homepage for my website, but
I can't figure out why text moves up and down when I resize
my browser.
My CSS Code:
.welcome {
width: 100%;
height: 60px;
background-color: #4CAF50;
margin-top: -4px;
}
.welcome h1 {
font-family: 'Lato', sans-serif;
color: white;
font-size: 40px;
margin-bottom: 20px;
margin-top: 5px;
margin-left: 15px;
}
.welcome p {
color: white;
overflow: hidden;
float: left;
position: relative;
top: -50em;
}
#welcome-background {
width: 100%;
height: auto;
max-height: 1000px;
margin-top: -16px;
min-height: 500px;
}
If you see any other CSS error's please let me know
My HTML:
<div class="welcome">
<h1 style="float:left;">About Us</h1>
<img id="welcome-background" style="" src="/new_homepage/img/black-bg.png">
<p style="color: white; position: relative; top: -50em;">Hardwire Studios' is a gaming community that has servers am a variety of games, such as Minecraft, Garry's Mod, Counter-Strike: Global Offensive, Rust, and many more coming in the future. We try to provide the best "Lag-Free" experience on all of our server, yet also make them as fun and enjoyable as they can be, by only using the best of the best host companies. You can also see our future plan's by simply scrolling down a little more, until you find the "Future Plan's" Section.</p>
</div>
Your paragraph uses relative positioning, which means it is still in the flow of the document. Because it comes after an image, its vertical position changes as the height of the image changes.
Instead. put the image and paragraph inside of a wrapper element that is positioned relatively, then position the paragraph with absolute positioning.
This could look something like this:
HTML:
<div id="welcome-wrapper">
<img id="welcome-background" src="...">
<p>Hardwire Studios' is...</p>
</div>
CSS:
#welcome-wrapper {
position: relative;
}
#welcome-wrapper p {
position: absolute;
top: 10em;
}
I am working on a small project just for my own fun. I have made a navbar at the top of the html page and I used some css to make it look nicer.
Here is the html
<html>
<head>
<title> Website </title>
<style type="text/css">
body {
margin: 0;
background: #F2F2F2;
}
.navbar {
margin: 0;
padding: 0;
width: 100%;
height: 45px;
background: #12B0CD;
position:fixed;
}
#navbar-logo {
font-family:'Lato', Arial;
font-size: 35px;
color: white;
border: none;
background: #12B0CD;
}
.content {
top: 50px;
margin: none;
width: 100%;
height: 50%;
z-index: -1;
}
</style>
</head>
<body>
<div class="navbar">
<div id="navbar-logo">
<button id="navbar-logo">Fancy Name </button>
</div>
</div>
<div class="content">
<div id="content-box">
</div>
</div>
</body>
</html>
If you pop this into notepad and open it in a browser you will see that the class content does not show and I don't know why. I need help. In the normal code I use stylsheets I don't know if that would change anything.
Since your content box is empty, and you are using percentages, the box needs it's parent (body) to have a height. If you set, width:100%;height:100%; on your body you should see the box.
I'm creating a basic contact page for my website. I'm struggling to get it looking good in varying resolutions.
My laptop is 1368x766 and my monitor is 1920x1080.
The elements that set to absolute are moving around, the top image isn't moving...all other elements are moving... I'm so confused:
CSS:
body {
text-align: center;
background: url("http://i.imgur.com/JN0YSkP.png");
background-repeat: repeat;
background-position: center;
color: white;
font-family: 'Roboto', sans-serif;
padding-top: 20px;
padding-bottom: 0px;
}
p {
position: absolute;
top: 225px;
right: 410px;
font-size: 32px;
}
p2 {
position: absolute;
top: 420px;
right: 974px;
font-size: 28px;
}
p3 {
position: absolute;
top: 420px;
right: 570px;
font-size: 28px;
}
p4 {
position: absolute;
top: 420px;
right: 142px;
font-size: 28px;
}
.LI
{
display: inline-block;
position: absolute;
z-index : 2;
top: 510px;
right:1050px;
}
.CV
{
display: inline-block;
position: absolute;
z-index : 2;
top: 490px;
right: 620px;
}
.mail
{
display: inline-block;
position: absolute;
z-index : 2;
top: 510px;
right: 196px;
}
.Divider
{
position: absolute;
z-index: 1;
top: 380px;
right: 28px;
padding-bottom: 20px
}
html { -webkit-font-smoothing: antialiased; }
HTML:
<!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<title>Benjamin Edwards | Web Designer | West Sussex</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Benjamin Edwards is a Web Designer and IT Project Manager from West Sussex. Say hello!">
<meta name="keywords" content="benjamin, edwards, IT, project, manager, photoshop, web, designer, worthing, west sussex">
<meta name="robots" content="INDEX,FOLLOW">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="http://i.imgur.com/6gBN3LF.png">
<p>Hi! I’m Benjamin, a Worthing based</br>Web Designer and IT Project Manager.</p>
<p2>Connect on LinkedIN:</p2>
<div class="LI">
<a href="https://www.linkedin.com/in/benjaminedwards86">
<img src="http://i.imgur.com/KEqGBV3.png">
</a>
</div>
<p3>Download my CV:</p3>
<div class="CV">
<a href="https://www.dropbox.com/s/9jtsjxpb9xqdpdw/Benjamin%20Edwards%20-%20CV.docx?dl=1" download="benjamin-edwards-CV.doc">
<img src="http://i.imgur.com/ce0Zzgi.png">
</a>
</div>
<p4>Send me an email:</p4>
<div class="mail">
<a href="mailto:benjamin.edwards86#gmail.com">
<img src="http://i.imgur.com/KQV7Eip.png">
</a>
</div>
<div class="Divider">
<img src="http://i.imgur.com/B4TiKRT.png">
</div>
</body>
JSFiddle
As exmaple how simple it can be for you, i created a jsfiddle:
JSFiddle
HTML
<img src="http://i.imgur.com/6gBN3LF.png">
<p>Hi! I’m Benjamin, a Worthing based</br>Web Designer and IT Project Manager.</p>
<ul>
<li><h1>Connect on LinkedIN:</h1>
<a href="https://www.linkedin.com/in/benjaminedwards86">
<img src="http://i.imgur.com/KEqGBV3.png">
</a>
</li>
<li><h1>Download my CV:</h1>
<a href="https://www.dropbox.com/s/9jtsjxpb9xqdpdw/Benjamin%20Edwards%20-%20CV.docx?dl=1" download="benjamin-edwards-CV.doc">
<img src="http://i.imgur.com/ce0Zzgi.png">
</a>
</li>
<li><h1>Send me an email:</h1>
<a href="mailto:benjamin.edwards86#gmail.com">
<img src="http://i.imgur.com/KQV7Eip.png">
</a>
</li>
</ul>
CSS
body {
text-align: center;
background: url("http://i.imgur.com/JN0YSkP.png");
background-repeat: repeat;
background-position: center;
color: white;
font-family: 'Roboto', sans-serif;
min-width: 900px;
}
img {
margin: auto 20px;
}
ul {
height: 275px;
width: 80%;
margin: 10% auto;
border: 3px solid #31C2A9;
min-width: 900px;
}
ul li {
float: left;
width: 33%;
border-right: 1px solid #31C2A9;
list-style-type: none;
height: 275px;
min-width: 275px;
}
ul li:last-child {
border-right: none;
}
You get rid of all the css selectors and simplify your code :-)
And there is no single position absolute ;-)
Its always wise to make a fiddle about the problem you are having.
Coming to the issue about elements moving around, Its because you have absolutely placed ALL the elements and hard coded the values. Like:
p {
position: absolute;
top: 225px;
right: 410px;
font-size: 32px;
}
Since at different browser sizes, the resolution changes and so does the placement of the divs, your elements are moving awry ( Since you have absolutely positioned them only to ONE browser dimension.
So what you should do:
First, you should make sure you understand when should a div be absolute and when should it be relative.
I'll give a thumb rule: If you want to position an element with respect to a div. Make it position absolute and its parent, position: relative.
You could make your website responsive using Bootstrap. But you could also give measurements in % and prevent distortions.
If I am to do one:
p3 {
position: absolute;
top: 20%;
right: 30%;
font-size: 1.1em;
}
If you dont exactly know whats happening, you should spend time studying %, em measurements etc.
If you can create a fiddle and show your code, We can help you fix it.
You can use CSS media queries for this.
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen).
With media queries, we'll take this to a new level. Rather than looking at what device it is, we will look at what capabilities the device has. More specifically, we will look at the following:
height and width of the device height and width of the browser
screen resolution orientation of the device (for mobile phones and
tablets; portrait or landscape)
CSS2 allows you to specify stylesheet for specific media type such as screen or print.
Now CSS3 makes it even more efficient by adding media queries.
You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices.
It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content.
Example:
The following CSS will apply if the viewing area is smaller than 600px.
#media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
If you want to link to a separate stylesheet, put the following line of code in between the <head> tag.
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
Multiple Media Queries:
You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.
#media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Device Width:
The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.
#media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}