Currently, I have a box which has some text inside it. Currently, the link is only applied to some text as below:
<div class="row text-banner-blocks">
<div class="col-sm-4 header-text-banner text-center">
<!-- gray-border -->
<div class="box">
<h3>Free delivery worldwide*</h3>
<a href="#">
*More info here
</a>
</div>
</div>
This is how it appears on the site:
https://snag.gy/sbC421.jpg
However, I want the whole link placed in the whole box and as with HTML I just place the tag inside the tag but I seem to lose all the styling and the padding goes I think? Code:
<div class="row text-banner-blocks">
<div class="col-sm-4 header-text-banner text-center">
<!-- gray-border -->
<a href="#">
<div class="box">
<h3>Free delivery worldwide*</h3>
<br/>
*More info here
</div>
</a>
</div>
This is how it looks after:
https://snag.gy/KZzSUv.jpg
Any help is greatly appreciated!
I think you are referencing the .box div using a css selector that requires the parent element to be a div
so you might have to change the css for the box element to something like
a > .box {
/* styles */
}
check this image for more info
Decided to do it with JavaScript inside using the below for the parameters of the div tag:
onclick="document.location='#'"
This solution is neater for what I am after and as I am using several style sheets it was difficult to spot the culprit.
Related
Is there a simple css code for bulma making their horizontal tabs to vertical tabs? (sample below) I just want to overwrite their css
<div class="tabs">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
I'm afraid there isn't a simple class to add in Bulma to achieve this (or at least not that I'm aware of). But since Bulma is using flexbox you can achieve a lot by simply overwriting the flex-direction.
.tabs ul {
-webkit-flex-direction: column;
flex-direction: column;
}
I also made a fiddle to demonstrate.
Very late to on this one but if it helps anyone else. I use a horizontal tile with 2 children. The first child I use a panel without a heading, just panel blocks that are anchor tags for my vertical tabs, the second child a div to put the target content of the anchor tag in. Switches to tabs on top and content on bottom at mobile breakpoint. JSFiddle
<section class="section">
<div class="container">
<div class="tile is-ancestor">
<div class="tile box is-parent is-horizontal">
<div class="tile is-child is-2">
<nav class="panel datanav">
<a class="panel-block">Families</a>
<a class="panel-block">Members</a>
<a class="panel-block">Member Birthdays</a>
<a class="panel-block">Member Cars</a>
<a class="panel-block">Sponsors</a>
<a class="panel-block">Newsletter Mailed</a>
<a class="panel-block">Newsletter Electronic</a>
</nav>
</div>
<div class="tile is-child is-10 has-background-white-ter">
CONTENT
</div>
</div>
</div>
</div>
</section>
I want to make the whole view linkable.
This is my rewrite rule:
<div class="news_column_wrapper z-depth-1 card">
<div class="news_column_images card-image">[field_images]</div>
<div class="news_column_content_wrapper">
<div class="news_column_created"><i class="fa fa-clock-o"></i> [created]</div>
<div class="news_column_title">[title]</div>
</div>
</div>
This is my view field screenshoot, I want to make the whole box clickable:
I have tried with
<div class="news_column_wrapper z-depth-1 card">
<a href="[path]">
<div class="news_column_images card-image">[field_images]</div>
<div class="news_column_content_wrapper">
<div class="news_column_created"><i class="fa fa-clock-o"></i> [created]</div>
<div class="news_column_title">[title]</div>
</div>
</a>
</div>
but nothing happens. How can I achieve that?
I think it's more an HTML issue than a Drupal one.
The <a> tag is an inline tag, and you have placed <div> tags inside of it. The natural display of the <a> tag will make that, only the text will be clickable.
What you can do is use CSS to make the <a> a block element, therefore, making the clickable zone extend to the whole block.
First add a class to your link:
<a class='block_link'>
<h2>My title</h2>
<div>My content</div>
</a>
Then, in your CSS, make the <a> tag displaying like a block.
a {
display:block;
}
That should do the trick.
This is my current code
.tag-container.bottom-border.col-middle
h1.text-center {{ tag.name }}
button.btn.btn-follow.pull-right(ng-hide="hasFollowed" ng-click="tagArticles.followTag()") Follow
I want to make the tag.name in the middle, and the button in the right, but it didn't display correctly. How should I structure these two part? What css should I use?
Thanks.
Update
This is the simplified code about basic html
<row>
<div>
<h1> Tag name</h1>
</div>
<div class="pull-right">
<button>Follow</button>
</div>
</row>
Feel free to work on it. Thanks
If you want to stick to pure bootstrap styles, something like this would work:
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1 class="text-center">Tag name</h1>
</div>
<div class="col-md-1 text-center">
<button class="btn btn-follow " style="margin-top: 1.5em;">Follow</button>
</div>
</div>
You'll need some extra styling to vertically center the button (to replace the inline style adding 1.5em margin to the top).
Also that styling centers the button below the h1 in mobile breakpoints ... that may or may not be what you're after.
So I want to code the content section that displays the title, author and the post itself, the code I'm using is where I want the title on top on one row, then the author on another row and content on another:
<div id="main">
<div class="container">
<div class="title">Title</div>
<div class="author">Author</div>
<div class="content">
Content here
</div>
</div>
</div>
or would span be a better choice like this?
<div id="main">
<div class="container">
<span class="title">Title</span>
<span class="author">Author</span>
<span class="content">
Content here
</span>
</div>
</div>
Or is there a completely different and better way of doing this?
Thank you.
Maybe you should try HTML semantic markup instead of divs?
<section id="main">
<article>
<hgroup>
<h1>Title</h1>
<h2>author</h2>
</hgroup>
<section>
Content
</section>
</article>
</section>
div is grouping content and span is text-level semantics. Of the two examples given, the latter is what you'd be better using:
<div id="main">
<div class="container">
<span class="title">Title</span>
<span class="author">Author</span>
<span class="content">
Content here
</span>
</div>
</div>
Depending on what is contained within .content you may want to use div for that, however.
To properly conform with the specification you should use cite for the title. Equally, if your .content is a quote or extract you should use q or blockquote
<div id="main">
<div class="container">
<cite class="title">Title</cite>
<span class="author">Author</span>
<q class="content">
Content here
</q>
</div>
</div>
It doesn't matter. All of the answers espousing one over the other are fine, but pretty much arbitrary opinions.
In the end, both DIV and SPAN are just generic containers. They don't mean anything in and of themselves.
So, if you have to choose between one of those two, it doesn't matter. However, due to your one requirement:
is where I want the title on top on one row, then the author on another row and content on another
...I'd suggest going with a DIV for no other reason than a div, by default, is a block level element, meaning it will automatically be formatted into individual lines for you.
All that said, everyone that is suggestion that you perhaps consider a more semantic container is spot-on. Would this be better treated as a ol? Or perhaps even just p tags?
The <div> tag should be used for dividing up your page into logical blocks. Here a <span> would be more appropriate.
However as you're displaying text what's wrong with something like:
<div id="main">
<div class="container">
<h2 class="title">Title</h2>
<a class="author">Author</a>
<p class="content">
Content here
</p>
</div>
</div>
After all, they're designed specifically for text.
If the question is only a choice between div and span then the answer is...
span is used for the individual elements, and div for blocks.
The second variant is better than the first.
See Grouping elements: the DIV and SPAN elements for more info.
Here is quote from there:
These elements define content to be inline (SPAN) or block-level (DIV)
I'm having trouble finding a solution to my issue.
I'm working in the footer of a page. From left to right in a single row, there's a disclaimer div, then a parent div containing a FaceBook and a Twitter button.
(Blue ~ disclaimer div, pink ~ parent div, red ~ the twitter button's color; the facebook button does not have a separate color).
The goal is for the Twitter button to always be on the right of the FaceBook button.
The disclaimer div is set up be a minimum size (the page is using Twitter Bootstrap), so when it is resized small enough the parent div of the buttons is moved to the next line below the disclaimer div.
The issue I'm running into is that when this button-parent div moves down, the Twitter button pops out of the parent div and is laid out below the FaceBook button in a column.
The code for the footer itself:
<div class="container">
<div id="footer" class="row">
<div class="span9 footer-leftspan">
<xsl:copy-of select="data/footer-content/entry/content" />
</div>
<div class="row">
<div class="span3 social-media-footer">
<div id='face' class="span1">
<!-- FaceBook Button -->
<a class="button-link" href="http://www.facebook.com/pages/...." target="_blank">
<img id="fb-btn" class="social-img" src="/f.svg" alt="...." />
</a>
</div>
<!-- Twitter Button -->
<div id='twitt' class="span1">
<a class="button-link" href="https://twitter.com/...." target="_blank">
<img id="twitt-btn" class="social-img" src="/t.svg" alt="...." />
</a>
</div>
</div>
</div>
</div>
</div>
Aside from the arbitrary coloring, there are no specific CSS rules on the buttons or their parent div.
I really have no idea on this one, and the only seemingly viable solutions I can find involve position the buttons with absolute or fixed, neither of which keep them in their parent in the footer how I'd like.
My primary goal that I'd like help accomplishing is just getting the Twitter button to stay in the parent div on resize.
Any ideas? And thanks ahead of time!
See if this will work for you:
http://jsfiddle.net/panchroma/yX4ZV/
I have edited your HTML a little so that the twitter and facebook icons are in the same span instead of seperate spans in a nested grid. Doing this solved the question for desktop and smartphone window sizes, but not for tablets.
To solve for tablets I wrapped the two icons in a class which I force to have a min-width:
HTML
<div class="container">
<div id="footer" class="row">
<div class="span9 footer-leftspan">
<xsl:copy-of select="data/footer-content/entry/content" />
</div> <!-- close span9 -->
<div class="span3 social-media-footer">
<div class="social-wrapper">
<!-- FaceBook Button -->
<a class="button-link" href="http://www.facebook.com/pages/...." target="_blank">
<img id="fb-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/facebook.jpg" alt="...." />
</a>
<!-- Twitter Button -->
<a class="button-link" href="https://twitter.com/...." target="_blank">
<img id="twitt-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/twitter.jpg" alt="...." />
</a>
</div><!-- close social-wrapper -->
</div> <!-- close span3 -->
</div> <!-- close row -->
</div><!-- close container -->
CSS
.social-wrapper{
min-width:185px !important; /* adjust as necessary depending on icon sizes */
}
Good luck!