How to implement 2 different grid structures in one section? - javascript

I am trying to mimic the header-graphic navigation from this site:
http://wpengine.com/
It seems that they are not applying any grid on the header-graphic area, but having them separated as 2 divs. In their Hero block (container) area. I am looking to recreate the giant content area (fluid content box with 5 navigation buttons). Please try to stretch the right side of browser, the main navigation boxes stays at the same position and the left area (content) extend its as fluid. I am trying to create that appearance.
These are the codes below are the code I inspected from google developer tool:
/* For content navigation area */
.gwc_slide_buttons {
width: 375px;
height: 556px;
right: 0;
position: absolute;
}
/* For content area */
.gwc_slider {
left: 0;
right: 375px;
height: 556px;
position: absolute;
overflow: hidden;
}
What I have in my code:
/* For content area */
.slider_content {
position: absolute;
}
/* For the content navigation area */
.slider_content_navi {
width: 430px;
position: absolute;
}
As you can see here, I tried both absolute positioning for my content and navigation button, but it is not working as it should be compare to the code I have inspected.
Does anyone have any suggestion?
Here is the preview on jsFiddle.

This is achieved through Media Queries aka different design for different screen sizes. Your HTML will stay the same but you can apply absolutely different styles for different screen sizes.
Also I noticed that you are using Twitter Bootstrap. Check it's Grid System and the Responsive Design support.

Related

Image and button placed by percentage but are cropped when I resize the window

I'm trying to make my application responsive.
For that, the first thing I did was placing my buttons and logo by using percentages instead of pixels.
The problem is that when I resize my window to a smaller one, the buttons and logo are moving but they are also cropped on the side like this:
Here is what the button looks like before resizing:
And here is what it looks like after resizing to a smaller one:
How can I make it move but still appear in its entirety ?
Here is my CSS for this button:
#next-step{
position: absolute;
top: 90%;
left:88%
}
Change the CSS as follows:
#next-step{
position: absolute;
bottom: 1em;
right: 1em;
}
By using bottom and right instead of top and left, the reference will be the bottom right corner of your container. This way your button will never crop. You can play with the values to adjust the position of the button as you like.
Changing the position values to bottom and right might help you out. You could try this CSS code and maybe adjust the percentage values to your liking:
#next-step{
position: absolute;
bottom: 10%;
right: 12%;
}
This comes down to the way you're positioning the element.
#next-step{
position: absolute;
top: 90%;
left:88%
}
Is positioning the button based on the top-left corner.
If you were to instead use:
#next-step{
position: absolute;
bottom: 10%;
right:12%
}
It'll set the position to a similar place on-screen, but based on the bottom-right corner (you'll need to fine tune the numbers).
However, one thing to note: when using percentages, once you get below a certain screen size it can get messy, so it'd be worth looking at media queries too.

Javascript overflow in a widget in WordPress

I am using the plugin Enhanced Text Widget in WordPress to display Javascript in a sidebar widget. The script runs and displays the info, but the content overflows outside the widget area. I want to keep the content within the confines of the widget area and I've tried a few different CSS options and nothing is working to contain it.
Site is: http://dev.northwestfiretraining.com/ and its on the left sidebar under DAILY BURN INFO.
Thanks!
Your css needs to be tweaked.
The .burn class is too wide, with a width set fixed to 320px, instead of dynamic based on the width of the container div (.textwidget):
.burn {
width: 320px;
background: url(images/burn_status_bkgrd.png) center no-repeat;
height: 250px;
}
Try changing it to this:
.burn {
width: 100%;
background: url(images/burn_status_bkgrd.png) center no-repeat;
height: 250px;
}
.burn
{
width: auto !important;
}
Add this code in your style.

Center an Image Vertically in a Fixed Position Div

There are tons of questions on SO regarding vertical alignment, but I haven't discovered a clear answer to my problem.
I created a fiddle to show exactly what I'm trying to do.
HTML:
<div id="fade"></div>
<div id="fullscreen">
<img src="http://jira.seraphdevelopment.com/jmajewski/clean/uploads/pictures/n8jvxzd2476480d0.jpg" />
</div>
CSS:
#fade {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* Transparent Background */
background-color: #000;
opacity: 0.50;
}
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
/* Adding the display: block allowed me to center
the image horizontally with the margin: auto. */
display: block;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
/* This didn't work for me. */
vertical-align: middle;
/* This didn't do anything, either. */
line-height: 100%;
}
I am trying to make a lightbox of sorts, such that the user will click on an image on the page, causing that same image to load up in fullscreen mode. The first div, fade, will be used to cover the entire page with a semi-transparent black background, essentially giving the effect of the page fading away, while also making things modal.
I wanted to be able to nest the image inside the fade div, but I ran into a problem. Setting the opacity on the outer div (to create the fade effect) caused my nested image to inherit the opacity value. Thus, I added a separate div that was identical to the first one, except without the background, and nested the image inside of that.
For the record, I did manage to figure out a workaround to the opacity issue, but I haven't yet implemented it. Credit to Blowski, a SO user who posted this answer to a question regarding opacity:
I do not want to inherit the child opacity from the parent in CSS
The long story short, I have tried quite a few things now in trying to get this image to be centered vertically, but to no avail.
Keep in mind, this solution needs to work with any image!
I am certainly capable of adding a line of code to the $(window).resize() function to center the image manually, but I would like to avoid doing so, if possible. I'm very curious to learn a way around this, as I seem to run into these types of issues more often that I'd like.
Bonus: Why is vertical alignment so difficult for a browser to perform?
Here is one way centering an image in a fixed/absolute positioned div using CSS.
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
}
The trick is to use position: absolute for the img and set all the offsets to 0, and then margin: auto will center the image.
The max-width and max-height values will work as expected.
The reason this works is that the image has intrinsic dimensions, so the CSS engine has specific values to do the necessary math to center the images both vertically and horizontally.
See demo at: http://jsfiddle.net/audetwebdesign/KG99S/
Comments
Note that this technique works independently of the overlay.
Also, this works regardless of the aspect ratio of the image.
Reference
This technique follows from the CSS2 specification regarding how the horizontal and vertical margins are determined for absolutely positioned inline, replaced elements.
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
and
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height

How to show overflow content in bootstrap modal

I am using modals from bootstrap for my web/mobile application. And my intention was for my modals to fill up on the whole mobile screen when they are triggered. I have a added a custom css to make my modals 'full size'.
.modal {
&.full_size {
top: 0;
bottom: 0;
left: 0;
margin-left: 0;
width: 100%;
height: 100%;
}
}
However, on the mobile phone, although I did successfully see a full screen modal being display, I don't seem to be able to see the contents that 'overflow' from the full screen modal i.e. if the content height is greater than my screen height, I won't be able to scroll down to see the rest of my content.
How can I resolve this so that I can scroll and see all my content in my modal?
Try adding overflow:auto; to allow scrolling when the content exceeds the container's dimensions

How do website create a Horizontal Bar at Bottom of Page

I have visited some sites where when I scroll half a page, a semi-transparent horizontal column of 100-150px height appears right at the bottom of the page with an image on the left and some message, links on the right.
How can I create it?
Its just a css rule.
#footer {
position: fixed;
bottom: 0px;
margin-right: auto;
margin-left: auto;
}
Using Chrome, click CTRL-SHIFT I, then click on the magnifying glass in the bottom left-hand corner to inspect the element. That's the best way to see how they did it on the site you're looking at.
In IE, F12 gives you the Developer Tools, where the arrow selector tool does the same job. In Firefox, use Firebug.
Then just copy their HTML. And Javascript too if necessary.
Use an element with a style similar to following:
#footer {
opacity: 0.7;
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
background-color: #330000;
}
and then lay things inside it as you wish.

Categories