I'm having trouble with placing divs next to each other rather than having them below. I'm new to using CSS and I'm not sure what I need to do exactly.
The webpage is www.panduzee.com/wordpress
The post "Richard Lu" is suppose to be next to "Ashley Lee."
The link to the code is: http://pastebin.com/J3CNMfaP
And the CSS is: http://pastebin.com/isn5NViA
Sorry, I tried getting the code to work within this post but it wasn't showing up correctly.
Any help would be appreciated! The CSS was from the wordpress theme, just letting you all know.
Thank you!
jsFiddle( http://jsfiddle.net/BnJ7g/3/ )
on your "boxes" and "boxes2" divs, add the float:left attribute.
<div id="boxes" style="float:left;">
<div class="box">
<!--The post title-->
Ashley Lee <!--The post image-->
<img width="210" height="312" src="http://www.panduzee.com/wordpress/wp-content/uploads/2012/04/527802_2560693355446_1797426028_1635316_739143794_n-210x312.jpg" class="attachment-homepage-thumb wp-post-image" alt="" title="" />
</div>
</div>
<div id="boxes2" style="float:left;">
<div class="box">
Richard Lu <!--The post image-->
<img width="210" height="312" src="http://www.panduzee.com/wordpress/wp-content/uploads/2012/04/527802_2560693355446_1797426028_1635316_739143794_n-210x312.jpg" class="attachment-homepage-thumb wp-post-image" alt="" title="" />
</div>
</div>
Related
<div class="lotion-container">
<div class="lotion-sub">
<img src="images/item1.png" alt="">
<h5>THE RITUAL OF SAKURA</h5>
<h4>Cherry Blossom Hand Lotion</h4>
<p>Body lotion, 70ml</p>
<p>$12.50</p>
ADD TO BAG
</div>
<div class="lotion-sub">
<img src="images/item2.png" alt="">
<h5>THE RITUAL OF AYURVEDA</h5>
<h4>Himalaya Honey body cream</h4>
<p>Body lotion, 70ml</p>
<p>$7.50</p>
ADD TO BAG
</div>
<div class="lotion-sub">
<img src="images/item3.png" alt="">
<h5>THE RITUAL OF SAKURA</h5>
<h4>Organic rice miilk body cream</h4>
<p>Body lotion, 70ml</p>
<p>$7.50</p>
ADD TO BAG
</div>
<div id="lotion1" class="L1">
<div class="info1">
<h4>IT'S IN THE BAG!</h4>
<hr>
<img src="images/item1.png" alt="">
<h5>The RITUAL OF SAKURA</h5>
<h3>Cherry Blosson Hand Lotion</h3>
<p>Body lotion, 70ml</p>
<h5>$12.50</h5>
<br>
<p>Mix & Match 3/$33</p>
<p>Nurture and comfort skin from top to toe with The Ritual of Sakura Body Cream from
Rituals.</p>
<hr>
CONTINUE SHOPPING
X
</div>
</div>
So I'm trying to make a popup modal the issue arises when I go to CSS and try and change the opacity and make the modal context only appear when the user presses the add to bag link so can anyone give me advice or a helping hand on where I went wrong on the code.
Using CSS create a modal that pops up when person wants to click on add to bag.
I'm implementing a Jumbotron element like this:
<div className="jumbotron">
<div>
<h6 className="display-6">Reset Password</h6>
<p className="lead">We've just emailed you password reset instructions at <u>{this.email && this.email}</u></p>
<hr className="my-4" />
</div>
</div>
Unfortunately, the content overflows the jumbotron, like this:
How do I fix this?
EDIT: Here's another one. The compiled HTML appears like this in my browser:
<div class="container">
<div class="jumbotron">
<h6 class="display-6">Activate account</h6>
<p class="lead"><!-- react-text: 215 -->Please confirm the verification code we've just emailed you at <!-- /react-text --><u>b_kogan#hotmail.com</u></p>
<button class="btn btn-primary">Resend email verification code</button>
</div>
</div>
And, again, it's overflowing:
Here is a quick example of what you have in your HTML and with using bootstrap 4 and everything looks as expected,I think you have different style applied or this is not the rendered html on the browser.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div>
<h6 class="display-6">Reset Password</h6>
<p class="lead">We've just emailed you password reset instructions at <u>{this.email && this.email}</u></p>
<hr class="my-4" />
</div>
</div>
I discovered the "figure" and "figcaption" elements today. How do I wrap text next (right) to the image and caption.
<div>
<img alt="Hannibal Regional Medical Building" src="https://hannibalregionalmedicalgroup.org/Portals/0/locations/hannibal_regional_medical_building_375.jpg" width="375" height="178" style="text-align: left;" />
<figcaption>Hannibal Regional Medical Building</figcaption>
</div>
<div>
<p>
<span>Hannibal Regional Medical Group
<br />
6500 Hospital Drive<br />
Hannibal, MO 63401
</span>
</p>
</div>
<div>
<p><span>To make an appointment,<br />
please call 573-629-3500
</span>
</p>
</div>
Replace the first div with figure (only this is valid) and then put float:left; on the figure:
<figure style="float:left;">
<img alt="Hannibal Regional Medical Building" src="https://hannibalregionalmedicalgroup.org/Portals/0/locations/hannibal_regional_medical_building_375.jpg" width="375" height="178"/>
<figcaption>Hannibal Regional Medical Building</figcaption>
</figure>
<div>
<p>
<span>Hannibal Regional Medical Group<br/>
6500 Hospital Drive<br/>
Hannibal, MO 63401</span>
</p>
</div>
<div>
<p>
<span>To make an appointment,<br/>
please call 573-XXX-XXXX</span>
</p>
</div>
The HTML <figcaption> element represents a caption or a legend
associated with a figure or an illustration described by the rest of
the data of the <figure> element which is its immediate ancestor.
Permitted parents: A <figure> element; the <figcaption> element
must be its first or last child. -MDN
That means using a <div> tag as the immediate ancestor for a <figcaption> is invalid HTML in your example. To fix that you need to replace the <div> with <figure>.
<figure>
<img src="" alt="">
<figcaption>...</figcaption>
</figure>
And to make the rest of text to display on the right hand, there are many options, such as using float is the most common way.
figure {
float: left;
}
<figure style="float:left;">
<img alt="Hannibal Regional Medical Building" src="https://hannibalregionalmedicalgroup.org/Portals/0/locations/hannibal_regional_medical_building_375.jpg" width="375" height="178" />
<figcaption>Hannibal Regional Medical Building</figcaption>
</figure>
Demo:
http://jsfiddle.net/tuga/6va2nqad/3/
i need hide pics and no use display:none
I use Highlight script for create one gallery , the problem it´s i need only show 4 pics and no the others , the script let click in one pic and show the others with arrows , the problem it´s if i use display:none for the other pics and no in the first 4 , the other pics no show finally
I try other possibilities , but no works , i need hide all pics out of the firsts 4 but i can´t use display:none
The Best Regards
You can easily change this Highslide example gallery: http://highslide.com/examples/gallery-thumbstrip-above.html to have four visible thumbnails in the page instead of one visible thumbnail. The clue is to move the markup for the thumbnails you want to be visible, outside the hidden-container div.
The example gallery has one thumbnail outside the hidden-container div (see the source code).
jsFiddle with four visible thumbnails: http://jsfiddle.net/roadrash/Un4N7/ The HTML markup of a gallery with eight images, but only four visible thumbnails, will look like this:
<div class="highslide-gallery">
<a href="large-image1.jpg" onclick="hs.expand(this)" />
<img src="thumbnail1.jpg" alt="" />
</a>
<a href="large-image2.jpg" onclick="hs.expand(this)" />
<img src="thumbnail2.jpg" alt="" />
</a>
<a href="large-image3.jpg" onclick="hs.expand(this)" />
<img src="thumbnail3.jpg" alt="" />
</a>
<a href="large-image4.jpg" onclick="hs.expand(this)" />
<img src="thumbnail4.jpg" alt="" />
</a>
<div class="hidden-container">
<a href="large-image5.jpg" onclick="hs.expand(this)" />
<img src="thumbnail5.jpg" alt="" />
</a>
<a href="large-image6.jpg" onclick="hs.expand(this)" />
<img src="thumbnail6.jpg" alt="" />
</a>
<a href="large-image7.jpg" onclick="hs.expand(this)" />
<img src="thumbnail7.jpg" alt="" />
</a>
<a href="large-image8.jpg" onclick="hs.expand(this)" />
<img src="thumbnail8.jpg" alt="" />
</a>
</div>
</div>
Follow up question to achieving hover effect answer, most said that the HTML markup below was abysmal. So I implemented one of their suggestion which is to change tables into divs.
<html>
<head>
<title>Abyssal Warder Fire</title>
<link href="http://225175.edicypages.com/stylesheets/cards.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="pictureholder"><img src="http://lh5.googleusercontent.com/_qvhVKLFln2A/TU-51_bGZ9I/AAAAAAAAEW4/uAmzL3e-vn0/Abyssal%20Warder%20fire.jpg" /></div>
<div class="information">
<div class="Orbs">
<div class="layout">Orbs:</div>
<div class="value"><img src="http://225175.edicypages.com/photos/N.jpg" /><img src="http://225175.edicypages.com/photos/N.jpg" /><img src="http://225175.edicypages.com/photos/N.jpg" /> <i>(3)</i></div>
<div class="Affinity">
<div class="layout">Affinity:</div>
<div class="value"><font color="red">Fire</font></div>
</div>
<div class="Energy">
<div class="layout">Energy:</td>
<div class="value">250</td>
</div>
<div class="Type">
<div class="layout">Type:</td>
<div class="value">Creature <i>(Giant Destroyer)</i></div>
</div>
<div class="Charges">
<div class="layout">Charges:</div>
<div class="value">1</div>
</div>
<div class="Rarity">
<div class="layout">Rarity:</div>
<div class="value">UR</div>
</div>
<div class="Edition">
<div class="layout">Edition:</div>
<div class="value">Lost Souls</div>
</div><br />
<div class="WeaponType">
<div class="layout">Weapon:</div>
<div class="value">L</div>
</div>
<div class="Size">
<div class="layout">Size:</div>
<div class="value">XL</div>
</div>
<div class="Attack">
<td class="layout">Attack:</div>
<td class="value">2500</div>
</div>
<div class="Defense">
<div class="layout">Defense:</div>
<div class="value">2500</div>
</div>
<div class="CardID">
<div class="layout">CardID:</div>
<div class="value"></div>
</div><br />
<div class="Abilities">
<p class="description"><i>
<img src="http://225175.edicypages.com/photos/Activated.jpg" />Crystal Spikes - Activate to ram Abyssal Warder's crystaline fist into the ground. Crystal Spikes will erupt from the ground and within 4 seconds cover a 20m radius. They deal 570 damage to enemies within it, up to 1710 in total that cannot be warded off with the help of damage reducing abilities as the crystals are able to circumvent every buff or protective shield. Knocks back small and medium units. Only affects ground entities. Reusable every 20 seconds. (Power: 80)<br /><br />
<img src="http://225175.edicypages.com/photos/Passive_r.jpg" />Infused Breakdown - Upon dying the unit collapses into pieces that will reassemble on their own to form two large sized Abyssal Warders. If those die their remains will again form to medium sized golems each. All smaller variants of Abyssal Warder are enraged and deal increasingly more damage the longer they attack.
</i></p></div>
</div>
<div class="upgrades">
<div class="Upgrade1">
<div class="L U1"><u>Upgrade I:</u></div>
<div class="V Map1">Empire <br />(<font color="green">Standard</font>)</div><br />
<div class="L HT1">Honor Tokens:</div>
<div class="V HTV1">0</div>
<div class="L VT1">Victory Tokens:</div>
<div class="V VTV1">4</div>
<div class="L BT1">Battle Tokens:</div>
<div class="V BTV1">30</div>
<div class="L PR1">PvP Rank:</div>
<div class="V PRV1">8</div>
</div><div class="Upgrade2">
<div class="L U2"><u>Upgrade II:</u></div>
<div class="V Map2">Empire <br />(<font color="orange">Advance</font>)</div><br />
<div class="L HT2">Honor Tokens:</div>
<div class="V HTV2">0</div>
<div class="L VT2">Victory Tokens:</div>
<div class="V VTV2">30</div>
<div class="L BT2">Battle Tokens:</div>
<div class="V BTV2">60</div>
<div class="L PR2">PvP Rank:</div>
<div class="V PRV2">9</div>
</div><div class="Upgrade3">
<div class="L U3"><u>Upgrade III:</u></div>
<div class="V Map3">Empire <br />(<font color="red">Expert</font>)</div><br />
<div class="L HT3">Honor Tokens:</div>
<div class="V HTV3">40</div>
<div class="L VT3">Victory Tokens:</div>
<div class="V VTV3">70</div>
<div class="L BT3">Battle Tokens:</div>
<div class="V BTV3">120</div>
<div class="L PR3">PvP Rank:</div>
<div class="V PRV3">10</div></div>
</div>
<div class="comments"></div>
Here is before and after the changes. Before I proceed to CSS, is there any html codes I should add or remove? Any div tags I should change?
P.S. I will be using Microsoft Excel to automate more than 500 html pages and uploading them manually one by one, so it is important that I get this right.
Layouts and individual styling should be done in CSS, agreed. However, if within a layout you have tabular data, you should use tables. You don't want to indulge in "divs for divs' sake"!
Looking at your mark-up, it's very "dense"—there are an awful lot of classes specified in there. For ease of maintenance (and your sanity), I'd really try to think about what you're trying to achieve and go from there.
For example, this sort of mark-up, with subtly different (and obscurely-named) classes is a bear to maintain:
<div class="L BT2">Battle Tokens:</div>
<div class="V BTV2">60</div>
Perhaps you could use a list instead; this seems more readable to me, but your mileage may vary:
<li class="tokens">Battle Tokens:<span class="count">60</span></div>
1st of all, it is great that you changed from <Table> to <div>, however!
You have to understand that each tag has it's own purpose, and the fact that you use div for everything, is quite bad HTML etiquette.
Also, the <i>, <font> tags are OBSOLETE, instead of writing your code like that, you can use the styling properties of CSS, for example:
p{font-style: italics}
or if you want to color the element
p{color:red}
and if you already have styled element, it's not a problem adding a sub-style (or an extra style to the element)
<p class='style 1 style2'>bla bla</p>
in this case, the <p> element will make usage of both style1 and style2.
also, I believe that you can be MUCH, MUCH smarter if you'll not create 500 html pages, and you'll make usage of database power, so you could easily change the pages if you'll want later on, and simply parse the pages using simple PHP.
Will be MUCH EASIER than to re-write 500+ html pages in the future, incase you'll want to change the layout.
Sniff around the topics of PHP and MySQL - it might seem a bit tricky at first, but in the long run, it'll make your life much easier.
I'm not sure, this looks pretty tabular for me, so id try working with tables, making sure to use proper semantic.
This is a reference http://www.htmlcodetutorial.com/tables/_THEAD.html
Although I'd work the layout with divs (html/css stuffs)
GL.