Development test site
https://ntsu.unioncloudsandpit.org/
Can anyone help solve why the jcarousel contained newsblock is clipped off.
FYI newsBlock are just empty divs populated via javascript
I have tried filling newsBlocks with lots of content, but the cutoff remains
i've tried
adjusting the z-index -1 -999
overflow:auto;
height:X px;
I can adjust the carousel size, but cannot for the life of me stop newsBlocks from being cut off?
newsBlock css is simply
.newsBlock {
height:500px;
background:white;}
Any advice?
The height of the <ul> that contains the carousel items is set to height: 90px;. This needs to be changed if it's set via a config or you need to change the height prop via CSS.
.stripe-carousel ul,
.grid-carousel ul {
height: auto;
}
It looks like the height of the carousel is currently 90px, which is being set here:
.stripe-carousel ul,.grid-carousel ul {
margin: 0;
padding: 0;
height: 90px
}
That's found in the minified/combined "application_student_view-800c0baf1f440dfdc34b6b467c315e46574331c5f3987c31f22978b55353aec9.css" file.
If you remove the "stripe-carousel" class from the div with the id "news-stripe" (or change the height value defined above) the carousel displays at full size.
Related
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;
}
At cjshayward.com/index_new.html, there is a wrapper div around the body's content, about 1000 pixels wide, and it works as intended for the top 100 or so pixels in Chrome and Firefox. Next down the page is a jQuery UI set of tabs, containing a fixed-width accordion and something close to jQuery.load()ed plain old, simple HTML.
However, on the "Browse the Library" tab (but not "About the Author"), which is presently open and which contains the fixed-width accordion, below 100 or 150px down, the area under the tabs appears to have the same width as the window; it has the correct left margin, and horizontally scrolls an apparently equal distance to the right. Furthermore, the body background tile does not display; the whole width is white, as was specified for the wrapper div's interior.
How can I get the "Browse the Library" tab to display as intended (like the "About the Author" tab does)?
Thanks,
You're absolutely positioning way too much and that's ruining the flow of things. I'll go through a list of edits you can do to make this work.
/*
#accordion and #details will be floated, so we'll need to
clear #tabs. Add this property.
*/
#tabs {
overflow: hidden;
}
/*
Remove the absolute positioning from #accordion, along
with the top and left properties and do this instead.
*/
#accordion {
float: left;
width: 400px; /* This already exists */
margin: 0 10px 0 0;
}
/*
Remove the absolute positioning from #details, along
with the top and left properties and do this instead.
*/
#details {
float: left;
width: 580px;
}
This will get you a lot closer. You should also try to avoid using height on these elements. Let the content dictate the height.
Here is what i ended up with making those edits: http://i.imgur.com/niizuoR.png
Okay lets make a step by step solution (watch for the edits).
Background
Your background is set in the body. So the body needs to be extended to fill the whole page.
I would recommend this way but there are others.
body,html{
height:100%;
}
Normally the body would fit its contents but with position:absolute this mechanism doesnt work anymore.
Also remove background: #fff css (normalize.css) from the html.
html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Also your background scrolls with your content. Set background-atachment: fixed to change this.
Wrapper
Same counts dor your wrapper which holds the white background.
Set its height to 100% too.
div#main {
height: 100%;
}
The reason why your content is bigger than your wrapper is that
<div id="details" style="width: 713px; height: 0px;">
this div holding the content has a fixed size set. Removing that size make it fit the wrapper.
The width seems to be set per javascript in the load event, so I cant help you with that. Provide your .js code and may i can help you with that too.
As stated in the comments, your layout issues are based in your use of absolute positioning rather than flow layout:
I went through your site and quickly switch everything so it was positioned statically (width floats, not absolute values) and this cleared up the issue. There were some other issues as well. You probably need to look over how you are setting up your HTML from the top level on.
I would start out again and concentrate on using floats for your layout, rather than absolute positioning.
For a basic example on doing so, here is a super simply page: http://cdpn.io/kmCFy
My blog/website is iamdonle.com
An example of what I want is 13thwitness.com
The images on mine doesn't scale and a scroll bar will appear. On his website the images get smaller with the window. I'm sure it's simple but I'm a noob. Please help!
You images are scaling down, but your logo is not!
Try:
.logo {
max-width: 100%;
}
First, you'll need to make sure your container is able to scale. Right now it has a set width of 1150px, this needs to be either a max-width or percentage based.
First, remove the width declared on #container and add this CSS:
#container {
max-width: 1150px;
padding: 5px 30px 0;
}
Then you'll need to remove the width declared for your header. You can do this by either removing the line completely (line 82 of your CSS file) or by overriding it in your 'Custom CSS' field box in the Customization screen by doing:
#header {
width: 100%;
}
Then, as others have mentioned, you'll need to add a max-width to your logo as well.
#header img {
max-width: 100%;
}
Note: when I viewed the blog you were using the "Quite Big" theme, the code above only applies to that theme.
i'm currently trying to make an image resize depending on the browser dimensions. I've managed to get the image to resize horizontally, if I make the browser window narrow the image will resize proportionally just fine. However when I resize the window vertically, Firefox just doesn't seem to want to do it! The code is pretty simple
<body>
<div id="content">
<img src="images/abc.jpg">
</div>
</body>
and the CSS:
#content {
height: 100%;
padding: 50px;
}
#content img{
max-height:100%;
max-width: 100%;
}
Another issue is that the image does seem to resize vertically in chrome, but i have to drag the bottom of the browser well over the image before it start doing this. I'd rather the image start to rezise as soon as the bottom content padding "hits" the bottom of the image so to speak. Hope this is making sense.
Any help much appreciated
try this, taken from Twitter bootstrap 2
html,body{height:100%;}
#content {padding: 5%;}
#content img {
max-height: 100%;/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
max-width: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Because height could potentially go on forever, you cant set the height of anything relative to the browser window to be a function of percent. What i'm saying is that you will need to put it inside of something with a fixed height to use a per-cent value. Good Luck!
-b
You've only specified the "max-height" and "max-width" properties.
If you don't specify the actual "width" or "height" properties, the image initialy takes the width and height of its physical dimensions (if not larger than the specified max-height and max-width).
Said that, the behaviour you've noticed, is correct.
The answer is, as already mentioned, to specify also a initial width or height property, dependig wether your image is portrait or landscape.
Is that what you want?
I actually just added a height to html and body, so that #contents height doesn't get to high.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
(And box-sizing: border-box to #content, because it seems like you'd want that)
learning html/css here. I can't seem to understand how to tweak this drop down menu. I'm trying have to tweak it to hold an image and a name, then to have the links.
Right now the image is getting cut off due to the <li> height, when I change the <li> height to 100% it get some weird behavior that I don't understand. Any help would be really appreciated to learn whats going on.
image getting cut off
http://jsfiddle.net/FyU89/
odd behavior after I add height: 100%
.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
height: 100%
}
http://jsfiddle.net/FyU89/1/
Add to your css
ul.menu-drop li {
display: inline-block;
}
Fiddle link
Update:
Upon adding the new css rule you'll find the name disappears from next to the image on Chrome, at least it does for me. To fix that add a float: left on your image and the name will appear next to the image on Chrome, Firefox, and IE; you can then style it more to your liking. Fiddle link with the float change.
just going through your css and code, it appears that these drop downs would inherit the height from their parent (.menu), which is set to 30px. the images seem like they are set to have a height of 48px; this maybe causing your cutoff.
Add this to your css code:
ul.menu-drop li {
height: 50px;
}
That sets the height of your list within the menu-drop menu thing so its big enough for the picture.