<div class="info-content" style="display:none;">
<div class="info-content-header clear">
<h1 class="lg-grn-color">Connect To Your Security System</h1>
<div><img src="/mobile/images/smb_fast.png"/> </div>
</div>
</div>
<style>
.info-content .info-content-header h1 {
float: left;
font-weight: normal;
}
.info-content .info-content-header div{
float:left;
margin-left:2rem;
width:30%;
}
</style>
So this my css and html file when image div is not there header should expand to 100% width
Since you float the h1 tag, it will only be the width it needs (adapting to its content). Put the image inside your header, and make the image float. The header then will always be 100% width.
<div class="info-content" style="display:none;">
<div class="info-content-header clear">
<h1 class="lg-grn-color">Connect To Your Security System
<img src="/mobile/images/smb_fast.png"/></h1>
</div>
</div>
.info-content .info-content-header h1 {
font-weight: normal;
}
.info-content .info-content-header h1 img {
float:left;
margin-left:2rem;
width:30%;
}
Related
Hello I have read a few articles of people with similar struggles to me but none of the solutions seem to work for me.enter image description here
I am trying to create something like the picture attached but the text always seems to go underneath the image, whatever CSS I edit.
.newstitle {
background-color: #ffed00;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 20px;
display: inline-block;
}
.newspic img {
padding: 20px;
height: 300px;
vertical-align: middle;
}
<section class="main">
<div class="newspic">
<img src="https://placehold.it/500x300" alt="Photo placeholder">
</div>
<div class="newstitle">
D'votion presents his bassline remix of Post Malone's Rockstar
</div>
</section>
Just place the text container inside the div with the image.
<section class="">
<div class="newspic">
<img src="Art portfolio/illustrations/IMG_0844.JPG" alt="Photo placeholder">
<div class="newstitle">
D'votion presents his bassline remix of Post Malone's Rockstar
</div>
</div>
</section>
Why not try this instead:
HTML
<section class="main">
<div class="newspic">
<img src="https://images.unsplash.com/photo-1476124861542-44354851e622?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=eac3b3d003e83c809de608dd6dcc3857" alt="Photo placeholder">
</div>
<div class="newstitle">
D'votion presents his bassline remix of Post Malone's Rockstar
</div>
</section>
CSS
.main {
display: flex;
justify-content: space-between;
}
.newspic {
width: 50%;
}
.newspic img {
max-width: 100%;
}
You can view it here: https://codepen.io/jobaelish/pen/QaxXww
This is a simple fix.
Nonetheless, if you're HTML is not being affected, then you need to make sure your stylesheet is linked in your document head element properly.
<link rel="stylesheet" type="text/css" href="PATHTOCSSHERE">
There are "several" ways to accomplish this task. One way is to just add display inline on your side text and float the picture to the left. Also set a width on your picture. You could also use flexbox or you could of just used float with the text in the same div as the picture.
.newstitle{
background-color: #ffed00;
font-family : Arial, Helvetica, sans-serif;
font-weight : bold;
font-size: 20px;
display: inline;
}
.newspic img{
width: 300px;
float: left;
padding: 20px;
height: 300px;
vertical-align: middle;
}
<section class="main">
<div class="newspic">
<img src="https://www.google.com/logos/doodles/2018/zhou-youguangs-112th-birthday-5826412689752064-law.gif" alt="Photo placeholder">
</div>
<div class="newstitle">
D'votion presents his bassline remix of Post Malone's Rockstar
</div>
</section>
I removed the <div> container for the <img> and passed the class="newspic" to the image. Then I positioned both .newstitle and .newspic relatively to their parent and gave them width:70% and width:30%; respectively.
The key here, since you are using paddings is to include box-sizing:border-box; into both classes so the paddings are taken account for when calculating the width.
Here is the working code: (run the snippet & try full screen)
.main{
}
.newstitle
{
position:relative;
float:left;
width:70%;
background-color: #ffed00;
font-family : Arial, Helvetica, sans-serif;
font-weight : bold;
font-size: 16px;
box-sizing:border-box;
}
.newspic
{
position:relative;
float:left;
padding: 20px;
width:30%;
height: auto;
box-sizing:border-box;
}
<section class="main">
<img class="newspic" src="https://i2.wp.com/farm3.staticflickr.com/2883/9197736562_3cce3c65ee_o.jpg" alt="Photo placeholder" />
<div class="newstitle">
<p>D'votion presents his bassline remix of Post Malone's Rockstar</p>
</div>
</section>
I am trying to align my image with a title and a subtitle in a web page. I would like the image to be at the left and the title with its subtitle centered at the middle.
<header>
<div class="title_div">
<img src="pictures/logo.png" alt="logo"/>
<p>
<h1>Title</h1>
<h2>Subtitle</h2>
</p>
</div>
</header>
I tried to use the float:left attribute but the image goes out from the header... I saw that because I use the following css attributes:
header{
background:#f1f1f1;
border: black solid;
}
I would like to reach something like https://www.ted.com/ but with a subtitle under "Ideas worth spreading".
Using separate div for your logo and your text makes it much cleaner:
<header>
<div class="logo">
<img src="pictures/logo.png" alt="logo"/>
</div>
<div class="title_div">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
</header>
CSS:
header{
float:left;
}
.logo{
float:left;
margin:20px;
}
.title_div{
float:left;
}
Note: Just a side note that you have very improper use of HTML. P tag is for paragraph, H1 is for headings, so you cant put heading inside a P tag. Re-structure your HTML.
This solution is similar to #user45250's but I'm using a vertical alignment technique for mutli-line text in respect to the image.
<header class="cf">
<img src="http://placehold.it/150x100" alt="logo">
<div class="title">
<h2>Title</h2>
<strong>Subtitle</strong>
</div>
</header>
/* Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
header {
background: #f1f1f1;
border: black solid;
}
.title {
height: 100px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img, .title {
float: left;
}
I have used the micro clearfix as <header> will collapse as it's child elements have been floated.
JSFiddle
you can easily do this with the table display properties:
html clean up and valid ...
header {
display:table;
width:100%;
text-align:center;/* or was it just vertical-align ? */
border:1px solid
}
header>div {
display:table-cell;
vertical-align:middle;/* or was it just text-align ? */
}
.title_div {
width:1%;
}
<header>
<div class="title_div">
<img src="http://dummyimage.com/100x100/&text=logo" alt="logo" />
</div>
<div>
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
</header>
I am trying to get a line of text to word wrap while it displays next to the image. When the text is too long it puts the text under the image, and then it will do word wrap. How can I get the text to wrap so it fits next to the image at all widths?
In my example I included what I mean by next to the image, and what I mean by not wrapping until under the image. All I have come up with to try is changing the width of #ItemText and that does not produce the desired results.
#Items{
text-align:left;
display:block;
vertical-align: top;
max-width:300px;
background-color:gray;
}
#imgItem{
display:inline-block;
}
#ItemText{
display:inline-block;
vertical-align: top;
}
.ItemName{
display:block;
vertical-align: top;
font-weight: bold;
}
.ItemNum{
display:inline-block;
}
<div id="Items">
<img id='imgItem' height="100" width="50" src='s.jpg' />
<div id="ItemText">
<div class="ItemName">
This text is short enough
</div>
<div class="ItemNum">
AB503
</div>
</div>
</div>
<br/>
<div id="Items">
<img id='imgItem' height="100" width="50" src='s.jpg' />
<div id="ItemText">
<div class="ItemName">
This text doesn't wrap until it goes under the image
</div>
<div class="ItemNum">
AB503
</div>
</div>
</div>
Without adding any css to a <p>, it defaults to wrapping around floating elements. We can achieve what you want by removing a majority of your css and simply floating the image to the left and changing your <div>s to <p>s.
HTML
<div id="items">
<div class="item">
<img class="item-image" height="100" width="50" src='s.jpg' />
<p class="item-name">This text doesn't wrap until it goes under the image</p>
<p class="item-num">AB503</p>
</div>
</div>
#items{
max-width: 300px;
text-align: left;
background-color: gray;
}
CSS
.item {
min-height: 100px;
padding: 10px;
}
.item-image {
float: left;
padding-right: 10px
}
.item-name {
font-weight: bold;
}
.item-num {
}
That will wrap the text nicely within the .item div. Note that because the image is floating, you'll need to set a min-height on the .item div to prevent your image from extending past the bounds of the .item div. I also added some padding to to keep the content away from the edges.
You could apply new margins based on the image dimensions like so: https://jsfiddle.net/L6v60u03/
HTML
<div class="Items">
<img class='imgItem' height="100" width="50" src='http://theartmad.com/wp-content/uploads/2015/04/Smiley-Face-5.jpg' />
<div class="ItemText">
<div class="ItemName">This text is short enough</div>
<div class="ItemNum">AB503</div>
</div>
</div>
<br/>
<div class="Items">
<img class='imgItem' height="100" width="50" src='http://theartmad.com/wp-content/uploads/2015/04/Smiley-Face-5.jpg' />
<div class="ItemText">
<div class="ItemName">This text doesn't wrap until it goes under the image</div>
<div class="ItemNum">AB503</div>
</div>
</div>
CSS
.Items{
text-align:left;
display:block;
vertical-align: top;
max-width:300px;
height: 100px;
background-color:gray;
}
.imgItem{
display:inline-block;
}
.ItemText{
display:block;
vertical-align: top;
}
.ItemName{
display:block;
vertical-align: top;
font-weight: bold;
}
.ItemNum{
display:inline-block;
}
JS
var width = $(".imgItem").css("width");
var height = $(".imgItem").css("height");
var trueWidth = parseInt(width) + 10; // Adjust padding by adding more
var trueHeight = parseInt(height) * -1 + 10; // Adjust padding by adding more
$(".ItemText").css("margin-left", trueWidth);
$(".ItemText").css("margin-top", trueHeight);
I have a fixed header with three tabs. On the rest of the page I have both text and images. I was able to have text scroll "under" the fixed header but the images overlap. I tried setting the background of the header as an image but that did not work. I also tried various z-index values but also lacked results. I'm posting the CSS with no z-index on the header because it doesn't affect the fixed header in terms of the overlap problem, but only shifts it off-center. Is there a way to fix this with CSS?
Thanks
HTML Code:
<div class="header">
<div class="container">
<ul class="pull-right nav nav-pills">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
</div>
</div>
<div class="content">
<div class="container">
<p>text here</p>
<img src="image.jpg"/>
<p>more text</p>
</div>
</div>
CSS code:
body {
width: 100%
margin: auto;
background-color: #f7f7f7;
}
.header {
background: #FFFFFF;
position: fixed;
top: 0;
width: 100%
}
.toolbar a {
font-family: 'Raleway', sans-serif;
color: #5a5a5a;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
}
.toolbar li{
display: inline;
}
.content {
margin-top:100px;
z-index:10;
}
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--Tabs Here-->
</div>
</div>
You have to use a Bootstrap feature (navbar) as opposed making the div a fixed element at the top of the page.
In the given fiddle, I want first word align to the top of the image and second aligned at the bottom of the image.
http://jsfiddle.net/himanshuy/W6ATN/15/
I have tried line-height for the span and margin for the br element but nothing seem to work.
I re-arranged some of your html. First, I put the img element and the two span elements in their own divs. So there are two inline divs. I also added a style to one of the spans. You can see the end result here: http://jsfiddle.net/W6ATN/17/
In case that fiddle fails, here is the markup:
html
<div class="box">
<div class="logo">
<div class="inlineDiv">
<img src="c:\work\img\logo3.jpg" width="80" height="80" />
</div>
<div class="inlineDiv">
<span class="spanTop">YAD</span>
<span>HIM</span>
</div>
</div>
</div>
css
div.box {
background-color: #000000;
color: #FFFFFF;
width: 300px;
height: 400px;
text-align: center;
}
img {
margin-top:20px;
}
.inlineDiv
{
display:inline;
}
.spanTop
{
margin-top:10px;
position:absolute;
}
span {
font-size: 30px;
color: red;
clear:both;
line-height:45px;
}