I am trying to create one table using the <span> and <div> concept.
But the table is not coming together properly. I couldn't find where the issue is. Please tell me what the problem is. I have to produce 4 to 5 lines in a same row.
Sample 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" />
<style>
.line1
{
background-color:#AAAAAA;
height: 150px;
width: 1px;
display: block;
}
.line2
{
background-color:#CE5611;
height: 150px;
width: 1px;
display: block;
margin-left: 121px;
}
</style>
</HEAD>
<body>
<div id="a1" style='padding-left: 14px;width: 100px;'>
<span>h1</span>
<span class="line1"></span>
<span>h2</span>
<span class="line2"></span>
<span>h3</span>
<span class="line1"></span>
</div>
</body>
</html>
Instead this way of going :
<div id="a1" style='padding-left: 14px;width: 100px;'>
<span>h1</span>
<span class="line1"></span>
<span>h2</span>
<span class="line2"></span>
<span>h3</span>
<span class="line1"></span>
</div>
do
#wrapper .content{
float:left
width:100px;
padding:.5em;
}
#wrapper .content span{
font-weight:bold;
}
<div id="wrapper">
<div class="content"><span>line 1</span></div>
<div class="content"><span>line 2</span></div>
<div class="content"><span>line 3</span></div>
</div>
you got the idea ..
Do you really want the classed spans to have display: block? That forces each one onto a seperate line. Functionally, <span style="display: block"> is kinda the same thing as <div> (and <div style="display: inline"> is kinda the same thing as <span>).
You're probably looking for display: inline-block. That gives you the ability to block attributes (height, width) like you are, but still leave it moving around within the surrounding contents. Another alternative is to use display: table-cell. There's a chart of display support here.
You should use a <table>.
I prefer using li and span tags instead of div and span. It makes manipulation much easier. With li as block and span inline-block.
Related
I have (2) div elements displayed as inline-block's.
I'm attempting to make the second div container that is wrapped around a <p> element extend to the width of the screen. Not sure how to accomplish this.
Ideally, the red container will stretch to the edge of the screen to the right.
<div style="background-color: grey; width:16px; display: inline-block;">
<p>-</p>
</div>
<div style="background-color: red; display: inline-block;">
<p>Test Text</p>
</div>
You want the second block to behave like a display: block (taking up as much width as possible) while keeping the first block as a display: inline-block.
Thus, in this case, you need a float: left, not display: inline-block.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="background-color: grey; width:16px; float:left">
<p>-</p>
</div>
<div style="background-color: red;">
<p>Test Text</p>
</div>
</body>
</html>
Note: a more modern way of doing this is using display: flex.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="display: flex;">
<div style="background-color: grey; width:16px;">
<p>-</p>
</div>
<div style="background-color: red; flex: 1;">
<p>Test Text</p>
</div>
</div>
</body>
</html>
If you want to keep your element as display: inline-block, you can make use of calculation-driven variables, and set the second div to occupy 100% of the width of the container minus the width of the first element (and margins):
:root {
--left-width: 16px;
}
div:nth-of-type(1) {
display: inline-block;
background-color: grey;
width: var(--left-width);
}
div:nth-of-type(2) {
display: inline-block;
background-color: red;
width: calc(100% - var(--left-width) - 4px);
}
<div>
<p>-</p>
</div>
<div>
<p>Test Text</p>
</div>
Here's what I got. I'm trying to center pandora, rocket league and chess.com in the #header div. Right now they're on the left.
<!DOCTYPE html>
<html>
<head></head>
<body>
<link type="text/css" rel="stylesheet" href="abc.css"/>
<div id="top"></div>
<div id="header">
<div class="hovimg">
<a href="https://www.chess.com">
Chess.com
<span>
<img src="https://tmp-m.org/wp-content/uploads/2015/02/chess.jpg" height="100px" width="180px"/>
</span>
</a>
</div>
<div class="hovimg">
<a href="https://www.pandora.com">
Pandora
<span>
<img src="https://c.slashgear.com/wp-content/uploads/2016/10/pandora-rebrand-980x420.png" height="100px" width="150px"/>
</span>
</a>
</div>
<div class="hovimg">
<a href="steam://rungameid/252950">
Rocket League
<span>
<img src="http://static5.gamespot.com/uploads/screen_kubrick/1551/15511094/2999833-20141023_rocketleague_01.jpg" height="120px" width="200"/>
</span>
</a>
</div>
</div>
<div id="left"></div>
</body>
</html>
I'm a little stuck trying to figure out exactly what you're after, but here's one solution that may be what you're after:
.header:after { /* Clearfix */
content: "";
display: table;
clear: both;
}
.hovimg {
width: calc(100% / 3);
float: left;
}
Note: Has not been tested, so it is possible this may not work, however at least the theory behind this idea should be of use.
I am not sure if that's what you are looking for.
<div id="header" style="text-align:center">
This will center the content of the header division.
If you want to add it to your CSS:
#header{
text-align: center;
}
If you want all content in the center then you can apply text-align: center to #header.
Try this:
.hovimg { text-align: center; }
That's the class of the block elements your a tags, spans and images (which are inline elements by default) are in - it should center them (all together - they are in one line).
I want to put some text on the left of my page, some on the center and some of the right. Like this:
Left Center Right
And I tried with that code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Title</TITLE>
</HEAD>
<BODY>
<div>
<p style = "float:left"> Left </p>
<p style = "float:center; text-align: center;" > Center </p>
<p style = "float:right"> Right </p>
</div>
</BODY>
</HTML>
and it positions the different words correctly but in different lines. I want that the three words will be on the same line.
I also tried changing all paragraphs <p> to <span> and the three words are displayed in the same line but only the words Left and Right are positioned correctly. The word Center it is not displayed on the center, just following the word Left.
I saw that in some cases people do this with a table.
Is it possible to avoid it and get the same behaviour?
Thanks in advance!
JSFIDDLE example
<div>
<p>Left</p>
<p>Center</p>
<p>Right</p>
</div>
div {
display: flex;
justify-content: space-between;
}
P.S. Keep in mind the flexbox support
This will work: JS Fiddle
HTML
<div>
<p class="left-text col">Left Text</p>
<p class="center-text col">Center Text</p>
<p class="right-text col">Right Text</p>
</div>
CSS
.col {
float: left;
width: 33.33333333%;
}
.left-text {
text-align: left;
}
.center-text {
text-align: center;
}
.right-text {
text-align: right;
}
That should help
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<style>
.pos{
width:33%;
display: inline-block;
}
</style>
</HEAD>
<BODY>
<div>
<span class=pos align=left> Left </span>
<span class=pos align=center> Center </span>
<span class=pos align=right> Right </span>
</div>
</BODY>
</HTML>
Quick CSS question that I can't figure out...and am a little surprised that I can't.
I'm trying to create a 2X2 grid of 4 boxes that touch each other with no margin in between; see the image:
However, when I implement the code below, I get a vertical line down the middle that I just can't get rid of.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<style>
#dash-container {
width: 209px;
}
.dash-object {
display: inline-block;
height: 100px;
text-align: center;
vertical-align: middle;
width: 100px;
}
#dash-edit{background:#FF7700;}
#dash-conference{background: #55bbff;}
#dash-upgrade{background: #333333;}
#dash-logo{background: #ffff00;}
</style>
</head>
<div id="dash-container">
<div id="dash-logo" class="dash-object"><span>Logo</span></div>
<div id="dash-conference" class="dash-object">Conference</div>
<div id="dash-edit" class="dash-object">Edit</div>
<div id="dash-upgrade" class="dash-object">Upgrade</div>
</div>
</html>
If you want to play with the html, you can find it here.
Thanks for any pointers.
Inline elements are sensitive to white space. Remove it:
<div id="dash-container">
<div id="dash-logo" class="dash-object"><span>Logo</span></div><div id="dash-conference" class="dash-object">Conference</div>
<div id="dash-edit" class="dash-object">Edit</div><div id="dash-upgrade" class="dash-object">Upgrade</div>
</div>
jsFiddle example
Or by using HTML comment tags:
<div id="dash-container">
<div id="dash-logo" class="dash-object"><span>Logo</span>
</div><!--
--><div id="dash-conference" class="dash-object">Conference</div>
<div id="dash-edit" class="dash-object">Edit</div><!--
--><div id="dash-upgrade" class="dash-object">Upgrade</div>
</div>
jsFiddle example
Or by floating the inner divs:
#dash-container div {
float:left;
}
jsFiddle example
I am confused as to why when I float an object it no longer expands the border of the container it is in. Here is a simple bit of code I start with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Learning CSS</title>
<style>
.content
{
border: #000000 solid 3px;
clear: left;
padding: 1em;
}
.stuff
{
}
</style>
</head>
<body>
<h1>Learning CSS</h1>
<div class="content">
<h2>Page 1</h2>
<p>Text...</p>
<div class="stuff">
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
</div>
</div>
</body>
</html>
This link will display the results of this code
When I change the style of .stuff to:
.stuff
{
float:right;
}
This link shows what I get now
I would appreciate someone explaining why the floating content no longer expands the parent div or is contained in the parent div .content ?
thanks in advance
You'll need to add overflow: hidden; to your container element. Here is a working jsFiddle.
Edit: both overflow: hidden and overflow:auto work in this case.
You need overflow: auto to the parent container, not overflow: hidden.
Elements after the floating element will flow around it.
You can avoid this by using the clear property.
So right after your div having class stuff, add this:
<div style="clear:both"></div>
See your example on jsfiddle here
You need to use the clearfix hack to fix this. Try this code instead:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Learning CSS</title>
<style>
.content
{
border: #000000 solid 3px;
clear: left;
padding: 1em;
zoom: 1;
}
.stuff
{
float: left;
}
.content:before, .content:after
{
content: "";
display: table;
}
.content:after
{
clear: both;
}
</style>
</head>
<body>
<h1>Learning CSS</h1>
<div class="content">
<h2>Page 1</h2>
<p>Text...</p>
<div class="stuff">
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
<p>Text...</p>
</div>
</div>
</body>
</html>
To have a float expand the border of the container it is in you will need to apply what is called a clearfix to the container. There are probably a dozen different ways to do this, so instead of giving you one, I'll refer you to an excellent question whose answers list several: What methods of ‘clearfix’ can I use?