I am trying to work with markup that someone else has created. My problem is that I have set the width of a parent container for use on other elements, but want to over-ride this on one specific child container that I can target using .ticket13 .text b and set it to 400px. However this doesn't work.
If you check out this jsfiddle you can see the problem. How can I get .ticket13 .text bto be 400px wide without changing the markup?
<div class="left-container">
<div class="ticket13">
<p class="text">
<b> I want this container to be 400px wide </b>
</p>
</div>
</div>
.ticket13 .text b { width: 400px !important; }
p.text {
display: inline;
margin: 5px;
padding: 0;
}
P.text {
font-size: 1em;
font-style: normal;
margin: 0;
padding: 0.3em 0.3em 0;
text-align: left;
text-indent: 0;
width: auto;
}
.ticket13 {
display: inline;
float: left;
width: 186px;
}
.ticket13 {
border: medium none;
float: left;
margin: 0;
padding: 0;
}
.left-container {
background-color: red;
float: left;
text-align: left;
width: 60%;
}
You'd have to make the b a block level element, by either setting it's display to block or inline-block.
Put the markup for the child BELOW the markup for the parent. You shouldn't even need to use !important
Try use that:
.ticket13 .text b {
width: 400px !important;
display: inline-block;
}
To do that you have 2 solutions:
.ticket13 .text b {
width: 400px!important;
display: block;
}
or
.ticket13 .text b {
width: 400px!important;
float: left;
}
Related
the contact form i have on my front page that im making, has some CSS on it so its all centred, fits inside the white box it creates etc, yet one of the fields doesn't seem to fit inside the white box but everything else does, heres the site.
https://www.traveltradewinds.com/ttw/
When i change the CSS to try and fix it, i noticed that the width being set to 110% fits it in, but then isn't in the centre of the screen as a result, on a side note, the checkbox isn't the default input type checkbox it has a style to it that i haven't added, can anyone help me to show whats going wrong as it looks like ti should work to me?
Many thanks
Edit: forgot to add the CSS code, sorry:
#media only screen and (min-width: 40.063em) {
.hero .hero-inner {
width: 100% !important;
float: left;
margin-left: 1.38889%;
margin-right: 1.38889%;
}
}
.hero .hero-inner {
width: 100%;
float: left;
margin-left: 1.38889%;
margin-right: 1.38889%;
}
ul {
display: flex;
}
form {
border: 1px solid white;
background: white;
padding: 10px;
border-radius: 5px;
}
.widget ul {
list-style: none;
margin: 0;
padding: 0;
}
.hero .widget ul li, .hero .widget ol li {
list-style: none;
height: 48px;
margin: 50px 15px;
height: 48px;
margin: 50px 15px;
}
.hb-submit{
text-align:center;
}
Looks like it belongs to hotel-booking.css. Please check this
You didn't need to use the FORM tag for parent and LIST tag to children. You would use the DIV to create this part and then give 17% of main width to each subDIV.(1% to margin) such as below code:
body {
width: 100%;
text-align: center;
}
.mainDIV {
background: red;
width: 80%;
}
.subDIV {
background: blue;
height: 100px;
width: 17%;
margin: 1%;
display: inline-block;
}
<div class="mainDIV">
<div class="subDIV">
</div>
<div class="subDIV">
</div>
<div class="subDIV">
</div>
<div class="subDIV">
</div>
<div class="subDIV">
</div>
</div>
I hope it will be useful.
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
I can't seem to understand why certain span properties (in particular, the width and text-align of "controller-row-number" and "controller-row-name"):
#controller {
width: 250px;
float: left;
font-size: 14px;
line-height: 1.5;
text-align: left;
}
.controller-row {
background-color: blue;
}
.controller-row-number {
background-color: yellow;
width: 60px;
text-align: right;
padding: 0 15px 0 0;
}
.controller-row-name {
background-color: orange;
width: 150px;
text-align: left;
padding: 0 0 0 0;
}
Are being ignored in the following code:
<div id="controller">
<div class="controller-row">
<span class="controller-row-number">1</span>
<span class="controller-row-name">First Name</span>
</div>
<div class="controller-row">
<span class="controller-row-number">2</span>
<span class="controller-row-name">Second Name</span>
</div>
</div>
I have a JSFiddle located here:
http://jsfiddle.net/WZFJD
Can anyone point me to the correct edits to make, so that the styles are adhered?
Thanks!
display: inline-block; to the rescue !
Fiddle
.controller-row-number {
background-color: yellow;
width: 60px;
display: inline-block;
text-align: right;
padding: 0 15px 0 0;
}
.controller-row-name {
background-color: orange;
width: 150px;
display: inline-block;
text-align: left;
padding: 0 0 0 0;
}
span elements are by default inline, so you have to make them block, or inline-block if you want your width rule to be applied, otherwise they just take up enough width to fit. The width and height of display: inline; elems cannot be set as you tried to do. Tho you can fake the height using line-height.
Spans are displayed as inline by default, if you want to specify a width you'll have to set display: inline-block.
width cannot be applied to an inline element like a <span>. You will have to also style your spans of class controller-row-number and controller-row-name to be display: inline-block
I want to have list item that has a profile picture in the left hand side and Name in the right hand side. The name should be on a single line with overflow:hidden.
How can this be done with responsive widths and heights? I managed to do this with pixels but not with %.
Example:
JSFIDDLE: http://jsfiddle.net/NjqpC/
html, body {
height: 100%;
width: 100%;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.first {
width: 8%;
height: 3%;
}
.second {
list-style: none;
margin: 0;
padding: 0;
}
.third {
border: .1em solid;
font-size: .8em;
max-height: 100%;
display: table;
}
.third img {
max-width: 100%;
display: table-cell;
}
.third span {
display: table-cell;
vertical-align: middle;
overflow:hidden;
}
<div class='first'>
<ul class='second'>
<li class='third'>
<img src='http://static.wikiartis.com/img/profile-small.gif'>
<span>First-Surname Family-name</span>
</li>
</ul>
</div>
In the class third, add "white-space: nowrap"
.third {
white-space: nowrap;
}
The class containing the width and height needs to get an overflow: hidden
.first {
overflow: hidden;
}
In this case, that is the div.first.
To get the image working as well, I gave all parents a height. 100% for every parent other than first.
I gave the img the following styling:
.third img {
display: table-cell;
height: 100%;
width: auto;
}
See fiddle
By adding white-space: nowrap; you tell the text it may not wrap over multiple lines. So that means the text will always stay on the same line. source
I've tried something, but vertical align doesn't work.
HTML:
<div class="browseBuildsArea-pro">
<img class="champion" src="http://wiki.guildwars.com/images/d/d3/60px-Ranger-tango-icon-200.png">
<div class="build-poster">
<span class="middle-text">
aaaaaaaaaaaa<br>
bbbbbbbbbbbb<br>
ccccccccccccc<br>
dddddddddddd<br>
</span>
</div>
</div>
CSS:
div.browseBuildsArea-pro {
float: left;
position: relative;
width: 790px;
height: 90px;
background-image:url('http://revistaverzus.com/online/background.jpg');
background-repeat:no-repeat;
}
div.browseBuildsArea-pro img.champion {
float: left;
display: block;
height: 72px;
margin-left: 14px;
margin-top: 7px;
border-radius: 9px;
-moz-border-radius: 9px;
-khtml-border-radius: 9px;
-webkit-border-radius: 9px;
}
div.browseBuildsArea-pro div.build-poster {
display: block;
position: relative;
margin-left: 150px;
margin-top: 10px;
}
span.middle-text {
vertical-align: middle;
}
http://jsfiddle.net/sCWfS/1/
How can I make the text align middle regardless of the length of the content?
Try using the following CSS:
div {
text-align: center;
}
Did you try this? http://jsfiddle.net/sCWfS/2/
Instead of span use a DIV with margin: 0 auto?
div.middle-text {
margin: 0 auto;
}
The vertical-align css attribute does not work for divs.
Look at this answer :
Vertical alignment of elements in a div
You need to use display: table on the parent and display: table-cell on the child for vertical-align to work.
Here's a working example: http://jsfiddle.net/sCWfS/3/
div.browseBuildsArea-pro div.build-poster {
display: block;
position: relative;
text-align: center;}