Heading
I need to align tags beside the price in featured products (the tags in the example feature the text "Aussie Made").
I need to vertically align the "Aussie Made" images beside the price (bottom align). The price can dynamically change in width and height. Can someone give me some ideas on how to make the "Aussie made" image/icon float on the right and still be on the bottom of the div aligned?
I tried to put
position:absolute;
bottom:0px on the div containing the Aussie Made icon. However it didn't work. Can someone please help me on this?
Did you try using position RELATIVE?
As in relative to the PARENT container?
This should give you an ideia:
CSS
.container{position:relative; height:200px; width: 200px; outline: 1px solid #000; }
.image { position: absolute; bottom:0px; right:0px; width: 10px; height: 10px; outline: 1px solid #000; }
HTML
<div class="container"><div class="image"></div></div>
I beg your pardon, your quite right, its ABSOLUTE not RELATIVE...
Although Absolute position actually makes the contents relative to the parent.
See the photo below.
and the code...
<style type="text/css">
.Main
{
position: absolute;
left: 400px;
top: 200px;
width: 469px;
height: 280px;
}
.Photo
{
width: 469px;
height: 280px;
z-index: 1;
}
.Caption
{
position: absolute;
left: 0px;
top: 250px;
width: 461px;
height:32px;
padding-left: 8px;
background-color: #FF0000;
color: #FFFFFF;
font-family: tahoma;
font-size: 20pt;
text-align: left;
vertical-align: middle;
z-index: 2;
}
.Price
{
position: absolute;
left: 330px;
top: 215px;
width: 122px;
height: 40px;
text-align: center;
vertical-align: middle;
z-index: 3;
color: #CC3300;
font-size: 20pt;
background-color: #FFFF00;
}
.MiniText
{
top: 4px;
color: #111111;
font-size: 8pt;
font-weight: bold;
font-family: Tahoma;
}
</style>
<div style="left: 0px; top: 0px; height: 800px;">
<div class="Main">
<img class="Photo" alt="" src="http://202.92.83.79/medias/sys_master/images/8796157247518/Package-img1.jpg" />
<div class="Price" style="z-index: 4">
<div class="MiniText">First of it's kind!</div>
£100.97p
</div>
<div class="Caption" style="z-index: 3">Sooper Dooper Wotsit Thingy</div>
</div>
</div>
Related
This absolutely positioned pseudo-element has a position:relative parent. We should expect its border styles to be applied, but they are not. Why?
:root {
--color-border: #E5E5E5;
--color-background: #FFFFFF;
}
.tooltip {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid var(--color-border);
background-color: var(--color-background);
}
.tooltip::after {
position: absolute;
top: 11px;
right: 100%;
left: -8px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: var(--color-border);
background-color: #ffffff;
}
.tooltip-hard-coded {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid #e5e5e5;
background-color: #ffffff;
}
.tooltip-hard-coded::after {
position: absolute;
top: 11px;
right: 100%;
left: -9px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: red;
background-color: pink;
}
<div style="display: flex; flex-direction: column">
<div style="padding: 32px;">
<div class="tooltip">With CSS variables</div>
</div>
<div style="padding: 32px;">
<div class="tooltip-hard-coded">With hard-coded values</div>
</div>
</div>
<div class="tooltip">Hi</div>
no border with the following CSS:
:root {
--color-border: #E5E5E5;
--color-background: #FFFFFF;
}
.tooltip {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid var(--color-border);
background-color: var(--color-background);
}
.tooltip::after {
position: absolute;
top: 11px;
right: 100%;
left: -8px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: var(--color-border);
background-color: var(--color-background);
}
when hard-coding a border color value, the pseudo-element only gets the style partially applied:
<div class="tooltip-hard-coded">With hard-coded values</div>
with hard-coded values:
<div class="tooltip-hard-coded">With hard-coded values</div>
What is the correct way to apply border styles to an absolutely positioned pseudo-element using CSS custom properties?
Tried several variations of the styles applied to pseudo-element; tried hard-coded values, tried changing display methods, etc
I have a webpage Find a walk which uses Leaflet to enable site visitors to find a walk in the British Isles from a specific location.
The page generates a search box and map.
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search by city, town or village" />
<div class="result" ></div>
</div>
<div id="walkingBritainMapDivWrap">
<div id="walkingBritainMapDiv" class="walkingBritainMapDiv"></div>
</div>
For all browsers except IOS the lists of results from the search are displayed in front of the map. However with IOS the list of results is hidden behind the map.
I have tried using z-index on the relevant divs but this has no effects. I understand that Laeflet uses z-indez to add layers to the map which m,ight complicate the issue.
The CSS for these divs is :-
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
margin-bottom: 12px;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid red;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
background-color: white;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
.walkingBritainMapDiv {
padding-top: 75%;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: rgb(0, 0, 0);
z-index: 0;
}
Any help would be appreciated to solve this problem.
When resizing an image from left (using "n","w","ne","sw" or "nw" handles),
the parent's left and top positions are not affected, leading to a faulty behavior which can be seen in the following demo: http://jsfiddle.net/8VY52/1704/.
<div id="draggableHelper">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
$('#draggableHelper').draggable();
$('#image').resizable({
handles: "n, e, s, w, ne, se, sw, nw"
});
#draggableHelper{
border: 5px solid black
}
img{
border: 5px solid red;
}
You may want to consider something like this:
http://jsfiddle.net/Twisty/hukpwa3n/
HTML
<div id="draggableHelper" style="display: inline-block">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
CSS
#draggableHelper {
border: 5px solid black;
padding: 5px;
padding-bottom: 1px;
background: red;
}
img {
width: 100%;
height: 100%;
margin: 0;
}
.ui-resizable-handle {
border: 1px solid #000;
background: #fff;
width: 10px;
height: 10px;
}
.ui-resizable-se {
right: -5px;
bottom: -5px;
}
.ui-resizable-nw,
.ui-resizable-sw {
margin-left: -1px;
}
.ui-resizable-nw,
.ui-resizable-ne {
margin-top: -1px;
}
.ui-resizable-ne,
.ui-resizable-se {
margin-right: -1px;
}
.ui-resizable-sw,
.ui-resizable-se {
margin-bottom: -1px;
}
JavaScript
$(function() {
$('#draggableHelper').draggable().resizable({
handles: "ne, se, sw, nw"
});
});
This allows the <img> to be 100% the size of it's parent and then you can resize the parent. Hope that helps.
There is a horizontal white bar, approximately 15px in height, across the top of every one of my pages when viewing my website's mobile version. Here is the relevant CSS code and HTML markup:
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div id="container">
<div id="navigation" class="navigationtext">
<h2>domain<br> the home page of First Last</h2>
<p>About</p>
<p>Blog</p>
<p>Contact</p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>
</body>
</html>
I have tried many combinations of CSS properties (primarily "margin" and "padding") and have spent a lot of time searching the Web. Nothing seems to work.
Please let me know if you need anything. I will be checking this thread regularly tonight.
Just assign h2 margin:0. and in body margin:0 and padding:0.
Because by default h2 tag have margin inspect h2 tag.
.navigationtext h2 {
margin: 0px;
}
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
padding: 0; /*Added*/
margin: 0; /*Added*/
}
.navigationtext h2 {
margin: 0px; /*Added css for h2 tag*/
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<div id="container">
<div id="navigation" class="navigationtext">
<h2>domain<br> the home page of First Last</h2>
<p>About</p>
<p>Blog</p>
<p>Contact</p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>
It's caused by default margins on the body and h2 elements.
All you need is margin-top: 0; on these two elements.
body {
margin-top: 0; /* Remove top margin from body */
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
width: 100%;
}
.navigationtext h2 {
margin: 0px;
}
#container {
width: 100%;
background-color: #FFF;
}
#navigation {
display: block;
width: 100%;
height: auto;
padding: 0px;
background-color: #009245;
}
h2 {
margin-top: 0; /* Remove top margin from h2 */
}
#content {
display: block;
width: 100%;
max-width: 100%;
padding: 0px;
}
<div id="container">
<div id="navigation" class="navigationtext">
<h2>domain<br> the home page of First Last</h2>
<p>About</p>
<p>Blog</p>
<p>Contact</p>
<div class="copyright">Copyright</div>
</div>
<div id="content">
<p>Content/text goes here.</p>
</div>
</div>
I have a twitter feed on my website and i'm trying to put it in a box that has a top, a middle section that repeats as needed to accommodate text and a bottom image as well as an image below the bottom. the problem is that originally the feed was in a box that didn't repeat or anything the feed was just on top of the box, but now i can't get the box set up right or the feed to do it's thing. here is my code:
#twitter_update_list {
overflow: hidden;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
line-height: 20px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#twitter_update_list li {
font-family:Arial, Helvetica, sans-serif;
color:#000000;
list-style: none;
}
#twitter_update_list li a {
color:#f7f6e7;
text-decoration: none;
}
#twitter_update_list li a:hover {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #f7f6e7;
}
.twitter_top {
position:absolute;
left:632px;
top: 39px;
width: 333px;
height: 27px;
background:url(twittertop.png);
}
.twitter_mid {
width: 333px;
background:url(twittermiddle.png);
background-repeat:repeat-y;
padding: 0 15px;
}
.twitter_bot {
width: 333px;
height: 27px;
background:url(twitterbottom.png);
background-repeat:no-repeat;
margin-bottom: 0px;
}
.twitter_whale {
width: 140px;
height: 67px;
left: 900px;
background-image: url(Layer-6.png) no-repeat;
position: absolute;
left: 9px;
top: 9px;
line-height: 13px;
}
<div class="twitter_top"></div>
<div class="twitter_mid">
<ul id="twitter_update_list"></ul>
</div>
<div class="twitter_bot"></div>
<div class="twitter_whale">
<div id="twitter_div"><ul id="twitter_update_list"><li></li></ul></div>
(update list i'm not putting in here because it's just the js)
</div>
<div id="twitter_box">
<div id="twitter_top">
</div>
<div id="twitter_middle">
</div>
<div id="twitter_bottom">
</div>
</div>
I would think it would make more sense to contain them all in one div, from here you can set your styles, since you want the middle part to expand leave the height dynamic.