What is the correct way to make the total area of a div a link?
I have multiple div's that are small tiles and I want the total area of the div to be a link.
Should the Anchor tag wrap a span on the inside or what is the best way to do this?
<div class="l-box">
<h3>Service 1</h3>
<p>Service description</p>
</div>
<div class="l-box">
<h3>Service 2</h3>
<p>Service description<</p>
</div>
Wrap your div with and give display: block; to a
Related
here's the image
Like showing in this image I want to pack divs inside short eats div. For example, the fish bun div can put beside chinese rolls div likewise. I just want no white space there. Those divs are dynamically appear though.
I've added my laravel view code below if you need.
<div class="col-md-4 border border-primary rounded">
<h4>Short Eats</h4>
#foreach($shorteats as $shrt)
<div>
{{$shrt->dish_name}}
</div>
#endforeach
</div>
<div class="col-md-4 border border-primary rounded">
<h4>Rice</h4>
#foreach($rice as $ric)
<div>
{{$ric->dish_name}}
</div>
#endforeach
</div>
You can add a class (e.g. .menu-container) to your <div>, that is the parent of your anchor tag, and use flexbox to (hopefully) achieve what you're after:
HTML:
<div class="menu-container">
{{$ric->dish_name}}
</div>
CSS:
.menu-container {
display: flex;
flex-wrap: wrap;
}
.food-item {
// styles for your anchor tag go here
}
I'm using the Bootstrap 3 grid to hide/show nav bar content based on whether or not the user is using an extra small device.
I'm using .hidden-xs and .visible-xs classes. These classes appropriately hide/show the content, but I'm running into two problems:
(1) Hiding the content also shrinks the column spacing by .col-xs-5 because the div is hidden. I tried adding .visible-xs to a subsequent div and using .col-xs-5 to make up the empty space. This works, but only if I place content inside the divs. I just want the columns to be spaced out.
(2) On XS view size, the final item on the Nav bar "Nav" jumps to the next row. I have only accounted for 12 total columns.
See this JSFiddle. I'm trying to nly show "Welcome" on large view and show nothing on XS view.
I here's an idea, you can try instead of adding content. This CSS trick uses :before and :after CSS pseudo-classes.
.no_content {
display: block;
content: "";
width: 151px;
height: 35px;
background: transparent url(tape.png) 0 0 no-repeat;
}
<div class="no_content"></div>
I would look at the grid system further. I believe there is an offset that you can use to offset the div like this:
<div class="row">
<div class="col-xs-5 col-xs-offset-5></div>
<div class="col-xs-2></div>
</div>
Use the pull-right bootstrap class instead of trying to make empty div's fill in the space.
Completely remove the div you added in item (1) to "make up the space". On the div containing "Nav" set the class as pull-right col-xs-1. So the code from your JSFiddle becomes:
<div class="container">
<div class="row" id="header">
<div class="col-xs-5" id="brand-wrapper">
<div class="brand">Brand</div>
</div>
<!-- Hidden on XS Devices -->
<div class="hidden-xs col-xs-5">
<p>
Welcome
</p>
</div>
<!-- Nav -->
<div class="pull-right col-xs-1" id="toggle-wrapper">
<p>Nav</p>
</div>
</div>
</div>
I am having trouble with aligning DIV tags. I am making a very basic page with Lightbox. In the old days, I would just make a table, align every cell vertically to the bottom, and move on. But trying to use DIV tags, having some trouble. When I do the code below, its pretty jumbled. 2 shorter DIV containers may align on one "row". Can someone point to me the best way to achieve this?
HTML CODE
<div id='wrapper' style='width:924px;>
<div style='float:left;width:308px;background-color:green'>
<a href='' title='title' rel='lightbox[10]' title=''>
<img src='' width='250px'>
</a>
<br/>
TITLE
</div>
<div style='float:left;width:308px;background-color:green'>
<a href='' title='title' rel='lightbox[10]' title=''>
<img src='' width='250px'>
</a>
<br/>
TITLE
</div>
<div style='float:left;width:308px;background-color:green'>
<a href='' title='title' rel='lightbox[10]' title=''>
<img src='' width='250px'>
</a>
<br/>
TITLE
</div>
...
</div>
Thanks!
See this fiddle. use a class instead of inline styles. I'm using inline-block here instead of float. the result is the divs are aligned at the bottom instead of the top. but be aware of whitespace in the code. see how I smashed your divs together. If there is whitespace a width of 33% is too much and will knock the third div down a line.The width of 33% is one third of the container so they each take up the same width.
I am building a web site. My web site will have blocks of content. Each block will have a title, some text, and an icon. My challenge is, I'm trying to vertically center each icon in the block. Currently, I have the following HTML or you can look at the jsfiddle.
<blockquote>
<div class="row">
<div class="small-10 columns">
<h4>The Block Title</h4>
<em>Some small blurb</em>
<p>Here is a paragraph relating to this block. It may include a couple of sentences. These sentences will wrap. Ultimately, the heart needs to be vertically centered.</p>
</div>
<div class="small-2 columns">
<span class="fi-heart" style="font-size:4rem;"> </span>
</div>
</div>
</blockquote>
In this code block, I'm using Zurb Foundation to help with layout. However, I can't seem to get the heart icon to center vertically in my right column. Does anyone know how I can do this with CSS?
Thank you
Add a line-height property to your inline style for <span class="fi-heart"> with a value equal to the font-size:
font-size:4em; line-height: 4em
I have a CSS question.
<div id="middle">
<div id="middle-left">
<div id="middle-left-top">
MLT
</div>
<div id="middle-left-bottom">
MLB
</div>
<br class="clearFix">
</div>
<div id="middle-right">
MLR
</div>
<br class="clearFix">
</div><!-- #middle-->
the example is at http://jsfiddle.net/Z2yeq/
my questions is why does middle-left not contain the two divs inside?
I want middle-left to expand as middle-left-top and middle-left-bottom
get taller
Thanks for any help
Absoloutely-positioned elements are no longer part of the layout. The parent has no idea how large child items are.
If you want the parent to be as large as the positioned child items to need to calculate and set this using JavaScript.
In general you shouldn't use absolute-positioning for layouts. You should use FLOATS.
The reason it doesn't is because you have it set to position:absolute; Remove position absolute to fix the problem.
#middle-left{
top: 0px;
left: 0px;
width: 800px;
}