I need to somehow set the twitter widget to more than 520px width.
Does anyone know a workaround for this? I think I had some workarounds working for a while but recently they have stopped working.
The the problems are caused by the div inside the iframe with the class
class="root timeline ltr customisable-border twitter-timeline twitter-timeline-rendered"
It has the style
.timeline {
max-width: 520px;
margin-bottom: 10px;
background-color: #fff;
border-radius: 5px;
}
Note the max-width property, if this is removed than it is possible to set the width to any size > 520px, but the problem is that it is impossible as far as I know to manipulate with the content inside the iframe since it is in different domain.
If its a minor size increase you need you could apply a CSS 2D transform to scale it up slightly.
Related
I have got a tiny problem, im creating a website and i want to give an image a max-height. The image may only have the same height of another div.
You can check the layout here: http://bit.ly/1OAGsLR
Its about the 1920x1080 image, and i needs to be the same height as the div with class box left to it. If right the image should scale well.
But im trying all i know but i dont get it working, can someone get this working with CSS or do i need to use Javascript for this?
Thanks in advance!
Your image is looking the way you want when the screen width is at or above 1400px. You should consider using css media queries to move or adjust the image at different screen widths. Your layout could easily be handled using a css framework like foundation or bootstrap which would take care of css media query breakpoints for you.
If you are intentionally trying to not use a css framework, I'd check out this css media queries tutorial to get you started.
You need to make your container div wider.
Your container is 1200px wide, and your boxes are 560 + 40 padding wide each.
That means that the max width of you image is 560px.
Now to conserve it's aspect ratio of 16:9, the max height of the image is 560 / 16 * 9 = 315 pixels.
Okay, your main problem is that heights don't like to be defined this way. I have a solution for you that will 'solve' this issue, but its not very pretty and you might want to look into doing this with javascript anyhow. Below is a very rough example mockup.
body > div {
width: 100%;
max-width: 500px;
background: green;
padding: 10px;
position: relative;
}
body > div > div {
width: 50%;
padding: 20px;
}
body > div > img {
position: absolute;
right: 20px;
top: 20px;
max-width: 50%;
/* make sure to fall back to 80% so theres at least some gutter for older browsers */
max-height: 80%;
/* use calc to make the image the height of the relative parent minus padding */
max-height: calc(100% - 40px);
}
<div>
<div>Push<br />Push<br />Push<br />Push<br />Push<br /></div>
<img src="http://placehold.it/350x150" />
</div>
In short, this will place your image to the right of your box, give it a max-height (because positioning can do that) and a max-width (so smaller screen sizes don't freak out).
Now you could easily translate this a more general system where .box + .boxget a absolute position, or you could define a class for the box that has to push content and add that to the first box, making all other boxes absolute.
I fixed it by using JS, im using the following script:
<script type="text/javascript">
function changeheight(){
var Height = document.getElementById('box').clientHeight;
document.getElementById('imagebox').style.height = Height+'px';
}
</script>
I have a few issues that I can't really get.
a. If I do something like:
position: absolute;
top: 0px;
width: 100%;
padding: 10px;
Scrollsbars in my browser will appear. How to avoid that? I want my top bar to be full width, with padded content but I don't want it to exceed real width and make scrollbars appear. How to do that?
b. Do you have any articles on how to scale website elements according to user's resolution? When I try it with
position: absolute;
top: (some percentage)%
left: (some percentage)%
It's never accurate. With pixels instead of percents - it's not accurate either for different resolutions.
c. Menu overlay
Is there any way to level divs so that my drop-down css-only menu doesn't appear BEHIND divs ? When that happens, I can't click on certain items in that menu because they hide behind a body div.
Thanks in advance!
a. add box-sizing: border-box; -moz-box-sizing: border-box to your code. It will make the padding be within the 100% width, check here for more info and here for a demo
b. try searching the web for responsive designs. Plenty to find about how to display your website based on different devices. You probably don't want to scale everything.
c. are you looking for z-index? Can't help you any more than that with the information you give. Add your HTML/CSS code if you need to know more.
All of your issues are solved with plain ole CSS, so that's good news!
Padding
This is because of the way CSS handles padding. So for instance if you set your element to be:
#id{
width:100px;
height:100px;
padding:10px;
}
It would actually end up being 120px x 120px . This is explained here http://www.w3.org/TR/CSS2/box.html.
You can solve this by using the box-sizing method detailed here http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Scaling depending on Resolution
This is called responsive design. It's really too much to cover here but the basics is that you use media queries to do this. That is detailed here http://css-tricks.com/css-media-queries/
Menu Overlay
You can solve this with the z-index property given to you by CSS. That works essentially like this: z-index:1 is below z-index:2. The caveat is that z-index will only work if a position is declared on your element.
http://css-tricks.com/almanac/properties/z/z-index/
Again, no js is needed here and that's great news because CSS will be much faster for you and much more scalable.
a)
of course scrollbars will appear because you have a with of 100% + 10px
what you can do is:
position: absolute;
top: 0px;
width: 100%;
padding: 0;
or
position: absolute;
top: 0px;
width: 90%;
padding: 10px; // if screen allows it
b)
to scale pages acording to resolution I highly recommend you bootstrap it is really easy and really fast to make your page multidevice http://getbootstrap.com/
What you want to do is use the attribute:
box-sizing: border-box;
As shown here: http://jsfiddle.net/se34t/1/ This allows the padding to be calculated within the 100% width.
I have searched everywhere and have yet to get a solution. Okay heres the deal, I have a one page website which has several div elements underneath each other, sort of acting like individual pages I guess. What I want to achieve is to disable the scrolling of the actual web page all together, yet keeping the scroll of the active div in play if it goes below the web browser. To get to each other section of the page is simple done by using anchor links on the header.
I'm not exactly sure what you're looking for, but I think you want a div to be scrollable, but not the actual document. You can do this by absolutely positioning the div on the screen with a fixed height and set the overflow to auto. I've done this using the following CSS code:
#scrollable {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
overflow: auto;
}
See an example: http://jsfiddle.net/rustyjeans/rgzBE/
Have you tried with
overflow-x:hidden;
turns out its quite simple.
CSS
body{
overflow:hidden;
}
#div_you_need_scrolling{
overflow:auto;
}
We have applied the backgroud image(round corner image from web site) for DIV control. and then dynamically added more statement in DIV control.
How we will increase the height and width for the image?
Please give us some suggestions.
Try using css3
.div {
background: #eee;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Or you will need to do all kinds of messy stuff like resizing the background image, or splitting them off into 'corners' and all that... a huge headache
Using javascript you can change the background-size.
Note - It's a CSS3 feature.
Within style tag
.div_class_name
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
when content changes in div you can use the following syntax to change the size
document.getElementById("eleId").style.backgroundSize="60px 80px" ;
I have a really simple page, with a div. Inside that div is an image that sits at the top of the div some text that sits below the image.
My Problem: The image is supposed to have a width equal to the divs width, ie, the image is supposed to stretch to the width of the div. But what happens is that the image stretches only about 80% of the width of the div, so theres a gap on the right side of the image.
How can I make the image stretch all the way to the right so its width is the same as the divs width? I think you can see my problem in JSFiddle(complete with uploaded images): http://jsfiddle.net/ajEmm/ but I also encourage you to show the HTML in IE, the image is a link so it will show.
NOTE: This problem only occurs in IE, in firefox the image correctly stretches to the width of the div
<html>
<head>
<style type="text/css">
<!--
body { background-color: RGB(218,238,248); }
.content { padding-top: 2%; margin: 10px; margin-top: 0; width: 58%;
max-width: 58%; float: left; color: #454545; }
#announcement { margin: 5%; margin-top: 0%; margin-bottom: 5%; border-color: #99CCFF;
border-width:thin; border-style:solid; border-right-width:thick;
border-top-width:0px; border-bottom-width:thick; background-color: #FFFFFF; }
-->
</style>
</head>
<body>
<div class="content">
<div id="announcement">
<img class="anncHeading" src="http://i54.tinypic.com/qs1lsg.png" width="100%" height="60%" alt="1"/>
<p><b>Announcements</b></p>
<p>Planning on hosting an indoor/outdoor event? We have large, modern educational facilities & surounding gardens available for hire & lease at an economical rate.</p>
</div>
</div>
</body>
</html>
Woah, woah woah.
PLEASE write it in a structured, easy-to-digest format. It will help you out in the long run as you learn code (whether it's css, php, js, etc...)
Your code is formatted poorly. I updated your fiddle: http://jsfiddle.net/ajEmm/3/ (plugged everything in the HTML box so you can just copy and paste it into your page file)
Because some users have massive screen resolutions, width: 58%; could be incredibly large. Using a percentage-based width like that is good practice, but usually reserved for site containers and core elements. When using images in fluid layouts, special precautions must be taken (to avoid warping, etc). In your specific case, the image you have IS NOT IDEAL for the code you have. I would suggest one of two things:
Set the container width at 450px, which is the width of your image; or,
Rewrite the way your page works, and use a really long header image without text. If you would like to do this, I'm available to help you. Let me know and I'll make a fiddle and write instructions for ya. :)