Lines in web layout for some resolutions - html

I have a problem with the layout I'm creating- problem being that in certain resolutions (or if you zoom in) you can see where the outlining of the div boxes are.
Here's what it's supposed to look like:
Here's what it looks like at some resolutions (or zoomed in):
If you need to see the website, it's here, though obviously it's not finished yet. You might immediately see the problem based on your resolution, if not you could zoom in or change your monitors resolution.
I would imagine this is a common problem with an easy solution. Thanks for your help!

If you change your #righthand to have a float:left, the vertical line at the right disappears.
#righthand {
width: 368px;
height: 373px;
background: url("../img/right.png");
float: right; // CHANGE TO LEFT
}
And if you change your #tp to height:248px, the other horizontal line disappears.
#tp {
width: 1024px;
height: 249px; //CHANGE TO 248px
}

I didn't have enough time to look at the site before it was taken down but I think it could be as simple as setting
background: transparent url(imgsrc) no-repeat left top;
that shorthand for the background image in css will lock in the spot. Other than that I would make sure you have
margin: 0;
padding: 0;
so that you can specify the exact width and make sure the cuts that are made are done to a grid so that when you slice the image you have an exact width.

Related

How can I define the size of an image using either css or bootstrap

I'm currently in the process of building a website and I am running into some trouble. home_page_ideal is what the page is supposed to look like ideally. My issue is with the little boxed image on the top left. When I scroll all the way up, the page looks like home_page_issue. The CSS related code is:
.logo {
padding: 38px 0;
}
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
The bootstrap classes col-md-2, col-sm-6, col-xs-12 are also used for one the parent div. Not sure if it's relevant, but I figured it wouldn't hurt to mention it.
I would like the image to stay boxed on the top left of the page when one scrolls all the way up. I had a dummy image on there before and everything worked fine, but then I replaced it with the actual image needing to be there and this happened.
Could it possibly have something to do with the size of the image? I'm not sure but any help, hints, or lead would be greatly appreciated.
Give it a max-width or max-height so that way it won't get larger than a certain size. The auto makes it take up the width of the parent, and if the parent is col-xs-12, it'll be full screen.
Finally figured out what was wrong. It had to do with the size of the image so once I resized my logo everything was back to normal. The dummy img I originally had was 134 x 32, and my logo when I did the replacement was 1400 x 1235. In other words, my logo was just too big.

Large margin off the page

I have an image that I want to achieve a certain effect. Essentially as you make your browser window smaller, I want to crop off left and right side equally, so that the image is not resized and I always see the center.
I have accomplished that in the following way:
<style>
.banner{
text-align: center;
overflow: hidden;
height: 350px;
position: relative;
}
.banner img{
position: relative;
left: 300%;
margin-left: -600%;
}
</style>
<div class="banner"><img src="https://lh3.google.com/u/0/d/0B1qZWmK2ucS8ZDN3Ni02VXo2SEE=w1129-h720-iv1" alt="Image is missing" /></div>
Js fiddle: https://jsfiddle.net/szsj6f9m/
One thing I have noticed with this approach is that if I make left be 100% and margin-left be -200% the image will then half way through start sliding back to the right. I don't fully understand why, I just know that I need to make the percentage to 300% so it behaves correctly on 320px screen.
Here is the example of what I am talking about, just resize your browser small to big and you will see what I am talking about:
Js fiddle: https://jsfiddle.net/szsj6f9m/1/
My question is this:
Is it ok to have the position of the screen so far and throw such a large left-margin on it? Does this causes any kind of problems from the performance point of view on smaller devices or any devices really? Are there any reasons you can think that would say not to do this.
I personally use left:50%;transform:translate(-50%,0); (works even for vertical centering) top:50%;transform:translate(0,-50%); https://jsfiddle.net/szsj6f9m/3/

Making images responsive in CSS

http://www.dirkdunn.com/web2
I recently made a responsive layout, setting the..
max-width:100%;
property in google chrome, which works perfectly for adjusting the header image size, however, in other broweser's such as firefox, the image overlaps the parent container on the left size.
I am familiar with scott jehls picture.js polyfill, however specifying the image size for each screen size sounds like a headache inside the picture tags, is there any way to combat this in other browsers similarly to how google chrome resizes this naturally?
or at the very least, is there some kind of math formula for knowing the right picture size via the browser width? thanks.
You have set the max-height of img to 100%, however you don't have the width of it's parent defined. So, it becomes confusing to the browser to determine 100% of what thing.
Let's give the parent a width -
#headlogo {
width: 100%;
}
Also set the margin accordingly, you might wanna use margin: 0 for #headlogo.
Simply remove the h1-parent of the image and it works. (FF 32)
Try this one
max-width: 100%;
display:block;
height: auto;
Assuming you are trying to center the logo.
I would remove the float: right from the H1 and remove the margin you have. Than I would add a text-align: center to the H1. This will solve your responsive logo issue and keep the logo centered.
Your Current CSS
#headlogo {
float: right;
margin: 0 15% 0 0;
}
Proposed Solution CSS
#headlogo {
text-align: center;
}

Background image center and resize

I'm working on a site for a client in which there's a background image that will be centered on the page with text, links, etc. overlayed.
I currently have the image resized as follows:
img.bg
{
height:100%;
position:absolute;
}
This fits the image to the height of the browser, but aligns it to the left. I need it to be centered.
Since I need it to be conditionally responsive to browser-height variations, the usual centering tricks aren't working.
Thanks!
Try removing "position:absolute" and adding margin: 0 auto. For example:
img.bg
{
height:100%;
margin: 0 auto;
}
or may be just place it inside a table <table align="center"> <tr><td>"image goes here"</td></tr> it's easier to manage cause you can add more items to the webpage in future without difficulty, add borders, change colours of tables, etc.
I can think of a couple ways to go about it (untested, so you'll probably have to tweak):
img.bg {
position: absolute;
/* Top and/or bottom for stretching it vertically as needed. Setting both will likely make it the size of the whole body, so beware. Remove bottom to keep it from doing that if necessary. */
top: 0;
bottom: 0;
/* Left and/or right for sizing/positioning */
left: 25%; /* Percentage position will make it adjust to browser window size, exact percent may need to be tweaked to get right and will depend on the image's size. */
}
img.bg {
display: block;
height: 100%;
width: 500px; /* Whatever your desired width is. */
margin: 0 auto; /* This should work as long as width is set. */
}
Depending on your exact design, either of these should work and be responsive to the size of the browser window. The second one is probably the most flexible and easiest to implement, since you don't have to fiddle with positioning.
The answer depends on exactly what you are after.
If you want an image displayed in the background of the website (which I think you are saying) then I am not sure what method you are using, but if you do away with your img.bg{} in your html and css, and just put the following into your CSS you will get what you want...
body{
background-image:url('background.gif'); // substitute background.gif for the correct file path
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size:auto 100%;
}

How to get an image to spill over the edge of a div

So, I'm getting married. Hooray!
I'm building a website for the event and HTML/CSS isn't my normal area of expertise.
I've got the site sliced and diced, and most of the important structure laid out in divs.
One thing I'm not sure of though, is that the design calls for an image to spill over both edges of the wrapper. What's the best way to do that in HTML/CSS? Or should I make the wrapper the full image width wide and make another container inside for the other content?
Thanks for your help!
Here's the design comp:
website_comp.jpg
Here's the
image that needs to spill over the
div: ribbon.png
Here's what the
site looks like now:
DierksAndEmster.com
add position:relative and overflow:visible for your #container. Then modify your menu like the following:
#menu {
background: url("http://www.dierksandemster.com/wp/wp-content/themes/et-starter-1-4/images/ribbon.png") repeat scroll 0 0 transparent;
color: black;
display: block;
float: left;
font-family: 'Walter Turncoat',arial,serif;
font-size: 20px;
height: 93px;
left: -71px;
line-height: 22px;
position: absolute;
width: 942px;
}
You could attempt to position the image with position: absolute. Another way could be to use three columns. (~50px wide left column, main area, ~50px wide right column).
You could also take a look how csswizardry has done this, it's a bit advanced though, but might be helpful: http://csswizardry.com/demos/css-powered-ribbons/
Last but not least, if you wan't to be quick and know the navigation panel that has the fancy ribbons never changes place, why not just make a big background image and build the site on top of it? :)