I am working on my note application and I got stuck with the layout. Link to the screenshot of the layout.
Each of the boxes may have different height according to the text in the database. Each of the boxes is a LI (bootstrap span3 size).
I need the boxes to flow around each other nicely without white spaces.
I have seen that some webpages calculate absolute positioning in PHP for each of the boxes, but I hope I can achieve that only with CSS.
So far the structure is following:
<ol>
<li class="memPersonUnit clearfix span3">
<div class="memPersonUnitContainer clearfix">
THE CONTENT
</div>
</li>
</ol>
The css style:
ol has display: block;
li has display: position: relative; float:left (inherited from SPAN3 size);
div has border: 1px gray solid;
How should I change my css to achieve my goal?
If I need to use the PHP calculations, how should I proceed?
You won't really be able to achieve that only in css unless you create individual columns of your content blocks but that won't really work if you are adding content dynamically.
The most common way to achieve what you want is to use a jQuery plugin called Masonry.
http://masonry.desandro.com/
Related
I'm developing a Wordpress-theme with a theme-options page. In these options, a max-width for the website can be set, but I'm having some difficulties with the content-area.
When the max-width is filled in, the header- and footer-area get the max-width and a margin: O auto;.
The content-pages will be created using the Gutenberg Builder and I want to be able to add background-attributes to the blocks I use and display them full-width, but the content to fall into the max-width which was defined before.
HTML:
<header class="site-header">
<div class="header-wrapper"></div>
</header>
<main class="site-content">
<article class="post-10">
<header></header>
<div></div>
<footer></footer
</article>
</main>
<footer class="site-footer">
<div class="header-wrapper"></div>
</footer
CSS:
.header-wrapper,
.footer-wrapper,
article {
max-width: 1366px;
margin: 0 auto;
}
I get this:
I want my background to be full-width, but my content to have the same with as the content of my header and footer.
Is there a possibility to set the same max-width for the header-, content- and footer-section of the page, and make sure the background in the content-area is still full-width?
You can activate "wide alignment" and "full alignment" by adding add_theme_support( 'align-wide' );
to your functions.php file. The user then has the option to align images across the whole viewport width.
See also https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#opt-in-features
But that's for images, not for backgrounds.
For background areas/images you could try to create regular blocks (100% of the content area) which have margin settings like margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); (same as in full-width Gutenberg blocks) and padding-left/padding-right calc(50vw - 50%);: That way the block would span the whole viewport width, but the content area would have the width of the content area (full width minus padding). You also would have to add the regular padding you want to use inside your content column to those values.
If I understand then your css should look like this:
.header-wrapper,
.footer-wrapper,
article header, article div, article footer {
max-width: 1366px;
margin: 0 auto;
}
article{
width: 100%;
background: blue;
}
but only if max-width is setted for those 3 divs inside article
Does content-block is represented by article ?
Update
I recreated codepen from https://css-tricks.com/full-width-containers-limited-width-parents/
https://codepen.io/anon/pen/eaJyqV
If this is possible you could put image with position: absolute and then put text with position: absolute on top of it but I guess your content-block doesnt work that way ;/
I'm building a site using Wordpress and I'm adding an email link in my footer. The color of the link text is now grey rather than white and won't change. I have the site built also as a stand along front-end site and this code works but it won't work on the wordpress version -
footer.php
<div class="col-md-6">
<div id="email">
<img src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/footer_logo.png" style="width: 150px; height: 50px; margin-bottom: 20px;">
<p>Email: hello#havoccreative.com</br>+971 (0)55 151 0491 or +971 (0)55 282 2114
</br>PO Box 769558, twofour54, Abu Dhabi</p>
<p>This website was design by us *pause for applause*</br> and built with his bare hands by Michael Whitehead.</br> © Havoc Creative 2017</p>
</div>
</div>
style.css
footer #link a:link, a:hover {
color: inherit;
}
I've tried it a few different ways with the id at the end of the stye rule etc but still nothing. Not sure why the rule will apply in a standalone site but not on wordpress. I've also tried !important but still nothing. It needs to be white text like the rest of the footer text.
Your CSS is incorrect. It's basically targeting all <a> elements inside an element with ID link, inside footer elements, and also any <a> elements being hovered over. The problem is nothing to do with WordPress.
I'd replace your CSS with something simple like this:
footer #link, footer #link:hover { color: #ffffff; }
www.encyclopediasindhiana.org/index2.php
i have designed slide show from mycarousel with help of php, is working fine, but in frnt of carousel on left side the hyperlinks are not working till the height of carousel. on left side all links are not working if image is as large as the height covered by links...... you may try the third slide /image of carousel as its height is small so many hyperlinks came after its height are working.
why this is happening on chrome, while on internet explorer all links are working normally.
in bootstap.min.css file i have decleared width 539 and height auto,
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
display: block;
max-width: 539;
height: auto;}
In css in index2.php i decleared
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
#myCarousel.carousel.slide {width: 100%; max-width: 539px; !important}
.carousel-caption {
background:rgba(0, 0, 0, 0.3) !important;
}
</style>
links are not working outeside carousel can java help if then how, plz i dont know much about java
What I understood from your question, some hyper links are not clickable because of the container of the carousel are placed over the links which are not clickable. A quick solution is to remove the class name "container" from the closest block about the carousel. like use class="sd" instead class="container sd".
Also please note that the class name "container" are the predefined class from bootstrap css which is need to be use for a proper area and with a proper structure.
For debug the issue use a html/css inspector tools like firebug etc, it will help you lot to learn about DOM tree.
Using your browser's developer tools to inspect elements on the page, you will see there is a <div class='container sd'> extending to the left of your carousel, and overlapping your links - which stops them from working as the div gets the click events instead. Removing the container class 'fixes' the links with slight effects on the centering of your carousel.
The relevant Bootstrap documentation specifically states that containers are not nestable, and since you are already using a container-fluid as the topmost element you will need to solve that centering issue some other way.
I am using wordpress to generate a ul list, and I'd like the container div (that has background-texture) to stretch vertically, depending on how many li items user generates in Wordpress.
Code:
.black-bg-section {
background-color:#CCC;
}
#departments {
width:500px;
}
<div class="black-bg-section" id="departments">
<?php the_block('school-departments')?>
</div>
I guess it has to do something with the content to be generated by php. If I copy paste this into a new document and make an list inside that div, it works flawlessly.
Any help how to tackle this will be much appreciated.
Look for a div or some other element that is being generated that has the css property of: float: left; or float: right;. If there is one simply add this:
<div class="black-bg-section" id="departments">
<?php the_block('school-departments')?>
<div style='clear: left;'></div> <!-- or clear: right if that is what the float is -->
</div>
I want to have a semi trasparent hover effect on my social icons but cant figure it out.
Here is my header.php:
<div align = "right"><img src="/wp-includes/images/twitter.png"/>
<img src="/wp-includes/images/facebook.png"/>
<img src="/wp-includes/images/mail.png"/>
I see alot off people saying to edit css but i cant find this in my css
here is my website http://ideviceguys.com
You need a hook for your css code.
Give your div an id or class.
Try adding class="socialIcons to your main div.
<div class="socialIcons">
<img src="/wp-includes/images/twitter.png"/>
<img src="/wp-includes/images/facebook.png"/>
<img src="/wp-includes/images/mail.png"/>
</div>
Then add this little nugget to your css.
.socialIcons a:hover {
opacity:0.7; filter:alpha(opacity=40); /* Damn MS and IE8 and earlier */
}
That should give your icons 30% transparency.
Consider what the others say around here. They are much smarter than I am.
You have to define it in css. First give your menu an id or class so your css can target it in a non-generic way.
<div class="nav">
<img src="/wp-includes/images/twitter.png"/>
<img src="/wp-includes/images/facebook.png"/>
<img src="/wp-includes/images/mail.png"/>
</div>
in css:
.nav{
float:right;
}
.nav a{
display:block;
float:left;
margin-right:10px;
}
.nav a:hover{
box-shadow: 0px 0px 10px #ff6600;
}
Obviously this is just an example. I have no idea what your actual design calls for. I am merely showing you that a parent element with a class of nav can select the a tags within and assign an effect on hover. This is trivial, intro level css. A more specific response will require a more detailed question.