I have some CSS problem. On the website http://astrazlata.rs/ on the accordion section "Finansijski izveštaji", how can I make text inside that section center on the page, so that is not align to the left? I tried few ways with text-align:center or margin: 0 auto, but it want works.
Also I on the accordion I have some problem with:
ul {
list-style: circle;
}
When I leave it like that, page push that circle bullets little bit outside the section (it looks ugly and unclean), but it nicely displays text.
Other scenario is when add:
ul {
list-style: circle inside;
}
circle bulltets are displayed perfectly in the line with the section but text acts little bit funky like this - https://www.dropbox.com/s/pb3kxmfjod3084d/bullets%28text%29.png?dl=0
Is there any way to solve that problem, so that circle bullets are in line with section, but without the funky looking text?
For the first part of your question.
https://jsfiddle.net/wieslaw/y26k6amu/.
Answer to your question is also in https://stackoverflow.com/a/14510696/1643235.
.container {
text-align: center;
}
ul {
display: inline-block;
}
add following code into your style.css file:
.accordion-content ul {
position: relative;
left: 50%;
}
you can adjust 50%; value to whatever you like.
Related
After playing around with my header and and main menu it seems the link box is not actually aligned with the text. I tried playing around with margins and padding but I can't seem to get it to work or find the right class. I would like to keep everything where it is currently and just move the link areas to the right so everything aligns. Any input is appreciated.
Website: http://museiam.ca/
This is happening because you have:
.main-navigation ul li a, .menu_centered_style .gbtr_first_menu li
{
left: 40px;
}
Removing the left: 40px; should fix this.
EDIT: Try adding the following styles
.menu_centered_style .gbtr_first_menu ul
{
margin-left: 108px;
}
.menu_centered_style .gbtr_first_menu .shopping_bag_centered_style_wrapper
{
margin-left: -24px;
}
I want to have a top nav that looks something like this:
div = [] , space = .
[[menu-icon][logo]....[page title].....[some-icon][some-icon]]
so the menu and logo area stick to the left.
the page title in the middle.
2 more icons that stick to the right.
I tried a couple of ways but none worked for me.
My best solution had everything in place but then the links/icons were not clickable, the text was "over" them.
appreciate any help.
Here's my plunker of it:
http://plnkr.co/edit/CBnH6Ewa4QJTu5FBC2Mi
======EDIT=====
thanks to #Mark Simpson , i fixed a typo in the css and have the title bar centered and links clickable by using z-index:-1 on the centerpiece.
but I'd the title like it to be clickable too.
I use this on some pages.
Any suggestions on how to solve this with css?
.navbar .center {
width: 60%;
margin: 0 auto;
text-align: center;
}
.navbar .right {
position: absolute;
right: 0;
top: 0;
}
See: http://plnkr.co/edit/1XLrK4Iuq6CPSYmGPDYn?p=preview
I'm trying to center the menu bar and make the menu bar fit the text.
Here is a website I'm trying to edit:
http://www.graffitisumperk.g6.cz/blog/
I've already figure out that I can center menu items this way:
.menu {
text-align:center
}
.menu li {
display:inline-block;
float:none;
margin-left: -5px;
}
.menu li li {
display:block;
text-align:left
}
But I can't seem to fit the menu bar to the width of the menu items.
I've calculated it should be 445px long, but when I change this:
#container {
margin: 0 auto;
max-width: 960px;
to 445px, the whole page it affected, not just the menu bar.
Any ideas how to fix it?
You can do it very very similarly :). One of the effects of display: inline-block; is that the element attempts to resize itself to contain its children. You could achieve this with float or position: absolute as well, but those do not really fit into this layout.
.main-nav { text-align: center; }
.menu { display: inline-block; }
I guessed you might want to center the menu, so I added the text-align too.
Tip: If you use the inspector of your browser (all modern browsers have a pretty decent one), you can easily figure out which element you need to change.
When I looked at your page, it looks like the part you really need to change is the "main-nav" class.
The #container div contains your whole page so you don't want to mess with that one.
I'm trying to come up with a solution for this problem.
I have a control where the background is an image.
The text that I would like on the form is included in the bg image, however for the purpose of accessibilty, I'd like to include it in an H3 tag.
The problem I have encountered with the solutions I have is that the space is still allocated and I need it to be supressed. It also needs to be Google friendly too.
Here's 2 solutions I have:
text-indent:-999px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
Any ideas?
The normal way to hide elements is to use one of the following:
visibility:hidden; which hides the element but still takes up space.
display:none; which hides the element and does not take up space.
I believe the second is what you want in this instance.
Well, first of all
display: none;
But, if you want, there might be other solutions for styling your heading tag
/* on its container */
overflow: hidden;
/* on h3 tag */
float: left;
margin-left: -100%;
or
font-size: 0;
line-height: 0;
height: 0;
overflow: hidden;
You may also need to set/reset few other properties, to clear any other space around your heading, like
margin, padding, white-space, text-indent, border, etc.
You can give font-size:0; to your h3 tag HEADING will be in your code with your background.
And this will help you in SEO also..
DEMO
HTML
<div id="wrap">
<h3>heading</h3>
</div>
CSS
#wrap {
height: 230px;
width:660px;
background:url("http://www.eldercarefunding.org/Portals/18/Skins/s_eldercare_green/images/header.bgL.png") no-repeat 0 0;
}
#wrap h3 {
font-size:0;
}
Might be a bit too early in the morning for me but I struggling to figure out what I've done wrong here.
I have a page with 9 boxes and I would like them to be positioned with 3 on one line, 3 on another and 3 on the other.
Have a look here: http://dev.tim-morgan.co.uk/other/Untitled-1.html
Right now you can see, the list bullets are showing and each box looks like it's going down like a staircase since I put in float: left;
Any ideas of what I'm doing wrong?
Thanks
You need to:
Move float: left from ul.tabs2 a to ul.tabs2 li.
Add overflow: hidden to .tabs2 to clear the floats.
Add clear: left to every 3n+1 li using :nth-child, try this:
ul.tabs2 li:nth-child(3n+1) {
clear: left
}
If you need to support Internet Explorer 8 and lower (no nth-child support), you can use http://selectivizr.com/, or just add the clear: left rule yourself to each relevant li.
You might want to remove the default styles on your <li>s, they could be interfering with the floating of the <a>s in the <li>s.
I’d suggest:
ul.tabs2 {
list-style: none;
}
ul.tabs2 li {
margin: 0;
padding: 0;
}
For getting three in a row, #thirydot’s answer looks good. If you know how wide you want each box to be, you could set that width on the <a>s, then set a width on the <ul>:
ul.tabs2 {
width: 300px;
}
ul.tabs2 li a {
width: 100px;
}
In your css add this
ul.tabs2 li {display:block;float:left;width:33%;margin:0 0 10px 0;padding:0;}
and also add overflow:hidden and list-style:none to your ul.tabs2 if you don't want bullets.