I am currently working on a website and was wondering if You could help me solve a problem. I want the h1 title to be on the same line as the date but I can't get it to work for some reason.
The CSS code:
#content h1 {
font-family: 'Caveat', cursive;
color: #262626;
margin-top: 50px;
margin-left: 100px;
padding-bottom: 10px;
width: 50%;
border-bottom: 1px solid #ddd;
float: left;
}
.date {
float: right;
}
The HTML code:
<body>
<nav>
<a href='#' class='active'>Home</a>
<a href='#'>Partners</a>
<a href='#'>Contact</a>
<a href='#' class='about'>About</a>
</nav>
<div id='content'>
<h1>Welcome.</h1>
<p class='date'>01/01/2016</p>
</div>
</body>
Help is appreciated. :)
just add margin: 0 to h1 and p
#content h1 {
font-family: 'Caveat', cursive;
color: #262626;
margin-top: 50px;
margin-left: 100px;
padding-bottom: 10px;
width: 50%;
border-bottom: 1px solid #ddd;
float: left;
margin: 0;
}
.date {
float: right;
margin: 0;
}
jsFiddle
I checked your code on following problem I got
You added one css propertie for h1 tag i.e margin-top: 50px;
as per you applied float , but you not applied margin-top: 50px; for .date class
just add code
.date {
margin-top: 50px;
float: right;
}
What you are looking for is floats:
Jsfiddle
.alignleft {
float: left;
}
.alignright {
float: right;
}
The reason why they aren't completely right on each other, is that your welcome is a h1 and it has got some bigger styling than the p does. Could be solved with some custom styling.
You can read more about left and right aligning here
Hope this is what you were looking for.
Cheers :)
Related
This is my HTML and CSS
.register {
background-color: red;
width: 500px;
float: left;
}
.login {
background-color: blue;
width: 500px;
float: left;
}
.log {
text-decoration: none;
font-family: 'Mulish', sans-serif;
font-size: 20px;
color: #fff;
}
<div class="submissions">
<div class="register"><a class="log" href="#" style="margin-right: 100px;">Register</a></div>
<div class="login"><a class="log" href="#" style="margin-left: 100px;">Login</a></div>
</div>
And the login text aligns in fact 100px with margin-right, but the register text doesnt align 100px with the margin-right, how can i fix this? Image shown below (Used red and blue colored divs for easier visualization.)
margin-right does not guarantee the element will be a certain distance from the right side of its parent, it only determines the minimum space reserved by the element on its right side.
See for yourself: the red element here is more than 10px from the right side of its parent div.
.container {
width: 100%;
height: 50px;
background-color: blue;
}
.child {
width: 20%;
height: 50px;
margin-right: 10px;
background-color: red;
}
<div class="container">
<div class="child"></div>
</div>
If you want the element to measure from the right side instead of the left, you can use the float property.
.container {
width: 100%;
height: 50px;
background-color: blue;
}
.child {
width: 20%;
height: 50px;
float: right;
margin-right: 10px;
background-color: red;
}
<div class="container">
<div class="child"></div>
</div>
See how the red element is now on the right side of its parent container? It is now exactly 10px from the edge because it still reserves that space using its margin-right.
The use of float is less common today because there are better ways to create most layouts. For simple uses like this, however, it might be the quick fix you're looking for.
Here's your code with the float property adjusted. I've selected the "Register" link using the compound selector .register > a which matches an anchor (a) tag that is the direct child of an element with the register class attribute.
.register {
background-color: red;
width: 500px;
float: left;
}
.register > a {
float: right;
}
.login {
background-color: blue;
width: 500px;
float: left;
}
.log {
text-decoration: none;
font-family: 'Mulish', sans-serif;
font-size: 20px;
color: #fff;
}
<div class="submissions">
<div class="register"><a class="log" href="#" style="margin-right: 100px;">Register</a></div>
<div class="login"><a class="log" href="#" style="margin-left: 100px;">Login</a></div>
</div>
What I understand from your question is that you are looking to achieve something similar to this Screenshot
To achieve this, I simply put text-align: right on the .register class.
Full code:
.register {
background-color: red;
width: 500px;
float: left;
text-align: right; //The only change
}
.login {
background-color: blue;
width: 500px;
float: left;
}
.log {
text-decoration: none;
font-family: 'Mulish', sans-serif;
font-size: 20px;
color: #fff;
}
<div class="submissions">
<div class="register"><a class="log" href="#" style="margin-right: 100px;">Register</a></div>
<div class="login"><a class="log" href="#" style="margin-left: 100px;">Login</a></div>
</div>
Try 'fullpage' version.
Here's my page:
https://i.stack.imgur.com/mKp9H.png
I don't know why it's not aligned... I'm newbie in html and CSS.
Here's my code:
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#logo {
background-color: black;
color: white;
text-align: center;
padding: 15px;
}
#nav {
min-height: 640px;
width: 130px;
background-color: lightgray;
float: left;
}
#content {
min-width: 687px;
padding: 20px;
float: left;
}
#ad {
float: left;
width: 122px;
min-height: 620px;
background-color: yellow;
padding: 10px;
}
#footer {
clear: both;
background-color: black;
color: white;
text-align: center;
padding: 20px;
}
LINK TO PASTEBIN.
I need this for my school and I can't solve this problem.
I've been trying for past few hours to get it to work, I tried to google for fix but they don't seem to work or I'm just too dumb.
PS: Sorry for my english and my "skills" in html.
You probably want to put all content inside the container. "nav", "content" and so on are currently not inside the container as the container is closed before "nav" starts. To put everything inside the container you have to remove the </DIV>-tag before <DIV ID="nav">. This also fixes the problem with the stray </DIV>-tag at the end. Hope this helps.
Thank you all for your time.
I am trying to do something simple but it turns out to be so complicated.
I need a link to send an email but there's some issue with the style. It shows the content fractured (see jsfiddle). But when I right click several times, everything is back to normal. Any idea?
.sendAll {
float: right;
margin-right: 10%;
margin-bottom: 3%;
margin-top: 2%;
display: inline-block;
}
#sendAll {
color: white;
padding: 7% 25%;
background-color: #0080FF;
display: inline-block;
}
#sendAll:hover {
background-color: #0164c6;
}
HTML:
<div class="sendAll">
<a href="#">
<b id="sendAll">Send Email to All Selected</b>
</a>
</div>
Here's the jsfiddle link
Thank you all !
Just provide display: block to #sendAll
The <b> tag provides a font-weight: bold property to the element, but the element is not a block level element by itself. So, you have to manually specify the same.
Refer code:
.sendAll {
float: right;
margin-right: 10%;
margin-bottom: 3%;
margin-top: 2%;
display: inline-block;
}
#sendAll {
color: white;
padding: 7% 25%;
background-color: #0080FF;
display: block;
}
#sendAll:hover {
background-color: #0164c6;
}
<div class="sendAll">
<a href="#">
<b id="sendAll">Send Email to All Selected</b>
</a>
</div>
Try this:
.sendAll {
float: right;
margin-right: 10%;
margin-bottom: 3%;
margin-top: 2%;
display: inline-block;
}
#sendAll {
color: white;
padding: 7% 25%;
background-color: #0080FF;
display: inline-block;
white-space:nowrap;
}
#sendAll:hover {
background-color: #0164c6;
}
Explain
Add a property white-space:nowrap in #sendAll id
update code link
if you want your text on only one line, add the following to your #sendAll class
white-space: nowrap;
Here is the example which has two divs and it can be seen that no matter how much I increase the value of margin-top for punchline div it isn't having any effect: https://jsfiddle.net/5frzjnbj/
It just goes only as much farther as the logo is from the top. Why is that? When I remove logo div then div starts acting "normally".
The Code:
.logo{
float: left;
/*margin-left: 19px;*/
font-size: 27;
background-color: red;
margin-top:100px;
}
.punchLine{
background-color: green;
/*float: left;*/
margin-top:1000px;
clear: both;
/*margin-left: 300px;
font-size: 14;
color: #264B5D;
text-transform: uppercase;
font-family: Arial;*/
}
<div class="logo">
<font color="#0072BC">Logiz</font><font color="FFFFFF">solutions.com</font>
</div>
<div class="punchLine">
software and tech solutions...
</div>
Apply this, it help
.punchLine{
float: left;
}
Check out the solution here.
One needs to add clear: both after the floated divs.
Code:
HTML:
<div class="logo">
<font color="#0072BC">Logiz</font><font color="FFFFFF">solutions.com</font>
</div>
<div class="clearfix"></div>
<div class="punchLine">
software and tech solutions...
</div>
CSS:
.logo {
float: left;
/*margin-left: 19px;*/
font-size: 27;
background-color: red;
margin-top: 100px;
}
.punchLine {
background-color: green;
/*float: left;*/
margin-top: 1000px;
clear: both;
/*margin-left: 300px;
font-size: 14;
color: #264B5D;
text-transform: uppercase;
font-family: Arial;*/
}
.clearfix {
clear: both;
}
Why isn't margin-top working with this div?
Because margin properties cannot be collapsed properly when elements are floated, see the official W3 Docs on the matter: Box Model - Collapsin Margins
Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
Solutions
1: No Floats
Get rid of the floating, why do you need it in the first place if the elements are going to be under each other?
.logo {
margin-top: 100px;
font-size: 27px;
color: #FFF;
background: #000;
}
.logo span {
color: #0072BC;
}
.punchLine {
background-color: lightblue;
margin-top:100px;
}
<div class="logo">
<span>Logiz</span>solutions.com
</div>
<div class="punchLine">
software and tech solutions...
</div>
2: Margin Bottom
Add margin-bottom: 100px to the logo div if you want to keep the float for some reason.
.logo {
margin-top: 100px;
margin-bottom:100px;
font-size: 27px;
color: #FFF;
background: #000;
float:left;
}
.logo span {
color: #0072BC;
}
.punchLine {
background-color: lightblue;
clear:both;
}
<div class="logo">
<span>Logiz</span>solutions.com
</div>
<div class="punchLine">
software and tech solutions...
</div>
3: Padding-top
Alternatively you can add a top padding if there won't be an actual background.
.logo {
margin-top: 100px;
font-size: 27px;
color: #FFF;
background: #000;
float:left;
}
.logo span {
color: #0072BC;
}
.punchLine {
background-color: lightblue;
clear:both;
padding-top:100px;
}
<div class="logo">
<span>Logiz</span>solutions.com
</div>
<div class="punchLine">
software and tech solutions...
</div>
Other methods can be transparent borders or pseudo selectors but I don't think they are the best practice so I will not explain them here.
P.S Please avoid using <font> tags, they are long deprecated.
I have got this css:
#footerLinks {
text-align: center;
margin: auto;
}
#footerLinks a {
float: left;
color: #c2c2c2;
display: block;
font-size: 12px;
margin-right: 10px;
}
And this html:
<div id="footerLinks">
No Porn on App Store
Porn and Apple
iPhone Porn Wiki
</div>
The problem is that the hyperlinks wont be in the center of the page. I tried margin: auto, text-align and tried to play with the margins nothing works, why?
remove float:left; and display:block; from this class
#footerLinks a {
color:#c2c2c2;
font-size: 12px;
margin-right: 10px;
}
Demo
Update your css.
#footerLinks {
text-align: center;
margin: auto;
}
#footerLinks a {
color: #c2c2c2;
font-size: 12px;
margin-right: 10px;
}