I have the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
#scale div {
float: left;
width: 75px;
padding: 5px;
border: 0px #333 solid;
}
</style>
</head>
<body>
<div style="font-size: 10px;" id="scale">
<div id="box" align="center" style="background:#88ff88;" > </div>
<div id="a"> 1   </div>
<div id="box" align="center" style="background:#ff8888;"> </div>
<div id="b"> 2   </div>
<div id="box" align="center" style="background:#ff88ff;"> </div>
<div id="c"> 3   </div>
</div>
</body>
</html>
How can I get the above on three lines. That is, a color block and a number on a single line.
First, you have multiple elements with the same ID. It doesn't work like that. ID is unique, multiple elements can have the same class.
Second, I would recommend just having an empty span tag inside a div for your box. Divs display block by default (take up whole line) so you can have an inline-block span (takes up only required space but treated like block element) with set width and height and a number next to it.
Also, inline styles make the code look messy and difficult to read & work with. You should keep your CSS separate from your HTML.
<div id="scale">
<div id="a"><span></span>1</div>
<div id="b"><span></span>1</div>
<div id="c"><span></span>1</div>
</div>
#scale div span {
width: 100px;
height: 20px;
display: inline-block;
}
#a span{
background-color:#00F;
}
#b span{
background-color:#0F0;
}
#c span{
background-color:#F00;
}
DEMO
In your style tag, use display: inline-block on all of your box divs.
Related
Goal: remove the white gap in between the two rows of images:
repro case: https://jsfiddle.net/kromato4/5cyLvnut/
The gap does not appear under html, but crops up when I switch to xhtml (and the epub that this is going into expects xhtml).
here is the html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divs to the rescue?</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="grid">
<div class="gridrow">
<div ><img src="https://i.imgur.com/pvh1qBn.jpg"/></div>
<div ><img src="https://i.imgur.com/Mmnz4YT.gif"/></div>
<div ><img src="https://i.imgur.com/3nAJxUE.gif"/></div>
</div>
<div class="gridrow">
<div><img src="https://i.imgur.com/C8mn56T.gif" /></div>
<div><img src="https://i.imgur.com/Tic5I5b.gif" /></div>
</div>
</div>
</body>
</html>
and the minimal css:
.grid {
display: table;
width: 585px;
height: 580px;
}
.gridrow {
display: table;
}
.gridrow > div {
display: table-cell;
I've mucked with setting heights on the divs to no avail. The top row images are all 255 pixels tall, but the divs holding the images appear to be an extra 4 pixels tall. Also tried using table with rows and columns, but showed the same issue. Any help appreciated as this gap is super distracting when the images are all panels from the same comic.
Define display block on image tag, See attached code
.gridrow > div img {
display: block;
}
Welcome to SO
Set image as display table
.gridrow img {
display: table;
}
You have to add just one css only
.gridrow img {
display: block;
}
So I have a school project. I must make my own website. I have a problem though: I can't vertically align h1 along 2 images floating left and right.
embedding it in a div and using vertical-align: middle; doesn't help. even with a prefix hack that I found here
here is the source code of my website project:
Html:
<!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>The dankest website on earth</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="CSS/CSS.css">
</head>
<body>
<div id="header">
<img class="DebugBorder" src="images/lenny.png" title="memes.wav" style="float: right;" width="200px" height="200px" />
<img class="DebugBorder" src="images/lenny.png" title="memes.wav" style="float: left" width="200px" height="200px" />
<h1 class="DebugBorder">Sample text</h1>
</div>
</body>
</html>
CSS
.DebugBorder{ border: 2px red solid}
body {background:linear-gradient(to bottom, darkred, black);background-repeat: no-repeat;}
html {height: 100%;}
h1 {text-align: center; font-size: 4em; font-family: impact; width: 50%; margin: auto; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: white;}
#header {height: 200px}
I removed any solutions that didn't worked and kept it to my bare minimum.
If you want the text vertically centered between the images, a table display would work fine.
Your CSS changes would look something like
#header {
height: 200px;
display:table;
}
.DebugBorder{
border: 2px red solid;
display:table-cell;
width:29%;
}
Here's a fiddle using your code: https://jsfiddle.net/dy4nycjk/1/
But if you want the text vertically centered and covering the images, you'll have to do a little more work with positioning.
Here's another fiddle with an example of the text centered over your two images: https://jsfiddle.net/ktLn72yq/
If your H1 title is only a single line then you can set it's line-height to match the height of the images. So in this case:
.DebugBorder {
border: 2px red solid;
line-height:200px;
}
That should align the H1 to middle of the images.
Edit: Or apply the line-height to the H1 element instead of the debug class like I just realized. :)
I am currently creating a practice website for my Arma 2 Unit (88th Airborne Divsion), I have created a simple navigation bar using table headers hyperlinked, however the space between the table headers is dependant on how long the word is. Is there a way of making equal space between the headers?
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>88th Airborne Division</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="banner"><img src="images/logo.png" width="680" height="125" alt="logo" /></div>
<div id="navbar"><table width="680" border="0">
<tr>
<th>Home</th>
<th>About Us</th>
<th>Members</th>
<th>Apply</th>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS CODE:
*{
margin:0;
}
#container {
height: 100%;
width: 100%;
}
#banner {
height: 125px;
width: 680px;
margin-left:auto;
margin-right:auto;
}
#navbar {
background-color:#333;
width: 680px;
height:25px;
margin-right: auto;
margin-left: auto;
text-align:center;
}
th{
border-right-width:medium;
border-right-color:#000;
border-right-style:groove;
}
Because of table width=680, you can put in CSStr{ width: 170px; }, or, you can change th in CSS
tr{
position: relative; /* you may put it out, maybe it will work without it */
}
th{
border-right-width:medium;
border-right-color:#000;
border-right-style:groove;
width: 25%;
}
which gives you more flexible sizing. Also, I don't know if you have any additional borders or margins. If so, tds will not fit in that 25% (because dimension is measured without margin, padding and border), so play with it (lower percentage until you get the right look).
This is the snippet from my css file
#centered{
position: relative;
text-align: center;
width: 50%;
margin-left: auto;
margin-right: auto;
}
#table{
text-align: center;
font-size: 1.5em;
font-weight: 900;
background-color: #5E9DC8;
}
This is the html section that I'm trying to use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Bicycle Store Database</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
<body>
<h1>ACME BICYCLE SHOP</h1>
<h2>GET IN GEAR!</h2>
<div id="centered">
<table id="table" border="0" cellpadding="10">
<tr>
<td>Go Shopping!<br/><br/>
Check a Service Ticket</td>
</tr>
</table>
</div>
<p><br/>HOME</p>
</body>
</html>
This is the result:
Everything I've read indicates that I've done this correctly, but it's off centered in all my browsers. Any thoughts?
Why you are using table for that? any specific reason? Can't you simply do it like this?
<div class="center">
Go Shopping
<br>
</div>
.center {
margin: auto;
/* Other styles goes here, width height background etc */
}
you are centering #centered but not the table in it.
add margin:0 auto; to #table.
The div is centred in the page.
The table is left aligned in the div.
Add table { margin-left: auto; margin-right: auto; } to centre the table in the div.
I'm trying to put a element to the left of a element, however I can't seem to make them the same height and align with each other. The span always seems to be positioned a little higher.
Anyone got any ideas?
Sparkles*
Edit: HTML section
<label for="name">Username: </label>
<input type="text" name="name" id="name" value="" maxlength="15"/>
<span id="box" style="display:none"></span>
CSS
span.box{
position:absolute;
width:100px;
margin-left:20px;
border:1px;
padding:2px;
height: 16px;
}
input.name {
width: 115px;
height: 14px;
}
If you want to vertically align items in the same line, you probably don't need to make them the same height - just give them the same value for the vertical-align property.
.myinput, .myspan {
vertical-align: middle;
}
What a lot of people don't understand with vertical-align is that in order for things to be vertically aligned to the middle, everything in that line has to have a vertical-align property of 'middle' - not just one thing (like the span).
Imagine an invisible horizontal line running though any inline content. Usually the baseline of text, and the bottom of images, are lined up with this line. However, if you change vertical-align to middle, then the middle of the element (text span, image etc) is aligned with this line. However that's not going to line up vertically with other items if they are still aligning their bottom or baseline to that line - they would need to align their middle to that line too.
here's an slightly retouched version of SuperDucks code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
.lbl {
background-color:lime;
padding:0;
line-height: 24px;
height: 24px;
display: inline-block;
}
.t {
height:17px;
padding:0;
height: 20px;
display: inline-block;
}
</style>
</head>
<body>
<span class="lbl">My label : </span>
<input class="t" type="text" name="t">
</body>
Try padding :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
.lbl {
background-color:lime;
padding:0;
}
.t {
height:17px;
padding:0;
}
</style>
</head>
<body>
<span class="lbl">My label : </span>
<input class="t" type="text" name="t">
</body>
Keep in mind 'span' is an inline element, rather than a block level element, so size definitions don't apply, unless you use 'display:block' CSS property. Inline elements get the size of the contents, so things like font size are what define the height of that span.
Also I'd use 'label' tag with the 'for' attribute, rather than a 'span'. This makes a better structure, and has the advantage of moving the focus to the input by clicking on the label.
The following is a block-level example, which allows pixel by pixel alignment for every browser:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
.lbl {
background-color: lime;
border: 1px solid silver;
display: block;
float: left;
font-size: 12px;
height: 16px;
padding: 2px;
width: 100px;
}
.t {
border: 1px solid silver;
display: block;
float: left;
font-size: 12px;
height: 16px;
margin-left: 4px;
padding: 2px;
width: 150px;
}
</style>
</head>
<body>
<label class="lbl">My label : </label>
<input class="t" type="text" name="t">
</body>