Hi I'm using Bootstrap 3 and trying to set my template, maybe i didn't fully understand the 'row' concept in Bootstrap but my template is not acting as i wanted.
Look at this full screen fiddle:
http://jsfiddle.net/52VtD/6206/embedded/result/
And the source:
http://jsfiddle.net/52VtD/6206/
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="well">
<div class="text-center">
IM SO BIGGY<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
</div>
</div>
</div>
<div class="col-md-3">
<div class="well">
SMALL SPACE<br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-9">
<div class="well">
<strong>Fun</strong><hr class="hr-tags"/>
SPACE TIME<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
</div>
I wanted that 'Fun - SPACE TIME' will be right under the 'SMALL SPACE' but there is a huge gap between them... what have i done wrong?
The Fun - SPACE TIME should be inside the same column as SMALL SPACE. This way, the entire col-md-3 column is floated right, and the elements inside it are arranged one under the other.
See JSFiddle result and source.
.row doesn't work like a table row, as you might think, but instead it makes sure its children have their own line. This answer explains a little more about it.
Related
I want to create a menu on the left of a website. The main idea is how youtube is making it:
you have a bar at the top (fixed) and always 40px height and 100% width.
on the left you have the menu. you can open and close it with a button that is in the top bar. if the menu is open, you have the menu fixed on the left with an own scrollbar inside. The menu is 100% height-40px (from the top bar withdrawn).
When the menu is closed the content has 100% width and when the menu is open, the content has 100%-menu width.
The window scroll bar scrolles only the content. menu and top bar are fixed.
Here is a little example: http://output.jsbin.com/gehatitaxe
and also the same in fiddle:
<!-- http://jsfiddle.net/zyam1m79/ -->
But now I have the problem, that the menu with 100% can not withdraw the 40px from the top bar. so the inner scrollbar can scroll a littlebit out of the window (to the bottom). In the menu text there is an "x" at the end and it is impossible to read it when you scroll all to the menu bottom.
How can I fix this? How can I set a fixed element height to 100% and it does not take the window height but the height from en element in an higher level?
greetings and thanks for any help,
Christopher
You can use the CSS calc property to calculate 100% height minus the top bar. Example:
.main_left {
height: calc(100% - 40px);
/* ... */
}
I noticed you have padding on the top and bottom, so the 40px above will need to include that as well, therefore calc(100% - 120px);. Either that, or add box-sizing: border-box; so the padding doesn't add to the height of the container.
When using position: fixed, try avoiding using 100% width / height. Instead, use left: 0; right: 0 for 100% width and top: 0; bottom: 0 for 100% height. See the example below:
.table { display: table; } /* table */
.table > * { display: table-row; } /* tr */
.table > * > * { display: table-cell; } /* td */
/* main container */
.main{
position: relative;
min-width: 1024px;
}
/* top */
.main_head{
width: 100%;
height: 40px;
position: fixed;
left: 0;
right: 0;
top: 0;
transform: translateZ(0px);
z-index: 1999999999;
}
.main_head > div > div{ /* all + search */
border: 1px solid #000;
}
.main_head > div > div:first-child{ /* menu */
border: 1px solid #000;
}
.main_head > div > div:first-child > i{
font-size: 40px;
}
.main_head > div > div:last-child{ /* User information */
width: 400px;
}
/* Container menu + content */
.main_left_content{
}
/* left: menu */
.main_left{
width: 200px;
left: 0;
top: 0;
bottom: 0;
padding-top: 40px;
padding-bottom: 40px;
border: 1px solid #000;
position: fixed;
}
.main_left > div{
position: absolute;
background-color: red;
top: 40px;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
}
/* right: content */
.main_content{
border: 1px solid #000;
vertical-align: top;
}
<div class="main">
<div class="main_head table">
<div>
<div>
<i class="fa fa-bars fa-lg"></i>
</div>
<div>Suche</div>
<div>User Information</div>
</div>
</div>
<div class="main_left_content table">
<div>
<div class="main_left">
<div>
<div>
Menü<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />x
</div>
</div>
</div>
<div class="main_content">
Content<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />x
</div>
</div>
</div>
</div>
I have a simple anchor tag in my page that works with Chrome, Safari and Firefox except for IE. I have the IE11.
Based on various comments online I've tried everything from display: block; to specifying text within anchor tag.
Here is my code:
<div id="top" style="display: block;"> </div>
<section class="prices-wrapper">
<div class="content">
<div class="prices left">
This just bit me, too: "top" is apparently a reserved word in Internet Explorer. In other words, this will not work in IE:
<p><a name="top">My Top Section</a></p>
...
<p>Jump to top</p>
but this will:
<p><a name="up">My Top Section</a></p>
...
<p>Jump to top</p>
... and yes, the only difference between those is the name of the anchor.
You should use <a name="top"></a> as your anchor, then link to it like: Go to top.
Notice that you should set the name attribute of the first anchor tag, not the id as you do on the div in your example.
Complete example, tested in IE 11.0.9600.17498 and working as intended:
<html>
<body>
<a name="top"></a>
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
click
</body>
</html>
I had the same issue and (through chance more than anything!) discovered if you number the id tag it works! So for your code:
<div id="1-top" style="display: block;"> </div>
Hope this helps anyone!
I have two parts to my background: a repeated pattern, and a fixed image in the center – done like so:
body {
background: url('http://www.bathroomsandkitchenstoo.com/BK/home_files/Tile_background2.jpg');
}
#center {
position: fixed;
height: 100%;
width: 100%;
background: transparent url('http://www.cadenhead.org/workbench/gems/floating-head-of-canterbury.jpg') no-repeat center center;
}
<body>
<div id="center"> </div>
<div><!-- page content, br's here as example to show how #center is "fixed" --><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
</body>
See jsfiddle.net/Ps9JV.
What I'm trying to do is keep the fixed image central, but mask it to a 300px x 300px square in the top left of the body, like below. Is there any cross browser way to do this without javascript?
It's possible with calc, see here
body {
background: url('http://www.bathroomsandkitchenstoo.com/BK/home_files/Tile_background2.jpg');
}
#c {
position:fixed;
width:100%;
height:100%;
margin: 50%;
}
#center {
/* image is 450px x 300px */
width: -moz-calc(525px - 50%);
width: -webkit-calc(525px - 50%);
width: -o-calc(525px - 50%);
width: calc(525px - 50%);
height: -moz-calc(450px - 50%);
height: -webkit-calc(450px - 50%);
height: -o-calc(450px - 50%);
height: calc(450px - 50%);
margin-top: -150px;
margin-left: -225px;
background: transparent url('http://www.cadenhead.org/workbench/gems/floating-head-of-canterbury.jpg') no-repeat top left;
}
I have this dirty html that is currently used in my company, the issue is that the hyperlinks or anchors work in IE8, but not in IE9 any reason why this is not working in IE9?. Basically its just clicking on the link and then it should focus on the id, like when i click on specialties I see the url changing like this
file:///C:/Users/TestUser/Desktop/test.html#c3
Now in IE8 when i do the click it correctly goes to that section #c3
Well this code does not work either in IE9
<!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>
<title></title>
</head>
<body>
<p id="titleC">Specialty</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p id="#c3">Did it work?</p>
<p>Then your code is wrong</p>
</body>
Thehash is the problem:
<p id="c3">Did it work?</p>
(without the hash) should work.
Maybe you should use
<a id="c3" name="c3">Did it work?</a>
for compatibility reasons.
All you attributes need to but surrounded by single or double quotation marks. For one on the many incorrect lines in the html
<P id=#titleQ class=style1>
Should be
<P id="#titleQ" class="style1">
Try adding this meta tag, maybe it would fix it:
<meta http-equiv="X-UA-Compatible" value="IE=8">
Run into the same issue and from my experience, on IE9 the anchor tag <a> does not recognise id or name on other elements other than another <a> tag, so as a workaround, you probably want to add a dummy empty <a> tag link above the element you want to link to, like so:
<body>
<p id="titleC">Specialty</p>
...
<a id="c3" name="c3"></a>
<p>Did it work?</p>
<p>Then your code is wrong</p>
</body>
I have a web page that is laid out in HTML and has some Silverlight imbeded into the main portion. This Silverlight needs to be absolutely positioned on the screen for reasons out side the scope of this question. In order to maintain the flow of the HTML which is statically positioned I wrote the code below.
<div id="div2" style="height:600;width:900;">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
I understand that this is a major hack but I'm not sure if there is a better way to handle this. Thank you for any answers.
Aaron
Could it be that your CSS is wrong? Heights and widths should be px for reliable rendering.
HTML:
<div id="div2"></div>
CSS:
#div2 { height: 600px; width: 900px; }
Unitless heights are ignored in all browsers for which I tested. (Even IE6 doesn't do it that wrong.)
Couldn't you just put a <div style="margin-top:a lot;">static content goes here</div>?
Couldn't you set position:absolute?