Learning my way through this...
I'm working toward setting up rows of divs - I don't want any space between them and am not sure what properties to look for to adjust as the width changes.
I'm getting either a 1px gap appearing/disappearing as the images scale, or getting one of the divs bumped down to the next line.
The odd thing is that both rows are basically the same, so I'm lost here.
Here's the current page:
http://www.turnerdesign.com/brackets/
thanks
Andrew
To lose the gaps:
Remove the height: auto; and set a height.
#media screen and (max-width: 959px)
#column700 {
width: 73%;
height: 50px;
float: left;
}
/* Do the same for the other column */
}
For gaps:
(I wrote this first, then re-read the question and was like, OMG I did a whole answer for another question as I didn't understand it at first, but just incase someone needs gaps, here's how)
HTML:
<div class="column700">
<div id="firstProject">
</div>
</div>
CSS:
#firstProject {
width: 100%;
padding: 10px;
background: blue;
}
You have multiple elements with the same id on your page. If you want to add the same style to many elements, use class.
Add style="clear: left;" to the div containing image with a canyon.
Please use this code
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
#image {
display: block
}
#container{
width: 960px;
margin: 0px auto;
}
#header{
width:100%;
height:auto;
margin-bottom: 0px;
float: left;
line-height: 0;
}
#name{
height:50px;
background:none;
width:300px;
float: left;
line-height: 0;
vertical-align: top;
}
#contact{
height:30px;
background:none;
width:auto;
float: right;
line-height: 0;
}
.image-container{
vertical-align: top;
width: auto;
height:auto;
background:#296db1;
background-size: cover;
line-height:0;
}
.div-left{
float: left;
}
#media screen and (max-width:959px){
.image-container{
float:left;
}
#container{
width: 100%
}
#column700{
width: 73%;
}
#column260{
width: 27%;
}
img {
width: 100%;
height:auto;
}
}
#media screen and (max-width:640px){
.image-container{
float:left;
}
#container{
width: 100%
}
#column700{
width: 73%;
}
#column260{
width: 27%;
}
img {
width: 100%;
height:auto;
}
}
#media screen and (max-width:320px){
.image-container{
float:left;
}
#container{
width: 100%
}
.image-container{
width: 320px;
}
img {
width: 100%;
height:auto;
}
}
.row2{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="name">
<p style="font-family:Arial; color:#d1d1d1; font-size:1.5em">Title | Description</p>
</div>
<div id="contact">
<p style="font-family:Arial; color:#d1d1d1; font-size:1.5em">Menu</p>
</div>
<div id="header">
<img src="http://www.turnerdesign.com/brackets/images/banner.jpg" block;="" style="display:">
</div>
<div class="row-container">
<!--row 1-->
<div class="row row1">
<div class="image-container div-left" id="column700">
<img src="http://www.turnerdesign.com/brackets/images/blake.jpg">
</div>
<div class="image-container" id="column260">
<img src="http://www.turnerdesign.com/brackets/images/canyonmap.jpg">
</div>
</div>
<!--row 2-->
<div class="row row2">
<div class="image-container div-left" id="column260" style="">
<img src="http://www.turnerdesign.com/brackets/images/canyon.jpg">
</div>
<div class="image-container" id="column700">
<img src="http://www.turnerdesign.com/brackets/images/warrior.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
You can also see the - jsfiddle.net demo link.
You can always think about optimizing the code further:
Optimize / minimize the number of css lines in each media-query.
Manage img parameters more smartly for all media queries.
Restructure the HTML so it becomes more manageable.
Your problem doesn't actually come from the widths applied to your divs, but because of the heights of images.
what is happening here is that in your second row, you have one 700x100 image followed by a 260x100 image. Their ratios aren't the same, so you can understand that commanding their widths will have different effects on their respective heights.
In the end, at some window width, you end up with 1px difference between your images' heights (most often the first one being higher). That causes the 3rd row to actually be pushed to the right, since it has a 1px height to fill first. However, there is only enough room for the smaller image, so the browser breaks a new line for the bigger one.
Solutions:
put a clear: left; on every image at the start of a new line. It will solve this problem, but the 1px height difference will still be there and a white line between your smaller image and the next line will appear.
PS: i'll edit this post if i find better solutions.
Related
I have two unequal responsive columns, the smaller one on the right is text and the bigger one on the left is an image. When I resize the browser window to see how the columns fit the page, it works fine until it gets to the max width 700px and the column stack onto of each other. The bottom column is fine however the top one (image) doesn't show the full image only a tiny strip going along the width of the page. how can I get it to auto adjust the height to show the full image?
I have tried setting height on the left column as auto but that didn't work and it continued to only show a small strip.
.column {
float: left;
padding: 10px;
height: 300px;
}
.left {
width: 60%;
background-image: url('http://i.imgur.com/k5gf0zz.jpg');
background-size: cover;
background-position: center;
}
.right {
width: 40%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 700px) {
.column {
width: 100%;
}
}
<body>
<div class="row">
<div class="column left";>
</div>
<div class="column right" style="background-color:#FDE4EC;">
<center> <p><font size="8">We Provide Quality Skin Care</font></p>
<p style = "font-family: Verdana, Geneva, sans-serif">Let us help you feel beautiful!</p>
<br>
<button class="button2"><b>BOOK NOW</b></button> </center>
</div>
</div>
</body>
Any help would be very much appreciated :)
img{
max-width:100%;
height:auto;
display:none;
}
.left {
width: 60%;
background:url("http://i.imgur.com/k5gf0zz.jpg") no-repeat center;
background-size:cover;
}
.right {
width: 40%;
padding: 10px 0px;
}
.row{
display:flex;
flex-wrap:wrap;
}
#media screen and (max-width: 700px) {
.column {
width: 100%;
}
img{
display:block;
}
.left {
background:none;
}
}
<div class="row">
<div class="column left";>
<img src="http://i.imgur.com/k5gf0zz.jpg">
</div>
<div class="column right" style="background-color:#FDE4EC;">
<center> <p><font size="8">We Provide Quality Skin Care</font></p>
<p style = "font-family: Verdana, Geneva, sans-serif">Let us help you feel beautiful!</p>
<br>
<button class="button2"><b>BOOK NOW</b></button> </center>
</div>
</div>
try adding img to your html with max-width:100% and height:auto for small screens and div with background for large screens!
Remove height and add min-height
.left {
min-height: auto;
}
Thanks for your topic, I agree with Chris, if we could have more info it'd be easier to know how to help.
you can also use something like this in your html file, two pics with different sizes and to use a specific pic for every page size.
<picture id="pic">
<source media="(min-width: 650px)" srcset="image.jpg">
<img src="image2.jpg" alt="same pic bigger size" style="width:auto;">
</picture>
<html>
<head>
<title>My Play Store</title>
<style type="text/css">
body{
margin:0;
}
#container{
min-width:1080px;
}
#upperbar{
background-color:#F1F1F1;
height:60px;
width:100%;
}
#logobardiv{
margin:10px 20px 10px 30px;
float:LEFT;
}
#logo{
height:39px;
width:183px;
}
#searchbardiv{
float:left;
padding:15px 0px 15px 10px;
}
#searchbar{
height:28px;
width:545px;
font-size:1em;
}
</style>
</head>
<body>
<div class="container">
<div id="upperbar">
<div id="logobardiv">
<img id="logo" src="images/logo.png"/>
</div>
<div id="searchbardiv">
<input id="searchbar" type="text" placeholder="Search"/>
</div>
</div>
</div>
</body>
In the above page that I am trying to make,the "searchbardiv" tends to move below "logobardiv" when I reduce the size of the browser window.
I just want want the two divs to be in the same line.I tried using "float:left",but it is not giving the required result.
Instead of using floats, try using display: inline-block for the two child elements and white-space: nowrap to keep them both on the same line.
Apply display: inline-block to both #logobardiv and #searchbardiv and apply vertical-align: middle (or other value as needed) to #logobardiv to take care of any vertical alignment issues.
Finally, apply white-space: nowrap to the #upperbar to keep the two child elements on the same line.
Note that for smaller enough screens, you could get horizontal scrolling. To fix this, you need to make a design decision to handle the situation. You could make the search input width smaller or the logo smaller or both, perhaps by using % widths instead to make them responsive. You have a few options available to solve the problem.
body {
margin: 0;
}
#container {
min-width: 1080px;
}
#upperbar {
background-color: #F1F1F1;
height: 60px;
width: 100%;
white-space: nowrap;
}
#logobardiv {
margin: 10px 20px 10px 30px;
display: inline-block;
vertical-align: middle;
}
#logo {
height: 39px;
width: 183px;
}
#searchbardiv {
display: inline-block;
padding: 15px 0px 15px 10px;
}
#searchbar {
height: 28px;
width: 545px;
font-size: 1em;
}
<div class="container">
<div id="upperbar">
<div id="logobardiv">
<img id="logo" src="http://placehold.it/183/39" />
</div>
<div id="searchbardiv">
<input id="searchbar" type="text" placeholder="Search" />
</div>
</div>
</div>
You Give your search bar width 545px try to reduce this when on small screen use media query:
e.g
#media(max-width:768px) {
#searchbar{
width:200px;
}
Hope this helps
search bar size is too long enough so it is displayed in next line.Set the logo size and search bar width in %.
width:70%;
Fiddle
solution 1: use % instead of pixel for width if you want divs to be flexible e.g:
#searchbar{
height:28px;
width:80%;
font-size:1em;
}
solution 2: if you don't want the divs to be resized with screen, set them as table cell:
#upperbar{
/* your current styles here */
display:table;
}
#logobardiv{
/* your current styles here */
display:table-cell
}
#searchbardiv{
/* your current styles here */
display:table-cell
}
I've been trying to get this image centered in the page for a while, and for some reason margin-left: auto; margin-right: auto; weren't doing anything. So in the spirit of wildly trying everything in sight, I stumbled on the following surprisingly correct result. My question is, why on earth does setting the width to 25% work? I would have expected 100%, or 50% at least.
This fiddle shows some other widths, which apparently behave in a nonlinear fashion: http://jsfiddle.net/mo85kkvv/
(Bonus question: is there a super-obvious way to use the margin-left/right properties instead that I'm missing?)
HTML:
<body>
<div id="bcontainer">
<img src="banner.png" alt="banner" />
</div>
</body>
CSS:
body {
margin: 0;
}
#bcontainer {
width: 25%; /* why 25%?? */
height: 50px;
display: table-cell;
text-align: center;
}
I don't know a lot about HTML but I think that the proper way to define the class container is:
.container {
height: auto;
display: block;
margin:auto;
}
This is more generic. You can use the element inspector, and see how the layers change.
Is what your after ? http://jsfiddle.net/mo85kkvv/4/
HTML
<body>
<div class="container" id="one">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="two">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="three">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="four">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div>
</body>
CSS
body {
}
.container img{
width:100%;
display: inline;
text-align: center;
margin: 0 auto;
}
#one {
width: 25%;
margin: 0 auto;
}
#two {
width: 50%;
margin: 0 auto;
}
#three {
width: 75%;
margin: 0 auto;
}
#four {
width: 100%;
margin: 0 auto;
}
It all depends what you want. Do you want the wrapper to be centered with the image floating in the center, or do you want the wrapper (in this case .container) to shrink around the image and be the one that floats in the center? I have updated your fiddle with simple examples of a few options.
http://jsfiddle.net/mo85kkvv/6/
I'm trying to create a centered div with 2 images, side by side, and have the one on the right jump under the first image when the browser scales down. And for all of it to be centered.
I tried doing it using divs but I'm stuck and can't figure out if what I'm doing is even correct. Right now the images don't scale down.
Here's a fiddle with my code:
http://jsfiddle.net/v5dejopw/1/
.wrapperlookbook {
overflow:hidden;
width: 1200px;
margin:0 auto;
padding-top: 60px;
}
#onelookbook {
float:left;
width:585px;
}
#twolookbook {
background-color: #fff;
overflow:hidden;
min-height:600px;
width:585px;
}
#media screen and (max-width: 600px) {
#onelookbook {
float: none;
margin-right:0;
}
}
img {
max-width:100%
}
Can anyone point me in the right direction?
Thanks!
My sugestion is add this in your code: if want in one line:
.wrapperlookbook {
max-width: 1200px;
width: 100%;
}
#onelookbook {
width: 50%;
}
#twolookbook {
width: 50%;
}
If want in two line:
#media screen and (max-width: 600px) {
#onelookbook {
width: 100%;
}
#twolookbook {
width: 100%;
}
}
Good luck!! ;)
The problem was about width of your elements. Check it out here:
.wrapperlookbook {
overflow:hidden;
width: 400px;
margin:0px;
margin: auto;
padding-top: 60px;
border: 1px solid green;
}
#onelookbook {
float:left;
width:200px;
}
#twolookbook {
background-color: #fff;
overflow:hidden;
min-height:600px;
width:200px;
}
#media screen and (max-width: 600px) {
#onelookbook {
float: none;
margin-right:0;
}
}
img {
max-width:100%
}
<div class="wrapperlookbook">
<div id="onelookbook">
<a href="#">
<img src="http://placehold.it/585x600" width="585" style="max-width:100%;height:auto;"></a></div>
<div id="twolookbook">
<a href="#">
<img src="http://placehold.it/585x600/c0c0c0" width="585" style="max-width:100%;height:auto;"></a></div>
</div>
Ps: I decreased the width here
I think work with bootstrap is a good option for you, since bootstrap takes care of the resizing of every element.
First, download the latest version of bootstrap from: http://getbootstrap.com/getting-started/#download
next, reference the files in the head
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
then, add a couple of div in your body
<body>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="height: 200px">
<img alt="Map of Forecast Area" src="http://www.srh.noaa.gov/wwamap/png/hgx.png" style="width: 100%; height: 100%" />
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="height: 200px">
<img alt="Map of Forecast Area" src="http://www.srh.noaa.gov/wwamap/png/hgx.png" style="width: 100%; height: 100%" />
</div>
What means this? Bootstrap works in 12-column mode. In this case, I made two with width 6 each (50%) for resolutions xs (extra small), sm (small), md(medium) and lg(large). Bootstrap will resize the divs depending on device resolution, and, if you resize the browser, the page will be resized accordingly.
This is only a basic example, but can help you as start point to use bootstrap.
Sorry if this is dumb but it is my first day learning CSS and I am following a course and creating a sample layout and I seem to have made some kind of mistake or got carried away adding my own little mods. I desperately want to fix this as I am enjoying learning and worry that if I get stuck on this I wont feel like proceeding.
I have 3 divs at the bottom on my page with the class .Featurebox within which are nested 3 other divs with a class .Boximage
For the life of me I cannot get them to line up horizontally despite floating them. I suspect it is because I have used margin-left:auto and margin-right:auto in a parent nav. I have played with this solution for a full hour LOL and so I am asking for help here as my first time.
Here is my CSS:
#maincontent {
width: 960px;
margin-left: auto; margin-right:auto;
}
body {
background-color: lightgrey;
}
h1 {
color: orange; font-family: ubuntu; padding-top: 10px;
}
header {
margin-top: 2;
width:100%;
height: 100px;
background: url(grey.png) repeat;
}
#headercontainer {
width: 960px; height: 100px;
margin-left: auto; margin-right: auto;
background-color: olive;
}
#navbar {
width: 960px; height: 20px; margin-left: auto; margin-right: auto; background-color: red;
}
#logo {
background-color: lightgrey; height: 100px; width: 100px;
}
nav {
width: 100%; height: 20px; background-color: #f0f0f0; float:left;
}
article {
width: 960px; height: 500px; background-color: orange;
}
.Featurebox {
background-color: darkgrey;
width: 310px;
height: 200px;
float: left;
}
.Boximage {
background-color:blue; width:285px; height: 130px;
float:left;
}
footer {
width: 100%; height: 80; background-color: 000000; clear: left;
}
.center {
margin-left: auto;
margin-right: auto;
}
Here is my HTML:
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<div id="headercontainer">
<div id="logo">logo</div>
</div>
<nav>
<div id="navbar">navigation bar</div>
</nav>
</header>
<div id="maincontent">
<article>article here
</article>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
<div class="Featurebox">
<div class="Boximage"</div>
I suspect your issue is the above. Look carefully, and you will see a syntax error. It should be:
<div class="Featurebox">
<div class="Boximage"></div>
For further testing purposes I suggest putting in some inline content in the box to ensure it renders. (if no height or width is specific it will be empty, this is not a problem if a width and height is specified, but I like to cover my bases.) My suggestion would be to simpyl add a paragraph with text.
<div class="Featurebox">
<div class="Boximage"><p>Box 1</p></div>
It should also be noted that if you are floating Featurebox to the left, then it's child does NOT also need to be floated. So you can remove the float: left; on .Boximage
Further more I would suggest you find a good editor to write your code in, something that will color code your elements and highlight the ends of your tags when you are clicked within an element. I personally use notepad++ and dreamweaver, though a lot of people paint a bad picture of dreamweaver, as long as you stay strictly within Code view, then it is a great application to write code with and it features a build in FTP manager.
You're missing the > after the opening part of the .Boximage tag:
<div class="Boximage"</div>
It seems to work if you correct that.
http://jsfiddle.net/CLUTP/1/