I am having trouble putting my simple image button webpage into action. I cannot align three buttons in the remaining space at the bottom of my webpage.
.fullwidth {
width: 100%;
height: 80%;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
display: block;
text-align: center;
}
.tierwidth {
width: 33.333333333333%;
height: 20%;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
display: block;
text-align: center;
}
html,
body {
height: 100%;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 20%;
}
.btnContainer {
float: left;
}
<!DOCTYPE HTML>
<HTML>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<title>Excl Home</title>
<link rel="icon" href="favicon.png" type="image/png">
<link rel="shortcut icon" href="favicon.ico" type="img/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- FONTS BELOW -->
<!-- FONTS STOP -->
</head>
<body>
<div class="footer">
<div class="btnContainer">
</div>
<div class="btnContainer">
</div>
<div class="btnContainer">
</div>
</div>
<br class="clearFloat">
</head>
</html>
If all you're doing is making a page with four buttons, you don't really need bootstrap. Since .fullwidth and .tierwidth share a lot of the same CSS properties, I moved those properties into the single rule. The differences get their own rule (i.e. width and height). If you make them float to the left, they will fill up as much space as possible before moving onto the next line. I added some color to make it easy to see what's what.
If you want the .tierwidth buttons to be in a fixed container the HTML will look a little different.
.fullwidth,
.tierwidth {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
display: block;
text-align: center;
float:left;
}
.fullwidth {
width: 100%;
height: 80%;
background-color: red;
}
.tierwidth {
width: 33.333333333333%;
height: 20%;
background-color: blue;
}
html,
body {
height: 100%;
margin: 0;
}
If you're looking to do something like this as part of a larger website and are using bootstrap elsewhere, you should probably look into the grid system, because the less custom CSS you use for layout the easier it will be to style and modify later.
Related
So basically I'm just messing around here using the bootstrap system and there seems to be a small gap on the right side of the screen. There are no box shadows or anything because I saw in one or two other posts that that was causing a similar issue with people.
html,
body,
.container {
height: 100%;
width:
}
.container {
display: table;
min-width: 100%;
overflow: hidden;
min-width: 100%;
margin-top: -50px;
padding: 50px 0 0 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
footer {
background-color: #374754;
height: 75px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
z-index: 1;
}
.row {
height: 100%;
width: 100%;
}
#library {
background: blue;
}
#main {
background: yellow;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 no-float" id="library"> library
</div>
<div class="col-sm-10 no-float" id="main"> main</div>
</div>
</div>
<footer>footer</footer>
</body>
</html>
I've ripped it apart and I can't seem to figure out what's causing it. Any help is appreciated.
Remove the 100% width setting for .row - that's a bootstrap element which has its own, predefined CSS settings which you shouldn't change (except for height, maybe). This include settings for left and right margins and padding which seem strange at first sight, but which are part of the bootstrap system.
Plus you had in invalid line in your first rule for html, body and .container ("width: ..."), so that rule didn't apply at all.
html,
body,
.container {
height: 100%;
}
.container {
display: table;
min-width: 100%;
overflow: hidden;
min-width: 100%;
margin-top: -50px;
padding: 50px 0 0 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
footer {
background-color: #374754;
height: 75px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
z-index: 1;
}
.row {
height: 100%;
}
#library {
background: blue;
}
#main {
background: yellow;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 no-float" id="library"> library
</div>
<div class="col-sm-10 no-float" id="main"> main</div>
</div>
</div>
<footer>footer</footer>
</body>
</html>
One of your CSS scripts adds margin-left: -15px to your row. That generally shifted the divs to the left.
And that same script adds padding-left: 15px; and padding-right: 15px;, so they don't span completely from left to right.
I'm trying to create a 3 column webpage with sticky side bars + sticky header and footer, however I'm having issues as the sidebars goes above my header. What I want to accomplish is the sidebars floating under the header, and the only element moving when scrolling is the middle section.
div.sticky-header {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
.wrapper {
display: flex;
justify-content: space-between;
}
.main, .side-left, .side-right {
border: 3px solid black;
padding: 15px;
background-color: #fff;
}
.main {
width: 90%;
height: 150vh;
}
.side-left, .side-right {
width: 10%;
height: 25vh;
position: sticky;
position: -webkit-sticky;
top: 0;
margin: 0;
}
body {
background-color: #ccc;
font-family: sans-serif;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<title></title>
</head>
<body>
<div class="sticky-header">I will stick to the screen when you reach my scroll position</div>
<div class="wrapper">
<div class="side-left">
left
</div>
<div class="main">
middle stuff
</div>
<div class="side-right">
right
</div>
</div>
</body>
</html>
Fiddle:
https://jsfiddle.net/jbnak12c/
Thanks in advance!
Probably you already found the answer but for those who might also be having a look at this question z-index: 10; in div.sticky-header would do the trick.
So im making a "Meet The Team" page but the text does not want to fit inside the div. I know im doing something wrong so any help would be appreciated
This is the code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no"
name="viewport"><!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Login</title>
</head>
<body>
<header><p id="college">Homepage</p></header>
<div><img class="top-logo" src="images/logo.png"></div>
<div class="laura1"><img class="laura" src="images/laura.jpg"><p>Laura - L2 Coordinator graphic designer and dance enthusiast. </p></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
and this is the CSS
.laura1 {
width: 75%;
height: 150px;
background-color: white;
margin-left: 50px;
margin-top: 30px;
}
.laura {
width: 150px;
height: 150px;
margin: auto;
}
#text1 {
font-size: 12.5px;
padding-left: 140px;
color: black;
}
Oh and this is what it turns out like with the code https://gyazo.com/b152d83601a127eeb3d758e85f26fca6
Here is my try... I have used flexbox to align the text. You can change background colours to get the desired results.
.laura1 {
width: 25%;
padding: 15px;
background-color: white;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
}
.laura {
width: 150px;
height: 150px;
}
#text1 {
width: 50%;
text-align: center;
color: black;
margin-left: auto;
margin-bottom: 0;
}
https://codepen.io/anon/pen/qYPmBW
You should use flex-box positioning on parent class.
Fiddle : https://jsfiddle.net/swordys/ngLg7tmL
What I'm trying to accomplish is on mobile I want my header to have a 3% margin on the left and a 3% margin on the right. I guess you can say what I have done has worked but its creating a side scroll bar.
Here is my code.
\
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic);
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
header {
width: 100%;
height: 64px;
background-color: #ECEFF1;
}
.content {
height: auto;
margin: auto;
width: 1100px;
overflow: hidden;
}
.logo {
float: left;
width: 150px;
height: 40px;
margin-top: 12px;
border-radius: 4px;
background-color: white;
}
.btn {
float: right;
width: 160px;
height: 40px;
margin-top: 12px;
border-radius: 4px;
background-color: #4285f4;
}
#media only screen and (max-width:1110px) {
.header {
width: 100%;
}
.content {
width: 100%;
margin-left: 3%;
margin-right: 3%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="content">
<div class="logo"></div>
<div class="btn"></div>
</div>
</header>
</body>
</html>
I've been dealing with this for quite some time now and can't seem to figure out why the scroll bar is there. I'm sure it's something small and I'm just overlooking it.
Thanks in advance !
Try changing width: 100%; to width: auto; for .content in the media query.
The reason is 100% + 3% + 3% > 100% total width, whereas auto will calculate the available space automatically.
Add the attribute box-sizing:border-box; to your content div and it will fix the problem.
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Link to w3 box sizing explanation: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
I don't want this scroll bar being here. I don't want it hidden but I want it disabled. No scrolling at all.
A screenshot: https://gyazo.com/22224e178263f80c25ecabb65c8ff77f.png
index.html and stylesheet.css:
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Home</title>
</head>
<body>
<div id="white">
</div>
</body>
</html>
CSS:
html {
height: 100%;
background-color: #272C34;
margin: 0%;
padding: 0%;
}
body{
height: 100%;
margin: 0%;
padding: 0%;
}
#white {
width: 100%;
height: 76%;
background-color: #E8E8E7;
margin-top: 10%;
margin-left: 0%;
margin-right: 0%;
margin-bottom: 0%;
z-index: 1;
}
It is Problem of browser set default padding/margin. Apply any of CSS Reset to the website .
If Don't Add any one of them find here http://www.cssreset.com/
or Use this Universal CSS reset
* {
margin: 0;
padding: 0;
}
body usually has a margin set it, remove it and your div should be 100% of the screen:
body{
margin: 0;
}
Also be aware that more tags have margins/paddings applied by default, you could use a reset.css or normalize.css to remove margins/paddings/etc to make your page render the same on all browsers:
if You mean Space in right and left in your Tmp. Add this to your Style
Body{
margin:0;
padding:0;
}
HTML:
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="nav">
<li>
<ul>
Hello
</ul>
</li>
</div>
</body>
</html>
CSS:
body{
margin: 0;
}
#nav{
width: 100%;
height: 80px;
background-color: #000000;
}
#nav ul{
list-style-type: none;
color:#ffffff;
font-weight: bold;
}
Screenshot:
See it Live.
Use: width: 100vw; overflow-X: hidden;
This should work. When there is a scrollbar, use overflow-X:hidden for width or overflow-y:hidden for height;