How do I both bring the "July" and the "2016" in the line, with the font-size differences and the "2016" being aligned right?
<div style="position: relative; width: 10%">
<span style="font-size: 14px">July</span><span style="font-size: 20px; right: 0; position: absolute;">2016</span>
<hr style="margin-top: 5px;">
</div>
Do you mean they should be aligned the same way? You can use vertical-align: bottom to get them aligned on the line, or middle to align them centered with each other.
<div style="position: relative;display:inline-block;">
<span style="font-size: 14px;display:inline-block;vertical-align:bottom;">July</span> <span style="font-size: 20px; display:inline-block;vertical-align:bottom;">2016</span>
<hr style="margin-top: 5px;">
</div>
remove:
position: absolute;
top:0;
Replace it by:
float: right;
Fiddle
HTML
<div style="position: relative; width: 25%">
<span style="font-size: 14px">July</span><span style="font-size: 20px;float:right;">2016</span>
<hr style="margin-top: 5px;">
</div>
Related
I have this code
<h1 class="Welcome" style="background-color: #F0E68C;" style="margin-left: 20px;" style="margin-right: 20px;" style="margin-top: 100%;">Welcome To The National </h1>
<h1 class="Welcome" style="background-color: #F0E68C;" style="margin-left: 20px;" style="margin-right: 20px;" style="margin-top: 100%;">Honor Society Website!</h1>
It should add a background just behind the text but instead it looks like this how can I make it so that both texts have the same background but not take up the entire page and have no white space between the lines.
Use display:table; and have no top & bottom margin and add padding to the first h1.
h1
{
display:table;
background-color: #F0E68C;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 0px;
margin-top: 0px;
}
<h1 class="Welcome" style="padding-bottom: 10px">Welcome To The National </h1>
<h1 class="Welcome">Honor Society Website!</h1>
So I've been trying to make a chatroom, and i want admins to be able to delete messages. I have made an img tag which should be inside and in the right side of the div, but its under and to the right side of the div. How should i do that?
HTML Code (snippet was weird, so try in a regular html file)
<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
<div style="width: 95%;">
<span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span>
<div style="width:100%;"> Chat startet</div>
<img src="https://www.shareicon.net/data/512x512/2015/12/19/690073_sign_512x512.png" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;" > <!-- The img that is a problem -->
<br>
</div>
</div>
I believe you are looking for something like this:
<div style="display: flex; justify-content: space-between;">
<div>
<span style="color: red"><b>CONSOLE</b></span>
<span style="color: grey;">3/11 11.28</span> <br>
<span>Chat started</span>
</div>
<img src="https://www.shareicon.net/data/512x512/2015/12/19/690073_sign_512x512.png" height="40px" width="40px" style="opacity: 0.7;">
</div>
This code uses css flexbox to create such positioning. I recommend you look into the flexbox more, as it will solve 90% of your positioning issues for you, and its usage is at the same time way less problematic than usage of floats. You could find more about the topic here: https://internetingishard.com/html-and-css/flexbox/
I would also recommend not to mix your markup and styling, and use css classes to apply styling to your elements instead. It will allow you to re-use styles without lots of duplication as your page gets more complex, and also allow you to keep your markup much cleaner and more readable.
you should use something like
display: inline-block
for the elements, you want to be in the same row.
or you can use something like
display: flex /*or inline-flex */
in the parent, div to do so.
if you decide to use flex you can see a nice guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm not sure that I got it right, but I guess you need one of these to solve your problem:
<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
<div style="width: 95%;">
<span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span>
<div style="width:100%;"> Chat startet
<img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;">
</div>
<br>
</div>
</div>
or
<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
<div style="width: 95%;">
<span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span>
<span style="float: right;">
<img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;">
</span>
<div style="width:100%;"> Chat startet</div>
<br>
</div>
</div>
If it helps or not, please let me know :)
I'm new to html/css and I'm trying to do an adaptive header for the website. I'm using padding-right with 5% for divs, but las div always goes to a new line and the parent div don't want to expand. I want parent div expand depending on the text in child divs. Also when I'm using padding in px, all works properly, but it loses adaptive part.
What am I doing wrong?
With padding in percents
With padding in pixels
HTML and CSS
button{
height:34px;
width:100%;
font-weight:bold;
border:none;
background-color:#fc592d;
color:#ffeded;
border-radius:4px;
}
<div style="width: 100%; background-color: rgb(44, 62, 80); float: left;">
<div style="width: 47.36%; height: auto; margin: auto;">
<div style="display: inline-block; float: left; padding-bottom: 4%; padding-top: 4%;">
<div style="display:inline-block; padding-right:5%;">
<img src="images/icon1.png" alt="farkops">
<a class="href" href="#">One thing</a>
</div>
<div style="display:inline-block; padding-right:5%;">
<img src="images/icon2.png" alt="pricep">
<a class="href" href="#">Second</a>
</div>
<div style="display:inline-block; padding-right:5%;">
<img class="href" src="images/icon3.png" alt="otzivi">
<a class="href" href="#">Three</a>
</div>
<div style="display:inline-block;">
<img src="images/icon4.png" alt="works">
<a class="href" href="#">Fourth thing</a>
</div>
</div>
<div style="float: left; display: inline-block; margin-top: 1.24%; margin-left: 2%;">
<div style="">
<p style="margin: 0px; padding-bottom: 8px; font-weight: bold; font-size: 3vh;"><span>7 (905)</span> 639-29-03</p>
</div>
<div style="">
<button>Call</button>
</div>
</div>
</div>
</div>
UPD1:
When I add one new div, the previous one fits just right (the parent div expands as I want), but the new one goes to new line.
How to place class small_icons in the center of tpt_box horizontally?
<div id="tpt_box" style="position: fixed;top:0px;left:2px;background-color: transparent;color:white;
z-index: 999; width: 100%;">
<div class="small_icons" style="">
<span class="count" id="mytimer" >0</span>
<span class="status" id="status" ></span>
<span class="refresh" id="refresh" onclick="window.location.reload();" ></span>
<span class="chat" id="chat" onclick="chatme();" ></span>
<span class="fullscreen" id="myfullscreen" onclick="enterFullScreen();"></span>
<span class="endcall_btn" id="disconnectcall"></span>
<!-- Contents -->
<span class="content_popup" id="content_popup" onclick="content_popup();" ></span>
</div>
</div>
There might be so many possible ways to achieve the expected result, the easiest way would be
Add style=" ...; text-align: center;" to the outer div.
Add style="display-inline: block;" to the inner div.
<div id="tpt_box" style="position: fixed;top:0px;left:2px;background-color: transparent; color: white; z-index: 999; width: 100%; text-align: center">
<div class="small_icons" style="display: inline-block;">
try this
#tpt_box{
height: 300px;
position: fixed;top:0px;left:2px;background-color: transparent;color:white;
z-index: 999; width: 100%;
}
.small_icons{
postion: absolute;
top: 50%;
left: 50%;
}
how to move the defie div left and the sales order div right......
i gave float property but not working.....
i wanted one div to touch extremely left and another div to move to the right....
providing my code below.....
http://jsfiddle.net/zbyLy/3/embedded/result/
<div style="padding-left: 41px; padding-top: 10px; float:left;">
<a class="" href="#">
<img alt="change" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo_only.png">
</a>
<p style="margin-top: 5px; margin-bottom: 0px;">47657 Lakeview Blvd, Fremont CA 94538</p>
<p>Tel: 510-657-8981 <span style="padding-left: 18px;">wwww.abcdfg.com</span></p>
</div>
<div style="border: 1px solid red; width: 300px; float:left;">
<p style="color: #14486b; font-size: 18px; font-family: arial; font-wieght: bold; ">Sales Order</p>
<p style=>Customer No. ABC01</p>
<p style=>sales Order No. 100001</p>
<p style=>Est. Ship Date 2/24/2013</p>
</div>
<div style="border: 1px solid red; width: 300px; float:right;">
demo :http://jsfiddle.net/zbyLy/