I'm trying to make two divs, each containing a title and a list, next to each other. However, if one list is smaller than the other, then the div with the smaller list is lower on the web page:
This is the code for the divs:
<div id='classes' class="profileList">
<h2 class="title">Classes</h2>
<ul>
<li>Soldier</li>
<li>Sniper</li>
<li>Spy</li>
</ul>
</div><div id="divisions" class="profileList">
<h2 class="title">Divisions</h2>
<ul>
<li>Steel</li>
<li>Silver</li>
</ul>
</div>
(The end of the left one and the start of the right one are right next to each other because otherwise 50% div width does not put the divs next to each other)
This is the CSS:
.title {
position: relative;
text-align: center;
padding-top: 0;
margin-top: 0;
text-shadow: #FAD2AF 0 0 6px;
}
.profileList {
display: inline-block;
width: 50%;
}
Why are these div tops at different heights when the elements aren't equal? And how do I fix it?
change .profileList to this:
.profileList {
display: inline-block;
width: 50%;
vertical-align:top;
}
when you use inline-block, you need to give it the desired vertical align, since the default is baseline
Related
I need to fix a problem on an existing web page, I need to center elements that have float : left; inside one big <div>. I don't want to remove the floating, and I'm wondering what is the best way to center those elements and make them on two rows.
.big {
width: 150px;
height: 150px;
background: gold;
}
.a {
margin: 5px;
width: 50px;
height: 20px;
text-align: center;
float: left;
background-color: red;
}
<div class="big">
<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
</div>
Floating makes this weird. Otherwise
.big{
width:150px;
height: 150px;
background: gold;
text-align: center;
}
.a{
display: inline-block;
margin: 5px auto;
width:50px;
height:20px;
text-align: center;
background-color:red;
}
<div class="big">
<div class="a">1
</div>
<div class="a">2
</div>
<div class="a">3
</div>
<div class="a">4
</div>
</div>
You may use flexbox.
.big{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background: gold;
width: 150px;
height: 150px;
}
.a {
flex: 0 0 35%;
margin: 5px;
width: 50px;
height: 20px;
text-align: center;
float: left;
background-color: red;
}
<div class="big">
<div class="a">1
</div>
<div class="a">2
</div>
<div class="a">3
</div>
<div class="a">4
</div>
</div>
I do not believe there is a point in floating if you do have no intention of wanting to float to the top and to the left. You need to master the use of both position and display properties. This I believe is what you are looking for. I have put explanations underneath explaining what the relevant display and position properties, as well as why I used what I did.
.big {
width: 150px;
height: 150px;
background: gold;
}
.a {
position: relative;
left: 12px;
display:inline-block;
margin: 5px;
width: 50px;
height: 20px;
text-align: center;
background-color: red;
}
Positioning is how the element is positioned in the document. The options in CSS are either static, relative, absolute, fixed.
Static: This is the browser default. It is not affected by positioning, and will just be positioned in the natural flow of the page.
Relative: Will cause element to be positioned relative to it's initial position. (i.e.: if the element is positioned at X (initial position), then will be moved depending on what properties put in)
Absolute: Will cause element to be positioned relative to next parent element. An important thing to note about this is that elements are removed from the flow of the page meaning that it is possible to have multiple elements stack on top of one another.
Fixed: Will cause element to be fixed relative to the browser window, commonly known as viewport itself. If you scroll down, the position will be fixed, hence the name.
Display
This is how the browser will treat the type of "box"/element that is used (all elements can be considered boxes, as per the box model).If you have trouble grasping the concept, put element {border: solid black} into all your css elements and you'll see what I mean.
There are multiple displays will only get into the 3 of the arguably most important ones: block, inline, inline-block.
Block: element will take up the maximum amount of horizontal space necessary. Think of the li as an example. The list point will take up the maximum amount of horizontal space, and thus each separate li can be considered a block.
Inline: element will take up the minimum amount of horizontal, and vertical space necessary to fit within the flow. Think of the anchor a tag, as it will take up the minimum amount of space necessary to fit within the flow of a paragraph.
Inline-block: Considered an inline value but with the ability to change the width and height of the element.
For your example, I have used the relative positioning element (positioned it right 12px relative to where it originally was) and changed the display to be inline-block, as divs are naturally block elements and thus, without the inline-block display feature, they would have only stacked 1 at a time.
This is the html code:
<div class="produto_title">
<h2 th:text="${produto.name}"></h2>
Baixar
Comprar <span th:text="${produto.preco}"></span>
</div>
Could anyone give me a hint how to place the three items inside .produto_title in a same line (h2 floating at left and the two a floating at right).
Also, h2 has a border around item and the a is displayed like a button; I want add a line behind crossing all the "line" formed by this three elements, like this:
jsfiddle: https://jsfiddle.net/klebermo/sf7a6fnj/5/
ps.: also, how let the content of tag <span> inside the button, like the text?
An hr is a block element that's essentially just a line with a border.
I'd recommend sticking one of those at the top of the container and giving it a negative margin that vertically centers it in the parent. position: absolute is more trouble than it's worth.
https://jsfiddle.net/JackHasaKeyboard/0juqg4j7/
As for aligning the elements to the left and the right, I'll let you figure that out. There's many ways to accomplish it, the simplest way being with float.
I would look at twitter's bootstrap, specifically the row and col components.
You could do
<div class="row">
<div class="col-md-4">
// something here
</div>
<div class="col-md-4">
// something here
</div>
<div class="col-md-4">
// something here
</div>
</div>
This will all be displayed on the same line, splitting the row into equal thirds
btns{
height: auto; //Fix the span not being in the element
margin-top: 20px; //line everything up with the top of the heading element.
}
As for the line you can make a div and give it a absolute position (remember to give parent a relative position) and then position it accordingly.
.parent{
position: relative;
width: 100%;
}
.line{
height: 4px;
background-color: #000;
position: absolute;
z-index: -1;
top: 50%;
width: 100%;
}
This is a very bare-bones answer but it will be a start for you to go off.
For the first question, you can do that easily by manipulating margin or vertical-align properties. For example, if you put margin: 30px 5px; on your btn elements, it would be on the same line-ish.
Secondly, the <span> problem: if you set fixed width: 60px; of element (in your case .btn_comprar), text would either overflow from button to the right or bottom. Try setting width: 90px; or more on button elements, or height: auto; if you need it to be fixed.
Updated fiddle
First of all, you can't set a fixed width on a button if you want the text to not wrap. I recommend leaving the buttons at a width: auto and using padding to control the spacing around the text. I'd also bundle the styles for both button selectors, as they're exactly the same
Secondly, the only way (I know of) to get items to vertically align while they're float: right is by manually pushing them down, so I recommend making your buttons position: relative and setting a top: 25px;
/* Bundled both buttons together as they share the same styles */
.btn_free,
.btn_comprar {
float: right;
/* width: 60px; Removing this to allow the text to set the button width */
/* height: 20px; Removing this to let the line-height set the button height */
background: silver;
border-radius: 5px;
padding: 1px 15px;
box-shadow: 1px 1px 1px #000;
/* display: block; Removing this as floats are automatically display: block; */
/* text-align: center; Removing this since the text is already setting width */
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
font-family: arial;
font-size: 12px;
line-height:20px;
position: relative; /* Pushing buttons down a bit */
top: 25px;
margin: 0 10px; /* Spacing buttons out */
}
.btn_free:hover,
.btn_comprar:hover{
background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}
Thirdly, remember to use a clearfix so the .produto_title container maintains height!
.produto_title:after {
content: "";
display: table;
clear: both;
}
Lastly, rather than using another div to make the line, I'd use the :before psuedo-element on .produto-title (can't use :after if you're also doing a clearfix).
.produto_title:before {
content: '';
height: 1px;
background: #000;
width: 100%;
position: absolute;
left: 0;
top: 50%;
display: block;
}
Here's a working demo:
https://jsfiddle.net/zcqLbg4h/1/
I have this html:
<div class="container">
<div id="sidebar">
<ul>Create Offer</ul>
<ul>Accept Offer</ul>
<ul>Pending</ul>
<ul>Completed</ul>
<ul>Balance</ul>
<ul>Support</ul>
</div>
<div id="items">
Text
</div>
</div>
this is the css:
.container {
margin: 0 auto;
background-color: white;
border: 1px solid black;
width: 1000px;
}
#sidebar {
margin-top: 0px;
padding-top: 0px;
width: 18%;
background-color: #E3E3E3;
height: 100%;
}
.container #items {
width: 82%;
float: right;
background-color: red;
}
output: http://puu.sh/l719c/52f182e1d2.png
why wont the items div show within the container in the white space next to the sidebar?
thanks.
When you float an element, it moves to the side and lets content that follows it move up beside it.
That means the content that follows items (if there was any) would be next to it.
You've done nothing to let items move up beside sidebar.
You need to float sidebar left and not items right.
Also beware of horizontal margins/padding making the total width of the elements add up to more than 100%.
Also note that floated elements do not restrict the height of their container unless you do something about it.
I'd generally look to flexbox for aligning blocks on a row, rather than floats.
You have just missed one line. The float for the sidebar must be set so that other elements can use the empty space. Change your css for #sidebar as follows.
#sidebar {
float: left;
margin-top: 0px;
padding-top: 0px;
width: 18%;
background-color: #E3E3E3;
height: 100%;
}
I'm assuming you want your sidebar set to float:left;. So you can position the "items" right next to the "sidebar" div.
I am trying to create a header for my website, however I am trying to figure out the best to way align it.
The header is something along the lines of "Welcome to SHEP at the University of XXXX". However, I am trying to make the sentence be centered around the word "SHEP". In other words, I'm trying to make the "SHEP" portion of the sentence be dead-center on the page.
I've tried a few methods such as <h1>Welcome to <span> SHEP </span> at the University of XXX</h1> and setting the span to align center, however I can't quite get it working.
I'm looking to achieve the look as displayed in #1, not #2:
HTML:
<div class="container">
<h1>
<span>Welcome to</span>
SHEP
<span>at the University of XXX</span>
</h1>
</div>
CSS:
.container {
display: block;
text-align: center;
}
h1 {
position: relative;
display: inline-block;
text-align: center;
}
span {
position: absolute;
top: 0;
white-space: nowrap;
}
span:nth-of-type(1) { right: 100%; }
span:nth-of-type(2) { left: 100%; }
See Fiddle
Use display:table for a wrapper div and then display:table-cell for the child elements. They'll take up the width of the wrapper evenly. So, your markup would be something like this:
HTML
<div id="nav-wrap">
<div id="nav-left">
<p>Welcome to</p>
</div>
<div id="nav-center">
<p>SHEP</p>
</div>
<div id="nav-right">
<p>at the University of XXX</p>
</div>
</div>
CSS
#nav-wrap {
display:table;
width:100%;
}
#nav-wrap > div {
display:table-cell;
text-align:center;
border:1px solid black; /* here to show how the cells are aligned */
width:33%;
}
Of course, you would style your text within each child div accordingly.
http://codepen.io/bbennett/pen/zxKZLb
Create space with in the span using padding and it will give the appearance that the text is centered:
span{
padding: 0 10px;
}
You could use margin, for instance:
span {
margin: 25%;
}
http://jsfiddle.net/yjw0t27r/1/
you can use pseudo element :before and :after and position it using absolute now h1 is aligned from the Shep word
div {
text-align: center
}
h1 {
display: inline-block;
position: relative;
border: 1px solid red;
}
h1:before {
content: 'Welcome to ';
position: absolute;
right: 50px;
width: 238px;
}
h1:after {
content: ' at the University of XXXX';
position: absolute;
left: 50px;
width: 434px;
}
<div>
<h1>SHEP</h1>
</div>
Your best option is to give the header tag the following:
h1{
display: inline-block;
position: relative;
left: 50%;
margin-left: -120px;
}
Margin-left should be set to whatever the width of the first half of the header is. So, if 'Welcome to SH' is 120 pixels wide, then put that as the negative margin left. Essentially, you're pushing the header 50% away from the left side, then moving it back however many pixels using 'margin-left'.
codepen here: http://codepen.io/anon/pen/KwgWQo
I assume you only want to center horizontally.
My solution utilizes flexbox with justify-content: center to align the items centered within the container. The items are the three components of the headline: text before, "the word", text after.
HTML:
<h1 class="word-centered"><span>Welcome to the great </span><span>Stackoverflow</span><span> universitiy</span></h1>
The headline is split into its three parts, the centered word in the second span.
CSS:
/* make the items flex (in a row by default); center the items in the container */
.word-centered {
display: flex;
justify-content: center;
}
/* make the left and right part use all remaining space; padding to space the words */
.word-centered span:nth-child(1), .word-centered span:nth-child(3) {
flex: 1;
margin: 0 5px;
}
/* since the first span uses all space between the middle item and the left edge, align the text right */
.word-centered span:nth-child(1) {
text-align: right;
}
Demo: http://jsbin.com/foduvuvoxa/1
This works in FF 34 and Chrome 39 out of box, requires vendor prefixes for IE 10/11.
I'm aiming to move through list items, fading one out as the other fades in. I need all three of these list items to display on the same line, on top of each other. Should work with images of varying widths, the only common attribute may be the top position, relative to the div it is in.
Link
.container {
display:table;
margin: 0 auto;
}
ul {
list-style-type:none;
}
To explain a little better, I need these items, whether it's text, images, divs of varying sizes to be in the middle of the screen, perfectly centered.
This is achievable with a javascript solution, by measuring the size of the element contained and subtracting the middle offset from the left side of the image.
What I'd like to achieve is a CSS3/HTML5 only option to this similar effect.
I hope I understand your question: Simply using position property value of absolute, will stack them on each other. Try this:
* {
margin: 0 auto;
}
.container {
width: 300px;
position: relative;
margin-top: 70px;
}
ul {
list-style-type:none;
}
ul li {
position: absolute;
height: 25px;
background-color: red;
color: white;
padding: 10px;
display: block;
text-align: center;
width: 100%;
}
<div class="container">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
Note: You can use z-index to alter the order of the stack of the element.