I am working on a simpl web page where I use a menu bar in a div tag . When I am not fixing the div tag it can be aligned in center using:
.top .overlay{
background-image:none;
text-align:center;
}
But when I use the position: fixed; then the alignment of menu doesn't work
.top .overlay{
background-image:none;
position:fixed;
text-align:center;
}
It's working if I use a fixed margin, but the problem is that the behavior would change depending on the screen resolution.
please help
Add this to your CSS:
.top .overlay {
width: 100%;
text-align: center;
}
And don't forget to remove the margin-left: 18%; part.
Try putting margin:0 auto; in .top .overlay {}
.top .overlay{
background-image:none;
position:fixed;
text-align:center;
margin:0 auto;
}
Solution for you: set width to 100%
.top .overlay{
...
position:fixed;
width: 100%;
...
}
I tried this CSS on your site with firebug and it worked:
.top .overlay {
background-image: none;
margin: 0 auto;
width: 830px;
}
The auto value for the margin CSS property will work only if a width is set.
I also removed the position property.
#container {
position :fixed;
margin: auto;
top:0%;
width: *AS_REQUIRED* px;
}
#container p {
text-align: center;
}
As shown above i have created two divisions:
For Positioning menu and its design
For text inside the menu
NOTE: text will be aligned center when you write text inside the <p> </p> tag
Related
I'm struggling to understand divs.
I want to have the 'nav' panel expand vertically as required. The second issue I have is that I can't seem to get padding to work. Any changes I make tend to end up with the 'section' div drop below the 'nav' div.
Please see below jsfiddle and code.
Thanks in advance.
https://jsfiddle.net/s59cwy9s/
<div id="container">
<div id="nav">
test
</div>
<div id="section">
test
<br><br><br><br>
test
<br><br><br><br>
test
</div>
</div>
#container
{
width: 1156px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 10px rgb(0,0,0);
position: relative;
background-color: transparent;
height: auto;
}
#header
{
background-color:black;
color:white;
text-align: center;
padding:5px;
}
#nav
{
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
float:left;
padding: 15px;
display: inline-block;
height: auto;
}
#section
{
/*float: none;*/
padding: 10px;
display: block;
/*position: absolute;*/
/*overflow: auto;*/
background-color: white;
width: auto;
height: auto;
}
This may be due to the fact that your name bar doesn't span the height of the webpage completely. Try something like height :100% for the navbar. It might do the trick.
Here is some help :
https://jsfiddle.net/6ubhyL5k/
Some advices :
Take time to really understand how the page flow works (float : left/right) so you will then understand how padding and margin work when you have floating div
Use what you really know and don't improvise :)
Don't use br to make spaces between blocks (margin and padding are what you should use)
Take a look at how bootstrap works and never forget the responsive design
First I will recommend is using box-sizing attribute
It contains any type of padding or borders within the container's width and height. Find more about it Here. So i suggest:
*
{
box-sizing:border-box;
/* Use browser prefixes if u want support for other browsers */
}
Second is add a class to the container which contains elements wit float css attribute like clearfix and add this code:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
or you can just create a div after the container containing elements with float css attribute and clear it.
<div class='clear'></div>
.class
{
clear:both;
}
Using float as much as it is useful brings about a problem in layout if not properly used. https://css-tricks.com/all-about-floats/
My Solution:
html,body {height:auto; width:100%; background:red; }
* { box-sizing:border-box; margin:0; padding:0; display:block; position:relative; }
#container
{
min-width:800px;
height:auto;
margin:0 auto;
width:100%;
}
#nav
{
float:left;
width:30%;
padding: 15px;
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
background:white;
}
#section
{
float:left;
width:70%;
padding:0 100px;
background:yellow;
}
.clearfix:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Hope It Helps You. Though i recommend researching more on layouts since there's other layout which will give you less problem than floats.
Try
#section{
clear:both;
}
JSfiddle
clear:both allows floated divs to stop continuing on the same line with the other floated ones, and drop below.
Update: https://jsfiddle.net/s59cwy9s/2/
You could fix your issue by giving a margin-right to the #nav
I have an issue with elements. When I type any text in any place inside search_groups_wrapper, the right colum fall to the bottom. If there is no text, it is displayed as should be. What is the problem?
Here is jsfiddle - http://jsfiddle.net/csYU8/ with problem. Remove 'Here is some text' and element will move top.
I can't find what causes this but I found a solution:
Just add the styles below to your #search_wrapper
top:0;
position:absolute;
CSS
#search_wrapper
{
height:50px;
width:100%;
top:0;
position:absolute;
}
DEMO
Add align: left to your search_groups_wrapper and existing_groups_wrapper.
FIDDLE DEMO
instead of using display:inline-block you should use float:left property. and to clear the float you can use clear:left on parent div.
or you want to still use the display: inline-block.
#search_groups_wrapper
{
display:inline-block;
height:100%;
margin:0;
padding:0;
border:0;
width:70%;
position:relative;
top:0;
vertical-align:top; /*I've just added this line*/
}
Here is the another working Demo . http://jsfiddle.net/kheema/csYU8/7/
#search_groups_wrapper {
border: 0 none;
display: inline-block; /*Better Remove this line and add float left*/
float: left;
height: 100%;
margin: 0;
position: relative;
top: 0;
width: 70%;
}
#existing_groups_wrapper {
border: 0 none;
display: inline-block; /*Better Remove this line and add float left*/
float: left;
height: 100%;
margin: 0;
width: 30%;
}
Here is a Demo. http://jsfiddle.net/csYU8/
Creating a gallery of divs with links images and text. problem is- can't get the inner wrapper to center everything. margin:0 auto; isnt working because i havent set a width for it. but i want the width to change with different browser sizes but that the inner .prjctwrap divs will be centered within it. here's my markup:
HTML :
<div id="wrapper">
<div id="innerprjctwrap">
<div class="prjctwrap">
<a href="http://www.google.com">
<div class="imageCont" style="background-image:url(image1.jpg);">
</div>
<div class="text">Text Text Text</div> </a> </div>
...this reapeats from prjctwrap with other images, text and links
</div></div>
CSS:
#wrapper {
background-color: #FFFFFF;
width:100%;
height:1000px; }
.prjctwrap {
display:inline-block;
width: 130px;
height:180px;
overflow:hidden;
margin:15px; }
.prjctwrap .imageCont{
width: 130px;
height: 100px;
background-size: cover; }
.prjctwrap .text {
text-align: center;
color: black;
text-decoration: none;
height:80px; }
.prjctwrap a {
text-decoration:none; }
#innerprjctwrap {
margin:0px auto; }
You haven't set any size on the #innerprjctwrap element, so it will have the default setting width: auto;. That means that it will use the full width available, so you can't see that it's actually centered.
Set a width on the element, and you will see that it is centered:
#innerprjctwrap {
width: 130px;
margin: 0 auto;
}
If you want to use text alignment to center the content inside the element, you shouldn't use margins to center the element, you should use text-align to center what's inside it:
#innerprjctwrap {
text-align: center;
}
Add a width for #innerprjctwrap other ways margin:0 auto; not detected
Eg:
#innerprjctwrap {
margin:0px auto;
width:200px;
}
Using JsFiddle for explaining such problems will be much clear.
Is this fiddle what you want?
If so, then you want is actually to center elements inside #innerprjctwrap like #Guffa says, simply add:
#innerprjctwrap{
text-align:center;
}
add width. if no progress, try removing 'px'. if there's still no progress, use padding in the wrapper div.
i have a problem with aligning.
This is my code.
Html:
<div id="alt">
<p>this is a sample text</p>
</div>
Css:
#alt{
display:block; position: absolute; top: 400px; left:500px; }
on using code everything looks fine. But when I reduce the zoom level of the browser. Its goes to the left. I want it to remain in the centre. Help me in solving this.
For aligning website content to center,you have to put all content in one div say main div and apply a below css to it
.main
{
margin-left:auto;
margin-right:auto;
width:960px;
}
use left:50% instead of left:500px;
css:
#alt{
display:block; position: absolute; top: 400px; left:50%; }
If your container div has a fixed width then use margin: 0 auto;
Fiddle: http://jsfiddle.net/X6Vxq/show
Try the following style.
#alt
{
display:block;
text-align: center;
top: 400px;
left:500px;
}
#alt p
{
margin: 0 auto;
display: inline-block;
}
If your content is present in a div, then you can give the position relative to the div and margin left and right to auto. Check the following code:
#alt {
position: relative;
margin-left: auto;
margin-right: auto;
}
This is a hard one to answer, since you don't seem to have given us enough info. Would you like the paragraph center justified or left-justified in a centered column?
To center justify, you can simply use:
#alt { text-align: center }
To create a centered block with the text left justified, use:
#alt {
width: 800px; /* Your desired width of the center block */
margin: 0 auto;
}
Hope this helps
Could anybody write the CSS fragment to do this?
<div class="container">
<span class="left">Left</span><span class="right">Right</span>
</div>
Here's the CSS for .container:
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
}
Notice the position is absolute because it is "absolute positionated" on its containing element.
I've alredy tried float:left/float:right on the two nested elements but nothing happens.
Set the elements to block, set a width and float them.
.left{
display: block;
float:left;
width: 100px;
}
.right{
display: block;
float:right;
width: 100px;
}
Example: http://jsfiddle.net/LML2e/
float: left and float: right will work perfectly when you set a (relative or absolute) width for your .container div
Demo
.container {
position:absolute;
bottom:0;
margin: 0 5px 5px 5px;
width: 200px; //either absolute width
width: 100%; // or relative width
}
Side note: If you set the .container to width: 100% you will get ugly scroll bars due to the margin. Just use the margin in the .left and .right classes. See here.
You need to set a width in order to use float. If you want a width of 100% you can set .container { width: 100%; } or improve your code into something like:
.container {
position:absolute;
bottom:5px;
left:5px;
right:5px;
}