I need a little help here. I created a larger button on my order page and the bottom gets cut off to close. I need to add a little space on the bottom. I added a 1px border so you can see how it's laid out. You can view the problem here: https://www.evernote.com/shard/s329/sh/a408b2ff-472c-481a-8fb1-b9e48c1205e1/5ddd92e9d940c78a57487e07d6eedcd4
<p><span id="old-price">$199 </span>
<span id="new-price">$147</span>
<strong><font color="#FF0000">
35% off! "Halloween Special" </font></strong><em>Expires Nov 1st.</em>
<p class="cart-btns">
</p>
.products li p.cart-btns a.add-to-cart {
width: 120px;
height: 50px;
background: url(images/add-to-cart.gif) no-repeat;
}
a is an inline object and will not accept a height. Use margin: 5px or put padding:5px in the p.cart-btns {}
You can also just float:left the a.add-to-cart {} to make it ignore the boundaries in a way (takes out of the normal flow of the document).
Related
I have been trying to create a new footer for my website that looks like this:
footer_nice
Unfortunately, I have only been able to recreate that in gimp, and not in html & css.
So far, I have been only partially successful. I have been able to align all the text and image so they are all collinear and inline, like this:
footer_bad
However, they are not separated into a left and a right. Whenever I try to float left or text-align right, or other combinations using divs and spans, it ends up breaking the inline property and the images and text are no longer collinear.
I have been able to seperate the text into left and right using seperate divs and spans, but only when they are not collinear, which is a bit of a bummer.
Here is my HTMl & CSS:
/* footer */
.middle > * {
vertical-align: middle;
}
footer {
color: #666;
font-size: 1.4em;
background: #191919;
border-top: 1px solid #444;
padding: 20px;
white-space: nowrap;
}
footer a {
color: #888;
display:inline-block;
}
footer a:hover {color: #BBB;}
footer img {
padding: 0px 0px 0px 4px;
}
<footer>
© <script>document.write(new Date().getFullYear());</script> WEBSITE
BUILT WITH CSS & HTML. OPTIMIZED.<span class="middle"><img src="https://placebear.com/32/25"/></span>
</footer>
Is there something I am missing? Is it some simple css that I am just forgetting? Any input would be fantastic. I hope this does not come across as a stupid question. I looked around a bit on here and w3schools and could not come to a conclusion. Thanks everybody!
Add to your HTML:
<div class="float-right> class containing your text & img that goes on the right
To your CSS:
float:right to your footer img
and
.float-right {float:right;}
Note that it may have responsive issues when viewed on mobile, but it's a quick-fix for desktop sized.
Do not forget to clear your floating elements after.
I troubleshooted some more. this is another potential solution, but the right side overflows and doesn't stay bounded to the right side of the footer.
.middle > * {
vertical-align: middle;
}
body {
padding: 20px;
background: #eee;
}
div {
display: inline-block;
margin: 0;
width:100%;
text-align: right;
}
footer {
margin: 0;
padding: 10px;
background: white;
white-space: nowrap;
}
footer a{
display: inline-block;
}
<footer>
© <script>document.write(new Date().getFullYear());</script> WEBSITE
<div class="float-right">BUILT WITH CSS & HTML. OPTIMIZED <span class="middle"><img src="https://placebear.com/32/25"/></span>
</div>
<div class="clearer"></div>
</footer>
I was not able to resolve the overflow issue with this particular solution, but as I was working on it I thought of a fix for the collinear issue with the solution offered by BrainHappy. If I add a dummy image to the left side of the footer which is the same height as the image on the right side of the footer, this would resolve the collinear alignment problem of the text and the image. This dummy image would be the same color as the background of course. depending on placement, you could adjust the padding to compensate for the presence of this dummy photo. example:
derp_fix
This solution works, but it is far from elegant. I feel dummy images are bad practice, so I may forgo images in the footer altogether. If anyone else has any other suggestions I am all ears. Thanks!
I have an annoying issue with the html layout of a form. I cannot really change the general setup, since it is part of a huge framework. But I have to "move" a button to a more suitable location. I am close, but not happy with the solution so far. Maybe you can give me some idea in this. Here is a dramatically simplified version to demonstrate my approach:
I have two container divs, top and bottom.
The top container shows a button on the left side. That button is fixed, but can have a different width due to the translation of its label.
The bottom container holds lots of stuff. Amongst that a second button at its top which works fine, but looks wrong. I want to optically move it into the top container, since there is a logical connection to the button in there. Sure, really placing it in there would be the correct solution, but I currently cannot do that. Instead I use a fixed position which works fine, except for the horizontal placement. I have to decide how far pushed from the left to place the button, so that it certainly does not overlap the first button in the container. I obviously have to consider all translations, the result works, but depending on the first buttons label I have an annoying horizontal gap between the two buttons.
I tried to use a pseudo element (::before) on the second button to help with the layout. Since when rendering the view I obviously have the translated label of the first button I can copy that into some property of the second button and use that property in my css to fill a before pseudo element of the second button which has exactly the same length as the first button. That is what is shown in the code example posted below.
What I completely fail to do is to place that pseudo element such that is it left in the top container (so exactly below the first button). The idea is to indirectly place the second button that way. Looks like this is not possible, obviously. But since I am a bloody beginner in markup and styling I thought it might be worth asking here...
Below is some drastically stripped down code to demonstrate my approach.
I create a jsfiddle for you to play around with. Here is the code:
HTML:
<div id="top-container">
<button>multilingual button text</button>
</div>
<div id="bottom-container">
<h2>
Some title opening the bottom container
<span class="into-top-container">
<button id="place-me" reference-text="multilingual button text">button to be placed</button>
</span>
</h2>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</div>
CSS:
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 5px;
}
button {
margin: 0;
padding: 5px;
white-space: nowrap;
}
div#top-container {
width: 100%;
border: 1px solid green;
}
div#bottom-container {
width: 100%;
border: 1px solid blue;
}
#place-me {
position: fixed;
top: 0;
left: 400px;
margin: 5px;
background: yellow;
}
#place-me::before {
z-index: 0;
/*visibility: hidden;*/
position: absolute;
content: attr(reference-text);
margin: 0 5px;
padding: 0;
background: gold;
right: 100%;
}
Notes:
that in the above code the second button is placed with left: 400px;. That is more or less what I want to change. But obviously left: 0 is not correct...
the visibility css rule for the pseudo element is currently commented out for demonstration purpose
keep in mind that the second button is *not* contained inside the top container, but actually logically below the title of the bottom container. The goal is to move it optically up into the top container which already is where close to what I want. Except for the horizontal alignment...
Upon request here is a screenshot:
It is taken from the fiddle I posted above. I added the red ellipse which shows what element pair I want to move and the left pointing arrow indicating where I want to move that too. I want to move it exactly that far, that the two tests "multilingual button text" are exactly placed on top of each other, but without specifying an explicit left placement obviously. That is why the pseudo element exists: as a dummy placeholder. I would then hide that pseudo element and have the second button placed exactly right of the first button, regardless of how long the translated text in there is.
So the final result should like like that:
OK, I invested some more time, since this issue popped up again after a regression in our code and I found, as often after allowing some time to pass, a logical and relatively clean solution:
I use the same stripped down code to for demonstration purposes.
The jsfiddle is based on the one provided in the question itself.
HTML: no real change, except for the reference-text having moved from button to container, for the why see below:
CSS:
* {
font-size: 12px;
font-weight: normal;
font-family: Arial;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
span,
div {
margin: 0;
padding: 5px;
}
button {
margin: 0;
padding: 5px;
white-space: nowrap;
}
div#top-container {
width: 100%;
border: 1px solid green;
}
div#bottom-container {
width: 100%;
border: 1px solid blue;
}
span.into-top-container {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
border: 1px solid transparent;
}
span.into-top-container::before {
visibility: hidden;
content: attr(reference-text);
position: relative;
margin-right: 5px;
padding: 5px;
border: 2px solid;
background: gold;
}
#place-me {
background: yellow;
pointer-events: all;
}
The basic change in strategy: it is the container holding the button to be placed that has to be positioned in a fixed manner, not that button itself (so the <span class="into-top-container">)! That allows to use the pseudo before element, now also anchored to that container, not the button, to take the space as required without actually getting part of the button itself.
Since that container is now place over the original multilingual button that one is not clickable any more. That issue is fixed by a css pointer-events set to none for the container and set to all for the placed button again. That makes the container itself simply ignore all events (clicks) and have them passed to the original button beneath.
I had to make sure that the font used inside the pseudo element is style exactly like the original multilingual button. That actually makes sense, since the font styling defines the actual width used by that button, so the actual width used by the pseudo element should be defined in exactly the same manner. In the example above I forced that by simply setting all elements font style rules to some fixed values (the initial * {...} in the CSS code). That can obviously also be done right inside the css rules for the pseudo element itself. I chose the more simple and brute variant here to keep the code clean.
I'm trying to position a label above inline sections containing a set of spans, but I'm finding that Chrome appears to be clipping the labels weirdly. Take a look at these two screenshots:
In Firefox:
In Chrome:
If you look at the screenshot from Chrome, you can see the labels are being clipped based on the start point of the next label. The desired result would be the same as the Firefox screenshot, where the labels go all the way up to the end of the line.
Here is the code used for these two examples:
.section {
position: relative;
border-right: solid 1px #000;
}
.section-title {
display: inline-block;
position: absolute;
top: -10px;
left: 5px;
right: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: sans-serif;
font-size: 0.8em;
}
.pieces {
font-family: monospace;
}
.pieces span {
display: inline-block;
padding: 10px 5px 0 5px;
}
<span class="section">
<span class="section-title">Really long title is really long</span>
<span class="pieces">
<span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span>
</span>
</span>
<span class="section">
<span class="section-title">Really long title is really long</span>
<span class="pieces">
<span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span>
</span>
</span>
<span class="section">
<span class="section-title">Really long title is really long</span>
<span class="pieces">
<span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span>
</span>
</span>
<span class="section">
<span class="section-title">Really long title is really long</span>
<span class="pieces">
<span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span><span>00</span>
</span>
</span>
Is this a known Chrome/WebKit bug? Is it possible to fix without drastically modifying the HTML?
It's not a bug in Chrome... it's a problem with the code, which Chrome interpreted in a way that it deemed logical.
Firstly, note that your .section-title is absolutely positioned and set with both left and right. This means:
It automatically becomes display:block.
It tries to be 5px from left, and 5px from right boundary of the parent.
Then, note that your parent .section is an inline element, since all span tags are inline by default. Therefore, it takes the width that it requires to accommodate its children. Your long line of 00 overflows to the next row, and hence the "right boundary" also overflows to the next row.
Being an obedient element, .section-title tries its best to stay 5px away from that right border, which is now very much nearer. Hence, the text-overflow: ellipsis correctly kicks in.
To fix your code:
Having display: inline-block for an absolutely positioned element is useless. It confuses. Take it out.
Don't set it to right:5px. Take it out. (this is the only fix that matters, actually).
Please do feedback to the author who wrote this HTML that the HTML vocabulary is more than just <span>. It's ridiculous to use only <span> for everything when more logical tags like <section>, <h1>-<h6> will fit the content better.
I need an expand icon to go alongside a piece of dynamic text within a tab to show more info. The expand icon has a background image - so needs to be displayed as block - when clicked a class is applied which alters the background image to a minus and the text beneath the link is revealed.
Is there a way to display the icon 5px to the left of the dynamic text and for it still to be a block (so you can see the background images)?
My HTML is below - note that the tab also contains a tick box which has a seperate function.
<div class="expandLinkWO">Cardio & Arms<span class="plusCircle btn"><span></span> </span> <span class="tickBox"></span>
You could use inline-block, which does what you want. Or you could make your button floating. Both should work.
Inline-version
.plusCircle {
display:inline-block;
vertical-align: top;
margin-right: 5px;
}
Float-version:
.plusCircle {
display:block;
float:left;
margin-right: 5px;
}
I believe the inline-block way is nicer, but IE and inline-block ain't the best of friends..
You probably need inline-block :
.plusCircle {
background: url(your/img/url.jpg);
height: 20px;
width: 20px;
display: inline-block;
margin-left: 5px;
}
I'm writing a page that looks code wise like
<div class="green">
<span class="orange">s1</span>
<span class="orange">s2</span>
</div>
but that should be formated via CSS like:
The surrounding black frame shows the full page in the browser. (Think of <body></body>)
The red frame is a fixed width and fixed hight basically empty space that should be added by the CSS .green:before (I'm using it's ability to format it's borders for a visual effect)
The green frame shows the real content that should be as wide as necessary to contain both <span> in one line
The blue frame should be created by the CSS .green:after, has a fixed height and should take up all the space till the right border of the page - i.e. it must have a variable width.
Required browsers are the modern ones (Firefox, Chrome, Safari, Opera) in recent versions. No need to take care of IE. Mobile browsers would be great, though.
How can I achieve that? (All my attempts failed sooner or later...)
A jsFiddle with this example code is at http://jsfiddle.net/X2MDG/
I'm afraid that there is no way to satisfy all your constraints. The main things that don't seem to have a CSS solution are:
Controlling the width of just the green bit can't be done without affecting the width of the red :before and blue :after content. As you mention in the comments to the question, using a different DOM structure is not an option.
The blue (:after) content should take up all space not needed by the green (main) content.
The fixed height of red/blue may require some clearing on the elements below the entire div.
So, as far as I could tell, the question as you asked it doesn't have a 100% satisfying answer. Either way, here's the code I came up with researching this problem, perhaps it can help you or others stumbling on this question. See either this jsfiddle or the code below:
<div id="page">
<div class="green">
<span>Orange 1.</span>
<span>Orange 2. Which can be really wide.</span>
</div>
<p style="clear: both;">Black is the page. Clearing is
needed because the red and blue boxes are not in the
flow but do have quite some height.</p>
</div>
CSS:
div#page {
border: 2px solid black;
width: 80%;
padding: 2px;
}
div.green:before {
content: 'red / before';
border: 2px solid red;
float: left;
display: inline-block;
width: 140px;
height: 200px;
}
div.green {
border: 2px solid green;
}
div.green:after {
content: 'blue / after';
border: 2px solid blue;
display: inline-block;
float: right;
height: 60px;
}
div.green span {
border: 2px solid orange;
}