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>
Related
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
I'm currently creating a website just to mess with CSS and HTML, however, I've ran into a problem with my navigation bar. I've created it, however, when I put my logo in at the top of the page, above the nav bar, the nav bar moved down to like the middle of the page and I'm not sure how to move it so that it's just below the logo. From what I remember this happened when I put in another image which I haven't positioned at that point, but even after moving that image, the nav bar didn't move back to its original point. I tried setting the position of it to fixed, but it moved it to the left side of the screen.
And also, how would I go about moving the second image within my website without ruining the nav bar again?
Here is my CSS:
#image1 {
display: block;
margin-left: auto;
margin-right: auto;
height: 8%;
width: 30%;
}
#image2 {
position: relative;
width: 20%;
top: 400px;
right: 481px;
}
ul {
list-style-type:none;
width:60%;
margin: auto;
padding: 0;
overflow: hidden;
background-color: rgba(163,21,23,1.00)
}
li {
float: right;
width: 33.33%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border: thin;
border-style: groove;
}
li a:hover {
background-color: #111;
}
body {
background-color: rgba(96,96,96,1.00)
}
And this is my HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> LoL </title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<img src="assets/lol.png" alt="Logo" id="image1">
<img src="assets/minions.png" alt="Minions in LoL" id="image2" >
<ul>
<li><a class="active" href="#Home">Home</a></li>
<li>Farming</li>
<li>Best champions for each role
</li>
</ul>
<banner></banner>
</body>
</html>
In the CSS for image 1, change the height from a percentage to pixels. (Say 150px)
Image1 { height: 150px; }
Then with your ul element try putting
Ul {
Top: 150px;
Display: Fixed;
}
That should sit the Nav bar right under the logo!
Use the development tools in your browser to see what happening.
I.E margin forcing it down etc.
On chrome you can right click and "inspect element".
I'm using HTML & CSS to try to make a centered image, that when you click it, it gives you the full size version. The image is also scalable so on smaller devices it scales down. Right now I am not worrying about bandwidth of the client. I'm having an issue where the clickable area is outside of the image which makes it look like theres some sort of invisible link.
Here is what I mean.
All areas where I have arrows the user can click - but that doesn't make sense. I just want the image to be clickable. I can get it to work, but I have to use inline block on the a tag, which ruins the scaling depending on the width of the screen.
Here is the HTML for this part.
<a class="image_link" href="/images/guides/wavelist_editing/fullsize/wave3.jpg"><img class="scalable_image popout_image centered" src="/images/guides/wavelist_editing/wave3.jpg"></a>
And the CSS.
.content a:link.image_link { /*Not overqualified - overrides stuff on main.css. gets rid of the underline*/
border-bottom: 0px none transparent;
text-decoration: none;
display:block;
}
.content .popout_image {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: 8px 8px 10px #555;
margin-bottom: 10px;
max-width: 100%;
min-width: 100px;
}
.content .scalable_image {
min-width: 100px;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
To verify this information here is the computed values for the link and image respectively in firefox (the first image incorrectly shows inline-block, I took this image in testing, it's actually block - but both values introduce an error, no-scaling or too big for clicking):
I feel like I am missing something really obvious here. I can't google this because "image link" seems to be pretty generic.
You could achieve it like this:
JSFiddle - DEMO
HTML:
<div class="content">
<a class="image_link" href="/images/guides/wavelist_editing/fullsize/wave3.jpg"><img class="scalable_image popout_image centered" src="http://placehold.it/350x150"></a>
<div>
CSS:
.content {
text-align: center; /* add this */
}
.content a:link.image_link {
border-bottom: 0px none transparent;
text-decoration: none;
display: inline-block; /* add this */
}
.content .popout_image {
display: block;
box-shadow: 8px 8px 10px #555;
margin-bottom: 10px;
max-width: 100%;
min-width: 100px;
}
.content .scalable_image {
min-width: 100px;
max-width: 100%;
height: auto;
width: auto\9;
}
How about this?
<a href="#">
<img src="https://www.google.com/images/srpr/logo11w.png" />
</a>
a {display:inline-block;width:80%; height:auto}
img {width:100%}
http://jsfiddle.net/ko2wzah9/
As I understand, you need like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>image link</title>
</head>
<body>
<a href="http://lorempixel.com/700/700" class="image-link">
<img src="http://lorempixel.com/300/300" alt="">
</a>
</body>
</html>
and the css
a{
display: inline-block;
position: static;
}
a img{
position: relative;
z-index: 2;
}
a:before{
content: '';
position: fixed;
background: rgba(031, 031, 031, 0.7);
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
the example
I want to create a header bar at the top of the web-page, give it a background color and then add a logo on it.
So the problem is:
The width of the bar should be the width of the page. Its height
should be the size of the logo (plus some padding added around the
logo image).
Or is there a way to make the bar as big as its
content plus the padding added to the content?
I actually searched SO and found this, I tried to reproduce it into my code but it does not seem to help me.
I have also seen this and this.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div {
position: absolute;
height: auto; //**** When changed to a percent value, it displays
width: 100%;
top: 0px;
left: 0px;
float: left;
background: #000029;
}
.logo {
position: fixed;
top: 5px;
left: 12px;
bottom: 4px;
}
</style>
</head>
<body>
<div class="div">
<img src="http://********Header.svg" alt="Logo" class="logo" >
</div>
</body>
</html>
It just does not display the background color at all, and when I change the value of height to some value in percent, it displays.
So what I want is that the height of the bar should fit to its content i.e. the logo image.
EDIT:-
Remove virtually all of your CSS rules and just use something as basic as:
.div {
background: #000029;
}
.logo {
vertical-align:top;
}
jsFiddle example
change you css code like below:
.div {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding:5px;
}
.logo {
}
see the demo here ---->http://jsfiddle.net/4A7Q9/1/
The style can be something along these lines:
<style>
.div {
width: 100%;
background: #000029;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
}
.logo {
}
</style>
I have big problems with css buttons... My screen size is 1366x768 and their position is just fine until I zoom out in browser or show it to someone who have bigger screen.
Can anyone help me, please?
Site with problems: http://riotpointscodes.info/region.html
You are positioning your buttons absolutley to the document body:
Example left button:
position: absolute;
top: 475px;
width: 251px;
Place all buttons in a container positioned over your paper and set the position to relative or absolute and then play with the placement of the buttons.
When you use absolute positioning, you need an anchor point. The anchor point is the first element up the HTML tree that has position:relative defined. If no element is found, the BODY tag becomes the anchor point.
Since you have a wrapper with stuff inside it, this should be come your anchor point in order to keep everything inside even if the browser resizes, not the BODY.
Bored at work today and your graphics were pretty cool so....
Here you are my friend:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Riot Points Codes</title>
<link rel="SHORTCUT ICON" href="http://agessy.com/favicon.png" />
<style type="text/css">
body {
background: url("http://riotpointscodes.info/images/background.jpg") no-repeat scroll center top #070b14;
margin: 0;
padding: 0;
}
#wrapper {
width: 895px;
height: 493px;
position:relative;
top:180px;
margin:0 auto;
background: url('region_files/paper.jpg') no-repeat top center;
}
.choice {
background: url("region_files/map.png") no-repeat scroll 0 0 transparent;
height: 212px;
left: 50%;
margin-left: -259px;
position: absolute;
top: 43px;
width: 517px;
}
.logo {
left: 50%;
margin-left: -205px;
position: absolute;
top: -135px;
}
#lol-custom-buttons {
position: absolute;
bottom: 107px;
left: 0px;
width: 100%;
height: 90px;
text-align:center
}
.play-free-link {
height: 90px;
width: 251px;
background-repeat: none;
color: #ECC873;
display: inline-block;
}
.play-free-link.one {
background-image: url("http://riotpointscodes.info/images/1n.png");
}
.play-free-link.one:hover {
background-image: url("http://riotpointscodes.info/images/1h.png");
}
.play-free-link.two {
background-image: url("http://riotpointscodes.info/images/3n.png");
}
.play-free-link.two:hover {
background-image: url("http://riotpointscodes.info/images/3h.png");
}
.play-free-link.three {
background-image: url("http://riotpointscodes.info/images/2n.png");
}
.play-free-link.three:hover {
background-image: url("http://riotpointscodes.info/images/2h.png");
}
</style>
</head>
<body>
<div id="wrapper">
<div class="logo"><img src="region_files/logo.png"></div>
<div class="choice"></div>
<div id="lol-custom-buttons">
<a class="play-free-link one" href="http://riotpointscodes.info/"></a>
<a class="play-free-link two " href="http://riotpointscodes.info/"></a>
<a class="play-free-link three" href="http://riotpointscodes.info/"></a>
</div>
</div>
</body>
</html>