Add letter to the right side without pushing text to left - html

I have this HTML here:
<div class="last_img">
<p>Galutinė žetono išvaizda:</p>
<span class="zetin11">A</span>
<span class="zetin12">A</span>
<span class="zetin13">A</span>
<span class="zetin14">A</span>
<span class="zetin15">A</span>
<img class="last_img_img" src="images/img1.png" alt="">
</div>
When I write text, the text in span move to the left, so it goes outside of image. How can I only add letter to the right side, without moving text to the left ?
This is my css of zetin11:
position: relative;
top: -125px;
right: -79px;
font-family: Courier;
font-size: 18px;

From the Question what I understood is that you want to pull the A's to the right without moving the paragraph. If that's the Case then here is a
I just used the
span{
float: right;
}
Working Fiddle: https://jsfiddle.net/rittamdebnath/fdhj1u6s/

I would do this as follows :
HTML
<div class="last_img">
<p>Galutinė žetono išvaizda:</p> <br />
<div class="imagecontainer">
<img class="last_img_img" src="https://i.imgur.com/I86rTVl.jpg" alt="" />
</div>
<!-- Seperate them into different classes to style them later on -->
<div class="spancontainer">
<span>A</span>
<span>A</span>
<span>A</span>
<span>A</span>
<span>A</span>
</div>
</div>
CSS
.last_img{
width: 100%;
}
.imagecontainer{
float: left;
}
.spancontainer{
float: right;
}
Click Here for JS Fiddle Example
Recap: I separated both items into different divs so that I will take control over the divs using CSS.
I included a class for the first div named image container which is set to float left so that the image will stick to the left
and another div spancontainer which is set to float right so that it will stick to the right near the image.
I like setting a global div class so that I can encapsulate all the others inside it and have control on giving the global class also a specific width in the page itself... in such case I set it to 100% and I used the name you used 'last_img'
I also removed the zetin classes as you won't be needing them as long as you aren't going to style each span seperately ;)
Hope this helps ;)

Related

How to put text on two sides of an image responsively?

It's very simple. I just need to put two lines of text on either side of an image which is centered on my landing page. I don't know how to make it responsive except for using position: absolute. How can I do this without having to use position: absolute.
I tried using flexbox but it seems like it won't let me adjust the position of my text freely as the items are literally adjacent to each other.
Here's the code employing flexbox:
<div class="overall">
<div class="hi">
<p>OH <br>GOSH <br> HI!</p>
</div>
<div class="human-container">
<img src="img/landing page human.svg" onmouseover="this.src='img/landing page human 2.svg'"
onmouseout="this.src='img/landing page human.svg'">
</div>
<div class="my-name">
<p>MY<br> NAME<br> IS <span class="Ray">Ray</span></p>
</div>
</div>
I would go simply by following these steps:
- Add "float: left;" to the following classes: ".overall", ".hi", ".human-container" and ".my-name".
- Add an id(#) to the img and give-it a float:left; and a width:100%; too.
- Give to class ".hi" a width: 5%;
- Give to class "human-container" a width:90%;
- Give to class "my-name" a width:5%.
This should do it.
:D

Text top align on CSS

I have created an HTML framework to display a top banner containing an image a centered title and a clock, below it, there is a stage area to display some graphs and images.
The problem I am encountering is that when I increase the font size of the title in the banner, I am left with some white space above, and with increasing the font size, the text disappears (I have set the containing div to hide the overflow). Ideally, this spacing could be reduced with some property.
I tried searching for aligning the text to the top, but unfortunately I just cannot find it! The behaviour is present even when the text and its div are the only things in the document.
Link to the jsFiddle with the whole page here
Link to the isolated div here
Is there a property I am missing, or another trick to move the text upwards?
<div id="banner" style="width:100vw;height:10vh;overflow:hidden">
<div id="bannerLeft" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:red">
img
</div>
<div id="bannerMiddle" style="width:70vw;height:100%;overflow:hidden;float:left;background-color:blue">
<p style="text-align:center;font-size: 2.5em;">Staged Title</p>
</div>
<div id="bannerRight" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:green">
<p id="timeNow" style="font-size: 2.5em;text-align:center">
10:00
</p>
</div>
</div>
<div id="stage" style="width:100vw;height:85vh;overflow: hidden;background-color:yellow">
Stage is managed with JS
</div>
The problem is the <p> tag inside the div. You realy don't need it here. Remove it, and add the styling to the div element:
Staged Title
Demo:
.bannerMiddle {
width: 70vw;
height: 10vh;
overflow: hidden;
float: left;
background-color: blue;
text-align: center;
font-size: 2em;
}
<div class="bannerMiddle">
Staged Title
</div>
<br style="clear: left"><br>
<div class="bannerMiddle">
<p>Staged Title (BAD)</p>
</div>

What does affect a container's dimensions?

So I have the following structure:
<div id="bannerLogin" class="topBannerAnon">
<a href="http://www.redacted.fr/" class="logo" target="_blank">
<img src="redacted" style="border:none;">
</a>
</div>
With no CSS, the containing div extends to the image height, which is on the left side of the div.
Now I want to put that image on the right of the div instead of the natural left. If I use float: right; on the .logo class, the <a> element is taken out of the flow so my containing div won't extend to the picture height anymore (it will have a height=0).
I tried to wrap the <a> element into another div and give the logo class to it (in case it needs to be a block element), but same behaviour.
So I'm realizing I have no idea how to attach an element on the right of its container, with the container still taking into account the dimensions of said element. Is it possible?
You're doing fine, you just need a clearing element before you close your container in order to make the floated elements "occupy" the parent's space. Something like this should work:
<div id="bannerLogin" class="topBannerAnon">
<a href="http://www.redacted.fr/" class="logo" target="_blank">
<img src="redacted" style="border:none;">
</a>
<div class="clear"></div>
</div>
CSS
.clear {clear: both;}
In case of images, you can use the traditional html align="right" tag to put the image on right side of the content and keep the other aspects of styling the same.
The align="right" tag goes in the IMG html element.
Given this CSS:
.logo {
float: right;
}
… you can get the div to grow by adding this CSS:
#bannerLogin {
overflow: hidden;
}
That's due to the fact that an overflow with a value different from visible creates a new block formatting context.
Snippet
#bannerLogin {
background: #fed;
border: 1px solid black;
overflow: hidden;
}
.logo {
float: right;
}
<div id="bannerLogin" class="topBannerAnon">
<a href="http://www.redacted.fr/" class="logo" target="_blank">
<img src="http://placehold.it/100x100" style="border:none;">
</a>
</div>

How to move the H1 to be inline with the top of the DIV

I am having trouble making the <h2 class="feature_description_content"> vertically align with the image to it's left. You can see that it's quite a bit lower than the top of the image, and I can't seem to find the css that is responsible for it.
Here's an image:
Here is the code:
<div class="feature feature-item-248">
<img class="main" src="http://www.bolistylus.com/wp-content/uploads/uclaproduct.png" alt="" /></p>
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">PERFECTLY WEIGHTED</h2>
</div>
<div class="feature_description_content">
<p>Touch screens have simplified technology, but there has yet to be a way to capture the precision of a calligrapher or the stroke of an artist. Not only should it meet your needs, but a stylus should have style.</p>
</div></div>
</p></div>
Thanks
This issues is must be due to default margin and padding of default HTML elements you must try out by setting
h2
{
margin:0px;
padding:0px;
}
and then change padding as required
Set its margin-top: 0; - simple :)
The image suppose to be floated to the left and cleared both ways, so text can be aligned properly...
img .main {
float: left;
clear: both;
}

How Do I make a div tag occupy the half of the right hand side of my Web page?

It is a basic HTML question.
I have some div tags, which have some controls and occupy left half of my screem.
I Want to have a div tag to display some messages in the right side?
I used somthings like:
float = right;
in my css class. It didn't seem to work. What other properties I need to set.
Here is the code sample
<div class ="header_label">
#Html.GetLocalizedString("program_snapshotRecipientAdress") #Html.TextBox("txtRcpntAdress")
</div>
<div class ="header_label">
#Html.GetLocalizedString("program_snapshotUsertype1") #Html.RadioButton("Usertype", "One", new { id="rb1"})
#Html.GetLocalizedString("program_snapshotUsertype2") #Html.RadioButton("Usertype", "Two", new { id = "rb2" })
<div class ="commentsHeight"></div>
</div>
<div class ="header_label">
#Html.GetLocalizedString("program_snapshotDate") #Html.TextBox("SnapshotDate")
</div>
<div id ="CMSContent">
<div class ="CMS-message">
#Html.Raw("S=This is the div I need to place in the right hand side")
</div>
</div>
I didn't understand your question so much, but I'll try to answer.
If you have some div on the left and you want another one on the right you have two choice:
1) The first one is to set one div on the right and another on the left:
<div>
<div style="float: left; width: 50%">I'm on the left</div>
<div style="float: right; width: 50%">I'm on the right</div>
</div>
2) The second one is to set every div on the left
<div>
<div style="float: left; width: 50%">I'm on the left</div>
<div style="float: left; width: 50%">I'm on the second on the left</div>
</div>
Are you sure that you named the div correctly?
the correct way to your command is
float : right;
If you want your div to be half of your screen you should write something like:
width : 50%;
You can make a div occupy the right hand side of the screen in a multitude of ways, one of which is 'floating' as you've found.
This takes the element out of the normal 'flow' of the document and allows it to occupy a different area of the screen depending on parent elements etc.
At a glance you would need to write:
float: right;
In your CSS, rather than = but if you could post some html and css in a more full form, some better advice can be provided.
if you want to show your form or something in two halfs or grids use this:
float: right;
width: 50%;