I have a header that I set its right and left padding as 22.5%. Left side consists of logo and right side consists of search. I want them to get position according to page size. If I have small screen then padding should decrease, if I have a big screen padding must increase. How to do it?
http://forum.wpbeaverbuilder.com/support/
You see in these web sites when resolution decrease the logo and navigation(home,forum home..) get closer to corners. I want to do this.
Here the codes:
<header>
<div id="headLeft">
<img src="/img/logo.png" alt="Logo" height="65">
</div>
<div id="headRight">
<input id="search" placeholder="Aramak istediğin kelime..">
</div>
</header>
header {
height: 65px;
background-color: #373737;
padding: 0 22.5% 0 22.5%;
}
#headLeft { float: left; }
#headRight {
float: right;
border-left: 2px solid #FFF;
margin-top: 15.5px;
}
#search {
border: none;
background: transparent;
margin-left: 7.5px;
width: 200px;
position: relative;
bottom: 5.5px;
font-family: serif;
color: #FFF;
font-size: 17px;
}
This has nothing to do with padding. You can set a percentage width and min-width: 1200px (or whatever value) for the content container and center it by using margin: 0 auto;. (no padding at all)
Related
I have two columns 41% and 59% of the total screen width each. The height of the columns is 1102px.
In the first column I have 4 divs. The first one is for the navigation and it can be maximum 60px. The second one is for a logo I am using. The third one is for text and the fourth one is the trickiest one. I am using an image which does not have the same size and ratio. I want the image to get the 100% of the width.
My challenge is to get the height of the first image and the text divs to be dynamic depending on the heigh of the bottom image in the first column. For example, the margins are really big when the screen size is big :
body{
color: #fff;
font-family: Arial;
}
.wrapper{
background-color: #484848;
}
#col1{
float:left;
width:41%;
height: 1102px;
background-color: #E90649;
position: relative;
}
img#productImg{
width:100%;
height:auto;
}
img#product{
max-width:100%;
}
#col2{
float: left;
width:59%;
height: 1102px;
background-color: #124;
}
div #centerText{
width: 70%;
margin: 0 auto;
height:455px;
}
#productLogo{
margin-top: 2%;
margin-left: auto;
margin-right: auto;
display: block;
max-width: 70%;
}
.list {
padding-right: 14px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
padding-left: 4px;
color: #000;
font-size: 18px;
font-weight: lighter;
}
div.nav{
padding-top: 3%;
height:24px;
padding-left: 5%;
}
#productImg img{
width:100%;
position: absolute;
bottom: 0;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrapper">
<div id="col1">
<div class="nav">
<ul>
<li>HOME</li>
</ul>
</div>
<img id="productLogo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"/>
<div id="centerText">
<h1>#############</h1>
<p2>#############</p2>
<h3>#############</h3>
</div>
<div id="productImg"><img src="https://www.w3schools.com/css/img_fjords.jpg" /></div>
</div>
</div>
<div id="col2">aaaaaaaaa</div>
</body>
</html>
I used the #media screen-size feature but still I am not happy with the results as I have to put many lines in the CSS. Ideally, the part with the first logo (stackoverflow) and the text will be vertically aligned to center and the padding-top, padding-bottom will have the same value (percentage). The height of this div will depend on the height of the bottom image (JS parsing possible here?) and thus the text can be dynamic using the vw or vh in the CSS.
Is there an easier way to align the divs in the column and keep everything without breaking (that was the initial problem)?
I am working on a simple website and whenever I resize the window, my buttons on my top bar keep sliding down below the first line. I have no idea how to fix it. I have tried many solutions such as:
body {
width:100%;
height:100%;
}
But nothing works. Can someone tell me how to either make my page adjust to peoples window size or make it static so when it adjusts it just cuts off parts of it?
Here is my code:
<html>
<head>
<style>
#button_container {
width:100%;
height: 100%;
}
body {
width:100%;
height:100%;
position: absolute;
}
#title {
width:100%;
height: 10%;
font-family: ecuyerDAX;
font-size: 55px;
margin-top:-60px;
margin-left: 28%;
color:white;
}
button {
text-transform: uppercase;
font-family: optimus-princeps;
outline: none;
border-radius: 3px;
margin-top:1%;
color:white;
background: gray;
border:1px solid black;
height:50%;
margin-left: 1%;
margin-right: 1%;
background: -webkit-linear-gradient(gray, black);
background: linear-gradient(gray,black);
}
#bThree {
margin-right:55%;
}
#topBar {
border: 2px solid black;
border-radius: 5px;
height: 12%;
width:100%;
background:-webkit-linear-gradient(#20AB53, #0B6F15);
background: linear-gradient(#20AB53, #0B6F15);
}
</style>
</head>
<body>
<div id="topBar">
<div id="button_container">
<button id="bOne">Home</button>
<button id="bTwo">About</button>
<button id="bThree">Contact</button>
<button id="bFour">Log In</button>
<button id="bFive">Sign Up</button>
</div>
</div>
</body>
</html>
Try using fixed values in px or em instead of percentages for the width properties. They will be non-responsive and will not change width when the screen width changes.
To stop it from getting too small you would set a min-width of the container. This would make the content get cut off if the space gets smaller.
min-width: 1000px;
If you want to make it responsive it will be trickier, either through using media queries or flexbox would be easier.
Your buttons are fixed width in px therefore as the width gets less the buttons take more and more space up until they eventually do not fit and need to wrap.
If your buttons were a percentage width they would not wrap, though it would not be a good solution.
I think doing a float:right for the right hand two would stop them wrapping so early (and float:left for the left hand three). Though they would still wrap once the left hand and right hand ones meet each other.
Give a #bThree margin-right isn't good idea. You can replace it with #bFour, #bFive { float: right; }
It is possible to specify all the margin properties in one property: margin: top right bottom left. As your example you can change it to: margin: 1% 1% 0 1% or margin: 1% 1% 0. Googling "Shorthand property" for more explanation.
body {
width:100%;
height:100%;
position: absolute;
margin: 0;
}
#topBar {
border: 2px solid black;
border-radius: 5px;
background: -webkit-linear-gradient(#20AB53, #0B6F15);
background: linear-gradient(#20AB53, #0B6F15);
}
button {
text-transform: uppercase;
font-family: optimus-princeps;
outline: none;
border-radius: 3px;
margin: 1%;
color:white;
background: gray;
border:1px solid black;
line-height: 25px;
background: -webkit-linear-gradient(gray, black);
background: linear-gradient(gray,black);
}
#bFour, #bFive {
float: right;
}
<div id="topBar">
<div id="button_container">
<button id="bOne">Home</button>
<button id="bTwo">About</button>
<button id="bThree">Contact</button>
<button id="bFour">Log In</button>
<button id="bFive">Sign Up</button>
</div>
</div>
I have two divs in my application. How can I make my left div to fit all space till right div. Right one can be text or image with any width.
<div id="header" class="header">
<div class="logo">
<img src="/Content/images/my_logo.png" alt="" />
</div>
<div class="logoClient">
Test Client /*here can be text or image with ANY SIZE */
</div>
<div class="clear"></div>
</div>
In this example I've done with fixed widths(700px and 200px), but this is wrong, because right one's text is dynamic and I want to left green bar be dynamic too.
http://jsfiddle.net/C5GL6/1/
Another approach with table, table-cell css options... but again... can't make left green bar fit all space.
http://jsfiddle.net/sjfQj/
How can I achieve this?
Remove width and add float:left to both the divs
.header
{
width: 950px;
font-family:Helvetica, Arial, sans-serif;
display:table
}
.logo {
height: 55px;
padding: 10px 20px;
background: #004B35;
display:table-cell;
}
.logoClient
{
display:table-cell;
height: 55px;
line-height: 55px;
padding: 10px 0px;
margin:0px -10px 0px 0px;
font-size: 30px;
color: #004B35;
overflow:hidden;
font-weight: bold;
text-align: right;
background: red;
}
DEMO Updated
Remove the width size in div
Edited fiddle
http://jsfiddle.net/C5GL6/2/
.logo {
float: left;
height: 55px;
padding: 10px 20px;
background: #004B35;
}
I have a problem with my pixel calculations not adding up.
I have a main div (#page) that is: 980px wide
It has a child div (#content) that is also: 980px wide
Inside the div (#content) there are two divs (#left-pane), which is 300px wide and (#right-pane), which is 676 px wide.
Both of them have a 1px border all the way around - looking across the site horizontally this should give 4px in width.
Therefore,
300px + 676px + 4px = 980px
Despite this, my div (#right-pane) moves down below the div (#left-pane). Why?
I have padding and margin set to NONE on both of them.
HTML:
<head>
<title>Brazil Learner | The easy was to master Brazilian-Portuguese</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div id="top">
<img class="logo" src="images/logo.png" />
<ul class="social">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="nav">
<div class="nav-button">Home</div>
<div class="nav-button">Lessons</div>
<div class="nav-button">Guides</div>
<div class="nav-button">About us</div>
</div>
<div id="content">
<div id="left-pane">
</div>
<div id="right-pane">
</div>
</div>
<div id="footer">
<div>
</div> <!-- Page closer -->
</body>
</html>
CSS:
html,body,p,ul,li,img,h1,h2,h3 {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
a {
text-decoration: none;
color: black;
}
#page {
width: 980px;
margin: 0px auto;
}
/* Top */
#top {
border: 1px solid black;
overflow: hidden;
padding: 30px 30px;
}
.logo {
float: left;
width: 130px;
height: 130px;
}
.social {
float: right;
margin-right: 40px;
}
.social li {
display: inline;
margin: 0px 10px 0px 0px;
}
/* Nav */
#nav {
border: 1px solid red;
overflow: hidden;
margin-bottom: 20px;
}
.nav-button {
float: left;
width: 100px;
margin-right: 6px;
background-color: grey;
text-align: center;
}
/* Content */
#content {
margin-bottom: 20px;
overflow: hidden;
width: 980px;
}
#left-pane {
float: left;
width: 300px;
height: 700px;
border: 1px solid green;
}
#right-pane {
float: right;
width: 676px;
height: 700px;
border: 1px solid black;
}
/* Footer */
#footer {
float: left;
width: 980px;
height: 70px;
border: 1px solid blue;
}
I'm not sure if this will work or not, but add this and see if it works.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
What browser are you using to test your site?
I tossed up your code on a fiddle, and it appears just fine in my Firefox, which suggests that you're probably looking at it in IE, and possibly either in a non-standards mode, or an old version.
If that's the case, then it's due to how IE (namely, old versions), handle the box model and math. To IE, 300px + 676px + 4px > 980px . The easiest way to fix this is to reduce something that affects the width by 1-2px, and it will probably fix it.
To consider a width of a div, there are 4 comoponents you should think about
The width of the div itself (this is where your text will be for example)
The padding width (surrounding the width mentioned in point 1 above)
The width of your border (surrounding the padding)
The margin (surrounding the border)
So, if you search for CSS Box Model (some examples are here http://www.w3.org/TR/CSS2/box.html and here http://www.w3schools.com/css/css_boxmodel.asp), you will be able to see the box model that will help you with that. Also using jQuery you can retrieve the width of each section using the following methods: .width(), .innerWidth(), and .outerWidth(). Note you may need to do some calculations to finds border width, padding width, or margin width.
Read CSS documentation and jQuery documentation to have a clearer idea of how those work. Sometimes you may need to utilize jQuery to make the width calculations for you properly if you need some exact values with variable width objects.
Hey guys I am having trouble with keeping things aligned on my website. Here is an example of what the website should look like:
Now, here is where it makes unaligned.. When I resize the window to be smaller, the Text shifts over like so:
Currently these are the css attributes applied to my tag which is on the text.
#header_title_container {
width: 1000px;
margin: 0px auto;
padding-left: 85px;
padding-top: 50px;
}
#header_title {
font-size: 33px;
color: #FFFFFF;
font-weight: bold;
}
What would the proper way to approach always having "Title" aligned with the corner of the darkest gray box?
Thanks.
Because your title container has padding inside it, the text "Title" is kept at least 85px from the screen edge. Because it's left-aligned, that means its left-hand edge is always at 85px.
So, when your sidebar gets smaller than 85px, the text cannot align with it.
You could fix this by fixing the size of the sidebar, by eliminating the padding-left directive and replacing it with an element sized as the sidebar is (or replacing it with the same amount as your sidebar width!), or by setting min-width on the sidebar.
Is this the kind of result you are after?
http://jsfiddle.net/2ScZZ/5/
html
<div id="container">
<div id="header_title_container">
<div id="sub_header_title_container">
<div id="header_title">
Title
</div>
</div>
</div>
<div id="middlebit">
</div>
</div>
css
#container {
background-color: lightgray;
}
#header_title_container {
width: 100%;
background-color: black;
}
#sub_header_title_container {
width: 900px;
margin: auto;
padding-right: 20px;
}
#header_title {
font: 33px verdana;
color: white;
padding: 50px 0 10px 0;
}
#middlebit {
margin: 0px auto;
width: 900px;
height: 100px;
background-color: gray;
}