Pure CSS solution to scroll bar moving centered content - html

I am attempting to center the content on a website. I do not know JavaScript very well and have attempted implementing some of the solutions into my website, but cannot do so. I know CSS much better and was wondering if their was a simple solution to fixing the scroll bar problem.
Any help would be great.
Edit
I have now been learning Javascript and Jquery and discovered things like $(window).height() is doing this a good way to fix it. Is there times when this would not work?

I think and I believe that you want responsive design. Here's a demo of it.
Full Screen Demo
HTML and CSS Markups
CSS
html,body{
width:100%;
margin:0;
padding:0;
font-family: "Arial";
}
.MainHeader{
background-color:#BFBFBF;
padding: 20px;
overflow: hidden;
}
.MainHeaderTitle{
display: inline-block;
line-height: 64px;
margin:0;
vertical-align: top;
color:#404040;
}
.MainHeaderLogo {
display: inline-block;
height: 64px;
width: 64px;
}
nav{
overflow: hidden;
}
nav ul{
margin:0;
padding: 0;
display: inline-block;
overflow: hidden;
}
nav ul li{
list-style-type:none;
background-color: #404040;
float: left;
width: 140px;
line-height: 40px;
text-align: center;
margin: 2px;
}
nav ul li a{
color: #BFBFBF;
text-decoration: none;
}
section ul li a{
color: #404040;
text-decoration: none;
}
img{
max-width: 100%;
}
.img-container{
text-align: center;
}
main{
width:100%;
padding: 20px;
box-sizing: border-box;
}
footer{
background-color:#404040;
color: #BFBFBF;
overflow: hidden;
padding: 20px;
}
footer a,footer p{
color: #BFBFBF;
margin: 5px;
display: inline-block;
}
.col-3{
width:25%;
float:left;
}

Related

How do i make whole area clickable

Creating a navigation bar. How do i make the whole area around the text not just the text clickable? I put display: block; and it still does not work. Now I'm just writing anything so i could post the question. Thank you!
.containter{
width: 80%;
margin: 0 auto;
}
header{
background: deeppink;
}
header::after{
content:'';
display: table;
clear: both;
}
.logo{
float: left;
padding: 10px 0;
margin-left: 5px;
}
nav{
float: left;
}
nav ul{
margin:5px;
padding:0;
list-style: none;
overflow: hidden;
}
nav li{
float: left;
display: block;
margin-left: 100px;
padding-top: 27px;
}
nav a{
text-decoration: none;
color: white;
text-transform: uppercase;
font-family: times new roman;
text-align: center;
display: block;
}
nav a:hover{
background-color: #C71585;
}
try to change to these two
nav li{
float: left;
display: block;
}
nav a{
text-decoration: none;
color: white;
text-transform: uppercase;
font-family: times new roman;
text-align: center;
display: block;
margin-left: 100px;
padding-top: 27px;
}
For making the area clickable you can use pointer events property of css like
div {
pointer-events: none;
}
div{
pointer-events: auto;
}
div{
pointer-events: all;
}
Can try it out if it works for you none will disable the mouse click where as auto and all will allow the mouse click..!!

How do I stop the display:block; behavior in this nav bar link that has the inline property?

I'm creating a digital portfolio for myself, and I have created a basic navigation bar, with ul/li styling, using css and html. The hover effect I want is almost there, but when you hover over the image, there is a white box behind the link text. From my understanding, that should only happen if the display property is set to block, since inline is the default, and I have property set to inline but it still behaves as if its block. Can you help?
This is my current css code:
ul{
list-style:none;
width:100%;
border-width: 2px 0px 2px 0px;
border-color: rgb(255,255,255);
border-style: solid;
padding: 0px;
line-height: 0px;
font-family: "Raleway";
font-size: 100%;
color: rgb(255,255,255);
letter-spacing: 0.2em;
position: relative;
margin-top: 9%;
left: 0%;
right: 100%;
float:left;
}
li {
display:inline;
}
li a{
font-size: 28px;
color:white;
text-align:center;
text-decoration: none;
}
li a:hover{
background-color: #f2f2f2;
color: #21cca5;
}
.active{
color: #21cca5;
}
#extras{
color:white;
float: left;
width: 20%;
text-align: right;
padding: 0px;
clear: none;
}
#aoiti{
color:white;
float: left;
width: 20%;
text-align: left;
padding: 0px;
clear: none;
}
#aoitii{
color:white;
float: left;
width: 20%;
text-align: center;
padding: 0px;
clear: none;}
#home{
color:white;
float: left;
width: 20%;
text-align: center;
padding: 0px;
clear: none;
}
#gallery{
color:white;
float: left;
width: 20%;
text-align: center;
padding: 0px;
clear: none;
}
And my relevant html code:
<ul id="linkBar">
<li id="home"><p><p>Home</p></div>
<li id="aoiti"><p>AOIT I</p></li>
<li id="aoitii"><p>AOIT II</p></li>
<li id="extras"><p> Extras</p></li>
<li id="gallery"><p>Gallery</p></li>
<p><br></p>
</ul>
You are writing css like this
li a:hover{
background-color: #f2f2f2;
color: #21cca5;
}
Change it to
li a:hover{
color: #21cca5;
}

Cannot center buttons on horizontal nav bar

I've spent an absurd amount of time on google and still cannot figure out how to center the buttons on my nav bar (I'm still new to css).
Here is what I have for the navbar (not included are my various failed attempts).
CSS:
#navigation
{
list-style-type: none;
background: #222222;
overflow: hidden;
width: 1150px;
margin: 0;
padding: 0;
display:inline-block;
margin-left: 0 auto;
margin-right: 0 auto;
}
#navigation li
{
border-right: solid 1px #ca0002;
height: 35px;
display: inline-block;
margin: 0 auto;
}
#navigation li a:link, #navigation li a:visited
{
text-decoration: none;
display: block;
height: 35px;
color: #fff;
line-height: 35px;
padding: 0 20px 0 20px;
border-right: solid 1px #990000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
#navigation li a:hover
{
background: #990000;
color: #fff;
}
#navigation li.first
{
border-left: solid 1px #ca0002;
}
Without any html I took the liberty of creating the html and using your IDs.
Here is a working fiddle:
WORKING FIDDLE
In your navigation div I added
height: auto;
text-align:center;
Some unnecessary CSS was deleted as well.
This will make the navigation tabs center in the div.
Hope this helps!

How do i center my navigation bar?

I have a script here for my navigation bar:
<style type="text/css">
/* Navigation Bar */
#nav_bar {
display:inline-block;
height:50px;
}
#nav_bar ul {
display:inline-block;
list-style-type: none;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#nav_bar li {
display:inline;
height:100%;
padding: 0;
margin: 0;
}
#nav_bar a:hover {
background-color: #000000;
}
#nav_bar a {
display:inline-block;
height: 100%;
color:white;
text-decoration:none;
line-height: 50px;
padding: 0 1em 0 1em;
background-color: #900000;
}
</style>
</font>
I'm having trouble trying to get it displayed in the centre of the page, how can I do it?
I've looked into "display: inline-block;" and "position: relative" and couldn't find a code that worked
the html part of my nav bar is as follows (in regards to your comments) I hope it helps! :)
<div id="nav_bar">
<ul>
<li> Home </li>
<li> Forums </li>
<li> Shipping Info </li>
<li> Contact us </li>
<li> About us </li>
</ul>
</div>
Give it a width and auto margins and make sure its a block level element.
By default a 'div' is a block level element so you can remove this rule.
You must set a width or the menu with expand to the width of its container.
#nav_bar {
display:block;
height:50px;
margin: 0 auto;
width: 567px; /* or whatever you require */
}
Example:
http://jsfiddle.net/29FRa/
#nav_bar {
height:50px;
width:800px;
margin:0 auto;
}
HTML:
<html>
<body>
<div id="#nav_bar"></div>
</body>
</html>
Use text-align: center; on your #nav_bar and be sure it is a block-level element.
http://jsfiddle.net/TKMeU/
A total of six kinds of methods:
1、Margin and width to achieve horizontal center
#nav_bar {
height:50px;
}
#nav_bar ul {
list-style-type: none;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
margin-left: auto;
margin-right: auto;
}
please view the demo.
2、use the inline-block, like this:
#nav_bar {
height:50px;
text-align: center;
}
#nav_bar ul {
list-style-type: none;
display: inline-block;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
text-align: center;
font-size: 0;
letter-spacing: -4px;
word-spacing: -4px;
}
#nav_bar li {
margin: 0 5px;
display: inline-block;
*display: inline;
zoom:1;
letter-spacing: normal;
word-spacing: normal;
font-size: 12px;
}
please view the demo.
3、use the float,like this:
#nav_bar {
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
#nav_bar ul {
list-style-type: none;
width: 565px;
height: 50px;
height: 100%;
padding: 0;
clear: left;
float: left;
position: relative;
left: 50%;/*整个分页向右边移动宽度的50%*/
text-align: center;
}
#nav_bar li {
margin: 0 5px;
display: block;
height: 50px;
float: left;
position: relative;
right: 50%;/*将每个分页项向左边移动宽度的50%*/
}
#nav_bar a:hover {
background-color: #000000;
}
#nav_bar a {
display:block;
height: 100%;
color:white;
text-decoration:none;
line-height: 50px;
padding: 0 1em 0 1em;
background-color: #900000;
}
Please view the demo.
Other methods, you can click here.

Unwanted horizontal scroll bar

I'm having a bit of a problem. For some reason a horizontal scroll bar keeps appearing from my code. I've tried everything but I can't seem to remove it. The following link is a live preview of the code.
http://jsfiddle.net/y5x7V/
HTML
<body>
<section class="contain">
<div id="section-nav" class="section-nav">
<div class="top">
<ul>
<li class="logo">Magna Contra</li>
<li class="active">Blog With Us</li>
<li>Compxta</li>
<li>Laurie</li>
<li>SUBTITLESOFLIFE</li>
</ul>
</div>
</div>
</section>
<div class="bg">
<h1>SUBTITLESOFLIFE</h1>
</div>
<ul class="check">
<li class="bold">Hot Trends</li>
<li class="topic">Daft Punk</li>
<li class="topic">#bbcqt</li>
<li class="topic">Petite Noir - Major</li>
<li class="topic">Alt J Album Teaser</li>
<li class="topic">Materialistic Happine$$</li>
<li class="topic">WOLF</li>
</ul>
<div class="contar">
Lorem Dosi
</div>
</body>
</html>
CSS
ul
{
list-style-type:none;
margin:0;
padding:0;
text-align: center;
}
.check{
list-style-type:none;
margin:0;
padding:0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
display: inline-block;
}
::selection{background:red;color:red;}::-moz-selection{background:red;color:red;}
li
{
display: inline;
padding:15px;
text-align: center;
margin:auto 0;
position: relative;
}
li a{
text-decoration: none;
color:#bbbbbb;
font-family: "proxima-nova",sans-serif;
text-transform: uppercase;
text-align: center;
font-size: 0.78em;
letter-spacing: .2em}
hr{
color:#dfe0db;
border: 0;
background-color: #dfe0db;
height: 1px;
}
.bold{
display: inline;
}
.bold a{
color:#e94378;
}
.topic{
display: inline;
padding:8px;
text-align: center;
margin:auto 0;
position: relative;
}
.topic a{
-webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none}
.topic a:hover{
color:#e94378;text-decoration:none}
}
.logo a{
color:#bbb;
font-size: 0.78em;
text-decoration: none;
text-transform: uppercase;
}
img#hv {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
img#hv:hover {
filter: none;
-webkit-filter: grayscale(0);
}
.image {position: relative; text-align: center;width:100%;height:75%;}
.image span {position: absolute; line-height: 20px; display: block; top: 50%;
margin-top: -10px; width: 100%; color: white;font-family: "proxima-nova";
text-transform: uppercase;
font-size: 1.5em; letter-spacing:;}
#media screen and (max-width:800px) {
.image span {
font-size:0.8em;
}
}
#media screen and (max-width:400px) {
.image span {
font-size:0.7em;
}
}
.bg{
background-color: #e94378;
}
img.ri
{
position: relative;
max-width: 100%;
width:100%;
display: inline-block;
vertical-align: middle;
}
#media screen and (orientation: portrait) {
img.ri { max-width: 100%; }
}
#media screen and (orientation: landscape) {
img.ri { max-height: 100%; }
}
.text{
font-family: "proxima-nova";
font-size: 1em;
letter-spacing: .2em;
text-transform: uppercase;
background-color: #e94378;
padding:20px;
color:yellow;
position: absolute;
left:200px;
bottom:50px;
}
.tex{
font-family: "proxima-nova",sans-serif;
font-size: 2.5em;
letter-spacing: 3px;
text-transform: uppercase;
bottom:160px;
left: 320px;
color:white;
padding: 10px;
}
.image{
vertical-align: middle;
}
.logo a:hover{
color:white;
}
.active a{
color:white;
}
.contain{
display: table;
width: 100%;
text-align: center;
margin: 0 auto;
}
.block {
display: table-row;
height: 1px;
}
.navigation {
display: inline-block;
padding: 10px;
width:100%;
margin: auto;
height: 150px;
}
.top {
background-color: #444;
width:100%;
display: inline-block;
padding: 10px;
text-align: center;
}
.navigation:nth-child(odd) {
background: #222;
}
.push {
height: auto;
}
.contar {
margin: 0 auto;
text-align: center;
width:100%;
height:400px;
background-color: white;
}
img.ft{
float:left;
}
.featured{
background-color: white;
width:69%;
text-align: center;
margin: 0 auto;
display: inline-block;;
}
.block:nth-child(odd) {
background: #fff;
}
.search {
border:0px;
background-color:transparent;
color:white;
display: inline-block;
height:28px;
}
.section-nav a{-webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none;}
.section-nav a.active,.section-nav a:hover{color:#fff;text-decoration:none}
h1{
font: 800 1em "proxima-nova", sans-serif;
font-size:3.125em;
text-align:center;
padding:10px 10px;
margin:20px 20px;
background-color:;
position: relative;
text-decoration:none;
display:inline-block;
letter-spacing: 6px;
color:yellow;}
h1 a{
text-decoration: none;
letter-spacing: 8px;
padding-left: 0.15em;
color:#a8a820;
}
.txt{
font:800 proxima-nova;
}
h2{
font: 800 1em "proxima-nova", sans-serif;
font-size:3.125em;
text-align:center;
padding:10px 10px;
margin:20px 20px;
background-color:;
position: relative;
text-decoration:none;
display:inline-block;
letter-spacing: 6px;
color:yellow;}
h2 a{
text-decoration: none;
letter-spacing: 8px;
padding-left: 0.15em;
color:#a8a820;
}
Don't use overflow-x: hidden - it only papers over the cracks, it doesn't fix the issue. You can fix it by using the box-sizing property on the top div:
.top {
background-color: #444;
width:100%;
display: inline-block;
padding: 10px;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
This takes your padding: 10px into account when applying 100% width.
You can also use a polyfill to check for browser support, using the Modernizr plugin.
add
overflow-x:hidden
to the main wrapper class
This is because you're combining both 100% width and padding. If 100% width evaluates to 100px, for example, adding 5px padding to the left and right on top of that will cause your element to have an overall width of 110px. You can get around this by changing the element's box-sizing.
.bottom, .top {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
JSFiddle demo.
You can set overflow-x in body to hidden
http://jsfiddle.net/y5x7V/1/
body {
line-height: 1;
text-align: center;
overflow-x: hidden;
}
You can fix this correctly rather than hacking in some CSS to hide the scrollbar by fixing the top class in your CSS. Set the padding to 0 (as it's taking the full width of the parent) by adding:
padding:0;
to .top
JSFiddle
You can set the padding's height property to get the original look, this is just a quick fix to demo why it's breaking.
Change
.top {padding:10px;}
to
.top {padding:10px 0; }
Line 261 of css you provided, change from padding: 10px;, to padding: 10px 0;.