I'm just starting web development, and I'm trying to construct a page-navigation bar with a bunch of 'Div' elements, but I cant seem to get my second button ("AboutButton") to appear on the screen. Here is my HTML body code:
<body>
<div id="navbar" id="top">
<div id="pageselection">
<div id="HomeButton"> HOME </div>
<div id="AboutButton"> <a href="#About> ABOUT </a> </div>
</div>
</div>
</body>
and here is my CSS for the page:
#navbar{
Position: fixed;
Width: 100%;
Height: 10%;
}
#pageselection{
Position: absolute;
Width: 40%;
Height: 100%;
Right: 30%;
}
#HomeButton{
Position: absolute;
Width: 33%;
Height: 100%;
Left: 0%;
text-align: center;
}
#AboutButton{
Position: absolute;
Width: 33%;
Height: 100%;
Left: 33%;
text-align: center;
}
Essentially, I'm trying to build a 'div' that runs across the top of the page, then mark off the central 40% of that 'div' as a space for a second 'div' to sit, which will in turn hold the three links that users can use to navigate the page.
Thanks in advance, hopefully its a stupid error, and I hope my description was clear enough :)
You missed an quote mark in
<a href="#About>
If you are only starting, i recommend you to use some free editors like Atom or Sublime that will alert you about this kind of errors.
Also, it is not allowed to use "id" two times on an element. A better practice would be to use classes where you will be able to stack them like:
<div class="navbar top"></div>
You missed an ending quote " in <a href="#About>. I also recommend another approach on your nav bar. Don't absolute position the links in the nav bar, that's not needed. And also, one element can have one ID, not multiple. I've made some changes and used classes instead of IDs below. Please have a look.
#navbar{
position: fixed;
width: 100%;
height: 10%;
top: 0;
left: 0;
background-color: whitesmoke;
height: 40px;
}
#pageselection{
position: absolute;
width: 40%;
height: 100%;
right: 30%;
background-color: gray;
}
.nav-button{
float:left;
width:33%;
height: 100%;
text-align: center;
line-height:40px;
}
.nav-button a{
display:block;
height: 100%;
}
<div id="navbar" id="top">
<div id="pageselection">
<div class="nav-button">HOME</div>
<div class="nav-button">ABOUT</div>
<div class="nav-button">TEST</div>
</div>
</div>
Related
Beginner in CSS here.
Basically, what I am trying to do is to place check marks or X-es on top of a country map and I am trying to find the best way to do this.(open to learn JS for this)
So far, I have placed my map in a div and centered it, with HTML code <img src="check mark"> after the map image.
I will do this for every check mark i have to add, but is it there any better solution ?
.container {
margin-left: 10%;
width: 75%;
height: 80%;
display: flex;
justify-content: center;
}
.child {
position: relative;
margin: 0 auto;
}
.check {
position: absolute;
top: 300px;
right: 500px;
}
<div class="container">
<div class="child">
<img src="Map_image.png">
</div>
</div>
This is an example of what i want to achieve:
https://imgur.com/a/mu5WpuN
Short answer is create a wrapper div with position: relative and place the map and the Xes inside it. Then make map fit with the wrapper (i.e. 100% width and height or whatever) then make all Xes position: absolute and position them accordingly using top: left: right: bottom: properties
Here's a working sample. Try to run it.
.wrapper {
position: relative;
width: 100%;
}
img.map {
width: 100%;
}
img.marker {
position: absolute;
width: 20px;
}
.marker.x1 {
top: 20px;
left: 50px;
}
.marker.x2 {
top: 50px;
left: 190px;
}
<div class="wrapper">
<img class="map" src="https://www.onlygfx.com/wp-content/uploads/2015/12/world-map-vector.png" alt="map">
<img class="marker x1" src="https://i.pinimg.com/474x/b1/7e/59/b17e59bc32383f7878c9132081f37c60.jpg" alt="x1">
<img class="marker x2" src="https://i.pinimg.com/474x/b1/7e/59/b17e59bc32383f7878c9132081f37c60.jpg" alt="x1">
</div>
Having a kind of silly issue where my HTML image won't link to the page and doesn't show up as clickable. I have a cart and icon of a cart that displays the number of items in the cart. The image is included in the CSS. I tried setting the z-index all the way up but nothing happened. Not sure if I'm missing something obvious. Fairly new to this so any help is appreciated! Below is my Code:
.cart {
background-color: #E55F5F;
background-image: url(images/shoppingcart.png);
background-size: contain;
color: white;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
margin-top: -20px;
border-radius: 50%;
position: fixed;
z-index: 1000;
overflow: hidden;
}
<li>
<div class="cart">
</div>
<div id="quantityCount">0</div>
</li>
The link is an inline element by default and - having no content - occupies only very little space inside its container (if any). To change that make it a block element with the full size of its container:
.cart a {
display: block;
width: 100%;
height: 100%;
}
Your tag doesn't have any value, So that it can be made clickable.
You can use it like below:
<li>
<div class="cart">cart</div>
< id="quantityCount">0</div>
</li>
Otherwise if you want to show the count as clicable
<li>
<div class="cart"><span id="quantityCount">0</span></div>
</li>
Try these codes:
background-image: url(../images/shoppingcart.png);
well make sure the anchor tag inside card have same widht and height
.cart {
background-color: #E55F5F;
background-image: url(images/shoppingcart.png);
background-size: contain;
color: white;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
margin-top: -20px;
border-radius: 50%;
position: fixed;
z-index: 1000;
overflow: hidden;
position: relative;
}
.cart a{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
z-index: 10;
}
make your <a> tag a parent of the <div class="cart"> tag. otherwise, your code works fine for me. perhaps the path to your image is incorrect? i replaced your image path with a hosted image and everything worked fine
It's a fundemental issue. You added a link but with no content (nothing between the tags).
Because of that the link also has nothing that will be shown and therefor uses up no space. Because of that, you cant click it.
The right structuring for that is, to put the div between the tag and the entire div will be a button for the link.
.cart {
background-color: #E55F5F;
background-image: url(images/shoppingcart.png);
background-size: contain;
color: white;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
margin-top: -20px;
border-radius: 50%;
position: fixed;
z-index: 1000;
overflow: hidden;
}
<li>
<a href="/homework_6/cart.html">
<div class="cart">
<id="quantityCount">0</div>
</div>
</a>
</li>
Wrap a link (a href tag) around your icon. Check out this example where I used Font-Awesome's shopping cart icon. see all of code here: https://codepen.io/susanwinters/pen/qBNYdBG
<h1>Shopping Cart Icon</h1>
<p>Go ahead and click the shopping cart icon:
<a href="https://teespring.com/stores/campsitecoders" target="_blank" />
<i class="fa fa-shopping-cart fa-3x"></i><span>5</span>
</a></p>
I'm making a div that I want to say "Banner" with a larger "BANNER" in grey behind it. Kind of like a water-mark. But the positioning is wrong and the browser is rendering the 'water-mark' on top of the banner text.
.banner {
position: absolute;
height: 10%;
width: 100%;
background-color: black;
color: red;
vertical-align: top;
overflow: hidden;
z-index: -1;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.foreground {
width: 100%;
height: 100%;
font-size: 2em;
margin: 0;
padding: 0;
top: 0;
text-align: center;
z-index: 2;
}
.background {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
text-align: center;
vertical-align: center;
color: lightgrey;
font-size: 7em;
z-index: 1;
}
<div class="banner">
<div class="wrapper">
<div style="position:absolute; width:100%">
<p class="foreground">Banner!</p>
</div>
<div style="position:absolute; width:100%">
<p class="background">BANNER!</p>
</div>
</div>
</div>
For reasons I don't want to go into here, banner needs to keep it's position: absolute (Sorry if that's too restrictive)
Otherwise we're free to play around with it. I would like the water mark to be slightly overflowing from the top and bottom of the banner div or at least flush with the top.
But most importantly I need the water-mark behind the foreground divs content.
Thank for any help! I prefer a CSS solution but JS would be appreciated too. PS here's a jsfiddle if you prefer that.
EDIT I fixed the height issue by putting margin-top:-5% which I tried before, but with a percentage WAY too high. Apparently it goes of the height of the page not it's parent. Perhaps because it's position:absolute. Thanks for your help!
If you want it to appear in a different order, change the order of your html. You can then also get rid of the z-indexes. So:
<div class="banner">
<div class="wrapper">
<div style="position:absolute; width:100%">
<p class="background">BANNER!</p>
</div>
<div style="position:absolute; width:100%">
<p class="foreground">Banner!</p>
</div>
</div>
Alternatively / additionally:
If you need it to be a watermark, why not add some opacity of like 0.3 to .background? That does not actually put it behind the text, but makes it appear like a watermark.
Working in this fiddle: https://jsfiddle.net/0srj5hus/1/
I'm trying to create a template webpage that uses the golden ratio for proportion. However, it appears I'm not doing it correctly.
I would like some advice on the proper use of:
div tags for laying out panels on a page
CSS and the position attribute
Any other tags or tips that will help me achieve an attractive page
HTML:
<html>
<head>
<title>Golden Ratio</title>
<link rel="StyleSheet" title="Default" href="gr.css" type="text/css">
</head>
<body>
<div id="header">
</div>
<div>
</div>
<div id="bodyleft">
</div>
<div id="bodyright">
</div>
<div id="footer">
</div>
</body>
</html>
CSS:
body {
background-color: white;
}
#header {
width: 960px;
height: 100px;
background-color: red;
}
#bodyleft {
position: absolute;
top: 100px;
width: 592px;
height: 700px;
background-color: blue;
}
#bodyright {
position: absolute;
top: 110px;
left: 610px;
width: 368px;
height: 700px;
background-color: green;
}
#footer {
position: absolute;
top: 800px;
width: 960px;
height: 100px;
background-color: black;
}
I did some rather extensive golden ratio work in this post Is there a CSS way to position an HTML element vertically following the golden ratio? that may be helpful to you.
here is a link, http://jsfiddle.net/etienne_carre/WYStC/
I like to use the float left to align all my div and put a clear after it to finish the row.
Maybe this can help?
https://github.com/gbutiri/phi-grid
It's an extension that can be used with bootstrap and uses flexbox.
I am developing a webpage and I am having problems with z-index not working as expected. My structure looks like this:
<div class="mainWrapper">
<div class="overlay"></div>
<div class="main">
<div class="content1">
content goes here
</div>
</div>
</div>
In overlay, I have a picture that should be above the main-class, but under the content-class. I've tried simply adding different z-indexes, but it does not seems to work. How can I solve this problem? Does this happen because the overlay-div is outside the other divs?
<style>
.mainWrapper{ position:relative; }
.overlay{ position:absolute; }
.main{ position:absolute; }
.content1{ position:absolute; }
</style>
<div class="mainWrapper">
<div class="main"></div>
<div class="overlay"></div>
<div class="content1">
content goes here
</div>
</div>
With absolute positioning, Items will get layered in the order they added to the page. So here, main will be the bottom layer, then overlay on top of that, then content1 above that.
Hard to tell what is happening without seeing the CSS, but...
In order for z-index to work properly, all of the elements you are working with need to be given an explicit position.
Some info:
http://reference.sitepoint.com/css/z-index
http://reference.sitepoint.com/css/stacking
It works with right css like this:
.overlay {
height: 300px;
width: 200px;
background-color: blue;
position: absolute;
top: 0px;
left: 0px;
z-index: 3;}
.main{
height: 250px;
width: 150px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;}
.content1{
height: 200px;
width: 100px;
background-color: yellow;
position: absolute;
top: 0px;
left: 0px;}
.mainWrapper{
position: absolute;
}
example HERE