I want to make Tribute Page but I have problem with main picture on my website. I added picture with id="image" and when I want to unzoom whole website, picture changes dimensions and it looks awful.
There is my css of #image:
margin-left:auto;
margin-right:auto;
width:100%;
height:500px;
border-bottom:black solid 2px;
Your question is lacking a whole lot of info.
However it is possible that you will find a solution by not using a relative width property. currently it is set to 100% so when the container in which it is in is changing size it is affected by it. Try an absolute value like 500px to see if this helps.
Othen than that you should check out the guidlines about how to ask a proper question so that people can give you proper assistance.
I found an answer. In the begining of my CSS code was defined box-sizing:border-box, margin:0 and padding:0 for all elements. That was making a problem.
Related
I have this site:
link
The problem is is that after a certain resolution, my div is not until the end.
Look at the image below to see more clearly what the problem is.
White space appears on the right who do not know where it comes from and how to remove it
Can you please tell me where you think comes this problem?
Thanks in advance!
You are specifying the width of the header/footer.
You have use absolute positioning for a few elements. Eg: the link "dg-design.ch"
Fix : Don't use absolute positioning(or use it carefully), in your case remove the width you have specified.
But I would suggest use bootstrap and rework on the page, since you may find many more issues in compatibility with different screen sizes.
Why don't you try this:
body{
margin:0;
text-align:center;
}
I have a navigation bar (actually two) - The one in grey(in the image below) and the white one below it. Both have a width of 1000px and have the attribute of margin:0 auto; in their CSS. Have a look at the live one in full screen at http://jsfiddle.net/M2bE2/embedded/result/ and http://jsfiddle.net/M2bE2/ for the output and the code
I hope that you have got a basic idea of idea of my navigation. Ok then, my problem goes like this. When you zoom out, the white-nav(The second one) gets improperly arranged. The image above shows the improper arrangement on zoom out. I cannot figure out the problem which is causing it. In the output, the disarrangement is after quite zooming out. But, in my real project the problem is even more(It gets disarranged after only a little zoom in or out ). Please analyze the code and tell me where am I going wrong. I have made the code in my fiddle clean for you to understand. Any help will be appreciated. Thanks in advance.
The issue is the login and register buttons. They are both floating right. Because of this they fill the space the bottom nav needs. If you limit their size, clear the float, etc it fixes the issue.
With them removed (easiest solution)
http://jsfiddle.net/M2bE2/2
Without the overflow:auto in the .white-nav's CSS-Attributes it seems to work.
.white-nav {
width:1000px;
margin:0 auto;
overflow:auto; /* Kick it */
}
I have recently began to make a webpage and have run into a problem. The format looks strange on some monitors. I have to change this div for it to work on any other computer monitor different from mine.
<DIV STYLE="position:absolute; top:100px; left: 15%; width:950px; height:1150px">
I was wondering if there is a way I could fix this. I do have a background image and on different monitors the text can be shifted all the way to the left. Is there any way I could fix this?
P.S. I thought of adding a text box that you could put a percent into and have that be the position to the left in the div.
Minimal use of property,
Position:absolute
is always a good way to code.
Use this only when there are no other options. If you can do the same task using relative or static, prefer those first.
Firstly, excuse my absolute lack of knowledge, I'm trying to make a website for the first time and have very little training..
I'm trying to get my text within a div to resize vertically when the browser window is resized. So far I've used purely HTML and CSS (would be willing to use something else to do this, however might need some advice as to how to implement it!).
From what I've read I thought setting the width and height tags using a percentage would work, but it is only working for horizontal resizing. The image within the div resizes, however the text links dont.
I wanted the position of the div to be fixed, so it doesn't scroll with the rest of the page content. Unsure whether that stops me being able to resize though
Here is my CSS for the div:
#logo {
width:10%;
height:auto;
position:fixed;
top:1%;
left:1%;
text-align:left;
float:left;
font-family:Dekar, arial, serif;
font-size:1.5em;
font-weight:bold;
}
Any help appreciated. Again sorry for my lack of knowledge
As you are willing to use something else then HTML and CSS, I would suggest using jQuery which is a javascript library (jQuery website) and download a plugin called FitText (website) which resizes your text.
I know this sounds somewhat counterintuitive, but let me explain what I am trying to do.
I have a large element that serves as the background. It does not resize. It is often larger than the screen it is viewed on. Most of the content of this element (it's just an image) is near the center. Let's say that the only NECESSARY information is in the middle 800px, and the whole thing is 1600px wide.
Why is it wider than necessary? Because it fades pleasingly into the rest of the background and adds to the design of the site.
So I made the element fixed and used a standard trick to center it. It works perfectly on a large monitor. It stays centered, if some of it is a little too big, it doesn't allow you to scroll over in order to see what is basically nothing. I like that.
But if the screen is too small, you can't see it all. You can't just set the min-width or min-height of the page because when you go to scroll, the background image stays in place, because it is fixed.
If there was a way to have a fixed element actually move with everything else when the page is scrolled, that would work perfectly, because I could specify the min-width to the size of the required elements of the image. That would work very well.
Otherwise, another solution would be to use some other form of positioning that allows for the prevention of being able to scroll to see the whole thing. Then, again, I could just set the whole with a minimum width, which would allow me to set exactly how much of the content is scrollable.
Is any of this possible? I feel like I am missing something simple. Ideally I would not have to resize any images, serve up multiple css sheets, or use any elaborate javascript or anything like that. Thanks for the help!
I have finally solved this problem after a ton of experimentation and the solution turned out to be basic CSS, which is awesome.
I go into great detail illustrating this solution at my blog. Alternatively, here is the working demo.
HTML
<body>
<div id="box">
<div id="element"></div>
</div>
</body>
CSS
<style type="text/css">
html, body {
height:100%;
}
body {
margin:0px;
padding:0px;
min-width:1000px; /*Set the width you want to be able to scroll to here*/
}
#element {
height:100%;
position:relative; /*This section centers your element*/
left:50%;
margin-left:-800px; /*Half the width of the image*/
z-index:-9999; /*This part puts it behind everything, not needed if you aren't making a background*/
background:url(image.jpg) no-repeat;
}
#box {
height:100%;
min-height:700px; /*Set the height you want to be able to scroll to here*/
overflow:hidden; /*Needed due to centering with margins*/
}
</style>
I know you would prefer not to use elaborate javascript.... the JQuery library allows for some great little fixes to things like this with a minimum of code... you could also use a relatively small snippet without jquery... basically all you need to do is set an event listener for window.scroll and set your fixedElement.scrollTop to match...
quick JQuery example:
$(window).scroll(function(){
$('#fixedBackground')[0].scrollTop=$(window).scrollTop();
});
I am not CERTAIN I know exactly what you are wanting to do but the below snippet of css might help you. Not sure.
body{ background-image:url(../images/bgImage.png);
background-attachment:scroll; background-position:center top;
background-repeat:no-repeat; margin-top:0px; margin-bottom:0px;}
You can set up your positioning using any combination of the attributes in that snippet and the background-attachment is what makes it scrollable.
It would be helpful if you posted your css for what you have currently so we could really help you. Let me know if I can be more clear.