I am trying to align some divs so that there are 6 ontop of eachover, spreading across the whole height of the page, with text centered inside. An example is here:
http://gyazo.com/871760197e572bd35d79ac3be63d9869
Now nothing I have worked so far works, and it just extends the page. I have made a div (to easily change the text in all of these boxes) which surrounds them, and has a value of height: 100vh;. For some reason, there appear to be gaps in between the divs. I have stripped all the code down to have just the portfolio div, but it still has a gap above it.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
padding: 0;
top: 0;
}
a {
padding: 0;
margin: 0;
text-decoration: none;
color: black;
}
.navigation-bar {
float: left;
width: 350px;
font-size: 40px;
height: 100vh;
text-align: center;
}
.portfolio {
background-color: #909090;
height: 16%;
line-height: 16%;
}
.twitter {
background-color: #a0a0a0;
height: 16%;
}
.git-hub {
background-color: #909090;
height: 16%;
}
.email {
background-color: #a0a0a0;
height: 16%;
}
.linkedin {
background-color: #909090;
height: 16%;
}
.about-me {
background-color: #a0a0a0;
height: 16%;
}
</head>
<body>
<div class="navigation-bar">
<a href="#">
<div class="portfolio">
<h3>Portfolio</h3>
</div>
</a>
<a href="#">
<div class="twitter">
<h3>Twitter</h3>
</div>
</a>
<a href="#">
<div class="git-hub">
<h3>Github</h3>
</div>
</a>
<a href="#">
<div class="email">
<h3>Email</h3>
</div>
</a>
<a href="#">
<div class="linkedin">
<h3>LinkedIn</h3>
</div>
</a>
<a href="#">
<div class="about-me">
<h3>About Me</h3>
</div>
</a>
</div>
</body>
</html>
Thanks for any help, and I don't have a high enough reputation to post images so I would appreciate if someone could edit it!
Edit: Here is a fiddle: https://jsfiddle.net/TobiasYeomans/8ysLounf/
You need to remove the built-in margin from the heading.
JSfiddle demo
h3 {
margin: 0;
}
It's because of the h3 - browsers give it a default margin. So adding h3 {margin:0;} should do what you want.
*or .navigation-bar h3 {margin:0} if you don't want to mess up the rest of your layout.
Related
I am having trouble evenly spacing my divs for Projects, Videos, Portfolios and Contact using margins. I wanted it to start even spacing from the right of the screen. But I didn't use pixel values for spacing because I wanted to avoid hardcoded numbers as much as possible. I also realize that the way I have designed the nav-bar isn't the most efficient.
body {
background-color: black;
margin: 0px;
font-family: "Caveat", cursive;
font-family: "Ubuntu", sans-serif;
}
.title-bar {
height: 14%;
width: 100%;
position: relative;
color: white;
font-size: 30px;
}
.title-icon {
position: absolute;
margin-left: 5%;
}
.title-links {
position: relative;
right: 0px;
top: 0px;
margin-right: 5%;
}
.title-1 {
position: absolute;
right: 0px;
margin-right: 45%;
}
.title-2 {
position: absolute;
right: 0px;
margin-right: 30%;
}
.title-3 {
position: absolute;
right: 0px;
margin-right: 15%;
}
.title-4 {
position: absolute;
right: 0px;
margin-right: 0;
}
.title-link {
color: white;
text-decoration: none;
}
.title-link:hover {
color: rgb(0, 63, 145);
text-decoration: none;
}
<div class="title-bar">
<div class="title-icon">
<h3>Rupak Y</h3>
</div>
<div class="title-links">
<div class="title-1">
<a class="title-link" href="#">
<h3>Projects</h3>
</a>
</div>
<div class="title-2">
<a class="title-link" href="#">
<h3>Videos</h3>
</a>
</div>
<div class="title-3">
<a class="title-link" href="#">
<h3>Portfolio</h3>
</a>
</div>
<div class="title-4">
<a class="title-link" href="#">
<h3>Contact</h3>
</a>
</div>
</div>
Don't ever use position: absolute for situations like this. This can be done a lot easier and with less CSS:
Use display: flex both on the container and the links div, add margin-left: auto to the links div to align it right and add some margins to the single links to create a distance between them (I used 3vw margin-left, a unit relative to the viewport width). Also, apply display: block to the a tags to make them behave as blocks, and use left and right padding on the container to create the offset of the texts at the left and right side.
body {
background-color: black;
margin: 0px;
font-family: "Caveat", cursive;
font-family: "Ubuntu", sans-serif;
}
.title-bar {
display: flex;
height: 14%;
color: white;
font-size: 18px;
padding: 0 3%;
}
.title-links {
margin-left: auto;
display: flex;
}
.title-link {
display: block;
margin-left: 3vw;
color: white;
text-decoration: none;
}
.title-link:hover {
color: rgb(0, 63, 145);
text-decoration: none;
}
<div class="title-bar">
<div class="title-icon">
<h3>Rupak Y</h3>
</div>
<div class="title-links">
<div class="title-1">
<a class="title-link" href="#">
<h3>Projects</h3>
</a>
</div>
<div class="title-2">
<a class="title-link" href="#">
<h3>Videos</h3>
</a>
</div>
<div class="title-3">
<a class="title-link" href="#">
<h3>Portfolio</h3>
</a>
</div>
<div class="title-4">
<a class="title-link" href="#">
<h3>Contact</h3>
</a>
</div>
</div>
Here is a solution using the table tag I adapted from the zer00ne's answer from the this question.
html,
body {
background-color: black;
margin: 0px;
font-family: "Caveat", cursive;
font-family: "Ubuntu", sans-serif;
}
table {
width: 100%;
table-layout: fixed;
}
th {
width: 20%
}
<html>
<head>
<title>Rupak Yeware - Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="CSS/styles.css" />
</head>
<body>
<table class='table table-striped jambo_table'>
<th class='column-title' style="color:white">Rupak Y</th>
<th class='column-title' style="color:white">Projects</th>
<th class='column-title' style="color:white">Videos</th>
<th class='column-title' style="color:white">Portfolio</th>
<th class='column-title no-link last' style="color:white"><span class='nobr'>Contact</span></th>
</table>
</body>
</html>
Using a column for each of your headers and then evenly spacing them by 20% will allow you keep them all evenly spaced. If you ever add more headers, obviously you need to adjust the percentage they are spaced by.
Here is more information about the table tag:
https://www.w3schools.com/tags/tag_table.asp
I'm making a discord server website for people to find discord servers to join and make friends but, I dont know why my web page has a horizontal scroll bar.
It also has a vertical scroll bar and it shouldn't have that yet
here is my HTML and CSS
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>OnTop Servers</title>
</head>
<body>
<nav class="topnav">
<div class="topnav-right">
<a class="active" href="index.html">Home</a>
Search
Servers
</div>
<h2 class="title">
OnTop Servers
</h2>
</nav>
<center>
<div class="welcome">
<div class="centered-text">
<div class="welcome-body-inner">
<h2 class="head">
DISCOVER
<span class="discord-logo">DISCORD</span>
SERVERS
</h2>
<h3 class="body">
Find amazing servers to interact with and make friends
</h3>
</div>
</div>
</div>
</center>
<footer>
<div class="container">
<div class="column">
<ul class="footer-links">
<li>
<a class="link-text" href="index.html" title="Home">
Home </a>
</li>
<li>
<a class="link-text" href="search.html" title="Search">
Search </a>
</li>
<li>
<a class="link-text" href="servers.html" title="Servers">
Servers </a>
</li>
<li>
<a class="link-text" href="https://discord.gg/" target="_blank">
Official Discord Server </a>
</li>
<li>
<a class="link-text" href="termsofservice.html" target="_blank">
Terms Of Service </a>
</li>
<li>
<a class="link-text" href="guidelines.html" target="_blank">
Guidelines </a>
</li>
</ul>
</div>
</div>
<div class="copyright">
<p class="copyright-text">© Copyright 2020 OnTop Servers</p>
</div>
</footer>
</body>
</html>
CSS:
.row::after {
clear: both;
display: table;
}
.copyright {
position: absolute;
bottom: 1%;
right: 1%;
font-size: 15px;
}
.copyright-text {
color: white;
}
.footer-links {
position: absolute;
bottom: 5%;
}
.link-text {
color: white;
text-decoration: none;
}
.container {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
footer {
position: absolute;
bottom: 0%;
clear: both;
height: 200px;
width: 1920px;
color: #fff;
background: #2c2c2c;
}
.welcome {
margin-top: -2.5rem;
width: 100%;
height: 35.5rem;
line-height: 1.8em;
margin-bottom: .4em;
padding: 0;
font-family: Helvetica;
font-weight: 600;
font-size: 1.5em;
color: #ffff;
text-transform: uppercase;
}
.centered-text {
position: relative;
left: 24.5%;
display: flex;
align-items: center;
padding: 0 1.5rem;
}
.discord-logo {
border: 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
display: inline-block;
padding: .6em 0;
background: url(images/Discord-Wordmark-White.png) center no-repeat;
background-size: contain;
font-size: 1em;
}
.head {
margin-bottom: .4em;
padding: 0;
line-height: 1.4;
font-weight: 600;
font-size: 2em;
}
.body {
margin: 0 auto 1em;
text-transform: inherit;
opacity: 85%;
}
how do I fix this this problem it is really bugging me and I cant work out what the problem is?
It's this combination
position: relative;
left: 24.5%;
display: flex;
You've got a block level box, that's margin area is therefore as wide as its container, then it's shifted 24.5% of the width of its container to the right, making its right edge 124.5% from the container's left edge. That's always going to overflow the container horizontally.
I suggest using margin-left instead of left.
On my contact gif I have used the social media symbols as a link to my social media sites, however, the Twitter and the GitHub link is not working and I cannot figure out why. The Facebook and the CodePen link does work. Also is there a better way correctly line and organize the Here is the links so that they can stay more consistent? site if you want to take a look for yourself misaelalopez.com. Thank you for your help!
#contact
{
background-image: url(https://lh3.googleusercontent.com/-2wI0PCtgivjkGQruaV-_2JYgbuD-yNFkRLN_DGAPXHxFq5gac-lnc5IheHflI6V_Z9AtgJjyfF-LBGa4tt_W6XB2Xs26xEyAH46S7kJlgiyHeIbi-ZM62zJuHcjJuZNnhO9lMGt6jw);
height: 250px;
padding: 300px;
margin: 0 auto;
background-size: cover;
}
#contact h1
{
color: white;
position: relative;
text-align: center;
}
#contact h2
{
color: white;
position: relative;
text-align: center;
}
.facebook
{
position: relative;
float: left;
}
.twitter
{
position: relative;
left: 50px;
float: left;
}
.instagram
{
position: relative;
left: 100px;
float: left;
}
.gitHub
{
position: relative;
left: 150px;
float: left;
}
.codePen
{
position: relative;
left: 200px;
}
<div id="contact">
<div class="Content">
<div class="facebook">
<a target="_blank" href="https://facebook.com/misael.a.lopez"><img src="http://www.freeiconspng.com/uploads/facebook-transparent-12.png"></a>
</div>
<div class="twitter">
<a target="_blank" href="https://twitter.com/cables25"><img src="https://s3.amazonaws.com/piktochartv2-dev/v2/uploads/a8f46883-78d7-4dfc-b0b3-be090e70e2b3/27c835d6dd2cbb4b696abd3e7ac9c0370bbedefe_original.png"></a>
</div>
<div class="instagram">
<a target= "_blank" href= "https://www.instagram.com/misael2590/?hl=en"><img src= "http://bbcpersian7.com/images/instagram-clipart-png-transparent-background-3.jpg" alt="Instagram"></a>
</div>
<div class="gitHub">
<a target= "_blank" href="https://github.com/Misael2590"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-256.png" alt="GitHub"></a>
</div>
<div class="codePen">
<a target= "_blank" href="https://codepen.io/misael25900/"><img src= "http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" alt="CodePen"></a>
</div>
<br>
<h1>Reach out to me!</h1>
<h2>Email me at Misael25900#gmail.com</h2>
</div>
</div>
Try this..
#contact
{
background-image: url(https://lh3.googleusercontent.com/-2wI0PCtgivjkGQruaV-_2JYgbuD-yNFkRLN_DGAPXHxFq5gac-lnc5IheHflI6V_Z9AtgJjyfF-LBGa4tt_W6XB2Xs26xEyAH46S7kJlgiyHeIbi-ZM62zJuHcjJuZNnhO9lMGt6jw);
height: 250px;
padding: 300px;
margin: 0 auto;
background-size: cover;
}
#contact h1
{
color: white;
position: relative;
text-align: center;
}
#contact h2
{
color: white;
position: relative;
text-align: center;
}
.facebook
{
position: relative;
float: left;
}
.twitter
{
position: relative;
left: 50px;
float: left;
}
.instagram
{
position: relative;
left: 100px;
float: left;
}
.gitHub
{
position: relative;
left: 150px;
float: left;
}
.codePen
{
position: relative;
left: 200px;
float: left;
}
<div id="contact">
<div class="Content">
<div class="facebook">
<a target="_blank" href="https://facebook.com/misael.a.lopez"><img src="http://www.freeiconspng.com/uploads/facebook-transparent-12.png" width="20px" height="20px"></a>
</div>
<div class="twitter">
<a target="_blank" href="https://twitter.com/cables25"><img src="https://s3.amazonaws.com/piktochartv2-dev/v2/uploads/a8f46883-78d7-4dfc-b0b3-be090e70e2b3/27c835d6dd2cbb4b696abd3e7ac9c0370bbedefe_original.png" width="20px" height="20px"></a>
</div>
<div class="instagram">
<a target= "_blank" href= "https://www.instagram.com/misael2590/?hl=en"><img src= "http://bbcpersian7.com/images/instagram-clipart-png-transparent-background-3.jpg" alt="Instagram" width="20px" height="20px"></a>
</div>
<div class="gitHub">
<a target= "_blank" href="https://github.com/Misael2590"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-256.png" alt="GitHub" width="20px" height="20px"></a>
</div>
<div class="codePen">
<a target= "_blank" href="https://codepen.io/misael25900/"><img src= "http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" alt="CodePen" width="20px" height="20px"></a>
</div>
<br>
<h1>Reach out to me!</h1>
<h2>Email me at Misael25900#gmail.com</h2>
</div>
</div>
The links ' don't work ' because you arrange the divs in a wrong way. They overlap each other. So the codepen div is overlapping the twitter,instagram,github links. Because it's positioned on top of them > you set left:200px which moves the codepen div 200px from left but because it doesn't have floaT:left like the others, it has by default width:100% , where 100% is the width of the entire #contact .content
If you set float:left to the divs, this is not the way to arrange them. You need to set them a width. Having 5 divs, that's 100%/5 = 20% . And because you want some margins between them ( spaces ) , you can use calc() as shown below.
Also that padding:300px on #contact is a very bad idea. I don't know what you were trying to achieve with that. Anyway, i changed that also
( Changed a bit your html also because using float gets the elements out of their default float in the document )
All CSS styles are at the top of the code, in HTML i added a .footer-content div wrapping around the footer text
#contact .Content {
float:left;
width:100%;
}
#contact .Content > div {
float: left;
width: calc(20% - 15px);
margin: 0 7.5px;
}
.footer-content {
float: left;
width: 100%;
}
img {
max-width: 100%
}
#contact {
background-image: url(https://lh3.googleusercontent.com/-2wI0PCtgivjkGQruaV-_2JYgbuD-yNFkRLN_DGAPXHxFq5gac-lnc5IheHflI6V_Z9AtgJjyfF-LBGa4tt_W6XB2Xs26xEyAH46S7kJlgiyHeIbi-ZM62zJuHcjJuZNnhO9lMGt6jw);
height: 250px;
padding:300px 30px;
width:100%;
margin: 0 auto;
background-size: cover;
}
#contact h1 {
color: white;
position: relative;
text-align: center;
}
#contact h2 {
color: white;
position: relative;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="contact">
<div class="Content">
<div class="facebook">
<a target="_blank" href="https://facebook.com/misael.a.lopez"><img src="http://www.freeiconspng.com/uploads/facebook-transparent-12.png"></a>
</div>
<div class="twitter">
<a target="_blank" href="https://twitter.com/cables25"><img src="https://s3.amazonaws.com/piktochartv2-dev/v2/uploads/a8f46883-78d7-4dfc-b0b3-be090e70e2b3/27c835d6dd2cbb4b696abd3e7ac9c0370bbedefe_original.png"></a>
</div>
<div class="instagram">
<a target="_blank" href="https://www.instagram.com/misael2590/?hl=en"><img src="http://bbcpersian7.com/images/instagram-clipart-png-transparent-background-3.jpg" alt="Instagram"></a>
</div>
<div class="gitHub">
<a target="_blank" href="https://github.com/Misael2590"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-256.png" alt="GitHub"></a>
</div>
<div class="codePen">
<a target="_blank" href="https://codepen.io/misael25900/"><img src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" alt="CodePen"></a>
</div>
</div>
<div class="footer-content">
<h1>Reach out to me!</h1>
<h2>Email me at Misael25900#gmail.com</h2>
</div>
</div>
I'm really not sure that my title is correct english. Hehe. But fortunately I can explain my problem in pictures ;-)
My problem is this:
body {
font: calibri;
background-color: #2d2e29;
margin-left: 150px;
margin-right: 150px;
margin-bottom: 0px;
margin-top: 0px;
}
p {
margin: 0px;
}
nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #FFFFFF;
opacity: 0.75;
top: 0;
left: 0;
margin-left: 150px;
margin-right: 150px;
}
nav ul {
float: right;
list-style-type: none;
padding: 0;
margin-top: 30px;
margin-right: 30%;
}
nav li {
display: inline;
}
nav a {
margin: 5px;
color: black;
}
nav a:hover {
color: #99cccc;
}
#Forside {
background-color: #3f5c93;
height: 800px;
}
#Mig {
background-color: #ccc2a6;
height: 800px;
}
#Faerdigheder {
background-color: #3f5c93;
height: 800px;
}
#Projekter {
background-color: #ccc2a6;
height: 800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Kontakt {
background-color: #3f5c93;
height: 800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#logo {
height: 100%;
width: 200px;
background: url("Logo.png");
margin-top: 10px;
margin-left: 50px;
background-repeat: no-repeat;
position: absolute;
background-size: 200px;
}
<div id="all">
<nav>
<!-- navigations-element (menu) -->
<div id="logo"></div>
<ul>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Forside">
Forside
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Mig">
Mig
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Faerdigheder">
Færdigheder
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Projekter">
Projekter
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Kontakt">
Kontakt
</a>
</li>
</ul>
</nav>
<div id="Forside">
<br>
<br>
<br>
<br>
<br>Forside
</div>
<div id="Mig">
<br>
<br>
<br>
<br>
<br>
<div class="meleft">
<h1>Mig</h1>
<p class="textleft">Lots of words
</p>
</div>
<div class="meright">
<img src="sdp.png" alt="sdp" id="sdp1" />
</div>
</div>
<div id="Faerdigheder">
<br>
<br>
<br>
<br>
<br>
<div class="skillsleft">
<img src="Collage1.png" alt="Collage" id="Collage" />
</div>
<div class="skillsright">
<h1>Færdigheder</h1>
<p class="textright">Lots of words
</p>
</div>
</div>
</div>
I added my code to fiddle, so you can see the problem:
http://jsfiddle.net/9Lj6ck3L/
I hope you can understand the code even though some words is in Danish :-)
Given the HTML and CSS provided, set the width of the nav to calc(100% - 300px);
Demo Fiddle
Otherwise you are telling it to be the full viewport width, offset from the left by 150px which is why it seems to overspill to the right. Using calc you can say, "fine, stretch to the viewport width, but minus the margins"
Working fiddle - http://jsfiddle.net/9Lj6ck3L/11/
Changed width of your header bar.
nav {
position:fixed;
width:63.5%;
height:80px;
background-color:#FFFFFF;
opacity:0.75;
top:0;
left:0;
margin-left:150px;
margin-right:150px;
}
Hope this helps.
Your problem is position:fixed. This element does not inherit anything from it's parent in terms of width.
Your best bet would be to wrap the nav in another <div> and make that position fixed. Then give the <nav> inside it the width that you want.
Move the <nav> outside of the #all div and put your margins on #all instead of the body.
Then give your <nav> css of box-sizing: content-box or box-sizing: padding-box to solve the width issue.
I have created a design which is below
http://jsfiddle.net/g9TT7/1/
i want to put logo means below top and left side of the page
<a href="index.html" style="margin-top:10px;position:relative!important;width:200px;display:block;" class="img1">
<img src="image/img_2.png" alt="logo" />
</a>
here i want to put business name in the center of the page and logo will be on the left side of the page. I have set position absolute in my logo but not working.
Please help me to do this.
I hope you want something like this:
Demo
Add css float:left in your logo style and remove position absolute from business div.
You can also adjust position from top and left by playing with margin.
HTML:
<div class="b" style="text-align:center;">
<a href="index.html" class="img1">
<img src="image/img_2.png" alt="logo" />
</a>
<div class="business_name" >
Business
</div>
<div class="clear"></div>
</div>
CSS:
.clear
{
clear:both;
}
.img1{
margin-top:20px;
width:200px;
display:block;
float:left;
}
.business_name {
width: 78%;
font-size: 43px;
font-weight: bold;
float: left;
text-align: center;
line-height: 28px;
margin-top: 5px;
}
.b {
font-size: 25px;
font-weight: bold;
width: 78.5%;
text-align: left;
height: 50px;
margin: 0px;
color: rgb(67, 161, 240);
}
.img1 {
float: left;
margin: 2px 0px 0px;
width: 20%;
text-align: left;
border: 0px solid red;
}
Something like this? http://jsfiddle.net/ADDTn/
<div class="header">
<a href="#" class="logo">
<img src="img.jpg" />
</a>
<h1>Bussiness</h1>
<div class="clear"></div>
</div>
css
.header {
width: 100%;
height: 100px;
}
.logo {
display: block;
float: left;
}
h1 {
text-align: center;
}
.clear {
clear: both;
}
Assign the z-index value
<a href="index.html" style="margin-top:10px;position:relative!important;width:200px;display:block; z-index: 1;" class="img1">
<img src="image/img_2.png" alt="logo" />
</a>
see this demo