I can't for the life of me figure out why in Google Chrome the images in the .productimage divs aren't completely filling up width wise for the .productbox divs near the bottom of this page here:
http://www.daylightfoods.com/products-beta/
It works perfectly in Mozilla Firefox though.
What I want it to do is for those photos in the Products section boxes to fill up the entire width, just like the boxes up in the Specialty section at the top of the page do. Any suggestions or thoughts? This is a custom coded page within Wordpress.
Is there an issue with the spacing somewhere? Or the CSS? I'm including snippets of the code here:
<img src="../wp-content/themes/mightymitty_custom/assets/whiteleaf_greybg.png" alt="White Daylight Foods Logo"><span style="margin-left:10px;font-family:AvenirRoman,Arial;font-size:36px;color:#fff;">Products</span>
<div class="productbox"><div class="productimage"><img src="http://www.daylightfoods.com/wp-content/themes/mightymitty_custom/assets/products/products_corn.png" alt=""></div><div class="productcaption"><strong>Fresh Produce</strong><br>Located in the heart of the Silicon Valley, we are in close proximity and have access to the highest quality produce year around from trusted growers on the Central Coast, San Joaquin Valley and specialty growers along the North Coast.</div>
<div class="productbox"><div class="productimage"><img src="../wp-content/themes/mightymitty_custom/assets/products/products_organic.png" alt=""></div><div class="productcaption"><strong>Organic</strong><br>As certified organic produce distributors, we source the highest quality Certified Organic produce from trusted growers.</div>
And here is a copy of the relevant CSS:
.productbox {
display:inline-block;
height:360px;
width:310px;
margin:10px;
background-color:#fff;
-moz-border-radius-bottomright: 30px;
border-bottom-right-radius: 30px;
-moz-border-radius-bottomleft: 30px;
border-bottom-left-radius: 30px;
vertical-align:top; }
.producttitle {
font-family:arial;
font-size:14px;
font-weight:bold; }
.productimage {
width:318px;
height:210px;
padding:0px; }
.productcaption {
height:140px;
font-family:arial;
font-size:12px;
padding-left:15px;
padding-top:12px;
padding-right:15px;
padding-bottom:10px; }
.producttags {
font-family:arial;
font-size:11px;
color:#9aca3c;
padding-left:15px;
padding-bottom:10px; }
What am I doing wrong?
You aren't defining any image dimensions in your code. Therefore the image will default to it's actual size.
Try something like this in your CSS
.productbox .productimage img {
width: 100%;
height: 100%;
height: auto;
}
Another issue you're having is you have productbox with a width of 310px and productimage has a width of 318px. Here is a working fiddle for you. JSFiddle
Related
This has been bothering me for a while. I have currently vertically align a border contain the word "Facebook" to an image but, vertical align isn't completely centering the word with the image.
Update 1: I am using Width 100% and Line-Height 100%. This is close to how I want it but not quite. https://gyazo.com/f67cff590476c9e11601172b5b1dafd5 I want the border and the image to align. Here is my old code:
HTML
<div id="div06">
<img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/>
<span id="span01">Facebook</span>
</div>
CSS
#div06
{
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01
{
border:3px solid blue;
padding: 35px;
margin: 25;
}
Here is my current edit:
#div06{
margin-top:3%;
width:100%;
line-height:100%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01{
border:3px solid #3b5998;
color:#000000;
font-family:arial, bold;
font-size: 30px;
padding: 35px;
margin: 25;
}
It is vertically aligned in the full version but visually it's not (https://gyazo.com/f67cff590476c9e11601172b5b1dafd5 In this screenshot, the text does center align but the order doesn't. How do I make the border align?). I want them to align. If it is visually vertical for you then this problem only exists with the full version. I think it might be the image but, I don't know. How Do I fix this?
Also if you need the full code I will provide it below.
Full Code
HTML
<head>
<!--
Assignment: Personal Website
Date: 10/4/16
Name: Bradley Elko
-->
<link rel="stylesheet" href="personalWeb1.css">
</head>
<body>
<div id="div01">
<h1 id="h101">Bradley's Website</h1>
</div>
<div id="div02">
<h3 id="h301">My Band</h3>
<h3 id="h302">My Handlers</h3>
<h3 id="h303">My Ideas</h3>
</div>
<div id="div03">
<div id="div04">
<h2 id="h201">Formal Unknown Cereal Killer</h2>
</div>
<div id="div05">
<p id="p01">Date: 10/05/2016 (Latest Update)
<blockquote>
Summary:
<br/>
<br/>
Formal Unknown Cereal Killer is a band I made on September 30th, 2016. I don't have anyone else in it, but I will keep trying to get more members. The band will be a metalcore band(a rock genre). I may implement other instruments into the band (such as a violin, flute, clarenet, or another unique instrument). If you want to keep up to date check us out. The links are down below.
</blockquote>
<div id="div06">
<img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/>
<span id="span01">Facebook</span>
</div>
<div id="div07">
<img id="img02" src="https://pbs.twimg.com/profile_images/767879603977191425/29zfZY6I.jpg"/>
</div>
</div>
</div>
</body>
CSS
a:link{
color:#1a0000;
border-right:2px solid;
border-left:2px solid;
padding:5;
}
a:visited{
color:#950f0f;
}
a:hover{
color:red;
}
a:focus{
color:#eeeedd;
}
#div01 {
position:fixed;
top:0px;
left:0px;
right:0px;
height:80px;
bottom:90%;
font-family:Arial, Helvetica, sans-serif;
font-size:25px;
background-color:#73778c;
color:#950f0f;
text-align:center;
border-top:3px solid #950f0f;
border-bottom:2px solid #950f0f;
padding-top:0;
display:inline-block;
}
#h101{
margin-top:10;
margin-bottom:10;
}
#div02{
position:fixed;
top:85px;
left:0px;
right:0px;
display:inline-block;
background-color:#73778c;
color:#950f0f;
border-bottom:2px solid #950f0f;
text-align:center;
padding-top:5;
padding-bottom:5;
font-family:verdana;
font-size:12px;
}
#h301{
display:inline;
}
#h302{
margin-left :20%;
margin-right:20%;
display:inline;
}
#h303{
display:inline;
}
#div03{
position:fixed;
padding-top:0;
top:114px;
left:0%;
right:0%;
bottom:0%;
background-color:#73778c;
color:#950f0f;
border-bottom:3px solid #950f0f;
}
#div04{
font-size:30;
text-align:center;
margin-top:-30;
}
#h201{
font-family:Times New Roman;
}
#div05{
margin-left:100;
margin-right:100;
margin-bottom:100;
margin-top:-30;
padding-top:10;
padding-bottom:10;
padding-left:30;
padding-right:20;
border:3px solid #950f0f;
background-color:#e0e0d1;
}
#div06{
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
}
#div07{
margin-top:3%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01{
border:3px solid blue;
padding: 35px;
margin: 25;
}
#img02{
width:10%;
}
Also (If you get this far you don't have to answer this. I'm just curious), how do you get Fullscreen inspect elements? Whenever I use it, it takes up a portion of the page that displays the portion of the website, but I want it to display the Fullscreen results [(This has been answered)].
Trying using text-align:
#div06 {
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
text-align: center;
}
And to make the chrome dev-tools full screen, press the 3 small dots close to the side (menu button), and beside 'Dock side' there is a button to 'pop out'. This will make a new window with which you can resize as much as you need.
My friend told me I should use a table and it worked! Here is the snippet of code:
HTML
<table>
<tr>
<div id="div06">
<th><img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/></th>
<th><span class="span01"><a class="a02" style="text-decoration:none" target="_blank" href="https://www.facebook.com/groups/247367778991930/">Our Facebook Band Group</a></span></th>
</div>
</tr>
</table>
CSS
#img01
{
width:100px;
height:100px;
vertical-align:middle;
}
span.span01
{
border:3px solid #ffffff;
color:#000000;
font-family:arial;
font-size: 16px;
padding:38.5px;
margin: 25;
}
I have two divs 1)with the icon 2)with the text related to it.
I want to align them in a line.
<div class="col-lg-4">
<h4>Stunning Layouts</h4>
<div class="one"><i class="fa fa-heart service_icon"></i></div>
<div class="one"><a class="service_para">A website that works perfectly good and give a user warm experience on all mobile and tablet browsers.A website that works perfectly good and give a user warm experience on all mobile and tablet browsers. </a></div>
</div>
and my css is like
.service{
background-color:#fff;
padding:30px 100px;
}
.service_icon{
color:#fff;
background-color:#CE1E47;
padding:20px;
margin-right:10px;
border-radius:50%;
}
.one{
display:inline;
height:100%;
}
but if i write more text it gets written under the icon. i want both of them separated side by side even if i write 100 lines of text.
i hope you get it???
display: table-cell is what you need.
Check this fiddle
update your css -
.one{
display:table-cell;
}
There are several methods, here's one using positioning and padding:
http://codepen.io/anon/pen/RWGQyG
<div class="col-lg-4">
<h4>Stunning Layouts</h4>
<div class="icon-text">
<i class="fa fa-heart service_icon"></i>
<p>A website that works perfectly good and give a user warm experience on all mobile and tablet browsers.A website that works perfectly good and give a user warm experience on all mobile and tablet browsers. A website that works perfectly good and give a user warm experience on all mobile and tablet browsers.A website that works perfectly good and give a user warm experience on all mobile and tablet browsers</p>
</div>
</div>
.icon-text{
position: relative;
padding-left: 50px;
}
.service_icon{
position: absolute;
left: 0;
color:#fff;
background-color:#CE1E47;
padding:20px;
margin-right:10px;
border-radius:50%;
}
Add this css.
.service_icon{
color:#fff;
background-color:#CE1E47;
padding:20px;
margin-right:10px;
border-radius:50%;
display: inline-block;
}
.one{
display:inline;
height:100%;
float: left;
}
.one:first-child{
width: 20%;
}
.one:last-child{width: 80%;}
you can test here http://jsfiddle.net/prakashlaxkar/z6m9zk8m/
I'm trying to align a button and some text at the bottom of a div much like the example below with the Price and the Check it out button. What's the best way to do this. I've made a div, styled it to get the text, and picture right. I just need to attach the button to the right-hand side and the price to the left, inline with each other.
Similar to the product displays in the website thisiswhyimbroke.com
http://www.thisiswhyimbroke.com/
^^ Price and the Check It Out button. How do I achieve this?
Try like this: DEMO
Try to use reset you CSS first.
CSS:
*{
padding:0;
margin:0;
}
#priceAndButton {
width:100%;
display:block;
height:30px;
line-height:30px;
}
#priceAndButton h4 {
float:left;
vertical-align:middle;
}
#priceAndButton img {
float:right;
}
Hope this helps you
I have created a working fiddle with your requirements:
http://jsfiddle.net/8993H/
HTML:
<div id="main-container">
<div class="img-div"><img src="http://tiwibzone.tiwib.netdna-cdn.com/images/beer-chug-flowmeter1-300x250.jpg"/></div>
<div class="rhs">
<div class="button-nav">
<span class="price">$35.00</span>
<span class="check-btn"><button>Check It Out</button></span>
</div>
</div>
</div>
CSS:
#main-container{
width:100%;
border: 1px solid #aaa;
}
.img-div{
width:50%
}
.img-div img{
width:100%;
}
.rhs{
width:48%;
float:right;
position:relative;
}
.button-nav{
position:absolute;
bottom:10px;
width:100%;
}
.price{
float:left;
}
.check-btn{
float:right;
}
Try this:
button{
float:right
}
#price{
float:left
}
Here i created one working fiddle for your requirement.. You can re use this CSS. Hope This will help you.
HTML
<div class="desc">
<img height="200px" width="200px" src="http://www.clker.com/cliparts/8/2/2/6/11971154711712468971BigRedSmile_A_screwdriver_1.svg.med.png"/>
<p>Move over sliced bread, the water jet pack is officially the greatest thing ever. For only sixty eight grand you can own your very own water thrusting jetpack. It can lift you up to 30 feet high and thrust forward at 30 miles per hour – practically guaranteeing certain death.</p>
<div class="button">
Check it out
</div>
<div class="price">$500.00</div>
</div>
CSS
.desc{
text-align:jstify;
width:50%;
}
.button a{
background-color: #faab37;
color: white;
display: block;
float: right;
padding: 7px 8px;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.button a:hover{
background-color:#f9bd66;
}
Hope This is What your expected output
I have a code everything seem alright but the front end being rendered isn't. I have four boxes with a total width of 1000px and each box is 250px floated left, but the page when displayed shows the div as wider than 1000px, i don't know where the ish is, please find below the html code and css for that region:
<div class="strategy">
<div class="strat">
<p>To ensure our clients get the best results, we employ a strategy which takes time to create the best possible combination of ideas beyond just a random collection of texts and images.</p>
</div>
</div>
<div class="strategy">
<div class="design">
<h2>Design</h2>
<p>We plan and strategize your project through even before starting it. An evaluation meeting is scheduled with you to get a chance to understand what your requirements are. We analyze, review and discuss with you on various options for your project. This will guide our brainstorming, research and gathering of content for designing the best solution for you.
</p>
</div>
</div>
<div class="strategy">
<div class="develop">
<h2>Develop</h2>
<p>Based on the deliverables from the design step, we set to work harnessing our talents and appropriate technologies available to execute the project with focus on quality, cost and time. The client is carried along and kept in the loop at each stage for design approvals through our Online Project Sneak-Peek Platform (PSP Platform). This allows you to keep track of changes and updates into ensuring that the project, no matter how small or large, is a complete success.
</p>
</div>
</div>
<div class="strategy">
<div class="deploy">
<h2>Deploy</h2>
<p>Finally your project is ready for deployment. This is in two phases; first phase in which we deploy project for debugging and troubleshooting for errors and glitches. When this phase has been certified then we move to the second phase which is the final deployment of the project and handover.
</p>
</div>
</div>
<div class="clear"></div>
and the css for it is:
#about{
width:100%;
}
#about .about{
width:1000px;
margin:auto;
text-align:justify;
border-bottom:solid #000 1px;
padding:0 0 20px 0;
}
.about h1 {
width:1000px;
margin:auto;
text-align:left;
padding:50px 0;
font-size:40px;
font-weight:normal;
border-bottom:solid #000 1px;
}
.about h2 {
width:1000px;
margin:auto;
text-align:left;
padding:20px 0;
font-size:25px;
font-weight:normal;
}
.about p{
font-size:14px;
}
.about .strategy{
width:25%;
float:left;
text-align:left;
color:#fff;
}
.about .strat{
background:#33bbec;
padding:90px 20px 0 20px;
height:370px;
}
.about .design{
background:#5a5a5a;
padding:15px 20px;
height:430px;
}
.about .develop{
background:#4a4a4a;
padding:15px 20px;
height:430px;
}
.about .deploy{
background:#3e3e3e;
padding:15px 20px;
height:430px;
}
Why are you nesting your divs? And in your CSS you are styling the headers to be 1000px? Thats not right dude..your code is a mess...style the DIV CLASS ...not the headers...
I'm writing a CSS for a store. I need a div that sets the buy button to the left, and a Prev and View Next images to the right, which is working.
My real problem is that sometimes the "buy" button will be not present, because of the PHP.
When the buy button is not present images must be centered, because if they are not, it will be empty space to the left side (where the buy button was)
At first i think on margin:0px auto, but this will need a constant width set, right?
I really thought at the beginning this will be very simple. But i got stuck/
fiddle
Simplified to get the idea
I think im just missing something basic that i cant see know.
HTML:
<div id="comprarbtn">
<div id="wrappcomprarbtn">
<input class="comprarbtn commonButton" type="button" value="Buy Now" id="buynowlogin">
<div id="naviminicc"> <img src="images/navmini_01.png" class="navmini1">
<img src="images/navmini_02.png" class="navmini2" rel="#mies1"> <img src="images/navmini_03.png" class="navmini3">
</div>
</div>
</div>
CSS:
.comprarbtn { width:175px;
line-height:51px;
background-image:url(image.jpg);
border:0px;
font-size:12px;
padding-left:10px;
cursor:pointer;
overflow:hidden;
text-indent:0px;
z-index:10;
}
#comprarbtn {
float:left;
position:absolute;
width:321px;
text-align:center;
height:51px;
z-index:1000;
display:table-cell;
background-color:#f4f4f4;
}
#wrappcomprarbtn { margin:0px auto;}
#naviminicc { width:145px; float:right;}
#naviminicc a { margin:0px; padding:0px; }
.navmini1 { cursor:pointer; margin:0px; }
.navmini2 {cursor:pointer; margin:0px; }
.navmini3 {cursor:pointer; margin:0px; }
#navmini { width:135px; max-width:135px;}
I'm not sure what's going on with the CSS and HTML you posted, but to achieve what you want to do in theory:
Give the wrapping div a fixed width large enough to contain both the button and the images
Give it margin: 0 auto to center it and text-align: center.
Make the inner contents display: inline
css:
.wrapper {
width: 200px; /* Large enough to contain everything */
text-align: center;
margin: 0 auto;
}
.wrapper .buttons {
display: inline;
}