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.
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
}
I have a main div which contains another 3 divs, inner divs are each separated into widths of 20% 50% and 30%. I encountered an issue, when resizing window to smaller sizes I get that squeezed effect ass all elements resize, however I want to keep element 1 and 3 at certain sizes (40px and 75px respectively). I tried setting element 1 to 40px, element 2 to 100% and element 3 to 75px widths, but eneded up with getting element 2 to occupy all space and push other elements out. I'll include image of normal state, resized state and desired state (on resize) that I wan't to achieve. How could I achieve it?
As you can see I only want middle section (element 2) to resize as windows is resized.
<div class="div-contain">
<div class="div-1"><div>
<div class="div-2"><div>
<div class="div-3"><div>
<div>
.div-contain {
position: relative;
}
.div-1 {
width: 20%;
min-width: 40px;
float: left;
}
.div-2 {
width: 50%;
position: abosolute;
margin: 0 auto;
}
.div-3 {
width: 30%;
min-width:75px;
float: right;
}
You could also use a media query and directly specify widths when it reaches a break point. add a margin to the center div the size of the left div
<!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" />
<style type="text/css">
body{
margin:0;
padding:0;
}
.wrapper{
width:100%;
height:400px;
display:table;
}
#n1{
width:20%;
min-width:40px;
background:red;
display:table-cell;
}
#n2{
width:50%;
background:green;
display:table-cell;
}
#n3{
width:30%;
min-width:75px;
background:blue;
display:table-cell;
}
</style>
<script type="text/javascript">
window.onload = function()
{
document.getElementById('n1i').value = document.getElementById('n1').offsetWidth;
document.getElementById('n2i').value = document.getElementById('n2').offsetWidth;
document.getElementById('n3i').value = document.getElementById('n3').offsetWidth;
}
window.onresize = function()
{
document.getElementById('n1i').value = document.getElementById('n1').offsetWidth;
document.getElementById('n2i').value = document.getElementById('n2').offsetWidth;
document.getElementById('n3i').value = document.getElementById('n3').offsetWidth;
}
</script>
</head>
<body>
<div class="wrapper">
<div id="n1">
</div>
<div id="n2">
</div>
<div id="n3">
</div>
</div>
First div width:<br />
<input type="text" id="n1i" readonly="true" /><br />
<br />
Second div width:<br />
<input type="text" id="n2i" readonly="true" /><br />
<br />
Third div width:<br />
<input type="text" id="n3i" readonly="true" />
</body>
</html>
The easiest way might be to do away with element 2 altogether and just put its contents directly within the parent div. Then you can float elements 1 and 2, and when the page is resized only the space between them will change:
<style type="text/css">
#parent {position:relative;width:100%;height:100%;}
#parent div {position:relative;height:100%;}
#element1 {width:40px;float:left;}
#element3 {width:75px;float:right;}
</style>
<div id="parent">
<div id="element1"></div>
<div id="element3"></div>
<!-- Place the contents of element 2 here -->
</div>
i don't know if this works for you but basically i made all three inner divs absolute positioned. and had to use calc to calculate the middle div's width. there might be a better solution without using calc, but this is what came to my mind at this point.
http://jsfiddle.net/btevfik/VRU8V/
body{
margin:0;
}
.container {
height:20px;
position:relative;
}
.div1 {
width: 40px;
position:absolute;
left:0;
border:1px solid blue;
}
.div2 {
width: calc(100% - 120px);
position:absolute;
left:40px;
border:1px solid red;
}
.div3 {
width: 75px;
position:absolute;
right:0;
border:1px solid yellow;
}
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:-)
I'm looking for a way to align a number of elements (spans, inputs, and buttons) such that despite their differing sizes, their vertical mid point is on the same horizontal line:
How do I achieve this in CSS? Here's the HTML file to play with:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<style>
.content { font-size: 18px; border: 1px dotted blue; }
.content input, .content button { font-size: 40px; float: left; }
.label { border: 1px dotted red; float: left; }
.clear { clear: both; }
</style>
</head>
<body>
<div class="content">
<span class="label">Label: </span><input type="text">
<span class="label">More text: </span><input type="text">
<button type="submit">Submit Me</button>
<div class="clear"></div>
</div>
</body>
</html>
Set the main div's line-height: height of tallest element in px, then set vertical-align: middle. You may have to set display:inline or display:inline-block on the subelements as well.
That should work.
As others (David Nguyen and thirtydot) have said, adding vertical-align:middle; will accomplish the effect you're after so long as you get rid of the floats that are currently in your code. Adding display:inline-block; will let you have better control over the dimensions, and I don't know if you were planning on it, but I'd definitely swap out your <span class="label"> for actual <label> tags.
Your span, input and button need the property:
vertical-align:middle;display:inline