How do you make the contents of a 100% width span not wrap when the text is more than 100% of parent? I have monkeyed around with whitespace: nowrap; with no luck.
PROBLEM: span.firstname, span.lastname, span.email all wrap text when their contents are longer than div.name, div.personal, or div.account_view. I would like the 3 spans to go for however long their content is (no wrap).
HTML:
<div class="account_view">
<div class="personal">
<div class="picture">
<img src="example.png" />
<span>Image caption</span>
</div>
<div class="name">
<span class="first">Firstname</span>
<span class="last">Lastname</span>
<span class="email">email#email.com</span>
</div>
</div>
</div>
CSS:
div.account_view {
display: block;
height: auto;
width: 700px;
padding: 40px;
margin: 0 auto;
border: 0;
}
div.account_view div.personal {
margin: 0 auto;
clear: both;
overflow: hidden;
white-space: nowrap;
}
div.account_view div.personal div.picture {
float: left;
display: block;
width: 200px;
height: 200px;
border: 1px solid #aaa;
margin: 0 10px 0 0;
}
div.account_view div.personal div.picture img {
display: block;
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
}
div.account_view div.personal div.picture span {
display: block;
font-size: inherit;
text-align: center;
margin: 0;
position: relative;
top: -27px;
padding: 5px;
background-color: rgba(0,0,0,.4);
color: #eee;
}
div.account_view div.personal div.name {
float: left;
position: relative;
top: -25px;
}
div.account_view div.personal div.name > * {
display: block;
font-weight: 300;
white-space: normal;
}
div.account_view div.personal div.name span.first {
font-size: 125px;
font-weight: 700;
}
div.account_view div.personal div.name span.last {
position: relative;
top: -9px;
left: 5px;
font-size: 56px;
}
div.account_view div.personal div.name span.email {
font-size: 29px;
position: relative;
left: 8px;
}
GOAL: (hover over)
Add to the span's CSS
white-space: nowrap
Additionally you can use
text-overflow: ellipsis
to get a nice "..." When the text is cutoff
Give the span(s) a display: block or display: inline-block and set overflow: hidden.
Related
I am using React and I am trying to have an overlay over each grid item in a grid. But, what all I try, the overlay seems to come below each grid item and not over the grid item. Even if I use the position: absolute it is not working !
Here's the code I am using for the grid (React):
<div className="home__itemSection">
<div className="item">
<div className="item__container">
<div className="container__imageDiv">
<img
src={""}
alt=""
/>
</div>
<div className="container__detailSection">
<p>{""}</p>
<h6>{""}</h6>
</div>
</div>
<div className="item__overlay">
<h1>{""}</h1>
<h1>{""}</h1>
</div>
</div>
</div>
css:
.home__itemSection {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin: 30px 170px 0 170px;
transition: ease all 0.5s;
}
.item {
background-color: #f1f1f1;
height: 350px;
width: 212px;
margin: 0 3rem 1rem 3rem;
height: fit-content;
font-family: "Poppins", sans-serif;
display: flex;
align-items: flex-start;
}
.container__imageDiv {
height: 318px;
width: 212px;
}
.container__imageDiv > img {
height: 318px;
width: 212px;
}
.container__detailSection {
height: 44px;
width: 212px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 5px;
}
.container__detailSection > p {
color: black;
font-size: 13px;
font-weight: 300;
line-height: initial;
}
.container__detailSection > h6 {
padding-left: 1.8rem;
font-weight: 500;
font-size: 1rem;
}
.item__overlay {
height: 252px;
width: 212px;
background-color: black;
}
Any help is greatly appreciated !
Thank You !
Please add position: relative; on item(parent tag of overlay)
.item{
position: relative;
}
.item .item__overlay{
position: absolute;
left: 0;
top: 0;
}
An element with position absolute is relative to the next parent element with relative (or absolute) positioning.
Add position relative to home__itemSection. Also use height and with to cover all the container:
.home__itemSection {
...
position: relative;
}
.item__overlay {
...
position: absolute;
height: 100%;
width: 100%;
}
My nav bar (which is at the top of the page) and header (below nav, which has a large image and a text on top of it), have a very small gap between them that I want to remove. I've visited a number of posts on similar problems, and tried their solutions, but can't seem to work for me, including: display: block; margin: 0; e.t.c.
I guess it has something to do with a style I have applied on either the header's content or the nav's content.
body {
margin: 0px;
padding: 0px;
background-color: #f2f2f2;
}
html {
margin: 0px;
padding: 0px;
}
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
border: 1px solid #e7e7e7;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
nav {
margin-bottom: 0;
}
header {
margin-top: 0;
margin-bottom: 10px;
width: 100%;
font-family: arial;
font-size: 18px;
color: orange;
}
h1 {
position: absolute;
top: 150px;
width: 100%;
z-index: 1;
text-align: center;
}
#bannerImage {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
<nav>
<ul>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/>
<li>Game 2</li><li>Game 3</li>
</ul>
</nav>
<header>
<img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png"/>
<h1>Games</h1>
</header>
Just define the height of nav
body {
margin: 0px;
padding: 0px;
background-color: #f2f2f2;
}
html {
margin: 0px;
padding: 0px;
}
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
overflow: hidden!important;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
border: 1px solid #e7e7e7;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
nav {
margin-bottom: 0;
height: 51px;
}
header {
margin-top: 0;
margin-bottom: 10px;
width: 100%;
font-family: arial;
font-size: 18px;
color: orange;
}
h1 {
position: absolute;
top: 150px;
width: 100%;
z-index: 1;
text-align: center;
}
#bannerImage {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
<nav>
<ul>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/>
<li>Game 2</li><li>Game 3</li>
</ul>
</nav>
<header>
<img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png"/>
<h1>Games</h1>
</header>
The problem is caused by your ul having overflow:hidden so just remove it.
Added box-sizing:border-box to avoid horizontal scrollbar
UPDATE
I noticed that you have an img as child of ul which makes that invalid HTML.
So I tweaked your code to make it valid.
*,
*::before,
*::after {
box-sizing: border-box
}
body,
html {
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
#logo {
height: 50px;
width: auto;
display: inline-block;
vertical-align:top
}
nav {
margin-bottom: 0;
background-color: #1a1a1a;
border: 1px solid #e7e7e7;
}
nav ul {
list-style-type: none;
width: calc(100% - 60px);
margin:0;
padding: 0;
text-align: center;
display: inline-block;
vertical-align: top;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
header {
margin-top: 0;
margin-bottom: 10px;
width: 100%;
font-family: arial;
font-size: 18px;
color: orange;
}
h1 {
position: absolute;
top: 150px;
width: 100%;
z-index: 1;
text-align: center;
}
#bannerImage {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
<nav>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif" />
<ul>
<li>Game 1
</li>
<li>Game 2
</li>
<li>Game 3
</li>
</ul>
</nav>
<header>
<img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png" />
<h1>Games</h1>
</header>
Try setting the height of the nav:
nav {
height: 50px;
}
Tried it out and works even without the margin set to 0.
I am trying to achieve similiar effect to this:
The header and its subheader are both vertically aligned to the image.
I've written following code:
http://jsfiddle.net/u4zxn4eb/
It works but is it the best way to achieve this?
<div class="wrapper">
<h1>
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/sachagreif/128.jpg" alt="">
<div class="vertical_align">
Your company's name
<p>Description</p>
</div>
</h1>
</div>
CSS:
body {
background: lightgrey;
}
.wrapper {
background: grey;
width: 100%;
}
h1 {
font-size: 18px;
margin: 0;
position: relative;
top: 35px;
}
.vertical_align {
display: inline-block;
vertical-align: middle;
}
img {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
p {
margin: 0;
}
EDIT
As #chrisbedoya suggested I shouldn't put div inside h1 tag.
Deleted.
Instead of using h1 tag to position the whole, it's better to apply these rules separately:
.vertical_align a,
.vertical_align p {
position: relative;
top: 40px;
}
Well, define "best". If your method is standards compliant and works in all browsers then use it. If you're interested, here's how I'd do it:
<style>
#header {
height: 100px;
margin: 0px;
padding: 0px;
width: 500px;
}
#rectangle {
background-color: #f0f0f0;
height: 80px;
margin: 0px;
padding: 0px;
position: absolute;
left: 0px;
top: 0px;
width: 500px;
z-index: 1;
}
#square {
background-color: #ff0000;
height: 80px;
margin: 0px;
padding: 0px;
position: absolute;
left: 20px;
top: 20px;
width: 80px;
z-index: 2;
}
#text {
/* background-color: #00ff00; */
margin: 0px;
padding: 0px;
position: absolute;
left: 120px;
top: 41px;
width: 360px;
z-index: 2;
}
h1 {
font-family: Arial;
font-size: 20px;
line-height: 20px;
margin: 0px;
padding: 0px;
}
p {
font-family: Arial;
font-size: 12px;
line-height: 12px;
margin: 5px 0px 0px 0px;
padding: 0px;
}
</style>
<div id="header">
<div id="rectangle"></div>
<div id="square"></div>
<div id="text">
<h1>Company Name</h1>
<p>Company Tagline</p>
</div>
</div>
Well, this question is way too subjective and better suited for CodeReview. But I thought I'd give you my input.
First, let's clean up the HTML. Get some HTML5 in there as well.
<div class="wrapper">
<header>
<a href="#" class="logo-link">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/sachagreif/128.jpg" alt="">
</a>
<div class="vertical_align">
<h1>Your company's name</h1>
<h2>Description</h2>
</div>
</header>
</div>
Then make the CSS nice and tidy. We don't need much:
.logo-link {
display: inline-block;
position: relative;
top: 24px;
margin: 0 24px;
}
.logo-link img {
display: block;
}
.vertical_align {
display: inline-block;
vertical-align: top;
}
Here's an example.
I would use a position: relative property to align the image slightly below the header like you have in your image there.
Nothing I can find or have tried is working so I hope someone can tell me where I am going wrong. I have a table-like HTML structure with div rows containing only span cells. These in turn can contain either a single span or two rows of spans. Unfortunately, for some reason I've been wrestling with on and off for weeks, the single span cells do not align with the double-row cells.
The minimal HTML is:
<div id="box">
<div id="rowA" class="row">
<span class="container">
<span class="top">A</span>
<span class="bottom">B</span>
</span>
<span class="container">
<span class="single">C</span>
</span>
</div>
<div id="rowB" class="row">
<span class="container">
<span class="top">D</span>
<span class="bottom">E</span>
</span>
<span class="container">
<span class="single">F</span>
</span>
</div>
</div>
with CSS,
body {
font-size: 16px;
}
div#box {
width: 716px;
height: 255px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
div.row {
width: 712px;
height: 47px;
padding: 1px;
padding-left: 4px;
margin-left: auto;
margin-right: auto;}
span.container {
display: inline-block;
width: 40px;
height: 40px;
margin-top: 2px;
padding: 1px;
border: 1px solid black;
border-radius: 4px;}
span.top, span.bottom {
display: inline-block;
width: 100%;
height: 50%;
line-height: 20px;
vertical-align: middle;
}
span.single {
display: inline-block;
width: 100%;
height: 100%;
line-height: 40px;
vertical-align: middle;
text-align: center;
}
The double row cells (e.g. <span class="container"><span class="top">D</span><span class="bottom">E</span></span>) display correctly, the single row cells are shifted downwards for some reason. I know that I can use positioning to correct for the problem but I'd like to understand where I am going wrong. It's tested on Chrome and Firefox and alas their inspectors leave me none the wiser.
All contributions very gratefully received!
body {
font-size: 16px;
}
div#box {
width: 716px;
height: 255px;
margin: 10px auto;
}
div.row {
width: 712px;
height: 47px;
padding: 1px;
padding-left: 4px;
margin-left: auto;
margin-right: auto;
}
span.container {
vertical-align:top; /* ADD JUST THIS LINE */
display: inline-block;
width: 40px;
height: 40px;
margin-top: 2px;
padding: 1px;
border: 1px solid black;
border-radius: 4px;
}
span.top, span.bottom {
display: inline-block;
width: 100%;
height: 50%;
line-height: 20px;
vertical-align: middle;
}
span.single {
display: inline-block;
width: 100%;
height: 100%;
line-height: 40px;
vertical-align: middle;
text-align: center;
}
I am trying to center an image within a div and I used the display:table & display: table-cell method. It is centered but it is off by a few pixels from the top. What can I do to correct this?
CSS
html, body {
width: 100%;
height: 100%;
}
body,html {
margin: 0;
padding: 0;
color:#ffffff;
text-align: center;
}
#wrapper{
text-align: left;
width: 940px;
margin: 0 auto;
margin-top: 22px;
background-color: #ffffff;
overflow: hidden;
}
header {
width: 908px;
height: 76px;
display: table;
border-style:solid;
border-top-width: 16px;
border-bottom-width: 16px;
border-top-color: #ffffff;
background-color: #cccccc;
}
#headerdiv { display: table-cell; vertical-align: middle; margin: 0; height: 28px; }
HTML
<div id="wrapper">
<header>
<div id="headerdiv"><img src="logotest.gif" height="28" width="180" alt="test"></div>
</header>
</div>
Add
img {
vertical-align:middle;
}
jsFiddle example