How to position text in HTML - html

Hi HTML and CSS gurus, I am trying to prepare a website for myself and got stuck in aligning texts. Need some help on it.
I have attached 2 screenshots
Desktop View:
[]
Mobile View
On Desktop View (Image 1)
The blue colored background is a png image (made in photoshop) with a dimension of 400 x 603 px. The black color background on the left or the red color background on the up are coded in HTML. I want the whole paragraph ("Many unit rent....gone by then") to be aligned in the middle of the blue background (from top where it is at present). How to code it dynamically so that whatever the screen size is the text remains in the middle?
I want the paragraph to have a 50 px gapping from both sides of the blue background. How to achieve it?
On Mobile View (Image 2)
Whenever I try to resize my browser in mobile view and see the same paragraph it is shifting its base and going outside the blue box whereas it should be in the middle.
I have written the HTML and CSS code as:
HTML:
<div class="caption">
<h3>Michael Corbett, who hosts NBC EXTRA’s ‘Mansions and Millionaires’ has observed:</h3>
</div>
<div class="img-cont fullh">
<img src="img/background.png"/>
<p id="text">Many units rent immediately, so it's kind of foolish to wait till the weekend just to get a peek; Chances are, it will be gone by then.</p>
</div>
CSS:
#text
{
z-index:100;
position:absolute;
color:white;
font-size:1.5em;
font-weight:regular;
left:50px;
top:50px;
width:80%;
}
Am I missing something?

I think You should add Position relative to your upper div for solve this problem. you are not showing your full html or css thats why I am not sure this is right or wrong.
.img-cont.fullh {
max-width: 100%;
position: relative;
}

Related

Adjust Text and Image behavior in different devices with CSS

I have this webpage where there is an image on top and paragraphs on its right and bottom. This is the CSS I am using (sorry the CSS is directly in the HTML, I have to do this)
<div style="float:left" class='wrapper'>
<img border="0" src="images/about.png" style="float:left;margin-right:2em;margin-bottom:2em">
<p style="text-align:left;line-height:14px;margin:0px 0px 14px;padding:0px"><font color="#444444" face="trebuchet ms, sans-serif" size="3">Lorem ipsum here...</font></p>
<p style="text-align:left;line-height:14px;margin:0px 0px 14px;padding:0px"><font color="#444444" face="trebuchet ms, sans-serif" size="3">Lorem ipsum here...</font></p>
</div>
It seems to work fine even in mobiles. But I wanted to see the image centered at the top of the page when it's displayed in a mobile or tablet (smaller screens). Currently the image is close to the left side of the page when I open the website in a mobile. I wanted it aligned to the center of the page.
The picture below shows how I wanted it to be displayed in large screens and in mobiles (note that this is not exactly what happening now. the second image is what I want to achieve, but at the moment the image is closer to the left margin, and not aligned to the center)
Oh, and I can only use CSS. Is it possible?
Thank you all!
You will need to use media queries in a CSS file.
This will add properties for screens with a width lower than 640px for example.
#media screen and (max-width:640px){
img{
float:none !important;
display:block;
margin-left:auto !important;
margin-right:auto !important;
}
}
However you have to to remove float:left from the HTML and put it in a css file, otherwise the inline-style will override the media query
If you really can't modify the HTML. You should write float:none !important; in the media query write but it's a bad pratice to use !important
Update
Live example http://jsfiddle.net/7d3Lv/2/
Try resizing the Result box

Overlaying text on the upper right corner of a background image

I am wondering how is it possible to achieve notification count as we see in linked (as shown in image below)
I have tried implementing a similar solutions, using a Span which has a background image and then using tag along with it.
Roughly,
<span class="message-icon" title="Unread Message" style="display: inline-block"></span><span style="background-color: red"><sup><b>5</b></sup></span>
this is no where near to what is there on linkedin's site.
Is there a cooked solution already available for it? Or any Ideas how it can be achieved?
Take a look at this: http://jsfiddle.net/D3VVv/1/
From this post: How can i overlay an 10x10px image on top of another image?
If you make the div that contains the message icon as big as the message icon + the notification icon, then you can position the notification icon in the top right corner of that div using absolute positioning. As is shown in the fiddle.
There are a few ways, here is an example of absolute positioning:
http://jsfiddle.net/e2Zs4/
HTML
<div class="con">
<img src="http://www.pictures-of-kittens-and-cats.com/images/cute-kitten-pictures-002-small.jpg" />
<img class ="number" src="http://www.privatefly.com/export/PrivateFly/.content/images/services/red_numbers_4.gif " />
</div>
CSS
.con { width:100px; height:100px; position:relative; }
.number { position:absolute; top:10px; right:10px; }

Scaling html/css images for different screen sizes?

First time user, with a simple but frustrating problem.
I am a new web coder, designing my website (austinwoehrle.net)
I am trying to make the banner of Seattle scale with my darker background, but if I zoom in, it breaks out of the div.
On smaller monitors the image will be too large to fit in the darker background.
I have already set the width to 100% and have tried a lot of trouble shooting!
Thanks for the help!
Again, my website is http://www.austinwoehrle.net/homepage.html
At the moment you have this:
<div id="seattle" alt="test">
<img src="seattle.jpg" width="620" height="210">
</div>
Change the width of your image to width="100%". This may then be slightly wider than you want it, so you will want to add margin or padding to the containing seattle div on line 126 of mystyle.css
width:80%;
margin:0 10%;
Then alter your image to have a width of 100% and remove the height.
<img src="seattle.jpg" width="100%">
Notes
margin:0 10%;
//is equal to writing
margin-top:0;
margin-right:10%;
margin-bottom:0;
margin-left:10%;
Check out this site for information on how to write this.

Containing a text in an oval shaped area

I have a html page which looks like the following:
I want to display some text on the left pane, but the problem is that the text should be inside the oval shaped area only. How do I achieve this? Note that the oval shaped image is the background image, however if required, I can also use a <img> tag for it if it would help. One lame way is to use <p> tags with padding, but that is not an efficient way, so kindly suggest some good methods.
EDIT: HTML:
<div id="leftStage" class="rounded-corners">
<div id="questionDisp" align="center">
</div>
</div>
CSS:
#leftStage {
position: relative;
width: 34%;
height:86%;
float: left;
}
#questionDisp {
display:none;
}
JS: (When the appropriate function is called: )
$("#questionDisp").fadeIn(1000);
$("#questionDisp").html(quesArr.q1); //data read from xml
EDIT: What I need is a div or something above the oval background, & the text should fit in it. I am getting the text from an xml file, so it is not that I have a fixed text size to be displayed
There's actually a pure CSS/XHTML code generator on csstextwrap that does exactly what you want.
EDIT:
The concept here is to float <div>'s on either side of your text so that your content is forced to "flow" in between them. By setting the width of your floated <div>'s, you can create a wide variety of cascading "stencils."
See concept illustrated here: fiddle
If it is background-image then use the position:absolute with proper margins (top and left), and set the width less than that the oval background-image. Then display property 'block'.
Maybe you could try the jQuery plugin Text Fill
also see: https://stackoverflow.com/a/688362/753676
I removed my answer since only the left float worked.
If you paste this code: it'll show you exactly how it works. I did a border-radius instead of creating a circle png.
<div style="width:250px;height:230px; border-radius:125px;background:#efefef;padding-top:20px; text-align:center">
The code for my<br /> fix isn't pretty but it should<br />work It's not automatic, but it<br /> does the job that you need it<br /> to do.
</div>
You have not shared any HTML, The working code is with some assumption
The HTML is,
<div id="main">
<div class="text">This is text</div>
</div>​
Where div with classtext is the text container.
The CSS for same will be,
#main{
background-image:url('http://i.stack.imgur.com/bw2HK.png');
height:563px;
width:691px;
}
#main .text{
color:#FF0000;
width:240px;
text-align:center;
top:100px;
border:1px solid;
float:left;
position:absolute;
}
​Here .text is the class that represent the text styling. The main part is position:absolute;. This will set the text div position to absolute. Now you can move the div above image div using top and left styles.
Please do review working example here
P.S. The border, color and other styles can be changed as per your need.

Can we squeeze the table along with the text dynamically based on resolution of screen in html?

I have designed a web page which is utilizing full screen in resolution 1366*768.
Now if I am viewing my webpage on some other resolution all the div tags overlap..
that thing I corrected by keeping all my webpage in a table..
but still I am getting a scroll in lower resolutions..
Can we do something like decreasing the font and image sizes based on resolution..
Table based layouts are usually a really bad idea. The best way to make a webpage look nice for different resolutions is, to use div with a width property in percentage. A small example would be:
CSS:
#main{
width: 70%;
position: absolute;
left: 25%;
top:0px;
}
#left{
position: absolute;
left: 0px;
width:20%
}
img{
width: 100%;
}
​
HTML:
<div id="left">
<p>
This is the left coulmn.<br />
This is the left coulmn.<br />
<img id="picture1" src="pic.png" />
</p>
</div>
<div id="main">
<p>
This is the main div with a lot of text.
This is the main div with a lot of text.
This is the main div with a lot of text.
This is the main div with a lot of text.
This is the main div with a lot of text.
</p>
</div>
[using float instead of absolute position is also a common solution, to archive different columns]
Two answer you're question about decresing the fon size based on resolution: This would be possible, using Javascript (Get the resolution, changing the image size dynamically). But it would be abusing web technoligies - so just go with CSS percentage properties. If you need help in your particular case, please post the code of your basic page structure. Also google for "CSS 2/3 column layout".
EDIT: shorted example code + insert a img tag