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.
Related
How do I code my website so that my 100% width images adjust size according to different screen resolutions? For e.g. 1280 x 720.
Here is the link to my home page with the images that need resizing according to screen resolution. Look at Lines 119 to 123 for image codes.
You have put a height of 700px+ on your images using the img in css. Add another class in css saying:
.full-width-img{
width:100%;
height:auto;
display:block;
}
Add class="full-width-img" to your images you want to have 100% width.
EDIT
Remove the width qnd height from your img tags. BEcause right now they are:
<img src="images3/motoxmaxres.jpg" class="full-width-img" width="100%" height="" alt="motocross landing">
While it should be
<img src="images3/motoxmaxres.jpg" class="full-width-img" alt="motocross landing">
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;
}
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
Nothing seems to be working for me. But what I would like to do is make the header image fit to the size I'd like, which is the container. Heres the actual page link: this.
And heres the jsFiddle here: http://jsfiddle.net/Zorabelle/f7DRh/.
I think this is what I have to fix but I just don't know.
/*HEADER IMAGE DETAILS - HEADER MUST BE 921PX WIDE*/
.header {
background-image: url(http://media.tumblr.com/aceb30d864925524ee215c0d6f88e1bc/tumblr_inline_mu0br62w4R1s7znag.gif);
background-repeat:no-repeat;
height:200px; /*CHANGE TO THE HEIGHT OF YOUR BANNER*/
}
I want the 'Define the Term' header to fill up that whole space. Help?
Here's a working JSFiddle example: http://jsfiddle.net/f7DRh/2/
You can set the image size to container by specifying:
background-size:100% 100%;
That way it will always keep it within container's width and height.
Reference:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
You can also use the traditional replacing your div
<div class="container">
<div class="header">
</div>
becomes
<div class="upcon">
<img src="http://yourimage.com" style="width:100%" />
</div>
By the way, with this method the browser tries to render the image correctly if the user has a resoltion smaller than what your are asking (1050px). It won't crop it.
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