I'm working on a project, and I need know how I can force breakline, giving preference to a float:right element.
See this picture:
There are some CSS attribute that I can use to work with this case? I have tried clear: left, but nothing.
Code: jsFiddle
Out of script: what you think that have a better visual? :p
The easiest way is to move your element with float: right to before your other elements:
See: http://jsfiddle.net/G9UAR/1/
<div class="message">
<ul>
<li>Alterar preferências de idioma</li>
<li>Alterar preferências de idioma</li>
</ul>
<strong>Informação:</strong>
<span>A página não está disponível em seu idioma. O inglês está sendo usado.</span>
<br />
</div>
It is (probably) possible to do without switching around the HTML, but that answer would be a lot more complicated.
Related
I have two tags one inside the other. The problem is that the with name "bookmark_corrente_operazioni" is printed in the new line. So this is my code:
<p name="copia_operazione_spiegata"><b>Copia</b>: copia i post del bookmark corrente <p name="bookmark_corrente_operazioni">facebook</p> e di copiarli in uno o più bookmarkk di destinazione</p>
and the result is:
Copia: copia i post del bookmark corrente
facebook e di copiarli in uno o più bookmark
I want that the result is:
Copia: copia i post del bookmark corrente facebook e di copiarli in uno o più bookmark
Anyone can help me?
Instead of a second paragraph tag you can try using a span tag. It will be within the first paragraph tag and will not cause a line break.
e.g.:
<p name="copia_operazione_spiegata"><b>Copia</b>: copia i post del bookmark corrente <span name="bookmark_corrente_operazioni">facebook</span> e di copiarli in uno o più bookmarkk di destinazione</p>
Using single <p> tag or Using <p> tag with <span> element would do
<p class="copia_operazione_spiegata"><b>Copia</b>: copia i post del bookmark corrente <span class="bookmark_corrente_operazioni">facebook</span> e di copiarli in uno o più bookmarkk di destinazione</p>
is a block element which adds a new line in front of it. is an inline element which should work better for you.
Remove the p element around Facebook
Rather using p use span
<p name="copia_operazione_spiegata">
<b>Copia</b>: copia i post del bookmark corrente
<span name="bookmark_corrente_operazioni">facebook</span>
e di copiarli in uno o più bookmarkk di destinazione
</p>
the question is why you'd want to nest paragraphs. thats not a good idea.
instead use <span> for what you're trying to achieve. <p> is a block element, which means it breaks into a new line after the block.
the cleanest solution:
<p name="copia_operazione_spiegata"><b>Copia</b>: copia i post del bookmark corrente <span name="bookmark_corrente_operazioni">facebook</span> e di copiarli in uno o più bookmarkk di destinazione</p>
that way, you have a wrapping paragraph around your text block, and inside, you have an inline element with <span> that doesn't break any rendering. you can apply classes and attributes to it, without worrying it will change the appearance of your wrapping <p>
reason:
default value for "display" on <p> is "block".
default value for "display" on <span> is "inline".
You can use a tag pointing nowhere.
<a nome="bookmark_corrente_operazioni">facebook</a>
so I have a website that requires the user to verify its age before they can see any information, I display the option to select if you are older than 18 years old with a DIV:
<div class="ct-preloader">
<div class="contenido-edad">
<div class="ct-mediaSection-inner ct-u-paddingTop100">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<h4 class="text-center"><small>VNO es una aplicación para mayores de edad, al entrar aceptas nuestros términos y condiciones.</small></h4>
<h2 class="text-center ct-u-marginTop0"><small class="text-uppercase ct-u-cabin ct-u-ls-10 ct-u-ls--xs0">¿Eres mayor de edad? (+18)</small></h2>
<div class="text-center">
<span> Sí </span>
<span> No </span><br><br><br>
<input type="checkbox" name="vehicle" value="si" id="recordarPreferencia"> ¿Recordar preferencia?
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And I make it apear in the whole webpage with this CSS:
.ct-preloader {
position: fixed;
z-index: 99998;
width: 100vw;
height: 100vh;
background: #fff;
overflow: hidden;
}
the problem is that I think this is making my ranking on Google go down, because that is what the Google bot sees, so I would like to know if there is a way to hide this whole div from Google and other bots, the website I'm talking about is https://vno.mx
The best way to suggest that a webcrawler not access content on your site is to create a robots.txt file. See http://robotstxt.org. There is no way to tell a robot to not access one part of a page
http://code.google.com/web/controlcrawlindex/docs/faq.html#h22
If you are going to use CSS remember that robots can still read CSS files! You could include the CSS file in the robots.txt file, though to exclude it.
If you really must have indexed and non-indexed content on the same page, maybe you should use frames and have the non-indexed frame listed in the robots.txt file as not to be indexed.
Well behaved crawlers will follow the robots.txt guidance, e.g. Google, but naughty ones will not. So, there is no guarantee.
I am creating a website using wordpress and I just integrate Google language translator . Everything works fine but the problem is that when I translate language it changes the font size . So by default (without translating) I am getting
<h1 class="intro-text">iDEAS , Solutions , Strategies for your Business <br>
</h1>
from the inspect element . But when I translate it to Spanish or any other languages it reduce the size . I inspect in the Inspect element and I am getting
<h1 class="intro-text">
<font><font>ideas, soluciones, estrategias para su negocio </font></font>
<br> </h1>
. That is why the problem occurs how to over come this . If I translate I need a result like ,
<h1 class="intro-text">
ideas, soluciones, estrategias para su negocio
<br> </h1>
any help will be really appreciated .
If you want same font-size even when you translate the page, then you should write CSS for font tags which are being appended while the translation within class="intro-text".
<!-- Bofore Translation -->
<h1 class="intro-text">
iDEAS , Solutions , Strategies for your Business <br>
</h1>
<!-- After Translation -->
<h1 class="intro-text">
<font><font>ideas, soluciones, estrategias para su negocio </font></font><br>
</h1>
CSS:
.intro-text,
.intro-text font { font-size:20px;}
This will maintain the same font-size after the translation.
I know the fix to this is probably rather easy, but how would I go about getting a line of HTML to appear like this:
22 West Washngton St.
Northbrook, IL 39492
Instead of:
22 West Washington St.
Northbrook, IL 39492
Essentially, how do I go about eliminating that space between my lines of text? I am currently using <p> tags on both seperate tags. If I put them within the same <p> tag, they simply line up next to each other.
Don't use <p> for each line. They are lines of an address, not separate paragraphs. Use a line break instead (<br>). As a side effect, that will eliminate the margin that you dislike.
There are a million and one ways to do this..
I would recommend the first solution - as it seems the 'proper' way to do it IMHO.
It sounds like you just need to use a line break () after the .st
<p>22 West Washngton St. </br>
Northbrook, IL 39492</p>
Just to add to other ways to do this - one way is.
one would be to use a span tag and a break after st.
<span>22 West Washngton St. </br>
Northbrook, IL 39492</span>
You could do
<p>22 West Washngton St.<br />
Northbrook, IL 39492</p>
The <p> tag is meant to surround paragraphs of text. If you don't want this functionality -- and you don't in this case -- simply use <br /> tag between the two lines.
Add the following into the head tag or your common css.
<head>
<style>
p { margin: 0px; padding: 0px }
</style>
</head>
Use the Firebug in Mozilla Firefox to review CSS at runtime. if there are any more css conflicting particularly at your instance.
I'm making a website and it is here: http://animactions.ca/Animactions/accueil.php
My problem is when I go from accueil to contact, I notice the page shifts a bit. I cant figure out why though, the body is supposed to be a fixed width.Thanks
*Bear in mind my resolution is 1680x1050, it doesn't do this on 1280x800
It's just because the scrollbar appears when you go to Contact, since the page isn't long enough with your resolution to need one on Accueil.
Edit : mais pourquoi je parle en anglais moi ? :) Bref c'est juste la présence ou non de l'ascenceur de Firefox qui fait que la page semble bouger, c'est normal.