http://jsfiddle.net/VjMy8/
Please help me to set the #container to keep in the center of the page so that all other contents under the #container will be on center.
in css:
#container {
width: xxx em/px/%/...;
margin-left: auto;
margin-right: auto;
/* or margin: 0 auto; */
}
With this method you won't even need a container, you can do something like this the code below.
This code doesn't need a float, so it doesn't interrupt the flow of a page
#div_left {
width: 25%;
margin-left: 12%;
}
#div_right {
width: 50%;
margin-left: 38%;
}
This method works in every browser in is much easyer then this (older & longer) method:
body {
text-algin: center;
}
#container {
width: xxx;
text-align: center;
}
#div_left {
width: 30%; /* 30% of the container-width */
}
#div_right {
width: 70%;
}
just remove the float left -- here's the fiddle http://jsfiddle.net/mvivekc/VjMy8/3/
Related
I'm having trouble with a slick.js display. The "next" arrow is displaying on the left side and doesn't seem to respond positionally when I adjust the right attribute. The "prev" arrow is displaying fine and, as far as I can tell, is being loaded the same way. My dev site is here.
Here's my CSS for this section:
#front-page-slider, #front-page-slider .slide {
min-height:500px;
}
.width-fixed {
max-width: 1200px;
margin: 0 auto;
}
.slider-container {
position:relative;
}
#join-widget {
position:absolute;
text-align:center;
width: 100%;
bottom: 0;
}
#gform_wrapper_3 .gform_heading {
display:none;
}
#join-widget form {
display:flex;
justify-content:center;
}
#front-page-slider .slick-prev {
left: 10px;
}
#front-page-slider .slick-next {
right: 10px;
}
Your CSS for slick.arrow (in the file theme.min.css) includes left: 10px. To override this, include in your slick.next class the value left: auto.
#front-page-slider .slick-next {
right: 10px;
left: auto;
}
I'm using Doxygen v1.8.13 on Windows.
I'm trying to optimize our HTML output. I would like to have the header with the navbar and search input stick on the top of the pages.
Using a custom css I managed to give the needed tags a position of fixed and all is working fine, except for the search results. That div (with an iframe) is falling behind my div.header.
When I move the div.header block inside the div.top block everything works as expected.
But I can't modify this in the header.html template, because the div.header block is not included.
How to solve this?
Here's my CSS, if needed:
/* Make the header fixed at the top */
#top {
position: fixed;
width: 100vw;
top: 0;
background: white;
}
.header {
position: fixed;
width: 100vw;
top: 137px;
}
.header > div.summary {
padding-right: 25px;
}
div.headertitle {
padding: 5px 5px 0 10px;
}
div.headertitle > .title {
margin: 0 2px;
}
div.contents {
margin-top: 180px;
}
#MSearchResultsWindow {
position: fixed;
border-radius: 3px;
padding-right: 2px;
}
#media(max-width:768px) {
.header {
position: fixed;
width: 100vw;
top: 277px;
}
div.contents {
margin-top: 318px;
}
}
I already read these similar questions:
Remove Doxygen prototype header
Provide custom/configurable HTML templates to Doxygen
But they don't provide what I need.
I finally got it working. Instead of using position: absolute I'm now using flex-box. I also needed to add a new div around all other divs.
This is my css code:
html,
body,
#page {
height: 100%; /* needed for proper layout */
}
body {
overflow: hidden;
}
#page {
display: flex;
flex-direction: column;
}
#top {
flex: 0 0 auto;
}
.header {
flex: 0 0 auto;
}
div.contents {
flex: 1 1 auto;
position: relative; /* need this to position inner content */
overflow-y: auto;
}
div.footer {
flex: 0 0 auto;
}
And this is the live website: http://www.mapwindow.org/documentation/mapwingis4.9/index.html
I'm attempting to push my Bootstrap Carousel controls outside of the image but I seem to be having some problems. I've been able to get them out of the image by setting width: 0%; on .carousel-controls but the problem is it's not completely responsive and it seems that the left control is closer to the image compared to the right control.
What would be the correct way to do this? I feel like I'm going down the wrong path.
#myCarousel {
margin-left: 30px;
margin-right: 30px;
}
.item img {
margin-left: auto;
margin-right: auto;
}
.selected img {
opacity:0.5;
}
.carousel-caption {
position: relative;
left: auto;
right: auto;
}
.carousel-control.left,
.carousel-control.right {
background: none;
border: none;
}
.carousel-control.left {
margin-left: -45px;
}
.carousel-control.right {
margin-right: -45px;
}
.carousel-control {
width: 0%;
}
.glyphicon-chevron-left, .glyphicon-chevron-right {
color: grey;
font-size: 40px;
}
Here's a JSFiddle: https://jsfiddle.net/guhx5sjL/1/
Is this what you are looking for? If so its just some quick changes in your CSS:
#myCarousel {
margin-left: 50px;
margin-right: 50px;
}
.carousel-control.left {
margin-left: -25px;
}
.carousel-control.right {
margin-right: -25px;
}
I updated your js.fiddle here.
It will make your page scroll horizontally. You'd better add .col-10 .mx-auto to .carousel-inner. Always remember to check side effects of your additional pure css on bootstrap modules.
I have been created simple webpage using html5,css and js.
I have header,menu,slide show,main-content and footer. and also using sticky side-bar
After all coding, slideshow display at the middle of main content and main-content also hidden.
css code for slideshow,main-content and footer:
#wowslider-container1 {
position: absolute !important;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
left: 50%;
top: 60%;
opacity: 1;
}
/* clearfix */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* Main ................ */
main {
margin: 20px auto;
max-width: 940px;
}
/* aside */
aside {
float: left;
max-width: 220px;
}
.inside {
background-color: #000;
padding: 10px;
}
#sidebar.sticky {
float: none;
position: fixed;
top: 20px;
z-index: 6;
left: auto;
}
/* main content */
.main_content {
float: right;
max-width: 700px;
color:#fff;
}
/* Footer .............. */
footer {
background-color: #999;
height: 300px;
width: 100%;
}
My page look like this: http://s14.postimg.org/jw2uimt9t/Untitled_1_copy.png
I have lots of file, how to fix my problem, there anyone help me to fix this.
Any help would be highly appreciated. Thanks in advance.
I guess i understood what you need,
most of the div containers that you use don't have css size properties like width and height, but most importantly they don't have a position values in order to fit a html layout structure.
try using position:relative; first on the css for the most important elements of the page.
start first with this default css parameters:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
then add to your slideshow css main class this
*your_slideshow_class_name_here {
position: relative;
}
after that, things become easier to solve
I am trying to make height auto. Whatever i tried did not work until now.
I am using masterpage, asp.net 4.0 ,css
Here the config
Here the css classes
*
{
margin: 0;
padding: 0;
}
.logo
{
height: 100px;
width: 1000px;
position: absolute;
top: 0px;
}
body, html
{
height: auto;
height: 100%;
}
.footer
{
visibility: hidden;
}
.MenuBarMasterPage
{
position: absolute;
top: 202px;
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 40px;
}
body
{
background: #0C0C0C url(http://static.monstermmorpg.com/images/backgrounds/animus-mix.gif) repeat;
margin-right: auto;
margin-left: auto;
width: 1000px;
background-position: top center;
}
.main
{
position: absolute;
top: 242px;
width: 1000px;
background: #D1D1D1 url(http://static.monstermmorpg.com/images/backgrounds/content.png) repeat;
z-index: 2;
height: auto;
}
According to the firebug the computed style height of main is 0px this is the problem
To avoid having to manually set a different fixed height on each page (which is a terrible solution), you have two options:
Use JavaScript to calculate the height.
Don't use absolute positioning.
There is no reason to use absolute positioning for your layout. You should remove position: absolute from almost everything, and write new CSS.
You're going to need a lot of float: left and float: right.
If you're using Bootstrap 4 (Flex)
If your <img> is direct children of a div with display:flex, you might want to set display:block on parent div instead, so height:auto will work.