On my homepage, I'm trying to make three images span the entire width of the browser window. See my site here: http://accelfoods.com. I want the last 3 images on the page (About AccelFoods, Industry Engagement, Portfolio Companies) to be the same width as the image directly under the navigation.
I've figured out how to control #page-body and can make the image go to the edge of the left side (like this: http://imgur.com/gfXPyPK). But I don't know how to make the white space on the right disappear.
I've commented this CSS out for now until I figure it out, but here's what I'm using to manipulate the images:
#page-body {
margin-left: 0px;
padding-right: 0px;
border-right: 0px;
margin-right: 0px;
overflow-x:hidden;
width: 100%;
}
Any help would be greatly appreciated, thanks!
first of all, remove "max-size" parameter from:
#banner-area, #page-body, #page-footer{
width: auto;
}
then add this:
.sqs-block-content {
width: 100%;
}
.image-block-outer-wrapper.layout-caption-hidden {
display: block;
float: left;
position: relative;
width: 100%;
}
.sqs-block-image .intrinsic {
display: block;
float: left;
margin: auto;
max-width: none !important;
position: relative;
width: 100% !important;
}
but there's also script adding a strict width for this intrinsic class, I cannot see that from the first glance, it's kind of encription there and it will take time to understand it... though, the suggestion I'm giving you here definitely overrides the script.
P.S.
I would reccomend you not to use this kind of sitebuilder(s) (you definitely use some kind of) - because there's pretty tough class generator and if you need further updates there -you'll get pretty much more troubles.
Related
I have an img that I want to not cross over into the below section. It only crosses over when i drag the viewport out and makes the window bigger.
I would like the restrict the image movement.
That probably doesn't explain my issue very well so I have attached two images to explain:
Smaller window:
Larger window:
The first image (smaller window) is what I want the image to look like, however as the larger window shows once the window becomes bigger it moves down as the page is responsive and crosses over into the references section. I would like to be able to stop it from doing this?
General images CSS:
img {
display: block;
margin: auto;
height: auto;
margin: auto;
max-width: 80%;
padding-bottom: 1em;
}
.bassportrait CSS:
.bassport {
float: right;
overflow: hidden;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
height: 20%;
width: 20%;
}
Hope that makes sense and I have shown you the relevant code - I'm a beginner!
Since your .bassport is floated right, that float will need to be cleared on the element below to prevent the overlap. There are lots of ways to do this, but the most common is to add a clearfix to its parent element.
.parent-element:after {
content: "";
display: table;
clear: both;
}
Notional markup
<div class="parent-element"><!-- Clearfix applies to this element -->
<p>Ulrika's work...</p>
<p>Bass died...</p>
<img class="bassport" src="..."><!-- Floated element that needs to be cleared -->
</div>
Alternatively, if you're using a framework that has a clearfix utility class, you could just add that class to the parent div and it would have the same effect.
Reference: https://css-tricks.com/snippets/css/clear-fix/
I'm creating a basic generic web page with a photo gallery as practice here, but for some reason I cannot get the gallery div to float next to the sidebar div so that there isn't a big empty space above it. Floating them just destroys everything. When I inspect element it shows that there's a margin taking up all of the space to the right of the sidebar/above to the gallery, but I've looked through my css over and over and can't find where that margin could be coming from. I'm not 100% sure that's what is causing the issue though.
If anyone knows how I can make this position correctly it would be much appreciated. I feel like I've tried everything and I'm just not getting it.
Here is the link to the code on jsfiddle:
https://jsfiddle.net/laurynm/h6mu6hsb/
.gallery {
width: 80%;
position: relative;
}
#sidebar {
position: relative;
width: 230px;
}
Try this https://jsfiddle.net/h6mu6hsb/4/
#sidebar {
float: left;
position: relative;
width: 230px;
}
I took a stab in the dark, and made a jsfiddle demo for you to try out. In essence, I gathered different sections in wrappers, converted them to inline-block, and hope it looks kinda like what you wanted.
How about something like this so you dont have horizontal scrolling problems:
http://jsfiddle.net/espriella/fdmdwpp5/
Using display as table-cell
.sidebar{
min-width: 200px;
display: table-cell;
}
.gallery{
display: table-cell;
width: 100%;
}
I want to create a div, called 'container' that contains all the other elements on the page.
If I change the size the elements move and rearrange, -BUT- the div itself remains invisible! Using the Firefox inspector, it seems the div is -above- the page.
It seems very weird to me, as the divs are all properly nested and otherwise behave well.
My only guess is that this bit is causing some trouble; if i change the width, my layout goes crazy.
#upper {
float: left;
width: 100%;
height: 40%;
}
#lower {
float: left;
width: 100%;
height: 40%;
}
However I cannot quite pin down what is causing the issue. Any idea?
Here is my code: https://jsfiddle.net/xtaLfuLa/
I would just add display:inline-block; into container class.
#container {
width: 80%;
height: 90%;
margin-left: auto;
margin-right: auto;
background: rgb(163, 43, 43);
border-radius: 20px;
background: red;
display:inline-block;
}
This is happening because you're floating #upper and #lower to the left. You'll need to clear the float on the parent container. This is often done using a clearfix class. Add the following class to your parent container.
.clearfix {
overflow: auto;
zoom: 1;
}
https://jsfiddle.net/xtaLfuLa/3/
learn more here: http://learnlayout.com/clearfix.html
Not clear what you are looking for(share image layout) but you need to write the code for responsive layout. Make it
#results{
margin-left:0;
}
for smaller device and add it for larger device with media query..
I have three containers (div), the third div has a set width but I need the other two to be responsive. Current html setup:
<div id="page-type">
<div id="type-container">
<div>
<p id="type-title">Events</p>
</div>
</div>
<div class="type-options">
</div>
<div id="type-back">
Back to Explore
</div>
</div>
Current css:
#page-type {
float: left;
width: 100%;
background: #D2D3D5;
height: 60px;
}
#type-container {
float: left;
width: auto;
}
#type-options {
height: 60px;
width: auto;
overflow: hidden;
}
#type-back {
border-left: 1px #BDBEC1 solid;
float: right;
width: 160px;
}
I can get type-container and type-options to be on the same line and responsive but I can't keep type-back on the same line.
visual example:
----- EDIT -----
To clarify more:
type-container adjusts to fit it's content
type-back is a set width
type-option fills in the space between type-container and type-back regardless of content
type-containerand type-options fill up the whole row pushing type-back to the next line. I need type-back to stay to the right of the line while the other two are responsive.
Put a wrapper around your first two columns and then you can use CSS3's calc().
#wrapper {
width: calc(100% - 161px); /* extra px for 1px border */
float: left;
}
Demo here
IE8 Workaround - Use border-box:
#wrapper {
margin-right: -161px;
padding-right: 161px;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
IE8 Demo
In CSS3 you can use calc(X% - 160px) to reduce the width of a percentage based container by a number of pixels.
A quick example could be: http://jsfiddle.net/e3vC4/
There isn't a need to use calc for this, even though its a nice feature to have (+1) — sadly its support is still patchy in places and despite much research it's still difficult to say exactly which browser versions will work as expected (fine if you assume all modern browser users auto-upgrade however).
Depending on what your prerequisites are, you have two other options that I'm aware of:
1. Position absolute the last column
This is a simple solution, however something to be wary of is that certain older mobile devices may treat position absolute in odd ways.
In order to get this to work, all you need to do is place position: relative on your container, and position: absolute; right: 0; top: 0; on your third column... and to keep the centering of your central column correct, add margin-right: 161px.
Pos. Abs. example on JSFiddle
CSS ~ markup is as per your example
#page-type {
display: block;
position: relative; /* added */
width: 100%;
background: #D2D3D5;
height: 60px;
overflow: hidden;
}
#type-container {
display: block;
float: left;
text-align: center;
}
#type-options {
display: block;
height: 100%;
text-align: center;
overflow: hidden;
margin-right: 161px; /* added */
}
#type-back {
display: block;
position: absolute; /* added */
right: 0; /* added */
top: 0; /* added */
border-left: 1px #BDBEC1 solid;
width: 160px;
height: 100%;
}
2. Float right, and/or left, before sibling without hasLayout / shrinkwrap
This works on the basis that a floated element takes up space in the document, and a block element, by default, auto-expands to fill the remaining area that it can — as long as it hasn't been forced to rigidly define its edges with the likes of float, overflow or other hasLayout or shrinkwrap tricks.
This option is only open to you if you can re-arrange your DOM ordering i.e. place #type-back before #type-options. This won't affect the visual order, but it makes a big difference to how the layout is calculated, and is one of the reasons why you were encountering problems with your attempts. You need to have the floated elements in place before leaving the other elements to calculate their dimensions.
Float example on JSFiddle
NOTE: Changing the order of DOM elements can be of benefit, but it can also be a hindrance; it all depends on what the markup is, and who will be viewing it. For example, sometimes having actionable links higher up the DOM can be useful to tabbing and screen-reader users, but the opposite can also be true depending on the context.
MARKUP ~ note the rearranged DOM order
<div id="page-type">
<div id="type-container">
<p id="type-title">Events</p>
</div>
<div id="type-back">
<p>Back to Explore</p>
</div>
<div id="type-options">
<p>Options</p>
</div>
</div>
CSS
#page-type {
display: block;
width: 100%;
background: #D2D3D5;
height: 60px;
overflow: hidden;
}
#type-container {
display: block;
float: left;
text-align: center;
}
#type-options {
display: block;
height: 100%;
text-align: center;
overflow: hidden;
}
#type-back {
float: right;
border-left: 1px #BDBEC1 solid;
width: 160px;
height: 100%;
}
NOTE: It should be stated this version does break on to the next line when "responsed" down to a very minimal size. However, I tend to prefer to design items to disappear when space is tight, and this method lends well to that thinking.
Summary
These are just two other possible options. If you are developing for a progressive client, or yourself, then I personally would stick with the calc method. It's easier to work out what is going on, and far easier for a future developer to change.
However, sometimes often frequently all the blasted time clients want to support the widest range of devices possible (without investing the extra time and money that would be required), and in this instance you are better off with an alternative method (one that isn't going to randomly break on a manager's less than contemporary laptop, running IE 7.5? or 8.33333??? or even Netscape 4.7¿).
Unless of course, you have any leeway to fight for using the more progressive approach, which does seem to be getting easier of late.
I sat down with the designer for more clarification and to discuss alternate solutions. I'm making the third did responsive as well allowing me to use two containers: one holds page-type and type-options set to x% and another holds type-back set to y%. Doing this allows me to keep all elements responsive.
I am quite new to html/css, and I spent some time writing my own website from scratch. I have understood the very basics of the thing, but many subtleties are still unclear in my mind. Currently, I am unable to achieve a specific feature on my website, and I was hoping that maybe some of you would come up with a simple solution.
Here is what my website looks like: the colors are here to make things clearer. The four blocks "converge" toward the focal point. The top left part "Research interests" is dedicated to contain short descriptions, while the top right part "PhD thesis" is dedicated to contain either large texts or pictures. From now on, I will only focus on the top right part, where my problem occurs.
Green part :
#maindisplay
{
display: inline-block;
position: relative;
text-align: left;
width: 66.6%;
height: 80.0%;
float: right;
background-color: green;
}
Red part :
#maindisplay article
{
background-color: red;
font-family: Conv_verdana, sans-serif;
display: inline-block;
position: relative;
margin-left: 1.5%;
top: 10%;
width: 70.0%;
height: 75.0%;
overflow: auto;
}
Dark gray part :
#maindisplay p
{
background-color: gray;
font-weight: normal;
font-size: 90%;
position: absolute;
bottom: -30px;
}
I get my bottom alignment for the #maindisplay paragraphs by absolute positioning them inside the relative positioned article (and therefore, the "overflow: auto;" is here totally useless). When the text is short enough, this works like a charm and the result is exactly what I want it to be. However, when the text is longer, or when the screen is smaller (typically, my laptop), I would like things to look like this : the top of the text appears first, and a scroll bar is available. When the text is scrolled to the bottom, the bottom of the scrolled text is aligned with the bottom of the top left part, as it is in the first picture. This is achieved by setting :
#maindisplay p
{
background-color: gray;
font-weight: normal;
font-size: 90%;
position: relative;
margin: 0;
padding: 0;
bottom: 0;
}
So here is my problem : I would like the first behavior when the text is short enough, and the second behavior when it is longer than the #maindisplay article div. I was hoping that this could be done in a css-only way but I have looked for quite some time and now I am unsure about this (please note that I know precisely nothing about the javascript/jquery stuff). I am not allergic to tables, but I just don't see how to use them here.
Please let me know if there is anything unclear about this, and thanks in advance for your answers !
here's a fiddle making what you need http://jsfiddle.net/7N6Gp/ or http://jsfiddle.net/7N6Gp/1/
you need 2 div's for this one
the holder div that has position: relative;
.holder {
width: 500px;
height: 500px;
position: relative;
}
and a content div that has overflow: auto and max-height
.content {
width: 500px;
max-height: 500px;
overflow: auto;
position: absolute;
bottom: 0;
left: 0;
}
with your code . you need to wrap content in a div not p . p should only contain text or inline elements . and from your pictures it looks like it contains titles and other paragraphs (block elements)
#maindisplay p change into #maindisplay div.content