<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
}
Related
I am trying to build an image list, where images can have different sizes, as well as the container.
The images work according to my wishes, but the last element, the input wrapper, doesn't.
I would like to have the last item (the input file wrapper) to use the full height of the container, and be shaped as a square.
I tried multiple styles but I am unable to stop the following problems:
When there is a lot of space left in the container, the last item becomes too wide
When the container is full, the last item become too narrow
.container {
resize: both;
width:1000px;
height:200px;
border:1px solid #000;
display:flex;
overflow-x:auto;
overflow-y:hidden;
white-space: nowrap;
align-items:flex-start;
padding:0.25rem 0;
}
.container>* {
border:1px solid #000;
max-width:200px;
max-height:100%;
width: auto;
height: auto;
}
.container>*:not(:first-child) {
margin-left:1rem;
}
.inputfilewrapper {
display: inline-block;
flex:1 0 0px;
height:100%;
}
.inputfile {
display: none;
}
.inputfile + label {
display: block;
height: 100%;
}
<div class="container">
<img src="https://picsum.photos/200/300">
<img src="https://picsum.photos/300/200">
<img src="https://picsum.photos/1000/1000">
<img src="https://picsum.photos/200/300">
<img src="https://picsum.photos/200/300">
<div class="inputfilewrapper">
<input type="file" id="random123" class="inputfile">
<label for="random123">[+]</label>
</div>
</div>
The desired result is shown in red in the following picture above the actual version:
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.
I am trying to float my four links so that it is lineal and one next to the other. I am fairly new to CSS, so please bear with me. I have endlessly tried different positions properties and yet can not achieve what I want. Thanks
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin: 1px;
background:green;
}
. topbar
{
background:url(topbar.gif);
position:absolute;
top: 5px;
right: 15px;
margin: 2px;
width: 1200px;
height: 100px;
}
.navbar
{
position:absolute;
float:right;
width:1200px;
height:100px;
border-style:groove;
}
a:link {text-decoration:none;color:yellow;}
a:hover{color:red;}
#titlename
{
position:relative;top:10px;
text-align:center;
}
</style>
</head>
<body>
<div class="topbar">
</div>
<div id="titlename">
</div>
<img src="title.gif" alt="title">
</div>
<div class="navbar">
<div class="button">HOME
<div class="button">ABOUT
<div class="button">LINKS
<div class="button">CONTACT
</div>
</body>
</html>
I don't know if you've noticed since posting your question, but each of your button DIVs is missing it's closing DIV tag. This means that any CSS applied will not have the expected effect. Once you've fixed the HTML, you can use the following CSS to have each navigation item on the same line, spaced out equally, with the menu occupying the full width:
.button {
float: left;
width: 25%;
}
If you don't want the menu to occupy the full width, use padding or margin instead of specifying 25% for the width attribute, e.g:
.button {
float: left;
padding: 0 20px;
}
There are various methods to inline the elements.
1. using Flex Method
2. using table method
3. using float method
4. using display method.
Here you can check the Demo link. includes all possibility.
You can use either use float: left; or display: inline to achieve what you want.
DEMO
Just add following style to your anchor tags:
.navbar a {
float:left;
margin-right: 15px;
}
Working Fiddle
.button{
display:inline-block;
}
Link to my website: http://foxweb.marist.edu/users/kf79g/contact.php
I am having trouble with my contact page. I want the entire thing to be centered and responsive no matter what the screen size (even if you resize your window to the tiniest possible width). NOTE: Leave the large/desktop screen alone that is how I want it to look unless you find a way to make the form width bigger and responsive. I attempted to make the entire page centered on medium and small screens. However, as the page shrinks, the center attribute measurements are off a bit. The reason for this was that some had to be different so that it looked good for older browsers. The social icons are giving me trouble too. Is there any way to make the entire thing centered for all devices and browsers? I tried my best with the measurements. Any help would be much appreciated.
Here are my problems that I wish to fix:
Firefox:
On medium pages, the form is going out of bounds.
On small pages, the form is shrinking when the page is small.
On small pages, social icons are messed up.
On medium and small pages, the form is not centered evenly.
IE 7:
On medium pages and small pages, social icons are messed up.
On small pages, the form is going out of bounds.
Form is not shrinking on small screens.
On medium and small pages, the form is not centered evenly.
IE 8:
On small pages, the form is shrinking.
On medium and small pages, the form is not centered evenly.
Social icons are not as bad.
HTML:
<section>
<div id='main_section'>
<div id = "center">
<div id='details_section'>
<br/>
<h2> Stay in touch </h2><br/>
<p>I love getting feedback regarding all my projects, works, and services. You can use the quick contact form to leave a message, comments and questions.</p><br/>
<p>Your name and e-mail address are never shared, I just use them when I need to get back to you.</p><br/>
<h2> Social networks </h2><br/>
<div id = "center_icons">
<img src="images/facebook.png" alt="facebook" style="margin:1px;">
<img src="images/google-plus.png" alt="google plus" style="margin:1px;">
<img src="images/linkedin.png" alt="linkedin" style="margin:1px;">
<img src="images/github.png" alt="github" style="margin:1px;">
</div>
<br/>
</div>
</div>
<div id = "center">
<div id='contact_section'>
<form method='POST' action='contact.php'>
<span class='label'>Name:</span><br/>
<input type='text' class='textfield' name='name' size='50' maxlength='50'><br/>
<span class='label'>Email:</span><br/>
<input type='text' class='textfield' name='email' size='50' maxlength='50'><br/>
<span class='label'>Subject:</span><br/>
<input type='text' class='textfield' name='subject' size='50' maxlength='50'><br/>
<span class='label'>Message:</span><br/>
<textarea rows='5' cols='50' name='message' id='textarea' maxlength='500'></textarea><br/>
<input type='submit' value='Send' id='submit' name='action'>
</form>
</div>
</div>
</div>
</section>
Main CSS:
#details_section {
max-width:100%;
float:left;
margin-right:20px;
}
#contact_section {
max-width:100%;
margin-bottom:40px;
margin-right: 0px;
margin-top:20px;
padding:20px; /*Make this smaller for 100% responsiveness*/
border-radius:10px;
background:#f1f1f1;
box-shadow:0px 0px 15px #272727;
float:right;
}
#submit {
padding:0px 8px;
background:#c4c4c4;
width:115px;
height:33px;
border-radius:10px;
border:1px solid #8d8d8d;
max-width:100%;
}
#submit:hover {
background:#a8a8a8;
cursor: pointer;
}
div.button input {
padding:0px 8px;
background:#c4c4c4;
width:80px;
height:30px;
border-radius:10px;
border:1px solid #8d8d8d;
margin:1px;
max-width:100%;
}
div.button input:hover {
background:#a8a8a8;
cursor: pointer;
}
Large screens:
#details_section {
width:320px;
}
Medium Screens:
#center{
width: 465px;
display: block;
margin-left: auto;
margin-right: auto;
}
#center_icons{
width: 228px; /*this value is changing for IE and chrome*/
display: block;
margin-left: auto;
margin-right: auto;
}
#contact_section {
width:450px;
}
#details_section {
width: 450px;
text-align:justify;
}
#details_section h2 {
width: 450px;
text-align:center;
}
textarea, input[type="text"] {
width: 100%;
max-width: 450px;
}
textarea{
max-width: 450px;
height: 150px;
}
Small Screens:
#center{
width: 465px;
display: block;
margin-left: auto;
margin-right: auto;
}
#center_icons{
width: 228px; /*this value is changing for IE and chrome*/
display: block;
margin-left: auto;
margin-right: auto;
}
#contact_section {
width:450px;
}
#details_section {
width: 450px;
text-align:justify;
}
#details_section h2 {
width: 450px;
text-align:center;
}
textarea, input[type="text"] {
width: 100%;
max-width: 450px;
}
textarea{
max-width: 450px;
height: 150px;
}
I would recommend using an Element Inspector to get the look just right on your page. All modern browsers include them. It seems like all you need are little CSS tweaks here and there. For example, you can set your inputs to a different width in the small and medium layouts (line 116 change to width:90%).
It's important to gain a proper understanding of box-sizing and how that works. It seems like compounded margins and padding are what's causing elements to overflow. http://css-tricks.com/box-sizing/
I have a simple webpage consisting of 3 DIVs. I need a descent CSS styles that would do the following:
top and bottom divs have to be of fixed minimal width (e.g. 20 px, if not possible, down to 0 px).
middle div should be of fixed width, eg 1000 x 700 px.
When I set fixed width/height for every div, everything is fine except the screen is not stretching. If I set top and bottom divs height to auto, I have second (fixed size) div to be attached to the top side of the screen, and top div size is 0, also bottom size di is strange size.
HTML code with all CSS attributes:
<body style="background-color:#030303; margin:0px; padding:0px;">
<!--head-->
<div style="margin:0 auto; width:100%; height:auto; border:0px solid red; background-color:#181818; position:relative;">
(some images)
</div>
<!--gallery-->
<div id="galleria" style="height:700px;width:1000px; margin:0 auto; border:1px solid green; ">
<img src="img/thumb1.jpg" data-title="My title" data-description="My description">
<img src="img/thumb2.jpg" data-title="Another title" data-description="My <em>HTML</em> description">
</div>
<!--footer-->
<div style=" margin:0 auto; top:0px; width:100%; height:auto; position:relative; border:1px solid red; line-height:128px; background-color:#181818">
<div align="center" >
(some images)
</div>
</div>
</body>
Your question is a bit confusing (when you say width, do you mean height?). If I understand right, you want the three divs to add up to the total height of the viewport. I know of two ways to do this -- with absolute positioning or with display: table styles. In my experience, the first is more efficient.
<div id="topbar">Top</div>
<div id="mainarea">Middle</div>
<div id="footbar">Botton</div>
#topbar, #mainarea, #footbar { position: absolute; overflow: auto; }
#topbar { height: 20px; top: 0; left: 0; right: 0; }
#mainarea { top: 20px; left: 0; right: 0; bottom: 20px; }
#footbar { height: 20px; left: 0; right: 0; bottom: 0; }
If you want to actually assign a width, too, then get rid of the 'right' styles and assign the same width to all three (it's generally unwise to force a width on people, though).
First lets get the styling out of your HTML and into a proper CSS format. Next I stripped the HTML down to a simple form so you you can help define your question better:
http://jsfiddle.net/HF6Cc/
HTML:
<body>
<!--head-->
<div class="head">header</div>
<!--gallery-->
<div id="galleria" class="middle">
<img src="img/thumb1.jpg" data-title="My title" data-description="My description">
<img src="img/thumb2.jpg" data-title="Another title" data-description="My <em>HTML</em> description">
</div>
<!--footer-->
<div class="footer">footer</div>
</body>
CSS
body { width:1000px; margin:0; padding:0; }
.head { margin:0 auto; background-color:orange; }
.middle { margin:0 auto; background-color:lime; }
.footer { margin:0 auto; background-color:yellow; }
Now, what exactly are you looking to do with this layout?