I have this code:
<h3>Title</h3>
<div class="col-1-4">
<img src="" />
<h1>box title</h1>
<p>small text</p>
<div id="login" onclick="OpenPage('link');">Login</div>
</div>
http://jsfiddle.net/xpccL9h8/
i want to be able to set the title (in the tags) to be above the boxes and allow all the boxes to display inline and responsively
its not currently showing the titles above the boxes as it should (like they are above in the HTML code)
You should maybe try for .col-1-4 display: inline-block; instead of float:left
jsfiddle here
Related
I have a block in html and I need to align text and image in it using only .css file. Text should be on the left side and image on the right. I am completely new to css, so not sure where to start. As such, any advice would be very appreciated.
<div class="tm-content-box flex-2-col">
<div class="padding-medium flex-item tm-team-description-container flex-item">
<h2 class="tm-section-title">Some Text</h2>
<p class="tm-section-description">Some More Text</p>
<p class="tm-section-description">Some More Text</p>
</div>
<div class="flex-item">
<img src="img/image1.jpg" alt="image1">
</div>
</div>
simply add display flex like this:
.tm-content-box {
display: flex;
}
I recommend you check the CSS flexbox. It will help you to make a more complicated design using plain CSS. You can check it from w3schools
I feel really silly having to ask this, but I haven't been able to find much info and I am having a strange issue. Basically, I have the following html:
<div class='one'>
<div class='two'>
<img src="someImage" class="img-responsive teamPhoto"/>
<p>Some text</p>
<p>Some text
</div>
</div>
Simple enough. The issue that I am having is that when I look at the height of div one and two, the height is only equal to the nested image in div two.
It does not include the 'P' elements at all, and when I inspect in the browser I can see that both div's only extend as far as the bottom of the image.
What am I missing here that my paragraph elements are being excluded from the div height?
I don't see your css but I am pretty sure that there's something wrong with styles of 'one' and 'two' div. If you inspect the two div element in Chrome dev tool, try to disable all styles for the two div element and it should work.
<div class='one'>
<div class="two" style="position: absolute;background-color: #ccc;">
<div>
<img src="https://fyf.tac-cdn.net/images/products/large/TEV12-4.jpg" class="img-responsive teamPhoto">
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
I'd put the image and p tag inside another div to solve your issue. The div one still has height = 0 though
I'd like to align horizontally an image and paragraph of text next to each other within my main div element of my web page.
The divs are wrapped like this:
<div id="main">
<div id="image">
</div>
<div id="paragraph">
</div>
</div>
Is this the right layout? If so, what CSS do I need?
You need to set both of the inner divs to
display: inline-block;
Check out this fiddle. https://jsfiddle.net/m8athtLp/light/
You can do using two way:
Firstly, From your markup, You can use css to float: left image and float: right paragraph.
Secondly,
<pre><div id="main">
<img src="images/img.jpg" alt="">
<p>your text</p>
</div></pre>
For this this code you can use float: left for image, paragraph text auto align right
Thanks
I'm using the twitter bootstrap grid system for a responsive website. Most of my markup works just fine, but I've one nasty problem, which makes me mad. I've prepared a JSFiddle to let you see what happens: http://jsfiddle.net/gqb5hbza/
Here is my markup
<section>
<div class="content">
<div class="row">
<div class="col-xs-6 col-sm-4">
<div class="item">
<a href="#">
<img class="adaptive-img" src="http://placehold.it/400x330" />
</a>
<div class="item-content">
<h4 class="h4 black">Title Title Title Title Title Title Title Title Title Title Title Title </h4>
</div>
</div>
</div>
..........
</div>
</div>
</section>
I've multiple div boxes which contains an image and a headline. These boxes are rearranged when changing the browser window. But if one of these boxes has a different height (i.e. too long headline which needs two lines), the system breaks and doesn't rearrange correctly - as you can see in the fiddle. The fourth box should be under the first box and not beneath.
Hope that somebody can help me with this problem.
As mentioned, if you want to keep your layout as-is (e.g. not explicitly defining each row), the best solution is to keep each col div the same height. You could use Bootstrap's thumbnail/caption classes to make things look a little more tidy, and then adjust the min-height values for the caption using media queries to keep the extra white space to a minimum.
<section>
<div class="content">
<div class="row">
<div class="col-xs-6 col-sm-4">
<div class="thumbnail">
<a href="#">
<img class="adaptive-img" src="http://placehold.it/400x330" />
</a>
<div class="caption">
<h4 class="h4 black">Title Title Title Title Title Title Title Title Title Title Title Title </h4>
</div>
</div>
</div>
...
</div>
</div>
</section>
Then add something similar to this css:
.caption { min-height: 275px;}
#media(min-width: 400px) {
.caption { min-height: 100px;}
}
Here's an updated fiddle with this code. Hope this helps you out.
I am trying to make my own website and only know some basic HTML, I've searched the web for a bit and can't seem to figure out how to place text under an image and on the left of the image.
So pretty much:
[image] [text]
[text]
would pretty much be my layout of the web page. At the moment I can only float the image or align it to the left making the text wrap around the image, which I don't want. Can someone help me?
<div style="width:400px; clear:both;">
<img src="http://media.techworld.com/cmsdata/news/3246520/1998_google.jpg" style="width:300px; float:left;" />
<div style="width:100px; float:left;">
text beside image
</div>
</div>
<div style="clear:both;">
text beneath image
</div>
http://jsfiddle.net/Tw2v7/
This is a simple layout matter; I think it should be done without using a table.
You can add an additional "clear: both"-Element behind the text you are floating next to the image, like so:
http://jsfiddle.net/nENVN/
I would suggest using divs instead of tables and then using CSS to size and position the divs
<div class="image">Image goes here</div>
<div class="rtext">text on right of image here</div>
<div class="ltext">text below image here</div>
This is the basic style for the above
.image {width:200px; float:left}
.rtext {width:200px; float:left}
.ltext {width:400px}
the ltext div would then be set to a width that is to wide to sit next to the image or the rtext div. It would then be forced to sit below the other 2 divs. This should achieve the look you want.
Use floats:
<img src="" alt="" class="left" /><span>Your text goes here and will wrap around and below the image</span>
<p>More text to sit below the image</p>
The text will appear beside the image and then wrap around to the bottom if it's long enough
Is this what youre after?
http://jsfiddle.net/ptzDw/
Basic HTML Structure:
<div id="wrap">
<div id="left">
<img src="http://dummyimage.com/300x90/7999/fff" alt="image">
<p>text goes here</p>
</div>
<div id="right">
<p>text goes here</p>
</div>
</div>
CSS:
#wrap { width: 800px; }
#left { width: 300px; float: left; }
#right { width: 400px; float: left; margin-left: 10px;}