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
Related
I'm a CSS beginner having a problem with Skeleton when the browser is resized. I have an image and text next to each other in columns as shown below (except much more text than shown below). This works fine, but when you reisze the browser to make it narrower, the text overlaps the image for a sizeable distance before it "snaps" below the image when you get to a very narrow browser width.
I think there's some way to fix this using the Skeleton CSS Utilities, but I haven't been able to figure out how. My understanding of CSS is very basic.
<div class="row">
<div class="one-third column">
<img src="images/myimage.jpg">
</div>
<div class="two-thirds column">
Lots of latin text here.
</div>
</div>
Add the following class to the image: u-max-full-width, like this:
<img class="u-max-full-width" src="images/myimage.jpg" />
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
I'm a newbie using bootstrap 3 for my website.
I'm trying to place an image next to some text, such that for large browser windows they sit horizontally side by side, but as the browser window is resized smaller, eventually they are stacked vertically (the image first, then the text below it).
Is this possible using HTML & CSS somehow?
You'll want to wrap them in a row and then col-spans. It should look something like this.
<div class="row">
<div class="col-md-6">
<img src="">
</div>
<div class="col-md-6">
<p>This is the text you want.</p>
</div>
</div>
Assuming you're referencing your stylesheets correctly, this should do the trick. You will find this pretty well documented: http://getbootstrap.com/css/#grid-example-basic
I'm working on a site using Isotope from isotope.metafizzy.co.
Text works fine, Centering and fully showing up.
BUG: On Tiles that I'm placing an image into, the images starts at 50%. Even if the element is small, or width2, or clicked width. it is always starting halfway to the right of the element.
Any idea what I'm doing wrong?
Current Example: http://warpwars.net/Team/DanVioletSagmiller
Current Element Code (small part of the beginning):
<div id="container" class="clickable variable-sizes clearfix isotope">
<div class="element justMe width2 height2 isotope-item " data-symbol="Dan Violet Sagmiller" data-category="halogen">
Photo<br />
<img src="/Content/dvs/DanVioletSagmiller.png" width="556" height="736" />
</div>
<div class="element majorProj " data-symbol="Teams RPG" data-category="post-transition">
Teams RPG
</div>
I have been using Chrome's inspector to look through the CSS affecting the image, and I can't find anything that would seem to suggest the image should be in the middle.
Any ideas?
Adding an image directly to the root of the element does not work well. However, wrapping the image in another div tag works perfectly.
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/