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;
}
Related
I've been on this problem for hours. I'm using PHP to display some HTML. It works, but I can't maintain the text indent on a long wrapping line of inserted text.
I've recreated the issue in HTML with the same issue for your convenience.
<style>
.indent {
padding-left: 1.5em;
text-indent:-1.5em;
}
</style>
<html>
<main>
<b class="do_something">X</b> <span class="indent"> Here are some words. When it wraps to the next line I really want them to stay in line with everything in the span, under the word HERE, rather than return under the BOLD "X" value. Cheers for the help. </span>
</main>
</html>
Now I've come close to fixing it using a display block, but alas the block creates a new line in the span and I need to stay on the same line as the X, which is important. I also tried flex but no joy.
Any ideas? Thanks.
Here's my php, which probably isn't relevant.
echo '<b class="do_something">X</b>', str_repeat(' ', 3);
echo '<span class = "indent">', nl2br($insert_words), '</span><br>';
echo '<hr>';
//And my other CSS:
.indent {
display:block;
margin-left:25px;
}
The problem is that you are using span which is an inline element.
You also do not need text-indent. It is giving you unexpected results because it only applies to one line of text, it has no effect on the lines that wrap.
You could achieve the desired result using flex like on the following example. I added some background color so you can see how the elements align themselves.
.indent {
padding-left: 1.5em;
text-indent: -1.5em;
background-color: #f8d7da;
}
.do_something {
background-color: #fff3cd;
}
#flex-container {
display: flex;
}
#flex-second {
padding-left: 1em;
background-color: #d4edda;
}
#x { background-color: #cce5ff; }
#fixed-width-x {
float: left;
}
<p>Example using flex</p>
<div id="flex-container">
<div id="x"><strong>X</strong></div>
<div id="flex-second"> Here are some words. When it wraps to the next line I really want them to stay in line with everything in the span, under the word HERE, rather than return under the BOLD "X" value. Cheers for the help. </div>
</div>
<p>Your example below</p>
<main>
<b class="do_something">X</b> <span class="indent"> Here are some words. When it wraps to the next line I really want them to stay in line with everything in the span, under the word HERE, rather than return under the BOLD "X" value. Cheers for the help. </span>
</main>
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/
Back in the 2003, when my templates where cut into a tables, I used to position all the text how I wanted.
I know it's a newbie question and I should probably take some beginner css courses, but the question is - how to position text with as little fuss as possible like that:
start at 0 px start at 100px start at 300px
For the example you post in your question, I would go about it something like this:
span {
display: inline-block;
}
span:nth-of-type(1) {
width: 99px;
}
span:nth-of-type(2) {
width: 199px;
}
<span>Start at 0px</span>
<span>Start at 100px</span>
<span>Start at 300px</span>
HTML
<div class="item start0">
start at 0px
</div>
<div class="item start100">
start at 100px
</div>
<div class="item start300">
start at 300px
</div>
CSS
.item{
float:left;
}
.start0{
width:100px;
}
.start100{
width:200px;
}
.start300{
width:100px; // example
}
Width is the best bet. If you're going to use a div, you need to float left or the divs will be pilled up.
I'm working on a custom navbar on a site I'm making but I've run into an issue. I've searched around and have found some similar threads, but nothing that has worked for me. I have a navbar with an image and some text underneath. What I'm trying to accomplish is while hovering over either the text or image, the hover effect for both occurs. The issue is that for the image, the hover effect is done thru an ID and the text hover effect is done thru a class. Here is my markup for one of the sets.
<div class="col-md-2 col-sm-1">
<a href="#Url.Action("Index","Home")" title="HOME" style="margin-left:10px;">
<div id="homenav"></div>
<div class="navtext">HOME</div>
</a>
</div>
And here is the CSS for the image:
#homenav {
margin: 0 auto;
display: block;
width: 47px;
height: 50px;
background: url('../Images/NAV_ICONS/NAV_HOME.png') no-repeat 0 0;
}
#homenav:hover {
background: url('../Images/NAV_ICONS/NAV_HOME_RED.png') no-repeat 0 0;
}
And the CSS for the text:
.navtext{
font-family: RobotoCondensed-Bold, 'Arial Narrow', Arial, sans-serif;
color: #00457c;
overflow: hidden;
white-space: nowrap;
}
.navtext:hover{
color: #ee2e24;
}
And just for clarity, I'm simply trying to make both turn the same color red. Any advice will be greatly appreciated.
Could this fit your needs ?
Put both div (#navbar and .navtext) inside a wrapper div, then put your hover styles in those selectors:
#wrapper:hover #homenav
and
#wrapper:hover .navtex
See fiddle here.
But the hover styles come for a hover over the whole wrapper div.
When using css :hover, the property changes will only affect the element being hovered. You would have to use Javascript/JQuery to do this, but it's pretty straightforward.
First, we need to change the :hover css elements into classes like so
.navtextHover{
color: #ee2e24 !important;
}
.homeNavHover {
background: url('http://lorempixel.com/g/400/200/') no-repeat 0 0 !important;
}
We also need to add a new class. This class will essentially mean that they are all tied together when hovered - ie, when one is hovered, all will be treated as hovered. So add that to the HTML (I called it syncedHover)
<div class="col-md-2 col-sm-1">
<a href="#" title="HOME" style="margin-left:10px;">
<div id="homenav" class="syncedHover"></div>
<div class="navtext syncedHover">HOME</div>
</a>
</div>
Then the javascript merely adds the classes on hover and removes them on exit
$(".syncedHover").hover(
function () {
$("#homenav").addClass("homeNavHover");
$(".navtext").addClass("navtextHover");
},
function () {
$("#homenav").removeClass("homeNavHover");
$(".navtext").removeClass("navtextHover");
}
);
This could be written better by passing data to the JQuery method on hover so you don't have a list of addClass methods, but this isn't too cumbersome for only two elements.
This JSFiddle shows a working example with how it can be done https://jsfiddle.net/bou7mqk3/1/
You just need to put a class on the link instead. As in, the parent a tag that the two elements are nested inside.
In this HTML the only change is the additional class on the link - 'your-class', and I removed the unnecessary syncedHover classes:
<div class="col-md-2 col-sm-1">
<a href="#" title="HOME" style="margin-left:10px;" class="your-class">
<div id="homenav"></div>
<div class="navtext">HOME</div>
</a>
</div>
And then update your CSS to this:
.your-class:hover #homenav{
background: url('../Images/NAV_ICONS/NAV_HOME_RED.png') no-repeat 0 0;
}
.your-class:hover .navtext{
color: #ee2e24;
}
No JavaScript needed at all!
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;