I'm trying to replace JPG images with some HTML code. The blank outline of the buttons will still be used for the standard button, plus the hover, but I want the text within the button to be handled via code.
But the issue is that some of the buttons have multiple words with multiple lines, where-as others are only a couple words.
I'd like to get the font-size for the buttons to be dynamic and not set and then also word-wrap and adjust accordingly.
I found this which sort-of does what I'd like:
Font-size depends on div width and height
But I need to the text to word-wrap.
Here's my example which I cant seem to get to work properly.
https://jsfiddle.net/5L39xq1n/
<div style="text-align:center;padding:20px 0;">DIV Button Test</div>
<div id="buttoncontainer">
<div id="leftsidebuttons" class="leftsidebuttons">
Multiple lines because of the number of words
</div>
<div id="leftsidebuttons" class="leftsidebuttons">
Single Line
</div>
<div id="leftsidebuttons" class="leftsidebuttons">
This is another multiple line button
</div>
</div>
#buttoncontainer { width:175px; height:46px; line-height:46px; }
#leftsidebuttons { white-space:nowrap; }
.leftsidebuttons { color:#d5a200 !important;
background-color:blue;
font-family: Arial, Helvetica, sans-serif;
font-style:italic;
font-weight:700;
margin:5px 0;
text-align:center;
word-wrap: break-word;
}
.leftsidebuttons:hover { color:#ffcc00 !important;
background-color:red;
text-align:center;
}
var container = $("#buttoncontainer"),
text_container = $("#leftsidebuttons"),
start_size = 16,
container_width = container.width();
text_container.css('font-size', start_size + 'px');
while (text_container.width() > container_width) {
text_container.css('font-size', start_size--+'px');
}
Removing white-space:nowrap should do the job.
you use #leftsidebuttons { white-space:nowrap; } and then {word-wrap: break-word;} for the class .leftsidebuttons!!
There are many problem that you would need to fix:
multiple element with same id
don't use div for button
that approach is very slow, basically it tries each font size until it fits.
if you change the div to button with auto it will work.
https://jsfiddle.net/357d2ka6/1/
Related
I'm attempting to get a div element to hug the contents as tightly as possible. This works fine for the width by using display:inline-block, but the height always has some extra padding/ margin/ border. How do I get the parent div to wrap the text exactly? I can get it by judicially choosing line-height, but this only works for a particular font and size.
How do I get the red box below to wrap the text as close as possible... for any input font or size?
Example:
jsfiddle, with css code
.outer {
display:block;
background:red;
}
.hug {
font-size:200%;
margin:0em;
border:0em;
padding:0em;
}
and html:
<div class="outer">
<div class="hug">
<h1>PERFECT FIT</h1>
</div>
</div>
<div class="outer">
<div class="hug">
<h2>PERFECT FIT</h2>
</div>
</div>
CSS, CCS3 solutions preferred over javascript, unless it isn't possible.
I ended up getting some decent results with this. If you alter the font size the line-height can stay as needed and hugs pretty darn close... Does it need to be to the pixel exactly?
.thisone{
display:inline-block;
background:#09f;
min-width:1px;
font-family:arial;
width:auto;
font-size:70px;
line-height:.70em;
}
DEMO
Here is something I've tried : http://jsfiddle.net/wared/CpZru/. My first attempt (pink) worked only with H2, so, I gave a closer look to this tag's default styles, and noticed that the font size was set to 1.5 (Chrome). Then I used this ratio for my second attempt (blue) : 1 / 1.5 = 0.666.... Although the result is more reliable, the ratio seems not to be valid with a different font weight (1 pixel overflows the P tag's line) or a different font family (green test).
You could calculate the ratio for each font weight/family since both parameters seem to affect the line height ratio. I'm not able to get something more interesting currently. Hope it can help in some way.
<div class="em1">
<h1>PERFECT FIT</h1>
<h2>PERFECT FIT</h2>
<p>PERFECT FIT</p>
</div>
<div class="em67">
<h1>PERFECT FIT</h1>
<h2>PERFECT FIT</h2>
<p>PERFECT FIT</p>
</div>
<div class="em67 arial">
<h1>PERFECT FIT</h1>
<h2>PERFECT FIT</h2>
<p>PERFECT FIT</p>
</div>
.em1 {
line-height: 1em;
}
.em1 * {
background: pink;
line-height: inherit;
}
.em67 * {
background: lightblue;
line-height: .67em;
}
.arial * {
font-family: Arial;
background: lightgreen;
}
.outer {
display:block;
background:red;
float:left;
clear:both;
}
.hug {
font-size:200%;
margin:0em;
border:0em;
padding:0em;
}
.hug h1,
.hug h2 {
margin:0;
padding:0;
height:1em;
line-height:1em;
}
I am trying to change the written text from horizontal to vertical, applying
CSS
h4{
font-family: sans-serif;
margin-top: 280px;
-webkit-transform: rotate(-90deg);
}
And i obtain this:
So the problem is that "Milesti Mici" the blue div is 2 words separated by space, and it outputs the second word from the new line, but I need in the same line. I think here is a kind of default property.
Thank you for your time!
Here is the html code
<div id="unu"> <h4>Albina</h4> </div>
<div id="doi"> <h4>Catedrala</h4> </div>
<div id="trei"> <h4>Milesti Mici</h4> </div>
Try with this property:
h4 {
white-space:nowrap;
}
I have two selectors to play with to achieve this design:
I have tried almost everything but I just cant seem to get the text to float right next to the big letters
Here is the code:
Jsbin
html:
<div class="processlinks-section-template">
<div class="processlinks-section-item" data-letter="H">
<div class="processlinks-section-item-title">
Haftonbladet.se
</div>
<div class="processlinks-section-item-title">
Hteabagz.com
</div>
</div>
<div class="processlinks-section-item" data-letter="C">
<div class="processlinks-section-item-title">
Cftonbladet.se
</div>
<div class="processlinks-section-item-title">
Cteabagz.com
</div>
</div>
</div>
CSS:
[data-letter] {
margin:7px;
background:#ef8;
}
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
}
.processlinks-section-template
{
width: 270px;
height: 100%;
}
}
.processlinks-section-item-title
{
margin-top:5px;
}
.processlinks-section-item-title a
{
color:black;
}
.processlinks-section-item-title a:visited
{
color:black;
}
.processlinks-section-item-title a:hover
{
color:#0084c9;
}
Any kind of help is appreciated
Note: I have a javascript that appends stuff so I rather just stay with these two selectors.
If there is one item it seems to ruin the design and I think thats the problem.
Take a look: jsbin.com/UHiZUJU/9/edit
Float both the letter and link to left and add clearfix with it.
Updated jsfiddle
Add float: left to the :before psuedo-element that contains the letter, and clear: left to the section container:
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
display:inline-block;
}
.processlinks-section-item {
clear:left;
}
Updated JSBin
Currently your :before psuedo-element is display: block by default in the absence of another display declaration, which means it automatically fills 100% the width of its parent and functions like it has a line break after it (as compared to inline elements).
Floating a block element means it only fills the width it needs rather than its usual behavior of filling the full width and also removes the implicit presence of a line break. The clear: left on the container just ensures the float is reset for each section.
To make it like in your image change your margin:auto 7px;
I am working in Phone Gap using java script,html and css. I have implemented a swipeview using this.
my doubt is how should the CSS be.The CSS i implemented is as follows.
.swiper-threshold {
width:100%;
height:350px;
margin-top:40px;
text-align:left;
line-height:20px;
font-size: 15px;
text-align:justify;
text-justify:inter-word;
}
.swiper-threshold .swiper-slide{
width:auto;
height:350px;
margin-top:2%;
margin-left:0;
padding-right:0%;
text-align:left;
line-height:20px;
font-size: 15px;
text-align:justify;
text-justify:inter-word;
}
the sliding movement is from left to right.when it reaches the last slide.the movement reverses.
when,I change margin-left:0; from 0 to say 5...as and when I slide the left space gets on adding up the last slide is seen for half of the screen.
but,when i give margin-left:0; all are stuck to the left margin.
html coding:
<div id="swipe_body">
<div class="swiper-container swiper-threshold">
<div class="swiper-wrapper" id="swiper-wrapper">
</div>
</div>
</div>
SWIPER-SLIDE creation
var val = k+1;
var superdiv = document.getElementById('swiper-wrapper');
var newdiv = mySwiper.createSlide('div');
newdiv.append();
var divIdName = 'swiper-slide'+val;
console.log("div name: "+divIdName);
newdiv.setAttribute('id',divIdName);
newdiv.className="swiper-slide";
superdiv.appendChild(newdiv);
var cnt = '<div id="container'+val+'" class="container">values</div>';
document.getElementById(divIdName).innerHTML=cnt;
console.log("processsing parameter loop ");
what should i give such that n-number of swipes the slides should be the same position-middle of the screen.
please,guide me!
If I understand correctly, you're trying to get your slider to sit in the middle of the screen, but in doing so you're adding margin to the slider elements itself. Is that correct?
If so, the reason you're having trouble is that the slider implementation itself uses the margins to position the slides during movement left/right.
In order to control the spacing around the slider, the easiest bet is to wrap it in another div which you can traget directly.
So, taking the dimensions/etc that you've set up, your HTML would instead look like this:
<div class="slider-positioner">
<div id="swipe_body">
<div class="swiper-container swiper-threshold">
<div class="swiper-wrapper" id="swiper-wrapper">
</div>
</div>
</div>
</div>
You can then drop this CSS in to target that new div and push it into the middle (either using amrgin: auto as I have done below, or using set margin amounts as you seem to suggest you would like):
.slider-positioner{
display: block;
width: 550px; //set this to the width of your slider
height: 350px;
margin: 0px auto;
}
Image
I tried this with the following CSS and HTML. It looks fine when the browser is of full width and scrambled when browser is resized. I WANT the elements to be where there and a HORIZONTAL SCROLL has to appear when the BROWSER is RESIZED. Pretty new to web programming. Text-align:center for positioning the center column would not work because, every time a new text is added in the left or right, it gets relocated and also center column element in ROW1(text) and ROW2(Button) do not appear along the same line. That is, text appears a bit right and the button a bit left. Text-align won't work here.
CSS:
#charset "utf-8";
/* CSS Document */
body
{
background-color:#000;
}
.wrapper
{
width:70%;
margin:0 auto;
padding:2px;
background-color:#fff;
}
.second_row
{
padding:2px;
margin-top:10px;
}
.center_container
{
width:30%;
margin:0 auto;
}
.left_container
{
width:33%;
float:left;
}
.right_container
{
width:33%;
float:right;
}
.topelements
{
margin-top:0px;
color:#777;
padding:2px;
}
.topelements a:link
{
color:#29a3cc;
}
.topelements a:active a:hover
{
color:#29a3cc;
}
.logo
{
overflow:hidden;
}
HTML code:
<div class="wrapper">
<span class="topelements float_left" >Mail us: admin#admin.com</span>
<span class="topelements float_right">Left links My xyz</span>
<span class="topelements center_container">Welcome to xyz ! Sign in or Signup.</span>
</div>
<div class="wrapper second_row">
<span class="left_container">Srini</span>
<span class="right_container">Vas</span>
<form class="center_container">
<input type="text" placeholder="Goooooooooooo!" />
<input type="submit" value="Search" />
</form>
</div>
<div class="wrapper">
If you want to align you object in the center, there are a couple of different ways. First of all, there is the text-align:center; which you don't need right now. There is also object-position:center; which basically does the same, but with an object. This way isn't the best, but you could add a certain percentage of padding to either side but that's not recommended. Lastly, there's alignment-adjust:central;. This may not be perfect for your situation but just try out all of these and see if they work. Good luck!
One way that would work is to set your wrapper width to a fixed value (something in 800px for example). As long as this width was longer than all the content you are putting within that wrapper, everything should work as you want. The browser will automatically place a horizontal scroll bar when the window gets smaller than the width of the wrapper.
This is just a small error I found in the CSS and I don't know if this will help too much. The div you added was not referred to as a div, but a class. For example, if you wanted to style a div in CSS, you would do this:
#divname {
CSS for div goes here...
}
On the other hand, if you wanted to add a little style to a class, you would go like this:
.classname {
CSS for class goes here...
}
If you were wondering what the difference for each is, the answer is simple. A class can define multiple objects while the divs are just limited to one object or element.