Hey I have this problem when trying to make simple grids. I have an unordered list with four list elements in it. Using grid-template-columns and grid-template-rows I set four columns and one row but in the browser its showing two columns and two rows which makes no sense to me.
If I assign all the list items
the row 1/2
as shown in comment below in the CSS the problem is fixed
but this seems like an unnecessary line of code from what I know. If someone would help explain the mechanics of what is happening so I will stop running into this problem it would be great. Either what I am missing or why I need to specify the row. It's just nagging in the back of my head.
* {
display: block;
margin: 0;
padding: 0;
}
head {
display: none;
}
body {
color: white;
background: black;
}
ul {
background: white;
width: max-content;
display: grid;
grid-template-columns: repeat(4, max-content);
grid-template-rows: max-content;
}
li {
list-style: none;
margin: 3px;
/* grid-row: 1/2; */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
<link rel="stylesheet" href="main.css" type="text/css" media="screen">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>Snapshots</h1>
<ul id="gallery">
<li><img src="images/fireworksTHBN.jpg" alt="Fireworks>"</li>
<li><img src="images/coffeeTHBN.jpg" alt="Fireworks>"</li>
<li><img src="images/roseTHBN.jpg" alt="Fireworks>"</li>
<li><img src="images/bigbenTHBN.jpg" alt="Fireworks>"</li>
</ul>
</body>
</html>
You have one very simple problem in your syntax
<li>
<a href="images/fireworks.jpg" title="A fireworks display">
<img src="images/fireworksTHBN.jpg" alt="Fireworks>"
</a>
</li>
Your <img> tag is not properly closed
I'm pretty sure this is what you're looking for and then it will work as expected, otherwise it just takes the <a> as another element which explains the 4 items in the grid.
<li>
<a href="images/fireworks.jpg" title="A fireworks display">
<img src="images/fireworksTHBN.jpg" alt="Fireworks">
</a>
</li>
Related
In a project I'm cooperating on (using Bootstrap 4) I would like to create a box which would have a scroll-bar when there is too much content, like here:
but when there is only few bullets in it, it would shrink to appropriate height, not like what we have now (simply I want to get rid of that vertical unused witespace):
HTML I'm using now is:
<div class="col-sm-3">
<h2>Domains (258)</h2>
<ul class="overflow-auto domain-list">
<li>1bh3A00</li>
[...]
<li>8prnA00</li>
</ul>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="btn"><i class="fa fa-download"></i> Domains CSV</button>
CSS for that is only:
.domain-list { height: 30em; }
I assume I'm missing something obvious, but was not able to google anything helpful. Any idea please?
You can achieve this via applying max-height on your container instead of specifying height. This will make the container take as much hight as needed but not more than the specified maximum. Below you can find a simple example, after adding the 7th row the container should become scrollable as there is more content in it than the allowed max-height.
let rowNumber = 2;
document.getElementById('add').addEventListener('click', function() {
const newRow = document.createElement('div');
newRow.classList.add('row');
newRow.innerText = `Row #${rowNumber++}`;
document.getElementById('list').appendChild(newRow);
});
.list {
max-height: 120px;
background-color: red;
overflow-y: auto;
}
.row {
height: 20px;
line-height: 20px; /* this is not needed, just makes the example text aligned */
background-color: #ccc;
}
.row:nth-child(even) {
background: rgb(15, 156, 250);
}
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="list" class="list">
<div class="row">Row #1</div>
</div>
<hr />
<button id="add">Add row</button>
<script src="script.js"></script>
</body>
</html>
THANKS FOR ALL THE HELP GUYS, HAVE FIXED IT!! :D
Just wondering why my code wont work? Under the navigation bar my paragraph wont show? Also how would i put my navigation bar all on one line? Sorry if this is really dumb, im new to this!
New updated code that sill wont show the paragraph at the bottom.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title> Home </title>
</head>
<body>
<img src="Andora ski trip.JPG" alt="View from flat in Andora" height="400" width="100%">
<h1> Home </h1>
<nav>
<ul>
<li>Home</li>
<li>Curriculum vitae</li>
<li>Literature review</li>
<li>Video</li>
</ul>
</nav>
<p>My name is Jack Hay and this is the first proper website that i have designed. My aim is to show my CV, some coursework that i have done (Literature review), a short self made video and to learn how to use a stylesheet efficiently</p>
</body>
</html>
css
h1{
font-family:"calibri", Times, Serif;
colour: White;
font-size:50px ;
padding:0.1px;
margin:5
}
ul
{
list-style-type: none;
}
ul li
{
display: block;
width: 25%
float: left
}
Start by replacing the h2 tags with li tags. It's not valid html.
To put the nav in one line you would do something like this in your css:
ul
{
list-style-type: none;
}
ul li
{
display: inline-block;
}
... your head and body tags at the top were messed up.
<!doctype html>
<html>
<head>
<title> Curriculum vitae </title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<img src="Andora ski trip.JPG" alt="View from flat in Andora" height="400" width="100%">
<h1> Curriculum vitae </h1>
<nav>
<ul>
<li>Home</li>
<li>Curriculum vitae</li>
<li>Literature review</li>
<li>Video</li>
</ul>
</nav>
<p>My name is Jack and this is the first proper website that i have designed. My aim is to show my CV, some coursework that i have done (Literature review), a short self made video and to learn how to use a stylesheet efficiently</p>
</body>
</html>
From the code you have posted there, the paragraph should be showing, it may be that your css is moving the paragraph off screen and/or setting the text to your background colour.
You should also move the <h1> and <img> tags out of the head and put them in the body. The head tags are for giving the browser information, not for containing content for the user.
To display you nav all in one line, you will need to change your nav tags to li (not h2) and then in your css:
ul
{
list-style-type: none;
}
ul li
{
display: block;
width: 25%
float: left
}
Consider the following problem: You want to center a menu, which will change it's content( For example after pressing a button, the content of the first button is to set it from "Hello" to "Greetings, user!" Or something along those lines. The important thing is that the width of the elements will be a variable.
Suppose that you also want to center the contents of your element. An approach I found is basically this:
.centerMe1 {
margin-right: auto ;
margin-left: auto ;
max-width: 500px;
}
This works pretty nicely, except I can't use it in this case, since I don't know the width of the element. I tried to use float:left, because it sets the width of the parent to be equal to the width of it's children, but it didn't work. Basically the width was set correctly, but the element wasn't centered.
This is the second class:
.centerMe2 {
margin-right: auto ;
float: left;
margin-left: auto ;
}
And the entire source code(to make the testing easier)
<!DOCTYPE html>
<html>
<head>
<title>Center Error</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery.js"></script>
<style type="text/css">
.centerMe1 {
margin-right: auto ;
margin-left: auto ;
max-width:500px;
}
.centerMe2 {
margin-right: auto ;
float: left;
margin-left: auto ;
}
</style>
</head>
<body>
<div class="row-fluid">
<div class="span12">
<ul class="nav nav-pills centerMe1">
<li class="active">adsadw er sdfw </li>
<li>QQQQQQQQQQQQQ</li>
<li>some other random gibberish</li>
</ul>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
If you make the ul a block element, so it will take up the full width, you can set the li to display:inline-block. Now that the li item's are inline block they can be centered with text-align:center;
ul {
display:block;
text-align:center;
}
li {
display:inline-block;
}
fiddle:
http://jsfiddle.net/CZ9pX/1/
you just have to give
text-align:center;
to the outer container,dont use float. use display:block.
div{ text-align:center;display:block}
div span{font-size:12px;}
This will make span appear in the middle.
For simplicity I've created my style in the document to highlight my problem. I have a row of 4 links that are styled to look like button. The Next link (the 3rd item) I am hiding using css. In IE8+, Chrome, Firefox it works perfectly but in IE7, there is a gap between the Cancel and Accept button (where the Next button would be).
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<style type="text/css">
.ButtonBar
{
margin-top: 20px;
text-align: center;
}
.LinkButton
{
background-color: #01699b;
border: 0px solid;
border-radius: 14px;
color: #fff;
cursor: pointer;
font-weight: bold;
height: 28px;
padding: 0px 11px 0px 11px;
overflow: hidden;
position: relative;
text-decoration: none;
display: inline-block;
line-height: 28px;
}
.NextButton
{
display: none;
}
</style>
</head>
<body>
<div class="ButtonBar">
<a class="PreviousButton"><span class="LinkButton">Previous</span></a>
<a class="CancelButton"><span class="LinkButton">Cancel</span></a>
<a class="NextButton"><span class="LinkButton">Next</span></a>
<a class="AcceptButton"><span class="LinkButton">Accept</span></a>
</div>
</body>
</html>
If you remove all CSS from the .LinkButton class apart from background-color it does the same, I was just including it all to show what I am doing so far.
What should I do to fix this issue?
Didn't you ever wonder where these spaces actually come from?
It's the linebreaks between your inline-elements <a> causing a gap.
<div class="ButtonBar">
<a class="PreviousButton">...</a> <!-- Linebreak! -->
<a class="CancelButton">...</a> <!-- Linebreak! -->
<a class="NextButton">...</a> <!-- Linebreak! -->
<a class="AcceptButton">...</a> <!-- Linebreak! -->
</div>
Now the modern browsers collapse multiple of these, but IE7 does not, so you have actually 2 linebreaks between your elements, causing the gap to be double as wide.
You have several solutions to this:
1) Floating the elements
2) modifying markup:
<!-- end tag on the new line -->
<a>...
</a><a>...
</a>...
<!-- comments in between -->
<a>...</a><!--
--><a>...</a>
<!-- all on one line -->
<a>...</a><a>...</a>
<!-- In some cases (e.g. list elements) you can skip the end tag -->
3) Modifying font sizes
4) Using negative margins- but that could cause issues in older browsers.
What solution you want to take is up to you.
For your special case, where you just hide the element in question you could either declare absolute position or any float on that element.
One solution is to add float:left ONLY to the .NextButton css class. This should work.
I have created a top bar and a bottom bar for my website's index. I have isolated both of them in two files, the header.php, which controls the top bar and the footer.php, which controls the bottom bar.
In the index there is no problem, but if I create a new page like about.php, and I include the two php files, the top and bottom bar are moved to the right by 10px (or something like that).
In this case the page is larger, because there is this tiny blank space to the left, before the beginning of the two bars.
Here are the two files:
Header.php
<style>
.blue { background-color: #039; width: 100%; height: 15%; position: absolute; top: 0px; }
html, body { width: 650px; background-color:#F5F5F5;}
</style>
<div class="blue">
<h1 style="text-align: center; color:#FFFFCC ;font-family:"Times New Roman",Times,serif;">My Website</h1>
</div>
Footer.php
<ul id="figo">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<style>
#figo {background-color: #039; position:absolute; bottom:0px; width:100%;}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:right;
}
a{
display:block;
width:90px;
color:#FFFFCC;
}
</style>
INDEX.PHP
Here I post the index.php
-
<html>
<head> <title> About </title> </head>
<body>
<? include 'header.php'; ?>
<?include 'footer.php'; ?>
</body>
</html>
The <style></style> tags should only go into the <head></head> portion of a document. You want to avoid having any inline styles as well. Better than using <style></style>, you should put all the styles that are to be used by all of your pages into a single stylesheet.
I would implement a wrapper (container) and give that your page width and position relative, this will align your footer menu to the bottom of that block (assuming that's what you're trying to achieve). If not, drop the position from the container.
With all of these changes, the structure would look something like this. Keep in mind this is a very archaic design, but it should help get you started.
header.php:
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title; ?></title>
...
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
...
</head>
<body>
<div id="container">
<div class="blue" id="header">
<h1>Header Content</h1>
</div>
index.php/about.php/whatever.php...
<?php
$title = 'My About Page';
include('header.php');
?>
<div>Your page contents</div>
<?php include('footer.php'); ?>
footer.php:
<div id="footer">
<ul id="figo">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div><!-- end "container" -->
</body>
</html>
/css/stylesheet.css:
body {
background-color: #F5F5F5;
margin: 0;
padding: 0;
}
#container {
position: relative;
width: 650px;
}
.blue {
background-color: #039;
height: 15%;
}
#figo {
background-color: #039;
position: absolute;
bottom: 0px;
margin: 0;
padding: 0;
width: 100%;
}
#figo ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#figo li {
float: right;
}
#figo a {
display: block;
width: 90px;
color: #FFFFCC;
}
Kill the position: absolute on your .blue top bar. You don't need it; since it's at the top of your HTML, it'll be at the top of the page. [The space is probably the result of the default padding on the body.] Try CSS like this:
html, body { background-color:#F5F5F5; margin: 0; padding: 0; }
.blue { background-color: #039; height: 15%; }
To be sure, though, we'd need to see index.php and footer.php.
Why are you setting a width on the html and body elements? That's a little funky. If you want a 600px-wide content area with a gray background, create a wrapper div and apply the background to that:
#wrap { background: #f5f5f5; width: 600px; }
<body>
<div id="wrap">
<?php require "header.php"; ?>
content here
<?php require "footer.php"; ?>
</div>
</body>
Also, style elements should be placed as children of the head element. Or, better yet, in an external stylesheet, so you separate presentation from content.
The reason your getting the padding on the left is because you have <html> on both your header.php as well as the page you are loading the header file on.
Additionally, it would be a better practice to put header and footer into a higher level folder within your server. Then reference that file with
Include("../../header.php");
The styles being within one or two style sheets is the best way to accomplish styling as well. You would need to refer to nodes in you document by parent class and class or IDs. That would allow you to get different styles on different pages but have one style sheet.
<div class='parent'>
<div class='child'>
//do stuff
</div>
</div>
Then style with
<style type='text/css'>
.parent .child{
cool:stuff;
}
</style>
And finally, make sure the style only shows up within the <head> of the page:-)