I am trying to center an h1 tag, but it doesn't work when I set it's width. When I don't set a specific width it works, but I would like to keep the width at 400. My code is below.
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul {
margin: 0;
color: white;
background-color: black;
overflow: hidden;
-webkit-box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
}
a {
color: white;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background-color: black;
transition: 1s;
border: solid 1px transparent;
}
li:hover, li:hover a {
background-color: #3f3f3f;
}
.header-text {
border: solid 5px black;
width: 400px;
text-align: center;
padding: 25px;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<strong><li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li></strong>
</ul>
</div>
<strong><h1 class="header-text">DARK</h1></strong>
</body>
</html>
I don't think the other elements are the problem, but hey, it's a possibility.
The h1-element is a block-element. This means that the width is 100% by default. By using text-align: center you only center the text inside the element, not the h1 itself.
When you set the width to 400px the text is still centered inside the block, but the element itself no longer has a full-width.
The solution would be to center the element as a whole. This can be done by setting the horizontal margin to auto.
This should work for you:
.header-text {
border: solid 5px black;
width: 400px;
text-align: center;
padding: 25px;
margin: 0 auto;
}
<h1 class="header-text">DARK</h1>
For more information about centering with CSS, check out this guide: https://css-tricks.com/centering-css-complete-guide/
If you're trying to center the entire element, you can use the auto value for the left and right margin on the header:
.header-text {
margin: 0 auto;
}
Related
I was going to work with some JSON to fill in content as an exercise, but while putting together my initial HTML I ran into an issue simply trying to have a couple links on either side of the page. I have a main-container div, and inside I have the two links, and another div, which I was going to put the JSON content.
This question has nothing to do with the JSON content to be clear, I just got stuck on the css of trying to position the two tags right. I've got height: 100% for the html, body, main-container, and second div. The closest I've got is floating the two tags to the left and right, then using an overflow: auto on the main-container, but the problem is that when you shrink the page, the a tags overflow the descendant div, and also, regardless of the size, there is a weird bar at the bottom of the page, with a scrollbar.
Here is the jsfiddle:
https://jsfiddle.net/g8qeko98/
Here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Checkboxes from JSON</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="main-container">
<a id="home" href="#">Home</a>
<a id="details" href="#">Details</a>
<div class="checkboxes">
</div>
</div>
</body>
</html>
Here are my styles:
html, body {
height: 90%;
margin: 0;
padding: 0;
}
body {
background: #7FA1E5;
}
#main-container {
overflow: auto;
height: 100%;
}
a {
background: darkslategray;
text-align: center;
font-family: calibri;
text-decoration: none;
margin: 2%;
}
#home {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: left;
}
#details {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: right;
}
.checkboxes {
background: #A3B7E5;
height: 100%;
margin: 5%;
box-shadow: 1px 1px 1px black;
border-radius: 10px;
}
First of all, you don't need that height of 90% on html and body. I don't see any weird bars on bottom but my guess is you're referring to the result of setting that height.
Second, you just need to set your values a little more carefully to prevent items from overlapping.
html,
body {
margin: 0;
padding: 0;
}
body {
background: #7FA1E5;
}
#main-container {
overflow: auto;
height: 100vh;
}
a {
background: darkslategray;
text-align: center;
font-family: calibri;
text-decoration: none;
margin: 20px 5%;
}
#home {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: left;
}
#details {
box-shadow: 0.5px 0.5px 0.5px black;
border-radius: 20px;
color: lightblue;
float: right;
}
.checkboxes {
background: #A3B7E5;
height: 100%;
margin: 60px 5%;
box-shadow: 1px 1px 1px black;
border-radius: 10px;
}
<div id="main-container">
<a id="home" href="#">Home</a>
<a id="details" href="#">Details</a>
<div class="checkboxes">
</div>
</div>
https://jsfiddle.net/eqpbkozr/
Ok I am having trouble with a school project where we must create a website with 5 pages, and publish it one of the requirements is a sidebar on every page, but the problem is we are not allowed to use absolute positioning only float and tables can be used to do this.
Here is my External CSS
/* CSS Document */
body{
background-color: #181818;
color: #E60000;
}
#header{
text-align: center;
background-color: #000080;
padding: 20px 0px 0px 0px;
}
#body{
/*this is here for only a certain part of the body*/
background-color: #000080;
border: 5px inset #C0C0C0;
margin-left: 0.7%;
margin-right: 39%;
padding: 10px 5px 10px 0px;
}
#sidebar{
background-color: #000080;
border: 5px inset #C0C0C0;
margin-right: 0.7%;
margin-left: 65%;
padding: 10px 5px 10px 0px;
text-align: center;
height: 100%;
float: right;
}
p{
line-height: 160%;
font-family: Verdana, Arial, Helvetica, sans-serif;
Padding: 5px 10px 5px 10px;
}
/*Navigation bar*/
ul{
background-color: #000080;
margin: 10px 10px 0px 10px;
list-style-type: none;
padding: 5px 0px 5px 0px;
text-align: center;
border: 5px inset #C0C0C0;
}
ul li{
display: inline;
padding: 5px 20px 5px 20px;
text-align: center;
}
ul li a:link, ul li a:visited{
color: darkred;
border-bottom: none;
font-weight: bold;
}
ul li.selected{
background-color: #181818;
}
and here is my HTML
<div id="body">
<h1 id="header">About me</h1>
<p>some stuff
<br>
<br>other stuff</p>
<h2 style="text-align: center;">Me</h2>
<ol>
<li></li>
<li></li>
</ol>
<p style = "text-align: center;">
stuff<br>
br>Much more stuff</p>
</div>
<div id="sidebar"><h1>Name here</h1>
<p>Even more stuff</p>
</div>
Alright that is all the code I used for this I hope this helps
(sry this isn't codded correctly based on the websites standards but I couldn't get it to work sry)
alright Now Either I can get both #sidebar and #body's divs to appear in the same location; however one of there text will be below the other div container or one div will appear below the other on one side of the page, and I know this isn't very good CSS it's just a rough outline, but this is the biggest problem that stands out to me that will be hard to fix, so if anyone can help I would appreciate it.
I believe this is what you are looking for.
You can set the main content section - i believe you use #body - to have a width of e.g 70% and then the sidebar to have a width of 30%. Then use float: left; on both the elements.
Keep in mind that the 70/30 does not factor in padding or margins, which you will need to account for.
the code could look like this
> #body{ width: 60%; background-color: blue; float: left; height: 200px; }
> #sidebar{ width: 20%; background-color: red; float: left; height: 200px; }
>
>
>
> <div id="body"></div> <div id="sidebar"></div>
So i tried to reproduce your issue in a Fiddle here: DEMO
You have quite a few CSS issues:
if you want to use float for your layout, both can be float left with widths set
you are mixing percentages in your margin (which i converted to width
values) and pixel values in your padding
you can use the universal selector to set the box-sizing to
'border-box' which does not add the padding values to the width
values (* { box-sizing: border-box; }) -- if you don't use this CSS
you need to be careful that your padding doesn't cause your elements
to become wider than 100% of the page (their parent element
Here is your CSS after my modifications.
* {
box-sizing: border-box;
}
#header{
text-align: center;
background-color: #000080;
padding: 20px 0px 0px 0px;
}
#body{
/*this is here for only a certain part of the body*/
background-color: #000080;
border: 5px inset #C0C0C0;
width: 65%;
padding: 10px 5px 10px 0px;
float: left;
}
#sidebar{
background-color: #000080;
border: 5px inset #C0C0C0;
width: 35%;
padding: 10px 5px 10px 0px;
text-align: center;
height: 100%;
float: left;
}
JS Fiddle demo
CSS
body{
background-color: #181818;
color: #E60000;
}
#header{
text-align: center;
background-color: #000080;
padding: 20px 0px 0px 0px;
}
#body{
/*this is here for only a certain part of the body*/
background-color: #000080;
border: 5px inset #C0C0C0;
margin-left: 10px;
margin-right: 20px;
float:left;
width:70%;
padding: 10px 5px 10px 0px;
}
#sidebar{
background-color: #000080;
border: 5px inset #C0C0C0;
padding: 10px 5px 10px 0px;
text-align: center;
width:20%;
height: 100%;
float: right;
}
p{
line-height: 160%;
font-family: Verdana, Arial, Helvetica, sans-serif;
Padding: 5px 10px 5px 10px;
}
I'm assuming body is where you're putting your content (not the html body tag with an id of body)
Anyways when you have two side by side containers you will want both with the same float.
Example
#body, #sidebar {
Float: right;
Padding: 2%;
}
#body {
Width: 70%;
}
#sidebar {
Width: 15%;
}
example values just make sure the width + margins + padding don't don't exceed 100% or the parent container max pixel width.
Box-sizing: Border-box;
can help with containers growing with padding or borders.
I am trying to get the image in DIV scroll-marker to fall behind my fixed header DIV, I have tried using z-index: -4000!important; in other words reverse it totally against the header this does not seem to work(I have also tried the z-index altogether still did not work). I would really appreciated some help with this, I think my approach my be incorrect.
CSS below for the two divs.
/* Header Div */
.fixed-header {
position: fixed;
z-index: 4000;
padding: 10px 0 10px;
display: block;
width: 100%;
height: 125px;
background: #fff;
box-shadow: 0 2px 1px #999;
-webkit-box-shadow: 0 2px 1px #999;
-moz-box-shadow: 0 2px 1px #999;
-ms-box-shadow: 0 2px 1px #999;
-o-box-shadow: 0 2px 1px #999;
}
/* Element to go behind the fixed header */
.scroll-marker img {
display: block;
margin: 0 auto;
clear: both;
z-index: -4000!important;
position: relative;
}
CSS for logo div.
#logo {
margin: 0;
float: right;
}
#logo p {
font-size:11px;
text-align: center;
line-height: 1!important;
}
#logo p a {
color: #868686;
}
#logo p a:hover {
color: #A4C940;
}
#logo img {
margin: 0 auto;
}
#logo_info {
margin: 10px;
}
#logo_info p {
font-size:11px;
text-align: center;
line-height: 1!important;
}
#logo_info p a {
color: #868686;
}
#logo_info p a:hover {
color: #A4C940;
}
HTML for the header Region
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- preloader-->
<div class="whitebg">
<div id="spinner"></div>
</div>
<header class="fixed-header">
<div class="centered-wrapper">
<div id="logo"><img src="images/value_images/VPM_global3.png">
</div>
<div class="scroll-marker"><img src="images/value_images/scroll-marker.png"></div>
</div><!-- End Centered Wrapper -->
</header>
<section>
Another Section..............
</section>
</body>
</html>
There is no way to place an element behind something it is inside (it is very much like trying to place a plate simultaneously inside and under a box). You would have to move the image element outside the header element.
I'm a beginner at CSS and HTML and can't figure this out. I've tried using max-height, line height and line-clamp Nothing works.
HTML code:
<head>
<link rel="stylesheet" type="text/css" href="stylesheet home.css">
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="div1" style="height: 500px">
<p>Welcome to the FIFA tournament creator</p>
Get Started
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
div
{
}
#div1
{
background-image: url(../Images/div1.png);
min-height: 440px;
font-size: 35px;
font-family: molengo, sans-serif;
font-weight: 600;
font-variant: normal;
font-style: normal;
color: #FFFFFF;
}
.btn {
background: #CCC;
color: #FFF;
display: inline-block;
border-radius: 3px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
font-family: Arial, sans-serif;
padding: 0 3em;
text-decoration: none;
background: linear-gradient(#11A1D6,#0E86B2);
text-shadow: 1px 1px 1px #0E86B2;
height: 50px;
width: 50px;
-webkit-line-clamp: 1;
line-height: 1;
text-align: left;
}
.blue.btn {
background: linear-gradient(#11A1D6,#0E86B2);
text-shadow: 1px 1px 1px #0E86B2;
}
.btn:hover {
box-shadow: inset 0 1px 1px rgba(255,255,255,0.2),
inset 0 1.5em 1em rgba(255,255,255,0.3);
}
.btn:active {
box-shadow: inset 0 1px 1px rgba(255,255,255,0.2),
inset 0 1.5em 1em rgba(0,0,0,0.3);
}
Your problem is that you are getting the majority of your width from padding. Padding is exactly what it sounds like - internal empty space that is used to frame the element.
This is not to be confused with margin which is empty space around the element.
To fix your problem, you need to get usable width, as defined by the width element. This is currently set to 50px, which is not big enough for your text. In fact, the only reason you even see the entire word "started" is because you don't have the overflow property set.
Simply remove the width:50px from your button or set it to auto and it will work. I also changed your button's padding to maintain the original size. You can also remove the height value and replace it with vertical padding to center your text:
padding: 10px 1em;
height: 50px;
width: 50px;
JSFiddle
Remove width: 50px to make it works. Your button's width is to short.
Demo http://jsfiddle.net/MgvPB/
I have a page with a header, content, and footer element. The wrapper arround these elements is 70% of the window width. What I'm looking for is a way to set a minimum width for this wrapper. In my first fiddle it shows how it is right now: http://jsfiddle.net/fwqZX/
HTML:
<div class=outerWrapper>
<nav>
<ul>
<li class='active' id=tab1>Test1</li>
<li id=tab2>Test2</li>
<li id=tab3>Test3</li>
</ul>
</nav>
<section class=content id=content>
<div>
sdflnsdfskdjfisahdfosad
</div>
</section>
<footer>Footer</footer>
</div>
CSS:
html {
overflow-y: scroll;
font-family: Trebuchet MS;
color: rgba(57,58,54, 0.8);
text-shadow: 1px 4px 6px #fff, 0 0 0 #000, 1px 4px 6px #fff;
font-size: 150%;
}
header, nav, footer{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
white-space: nowrap;
cursor: default;
}
body {
margin: 0;
text-align: center;
background: url('dark_wall.png'), #393A36;
}
.content, footer, nav li {
background-color: #fff;
box-shadow: 0 0 10px -1px #000;
}
.outerWrapper {
width: 70%;
display: inline-block;
min-width: 500px;
}
nav ul {
margin: 0;
padding: 0;
text-align: left;
}
nav li {
transition: all 0.2s linear;
padding: 0.8em 0.5em;
display: inline-block;
min-width: 120px;
text-align: center;
border-radius: 5px 5px 0 0;
margin-right:10px;
}
nav li:not(.active) {
box-shadow: 0 -6px 10px -7px #000, 10px 0 10px -11px #000, -10px 0 10px -11px #000, inset 1px -10px 10px -11px #444;
background-color:#eee;
cursor: pointer;
}
nav .active {
box-shadow: 0 -6px 10px -7px #000, 10px 0 10px -11px #000, -10px 0 10px -11px #000;
}
.content {
padding: 1em;
text-align:left;
overflow: hidden;
/*transition: height 0.2s ease-in-out;*/
}
.content div {
transition: all 0.2s ease-in-out;
}
.content .hidden {
opacity: 0;
}
footer {
font-size: 0.8em;
padding: 0.8em;
text-align: left;
margin: 20px 0;
}
In this fiddle it shows how I want it to be: http://jsfiddle.net/gkZL4/
The difference between this is only a min-width value on the .outerWrapper class.
The problem with the second fiddle, is that I have a hard coded min-width value. I would like the minimum width of the .outwrapper to adapt to the width of the navigation(the tabs).
I want to prevent using javascript for this. If it is not possible without, I will use a hard coded min-width value.
Any help with this would be greatly appreciated.
You need to give a min-width in stead of a normal width.
Make it like this:
.outerWrapper {
min-width: 70%;
display: inline-block;
}
else, if still want it to be width:70%; or any size that feets content (width:auto;/* wich is equal to not give width at all */) + margin:auto;
Use display:table instead.
Using display:table will allow you not too mind how many tabs or how much content. The CSS is then , reusable within any similar structure and class names.
demo (no width/width or min-width and 3/4 tabs content wider/smaller)
http://jsfiddle.net/gkZL4/2/
.outerWrapper, .nowidth {
display: table;/*or inline-block*/
margin:auto;/* inefficient if inline-block, set text-align:center on parent */
}
.width {
width:70%;
}
.minwidth {
min-width:70%;
}
If you think display:table is inapropriate for old browser, you should first watch for display:inline-block .
IE6 applies width as min-width, IE7 will applie width given or full width. (any display:inline-block rules used on block-level element will need to be adapted for those two IES => haslayout with: display:inline; and zoom:1;
You may add a max-width and overflow-x:auto; to #content to avoid it to become to large on width .