I have a <h1> title that that is in a <div> row.
I want to fully extend the <h1> styling but place a button at the right side of the row.
I cannot figure out how to set the <span> value correctly to have the button stay on the right, but also extend the full amount of the row.
The only idea I have is to place the <h1> in a div .span6 and then place the button in another div span pulled-right, but that leaves an ugly white space between the <h1> title styling and the button.
Also it needs to be fluid in case we have 2 buttons on the right.
This is just a sample of what I trying to do.
Your original question was a bit unclear, so I had to guess if something like this was what you were after.
<div class="container">
<div class="row">
Button 2
Button 1
<h1>My fancy title</h1>
</div>
</div>
After you edited the jsfiddle example, I'd say that my solution should work if you're using bootstrap. For some reason your css has .pull-right{float:none;} in it that's causing pull-right not to work.
Here's a simple demonstration of your code with only changes being the button being before the h1 and .pull-right{float:right;} added to the end of css
http://jsfiddle.net/Arkkimaagi/KFsM6/1/
Related
I was wondering if anyone could help me. I am trying to place an image in between two words in my header. e.g FirstName (Image) LastName. However, every time I try the image shifts the words so that everything is stacking and I want it horizontal. Can anyone help with this?
What I have done so far:
<div class="horizontal">
<h1>FN LN</h1>
<!-- box-b -->
<div class="box-b">
<img src="Images/Triangle.png" alt="Logo mark">
</div>
<!-- /box-b -->
</div>
So I'd want the image to move up between the two words.
Images are inline-block elements that should not 'break' your text onto multiple lines, if the issue is alignment, as discussed here you can use vertical-align in CSS to align your image inline with your text.
Like what #Psi mentioned:
<h1>FN <img src="..."> LN</h1>
Should work fine then tweak the CSS for alignment
I have a set of bound classes inside a div and they appear as distinct objects one beside the other and the content inside the div is overflowing to the next line. I am looking for an approach which would be best suited to handle these text overflows. The two ideas I am contemplating on are:
Using tooltip- so when the mouse hovers on the div the extra content which is overflowing will be displayed and closes by default when the mouse moves away.
scrolling text- I am unsure about this one since like I said the objects are all bound classes and I am not listing them seperately so when I tried applying marquee to it all the headers of the different objects started scrolling as one long line.
This is how the code looks at present (does not contain the tooltip and scroll that I implemented since I reset the code to how it looks originally.
<div class="BoundClass">
<div>
<div style="white-space:normal"><%#Container.DataItem("cClassName")%></div>
</div>
</div>
Could someone please help me with what would be the best approach to handle the text overflows and also the html, css code for it.
Ok, so I have an update. The following code is working for me, the class names are scrolling in their respective divs.
<div class="BoundClass">
<div>
<marquee behavior="scroll" direction="left"><%#Container.DataItem("cClassName")%></marquee>
</div>
</div>
However I want to set a condition where the ONLY the text that overflows will scroll and the text which fits inside the div doesnt.
I'm new to bootstrap. Here I'm not able to figure out how can I achieve this kind of layout alignment using bootstrap. I tried but not able to achieve this, can anybody help me to do this!
Here is, what I want to achieve:
Here, there are two boxes side by side, left box (green with text) and right box having youtube video. when you resize it, that green box should go to the top of video box like stack. The text inside the green box should be vertically and horizontally center aligned.
You can use different CSS definitions for different window size.
Look here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
and here: http://getbootstrap.com/css/#grid-media-queries
and here (example matching your problem): http://learnlayout.com/media-queries.html
You can create that layout with bootstrap. You may need to write your own because bootstrap's grid adds gutters between columns by adding padding. You should be able to add a background color to a column, but the content does not touch the edge like in the video example you posted.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3">Green box</div>
<div class="col-xs-12 col-sm-9">Video</div>
</div>
</div>
Take a look at this jsfiddle for an example.
Read through Bootstrap's grid documentation if you would like to modify it.
Sorry guys I made new one for this because it couldn't be done like I previously explained.
I want image to go over previous div and so it stays always at the same exact spot.
It's an border image for portfolio div what I'm trying to align here correctly, so that it makes peek kind of effect over previous div.
<div id="previous">some content</div>
<div id="portfolio">
<div class="some-other-content">Whole lot of html</div>
</div>
Link to my jsfiddle
Use in your CSS
"position:absolut" to set a fix position in your Window.
see more options here:
http://www.css4you.de/position.html
On my wordpress built site, with a Responsive theme child theme, there is a div which contains widgets.
The widgets and their content are showing fine, but the "wrapping" div is not showing what I have styled via css. If I use firebug, I can see that the div is appearing up at the same spot as another div "featured", but is obviously behind it. Well, I need it to be below.
The site is http://thelawcompany.com.au.
The problem div is <div id="widgets" class="home-widgets">. I want the background and top-border that I have declared in CSS to appear behind the widgets. Also, there is a massive gap below the widgets that I can't seem to get rid of.
It because the #featured element is floated.
A solution is to float the widgets also by adding the class grid
Demo: Problem, Solution
<div id="widgets" class="home-widgets grid">