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;
}
Related
Sometimes when I come back to html I forget the simple things...
I want to be able to get the spans inside the div to center. IDK if I have it structured right, feel free to suggest anything
https://jsfiddle.net/yxg1zsac/
.define_link {
background: rgba(0,0,0,.3);
border-radius: 10px;
padding: 5px;
width: 200px;
margin: 5px auto;
font-size: 20px;
display: inline-block;
font-weight: bold;
text-align: center;
}
.pagination {
width:100%;
margin:auto
}
<div class="pagination">
<span class="define_link">previous</span>
<span class="current">Page 2 of 88.</span>
<span class="define_link">next</span>
</div>
Try this:
https://jsfiddle.net/tobyl/yxg1zsac/1/
Critical CSS:
.pagination {
text-align: center;
}
i think you want to this check it
https://jsfiddle.net/bhavhirani/gnrqxxka/1/
.define_link {
background: rgba(0,0,0,.3);
border-radius: 10px;
padding: 5px;
width: 200px;
margin: 5px auto;
font-size: 20px;
display: inline-block;
font-weight: bold;
text-align: center;
}
.define_link.prev{
float:left;
}
.current {
display: block; float: left; width: 30%; margin: 10px auto; text-align: center;
}
.define_link.next{
float:right;
}
.pagination {
width:100%;
margin:auto;
}
<div class="pagination">
<span class="define_link prev">previous</span>
<span class="current">Page 2 of 88.</span>
<span class="define_link next">next</span>
</div>
I have a container that usually has a width of 400px. When the screen gets smaller, its width is reduced to 300px. These two values are static and don't change.
I have 3 buttons within this container. At the wider width, I'd like to have 2 side by side and the 3rd one on the line below. All of them are centered.
When the container is compressed, I'd like to have all the buttons stack on top of each other centered.
I can get it at the wide width but can't get it at the narrow width.
HTML:
<div id="varied-width">
<div class="pg-sp2 prompt-gate">Did you find what you were looking for?
<div class="pg-3-buttons">
<button class="prompt-gate-button" onclick="PromptGate_sp2(1)">Yes</button>
<button class="prompt-gate-button" onclick="PromptGate_sp2(0)">No, you suck</button>
</div>
<button class="prompt-gate-button" onclick="PromptGate_sp2(2)">No, I need help.</button>
</div>
</div>
CSS:
body {
width: 400px;
}
.prompt-gate {
margin-top: 25px;
margin-bottom: 15px;
background-color: #fefab1;
border: 1px solid #ffd532;
padding: 10px;
text-align: center;
}
.prompt-gate-button {
background-color: #0E80B4;
color: white;
font-size: 12px;
height: 30px;
width: 72px;
border: none;
margin: 15px 25px;
outline: none;
font-style: normal;
cursor: pointer;
}
.pg-3-buttons {
display: inline-block;
margin-top: 10px;
}
.pg-3-buttons .prompt-gate-button {
float: left;
}
.pg-sp2 button {
margin: 5px 15px;
width: 120px;
padding: 10px 0px;
}
.pg-sp2 > button {
}
.small-width {
width: 300px;
}
Fiddle: http://jsfiddle.net/je821vz9/10/
Used flex layout instead: http://jsfiddle.net/je821vz9/7/
Added this to .prompt-gate style and then cleaned up some of the conflicting HTML and CSS.
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
You could use a media query and have the viewport size decided on how to display the elements.
I added the following css to your body:
body {
max-width:400px;
min-width:300px;
}
We can then add a media query to adjust how the items are laid out:
#media (max-width: 300px) {
div.pg-3-buttons .prompt-gate-button {
display:block;
float:none;
}
}
See an updated version of your example and scale down the width of your browser to see the items pop in to place at 300px.
Somehow figured it out... removed floats and moved around the button HTML so that they were all in the same container.
http://jsfiddle.net/je821vz9/19/
<div id="varied-width">
<div class="pg-sp2 prompt-gate">Did you find what you were looking for?
<div class="pg-3-buttons">
<button class="prompt-gate-button" onclick="PromptGate_sp2(1)">Yes</button>
<button class="prompt-gate-button" onclick="PromptGate_sp2(0)">No, you suck</button>
<button class="prompt-gate-button" onclick="PromptGate_sp2(2)">No, I need help.</button>
</div>
</div>
</div>
<style>
body {
width: 400px;
}
.prompt-gate {
margin-top: 25px;
margin-bottom: 15px;
background-color: #fefab1;
border: 1px solid #ffd532;
padding: 10px;
text-align: center;
}
.prompt-gate-button {
background-color: #0E80B4;
color: white;
font-size: 12px;
height: 30px;
width: 72px;
border: none;
margin: 15px 25px;
outline: none;
font-style: normal;
cursor: pointer;
}
.pg-3-buttons {
margin-top: 10px;
}
.pg-sp2 button {
margin: 5px 15px;
width: 120px;
padding: 10px 0px;
}
</style>
I have a header with a div inside of it, for some reason there is more space under the div then above. I tried setting all the padding to 0 in hope to see which one was causing it but it seems to not be a padding at all.
HTML
<header>
<div class="logo">
<div class="centrDivInDiv">
<h1>Welcome to Planet Earth</h1>
<p>The best planet after Pluto.</p>
</div>
</div>
</header>
CSS
body {
margin: 0px;
}
h1 {
margin-bottom: 0px;
}
header {
background-color: #E74C3C;
padding: 10px;
}
header p {
line-height: 0%;
}
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
}
.logo p {
margin-top: 24px;
}
.centrDivInDiv {
display: table-cell;
vertical-align: middle;
margin: 0;
}
JsFiddle
Add vertical-align:middle to your .logo div (and you can remove it from .centrDivInDiv):
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
vertical-align: middle;
}
jsFiddle example
Your problem is caused by the display: inline-block of your CSS. If you remove that or change it for display: blockit will be fine. You should also set your width: 50%
All of that in your .logo
check the fiddle
jsFiddle
The problem exists because you're using display: inline-block; in .logo
The best way to solve this problem is to set font-size to 0 in header so it will be like this:
header {
background-color: #E74C3C;
padding: 10px;
font-size: 0;
}
Also you should set font-size in .logo so it will be like this
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
font-size: 16px;
}
Maybe this link will help you, it has more details
Fighting the Space Between Inline Block Elements | CSS-Tricks
I want to delete underline. I have already put text-decoration: none;. However it doesn't work. Here is a DEMO.
HTML
<a href="./index.php?sign_in=1">
<div id="signup_button">
Sign up
</div>
</a>
CSS
#signup_button {
position: relative;
max-width: 206px;
min-height: 20px;
max-height: 40px;
margin: auto;
margin-top: 10px;
padding: 10px 10px 10px 10px;
background-color: #0096cc;
text-align: center;
color:#fff;
font: 35px/1 "Impact";
text-decoration: none;
}
Set
a {
text-decoration:none;
}
before your style. The underline is coming from there.
text-decoration belongs to the "a" tag, but you can also get rid of the div.
If you set the display:block on the a, you have the same effect
Sign up
now looks exactly the same as
<a href="./index.php?sign_in=1">
<div class="signup_button">
Sign up
</div>
</a>
using
.signup_button {
position: relative;
max-width: 206px;
min-height: 20px;
max-height: 40px;
margin: auto;
margin-top: 10px;
padding: 10px 10px 10px 10px;
background-color: #0096cc;
text-align: center;
color:#fff;
font: 35px/1 "Impact";
display:block;
}
a {
text-decoration: none;
}
.signup_button {
position: relative;
max-width: 206px;
min-height: 20px;
max-height: 40px;
margin: auto;
margin-top: 10px;
padding: 10px 10px 10px 10px;
background-color: #0096cc;
text-align: center;
color: #fff;
font: 35px/1"Impact";
display: block;
}
a {
text-decoration: none;
}
Sign up
<p><hr /></p>
<a href="./index.php?sign_in=1">
<div class="signup_button">
Sign up
</div>
</a>
You need to set text-decoration: none on the a element not the div inside it.
Also, it's not good practice to put block level elements like divs inside of inline elements like anchors. You should just apply all the #signup_button styles directly to the a and get rid of the div.
You should not place a DIV inside of an A tag. I did some changes which will make it work.
HTML
<div id="signup_button_container">
<a id="signup_button" href="./index.php?sign_in=1">
Sign up
</a>
</div>
CSS
#signup_button_container {
text-align: center;
}
#signup_button {
position: relative;
display: inline-block;
max-width: 206px;
min-height: 20px;
max-height: 40px;
margin: auto;
margin-top: 10px;
padding: 10px 30px;
background-color: #0096cc;
color:#fff;
font: 35px/1 "Impact";
text-decoration: none;
}
http://jsfiddle.net/96sf8/4/
So I'm trying to keep an unordered list centered once the website hits a certain media query. I can't get it to stay in the center of it's container if the page is moved around. Here is the corresponding code.
HTML
<div id="centerNav">
<ul id="home-nav">
<li>DUI/DWI Defense</li>
<li>Criminal Defense</li>
<li>Estate Planning</li>
<li style="border: none;"> Agricultural Law</li>
</ul>
</div>
CSS
#media only screen and (max-width: 839px)
{
#centerNav {
margin: 0 auto;
max-width: 840px;
padding: 0;
height:60px;
}
#home-nav li {
float: left;
position: relative;
display: block;
text-align: center;
background: none;
font-size: 20px;
width: 158px;
border-right: 1px solid #fff;
margin-top: 8px;
line-height: 1em;
padding-left: 10px;
}
#home-nav {
list-style:none;
position:relative;
height: 60px;
vertical-align: middle;
z-index: 5;
border-top: 4px double #fff;
border-bottom: 4px double #fff;
border: none;
margin: 0;
background: #7a0426;
}
}
Remove float from li and make it display: inline-block
I think this will solve your issue.
css
#centerNav {
margin: 0 auto;
max-width: 840px;
padding: 0;
height:60px;
text-align:center;
}
#home-nav li {
position: relative;
display: inline-block;
text-align: center;
background: none;
font-size: 20px;
border-right: 1px solid #fff;
line-height: 60px;
padding:0 10px;
}
jsFiddle Code
In your media query you need to make sure float is none because you have float set from previous css
#home-nav li {
float: none;
display: inline-block;
}
The unordered list that contains the li, add text-align: center
#home-nav {
text-align: center;
}
Also your html structure is currently invalid because you have a div as the immediate child of a ul. You can wrap the ul with the div if you need to but it definitely should not be the way it is now
That should solve the issue