The is a boostrap example, as you can see the span4 is using pull-right to float to the right, but the test block is position from the beginning of the block so it appear to the left instead of right in the demo.
What I want is make it position from the real span4 position, i.e. right instead of left
<!DOCTYPE html>
<html lang="en">
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="span4 pull-right" style='position:relative;'>
<div class='test' style='position:fixed;left:0;top:0'>test</div>
</div>
<div class="span8"> left </div>
</div>
</body>
</html>
Demo: http://jsfiddle.net/Ug2cH/1/
You realize you are using fixed positioning right now?
<div class='test' style='position:fixed;left:0;top:0'>test</div>
Should become
<div class='test' style='position:absolute;left:0;top:0'>test</div>
Updated demo: http://jsfiddle.net/Ug2cH/2/
Related
Consider we have 10 boxes. After hovering at say 5th box, the ones on its left move -81px(to the left), and the ones on its right move 81px(to the right).
So the one that has not been transformed (the one which we are hovering onto) still has the same width as it had before even though its width is set to 100%. Can someone please explain to me why can't the space left from the transformed elements be used from the one in the middle ?
You can see it in action here
//css:
.boxwrapper{
display:block;
>div{
display:inline-block;
border: solid 1px grey;
width:auto;
padding:20px;
background-color:white;
&.before{
transform:translateX(-20px);
}&.after{
transform:translateX(20px);
}
}
}
//html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<body>
<div class="boxwrapper">
<div data-number="1" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 1</div>
<div data-number="2" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 2</div>
<div data-number="3" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 3</div>
<div data-number="4" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 4</div>
<div data-number="5" id="box" onmouseover="mouseoverbox(event)" onmouseleave="removeAll()">BOX 5</div>
</div>
</body>
</html>
Thanks.
Transformations don't affect the flow of elements, only the visual rendering. I know it looks like the div should have more space and be able to expand but in reality it doesn't.
A little unsure on when to start a new context in BEM.
Should all child elements always reference the block element?
For e.g.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bem</title>
</head>
<body>
<div class="header">
<div class="header__left">
<!-- Left column content -->
</div>
<div class="header__search">
<!-- Should this be attached to the header? Or a new context <div class="search"> as it can be used elsewhere on the site? -->
</div>
</div>
</body>
</html>
Here the search is inside the 'header' div but should we really attach it to the header as this could be used elsewhere on the site?
Do you have new blocks inside blocks?
Cheers
It's my understanding there isn't any problem with blocks overlapping, as long as the css being used to target each block is discreet and separate. So, the search styling shouldn't depend on the header styling if it's usable in other places. Similarly, the header styling doesn't need to go any further down once it loses relevance to its children.
Would something like this work; does that make sense?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bem</title>
</head>
<body>
<div class="header">
<div class="header__left">
<!-- Left column content -->
</div>
<div class="header__right">
<div class="search">
<input class="search__input>
<button class="search__button>GO!</button>
</div>
</div>
</div>
</body>
</html>
There is a missing end quote on the search__button element, but stack overflow is so rigid with its edit criteria it wont let me edit it.
I have the following HTML:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="STYLE.css">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body>
<header class="row"></header>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<footer class="row"></footer>
</body>
</html>
For some reason the entire web page is wider than the browser window. When I remove the row class everything goes back to normal. The local CSS file has nothing to do with the issue. My guess is that the bootstrap CSS modifies the row in a way that makes it wider for some reason. So I wanted to ask if anyone has any idea that would fix this.
You may either use .container class or .container-fluid.
.container maintains some margin space from actual screen and don't stretch the page view. On the other hand .container-fluid stretches the page as it can.
See your html script modified below:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="STYLE.css">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<header class="row"></header>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<footer class="row"></footer>
</div>
</body>
</html>
Also, you must use .col-md-6 like class to specify width of your section within a row where md is replaceable by lg and sm as well.
md stands for Medium sized devices like laptop,desktop etc.
lg stands for Large sized Devices like projector or some bigger screens etc.
sm stands for Small sized devices like mobiles etc.
You are free to use a combination of these three. For example,
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-1 col-lg-12">
</div>
</div>
</div>
Hope it helps you get started and resolve your problem.
To fix this issue you have use class row properly.
You have not wrapped class row with class container.
Bootstrap provides grid system.
Bootstrap's grid system allows up to 12 columns across the page.
You need to arrange your page width into that 12 columns.
It is not possible to explain all of here.
Please refer following links.
Bootstrap grid template
Bootstrap grids
Maybe you have to add the grid of the bootstrap css?
Look to this example
http://getbootstrap.com/examples/grid/
Please wrap it in bootstrap .container class and then check if the problem still persists.
<body>
<div class="container">
//your content goes here
</div>
</body>
You must use containers to use any of the bootstrap functionality. This can be a set width container or a fluid container but adding one will fix your issues. I also switch around your style to use a working CDN version and moved Javascript to the recommended location. You might find this a better starting point.
Reference: http://getbootstrap.com/css/#overview-container and http://getbootstrap.com/css/#grid
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<header class="row">Test 1</header>
<section class="row section1">Test 2</section>
<section class="row section2">Test 3</section>
<section class="row section1">Test 4</section>
<section class="row section2">Test 5</section>
<section class="row section1">Test 6</section>
<footer class="row">Test 7</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
If you're using bootstrap 4,just add m-0 class to your row instead of wrapping it in an other div.It removes the margin.
Removing the margin is the easiest and quickest way to fix your problem.
You can do that by adding the m-0 class along with your row:
<div class="row m-0">
...
</div>
I have this kind a scenario:
<div id=area>
<div id=box>
</div>
</div>
<div id=footer>
</div>
div "area" is center and it is 700px width and has shadows at right and left.
there is then a div box, which is 500px width and has text and options in it.
And at bottom I have footer where is one line of text.
So, my shadow effect at div "area" stops at same spot as box does. At next page, i have ~2000px amount of text in same box, and there "area" div's shadow is as it should be.
I want to have "area" div whole screen size, and more if there is more text inside of it.
Try something like this :
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="area">
<div id="box">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
CSS
html {height:100%}
body {height:100%;margin: 0;padding: 0;}
#area {height: 100%;background-color: blue}
I'm creating a web but having trouble with the alignment of divs. Cant fix this problem for a day now.
How do I force align the image(the text image)? It's inside the div.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" charset="utf-8;" content="text/html" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<
And force the lower div to stay put when window resized or zoomed in/out.
If you seriously want to use a "text image" as a regular image, why not use it in a style sheet? So right now you have it in a div, so make that div a class or id like and make a style sheet where you have that image as a background image. Then you can use the position tactic to put the image wherever you want.
HTML:
<body>
<div class="textimage">
</div>
</body>
CSS:
.textimage{
width:500px;
height:500px;
background-image: url('..whatever.gif');
background-position: 50px 50px; //the first coordinate moves the image left to right // while the second coordinate moves it up and down
}
Try it
<div style="text-align: center">
<img style="width: 960px;" src="images/about us img.jpg"></img>
<div style="text-align: center">
<img src="images/about-cti.jpg"></img>
<br />ABOUT CTI
</div>
</div>
first issue is don't add specific margin like "margin-right:300px" when you want it to be resized or zoomed in/out.
and second issue is adding "float:right" to the image.
the below changes to the code will solve your problem.
<div style="width: 960px; margin:0 auto;" align="left">
<p>
<span style="float:left">
<br>
ABOUT CTI
</span>
<img src="images/about-cti.jpg"/>
</p>
</div>