I have some unusual behaviour on my portfolio website in firefox. I am using twitter bootstrap.The text on buttons is going beyond the button width, also nothing happens on clicking the buttons. It works fine on chrome and safari.
Link: www.nakibmomin.com
html
<div class="parallax-overlay"></div>
<div class="jumbotron" id="home">
<div class="container">
<img class="img-circle" src="img/profile.jpg" style="width: 100px;height:100px;">
<h1>Nakib Momin</h1>
<p>Student Blogger And Software Developer</p>
<button type="button" class="btn btn-primary">Contact Me</button>
</div>
</div>
css
.parallax-overlay {
position: absolute;
left: 0;
top: 120;
width: 100%;
height: 100%;
background-image: url(../img/pattern.png);
background-repeat: repeat;
background-color: rgba(44,62,80,0.4);
z-index: 2;
min-height: 460px;
}
.jumbotron {
background-image:url('../img/main.jpg');
height: 100%;
font-family: 'Hammersmith One', sans-serif;
text-transform: uppercase;
letter-spacing: 6px;
text-align: center;
min-height: 460px;
}
.jumbotron .container {
position: relative;
top:120px;
}
.jumbotron h1, .jumbotron p, .jumbotron a, .jumbotron button, .jumbotron img
{
position: relative;
z-index: 3;
}
.jumbotron img
{
margin-bottom: 5px;
padding: 2px;
}
.jumbotron button
{
margin-top: 18px;
width: 130px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
padding: 10px;
font-weight: bold;
}
.jumbotron p {
font-size: 12px;
color: #e3e3e3;
}
.jumbotron a {
font-size: 15px;
color:#fff;
text-decoration: none;
}
Don't put anchor tags inside of button tags.
Either make it an actual button and redirect users to your contact me page when they click it, or style the button using Bootstrap's button classes.
BOOTPLY
HTML:
Contact Me
You can't put <a>s inside <button>s. They don't work properly and it's very unclear what proper behavior for such a combination would even be.
Related
The spent text with the teal background is meant to be a tag, and I want the tag to appear above the todo bar...kind of like this:
Like a small rectangle on top of a big one. So the tag would be on the top left corner of the todo bar. How would I achieve this? I've tried doing margin to the tag, but that did not work out at all.
CSS for the tag (style.css)
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
React JS code for the tag part (Todo.js)
<li className={`todo-item${todo.completed ? "completed" : ""}`}>
{isSpent && <p className="tag">Spent</p>}
{isReceived && <p className="tag">Received</p>} ${text}
</li>
In case anyone needs the whole of the todo.css file: https://pastecode.io/s/s5XZ9e3DRW
If you need anymore information, or if my question was poorly phrased, please tell me. Any help is very much appreciated. Thank you!
I think if yow will separate the tag and the navbar to two different div tags and put them on main div something like:
<div id="wrapper">
<div id="top-left">top left div</div>
<div id="down">down side div</div>
</div>
and the css will be something like (using grid on the main div):
#wrapper {
display: grid;
}
#top-left {
background: green;
width: 250px;
float:left;
margin-right: 20px;
}
#down {
background: blue;
float:left;
width: 500px;
}
the result is:
I would go with something like this, where input:focus could be a class set on on .container, for example, if the input has any values.
I couldn't understand why you used li and p in your original code, because you need to override so much stuff to make it look nice.
Using "rem" over a fixed pixel value is also preferred if you want to create a responsive site, where you just override the font-size in the body to make everything scale.
.container {
position: relative;
display: flex;
}
body,
input {
padding: 1rem;
}
.container.selected > .todo-item,
input:focus ~ .todo-item {
transform: translateY(-1rem);
}
.todo-item {
position: absolute;
left: 1rem;
transform: translateY(1rem);
transition: transform 400ms;
}
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
<div class="container">
<input type="number">
<div class="todo-item"><span class="tag">Spent</span></div>
<div style="padding-top: 1rem"><-- select this input</div>
</div>
<div class="selected container" style="padding-top: 2rem">
<input type="number">
<div class="todo-item"><span class="tag">Spent</span></div>
</div>
body {
background-color: #48AEE0;
}
.container {
height: 200px;
width: 500px;
display: flex;
flex-direction: column;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.tag {
color: white;
font-size: 15px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
background: #36d1dc;
padding: 3px;
width: 80px;
text-align: center;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.other {
margin: 0;
display: inline-flex;
flex-direction: column;
}
input {
height: 30px;
width: 200px;
border: white;
margin: 0;
}
<div class="container">
<div class="tag">spent</div>
<div class="others">
<input type="text">
</div>
</div>
This is piece of bigger project but what happens is that use of negative margin on one element (.pag) takes the other element (#ar_wr_in) out from floated box (#ar_wr)?
It works fine in Firefox but does not in Chrome or IE.
HTML:
<body>
<div id="ar_wr">
<div class="pag">pagination</div>
<div id="ar_wr_in">
<section class="ar">isdjs fjs odifj</section>
</div>
</div>
</body>
CSS:
body {
color: #f00;
background: #191919;
font-family: LucidaGrande, Helvetica, Arial, sans;
}
section {
display: block;
float: left;
}
section {
margin: 0px;
}
#ar_wr {
width: 59%;
padding: 1%;
background: #ffddff;
border-radius: 5px;
margin-right: 1.5%;
}
#ar_wr {
float: left;
margin-top: 80px;
}
#ar_wr_in {
width 100%;
float: left;
margin-top: 17px;
}
.pag {
font-size: 12px;
margin-top: -77px;
/* background: #ddffff; */
position: relative;
}
.ar {
width: 100%;
margin-bottom: 40px;
position: relative;
background: #ddffff;
}
Here is JSFiddle
Is there some fix or hack for this to make it look as in Firefox?
Thank you
If you make your pagination element have absolute positioning then it can happily sit outside it's parent without affecting other non-absolute elements that come after it:
.pag {
font-size: 12px;
margin-top: -77px;
/* background: #ddffff; */
position: absolute;
}
Strange that Firefox treats it differently, but I would actually expect the result that you see in Chrome from using relative positioning like that.
How can I get that yellow box aligned like on the picture? I tried some stuff with table cells but it kinda destroyed everything. I also played a bit with the float conditions but the results were horrible too. Can you help me?
Here's my code:
HTML
<div class="job_board">
<div class="job_box">
<span class="job_title_working_field"> <!-- Just made that span for grouping but it's unnecessary. -->
<div class="job_title"><h1>Product Development <span class="light">(m/w)</span></h1></div>
<div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div>
</span>
<div class="slide_button"></div>
</div>
</div>
CSS
.light {
font-weight: normal;
}
.job_box {
width: 100%;
padding: 30px 50px;
background-color: #082730;
color: white;
text-align: center;
display: table;
}
.working_field {
font-weight: bold;
margin: 0;
font-size: 0.8em;
}
span.job_title_working_field {
table-cell;
}
.slide_button {
position: absolute;
width: 50px;
height: 100%;
background: yellow;
display: table-cell;
}
JSFiddle
Since .slide_button is within an element, you would simply relatively position the parent element:
.job_box {
position: relative;
width: 100%;
padding: 30px 50px;
background-color: #082730;
color: white;
text-align: center;
display: table;
font-family: "Helvetica", sans-serif;
}
And then absolutely position the yellow .slide_button element at the top/right - relative to the parent.
UPDATED EXAMPLE HERE
.slide_button {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100%;
background: yellow;
}
If you look at the above example, you will notice that a horizontal scrollbar is present. If you want to remove this, use box-sizing:border-box in order to include the padding within the .job_box element's dimension calculations.
UPDATED EXAMPLE HERE
.job_box {
box-sizing:border-box;
-moz-box-sizing:border-box;
}
It's also worth noting that I removed the default 8px margin on the body element.. body{margin:0}
I changed the markup order a little and updated the css
you are combining too many styles: table-cell + absolute + float don't mix well
http://jsfiddle.net/pixelass/3Qqz4/2/
HTML:
<div class="job_board">
<div class="job_box">
<div class="slide_button"></div>
<div class="job_title_working_field">
<div class="job_title">
<h1>Product Development <span class="light">(m/w)</span></h1>
</div>
<div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.light {
font-weight: normal;
}
.job_box {
width: 100%;
background-color: #082730;
color: white;
text-align: center;
display: block;
font-family:"Helvetica", sans-serif;
position: relative;
height: 120px;
vertical-align: top;
}
.job_title h1 {
margin: 0;
}
.working_field {
font-weight: bold;
margin: 0;
font-size: 0.8em;
}
.job_title_working_field {
padding: 30px 50px;
}
.slide_button {
width: 50px;
height: 100%;
background: yellow;
float: right;
}
I am trying to add text to center of the page. Even if a user try to resize the page, text in the page should be aligned to center. I am close to the solution but missing some position in the code. Here is my code. Any help would be highly appreciated.
html code
<div class="errorMessageContainer">
<div class="errorMessageIcon">
:(
</div>
<div class="errorMessageHeaderContainer">
<div class="errorMessageHeader">
I am trying to center me in a page.
</div>
<div class="errorMessageText">
<span class="errorMessageSubHeader">I want to float.</span>Even if page is restored or forced minimized. <span class="errorContact">Please </span> help me on this.
</div>
</div>
</div>
css code
body {
background-color: #666666;
}
.errorMessageContainer {
width: 620px;
margin: 200px 0 0 300px;
}
.errorMessageIcon {
font-family: Segoe UI Semibold;
font-size: 72px;
color: #29abe0;
display: inline-block;
vertical-align: top;
}
.errorMessageHeaderContainer {
display: inline-block;
width: 500px;
padding: 20px 0 0 30px;
}
.errorMessageHeader {
font-family: Segoe UI Light;
font-size: 28px;
color: #ffffff;
}
.errorMessageSubHeader {
font-weight: bold;
}
.errorMessageText {
font-family: Segoe UI;
font-size: 13px;
color: #ffffff;
width: 450px;
}
.errorContact a {
color: #ffffff;
text-decoration: underline;
}
this will put your message container in center of the page :
.errorMessageContainer {
width: 620px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -310px;
margin-top: -50px;
}
see the fiddle
Try this:
.errorMessageContainer {
width: 620px;
margin: 200px auto 0;
}
You can use margin: 200px auto 0 auto; for the .errorMessageContainer see fiddle here: http://jsfiddle.net/DSATE/
.errorMessageContainer{
position: absolute;
height: 200px;
width: 400px;
margin: -100px 0 0 -200px;
top: 50%;
left: 50%;
}
The best approach is to set up your display and margins correctly. Do not set values for this otherwise it will fail if the div changes in size. heres an example I made up using a div wrapper and the value display:table-cell
DEMO http://jsfiddle.net/kevinPHPkevin/DSATE/1/
I am working on WP using a template and I'm trying to get a button to float outside the main container. I went through some already posted questions here, but no luck.
I have tried with padding, margin, overflow, etc. The one thing that seems to work is by setting negative margin, but in that case the div is hidden by the main container.
Here's the HTML:
<div class="purchase_options_meta clearfix">
<div class="purchase_options">
<div id="deal_attributes_wrap" class="section ">
</div>
<div class="buy_button gb_ff font_x_large">
</div>
</div>
</div>
And here's the CSS I'm using:
.container.main {
width: 980px;
padding: 20px;
overflow: visible;
}
.purchase_options {
position: relative;
}
.buy_button {
position: absolute;
background: url(http://topgreekgyms.fitnessforum.gr/wp-content/uploads/2012/12/Button12.png) no-repeat center;
color: white;
height: 100px;
width: 375px;
left: -54px;
top: -16px;
}
.button {
background-color: transparent;
color: #ffffff;
}
.button:hover {
background-color: transparent;
color: #cccccc;
}
.buy_button a {
font-weight: bold;
font-size: 29px;
font-family: arial;
padding: 12px;
display: block;
white-space: nowrap;
position: relative;
margin: 15px 0 0 50px;
}
.buy_button a span {
position: absolute;
right: 33px;
padding: 0 5px;
}
And here's a link to the page. My problem is with the top red button at the left.
I would greatly appreciate any help!
Just in case that helps someone in the future:
I had to add this part of CSS in my code:
#deal_single.clearfix:after {
clear: both !important;
}
Just to be more specific '#deal_single' is the page id.