Is there a way to see more of the underlying logic by which a browser does its layout? I want to see the line height of everything (border does not show line-height). Chrome and FF inspectors only show the box model (content-box, padding, border and margin).
<p>
<span>Top</span>
</p>
<span id="weird-wrapper">
before
<span> hello <a class="tall_link">link 2</a> world! </span>
<span class="bf">Big font</span>
after
</span>
<p>
<span>Bottom</span>
</p>
p {
background-color: purple;
}
.tall_link {
line-height: 40px;
background-color: green;
border: 1px dotted black;
}
.bf {
background-color: red;
font-size: 100px;
line-height: 50px;
padding-top: 20px;
padding-bottom: 10px;
border: 1px solid black;
outline: 1px dashed orange;
}
For example: https://jsfiddle.net/jackquack/1538ownx/12/
What is the line height of the span that says "Big font"?
Related
I'm very new at this, so sorry if my code is a little messy. I'm trying to create a job search page where the results will show a bar like this:
I've kinda got it, except I can't get that divider in between the PREV, 1 to 100, and NEXT. Mine looks like this:
Here's my code:
HTML:
<div class="results">
<a href="https://gregslist--farahgus10.repl.co/">Prev<a/>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/>
<a href="https://gregslist--farahgus10.repl.co/" >Next<a/>
</div>
CSS:
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
padding: 5px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
I've tried making a results class for every link, but then I end up getting one big box and 3 little boxes around each link.
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
display:flex;
}
.results a {
color:#000;
text-decoration:none;
font-family:sans-serif;
}
.a, .c {
flex:1;
padding: 5px 0px;
text-align:center;
}
.b {
flex:2;
padding: 5px 0px;
text-align:center;
border-right:1px solid lightgray;
border-left:1px solid lightgray;
}
<div class="results">
<div class="a"><a href="https://gregslist--farahgus10.repl.co/">< Prev<a/></div>
<div class="b"> <a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/></div>
<div class="c"> <a href="https://gregslist--farahgus10.repl.co/" >Next ><a/></div>
</div>
Maybe put this in very simple table. I think it should be good enough solution for your need.
Something like this JSFiddle
<table>
<tr>
<td>
Prev
</td>
<td>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 17</a>
</td>
<td>
<a href="https://gregslist--farahgus10.repl.co/" >Next</a>
</td>
</tr>
</table>
With CSS with base like this
.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
padding: 5px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid gray;
}
Your case is simple enough, don't no fancy flexbox or anything.
.results {
color: black;
border: 1px solid lightgrey;
/* width: 300px; removed */
display: inline-block; /* Added */
/* padding:5px; moved to the children (<a>) */
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}
/* Added */
a {
display: inline-block;
padding: 5px;
text-decoration: none;
}
/* giving the second child left and right border to mimic dividers */
.results>a:nth-child(2) {
border-right: 1px solid lightgrey;
border-left: 1px solid lightgrey;
}
<div class="results">
Prev
1 to 100 of 179
Next
</div>
Your closing tags on the <a> links are wrong. They should look like </a> with the slash before the a. Once you update those, you can place the <a> links into individual divs:
HTML:
<div id="container">
<div>Prev</div>
<div>1 to 100 of 179</div>
<div>Next</div>
</div>
CSS:
div {
float: left;
}
#container {
border: 1px solid lightgrey;
}
#container div {
padding: 8px 24px;
border-right: 1px solid lightgrey;
}
#container div:last-child {
border-right: none;
}
There are many factors that are needed:
Your elements were badly closed
You need to be more specific to what elements you should apply the CSS
These are just the most notable, you need more CSS information. Much success.
.results {
display: flex;
width: 100%;
padding: 5px;
}
.results a {
max-width: 300px;
min-width: 150px;
color: black;
text-decoration: none;
border: 1px solid lightgrey;
padding: 8px;
text-align: center;
}
<div class="results">
Prev
<a href="#" >1 to 100 of 179</a>
<a href="#" >Next</a>
</div>
<div class="results">
<a href="https://gregslist--farahgus10.repl.co/">Prev<a/>
<a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/>
<a href="https://gregslist--farahgus10.repl.co/" >Next<a/>
</div>
I want to align a <span> element and the <input> text element. The height of <input> and <span> should be the same, the top and bottom border should be on same line and the text inside the <input> and <span> elements should be on the same line.
.cnt {
margin: 5px;
}
.one {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
.two {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
.in {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
input {
padding: 0;
}
<div class="cnt">
<label>
<span class="one">Test in Span</span>
<span class="two">Span in test</span>
</label>
<input class="in" value="mmmnnnxx" type="text" />
</div>
https://jsfiddle.net/ajo4boom/
How to do what I want?
I've found success by using an external stylesheet such as normalize.css. They're very useful for making sure your tags stay aligned across all browsers.
Another solution would be to do the following:
.cnt {
margin: 5px;
}
.one {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
.two {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
.in {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
}
input {
position: relative;
top: -1px;
padding: 0;
}
<div class="cnt">
<label>
<span class="one">Test in Span</span>
<span class="two">Span in test</span>
</label>
<input class="in" value="mmmnnnxx" type="text" />
</div>
Simply offset the <input> by adding
input {
position: relative;
top: -1px;
}
More info on relative positioning in CSS.
Just add vertical-align to input.
Check: https://jsfiddle.net/ajo4boom/1/
You can use your browser toolkit or the mozilla extention : firebug, to help yourself finding the origin of the problem. You would see that only input was really 17px height. Spans were, in the browser reality, 19px height.
So defining your span height to 19px would also roughtly work.
Many of the native properties of inputs will be different from those of spans. First up, you might also like to normalise border, font-family, font-size, line-height and padding.
To take advantage of the height property, define display: inline-block on both elements. Also, box-sizing: content-box will ensure they have the same box-sizing, meaning the way padding and borders will affect their height and width.
.one, .two, .in {
box-sizing: content-box;
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
display: inline-block;
font-family: sans-serif;
font-size: 16px;
line-height: 18px;
padding: 2px;
}
<div class="cnt">
<label>
<span class="one">Test in Span</span>
<span class="two">Span in test</span>
</label>
<input class="in" value="mmmnnnxx" type="text" />
</div>
Here's a possible solution using display: inline-block;, line-height and vertical-align, but it's like #Leeish commented:
Height's are tough with inputs because browsers all like to do their
own thing
.cnt {
margin: 5px;
}
label {
display: inline-block;
}
input {
padding: 0;
}
.one, .two, .in {
background-color: #ffffff;
border: solid 1px #ADADAD;
height: 17px;
display: inline-block;
line-height: 17px;
vertical-align: top;
}
<div class="cnt">
<label>
<span class="one">Test in Span</span>
<span class="two">Span in test</span>
</label>
<input class="in" value="mmmnnnxx" type="text" />
</div>
Here is that example:
http://codepen.io/anon/pen/bVBNOE
.form-element__field-container {
#include display(flex);
max-width: 200px;
}
input {
border: 1px solid black;
border-left: none;
border-right: none;
padding: 10px;
}
.form-element__input-prepend {
border: 1px solid black;
border-right: none;
padding-left: 10px;
}
.form-element__input-append {
border: 1px solid black;
border-left: none;
padding-right: 10px;
}
<div class="form-element__field-container" >
<span class="form-element__input-prepend">
<span>$</span>
</span>
<input class="form-element__input-container form-element__input m-text m-has-prepend m-has-append" placeholder="???" value="23.43" type="text">
<span class="form-element__input-append">
<span>this is long</span>
</span>
</div>
In chrome, all the elements are contained with in the 200px width that is defined for the root element however in Firefox, the elements in the root element equal to 224px and overflow the root element's 200px width. The biggest difference is that in FireFox the input element is 149px width but in Chrome it is 117px.
Anyone know what would be causing this issue?
I am working on a Google site for a school project. However, the site looks like
instead of
I did not add the extra stuff, Google sites added it for me. Is there any way to get rid of it?
.titlebox {
display: block;
margin: 10px;
padding: 50px;
background-color: yellow;
border-radius: 10px;
border: 2px solid black;
text-align: center;
}
.map {
margin: 10px;
display: inline;
float: left;
padding: 20px;
background-color: green;
border-radius: 10px;
border: 2px solid black;
}
.content {
margin: 10px;
display: inline;
float: right;
padding: 20px;
background-color: orange;
border-radius: 10px;
border: 2px solid black;
}
a div {
color: black;
text-decoration: none;
padding: 5px;
border-radius: 10px;
border: 2px;
}
a:hover div {
color: orange;
text-decoration: none;
padding: 5px;
border-radius: 10px;
border: 2px;
background-color: blue;
}
<div class="titlebox">
<h1>GMO DEBATE</h1>
</div>
<div class="map">
<div text-align="center">
<h3>pages:</h3>
</div>
<ul>
<li>
<a href="pro">
<div>why GMOs should be labeled</div>
</a>
</li>
<li>
<a href="con">
<div>why GMOs shouldn't be labeled</div>
</a>
</li>
<li>
<a href="info">
<div>background information</div>
</a>
</li>
</ul>
</div>
<div class="content">
<h3>Should GMOs be labeled?</h3>
</div>
That is in a code box, although I don't think it matters since the extra stuff was there before I even added anything. Adding a width to the elements does not help.
As you said its code box in code box you can display your content only in limited area you will be allotted only some give space 75% or 70% of page display area.
If you need Your website on full page like as you want find a free host site like http://www.000webhost.com and host you web pages you can do what ever you want
HTML
<div class="wrapper">
<a href="#">
Link-1
<span class="sub-list hidden">
SubLink-1
SubLink-2
SubLink-3
</span>
</a>
Link-2
Link-3
</div>
CSS
.wrapper {
border-bottom: 1px solid #dfdfdf;
padding-bottom: 5px;
padding-right: 50px;
height: 25px;
}
.wrapper > a {
font-size: 13px;
font-weight: bold;
padding: 5px 6px;
border: 1px solid #ffffff;
border-bottom: none;
float: right;
display: block;
}
.sub-list {
background-color:#ffffff;
width: 251px;
height: 40px;
border-right: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
padding: 10px 10px 0 0;
text-align: right;
}
http://jsfiddle.net/6vAQF/1/
I want to create a menu and submenu. But when I place submenu under the a tag with a span wrapper, dom treeview appears corrupted as below image;
Why is that?
You're nesting links within a link, which is forbidden:
Links and anchors defined by the A element must not be nested; an A
element must not contain any other A elements.
http://www.w3.org/TR/html401/struct/links.html#h-12.2.2
Creating anchor tag inside anchor tag