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. :)
Related
Im trying to create a fluid layout of 3 or more DIV boxes that can sit in a fixed or fluid container that looks like this:
example:
So far ive used display: inline-block to make two of the boxes sit next too each other, which does work, however when the width is set to 48% and margin is set to 1% (Which when everything is inline, should add up to a total of 100% if im correct?) the second div goes on to a new line.
With regards to the 3rd box, when i set the width to 98% (and then the margin of 1% that is applied) the box overhangs the container on the right...
What ive essentially ended up with is this:
problem:
I can alter and reduce the % to make it all 'sort of' fit how i want, but then the top two boxes and bottom large box just don't align up nicely.
For example:
http://imgur.com/igI73Y1
Essentially what im trying to produce is a quick snippet to use that i can add to any container on a website that provides a nice, clean layout, ready for content to be added.
(Im making a few different layouts)
Id like to try and limit how many classes are created so i can easily edit the layouts as needed.
for example:
.contentbox (the main 'settings' to make these boxes work)
.smallbox (if 3 divs are set to .smallbox one after another, the 3 will show inline)
.normalbox (if 2 divs are set to .normalbox one after another, the 2 will show inline)
.largebox (if 1 divs are set to .largebox it will go to the edge of the container)
I want to use % so irregardless of the size of the container, it will always fit without having to change width pixels etc.
Currently this is what ive got:
<!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>Untitled Document</title>
<style type="text/css">
#container {
width: 600px;
border: thin solid #000;
}
.contentbox {
position:relative;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #00F;
border-right-color: #00F;
border-bottom-color: #00F;
border-left-color: #00F;
display: inline-block;
width: 48%;
margin: 1%;
vertical-align: top;
}
.largebox {
width:100%;
}
</style>
</head>
<body>
<div id="container">
<div class="contentbox">class="contentbox"</div>
<div class="contentbox">class="contentbox"</div>
<div class="contentbox largebox">class="contentbox largebox"</div>
</div>
</body>
</html>
Thank you in advanced for any help!
You have to take into consideration that borders take up width and that the margin of 1% of either side of the large container means that it can only be less than 100% width. I set it to 94, and your small ones to 45 and set padding to 0!important; Now it works.
#container {
width: 100%;
padding: 0!important;
border: thin solid #000;
}
.contentbox {
position: relative;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #00F;
border-right-color: #00F;
border-bottom-color: #00F;
border-left-color: #00F;
display: inline-block;
width: 45%;
margin: 1%!important;
vertical-align: top;
}
.largebox {
width: 94%;
}
<!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>Containers</title>
</head>
<body>
<div id="container">
<div class="contentbox">class="contentbox"</div>
<div class="contentbox">class="contentbox"</div>
<div class="contentbox largebox">class="contentbox largebox"</div>
</div>
</body>
</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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width: 100%;
border: thin solid #000;float:left;
}
.contentbox {
position:relative;
border:0px solid #00f;
display: inline-block;
width: 48%;float:left;box-shadow:0px 0px 2px 0px #555555;
margin: 1%;
vertical-align: top;
}
.largebox {
width:98%;margin: 1%;
}
</style>
</head>
<body>
<div id="container">
<div class="contentbox">class="contentbox"</div>
<div class="contentbox">class="contentbox"</div>
<div class="contentbox largebox">class="contentbox largebox"</div>
</div>
</body>
</html>
I'm (hopefully) trying to horizontally align the text in two div boxes , but as you can see below it isn't happening for me . Please help as I can't see what I'm doing wrong
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.left-div {
vertical-align:top;
float: left;
width: 400px;
height: 250px;
}
.right-div {
vertical-align:top;
margin-left: 400px;
}
</style>
</head>
<body>
<div class="left-div">
<H2> Telephone:</H2>
<strong>Mobile: </strong> 123456789<br />
<strong>Office: </strong> 123456789(answer service)<br />
<strong> Email: </strong>pgbathrooms#hotmail.co.uk
</div>
<div class="right-div">
<H2>Address:</H2>
house<br />
town<br />
county<br />
</div>
</body>
</html>
Here's a working Fiddle
The problem you were having was actually the margin-collapse problem, which was manifesting because your h2 has margin-top, and it was being reflected in one div and not the other.
Vertical-align does not work on block-level elements, only inline-block or inline elements.
You could do one of two things:
Remove the margin-top from your h2: div h2 {margin-top: 0;}
You could add padding to the top of the divs to give the margin something to "push off of"
Changing your css as follows takes care of the problem:
.left-div {
float: left;
width: 400px;
height: 250px;
padding-top: 1px;
}
.right-div {
margin-left: 400px;
padding-top: 1px;
}
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 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.