I've looked everywhere to center text in a window and I believe I found the best solution (I believe... I'm up for other suggestions). However, I get these annoying scroll bars on both sides no matter how large or small the window is.
Can you guys take a look at this code/fiddle and let me know why the scroll bars are there and how to remove them?
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Sigmar+One' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Asset', cursive;
font-size: 100px;
text-shadow: 4px 4px 4px #aaa;
width: 100%;
height: 100%;
}
div {
position:absolute;
height:100%;
width:100%;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align:center;
}
</style>
</head>
<body>
<div>
<h1>HELLO</h1>
</div>
</body>
</html>
http://jsfiddle.net/rYe7V/
Fiddle: http://jsfiddle.net/rYe7V/1/
Just add to body:
margin: 0;
you can remove the scrollbars like this. http://jsfiddle.net/rYe7V/2/
body
{
overflow: hidden;
}
Related
#header {
margin: *<--This one*
position: fixed;
width:100%;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
overflow: auto;
margin:0 auto;
display: block;
}
I am building a website in which I encountered that the <h1> element goes behind the fixed navbar. I tried to find the optimal solution for this.
I figured out that many people made an extra <div1> container which had the same height as that of the navbar and then used another <div2> element to write whatever they have to show to the user.
I had a problem with this solution actually my navbar is a responsive one. So I have to make the <div1> element responsive too, using #media.
Then experimenting with margin I found that leaving the margin blank gives me the optimal one. It doesn't requires me to add the <div1> container.
I found this helpful. Since I am newbie in Programming, I don't know if these type of shortcuts are not good to be used.
P.S. I used "Brackets" editor and the live preview was shown in Google Chrome.
edit: the #header is the container for the navbar and is fixed. position:fixed.
It causes everything until the next ; to be treated as invalid and dropped.
It is not a shortcut, it is a longer way to achieve the same effect as not typing margin: position: fixed; at all.
CSS was designed to be very forgiving of errors. There are multiple reasons for this.
Imagine you're using a background-gradient which older browsers might not understand. Your whole CSS code would break.
That's why CSS just continues with the next statement that it can find. For example:
.foo {
color: white;
background: black;
background: linear-gradient(red, yellow);
}
CSS reads the file top to bottom, so first the black background shall be applied and after that the gradient background will be applied. Which will lead to a red/yellowish background in modern browsers.
Without CSS error handling our whole CSS would die in old browsers.
In your case however, CSS reads the following statement:
#header {
margin: position: fixed;
}
Which is an syntax error and neither of those will be applied. CSS will just continue with your width: 100% statement.
When you use a fixed header, you should give margin-top to the next element that is equal to the height of the fixed header, so that it starts after the fixed element. But this will work only if your header is of fixed height. In case your header is not of a fixed height and changes with viewport then add a resize function on body that calculates the height of header on each resize and gives the same value as marginTop to the next element after the fixed element.
body{
margin: 0;
}
#header {
top : 0;
position: fixed;
width:100%;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
overflow: auto;
height: 65px;
}
#nav-bar a{
display: block;
padding: 9px 16px;
text-align: center;
float: left;
color:azure;
text-decoration:none;
}
#nav-bar a:hover{
background-color: rgba(49, 248, 23, 0.94);
}
.nav-right{
float:right;
font-size: 17px;
text-align: center;
}
#media(max-width:600px){
#nav-bar{
position: relative;
display: flex;
flex-direction: column;
}
.nav-right{
display: flex;
flex-direction: column;
}
}
.logo {
font-family: 'Great Vibes', cursive;
font-size: 30px;
}
#header-img {
height:35px;
width:30px;
}
h2 {
text-align: center;
background: linear-gradient(0deg,red,yellow);
padding: 14px;
}
#form {
display:flex;
justify-content: center;
margin-bottom: 21px;
}
#email {
height: 21px;
width: 250px;
border-radius: 3px;
border-color: #938e8e;
}
section {
position: relative;
top: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Bookworms Site</title>
<link href="style-sheet.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Limelight" rel="stylesheet">
</head>
<body onresize="myFunction()">
<main>
<header id="header">
<div id="nav-bar">
<img src="book.jpg" id="header-img"> The Bookworms Site
<div class="nav-right">
About
Features
Pricing
</div>
</div>
</header>
<div id="abc" style="margin-top: 65px;">
<h2> Hurry!! Offers until Next 20 Hours!!</h2>
<form id="form">
<section>Email:</section>
<input id="email" type="email" placeholder="Enter Your Email">
<button type="submit" url="">Submit</button>
</form>
</div>
</main>
<script>
function myFunction() {
document.getElementById( "abc").style.marginTop = document.getElementById( "header").clientHeight + "px"
}
</script>
</body>
</html>
Sorry, if my problem is a little bit too specific, but I have not found the answer anywhere else. On my website, there is a header that is supposed to take up the whole width of the screen, but it does not. There is always a blank space between the top, and the sides. I have tried display: block; min-width: 100%, just width: 100% and many more variations but I just can't find out how to get rid of it. Anybody have ideas? Thanks!
FULL CODE
/* GLOBAL */
body {
/*background-color: #1abc9c;
display: block;
min-width: 100%;*/
}
#content {} header {
display: block;
min-width: 100%;
height: 100px;
background-color: #34495e;
border-top: 5px solid #1abc9c;
}
<!DOCTYPE html>
<html>
<head>
<title>Example Website</title>
</head>
<body>
<div id="content">
<header>
<img src="REPLACE.png" />
</header>
</div>
</body>
</html>
By default, the browser adds some margin to body element. Thus to fix it, add margin:0; to your body CSS.
body {
margin:0;
}
JSfiddle demo
Alright, so I've tried a lot of different things here but I just can't seem to get my menu bar to stretch all the way across the page. There's a small gap on the left side. Am I just missing something here?
Also so far this is the only way I've been able to get my footer somewhat centered at the bottom of the page. Every time I set the left and right margins to auto it puts the footer in line with the menu bar. Is there a better way to do this as well?
Thank You.
<!DOCTYPE html>
<html>
<head>
<title>Connor Lepert: Homepage</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<link rel="icon" href="logo.png">
<style>
#font-face {
font-family: Vanadine;
src: url(vanadine.ttf);
}
body {
background-image: url(bckgrnd.jpg);
background-size: 100%;
background-repeat: no-repeat;
font-family: sans-serif;
color: white;
}
a {
color: white;
font-family: Vanadine;
text-decoration: none;
}
a:hover {
color: yellow;
}
p {
color: white;
font-family: Vanadine;
}
footer {
position: fixed;
display: block;
margin-left: 45%;
margin-right: 45%;
text-align: center;
margin-top: 320px;
}
#siteid {
margin-left: auto;
margin-top: auto
}
#menubar {
background-color: #ABADB0;
width: 100%;
height: 20px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
text-align: center;
word-spacing: 20px;
position: fixed;
}
#header {
display: block;
margin-left:auto;
margin-right: auto;
text-align: center;
margin-top: 330px;
}
</style>
</head>
<body>
<div id="siteid"><img src="logowhite.png" width="50px" alt="Personal logo"/></div>
<div id="header"><img src="header.png" width="400" alt="Lepert"/></div>
<div id="menubar">
Home
About
<a href=mailto:clepert13#gmail.com>Contact</a>
Portfolio
ScrapYard
</div>
<footer>©<a href=> 2015 by Connor Lepert </a> <br> <p></p> </footer>
</body>
</html>
You must just add a margin:0 to your body
I create a wrapper class and wrap the code that needs to be centered within it. Here's an example:
.wrapper {
margin: 0 auto;
width: 960px;
}
<html>
<div class="navbar">
<div class="wrapper">
<p>Content goes here</p>
</div><!--wrapper-->
</div><!--navbar-->
</html>
You just need to make sure that you place the wrapper class before the content, but after the background that needs to repeat. That is shown in my example. Otherwise, you'll have everything centered like it needs to be, but your background will cut off because it's being contained in a 960px area.
Like Artefact already said, adding margin:0 to your body will remove the gap beneath your menubar.
Just a little explaining:
This gap is caused by your browser, in fact every browser has some presets for some elements (i.e. the size of a h1 and how links are displayed) and those presets differ from browser to browser.
For this reason most people will use css resets to have a clean starting point for their own css.
There are several resources for resets out there like the one from meyerweb that you can use or you can simply write your own.
Say I have div that is a specified width of 200px. Then I have 3 h1 elements in that div with different amounts of letters / different widths. How do I stretch them horizontally to fill the div?
<div id="Header">
<div class="Logo"><h1>CORROBORREE</h1><br><h1>FROG</h1><br><h1>PROJECT</h1></div>
What I need is the words to be same width---the width of the containing div.
I tried text-align justify on the h1 but that didn't do any good.
.Logo {
margin-left: 100px;
height:auto;
width: 250px;
background-color:#666;
font-family: Impact, Charcoal, sans-serif;
text-align: justify;
}
.Logo h1 {
font-size: 40;
text-align:justify;
display: inline;
}
I don't think there's a pure CSS way to do it as of now (I mean using some straight CSS way, you need to juggle things around), what you can do is use nth-of-type in CSS and give letter-spacing to each.. this way you don't have to declare classes for each h1 and also you'll get stretched text
Demo
<div class="Logo">
<h1>CORROBORREE</h1>
<br />
<h1>FROG</h1>
<br />
<h1>PROJECT</h1>
</div>
html, body { /* Using this or not depends on you,
nothing to do with the example */
width: 100%;
height: 100%;
}
.Logo {
background: #f00;
width: 300px;
}
.Logo h1:nth-of-type(1) {
letter-spacing: 4px;
}
.Logo h1:nth-of-type(2) {
letter-spacing: 70px;
}
.Logo h1:nth-of-type(3) {
letter-spacing: 25px;
}
Why you want to do it, I don't know, cuz this will look super weird
Use letter-spacing
eg: letter-spacing:20px
Check this out:
Demo
CSS:
#Header{
width:200px;
height:200px;
background-color:grey;
overflow:hidden;
}
#h1{
-webkit-transform:scaleX(0.78);
margin:0 0 0 -25px;
}
#h2{
-webkit-transform:scaleX(2.3);
margin:0 0 0 70px;
}
#h3{
-webkit-transform:scaleX(1.3);
margin:0 0 0 25px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="Header">
<div class="Logo"><h1 id='h1'>CORROBORREE</h1><br><h1 id='h2'>FROG</h1><br><h1 id='h3'>PROJECT</h1></div></div>
</body>
</html>
text-align:justify and display:block.
And there can be only the one h1-tag on one page
For whatever reason this image is making the rest of the markup to not align within it's container, despite it is set to display inline-block.:
http://jsfiddle.net/ncQXD/
For you guys should be something simple. For me, I already spent days trying to solve this problem.
By the way, I do not want to use float. I do not fully know how to control their weirdness and do not have time atm to learn it. I'll appreciate if you could please not use them. HOWEVER, I can take a crash course on floats if you lead me to one that covers all their mishaps and such.
For now, I need to stick to a non-float css.
PS. The borders are just for "debugging" and are really not necesary
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css_test2.css" />
</head>
<body>
<div id="header">
<img src="http://img710.imageshack.us/img710/938/imgbz.png" id="logo">
Title goes here
<span id="social_media">Social media links</span>
</div>
</body>
</html>
CSS:
#header {
border: 1px solid red;
width: 800px;
height: 123px;
margin: 0px auto;
padding: 0px;
background-color: rgb(181, 230, 29);
}
#logo {
border: 1px solid red;
display: inline-block;
width: 172px;
height: 123px;
}
#logo_txt {
border: 1px solid black;
display: inline-block;
width: 100px;
height: 123px;
}
#social_media {
border: 1px solid black;
display: inline-block;
width: 300px;
height: 123px;
text-align: right;
}
The quickest way to fix this is to add vertical-align: top to the #logo styles.
Add
vertical-align:text-top;
to your image style, vertical-align:top; would work too but I used text top since its aligning against text
The default vertical alignment is baseline, which would align the bottom of the image with the text in the other divs.
FIDDLE
Hi i if you used display inline-block in any way than define one properties
vertical-align:top;
Because by default properties is vertical-align:middle; so than define verticle-align properties.
and now sam think in img tag Define your img tag properties in your css verticel-align:top
.
float the elements to the left and everything works: http://jsfiddle.net/ncQXD/1/
I added this CSS:
#header > * {
float: left;
}
#header {
overflow: auto;
}