I cannot figure out how to remove the scrollbar from this website. It is clearly not necessary. I have the page loaded on a 21" monitor and still see it..
http://akrush95.freeoda.com/clash/
Here is the html from my index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body,html{
height:100%;
margin: 0px;
padding: 0px;
}
#title {
padding-top: 20px;
font-size: 36px;
}
#title #RHS {
font-size: 40px;
font-weight: bold;
}
.scoreboard {
text-align: center;
}
.scores {
font-size: 36px;
}
.score-title {
font-size: 18px;
text-decoration: underline;
}
#content {
text-align: center;
min-width: 250px;
}
#eventcontainer {
padding: 10px;
float: right;
background-color: #999;
width: 200px;
min-height: 100%;
}
#eventboard #eventcontainer h1 {
text-align: center;
text-decoration: underline;
}
.sb {
display: inline-block;
width: 135px;
border: thin double #000;
margin: 10px;
}
.sb #title {
font-size: 22px;
text-decoration: underline;
font-weight: bold;
padding-top: 5px;
}
.sb #score {
font-size: 40px;
font-family: "Lucida Console", Monaco, monospace;
padding: 5px;
}
#add {
cursor: pointer;
font-size: 18px;
}
#sub {
cursor: pointer;
font-size: 18px;
}
</style>
</head>
<body>
<div id="eventcontainer">
<h1>Event Board</h1>
<p>25 January 2013<br />
-Event 1<br />
-Event 2
</p>
<p>26 January 2013<br />
-Event 3<br />
-Event 9</p>
<p>31 January 2013<br />
-Event
</p>
</div>
<div id="content">
<div id="title">
<div id="RHS">Roslyn High School</div>
<div id="CotC">Clash of the Classes</div>
<div id="year">2013</div>
</div>
<br/>
<div id="scores">Loading...</div>
</div>
</body>
</html>
Is there anything in there making it extend past 100%? I tried making the height 100% but that doesn't seem to work..
If I don't make the body height 100%, my right column won't extend all the way down.
You have a height of 100%, and a padding of 10px at the top and 10px at the bottom. Padding is added to height, not included in it. So the total height of #eventcontainer is 100%+10px+10px, i.e. 20px more height than its container.
You have three options:
Take the vertical padding off the #eventcontainer element.
Add overflow: hidden to the body element. However this is not recommended because on a smaller screen, the user will not have any way to scroll to see all the content.
As mentioned in the comment below with link, you can change the box sizing model you are using.
Related
So I've been trying to make myself a personal portfolio, however I've run into issues regarding that. Whenever I try to resize my image using the width thing in CSS3, my image does not respond. I've tried resizing it to 25%, 50%, 75%, and nothing works!
Here's my code:
body {
margin: 0px;
background-color: white;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/*Nav Styles*/
.brand {
font-family: 'Titillium Web';font-size: 15px;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
padding: 38px;
}
.left-side {
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform: uppercase;
}
.nav-link-wrapper {
font-family: 'Titillium Web';font-size: 15px;
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color: #8a8a8a;
text-decoration: none;
transition: color 0.5s
}
.nav-link-wrapper:hover {
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
color:black
}
/*About Page Styles*/
.profile-image-wrapper {
text-align: center;
width: 50%;
}
.profile-content-wrapper {
padding: 30px;
text-align: center;
}
.profile-content-wrapper h1 {
color: black;
font-family: 'Titillium Web';font-size: 22px;
}
.profile-content-wrapper p {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
.profile-content-wrapper h4 {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mika's Portfolio</title>
<link href='https://fonts.googleapis.com/css?family=Titillium Web' rel='stylesheet'>
</head>
<body>
<div class = "container">
<div class="nav-wrapper">
<div class = "left-side">
<div class="nav-link-wrapper">
Home
</div>
<div class="nav-link-wrapper">
Projects
</div>
<div class="nav-link-wrapper">
About
</div>
</div>
<div class = "right-side">
<div class="brand">
<div>
MIKA TAN
</div>
</div>
</div>
</div>
<div class="profile-image-wrapper">
<img src="https://cdn.pixabay.com/photo/2020/09/16/20/30/lighthouse-5577451_1280.jpg">
</div>
<div class="profile-content-wrapper">
<h1>
Hey there!
</h1>
<p>
Now you've got a quick look around my website, think about hiring me to make you your own website!
</p>
<p>
Thanks, have a great day.
</p>
<h4>
GMAIL:
</h4>
<p>
mikayxtan#gmail.com
</p>
</div>
</div>
</body>
</html>
My image called mika.png is in a class called profile-image-wrapper, and also does not respond to the text-align: center; thing.
I have tried in-line style coding, which works to an extent (however I prefer to not have to use in-line style so I can create a media query later), and I have used the !important attribute for CSS which only works for text-align and not the width.
To make your image responsive you should give it a max-width: 100% right now it follows the width of the container and it stays inside of it. So add this new piece of code.
.profile-image-wrapper img {
max-width: 100%;
}
now the image fills 50% of the width as you wanted to do. Now if you want your image to be in the middle with 50% width just add margin: 0 auto; to the image wrapper and you should be good to go.
.profile-image-wrapper {
text-align: center;
width: 50%;
margin: 0 auto;
}
if you want the image to be fill width you can remove the width 50% from the wrapper.
with 50% width applied to the wrapper
without the 50% width on the wrapper, it would look something like this.
Note that in both cases the image is responsive duo to the fact you added max-width:100% to the img tag.
That's not what you are looking for? please let me know and show me a screenshot of the desired output.
Try it:
.profile-image-wrapper img{
width:15%
}
Please set margin: 0 auto; for .profile-image-wrapper selector to make center horizontally.
Please set display: inline-block; CSS in .profile-image-wrapper img selector
Updated snippet :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mika's Portfolio</title>
<link href='https://fonts.googleapis.com/css?family=Titillium Web' rel='stylesheet'>
</head>
<style>
body {
margin: 0px;
background-color: white;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/*Nav Styles*/
.brand {
font-family: 'Titillium Web';font-size: 15px;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
padding: 38px;
}
.left-side {
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform: uppercase;
}
.nav-link-wrapper {
font-family: 'Titillium Web';font-size: 15px;
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color: #8a8a8a;
text-decoration: none;
transition: color 0.5s
}
.nav-link-wrapper:hover {
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
color:black
}
/*About Page Styles*/
.profile-image-wrapper {
text-align: center;
width: 50%; margin:0 auto;
}
.profile-image-wrapper img{ width:50%; display: inline-block;}
.profile-content-wrapper {
padding: 30px;
text-align: center;
}
.profile-content-wrapper h1 {
color: black;
font-family: 'Titillium Web';font-size: 22px;
}
.profile-content-wrapper p {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
.profile-content-wrapper h4 {
color: black;
font-family: 'Titillium Web';font-size: 15px;
}
</style>
<body>
<div class = "container">
<div class="nav-wrapper">
<div class = "left-side">
<div class="nav-link-wrapper">
Home
</div>
<div class="nav-link-wrapper">
Projects
</div>
<div class="nav-link-wrapper">
About
</div>
</div>
<div class = "right-side">
<div class="brand">
<div>
MIKA TAN
</div>
</div>
</div>
</div>
<div class="profile-image-wrapper">
<img src="https://i.imgur.com/HPrl3u8.jpg">
</div>
<div class="profile-content-wrapper">
<h1>
Hey there!
</h1>
<p>
Now you've got a quick look around my website, think about hiring me to make you your own website!
</p>
<p>
Thanks, have a great day.
</p>
<h4>
GMAIL:
</h4>
<p>
mikayxtan#gmail.com
</p>
</div>
</body>
</html>
I am trying to add a button to my simple web page. The button itself looks great, but I am not quite sure how to position it. I would like for it to be centered and positioned below the main text. It currently sits off to the left side. Any idea on how to do so?
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spiekermann.css">
<title></title>
<style>
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
}
.button:hover {
background-color: #707488;
}
</style>
</head>
<body>
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
Learn More
</body>
</html>
Any help would be greatly appreciated. Thanks!
You don't necessarily need a container. Try the following:
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
width: 62px;
}
Auto margins don't apply to inline-block elements.
You can add a container to the buttons and align them to center . see example below
also when you are trying to create a style . try to make them reusable as they can be. One advantage of this is you can write lesser css.
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
}
.button:hover {
background-color: #707488;
}
.text-center {
text-align: center;
}
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
<div class="text-center">
Learn More
</div>
Try putting the Button in a <div> and make text-align:center
<div class="btnContainer ">
Learn More
</div>
<style>
.btnContainer {
text-align:center;
}
</style>
Without extra markup adding the following rules to .button will do the trick
left: 50%;
position: absolute;
transform: translate(-50%, 0);
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spiekermann.css">
<title></title>
<style>
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
}
.button:hover {
background-color: #707488;
}
#button {
text-align: center;
}
</style>
</head>
<body>
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
<div class id="button">
Learn More
</div>
</body>
</html>
how do you think this way?
I creating a page and was lost when I noticed that when I increase or decrease the font size of the header, the surrounding space increases in a drastic size. I don't have a padding for the h1 tag, but it looks like it is being added. I tried removing the padding for the nav, but it is only affecting the nav text itself, not the extra space that's bothering me.
Here is the code:
body {
margin: 0;
font-family: Caviar, "Times New Roman", sans-serif;
float: clear;
text-align: center;
}
#main {
width: 100%;
padding: 0;
}
/* start the whole heading section */
h1 {
font-size: 5em;
color: #000000;
font-family: "Alex Brush", "Times New Roman", sans-serif;
padding-left: 2%;
float: left;
}
nav h2 {
font-weight: normal;
}
nav {
float: right;
font-family: Junction, "Times New Roman", sans-serif;
font-size: 1.1em;
/*padding-top: 5.2%;
padding-right: 2%;*/
}
nav a {
color: #000000;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
nav a:visited {
color: #000b26;
}
#header {
background-color: #FF6978;
display: block;
width: 100%;
text-align: left;
position: fixed;
overflow: hidden;
top: 0;
z-index: 999;
box-shadow: 5px 6px 5px #000000;
}
/*end heading section*/
#container {
margin: 0 auto 0 auto;
margin-left: 0 auto;
width: 96%;
margin-top: 13%;
}
.small_head {
font-family: Capsuula, "Times New Roman", sans-serif;
font-size: 2.2em;
border: 3px solid #FFFF61;
padding: .5% 5% .5% 5%;
display: inline-block;
margin: 0 auto;
}
<!doctype html>
<html lang="en">
<head>
<title>Check</title>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="font.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<!--open main div-->
<div id="header">
<h1>Checking Head</h1>
<nav>
<h2>
Navigator
</h2>
</nav>
</div>
<!--close header-->
<div id="container">
<div class="small_head">Small Head</div>
</div>
<!--close container-->
</div>
<!--close main-->
</body>
</html>
Please help!
Note: I have embedded fonts in another css, so please ignore the fonts.
Thank you
This is because the <h1> tag naturally has a margin applied on it scaling with font-size. You want this in your css:
h1 { margin:0 }
The h1 element has margin that is related to the font size via em. If you increase the font size, em is relative to the font size and, thus, margin is increased.
Or you can use max-height: <number of pixels> px instead of h1 { margin:0 } and you will not affect the h1 margins.
I'd like to have the white background cover content of the page but for some reason it only ends at the navigation menu/#main_content_top. How can I fix this?
HTML Look/Image:
http://img687.imageshack.us/img687/8461/croppercapture12.th.jpg
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#Text1
{
width: 77px;
}
#Text2
{
width: 78px;
}
body {
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<div id="header"><h1>
<img alt="" src="images/tempBanner.jpg" style="width: 747px; height: 75px" /></h1></div>
<div id="sub_header">Facility Booking Registration</div>
<div id="main_content_top">Home | Book a Facility | <a href ="FindBooking.htm" >Find/Delete a
booking</a></div>
<div id="main_content">
<div class="content">
<p class="title">Public Service Announcements</p>
<h2>Vesak Day</h2>
<p>Vesak Day, a public holiday, will fall on 1/5/2011, please note the school will
be closed and no bookings will be allowed on this day.</p>
<h2>Labour Day</h2>
<p>Labour Day, a public holiday, will fall on 1/5/2011, please note the school will
be closed and no bookings will be allowed on this day.</p>
</div>
<div class="menu">
<div class="menu_title">Login</div>
<div>Username:
<input id="Text1" type="text" />
<br />
Password:
<input id="Text2" type="text" />
<br />
<br />
<input id="Button1" type="button" value="Sign In" />
</div>
</div>
</div>
<div id="clear"></div>
</div>
</body>
CSS style sheet:
body {
background: #CACACA url(images/background.png) repeat-x;
font-family: "Trebuchet MS", Verdana, serif, Arial
}
#container {
margin: 0 auto;
width: 750px
}
#header {
width: 100%;
height: 33px;
}
#sub_header {
text-align: right;
font-weight: bold;
font-size: 20px;
color: #FFFFFF;
padding-right: 20px;
padding-bottom: 20px;
}
#main_content {
margin: 0 auto;
width: 100%;
background: #FFFFFF url('images/background_content.gif');
background-repeat: repeat-y;
}
#main_content_top {
height: 30px;
background: #FFFFFF url('images/background_top.gif');
}
#main_content_bottom {
height: 30px;
background: #FFFFFF url('images/background_bottom.gif');
}
.content {
float: left;
width: 510px;
text-align: justify;
padding: 0 30px 0 30px;
font-size: 14px
}
.menu {
width: 139px;
float: right;
padding: 0 20px 0 20px;
border-left: #8C8484 1px solid;
font-size: 12px
}
.menu ul {
margin: 0;
padding: 10px 0 10px 15px
}
.menu il {
list-style-type: disc
}
#header h1 {
margin-bottom: 0px;
font-size: 28px;
font-weight: bold;
color: #A40008
}
.content h2 {
margin-top: 0px;
font-size: 20px;
font-weight: bold;
color: #A40008
}
.menu_title {
font-size: 18px;
font-weight: bold
}
#clear {
display: block;
clear: both;
width: 100%;
height:1px;
overflow:hidden;
}
a {
color: #A40008;
font-weight: bold;
text-decoration: none
}
a:hover {
color: #A40008;
font-weight: bold;
text-decoration: underline
}
.title {
margin: 20px;
text-align: center;
font-weight: bold;
font-style: italic;
height: 18px;
}
.highlight
{
font-weight:bold
}
.update
{
font-weight:bold;
color:Green
}
.confirm
{
font-weight:bold;
color:Red
}
table
{
border-style : dashed
}
Try adding overflow:auto to #main_content.
If i understand correctly, you want to set the background of the body white? If that is your requirement, within the body CSS, remove or comment out the background style.
You have to make it overflow hidden or float left and width..........
I need some assistance and I've tried almost everything I know. What I am trying to do (and it doesn't matter if I have to use tables on order to achieve this)
http:// img602.imageshack.us/img602/8769/verticalcentering .jpg
I've looked online and tried out several examples but they all seem to blow up or not align properly in IE.
What I need (if its possible, I don't even know anymore) is to have text links that will align vertically within the container its in regardless of whether there is only one link present, or four.
What's been happening is that when I set the margin to 50% it centers fine if there is only one link there, but the remainder will fall below it no longer centering the links within the container.
The actual thing I am working on is this:
I have a header title above that stretches across the container. The next row I have an image on the left that is 150px by 150px - and next to that I have another container that has a height of 150px as well as this is the maximum height of this container - inside this container is where I would like my links to hang out vertically centered.
Is this even possible? or is it a pipe dream to think it will work in IE and is cross browser compliant?
It doesn't matter anymore if I have to resort to tables and css to achieve this... I just need some assistance with it as I have never had to vertically center anything depending on its content before and I just can't wrap my head around how to achieve this effect.
Any help would be greatly appreciated :) Thanks in advance!
HERE IS THE CSS AND HTML BELOW
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Link Module</title>
<style type="text/css">
<!--
.wrapper { height: 210px; width: 538px; background-color: #FFCCFF; }
.header { height: 47px; border-bottom: thin dotted #666; }
.txt-style {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #666666;
text-decoration: none;
text-align: left;
vertical-align: middle;
white-space: normal;
display: block;
}
.cos-sl-txt-cntr-two {
height: 150px;
}
.cos-sl-txt-cntr-two ul {
height: 150px;
margin-top: auto;
margin-bottom: auto;
}
.cos-sl-txt-cntr-two li {
margin-top: 50%;
margin-bottom: auto;
}
cos-sl-img-two {
width: 150px;
height: 150px;
background-color: #FF0033;
}
.learn-txt, .leader-txt {
color: #FF6666;
font-family: "Arial", Helvetica, sans-serif;
text-transform: uppercase;
font-size: 12px;
margin: 0;
padding-top: 2px;
padding-left: 10px;
letter-spacing: .75px;
}
.leader-txt {
color: #fff;
font-size: 23px;
font-weight: bold;
padding-top: 0px;
line-height: 24px;
letter-spacing: -0.25px;
}
.img-ctnr, .img-ctnr-two {
width: 150px;
height: 150px;
float: left;
padding-left: 12px;
}
/* IMAGE LOCATION */
.img-two {
width: 150px;
height: 150px;
display: block;
background-color: #FF99CC;
border: solid 3px #CCC;
}
.txt-cntr, .txt-cntr-two {
width: 406px;
height: 126px;
float: left;
}
.txt-cntr-two {
width: 250px;
height: 150px;
padding-left: 50px;
background-color:#CC99CC;
}
.txt-pos {
float: left;
width: 100px;
height: 50px;
padding-left: 20px;
}
/* NAME TEXT/TITLE TEXT */
.name-txt, .info-txt, .name-txt-title, .info-txt-link {
font-family: "Arial", Helvetica, sans-serif;
font-size: 13px;
color: #003466;
margin: 0;
padding-top: 18px;
padding-left: 13px;
}
.sl-name-txt-title {
color: #666;
font-size: 10px;
font-weight: bold;
}
/* INFO TEXT/TEXT LINK OVER-RIDE */
.info-txt, .info-txt-link {
padding-top: 0;
color: #333;
font-size: 12px;
line-height: 1.1;
}
.info-txt-link a {
color: #003466;
text-decoration: none;
}
/* Hover State for the web links */
.info-txt-link a:hover {
color: #ED1B24;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<!--CONTAINER HOLDING THE HEADER ELEMENTS-->
<div class="header">
<p class="learn-txt">Title</p>
<p class="leader-txt">Subtitle</p>
</div>
<div class="img-ctnr-two">
<div class="img-two">
</div>
</div>
<div class="txt-pos">
<p class="name-txt-title">Canada</p>
<p class="info-txt-link">www.mylinkhere.com</p>
</div>
</div>
</body>
</html>
.outer {
border: 1px solid red;
line-height: 5em;
}
.outer .inner {
display: inline-block;
vertical-align: middle;
line-height: 1.2em;
}
<div class="outer">
<div class="inner">
ABC
</div>
</div>
<div class="outer">
<div class="inner">
ABC<br>ABC
</div>
</div>
<div class="outer">
<div class="inner">
ABC<br>ABC<br>ABC
</div>
</div>