This is how my site should look like under normal circumstances:
In certain pages, I need to fit the same element in a much narrower space. Here's how bad it looks:
I added white-space:nowrap to the anchor in an attempt to fix this, but it's still not perfect:
How do I prevent the anchor from getting chopped in half when it wraps around?
HTML
<div id="marquee" style="display: none">
<div id="vlcUpgradePrompt" style="display: none">
<span>Upgrade to Veetle TV to watch this channel in <b>HD</b>.</span>
<a
href="javascript:void(0)"
onclick="VEETLE.bootstrap.vlcUpgradePrompt(); return false;"
class="button buttonDark">
<img class="spriteCommon iconDownloadArrow" src="/images/spacer.gif">
Free upgrade
</a>
</div>
<div id="flashDowngradeUnavailable" style="display: none">
<img
src="<?=base_url()?>images/spacer.gif"
class="spriteCommon iconError" />
<span>Sorry, the low quality version of this channel is not available.</span>
</div>
<div id="flashNotInstalled" style="display: none">
<img
src="<?=base_url()?>images/spacer.gif"
class="spriteCommon iconError" />
<span>You need Flash Player to view the low quality version.</span>
<a
href="http://get.adobe.com/flashplayer/"
class="button buttonDark">
<img class="spriteCommon iconDownloadArrow" src="/images/spacer.gif">
Download Flash
</a>
</div>
</div>
CSS
#marquee {
}
#marquee div {
-moz-border-radius-bottomleft: 0.4em;
-webkit-border-bottom-left-radius: 0.4em;
-moz-border-radius-bottomright: 0.4em;
-webkit-border-bottom-right-radius: 0.4em;
border: 1px solid;
border-color: #e5e5b8 #ccc #666 #ccc;
background: #ffffcc;
background: -moz-linear-gradient(
top,
#ffffcc,
#ebebbc
);
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #ffffcc),
color-stop(1, #ebebbc)
);
padding: 1em;
line-height: 2em;
-moz-box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.1);
}
#marquee div img {
margin-top: -0.2em;
}
#marquee div img.iconError {
margin-right: 1em;
}
#marquee div span {
font-size: 1.2em;
padding: 0 1em 0 0;
}
#marquee div a {
font-size: 1.2em;
}
#marquee div a img {
margin-right: 0.4em;
}
It looks like display:inline-block; works. http://jsfiddle.net/yUxN2/
EDIT:
Since it seems there are a few oddities in older browsers, heres a guide to making it work everywhere: http://www.aaronrussell.co.uk/blog/cross-browser-support-for-inline-block/
You could remove any white space (including the line break) from in between the image and the label text. It might not wrap then; use margin-right to add distance to the label.
JSFiddle demonstration based on #Adrian's (thanks!)
Related
Not able to move the button to the right of the page and the text to the center of the page even though I have added the necessary CSS ( float right etc.,)
<div id="project-heading" style = "margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px" text-align="center">
<span display="inline;" float = "center;" style="color: white;">Visual Analysis of US Accidents Data </span>
<button position = "absolute;" background-color ="black;" color = "white;" float ="right;" display="inline-block;" padding-left = "100%;" id="reset" onclick="reset">Reset
</button>
</div>
display, float, etc.
are all CSS variables that should be included in the style="" part of the HTML, not as keyword parameters. I have demonstrated the correct way to insert them in the snippet below. You can also use right: 0 to align an element to the right side of its parent. It is often more reliable than float. I used right: 10px in this example so the button had a bit of breathing room on its right side.
<h1>Only fixed syntax:</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px; text-align: center;">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; color: white; background-color: black; float: right; display: inline-block; padding-left: 100%" id="reset" onclick="reset">
Reset
</button>
</div>
<h1>Fully fixed version</h1>
<div id="project-heading" style = "background: blue;margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padding-top: 5px">
<span style = "display: inline; float : center; color: white;">
Visual Analysis of US Accidents Data
</span>
<button style="position: absolute; background-color: black; color: white; float: right; display: inline-block; right: 10px" id="reset" onclick="reset">
Reset
</button>
</div>
You have quite a few issues with your code, so let's clean them up and break down what's happening:
First off, don't style inline unless you have some specific reason for doing so. Use classes or ids or even just generic selectors but separating your HTML and your CSS will make your life much easier(and ours when you come looking for assistance! ;) )
You have tags that are opened and never closed which is causing some problems. The float isn't doing anything for you. If you want to position your button to the right of the page using absolute you need to tell it to be on the right using the right attribute. Your headline is centered, you just can't see it because it's white on a white background.
If you are going to style inline, you need to include your style information in the style="" section, otherwise, you're risking issues or invalid code altogether.
Let me know if you need any additional help or explanations :)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: lightgrey;
}
#project-heading {
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
padding-top: 5px;
text-align: center;
}
.title {
display: inline;
float: center;
color: white;
}
.btn {
position: absolute;
right: 10px;
background-color: black;
color: white;
display: inline-block;
}
<div id="project-heading">
<span class="title">Visual Analysis of US Accidents Data </span>
<button class="btn" id="reset" onclick="reset">Reset</button>
</div>
enter image description here
html:
<div id="header" class="head">
<img src="../../image/a2m.png" alt="propic here" usemap="#image" style="width:100px; height:100px;" class="propic"/>
<map name="image">
<area shape="circle" coords="50,50,50" href="opendiary.html" />
</map>
<button class="menubar btn a1">Profile</button><button class="menubar btn a2">Open Diary</button><button class="menubar btn a3">Message</button><button class="menubar btn a4">Options</button>
</div>
css:
#header {
min-width:230px;
max-width:1366px;
min-height: 100px;
position:relative;
border: 2px dashed #dddddd;
background-color: #555f00
}
#header button {
display: inline-block;
position: relative;
float: left;
}
I want all 4buttons to be aligning at bottom. But I cant understand how? I have seen other question but as I am using 4 buttons because of position:absolute and float:right all overlap on each other. How can I solve this?
The following should give you the result you're looking for. (you'll still need to add any responsive behavior the banner might need (as it will break at smaller screen sizes)
/* for IE9- render these elements correctly */
header,
nav {
display: block;
}
/* header container */
.head {
background-color: #555f00;
border: 2px dashed #ddd;
max-width: 1366px;
min-height: 100px;
min-width: 230px;
position: relative;
overflow: hidden;
}
.head__img-area {
float: right;
}
.propic {
width: 100px;
height: 100px;
}
.head__nav-area {
position: absolute;
bottom: 0;
left: 0;
padding: 8px;
}
.head__nav-area .btn {
display: inline-block;
/* dummy styling */
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, .5);
background: rgba(255, 255, 255, .3);
padding: 8px;
color: #fff;
text-decoration: none;
}
.head__nav-area .btn:hover,
.head__nav-area .btn:focus {
background: rgba(160, 160, 160, .5);
border-color: rgba(40, 40, 40, .9);
}
<header id="header" class="head">
<div class="head__img-area">
<img src="../../image/a2m.png" alt="propic here" usemap="#image" class="propic" />
<map name="image">
<area shape="circle"
coords="50,50,50"
href="opendiary.html"
alt="insert descriptive text here" />
</map>
</div>
<nav class="head__nav-area">
<a href="profile.html" class="menubar btn a1">
Profile
</a>
<a href="opendiary.html" class="menubar btn a2">
Open Diary
</a>
<a href="message.html" class="menubar btn a3">
Message
</a>
<a href="#" class="menubar btn a4">
Options
</a>
</nav>
</header>
So what the above is doing is floating the new img-area wrapper to the right, as per your screen shot. The entire nav container is then position absoluted and set to the bottom / left of the header.
I cleaned up the link/button combos you had there... it's invalid to have buttons inside of anchor elements, so I put the classes of the buttons on to the <a>s and made up some dummy styling to display them.
While I used position absolute and floating to achieve this layout, I primarily used them because they were utilized in the code you provided. Since you're using an image map, I'm guessing this may be an older project? And based on that assumption, I figured flex box wouldn't be a solution for you due needing at least IE10 for browser support.
However, if you can use flexbox, I'd highly recommend you check out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
As it could have been used to achieve this layout (and would be easier to work with for responsive websites)
good luck!
Wrap the buttons and their containers in a div a position that div absolute and align it bottom.
#header {
min-width:230px;
max-width:1366px;
min-height: 100px;
position:relative;
border: 2px dashed #dddddd;
background-color: #555f00
}
#header button {
display: inline-block;
position: relative;
float: left;
}
/**Added this**/
.btn-cont {
position: absolute;
bottom: 0;
/** right: 0; this is to align buttons right**/
}
/**Uncomment this to float image right
img {
float: right;
}
<div id="header" class="head">
<img src="../../image/a2m.png" alt="propic here" usemap="#image" style="width:100px; height:100px;" class="propic"/>
<map name="image">
<area shape="circle" coords="50,50,50" href="opendiary.html" />
</map>
<div class="btn-cont"><!--Added this div-->
<button class="menubar btn a1">Profile</button><button class="menubar btn a2">Open Diary</button><button class="menubar btn a3">Message</button><button class="menubar btn a4">Options</button>
</div>
</div>
Surround all your buttons with a div container and give this div container some CSS. This could look at the end like this:
#header {
min-width: 230px;
max-width: 1366px;
min-height: 100px;
position: relative;
border: 2px dashed #dddddd;
background-color: #555f00
}
#header .buttons {
position: absolute;
left: 0;
bottom: 0;
}
/* To replace the <a> link */
#header .buttons form {
display: inline;
}
/* To style the <a> link more like a <button> */
#header .buttons a {
font: bold 13px sans-serif;
text-decoration: none;
background-color: #E0E0E0;
color: black;
padding: 2px 6px 2px 6px;
border: 1px solid #CCC;
border-right-color: #333;
border-bottom-color: #333;
font-weight: normal;
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
}
<div id="header" class="head">
<img src="../../image/a2m.png" alt="propic here" usemap="#image" style="width:100px; height:100px;" class="propic"/>
<map name="image">
<area shape="circle" coords="50,50,50" href="opendiary.html"/>
</map>
<div class="buttons">
<a href="profile.html" class="menubar-link">
Profile
</a>
<form action="opendiary.html" method="get">
<button type="submit" class="menubar btn a2">Open Diary</button>
</form>
<form action="message.html" method="get">
<button type="submit" class="menubar btn a3">Message</button>
</form>
<button class="menubar btn a4">Options</button>
</div>
</div>
Float is often considered as bad practise. So try whenever to avoid this option.
Also you should not use <button> tags inside <a> tags. I added two possible ways to avoid this.
This answer helped me: Answer to: How to align content of a div to the bottom?
I'm attempting to place a 'notification' style badge over an images. I am using Twitters Bootstrap as a base framework and creating a custom CSS class called notify-badge. But I cannot get anything to line up properly.
Through the magic of Photoshop, here is what I am trying to accomplish.
Here is my CSS code.
.notify-badge{
position: absolute;
background: rgba(0,0,255,1);
height:2rem;
top:1rem;
right:1.5rem;
width:2rem;
text-align: center;
line-height: 2rem;;
font-size: 1rem;
border-radius: 50%;
color:white;
border:1px solid blue;
}
I would like to be able to place any small about of text in the badge and it expand the red circle to fit.
Here is my HTML code.
<div class="col-sm-4">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="myimage.png" alt="" width="64" height="64">
</a>
<p>Some text</p>
</div>
Bunch of different ways you can accomplish this. This should get you started:
.item {
position:relative;
padding-top:20px;
display:inline-block;
}
.notify-badge{
position: absolute;
right:-20px;
top:10px;
background:red;
text-align: center;
border-radius: 30px 30px 30px 30px;
color:white;
padding:5px 10px;
font-size:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
<div class="item">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="https://picsum.photos/200" alt="" />
</a>
</div>
</div>
Addendum (from the Asker #user-44651)
(moved from the question)
Here is the result of applying this answer.
Adding margin-top:-20px; to .item fixed the alignment issue.
The idea here is to overlay an absolute container on top of a relative one. Here's a similar example:
<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
The CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
This is going to put our text right up on top of the image nicely, but it doesn't accomplish the box we want to achieve behind the text. For that, we can't use the h2, because that is a block level element and we need an inline element without an specific width. So, wrap the h2 inside of a span.
<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>
Then use that span to style and text:
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
For ideas on how to ensure proper spacing or to use jQuery to cleanup the code a bit by allowing you to remove some of the tags from the code and jQuery them back in, check the source.
Here's a fiddle I made with the sample code:
https://jsfiddle.net/un2p8gow/
I changed the notify-badge span into a div. I saw no reason it had to be a span.
I changed the position to relative. Edit - you could actually keep the attribute position: absolute; provided you know what you're doing with it. Guy in the comments was right.
You had the attribute right: 1.5rem; and I simply changed it to left because it was being inset in the opposite direction of your example.
You can tweak it further but in a vacuum this is what you want.
I'm currently creating a website which is created by three main divs on one page. In-between each div, I have a faint hr to help visually 'split them up'.
Between my first and second divs, the hr displays fine.
Between the second and third is my problem - the hr displays underneath the second div. I have a feeling it is to do with the relative positioning of the container of my second div, but that is needed for me to position images within in.
I have tried display:block and wrapping the second div inside another container amongst other things, but nothing has yet worked.
I could try using div with a background/border rather than hr, but i'm not sure if this is the right way to approach it (i'm still learning my way around things).
Below is my code for the 'second div' and the hr I am trying to position.
<!-- PORTFOLIO -->
<div id="portfoliocont">
<div class="smallthumb" id="thumb1">
<a href="media/pamabest/pamabesttitle-large.jpg" class="overlay" data-lightbox="image-1" data-title="Pamabest" class="show">
<a href="media/pamabest/app-login.jpg" class="overlay" data-lightbox="image-1" data-title="Log in with your own account">
<a href="media/pamabest/tutorial.jpg" class="overlay" data-lightbox="image-1" data-title="Message your friends">
<a href="media/pamabest/app-profile.jpg" class="overlay" data-lightbox="image-1" data-title="Create your own profile">
<a href="media/pamabest/app-messages.jpg" class="overlay" data-lightbox="image-1" data-title="Message your friends">
<a href="media/pamabest/karaoke--menu.jpg" class="overlay" data-lightbox="image-1" data-title="Have a laugh">
<a href="media/pamabest/lists-viewlist.jpg" class="overlay" data-lightbox="image-1" data-title="Be prepared">
<a href="media/pamabest/mycar.jpg" class="overlay" data-lightbox="image-1" data-title="See the stats">
<a href="media/pamabest/weather.jpg" class="overlay" data-lightbox="image-1" data-title="Pack wisely">
<a href="media/pamabest/ticket5pariswhitestarstextured.jpg" class="overlay" data-lightbox="image-1" data-title="Front of 'Pamabest: Paris' ticket">
<a href="media/pamabest/ticketbackwhitestarstextured.jpg" class="overlay" data-lightbox="image-1" data-title="Back of 'Pamabest: Paris' ticket">
<a href="media/pamabest/travelticket2withbannertextured.jpg" class="overlay" data-lightbox="image-1" data-title="Front of 'Pamabest: Travel Pass' ticket">
<a href="media/pamabest/travelticket2backtextured.jpg" class="overlay" data-lightbox="image-1" data-title="Front of 'Pamabest: Travel Pass' ticket">
<img src="images/smallthumb/pamabest-small.jpg" alt="Imaginary music festival, Pamabest"/ title="Pamabest companion app">
<h1>"Pamabest" is a European, multi-cultural music festival aimed at 18-30 year olds.<br>A companion app would be used to help festival goers navigate the park and enhance their overall experiance.</h1></a>
<p>Pamabest music festival</p>
</div>
<div class="smallthumb" id="thumb2">
<a href="media/pisforpsychohd.mov" class="overlay">
<img src="images/smallthumb/psycho-small.jpg" alt="2 Minute video recreating a scene from the move, P is for Psycho" title="P is for Psycho video"/>
<h1>Filmed within a group, the video is a recreation of the 'bathroom scene' from the movie. <br>All editing was made in Premier Pro.</h1></a>
<p>P is for Pscyho</p>
</div>
<div class="smallthumb" id="thumb3">
<a href="media/silverlake/build/index.html" class="overlay" target="_blank">
<img src="images/smallthumb/silverlake-small.jpg" alt="Silverlake Website" title="Silverlake theme park website"/>
<h1>Silverlake theme park is based in the heart of Yorkshire, boasting a zoo and other child-friendly features. <br> The website was made with HTML5 and CSS3, graphical assests were made in Photoshop and Illustrator.</h1></a>
<p>Silverlake themepark</p>
</div>
<div class="blankthumb" id="thumb4"></div>
<div class="blankthumb" id="thumb5"></div>
<div class="blankthumb" id="thumb6"></div>
</div>
<hr>
And my CSS
hr {
margin: 40px 0px;
border: none;
height: 1px;
color: #ececec; /* old IE */
background-color: #ececec; /* Modern Browsers */
}
/* PORTFOLIO
--------------------------*/
#portfoliocont {
position: relative;
margin-bottom: 40px;
display: block;
}
.smallthumb, .blankthumb {
display: inline-block;
position: absolute;
}
.smallthumb a {
text-decoration: none;
}
.smallthumb img {
-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.23);
-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.23);
box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.23);
}
.blankthumb {
background: #f2f2f2;
width: 296px;
height: 174px;
}
#thumb1 {
left: 0px;
top: 0px;
}
#thumb2 {
left: 335px;
top: 0px;
}
#thumb3 {
right: 0px;
top: 0px;
}
#thumb4 {
left: 335px;
top: 250px;
}
#thumb5 {
right: 0px;
top: 250px;
}
#thumb6 {
left: 0px;
top: 250px;
}
#portfoliocont p {
padding-top: 10px;
color: #808080;
font-weight: 400;
}
.overlay h1 {
position: absolute;
/*display: inline-block;*/
height: 164px;
width: 276px;
bottom: 0;
top: 0;
color: white;
background-color: #806d9e;
opacity: 0;
font: 1em "Helvetica Neue";
text-align: left;
padding: 10px 10px 0px 10px;
line-height: 1.4em;
transition: transform 0.3s, opacity 0.3s;
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
}
.overlay h1 br{
display: block;
line-height: 2em;
}
.overlay:hover h1{
opacity: 1;
}
#thumb1 a.show {
display: block;
}
#thumb1 a {
display: hidden;
}
Thanks
Your problem here is all the thumbs with position: absolute;
When the browser renders an element with position: absolute; it doesn't take any space.
In your case, the #portfoliocont "has nothing inside".. What I mean is that anything inside that div occupies any space. Therefore, it's height is zero.
Following your zero-height div, the browser continues to render the <hr /> tag.
I strongly recommend not to position your thumbs absolutely. You have many other options, such as:
Display inline-block
Float left
Flexbox (watch out for browser support on this one)
Here is a simple example of using inline-block for the thumbs: https://jsfiddle.net/Lfhctqkg/
Defining div height, solved this little problem for me. An easier way, at least for a student on a simple task.
I'm brushing up my HTML/CSS skills for a new job. The last time I wrote some HTML was in 1999... So, no need to say that I fell behind.
So, as a fan of "Space Trader" game on Palm OS, I have decided to rewrite in HTML all the screens of the game. And I'm struggling with a CSS issue.
Here is the screen I'm trying to rewrite :
And here is my markup :
<div class="screenTitle">
<h1 class="leftTitle">Bank</h1>
<span class="titleButtons">
<input type="button" id="btB" value="B" />
<input type="button" id="btS" value="S" />
<input type="button" id="btY" value="Y" />
<input type="button" id="btW" value="W" />
</span>
</div>
And the CSS :
.screenTitle {
height: 0.7em;
border-bottom-style: solid;
border-color: rgb(49,0,156);
font-size: 40px;
}
.leftTitle {
margin-top: 0;
font-size: 0.5em;
text-align: center;
color: white;
padding-left: 0.1em;
padding-right: 0.1em;
background-color: rgb(49,0,156);
float: left;
border-top-left-radius: 0.3em;
border-top-right-radius: 0.3em;
line-height: 1.5em;
font-weight: bold;
}
.titleButtons {
float: right;
}
And here is the result
So, you can see that I'm struggling with the positionning of the 4 shortcuts buttons.
Do you have any clue for me to sort this out ? And do you have any critic to formulate ?
Thanks a lot
You need to change the vertical alignment of your buttons. Have this in your CSS:
.titleButtons input{
vertical-align:top;
}
Demo
.titleButtons input {
float: right;
vertical-align:top;
margin:7px 0px 0px 0px;
}
If you add some top margin and remove som left/right margins, the buttons will also position themselves nicer on the bar.