I want my website to have this horizontally split background look while keeping the content in a container of 980px, like this site http://votezachandleah.com/
I have done this by setting a height and background color to the divs but when i put them in the container it cuts the background color down to 980px...
#container {
margin: 0 auto;
width: 980px;
}
#another_section {
background-color: #66cc33;
height: 650px;
width: 100%;
}
#background {
background-color: #FFFFFF;
color: #333333
height:600px;
text-align: center;
width: 100%;
}
HTML:
<div id="container">
<div id="background">
</div>
<div id="another_section">
</div>
</div>
You should give the body the same colors as the container.
Related
I'm trying to figure out a way of making the image div having and keeping an aspect ratio of 3:2 with different web browser sizes (for mobile responsiveness etc). I want to be able to re-size my browser window and the image to always have a 3:2, so I want the image height to also re-size.
Is there any way of achieving this with my current code? I'd also like to be able to make the blue text div smaller without having to make the image above bigger, because if I reduce the height percentage of the blue div, I'll have to increase the picture div above to make up the 100% parent element's height, but this will throw the aspect ratio of the picture div out.
I'm not sure how to achieve this as it's more confusing than I thought.
Appreciate any help, thanks...
#bg {
width: 100%;
height: 300px;
background: yellow;
}
#window-container {
width: 30%;
height: 200px;
background: orange;
}
#img {
background: url('http://www.livescience.com/images/i/000/036/988/original/elephants.jpg');
height: 67%;
width: 100%;
background-size: cover;
background-position: center;
}
#text-wrap {
background: lightblue;
width: 100%;
height: 33%;
}
<div id="bg">
<div id='window-container'>
<div id='img'></div>
<div id='text-wrap'>text here</div>
</div>
</div>
May this be what you want?
#bg {
width: 100%;
background: yellow;
display: table;
}
#window-container {
width: 30%;
background: orange;
display: block;
}
img {
width: 100%;
height: auto;
}
#text-wrap {
background: lightblue;
padding: 10px;
}
<div id="bg">
<div id='window-container'>
<img src="https://www.livescience.com/images/i/000/036/988/original/elephants.jpg" alt="">
<div id='text-wrap'>text here</div>
</div>
</div>
You can do it with the img element and Flexbox:
#bg {
background: yellow;
}
#window-container {
display: inline-flex; /* only takes the contents width */
flex-direction: column; /* stacks children vertically */
background: orange;
}
#text-wrap {
background: lightblue;
}
img {
display: block; /* removes bottom margin/whitespace */
/*height: 66.66%; more accurate, needs to be commented out in order to work in Chrome, in FF it works perfectly, so the solution is to use properly cropped (3:2 ratio) locally stored images, luckily that's not the case with the current image*/
max-width: 100%; /* horizontal responsiveness */
max-height: 100vh; /* vertical responsiveness */
}
<div id="bg">
<div id='window-container'>
<img src="http://www.livescience.com/images/i/000/036/988/original/elephants.jpg" alt="">
<div id='text-wrap'>text here</div>
</div>
</div>
I have pure CSS image slider which I want to have positioned (margin:auto) with text underneath. Slider images are absolutely positioned as they are stacked. I can't figure out how to position divs around it all. I have content and wrapper divs with relative position. Image size should be responsive (therefore max-width:100%) but wrapper or content divs can be exact size. Or maybe they don't need to either?
This is what I am after:
And this is what I managed so far: www.jsfiddle.net/1qxxnxbf/1/
If your image slider is a carousel, you can't make it responsive without js. If you give your slider a height in the css, you can adjust it in the js to make it responsive.
The only other thing you can do is maintain an aspect ratio. So in your example you have 350x220 images. so If you get your padding-bottom on your .slider class to 62.857% (roughly 220/350) you get a variable height based on the width. If your width grows/shrinks, the height will grow/shrink as well.
http://jsfiddle.net/1qxxnxbf/2/
Edit: I just noticed that none of your code around the slider is responsive. Why are you trying to make the slider responsive?
Checkout this design
https://jsfiddle.net/jalayoza/zvy87dcv/9/
HTML code
<div class="content">content
<div class="wrapper">wrapper
<div class="slider">
<img src="https://placeimg.com/350/220/any" class="slide" alt="slide1">
<img src="https://placeimg.com/350/220/nature" class="slide" alt="slide2">
<img src="https://placeimg.com/350/220/abstract" class="slide" alt="slide3">
</div>
<!-- text should go underneath the image -->
<div class="text">
<div class="text_left">
left text
</div>
<div class="text_right">
right text
</div>
</div>
</div>
</div>
CSS code
.content {
width: 500px;
background: #fff;
margin: auto;
}
.wrapper {
max-width: 400px;
position: relative;
background: purple;
margin: auto;
padding:10px;
}
.slider {
margin: auto;
left: 0;
right: 0;
max-width: 100%;
position: relative;
padding-bottom: 62.857%;
}
.slide {
max-width: 400px;
margin: auto;
position: absolute;
opacity: 0.5;
width: 100%;
}
.text {
max-width: 100%;
position: absolute;
background: transperant;
opacity: 0.9;
bottom:10px;
width: 95%;
}
.text_left {
max-width: 50%;
background: #fff;
float: left;
text-align: left;
padding:5px;
}
.text_right {
max-width: 50%;
background: #fff;
float: right;
text-align: right;
padding:5px;
}
Hope you will like this design
I would like my home page for a website to be responsive across multiple screens (& thus I have been told to use percentages) and I want the website to consist of four parts:
A Navigation Bar at the top of the screen that stretches to the edges of the screen on both sides, including the top. To make this simple, I'll have the background color be black. [Approx. 10% of the height of the page from the top]
Then I want an area of content in the "Middle" portion of the homepage with a background color of green. [60%]
Towards the bottom I want a smaller area with a background color of blue. [20%]
A Footer the same size as the navigation bar that has a color of black as well. [10%]
My problem is this:
- How do I target, or what do I need to do to have the div's inside of the main and footer tags be the colors I want them to be and their respective heights?
P.S. I am capable of changing the background color for the navigation bar, but nothing for the main or footer elements works.
<html>
<head>
<!--Header Stuff-->
</head>
<body>
<div class="wrapper">
<nav id="navigaton_bar">
<!--Navigation Stuff-->
</nav>
<main>
<div class="home_body">
<!--Content-->
</div>
<div class="lower_home_body">
<!--Content-->
</div>
</main>
<footer class="footer_bar">
<!--Footer Stuff-->
</footer>
</div> <!--END OF WRAPPER-->
</body>
</html>
Here is the CSS Code:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#navigation_bar {
background-color: black;
position: absolute;
height: 10%;
width: 100%;
}
.home_body {
background-color: green;
height: 60%;
width: 100%;
}
.lower_home_body {
width: 100%;
height: 20%;
background-color: blue;
}
.footer_bar {
width: 100%;
height: 10%;
background-color: black;
}
Problems with your code:
Typo in id attribute of nav: navigaton_bar (vs. navigation_bar in CSS).
You need to set height to 100% for the wrapper element.
You need to set height to 80% for the main element, and then use 75% and 25% for the two contained divs in order to achieve 60% and 20% of the overall page height.
You shouldn't have absolute positioning on the navigation bar.
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.wrapper {
height:100%;
}
#navigation_bar {
background-color: black;
height: 10%;
width: 100%;
}
main {
height:80%;
}
.home_body {
background-color: green;
height: 75%;
width: 100%;
}
.lower_home_body {
width: 100%;
height: 25%;
background-color: blue;
}
.footer_bar {
width: 100%;
height: 10%;
background-color: black;
}
<div class="wrapper">
<nav id="navigation_bar">
<!--Navigation Stuff-->
</nav>
<main>
<div class="home_body">
<!--Content-->
</div>
<div class="lower_home_body">
<!--Content-->
</div>
</main>
<footer class="footer_bar">
<!--Footer Stuff-->
</footer>
</div> <!--END OF WRAPPER-->
I learn more every day, but so far, I have learned responsive design in CSS uses percentages for width of the page, not height.
Responsiveness usually involves beginning the design in the mobile screen size, then adding content as the screen size gets larger. It also means that users usually scroll down to see more and nav bar items that would be horizontal on a full-sized desktop would be stacked on top of each other on a mobile screen size, or minimized and represented by an icon or "menu", to be touched by the user, thereby displaying a stacked menu.
Hope this link helps.
Add basic divs and content to the html file, then start styling with the CSS file for color and height.
Try vh instead of %, for example
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
#navigation_bar {
background-color: black;
position: absolute;
height: 10vh;
width: 100%;
}
.home_body {
background-color: green;
height: 60vh;
width: 100%;
}
.lower_home_body {
width: 100%;
height: 20vh;
background-color: blue;
}
.footer_bar {
width: 100%;
height: 10vh;
background-color: black;
}
I have a content div with a background that is centered within the wrapper container. I would like to know how to keep this background image centered, when you resize the browser window to narrower than 500px background image.
Right now, it starts to cut off the image from the right side.
http://jsfiddle.net/kon0w3t3/1/
div.wrapper {
width: 100%
}
div.content {
background: url(http://24.media.tumblr.com/tumblr_lbi4ltLmYL1qb23z5o1_500.jpg)
no-repeat scroll center 0 transparent;
width: 500px;
height: 500px;
margin: 0 auto;
display: block;
}
<div class="wrappper">
<div class="content"></div>
</div>
Add max-width: 100% to your content div. This will prevent it from expanding beyond the size of the wrapper, keeping the background centered.
div.wrapper {
width: 100%
}
div.content {
background: url(http://24.media.tumblr.com/tumblr_lbi4ltLmYL1qb23z5o1_500.jpg)
no-repeat scroll center 0 transparent;
width: 500px;
height: 500px;
margin: 0 auto;
display: block;
max-width: 100%;
}
<div class="wrappper">
<div class="content"></div>
</div>
Updated fiddle: http://jsfiddle.net/eb51hxj1/
I've a html structure like:-
<body>
<div class="header">header</div>
<div class="content">
hello
</div>
<div class="footer">footer</div>
</body>
And the applied style on it are:-
<style>
body {
padding: 0px !important;
margin: 0px !important;
}
.header {
height: 30px;
background: gray;
}
.footer {
height: 30px;
background: green;
position: fixed;
bottom: 0px;
width: 100%;
}
.content{
background: yellow;
}
</style>
What I want is, the content div's height will be equal to the full height of the window except the header & footer part. Currently I'm just seeing a small yellow strip for the content part, as the text within it very minimal, the rest of the page is white. I want, the content div will occupy that place. I tried to use height : 100%; in the content div, but it didn't work. please help.
Try to modify your content class like:-
.content{
background: yellow;
position: fixed;
width: 100%;
top: 30px;
bottom: 30px;
}
The top and bottom is 30px as the height of header and footer is 30px. it'll work for you.
Try making a div class="wrapper" that surrounds your div class="content"... In the css give the .wrapper 100% width and height. I hope that helps.