Final answers seem to have been editing .row's styles to be margin-right: 0 !important; and editing the body element's styles to be overflow-x: hidden; Thank you to everyone!
In my site, I style the html element with a background-color in order to fill the entire page. However, when doing so, the page width increases and causes it to be scrollable, horizontally. Is there anyway to fix this? The only framework I'm using is Bootstrap, and I've been trying to fix this for about a week.
Edit: Removing the background-color styling gets rid of the issue, but that's not really an option.
Edit Two: Added all HTML in, as well as this screenshot:
HTML
<!DOCTYPE html>
<html>
<head>
<title>League Site</title>
<link rel="stylesheet" type="text/css" href="index.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="outer">
<div class="row">
<div class="col-lg-2"><h1>AnotherLOLSite</h1></div>
<div class="col-lg-10"></div>
</div>
<div id="menu">
<div class="row">
<div class="col-lg-2 menu-item"><h4>Home</h4></div>
<div class="col-lg-2 menu-item"><h4>Item DB</h4></div>
<div class="col-lg-2 menu-item"><h4>About</h4></div>
<div class="col-lg-6"></div>
</div>
</div>
<div id="body" align="center">
<form class="summoner-search" method="POST">
<input type="text" class="summoner-input" placeholder="Enter a summoner name...">
<button type="submit">GO!!!</button>
</form>
</div>
</div>
</body>
</html>
Relevant CSS
html {
background-color: #081f44;
}
#outer {
background-color: #081f44;
}
#menu {
background-color: #000000;
}
.menu-item {
color: gray;
}
.summoner-input {
border-radius: 3px;
width: 30em;
height: 2em;
}
You should be applying the color to body not html. It shouldn't be causing this issue, but still isn't best practice.
EDIT
The problem was in the class 'row' from the bootstrap framework. Just add the below into the stylesheet.
.row{
margin-right:0!important;
}
why use background-color in html instead the body tag?
body{
background-color:#081f44;
min-height: 100vh; //Fill all the screen
}
Related
I'm trying to understand how to align children of a row or column in Bootstrap. I'm quite new to Bootstrap layouts so keep that in mind. But I'm very familiar with regular CSS flex boxes.
I want to center the buttons in the left column shown below:
My code to attempt this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>The HTML5 Herald</title>
<link rel="stylesheet" href="../css/paginator.css" />
<script type="text/javascript" src="../js/paginator.js"></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
</head>
<body>
<div class="outer-box container thick-border">
<div class="row">
<div class="col-lg-7 thin-border">
<div class="row d-flex justify-content-center">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</div>
<div class="col-lg-1 thin-border">sdfsdf</div>
<div class="col-lg-4 thin-border">sdfsdf</div>
</div>
</div>
</body>
</html>
In case you want to see my own custom CSS:
.outer-box {
margin-top: 40vh;
width: 60vw;
}
.thick-border {
border: 5px solid black;
}
.thin-border {
border: 2.5px solid black;
}
I just don't get how you're supposed to align children properly with the Bootstrap row- and cols. Should I just ditch the grid system and only use the flex boxes instead entirely?
Thanks!
You need to upgrade your bootstrap version to atleast 4 as the classes you have used in your code works in Bootstrap version 4 or greater.
Alright, so I have no idea why this isn't working, but take a look. My top right navigation items are terribly screwed up. Everything else works great so far. Any suggestions would be much appreciated. Also, side-note, is there a way for me to have an "a" tag that heads to a directory (Music) and for me to customize the directory page? I'll make a separate question on that in a minute. Also, I would love to have my own player that shows metadata. Anyway, I'll try to stay on topic so you don't have to answer those, just the CSS help. Thanks!
The HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="description" content="AnonSeeker is a collection of HTML, CSS, and JavaScript files designed for privacy. We offer things such as a browser, bookmarks, proxies, music, a text/code editor, and much more, completely password-protected!">
<link type="text/css" rel="stylesheet" href="css/style.css">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shortcut icon" href="favicon.ico">
<!-- Favicon -->
<title></title>
</head>
<body>
<!-- All Navigation Items -->
<div class="container" id="all-navigation">
<!-- Top Left Navigation Items -->
<div class="container" id="top-left-naviagtion">
<!-- Goto Browser -->
<div class="container goto-browser top-left-navigation-item">
<a href="html/anon-seeker-browser.html" class="goto-browser top-left-navigation-item">
<img src="img/browser.png" alt="browser-img" class="goto-browser top-left-navigation-item">
</a>
</div>
<!-- Goto Bookmarks -->
<div class="container goto-bookmarks top-left-navigation-item">
<a href="html/bookmarks.html" class="goto-bookmarks top-left-navigation-item">
<img src="img/bookmarks.png" alt="bookmarks-img" class="goto-bookmarks top-left-navigation-item">
</a>
</div>
<!-- Goto Music -->
<div class="container goto-music top-left-navigation-item">
<a href="html/music.html" class="goto-music top-left-navigation-item">
<img src="img/music.png" alt="music-img" class="goto-music top-left-navigation-item">
</a>
</div>
</div>
<!-- Top Right Naviagtion Items -->
<div class="conatiner" id="top-right-navigation">
<div class="container goto-ace top-right-navigation-item">
<a href="html/ace-editor.html" class="goto-ace top-right-navigation-item">
<img src="img/ace-editor.png" alt="ace-editor-img" class="goto-ace top-right-navigation-item">
</a>
</div>
</div>
</div>
<!-- Middle Elements -->
<div class="container" id="middle-elements">
<!-- Center AnonSeeker Image -->
<div class="container middle-img">
<img src="img/anonseeker.png" alt="anonseeker.png" class="middle-img">
</div>
<div class="container search-box">
<input type="text" placeholder="Search" class="search-box">
</div>
</div>
</body>
</html>
The CSS
html, body {
margin: 0;
}
#all-navigation {
width: 100%;
height: 100%;
}
#top-right-navigation {
top: 10px;
right: 10px;
padding: 15px;
}
#top-left-navigation {
top: 10px;
left: 10px;
padding: 15px;
}
.top-right-navigation-item {
padding: 5px;
}
.top-left-navigation-item {
padding: 5px;
}
#middle-elements {
text-align: center;
padding: 5px;
}
top-left-navigation spelling wrong in your html so not working your css. Just replace CSS mentioned below code. Hope this will help you
#top-right-navigation {
position:absolute;
top: 10px;
right: 10px;
padding: 15px;
}
#top-left-naviagtion{
position:absolute;
top: 10px;
left: 10px;
padding: 15px;
}
I am trying to create a footer for my simple webpage and am having some trouble with an element, which is over extending over the edge of the container. I assume this is a problem with the width.
I am trying to get the <hr> tag to extend the entirety of the width of the column. For reference I am using the MaterializeCSS framework for the containers, rows and columns.
Code
HTML:
<div class="container">
<div class="row"><!-- Other Content --></div>
<div class="row"><!-- Other Content --></div>
<div class="row"><!-- Other Content --></div>
<div class="footer-message">
<hr>
Made with <span style="color: #e25555;">♥</span> by Adam
</div>
</div>
CSS:
.footer-message{
position:absolute;
width: 100%;
padding:5px;
bottom:0px;
}
I am using a position of absolute to enable to align it to the bottom of the screen and I set the width to be 100% as I understand that it would inherit the width of the parent which in this case, is a div with a class of container.
What am I doing wrong? Thank you in advance!
Edit: Old screenshot
Add position: relative to the Container, then add left: 0; right: 0 to footer-message class.
Hope it help
I would use CSS Grid for this, see the following snippet:
html,
body {
width: 100%;
height: 100%;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
}
article {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
header {
background: #5170a9;
color: white;
padding: 1rem;
}
main {
color: #444;
padding: 1rem;
}
footer {
background: #182f58;
color: white;
padding: 1rem;
}
<article>
<header>
Page Header
</header>
<main>
Hi, there's not much content, yet. You can write in here to expand the container.
</main>
<footer>
All rights reversed.
<br>
I am always at the bottom of the page
</footer>
</article>
make your footer like in the materialize documentation example: https://materializecss.com/footer.html
<footer class="page-footer">
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
</div>
</div>
</footer>
I tried to reproduce it, but your code without the CSS works fine for me. I am not sure if you want the <hr> to fill the whole width of just the container width.
<!DOCTYPE html>
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<main>
<div class="container">
<div class="row">
<!-- Other Content -->
</div>
<div class="row">
<!-- Other Content -->
</div>
<div class="row">
<!-- Other Content -->
</div>
<div class="footer-message">
<hr>
Made with <span style="color: #e25555;">♥</span> by Adam
</div>
</div>
</main>
<footer>
</footer>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
What I need is two divs in following fashion:
[-width-of-content-][------------------remaining-width-of-page----------------------------]
I remember how in olden days it was a breeze to do this by using tables. But now tables are taboo, so how do I achieve this with div? I have been spending hours trying to figure this one out!
<div style='float:left;display:inline-block'> Hello</div>
<div style='float:left;width:100%''> THIS DIV BREAKS</div>
You could also achieve this using flexbox: http://jsfiddle.net/yr05wkuh/1/
This would keep your DIVs the same height, without requiring you to set a value.
CSS
.container {
display: flex;
}
.div1{
background-color:yellow;
}
.div2{
flex: 1 0;
background-color: red;
}
HTML
<div class="container">
<div class="div1"> Hello</div>
<div class="div2"> THIS DIV BREAKS</div>
</div>
Here's a good resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You only need to float the left element.
HTML
<div id="left">Hello yoyoyoy jrllo hello blah blah</div>
<div id="right"></div>
CSS
#left,#right{
height:50px;
}
#left{
background:red;
float:left;
}
#right{
background:green;
}
https://jsfiddle.net/qb3374ou/
EDIT: right div with content.. same result
https://jsfiddle.net/qb3374ou/1/
two divs side-by-side is impossible but this might work:
<div class="row">
<div class="col-md-10 col-md-offset-1">
width of content
<div class="col-sm-9">
Remaining width of page
</div>
</div>
</div>
hope it helped.. .
Sorry bro,.. my mistake... this one is more working :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">Width of content</div>
<div class="col-sm-8" style="background-color:lavenderblush;">Remaining Pages</div>
</div>
</div>
</body>
</html>
Not sure if I'm understanding you correctly, but I think you're trying to get this:
HTML:
<div class="right">Text goes here</div>
<div class="left">Text for the left div goes here</div>
CSS:
.right {
float:right;
background: #ddd;
background-repeat: no-repeat;
width: 240px;
height: 100px;
}
.left {
background-color:#ccc;
height: 100px;
}
fiddle: http://jsfiddle.net/veW2z/88/
Actually,"col-md-" are the classes of Bootstrap ..u need to include the Bootstrap css to make it work..Here is the link for itenter link description here
This contain complete Bootstrap but u need to include only the css in it and write the code
I'm trying to get styles to apply to specific nested divs and they aren't showing up. (This is the problem)
I would like for them to work, or in other words, to apply the rules. (This is the desired outcome)
HTML:
<div class="" id="indexWrap">
<!-- Features Section -->
<section id="features" class="section-light">
<div class="container">
<div class="row">
<div class="col col-lg-3 col-md-4 col-sm-6 col-xs-12">
Stuff
</div>
</div>
</div>
</section>
<!-- END Features Section -->
</div>
<!-- END indexWrap -->
SCSS: (Also Bootstrap style sheet.)
#indexwrap {
.col {
border: 1px solid black;
border-radius: 8px;
padding: 5px;
}
}
Order of styles
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
And here is the codepen: http://codepen.io/anon/pen/avvbxx
Selectors are case sensitive:
#indexwrap should be #indexWrap to match the HTML's id="indexWrap".
Codepen Update
Your container div has an ID of indexWrap, but you refer to it as #indexwrap in your SCSS. Make sure that you match the case of the identifier.