I've been creating a wordpress theme from a html template I designed and I've got mostly everything working except for the content section being stuck to the left.
you can see it here: http://www.divisionforty.com/wall/events/
I hope someone can guide me to fixing thins
Do you want that everything is stuck to the left, or that is the problem and you want it to be in the center or right ?
Have you tried:
{
float:right;
}
or
{
position:absolute;
right:0px;
}
or
{
position:fixed;
top:30px;
right:5px;
}
What have you tried?
Related
Page content is covering the mobile menu on our site. Make your browser smaller, if needed, to see the problem.
I searched quite a bit and read a bunch of forum posts, so, I've tried playing with z-index and position:relative and I deleted a body tag with overflow-x:hidden, but I am not getting any results.
Here is the CSS I am currently using
.cshero-mobile-menu { position:relative; z-index:20000; }
.cshero-mobile-menu a { position:relative; z-index:21000; }
.cshero-mobile-menu span { position:relative; z-index:22000; }
.article * {position:relative; z-index:1000;}
Can anyone see what I am doing wrong and advise me how to fix it?
Thank You!
Add the following z-index rule to fix your issue:
#cs-header-custom-bottom .container {
…
z-index: 11;
}
I have done a lot of research before posting it in here. So, here I got few imperfections.my link
Question: In the last tab which is supposed to be a contact info tab, how do I make those two tables to get close to each other? I will take borders afterwards. But how do I make them get close and centered?
I put them under table, did not work. Then tried to use division, still is not working. what should I chance in the css file?
Thats it for now. Thanks in advance!
For the Question 2
I want to say that in css replace float:right for sag div
.contact-info {
width:98%;
margin:1%;
}
#sol {
float:left;
text-align:left;
margin-left:290px;
margin-right:auto;
width:200px;
}
#sag {
float:left;
text-align:left;
margin-left:auto;
margin-right:auto;
width:200px;
}
For your second question I want to tell you that in css replace float:right for sag div and to place them in the center of the page just add in your css just add
#contact-info { width:250px;
margin: 0 auto;
}
Hope this will help you!
I've been implementing Mega Menu Reloaded On to my website, and I am unable to properly align the div tags on different screen resolutions!
Here's: what it should look like
Here's: what it looks like after I've rewritten parts of the css of Mega Menu.
I've tried for a few hours to fix this issue, but as a beginner to css I can not seem to manage to fix it.
I believe this is the css needed pertaining to its placement
.megamenu_fixed {
width:960px;
height:44px;
position:fixed;
right:0;
margin:0 auto 0 -480px;
z-index:2;
background-image:url("../img/bg.png");
background-color: #3d3d3d;
padding-left:12px;
}
.megamenu {
position:absolute;
margin:0;
width:960px;
font-size:0.982em;
list-style:none;
padding:0px;
line-height:38px;
font-weight: bold;
display:block;
list-style:none;
top:41px;
padding-left:42%;
}
and here's the code of it's position with the correct placement
#nav-main { right:0; top:55px; list-style: none;}
#nav-main li {list-style: none; float:left; position:relative; padding-left:20px; }
Thanks in advance for any help, or pointing me in any right directions. :)
try using relative instead of absolute positioning.
also, failing that, try specifying left as a percentage (i.e. approx 50% is where the menu starts), and width also as a percentage (100% should make it use only from the left-most point of the div to the right-most side of the screen. if not, try 50% width).
The problem is in your HTML, not your CSS (I think. Well, I fixed the part where 'Adults' was hiding, that was a syntax error)
the span where Adults is declared is mistyped. I replaced <span class="drop"><adults< span=""> (problem code) with <span class="drop">adults</span> and 'Adults' displays properly. However, it is a little squashed to the right, but I believe that would be because of the images top left of the page of 'bad' version, which are not there on the 'good' version
PS: I've left the old answer there as people may have similar issues, where it is in fact the CSS at fault. If you think it's considered "off-topic" let me know, I'll remove it
UPDATE: Oh, and something I forgot to mention, to fix the squashed megamenu, just edit the location in the CSS, that should bring it back to normal
Alternatively, you can scrap div (almost) entirely and use tables instead. can be confusing sometimes, but in my opinion it's totally worth it. You just can't merge/split cells (to split just create a table within a table). Use microsoft word or openoffice writer or something like that and create tables within tables for graphical "base layout" to help you figure out the necessary code. Here's a starting point: Formatting layout with tables on gitHub
I have set
.x-mask {
height:100% !important;
}
But the parent window is scrollable. So when I scroll the window, the bottom portion does not have mask. Any way to solve this issue?
I am using extjs.
Your CSS isn't written correctly:
.x-mask {
height:100%;
}
If this doesn't fix your problem you would have to supply us with more code and/or a link to your website or a fiddle showing the issue.
x-mask {
position:fixed;
height:100%;
width:100%;
}
You can see the implementation here: http://jsfiddle.net/DVp4A/
How do I get the div 'quota info' to be situated to the top left of the UL?
I have the positioning of the UL stuff fine, I just don't know how to get the positioning of the 'quota-info' div to be top left and not 'above' the UL.
I'm not sure what you are trying to acomplish, try adding this this:
#quota-info {
position:absolute;
top:0px;
left:0px;
}
#navigation {
position:relative;
}
If it's not what you want to get let me know and try describe it as I'm an idot ;)
I can't understand exactly what is your requirement but check this http://jsfiddle.net/DVp4A/2/
If this is what you needed, I added
position:relative;
top:50px;
for #quota-info. If this is not what you need, please clarify or make visual example to help you.