I've got a design idea that I'm not exactly sure the best way to go about pulling it off in html and css. Basically I want to do what I've (crudely) drawn in this image:
My basically I want a div to appear some distance down from the top of the page that stretches from infinity, to within the bounds of the container to display some content. My code looks something like this
# html
<html>
<body>
<div id="container">
<div id="content">
Some text content
</div>
</div>
</body>
</html>
# css
div#container {
width: 1140px;
margin: 0 auto;
}
div#content {
width: 300px;
background: #000;
color: #fff;
float: left;
}
Where the div#content would be the one that has the background that stretches to infinity. Is this possible to pull off without resorting to altering the background of the tag? I want to use this on multiple pages within my site, all of which have different heights and distances down from the top, so I'd like to be able to do it without having to switch out the background images for the tags for these different pages. And the div#content will have variable content length, so using body background images isn't a very elegant solution. It would be nice to do it without resorting to some kind of absolute positioning as well.
Sorry for rambling, I hope what I am trying to do is clear. Any suggestions?
I whipped this up.
Just adds a div beneath the content area that matches up with the element you have in the header. It goes on infinitely in both directions. I hope this is what you were trying to achieve.
EDIT: As per your request in the comments, I threw this together. It uses jQuery to set the width of the underlying div and its top margin, which is found by getting the top offset of the fg div.
By "infinity," you mean that div#content appears to go forever to the left of the page and beyond? It can't really go for infinity, but you can certainly give the illusion of that.
Sigh.... I am a bit baffled. Maybe because it's midnight and I can't think straight, but I whipped this up:
Live preview (Feel free to fork this fiddle and play around with it to get it just right.)
Is this close to what you're looking for? I wonder if the most robust way to do this right might involve Javascript (jQuery, specifically). It would really help to know the height of that "content" div, and jQuery might help us with the sizing/positioning of it if the window changes its dimensions.
Related
I am trying to create a HTML site with CSS styling and run into the following issues:
Depending on monitors size, my HTML element's positioning changes. So if It's a bigger screen, then lets say everything fits correctly. But if you open it in a smaller screen, not everything is displayed!
If I zoom in the browsers view, the elements begin to overlay each other - yet I want to stay where they are (even if that means they wont be displayed on screen due to a high zoom IN).
(I cannot post images yet, so I'm adding a link to the picture to explain abit more):
I am also posting a fiddle where you can see my CSS for the MENU and the HTML part that is connected with it:
I have to write some code, but my code is too long and wouldn't look nice.
My Fiddle
It would be really nice of you, if you can help me out here. If it's a problem more complicated to explain on how to fix it, I'd kindly ask, if you can change my fiddle to a working version (if it's not too much to ask).
I have checked already similar Questions, but there were no efficient answers that helped me to solve my problem.
So, the reason that you are getting this behavior comes down to the fact that you have set your two buttons to each be fixed with the position set to %. This means the position of each is calculated as a percent relative to the 'viewport' (the browser window). If the window is only 500px wide, then your 40% left position button sits at 200px and the 50% left position button sits at 250px, thereby causing them to overlap.
Generally, I would not use fixed positioning here, but it's really not possible to provide a better alternative without seeing more of your code. (Perhaps you'd like to get feedback in general by posting all of your code on CR).
You can solve the problem by wrapping both elements in a div and give that div your fixed position values for the first element and allow the second button to be positioned relative to the first.
Here's an example of that approach and your updated fiddle:
Change your HTML:
<div class="btns">
<a href='index.html' class='button_lay'>NONE</a>
<a href='dft.html' class='button_dft'>NONE2</a>
</div>
Add a rule for the .btns class to your css and remove the fixed positioning from each of the buttons:
.btns {
position: fixed;
top: 80%;
left: 40%;
min-width: 300px;
}
I am working on Html and Css. I am trying to design a chart conversation like web page where i need to show the messages alternatively like one comes right another on left similar in mobile applications. For that i am using divs to contains the message and i set a background-image for it,
Here what the problem i am facing is, message are of variable size that means some may occupy 1 line and some other might 5 to 20 lines we cannot estimate it. Div background-image size is 40px height only so if i got more than 3 lines of message then it crosses the background image. Here is my Div markup
<div style="background-image:url('some url');padding:10px;margin:2%;word-break:break-word;width:100px;max-width:10px">Here is my content it is variable in size</div>
I have used the css properties like overflow:hidden but it didn't help me. Is there any way so that image or div will be automatically resized based on the content size vertically. Or other way i can follow that is closely related to my requirement. Please guide me.
You could make use of the CSS property background-size but it won't be supported in old browsers (mainly IE<9 which might not be a problem):
background-size: cover;
Or
background-size: 100% 100%; /*x and y*/
Or you can try to use jQuery to deal with it.
I would recommend you to take a look at: Perfect Full Page Background Image
Anyway, the image will get distorted and might not look very good. What usually is done in these cases is splitting the image in 3. Top, middel and bottom,so the middle image can be repeated on the Y axis.
But, you will still having problems with the graduated background, which you might want to use as another background image or rather with CSS3...
My advice: less is more. Make things easier. Take a look around in other sites and see how they try to avoid complex images. If possible, deal only with CSS, avoid requests, speed up your site and bring the new minimalist style to your site.
Here is a possible solution:
Just split it up into 3 divs.
see here
It works with splitting the image into three parts:
- Top
- Middle
- Bottom
But you should really consider building chat bubbles by using only HTML and CSS as it improves performance and lessens network requests.
You can use "background-size":
background-size: cover;
Read more:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Yet I don't recommend this. You better split your image to two image and use two div.
You may use jquery dotdotdot plugin and shrink the content of a div to a specific height and width so that it appears nicer..
You have an option to show the remaining content with a link at the end of your content allocated for the div and show the left over content may be in a popup or something you may want..
Browser support isn't as good as background-size (to my knowledge), but this seems like a case for border-image.
The image you're already using as background should split fairly well and this will let the div scale without causing the left and right edges of the speech bubble to stretch in the same way they would if the background image is just stretched to fit.
More info: http://css-tricks.com/understanding-border-image/
background-size: 100;
or
background-size: cover;
are the CSS solutions. If this does not fit your needs, then you can use jQuery's getWidth, getHeight, setWidth and setHeight functions.
Here's a working fiddle using background-size: 100% 100%;
By adding a couple of <br>'s after your message, you can compensate for the pointer to the bubble in your image.
You have loads of sites with chat bubbles made only with CSS.
Here are some examples:
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
http://www.sitepoint.com/pure-css3-speech-bubbles/
http://www.ilikepixels.co.uk/drop/bubbler/
http://html-generator.weebly.com/css-speech-bubble-generator.html
If you have any doubt after viewing those, please ask us about it :)
Friend,
Try add this property in the element:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Because you set 100% of width but add to paddings and margins.
See if this working...
I am using a jQuery fade in/fade out effect with divs, you can see the example here:
http://jsfiddle.net/EgDqy/13/
My problem is, when I bring them into my main page, whenever the browser is re-sized or made smaller they start to float away from the area where I need them to be and it messes up my layout and design. Should I wrap them in another div somehow or is there another method to keep them from shifting when the browser is re-sized? As always, thanks to anyone who can supply assistance on this. Greatly appreciated.
Don't use align="center" in html. Use css propery margin like this:
margin: 0px auto;
Then the block which has such property will be in center of outer block.
I have a center page column design that simulates a piece of paper. On some pages there is hardly any content, however, I would like to keep the middle column at least, say, 1000px, even if there isn't that much content (to keep the footer at the bottom of their viewing screen). Of course, where there IS more than 1000px's worth of vertical content I would like for the page to scroll normally. Is there an idiomatic way to go at least? Would it be wise to use javascript, can you use javascript?
Look at css sticky footer, at http://www.cssstickyfooter.com, I think this is what you are looking for! Also, you can set a div (The wrapper div) with a min-height: 1000px. This should help you.
Yes, use CSS min-height.
min-height:1000px;
This way you will have at least a height of 1000 px but if the content is larger it will automatically expand.
I'm trying to make a full screen slideshow kind of effect jsFiddle code here, but I am having doubts as to how to do it. As can be seen from my example fiddle, I want the picture to be as big as possible without distorting it (fit to screen). I also want it to be centred vertically and horizontally.
Horzontal centring it is taken care of in css, but I have had to use JavaScript for vertical centring.
My questions are:
Is there a better way to do any of this (e.g. all in CSS)?
On first load, if the picture (before it has been scaled) is wider than the viewport, a scrollbar is present while my script calculates the height of the viewport. This means that when my script fits the div and img to the window, there is a white gap at the bottom, that is the height of the scroll bar. I can get around this by specifying overflow:hidden, but it seems a bit of a work-around. Is there a better way? Would toggling the image be better?
When I resize so that the div is wider than the image, I get a white section under the black div, which creates a vertical scrollbar. Again I can get rid of this with overflow:hidden, but I don't like that approach. I want to know why it is there and how to get rid of it?
Sometimes I can make a horizontal scrollbar appear and as i resize it flashes on/off. overflow:hidden fixes this, but I want a cleaner solution.
Are there any better ways of coding this, or can my jQuery/Javascript be optimised any further?
I'm not aware of any crossbrowser solution in pure html/css to accomplish what you've asked for. Any element with an aspect ratio and a fluid width will trigger a "race condition" when the browser decides to show / hide the scrollbar. A browser will force a scrollbar when it detects this situation with elements under its control. This can also be simulated with javascript. I also encountered this problem and created a small library:
https://github.com/ocbnet/layout
There is also a demo that implements what the OP was asking for:
http://www.ocbnet.ch/github/layout/demo/fullscreen.html
Well... that ones tricky. The best way I've found how to do this is to actually put your content in a single cell table and set the vertical- and horizontal-align properties to.... middle and center I think? But anyhow, it can be done. I'll play around with it and see if I can get an example together.
EDIT:
Ok so the first thing I would advise is to let the browser proportionately resize things. You don't need to resize the div, just the image. You can let the browser figure out the vertical alignment as well, which is a much better option than calculating it. This can be done by placing the content in a single cell table. The example code below is pure html and css. You can add something to the effect that you already have to switch the image height and width between 100% auto and auto 100% based on img height vs window height. Hopefully this gets you a little closer to your goal.
<table style="background-color:#ddd; width:100%; height:100%">
<tr>
<td align="center">
<div id="fulldiv">
<img style="width:100%" id="photo" src="http://assets.perfectlytimedphotos.com/hashed_silo_content/silo_content/21003/resized/coke.jpg">
</div>
</td>
</tr>
</table>
Yes (for the 100% height part) : html,body,div {height:100%}
overflow:hidden seems nice to me. Other possible solutions :
<script>document.write('<img src="..." width="'+window.width()+'" [...] /> (document.write should be avoided however)
<img src="" width="1" height="1" /> (ie, define a small default size -> no scrollbar)
#Gerben suggestion : css max-width (best)
Seems to be the space the horizontal scrollbar would take. I only get this problem at a specific size+ratio too.
This is when the pictureRatio is equal or pretty close to the fullDivRatio. I can't find hoo with overflow:hidden.
No idea, seems good enough IMO.
So yeah, the weird scrollbar on resizing happens because of border effect, the scrollbar appear when you switch from the if to the else or vice-versa.
With this jsFiddle I never get horizontal scrollbar, but I still get vertical one from time to time.
You can do this:
<div>
<img id="photo" src="">
</div>
div {
width: 100%;
height: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
position: relative;
}
It's all pure HTML and CSS. An alternative to Joseph's answer of using table if you don't want to use table in your structure.