Using Bootstrap Responsive - HTML appears like...
<div class="row-fluid Center">
<div id="divMapCanvas" class="span6">
<div id="map_canvas">
</div>
</div>
<div id="divMapPanel" class="span6">
<div id="map_panel">
</div>
</div>
</div>
Test Webpage: http://gfw.yyyz.net/Contact
What I would like to do is initially hide the divMapPanel div and have the divMapCanvas div centered on the page. Then after the directions button is pressed, the divMapCanvas would move to the left and the divMapPanel would appear. I have tried merely hiding the divMapPanel, but I can't get the divMapCanval centered.
Thanks in advance for any suggestions?
On the the div with class span6 that wrap your canvas, you need to set a fixed width (I used width: 526px; when I got it to work on your example page, but you could use % instead, or what have you, but it cannot be set to auto which is the default setting), you also have to get rid of the floating by adding float: none; and margin: 0 auto;.
On the divMapPanel you need to add display: none, to make sure that it doesn't take up any space in the DOM. Using visibility: hidden for instance will not work.
Then when the user click on direction and you want to display both elements side by side, you get rid of these settings by adding float: left etc. back in, and both elements should appear side by side.
Related
On my website https://bennetdev.de I have a fixed-top navbar which seems to be wider then my actual html tag. I think it is a problem between the navbar and my bootstrap modal but I don't know how to solve it. Due to the wider navbar a white space on the right side is shown when you visit the page, but disappears when opening the modal (through the contact button) and is not existent anymore until you refresh the page. Anyone knows how to fix this?
EDIT: There is no overflow because I hide the x-overflow on my body element but what I mean is the white bar on the right side, which would be a x-overflow without me hiding it
Ahh, yes, I see it now. It seems to be caused by the negative margins on a "row".
In your case, the div <div class="project row" >.
For bootstrap rows and columns to work correctly (ie. negative margins), the parent of a "row" should have the class "container". See the docs here.
eg.
<div id="projects" class="container">
<div class="project row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
<div>
You can use max-height: 210px; to define how much height do you want for your nav bar.
Anyway I recommended to upload some code that we can see.
I'm writing a responsive design for a website and I have 4 separate divs, which should be arranged 2 TOP x 2 BOTTOM. At some resolutions it seems to work fine, but at others there is a hole between the upper left div and the bottom left one.
This is how it should look like:
http://postimg.org/image/76q5y5w5v/
This is how it looks when improperly rendered:
http://postimg.org/image/6a4f8x4j7/
If you want to see all of the CSS applied, just visit http://bbogdanov.us/ (bottom of the page) and try to play with the browser's size to monitor the behavior of the div's at the different sizes.
The reason this is happening is because the div elements are being floated. When you lower the screen size, the block is becoming longer (taller) and the float is breaking. You can clear every other line by adding this snippet:
.uslugihome2:nth-child(odd) {
clear: left;
}
Caution, though, you need to use a polyfill for this to work on older browsers because some pseudo-classes like nth-child are not supported. I recommend Selectivizr.
Currently you have the following markup for each box:
<div class="uslugihome2">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
With reason why you see the gap is due to the width and margin that are set on uslugihome2.
So what I would so is, create another div which wraps the child divs like so:
<div class="uslugihome2">
<div class="uslugi_wrapper">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
</div>
Then go to line 316 of style.css and remove margin: 2.5%;, then change the width to 50%.
Once done, add the following to your css file:
.uslugi_wrapper {
padding: 0 15px;
}
Not sure which browser you want to support but this will also ensure support for the likes of IE8
Hope this helps
That's because the height of those divs change as the width of the window changes. Try wrapping a div around every two separate divs. Let's call that a row.
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
Okay, so this is going to be hard to explain, so please ask questions if I am not clear
In my html page, I have a main "container" div that has multiple divs within it, but each of the divs inside the container are placed into one of two columns (so if there is a div in the container, it is either in the left column or the right column)
<div id="container">
<div id="column1">
<div id="item1-1"></div>
<div id="item1-2"></div>
<div id="item1-3"></div>
</div column1>
<div id="column2">
<div id="item2-1"></div>
<div id="item2-2"></div>
<div id="item2-3"></div>
</div column2>
</div container>
[NOTE: I know the syntax is incorrect, I am just making it easier to read]
So, in other words, I want two columns of divs that can vary in size (so the page size can vary), and so that item1-2 appears below item1-1, etc. The problem here is I want the divs in the container to appear inside of it, so I cannot use absolute or relative positioning. Something is telling me I should be using a table, but I am not sure how to go about doing this.
So, my question is: using only html and css, is there any to do exactly what is above?
First: make </div column1> and </div column2> just say </div>
Second: CSS:
#container {
width: 100%;
}
#column1, #column2 {
float: left;
width: 50%;
}
To achieve the look you want you should use CSS float property. However, to avoid problems with parent container not displaying correctly, consider following one of the two possible solutions:
Adding a div after floating elements with
clear: both
or applying code below to your parent div
overflow: hidden
I'm trying to use CSS to create callouts in a block of text (for things like block quotes or relevant pictures). It has to be manipulable with Javascript and work with CMSs, so I can't just embed the callout in the middle of the text block and float it. Instead, the callouts are located at the top of the text block and I use a pusher div of a certain height to move it down to the desired location.
This technique works perfectly when all of the callouts are on the same side of the text block. The problem is when I want a callout on each side. The first pusher div pushes the second pusher div down, even though they are floated to different sides and both have a very small set width.
Here is an example of the problem. The pusher divs (normally 0px thick and transparent) are the red bars on the side. Both of them should start at the top of the block, just under the header. As you can see (at least if you're using Webkite/Gecko, I haven't tried anything else), the bar on the right starts underneath the bar on the left.
http://keaton.ws/Files/theCalloutProblem.html
I've tried playing around with the structure of the HTML (Taking the pusher and callout out of their parent div) and changing the display property of almost everything, and nothing has worked. Most of the changes I make result in the text not wrapping properly. I know this is a rather obscure problem, but any help would be greatly appreciated.
-Keaton
Here's the code, with styles inline:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="width:750px; margin:0 auto;">
<div style="width:750px;text-align:center;"><h1>This is the header</h1></div>
<!-- Left Callout -->
<div>
<div style="width:0px;float:left;height:100px;"></div>
<div style="width:200px;float:left;clear:left;"><!-- Callout Text --></div>
</div>
<!-- Right Callout -->
<div>
<div style="width:0px;float:right;height:250px;"></div>
<div style="width:200px;float:right;clear:right;"><!-- Callout Text --></div>
</div>
<div style="width:700px; margin: 0 auto;">
<!-- Body Text -->
</div>
</div>
</body>
</html>
In these examples, the alternating left/right floats always have the same height.
http://meyerweb.com/eric/css/edge/slantastic/holiday.html
http://meyerweb.com/eric/css/edge/slantastic/demo2.html (<--why is this link unclickable?)
http://csstextwrap.com/#export
It seems that you have to sort the floats by height/position to achieve the desired effect:
http://jsfiddle.net/ge5YG/2/
I'm making a website and trying to create a login box. I have a website with two boxes of content, and I want to add a third "login box".
However, I can't seem to do this, because it appears above (when I have the current width of the container) or above (when I increase the width of the container to accommodate for the increase of space because of the box).
Also, margins don't seem to be affecting the newly created box either.
Here is what I want it to look like: http://i.stack.imgur.com/Kmm1g.jpg
And here is the current website: http://www.winterlb.com/
So my question is, what is the easiest way to accomplish this? Thanks.
You can put your login box and your nav box in the same div. Float this div and the main content div like so:
HTML:
<div id="navBar">
<div id="loginBox">
...
</div>
<div id="navBox">
...
</div>
</div>
<div id="mainContent">
...
</div>
CSS:
div#navBar {
float: left;
width: 200px;
}
div#mainContent {
float: left;
width: 600px;
}
Add the 'third box' inside your 'sidebar' and add another div to wrap your original sidebar content.
Style the approriate login div and navigation div. Float them left if needed.
Here's a sample html of what the structure should look like http://pastebin.com/3hLmGzRZ
You will never accomplish this properly without a doctype. You are in quirks mode. Add this to your first line and then see where we are:
<!DOCTYPE html>