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.
Related
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.
I am using the Chat design from https://bootsnipp.com/snippets/featured/message-chat-box inside a sidebar with width:250px; and a margin-top:80px; due to a bootstrap navbar.
However I want to resize the height of the chat history to fit the remaining height inside my page and I have no clue how to realize that. I tried height:100%; but that doesn't work.
you can find a fiddle at http://jsfiddle.net/yq3g9djc/
EDIT: I realized it now with jQuery. I calculate the window height and set the height of the chat history minus the offset.
Experimental css such as height: -webkit-fill-available; is one way. It's the laziest way to do it. The better way would be to style your page so that the chat panel can be placed on the right of it. Otherwise, doing anything fancy with this chat panel would prove difficult later on if you do not fix the issue properly now.
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.
I'm currently working on a horizontal site looking to make something like http://www.thehorizontalway.com and was looking to add in some great new css3 animations but have found that 4000px wide is a magic number that breaks the animations (appears the divs position stops working) I've looked into the -webkit-box modeling and -webkit-box-orient:horizontal but neither of these seem to be a fix (and can't find slot on the webkit box)
Does anyone know why this is happening and what I could do to
Not sure about the 4000px, never assumed it would be an issue with animation.
Try Using percentages:
The wrapper = width:100%; height:100%; = What you're seeing on screen at a time,
20 pages = width:2000 % height:100%; which will be the mask of the entire site,
I believe these should be position:absolute; to prevent conflicts;
Then you will probably want to put some divs in per page content:
width:100%; height:100%; float:left; with page link #id's as you know.
It won't make your site look like "The Horizontal Way" It can be considered as a
better method as you can make your content fit to every page jump & re-size.
Oh and...Why horizontal... you can stack your page content to give
a diagonal effect if you want but, it's sometimes shaky on lteIE8, with that said if
you choose to go down that road easily you can condition the layout for IE users horizontally.
I want my footer (on some pages) to remain fixed to the bottom of the browser window regardless of the height of the content. Similar to some of the toolbars you see fixed on the bottom of the browser window on sites like www.facebook.com and the meebo toolbar (e.g. abduzeedo.com).
I did some quick searching and I see some jQuery scripts and CSS hacks with users complaining about IE incompatibility, etc... is there a good standard way of doing this? Even with meebo and facebook, it seems like the toolbar can kind of jump a little as you scroll whereas the CSS solutions look very solid. Is there a simple CSS solution? I assume it's something along the lines of making the footer have absolute positioning with bottom: 0...
If you want something to "stick" to the bottom, you should use the css fixed position. This will locate it to the bottom of the window.
Using "absolute" will not be correct, because it will located the div relative to the first non-static element. Most of the time this is the window, but that doesn't have to be the case.
Html code:
<div class="bottom"><h1>Add to bottom</h1></div>
Css code:
div.bottom {
position:fixed;
bottom:0px;
height:200px;
left:0px;
right:0px;
border:solid 4px red;
}
There is a very good tutorial from a guy called Soh Tanaka - http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/
Use absolute positioning in CSS.
http://jsfiddle.net/TMD9X/