On my site, I was expecting to find the text in the snippet below, centered, on top of the image of the musicians.
<div class="brand">
<h1>Looking for a musician at short notice?</h1>
<div class="line-spacer"></div>
<p><span>We can help</span></p>
</div>
It's currently not displaying. I think it's a z-index issue, but I'm not sure of the solution.
Any ideas?
EDIT
Relevant CSS:
#intro .brand
{
margin-top: 40px;
}
.line-spacer
{
width: 20%;
margin:0 auto;
margin-top: 20px;
margin-bottom: 25px;
border-bottom:1px solid #fff;
}
h1
{
font-size: 36px;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6
{
color: #3a3a3a;
font-weight: 700;
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
}
Remove overflow from #intro
#intro {
overflow-y: hidden;
}
you have issue with both positioning and z-index
As of now it is position below the artists image and not above it, and since it is behind layers of other displays no text can be seen!
Try reducing the top-margin and adding z-index:1
Related
I have a minimal example here: https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ
Containing the following:
.wrapper {
width: 200px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
}
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
The horizontal padding only applies to the very beginning and end of the text where it wraps, but I want it to apply on every line. I'm OK with the border-radius not being at the line-break points of every line, but I need the padding to apply.
If I put padding-top into the .header-text class that applies to both lines, so I'm unclear why the points where lines wrap ignore the horizontal padding options.
Is there a way to do this in CSS?
What you want can be achieve using box-decoration-break and it will even work with border-radius:
.wrapper {
width: 200px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
You should change .header-text display to either block or inline-block
you could try in another way
.header-text {
padding: 0;
word-spacing: 5px;
}
May it will help u out. Increase the width of the .wrapper so the padding will apply.
HTML PAGE
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
CSS Page
.wrapper {
width: 500px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
padding-top:12px;
padding-bottom:12px
}
Hi to all out there familiar with materialize.
I would like to make the divider:
<div class="divider"></div>
Look similar to this:
It is basically the divier with text in the middle.
Does anyone have a solution? If not with material divier even with other html and css would be fine
Thanks
I am a fan of wrapping the text with a div with a fixed height. Then position: relative the text inside the div. See the snippet below.
.wrapper {
background-color: black;
height: 1px;
margin: 32px 0 0;
text-align: center;
}
span {
position: relative;
top: -8px;
padding: 0 15px;
font-weight: 500;
border-radius: 4px;
text-transform: uppercase;
font-size: 1em;
color: #000000;
background: #ffffff;
}
<div class="wrapper">
<span>OR</span>
</div>
I have this problem when I collapse my webpage, the header shrinks instead of staying stretched across the entire page.
In this situation, I really have no idea what code to post along with it. I've tried various ways to fix it and nothing seems to work. Does anyone know what is going on when this happens? Here is my header HTML and CSS:
#header {
background-color: #C67171;
width: 100%;
}
#headtop {
text-align: right;
width: 1000px;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>
That's pretty much it for the styling though, any help is greatly appreciated!
EDIT
Picture explaining the outcome of the code.
This is what the page looks like right now. This is how I want it to look. But for some reason, I keep getting the problem that I have in the picture above when I collapse the page. I don't want to links to stretch to the outside of my page, that does not fix my problem.
Try this Fiddle
#header {
background-color: #C67171;
display:inline-block;
}
#headtop {
text-align: right;
width: 1000px;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>
The problem is when the window is showing greater than 1000px on screen you're page seems to work. When you make it smaller the header will shrink thanks to width: 100%;.
But as we get smaller the div #headtop will stay the same size width: 1000px;. So the header will get smaller but the child element (#headtop) will still be big causing the scrolling you are seeing.
#header {
background-color: #C67171;
width: 100%;
}
#headtop {
text-align: right;
width: 100%;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
}
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>
Here is how you keep the links away from the sides (look at comments for more on that). Give #headertop a max width and then give it a width of 80% or however much you want the gap to have.
JSFIddle Here
I'm quite new on web development. I'm struggling with this question for a while. Now I post my question(s) here.
The souce code is as linked: Source Code
The HTML:
<div id="wrap">
<div id="main" class="clearfix">
<ul class="ranklist" id = "ranklist">
<li class="ranklistitem font-size-0">
<div class="itemnumber divinline"> <span class="helper"></span>1</div>
<div class="userprofile divinline"><img class="profileimg" src=""/></div>
<div class="nameandcredit divinline">
<div class="username">SteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteve</div>
<div class="credit">I'm description</div>
</div>
<div class="ranktitle divinline">Total:</div>
<div class="usercredit divinline">1000</div>
</li>
</ul>
</div>
</div>
The CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
html {
background: #aaaaaa;
}
body {
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
font-family: "PingHei", "Helvetica Neue", "Helvetica", Arial, "Microsoft YaHei";
font-weight: lighter;
}
#wrap {
min-height: 100%;
}
#main {
overflow-y: auto;
padding-bottom: 55px;
}
div, ul, p {
padding: 0px;
margin: 0px;
color: #ffd8d0;
}
.rewarddes
{
margin-top:10px;
display:block;
color:#ffdcc5;
overflow:hidden;
font-size:87.5%;
}
.ranklistitem {
height: 60px;
border-bottom: solid 1px #faa559;
font-size:87.5%;
}
.font-size-0 {
}
.divinline {
display: inline-block;
vertical-align: top;
padding: 0px;
margin: 0px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.itemnumber {
line-height: 60px;
height: 60px;
background:#aa8800;
width: 6%;
text-align: right;
padding-right: 5px;
}
.userprofile {
line-height: 60px;
height: 60px;
width: 14%;
text-align: center;
vertical-align: middle;
background:#228845;
}
.profileimg {
height: 36px;
width: 36px;
vertical-align: middle;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border: solid 2px #fff;
}
.nameandcredit {
height: 60px;
width: 45%;
padding-left: 5px;
background:#342389
}
.username {
height: 55%;
text-align: left;
vertical-align:bottom;
overflow:hidden;
}
.credit {
height: 25%;
font-size: 66.7%;
text-align: left;
overflow:hidden;
color:#fdff6e;
}
.username:before, .credit:after {
content:'';
height:100%;
vertical-align:middle;
display:inline-block;
}
.iconaward {
vertical-align: middle;
height: 20px;
width: 14px;
}
.ranktitle {
line-height: 60px;
height: 60px;
width: 15%;
background:#cd8912;
text-align: right;
padding-right: 0.125em;
}
.usercredit {
line-height: 60px;
height: 60px;
background:#ff0000;
width: 20%;
text-align: right;
padding-right: 0.5em;
}
I have 2 questions based on the linked(or above) code.
The 5 container div's width was set as:
.itemnumber 6%, .userprofile 14%, .nameandcredit 45%, .ranktitle 15%, .usercredit 20%. So in total they are 100%. But as you see, the last one .usercredit is not in the same line and there're margins between each div, which is not what I want.
for the .username, I have set overflow:hidden, but as you see, when there's a large string, the .username was totally disappeared. If there're spaces in the string, it will only hide the overflow part and show the front part. I want to know what's the problem?
I know it's a little bit messed up of a lot code here. But my question is as listed as above. Thanks in advance for any kind suggestion.
For the spacing, you have two problems:
Implicit spaces between inline-block elements, and
Defining widths for elements with padding.
Regarding username overflow, you have one issue:
Default word wrapping behavior is to wrap the whole word to the next line. You need to change that behavior.
Let's take a look at each of them:
Implicit Spaces
The problem is that your divs have a display: inline-block; style. Elements displayed as an inline-block have any white-space between them converted to a single space.
See the "Fighting the Space Between Inline Block Elements" article on CSS Tricks for more information on how to overcome this.
One fix, for instance, is to have the li element that is wrapping the divs to have a 0 font-size, and reset a non-zero font size to its children, e.g. in your CSS:
.font-size-0 {
font-size: 0;
}
.font-size-0 > * {
font-size: 12px;
}
Any of the links outlined in the link above would work; for example, removing spaces and newlines between your closing tag and opening tag would do the same thing, without forcing you to set and reset the font-size.
Widths for elements with padding
In CSS, a width is defined by default for an element to include only its content area (box-sizing: content-box; by default) and not the padding. Set the box-sizing to border-box and you'll be all set.
E.g.
.font-size-0 > div {
box-sizing: border-size;
}
Properly wrapping a single word without spaces
See this StackOverflow answer to see how to address the issue. You will basically need to add this to your .username rule:
.username {
...
word-wrap:break-word;
}
Final Result jsFiddle
Whenever I add a heading to the second div in my header, it move down. I've seen several answers to this problem, but none have worked so far, so this is either different, or I'm doing it wrong.
This is my header
<div id='header' class='full'>
<div id='headerhead' class='full'></div>
<div id='headertext' class='full'><h1>Protocol Grean</h1></div>
<div id='headerbuttons'></div>
</div>
This is the CSS for the four divs
#header {
height: 200px;
background-color: green;
}
#headerhead {
height: 50px;
background-color: darkgreen;
}
#headertext {
padding-left: 50px;
height: 100px;
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
text-transform: uppercase;
background-color: pink;
}
#headerbuttons {
height: 50px;
background-color: blue;
}
What do I need to add to make the HeaderText not float down? Vertical align doesn't seem to do anything for me, and position absolute just make the HeaderButtons go away.
You need to remove the margin from your h1 element:
#headertext h1 {
margin: 0;
}