I am creating a Wordpress theme based on the Twenty Eleven theme and can't figure out how to have the navigation bar center automatically so I won't have to constantly update it.
Here is my CSS:
http://pastebin.com/SGvKmXEb
Here is the PHP/HTML:
http://pastebin.com/TBL1nzjV
There may be duplicate properties in the CSS, but only because I am still experimenting with this and testing multiple things...
Thanks in advance for the help!
This Worked for me on the test site you provided
#access li {
float: left; /*delete*/
display:block; /*delete*/
display:inline-block; /*add*/
}
#access ul {
margin-left: 25%; /*delete*/
margin-right: 25%; /*delete*/
width: 1000px; /*delete*/
height: 10px; /*delete*/
margin-bottom: 0px; /*add*/
margin-left: 0px; /*add*/
padding: 0px; /*add*/
}
I'd choose an inline-block approach.
.containerElement {
width: 100%;
text-align: center;
}
.childElements {
display: inline-block;
}
In order to make it work in your code, you need to remove .containerElement (#access ul) fixed height, and .childElements (#access li) floating property.
Related
I'm preparing a custom mailing, through php, and I need to prepare four custom circles, filled on depending on some percentages ( which I receive them dinamically ), so I need some html tags for do it:
Firstly, I thought in canvas tag, but I read that a lot of email clients don't support canvas tag: https://www.campaignmonitor.com/blog/email-marketing/2013/08/support-for-html-5-elements-in-email/
So, I thought in svg tag, but now I realize that, for do the calculation of the percentage, I need javascript to do it, and mail clients don't support javascript either.
So, I understand that I can't do it to mailing templates, right?
Thanks you very much!
Following code snnippet may work for you
CSS
/**
* HTML5 / CSS3 Circle with Partial Border
* http://stackoverflow.com/q/13059190/1397351
*/
* { margin: 0; padding: 0; }
.circle {
position: relative;
margin: 7em auto;
width: 16em; height: 16em;
border-radius: 50%;
background: lightblue;
}
.arc {
overflow: hidden;
position: absolute;
top: -1em; right: 50%; bottom: 50%; left: -1em;
transform-origin: 100% 100%;
transform: rotate(45deg) skewX(30deg);
}
.arc:before {
box-sizing: border-box;
display: block;
border: solid 1em navy;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-30deg);
content: '';
}
HTML
<!-- content to be placed inside <body>…</body> -->
<div class='circle'>
<div class='arc'></div>
</div>
Within my Wordpress site I have a custom written PHP search. It appears within the Content section of specific pages via 'include' so it's a separate file.
http://www.glutenfreeireland.com/accommodation/find-accommodation/
The entire code for search and results appear within the DIV .wheretoeatsearchwrapper.
Unfortunately a large gap appears between the text "Step 1: Choose a Location:" and the first SELECT box. It is caused by the adverts on the right, which when removed, fix the problem. I understood the class wheretoeatsearchwrapper kept everything within that DIV, i.e. objects either side of wheretoeatsearchwrapper wouldn't affect content inside it?
This is the applicable CSS:
.wheretoeatsearchwrapper {
/*max-width: 490px;*/
clear: none;
margin: 0;
padding-left: 10px;
}
.wheretoeatsearchwrapper h1,h2,h3,h4,h5,h6 {
display: inline;
}
.searchlocation select {
font-size: 95%;
margin: 0.2em;
float: left;
clear: both;
}
.steps {
color: #339933;
font-weight: bold;
}
.searchvenuetype {
font-size: 95%;
margin: 4px;
float: left;
clear: none;
}
It's the clear:both; on the searchlocation select element.
.searchlocation select {
font-size: 95%;
margin: 0.2em;
float: left;
clear: both; // Remove this
}
Remove clear: both for .searchlocation select
.searchlocation select {
font-size: 95%;
margin: 0.2em;
float: left;
/*clear: both;*/
}
I am trying to make a website for my school, and I am working on getting a area where there is a content area and also a sidebar. As you can see here: lrch.harrisonbh.com and I want the top of "Header 1" to match the top of "Sidebar." I put the css on a jsFiddle here: http://jsfiddle.net/GHpux/
I am using the css code here:
div.body{
width: 1047px;
margin-top: 210px;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
div.content{
background-color: #dbdbdb;
width: 750px;
max-width: 750px;
float: left;
padding: 15px;
margin-right: 15px;
z-index: 1;
display: inline-block;
}
div.sidebar{
background-color: #dbdbdb;
width: 215px;
float: right;
position: absolute;
padding: 15px;
display: inline-block;
}
But I get the undesired effect of the divs not matching up as you can see on the jsFiddle or my website. Im wonderding what is wrong with this? Thanks. I have tried many things. Thanks
Nice site, by the way. Sorry I didn't see the question. The fix is:
You need to remove the <br /> before the .sidebar.
Refer the screenshots.
Removing it makes it look this way:
Remove the <br> before sidebar, remove position:absolute and float:right from the sidebar and add vertical-align:top to sidebar and content.
http://jsfiddle.net/GHpux/1/
I wonder whether someone may be able to help me please.
I'm using Aurigma Image Uploader and FancyBox to produce this gallery page. The problem I'm having is that the images are positioned to go vertically down the page, whereas I would prefer them to go horizontally across the page, creating separate rows of images, one underneath the other.
I appreciate that some may not know anything about the Aurigma package, but I think I'm right in saying that 'Fancybox' is a little more widely used.
I just wondered whether someone could perhaps provide somne guidance please on the settings I would need to change within the Fancybox script so that the images are positioned horizontally rather than vertically.
Many thanks
.ccs file extract
.gallery-image-list { padding: 0; list-style-type: none; }
.gallery-image-list .item { display: inline-block; vertical-align: top; margin: 5px; padding: 15px; white-space: nowrap; width: 150px; float:left; }
.gallery-image-list .wide-item { width: 250px; }
.gallery-image-list .item .preview { display: inline-block; vertical-align: top; }
.gallery-image-list .item .data { margin: 5px; padding: 5px; list-style-type: none; display: inline-block; vertical-align: top; font-size: 95%; }
.gallery-image-list .item .data li { margin-bottom: 5px; }
I think what you want is to add float:left; to your item class in css.
This is the code for my next/prev navigation found at http://ilikeyou.tk/763/ :
<div class="navigation">
<? if($nexts['id'] == ''){ ?>
<? }else{ ?>
<? } ?>
</div>
I would like to vertically center the buttons. I tried using vertical-align:middle; which didn't work. I also tried top:50%; but that didn't do the job either.
Here is my css:
.navigation {
position: relative;
float: left;
vertical-align : middle;
height: auto;
padding: 0;
margin: 0 -20px 0 -22px;
width: 636px;
z-index:1;
}
.navigation a.prev{
background: url('images/nav_left.png');
float: left;
width: 50px;
height: 50px;
margin-left:10px;
}
.navigation a.next {
background: url('images/nav_right.png');
float: right;
width: 50px;
height: 50px;
margin-right:10px;
}
Thanks!
So, I'm guessing that the content area height is not very static.
http://jsfiddle.net/aBzhu/
Trick is to have the outer element set to position: relative; float: left; and then the element you want to center as position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element;
Note that this only works when the element that you want to center vertically IS static height. Should fit your usage I think.
Edit: Oh.. and I dont think this necessarily works in ie6. But does work ie7+
Edit2: Also if youre not interested in such a puny methods you should check this out Using jQuery to center a DIV on the screen
vertical-align is intended for table cell rendering, and even this is quite problematic. Why not just add a few pixels of top padding to your navigation ul? It's not real centering, but you're obviously not worried about dunamic scaling when you're using a fixed height graphic for the navigation background.
This Solution Matched me perfectly for small texts. Even if it is a link or just a text inside the div, this CSS Class could vertically align the content inside the DIV. Works for IE as well..
.verticalCenterDivText{
height: 29px;
line-height: 29px;
}
Hope this helps....
Regards, ADynaMic