How would I cause text to scroll either vertically or horizontally? (And be able to change the speed of the scroll). Any help to get me started would be appreciated.
If you are talking about web development and do not want to use the non-standards <marquee> element, you should implement it in JavaScript. A nice solution, a plugin for jQuery library - here: http://remysharp.com/2008/09/10/the-silky-smooth-marquee/
Straight out of basic HTML 1.0:
<div align="center">
<font color="#FFF" size="2">
<marquee bgcolor="#000080" direction="right" loop="20" width="75%">
<strong>This is cool!</strong>
</marquee>
</font>
</div>
or vertical
<div align="center">
<marquee bgcolor="#000080" scrollamount="2" direction="up" loop="true" width="35%">
<center>
<font color="#ffffff" size="+1">
<strong> THIS IS A COOL WAY<br>
TO MAKE YOUR TEXT<br>
SCROLL UPWARDS<br><br>
IT IS EASY AND FAST LOADING
</strong>
</font>
</center>
</marquee>
</div>
Don't sweat the comments man.
Related
I have a sidebar for searching, and main content to the right of the sidebar. I want the sidebar to remain approx the same width, while the main content can shrink horizontally when the browser window is shrinking horizontally. I am using the Bootstrap 4 grid system to accomplish this. In addition, I am using flex to enable row wrapping. The grid system responsive width works ok, up until the browser shrinks to approx "col-6" size, upon which any further shrinking DOES NOT yield row wrap. I want row wrap at the smallest width to accommodate small devices. How can I achieve this (code below)? I am very new at using bootstrap and flex in general. I am a backend developer dipping my toes into responsive web design. Please advise.
Also, please note that this is not about a "fixed sidebar", at least not yet, as that is instead a sidebar that is fixed during scrolling vertically. I am interested in horizontal responsiveness.
<div class="container">
<div class="d-flex flex-row flex-wrap">
<div id="search" class=" col-6 col-sm-5 col-md-4 col-lg-3 col-xl-3">
<h4 id="searchTitle">Search Criteria</h4>
<div id="searchCriteria">
a form goes here ...
</div>
</div>
<div id="searchResultsColumn" class="col-6 col-sm-7 col-md-8 col-lg-9 col-xl-9">
<h4 id="resultTitle">Search Results</h4>
<div id="searchResultsRows">
search results go here ...
</div>
</div>
</div>
I assume col-6 in a 12 grid system will yield 50% width. If you want the rows to wrap at a certain viewport why are you dividing the two elements into 12 evenly? At your desired break point give both a width of 100%, or whatever the appropriate bootstrap values are e.g.
<div id="search" class="col-12">
...
</div>
<div id="searchResultsColumn" class="col-12">
...
</div>
I need to create footer which will be just like small orange bar, and I need to make it responsive, I mean when I resized my window everything should be ok. How can I do that?
<footer id="footer" role="contentinfo">
<p class="powered-by">
#language ("powered-by German")
</p>
</footer>
This is my <footer> tag in portal_normal.vm
To make your footer responsive, you can use Liferay supported Twitter Bootstrap classes, aided by your own custom styles controlled through media queries in custom.css of theme:
Example:
<div id="footer" class="row-fluid">
<div class="span12 text-center">
<p class="powered-by">
#language ("powered-by German")
</p>
</div>
</div>
Liferay Reference
In my custom.css I write this:
#footer {
text-align: center;
background: #ffa500
}
and get orange centered footer.
I have probably a simple question for someone with bootstrap experience. On this page: http://limitedwave.com/watsonmetals/site/, in the first section just under the nav bar I have 4 'zones'. One house a logo, directly under it some text in a box, to the right of both a large navigation grid, and under that an 'extra row' below the grid only.
I'm not laying this out properly on the bootstrap grid and I'd like to. I have the content in divs that are more or less stacked and floated with css and heavy margin manipulation to make it look as it does. Am i wrong in assuming bootstrap can layout these divs more like a table via its grid? Perhaps this might also help with the fact that as soon as I resize my browser to the next smaller size from full width mac pro size, the logo and text shift right.
<section id="intro" data-speed="2" data-type="background">
<div class="container">
<div class="row-fluid">
<div id="welcome-screen" class="span16 text-left">
<div id="lrail">
<div id="logocontainer">
<img id="logo" src="img/logo-watson.png" alt="Watson Metals, LLC." width="130" />
</div>
<div id="welcome-box" class="span3 text-right">
Watson Metals manufactures quality metal building panels, for roof, siding, accessories for all building applications. We offer a pole barn package, steel siding or metal roofing for your personal specifications and needs.<br><br>
With an array of metal panel profiles such as Tuff-Rib, R-Panel, and our standing seam profile, we can provide material for almost any application. Our standing seam profile is available in either 12” or 16” widths and can be conveniently produced on your jobsite using our portable roll-former.
</div>
</div>
<div class="span12 text-center">
<div id="main-interface-container">
<ul id="interface-list">
<li><a class="link1" href="link1.php">Roofing Panels</a></li>
<li><a class="link2" href="link2.php">Post Frame Buildings</a></li>
<li><a class="link3" href="link3.php">Other Products</a></li>
<li><a class="link4" href="link4.php">Custom Trim</a></li>
<li><a class="link5" href="link5.php">Warranties and Information</a></li>
<li><a class="link6" href="link6.php">Frequently Asked Questions</a></li>
<li><a class="link7" href="link7.php">Energy Star</a></li>
<li><a class="link8" href="link8.php">About Our Company</a></li>
<li><a class="link9" href="link9.php">Contact Us</a></li>
<li><img id="home-locations" src="img/watson-locations.png" alt="Locations" /></li>
</ul>
</div>
</div>
<div class="span8 text-center"><span class="copyright">Copyright © 2013 Watson Metals LLC., All Rights Reserved.</span></div>
</div>
</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</section>
http://twitter.github.io/bootstrap/scaffolding.html#gridSystem
Bootstrap's documentation is pretty solid.
The standard container->row->span# should work just fine for that grid. It should also take care of the responsiveUi issues you were having with the smaller screen.
I would like to get bootstrap to show something like the attached image, meaning a div wrapper with blue background-color some padding and 3 images inside (I use this horrible colors just for the sake of clarity).
It should be pretty straight forward but, honestly, I couldn't get it. If I try something like :
<div class="span9">
<div class="row">
<div class="span9" style="background-color:blue;">
<img class="span3" src="..."></img>
<img class="span3" src="..."></img>
<img class="span3" src="..."></img>
</div>
</div>
</div>
Inside my container class, the tird image does not fit in the wrapper and goes below the other two, as it appears in this image:
Anyone would give me a hand, please?
Try this:
<div class="span9" style="background-color:blue;">
<div class="row">
<div class="span3">
<img class="span3" src="..." />
</div>
<div class="span3">
<img class="span3" src="..." />
</div>
<div class="span3">
<img class="span3" src="..." />
</div>
</div>
</div>
Possible solution is clearing floats? Quite a bit has been written lately on this but here is one article as a start. Clearing Floats
From a design and requirements point of view, you might consider something like create divs, then fill them with png images that are extra large then add a transparency to the borders so that have a clear background to appear as if they were bordered as such or show your background color.
The trick I believe for you is to use transparent .png's would do the trick, and or adding the desired look to your images.
I have a problem with a standard Twitter Bootstrap progress bar with some text if it is within <div class="hero-unit">, also standard Twitter Bootstrap class:
<div class="hero-unit">
<div class="container">
<div class="progress progress-striped active">
<div class="bar" style="width: 80%;">80%</div>
</div>
</div>
</div>
Here is a jsFiddle code, that shows the text is not aligned properly.
Why this is happening and how to fix? I've tried to fix it but had no luck.
Thank you.
It is the line-height: 30px on hero-unit which causes the problem.
I've change the code like this:
<div class="hero-unit" style="line-height: inherit">
Of course it is better to assign a class to it, instead of using the style attribute.