This is my code
<div className='product'>
<img className='productImg' src={this.props.image} alt='of person'></img>
<div style={{float:'left'}}>{this.props.name}</div>
<br />
<div style={{float: 'left'}}>${this.props.price}</div>
<br />
<div style={{color: this.pickRatingColor(this.props.rating), float:'right'}}>{this.props.rating}/5</div>
</div>
This is the result
(I just used a random screenshot i had for the picture so don't judge)
The thing that I simply can't wrap my head around is why the price doesn't go below the name even though I added a break. I would appreciate it if someone could explain why this happens and how I can fix it.
Thank you!
I could not understand why you are using float ;
it will be fixed if you delete your styles that added in name and price div;
Related
My code is simple and basic however it doesn't work and I can't figure out why.
The link works great with text though. The cursor doesn't change, it stays as an arrow.
<div class="container">
<img id= "pil" src="myimage.jpg" alt="pil">
<img id= "yoyo" src="myimage2.jpg" alt="yoyo">
</div>
Look carefully at the path
It seems that you did't use the correct path. Take a look at this question
I'm building a photography site using a builder called "photodeck" for a business.
The issue comes that the builder doesn't allow for me to create a background behind the menu and logo, so I have to do this through editing the theme CSS and HTML - I'm a coding rookie and after a lot of experimentation I cannot get it to work.
Codepen link: https://codepen.io/gknowl/pen/PeJbOE (For both CSS and HTML)
HTML (So I could post the codepen link) :
<pd-page>
<pd-block id="navib" class="dont_overlap">
<pd-component id="logo" type="logo_text" />
<div id="navlinks">
<pd-component id="menu" type="menu" />
<pd-component id="local" type="locale_switcher" />
</div>
</pd-block>
<pd-component id="hdtxt" type="text" class="dont_overlap" />
<div id="title_and_main_content_wrapper">
<div id="main_block">
<pd-component id="mainc" type="main_content" />
<pd-component id="commt" type="comments" />
<pd-component id="searc" type="search" drawer="duration:0.3,rotate_alt_content:90,init_state:closed,alt_content_pos:center,alt_content:,effect:slide_from_right" />
</div>
</div>
<pd-block id="footer" class="reserved_height dont_overlap">
<pd-component id="fttxt" type="text" />
<pd-component id="links" type="external_links" />
</pd-block>
<pd-component id="pwrdb" type="poweredby" />
</pd-page>
Picture: https://imgur.com/Fg62kt9 (The part above the green bar I'd like to have a light grey background)
Bonus: If anyone can help me out with making the logo bigger as well that would be a great help, the builder limits the size to the size pictured
I apologise if this is too basic, or if this is far too obvious - however I'm completely stuck.
Well your builder HTML markup is rendering in codepen so I am just gonna try to give you suggestions where you can make changes to get the desired result.
For making the logo bigger. Add increased width and height in this class. For responsiveness also change the width for same class in different media queries as well.
#ws_page #component_logo {
width: //As per need;
height: //As per need
}
For nav background colour try in this:
#ws_page #block_navib {
background: #ccc;
}
In this fiddle https://jsfiddle.net/spdvoc06/ last line is stretched to place the image. Can anyone please help to fix it? I need to place second image after text without adding space between lines.
<img src="https://www.getdesignschool.com/wp-content/uploads/2015/07/up.jpg" alt="" width="56" height="44" />
<p style="display:inline;">I want to learn how to design but I spend so much time just reading I never remember it all. I need something that teaches me in practical way, and gives me feed-back on what I've created...
</p>
<img src="https://www.getdesignschool.com/wp-content/uploads/2015/07/bottom.jpg" alt="" width="56" height="44" />
Add position:absolute to the last image
https://jsfiddle.net/y93su8s1/2/
It looks like all that needs to be added to accomplish this is on the last picture a "vertical-align:top"
I added it and copied the code for you. Hope this helps!
<img style="vertical-align:top" src="https://www.getdesignschool.com/wp-content/uploads/2015/07/bottom.jpg" alt="" width="56" height="44" />
https://jsfiddle.net/spdvoc06/
Adding display:inline-block and width to paragraph will fix it.
Demo: https://jsfiddle.net/spdvoc06/1/
I need to figure out a way to have the Yellow Box <div id="bottom"> and the Text <div id="basket">SHOP NOW</div>link to google.com for example.
I have tried adding <div id="bottom">
</div> but nothing is working. It appears to skew the entire section when I add this syntax.
I have searched all over the place looking for an answer, I have read through almost all related StackOverflow articles and still can't figure out the correct way to do this.
Here is a link https://jsfiddle.net/sixpac/8p4m7oc2/8/ to my code.
Can someone point me in the right direction with this? Is this possible to complete without JavaScript? Thank you!
You are looking for something like this https://jsfiddle.net/8p4m7oc2/13/
<div id="bottom">
SHOP NOW
<div id="price">$70.00</div>
</div>
You can wrap the div element in an anchor element to have it link to your chosen url / file.
i.e.
<a href="www.google.com" class="fill-div">
<div id="bottom">
</div>
</a>
This should be the code:
https://jsfiddle.net/RreTH/
Edit:
This will make the whole div element link to google for linking just the text the should be enough to link only the text.
Simply change the basket div to <a>:
<a id="basket" href="http://www.google.com">SHOP NOW</a>
I'm trying to achieve a layourt like: Search (gif) : TextBox : AjaxLoader (gif) on one line.
I have the following style:
<div>
<img src='<%= VirtualPathUtility.ToAbsolute("~/Content/Images/search.gif")%>' alt="Search"/> 
<%= Html.TextBox("SearchTextBox", string.Empty, new { style = "float:left;" })%>
<div id="LoadingGif" style="float:left;"></div>
<div style="clear:both;"></div>
</div>
The search image is on one line and the textbox and loading gif appear on the next line.
Can anyone help please?
Thanks in advance
The last two elements are floated left, but the search gif isn't.
I removed the outer div and floated all elemets left - this works. Thanks for all your help + 1 to all.
An <img /> and <input type="text" /> will be display:inline by default so shouldn't need float:left.
And you might be better off replacing your <div id="LoadingGif" style="float:left;"></div> with either a tag or an tag: then you'll have 3 inline elements meaning you can remove the surplus <div style="clear:both;"></div> from your HTML :-)
Replacing divs by spans as such:
<div>
<img src='<%= VirtualPathUtility.ToAbsolute("~/Content/Images/search.gif")%>' alt="Search"/> 
<%= Html.TextBox("SearchTextBox", string.Empty, new { style = "float:left;" })%>
<span id="LoadingGif" style="float:left;"></span>
<span style="clear:both;"></span>
</div>
would work...