I have a webpage with responsive design, whose body I have set to max-width: 500px; and a div 'arrow' whose margin-left:45%. When screen size goes beyond 500px, the body stays fine and fixed, but since the div arrow's margin-left is 45% of screen size, it starts moving in the wrong direction.
Is there a way to set a max on margin-left so that arrow div doesn't move beyond a point even if screen-size keeps increasing?
CSS Code is below:
.arrow {
background-color:#ECEFF5;
width: 30px;
margin-top: -12px;
position: absolute;
margin-left: 45%;
}
html, body {
margin: 0 auto;
}
body {
background-color: #ECEFF5;
font-weight: lighter;
max-width: 500px;
}
And HTML is:
<body>
<div class="userdata">
<h2 style="font-weight:bold;"> First Name</h2>
<input class="input" type="text" name="firstname">
</div>
<div class="arrow">
<img src="arrow.png" style="position:absolute; width: 30px;">
</div>
<div class="instructions" id="test">
<h5>Step 1/7</h5>
<hr width="100%">
<h6 >Write your name here</h6>
<a href="xyz.html" class="button-nav" > Back </a>
</div>
Add position:relative; to the body. Then the margin will be 45% of the body rather than the window.
Eg:
.arrow {
background-color: red;
width: 30px;
margin-top: -12px;
position: absolute;
/* margin-left: 45%; */
left: 45%; /* <- why not just position left rather than using a margin? */
}
html, body {
margin: 0 auto;
height: 100%; /* <-just for demo */
}
body {
background-color: #ECEFF5;
font-weight: lighter;
max-width: 500px;
border: 1px solid red; /* <-just for demo */
position: relative; /* <- make relative */
}
<div class="arrow">arrow</div>
try with %50 margin-left and - width/2 left position to centre
.arrow {
background-color:#ECEFF5;
width: 30px;
margin-top: -12px;
position: absolute;
margin-left: 50%;
left:-15px;
}
Remove position: absolute and make margin-left:auto;
Such that:
.arrow {
background-color:#ECEFF5;
width: 30px;
margin-top: -12px;
margin-left: auto;
}
Related
I have a div that I am wanting to rotate -20deg. I have gotten it to do just that, the problem I am facing is that it is not displaying it across the whole screen.
It is obviously just displaying a div that is 100% width and 100% height. What I am wanting it to do is cover the whole screen at an angle, so you can not see the left/right corners. If I extend the width above 100% it works but that is only going to push the width of the entire browser out.
Is there any way to get it to display at an angle so that it doesn't show the corners and is across the whole screen?
Fiddle: https://jsfiddle.net/2dhkk03b/
.content {
width: 70%;
margin: 0 auto;
position: relative;
height: 700px;
}
.intro {
width: 60%;
text-align: left;
position: absolute;
top: 50px;
color: black;
font-weight: 300;
font-size: 2em;
}
.para_txt {
padding-top: 40px;
}
.intro p {
font-size: 24px;
}
.slide {
position: relative;
width: 100%;
background-color: red;
height: 400px;
transform: rotate(-20deg);
}
<div class="content">
<div class="intro">
<span>Hi there!</span>
<p class="para_txt">My name</p>
</div>
</div>
<div class="slide"></div>
You can use a pseudo element for the rotated rectangle and set overflow hidden on the parent div to hide the corners and prevent the bottom scrollbar :
.content {
width: 70%;
margin: 0 auto;
position: relative;
height: 700px;
}
.intro {
width: 60%;
text-align: left;
position: absolute;
top: 50px;
color: black;
font-weight: 300;
font-size: 2em;
}
.para_txt {
padding-top: 40px;
}
.intro p {
font-size: 24px;
}
.slide {
position: relative;
height: 1000px;
overflow: hidden;
}
.slide:after {
content: '';
position:absolute;
top:35%;
width:100%; height: 30%;
background: red;
transform: rotate(-20deg);
}
<div class="content">
<div class="intro">
<span>Hi there!</span>
<p class="para_txt">My name</p>
</div>
</div>
<div class="slide">
</div>
The problem is the corners of the div are square so if you rotate a rectangle x degrees you will lose some width.
The ideal solution would be to increase the size and minus the left margin for example.
width: 180%;
margin-left: -40%;
Thanks
I have adjusted web-tiki's responsive square elements and I want to create a login screen.
On the login screen I want to use a header, and have the rest of the page fill the height and width of the screen precisely. It should look as follows filling the width and height:
Right now the code does not accomplishes this since the [FILL REST OF WIDTH AND HEIGHT WITH BACKGROUND IMAGE] part just resizes outside of my control.
HTML:
<div id="top">
<h1>My header</h1>
</div>
<!-- Fixed main screen -->
<div id="login-screen" class="bg imgloginscreen">
<div class="content rs">
<div class="float-left">Some text, blabla</div>
<div class="float-right">
<form>
<input type="text" value="Username"/><br/>
<button type="submit">Login </button>
</form>
</div>
</div>
</div>
CSS:
/* Responsive square elements stylesheet is adjusted from http://jsfiddle.net/webtiki/MpXYr/3/light/ which was designed by http://web-tiki.com/ */
#top {
clear: both;
margin: 0.25%;
width: 99.5%%;
padding: 0.1%;
background-color: #000;
color: #fff;
}
.imgloginscreen {
background-image: url('http://upload.wikimedia.org/wikipedia/en/3/37/Leaves.JPG');
}
.content {
position: absolute;
height: 90%; /* = 100% - 2*5% padding */
width: 90%; /* = 100% - 2*5% padding */
padding: 5%;
}
/* For responsive images */
.content .rs {
width: auto;
height: auto;
max-height: 90%;
max-width: 100%;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
/* Not sure how to make it fill the rest of screen? */
#login-screen {
float: left;
position: relative;
height: 99.5%;
width: 99.5%;
padding-bottom: 50%;
margin: 0.25%;
overflow: hidden;
background-color: #1E1E1E;
}
body {
font-family: 'Lato',verdana, sans-serif;
font-size: 20px;
color: #fff;
text-align: center;
background: #ECECEC;
margin: 0;
}
I hope someone can help me make it fit in the screen.
Thanks.
JSFiddle: http://jsfiddle.net/2shygbcy/2/
I would recommend trying a more general approach.
HTML & CSS:
body {
margin: 0;
height: 700px; /* adjust according to your screen height */
overflow-y: hidden;
}
#header {
background: #000;
color: #fff;
text-align: center;
padding: 10px 0;
}
#content {
height: 100%;
background: #1E1E1E;
padding-top: 20px;
text-align: center;
}
input[type="submit"] {
margin-top: 10px;
}
<div id="header">
<h1>My Header</h1>
</div>
<div id="content">
<input type="text" placeholder="username" />
<br/>
<input type="submit" value="Login" />
</div>
Hey check this is what you are expecting
http://jsfiddle.net/2shygbcy/1/
Use vw and vh Measurements do not forget box-sizing - CSS
*{box-sizing: border-box; padding: 0; margin: 0}
.imgloginscreen {
width: 100wv;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-image: url('http://upload.wikimedia.org/wikipedia/en/3/37/Leaves.JPG');
}
Hello i have a problem with my images in divs.
jsFiddle
.navbar {
position: fixed;
z-index: 1000;
height: 100%;
width: 60px;
left: 0px;
top: 0px;
background-color: #2e2d2d;
border-right: 1px solid #c6c5c5;
}
#works {
position: relative;
margin-left: 60px;
height: 100%;
}
.left {
position: relative;
width: 50%;
float: left;
}
.right {
position: relative;
height: 100%;
width: 50%;
float: left;
}
#works .up {
width: 100%;
height: 50%;
}
.up h1 {
font-family: ralewayregular;
text-transform: uppercase;
text-decoration: none;
font-size: 10px;
padding: 10px 15px;
}
.up h2 {
font-family: ralewayregular;
font-size: 5pt;
padding: 1px 15px;
}
.down_1 {
float: left;
width: 50%;
height: 50%;
}
.down_2 {
float: left;
width: 50%;
}
<div class="navbar">
<a class="menu-trigger"></a>
</div>
<section id="works">
<div class="all">
<div class="left">
<img src="http://i.telegraph.co.uk/multimedia/archive/02194/Bank2_2194348b.jpg" width="100%">
</div>
<div class="right">
<div class="up">
<h1>bl bla</h1>
<h2>/asdasda <br /> as : VENEZIA
/ SELLEKTOR / SUGARPILLS / NIKKI LISSONI</h2>
<div class="arrow"></div>
</div>
<div class="down_1">
<img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" width="100%" height="100%" />
</div>
<div class="down_2">
<img src="http://cutebabywallpapers.com/wp-content/uploads/2014/09/cute-a-little-baby-and-cat-pictures.jpg" width="100%" />
</div>
</div>
</div>
</section>
Div left must have the same hight like div right. Both should end in one line.
How to do this without giving them hight, to not strech my images? Div up and down should have 50% height but its not working.
Someone can help me solve it?
For them to to be the same height, there most be some measure, strict height or min-height.
For the height to measure, do something like:
.left, .right {
width: 100%; /* Adjust as needed */
min-height 50%; /* best to be the same as what you assume would
be the height of the taller both DIV's so that nothing will be cut off */
}
For your image not to be distorted, do something like:
.right img, .right img, {
width: 100%;
height: auto; /* Set the height to auto to give the
image a breathing space to reduce distortion */
}
I am trying to create 2 side banners (left and right) with fixed positioning, and a centered container for the content.
The problem is that when minimizing the screen, the 2 side banners cover the centered container. I need a CSS solution to set the minimum width of the view to 860px; after which, the window becomes scrollable and divs do not overlap. The perfect solution is:
The HTML I am using is as such:
<div class="left" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; left:0px; width:180px;">
</div>
<div class="center" style="margin:100px 180px 0 180px;">
<div style="width:100%;">
<div style="width:500px; margin:0 auto;">
</div>
</div>
</div>
<div class="right" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; right:0px; width:180px;">
</div>
The above code prevents the left bar from overlapping the center container; but the problem is still present with the right bar.
This is a fiddle of the code: preview
You need to wrap the three DIVs in a wrapping DIV and set the min-width to prevent the overlap. This prevents it from getting narrower than the three columns. Add up the widths, set that as the minimum.
Here is a pure HTML/CSS solution for you , tell me if it is not exactly what you needed.
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color : red;
width : 400px;
margin-left : auto;
margin-right : auto;
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
height : 700px;
}
.innertubetop{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
</head>
<body>
<div id="maincontainer" style = "min-width : 800px;"> <!-- this will be sum of width of all three columns-->
<div id="topsection"><div class="innertubetop"><h1>Hello iam navigation bar</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Center Column </b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b></div>
</div>
</div>
</body>
</html>
The problem you are in is because of position: fixed; since that object is taken out of the workflow the other objects can't push it away. I was able to get a nice and fully responsive layout to work. (Let me know how it is)
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
Fixed positioned elements can overlap other elements.
Updated answer to better suit his needs (JSFIDDLE, remove the show, in the url, to see code)
Okay what I am doing here is using css media queries to change the layout.
Here is the html,
<div class="wrap">
<nav></nav>
<div class="content"></div>
<section class="lSide"></section>
<section class="rSide"></section>
</div>
Now the media query,
#media only screen and (max-width: 680px) {
.content {
width: 90%;
margin-bottom: 10px;
}
.lSide, .rSide {
position: relative;
width: 90%;
height: 100px;
margin: 10px auto;
bottom: 0;
}
}
Don't forget to add this to your head on your html file,
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
OLD answer
The CSS, (JSFIDDLE, remove the show to see code)
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: tan;
}
.wrap.active {
min-width: 750px;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20%;
background: brown;
z-index: 101;
}
.lSide {
background: #3b3b3b;
position: fixed;
left: 0;
top: 20%;
width: 200px;
height: 80%;
}
.content {
width: 300px;
height: 600px;
background: #c1c1c1;
margin: 0 auto;
position: relative;
z-index: 100;
top: 20%;
}
.rSide {
background: #3b3b3b;
position: fixed;
right: 0;
top: 20%;
width: 200px;
height: 80%;
}
.rSide.active {
display: none;
}
The JS, (updated)
$(window).resize(function() {
if ($(window).width() < '750') {
$('.wrap, .rSide').addClass('active');
}
else {
$('.wrap, .rSide').removeClass('active');
}
});
One solution I have, refer to fiddle next to css, is to remove the right side when a screen size is to small.
I have three DIV and inside the DIV, I would like to float the "Learn More" to bottom right so it will be on top of the grey background.
CSS
/* the div for LEARN MORE */
#trt {
z-index: 9999999999999;
position: relative;
float: right;
bottom: 0; // not working
top: 12; //not working
}
/* the entire div */
.main .cols { padding-left: 2px; padding-right: 0px; padding-top: 10px; }
.main .cols .col { width: 315px; height: 108px; float: left; background: url(images/tempf.png) no-repeat 0 0; }
.main .cols .col:after { content:''; width: 100%; clear: both; }
.main .cols .col + .col { padding-left: 20px; }
.main .cols .col img.hid { float: left; width: 129px; height: 108px; }
.main .cols .col-cnt { width: 183px; float: right; }
.main .cols .col .more { font-weight: bold; color: #0206AA; }
HTML
<div class="main">
<section class="cols">
<div class="col">
<a href="link.aspx">
<img class="hid" src="css/images/orgNews.png" alt="" />
</a>
<div class="col-cnt">
<h3 style="color: #FFFFFF;">Organization News</h3>
<p style="color: #FFFFFF;">Interfaith Medical Center related news and updates</p>
<div id="trt">
<img src="css/images/arrow.png" width=11 height=11 align=absmiddle />
Learn More
</div>
</div>
</div>
</section>
</div>
CSS - After Edit
.trt {
z-index: 9999999999999;
position: absolute;
bottom: 3px;
right: 3px;
}
...
.main .cols .col-cnt { width: 183px; float: right; position: relative; }
...
This CSS worked:
.trt {
z-index: 9999999999999;
position: absolute;
top: 85px;
right: 3px;
}
set col-cnt div to position: relative set trt to position: absolute; bottom:3px; right:3px; that should get you where you need to be.. also, trt should be a class if it is being reused
First at all, you must set parent of #trt to relative.
#parent-of-trt {
position: relative;
}
And set #trt to absolute
#trt {
position: absolute;
left: 4px;
bottom: 5px;
}
Your float: right isn't working because of a width issue on the #trt div. Basically it's extending 100% of the width and so it can't technically go left or right. Instead of floating, just use...
#trt { text-align: right; }
???
As for getting it pushed down onto that grey line, add some margin-top to #trt to do that...
Other solution would be to use position: absolute; but would be less preferable.
Maybe use position: absolute; instead of relative
change position as fixed like following:
position:fixed;
it should work.