I'm working with PHP, HTML and CSS to make a website. I'm having this issue: There are 2 divs: profile_Nick and profile_Ranks. However profile_Ranks cannot just go right bellow profile_Nick. How can I set their position bellow the WalkerJetBat text? Thanks.
.profile_Nick
{
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: white;
font-size: 34px;
margin-left: 12px;
padding-left:11px;
padding-top:2px;
padding-right:11px;
padding-bottom:2px;
float: left;
left:12px;
max-width: 405px;
background-color: rgba(0,180,255,0.60);
border-radius: 2px;
}
.profile_Ranks
{
position:relative;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: white;
font-size: 12px;
margin-left: 12px;
padding-left:11px;
padding-top:2px;
padding-right:11px;
padding-bottom:2px;
float:left;
background-color: rgba(0,180,255,0.60);
border-radius: 2px;
top:50px;
}
<div class="profile_infoholder">
<div class="profile_Nick">
<? echo $steamprofile['personaname']; ?>
</div>
<div class="profile_Ranks">
Developer
</div>
<div class="profile_Ranks">
+Premium
</div>
</div>
Solution is here :
DEMO
I have just removed you float property from .profile_Nick class
.profile_Nick
{
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: white;
font-size: 34px;
margin-left: 12px;
padding-left:11px;
padding-top:2px;
padding-right:11px;
padding-bottom:2px;
left:12px;
max-width: 405px;
background-color: rgba(0,180,255,0.60);
border-radius: 2px;
}
Your style sheet for .profile_Ranks contain top:50px property I have reduced to display it correctly at the bottom in my demo.
Found btw.
.profile_infoholder .profile_Nick
{
position:absolute;
}
Adding this fixed.
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Why does this CSS margin-top style not work?
(14 answers)
Closed 4 years ago.
I have an issue with my page its making a gap appear between the H1 and main page DIV section. After 2 hours I cant seem to fix it. Can anyone advise where its going wrong. I want the top banner and the #mainarea to be on top of each other. There is a small gap between the 2 at the moment.
body {
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: #f6f6f6;
padding: 0;
margin: 0;
border: 0;
}
#logo {
width: 100%;
height: 50px;
background-color: #000;
}
#mainarea {
width: 60%;
height: auto;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
background-color: #E70A0E;
height: 250px;
}
h1 {
font-size: 1.5em;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: bolder;
font-style: normal;
padding-left: 15px;
}
<div id="logo">
</div>
<div style="clear: both;"></div>
<div id="mainarea">
<h1>This is a test </h1>
</div>
Set overflow:auto; in #mainarea and add margin:auto toh1 Tag.
See, what happens when you put div inside div: https://stackoverflow.com/a/8529773/9947640
body {
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: #f6f6f6;
padding: 0;
margin: 0;
border: 0;
}
#logo {
width: 100%;
height: 50px;
background-color: #000;
}
#mainarea {
width: 60%;
height: auto;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
background-color: #E70A0E;
height: 250px;
overflow:auto;
}
h1 {
font-size: 1.5em;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: bolder;
font-style: normal;
padding-left: 15px;
margin:auto;
}
<div id="logo">
</div>
<div style="clear: both;"></div>
<div id="mainarea">
<h1>This is a test </h1>
</div>
I have a css header that is not allowing me to align a text in the same line using . I imagine there is a weird default to the header that doesnt allow me to do this how do i prevent the default or what else can i use instead?
HTML
h3>Size:</h3>
<?php echo "<span class='sP'>".$pSize ."</span><br>"?>
CSS
h3{
margin-top: 0;
margin-bottom: 0;
color: #7C7C7C;
font-size: 20px;
font-weight: bold;
text-align: left;
font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
}
.sP{
color: #7C7C7C;
font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
}
I think this would be the answer you are looking for - Just put display:inline-block. I have put a working sample with the answer.please try this, if there is any issue please do ask.
h3{
margin-top: 0;
margin-bottom: 0;
color: #7C7C7C;
font-size: 20px;
font-weight: bold;
text-align: left;
font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
display:inline-block;
}
.sP{
color: #7C7C7C;
font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
display:inline-block;
}
<h3>Size:</h3>
<span class='sP'>hi</span><br>
Try to put <span> in <h3> tags as header takes the full width.
<h3>Size:
<?php echo "<span class='sP'>".$pSize ."</span><br>"?>
</h3>
Heading elements (h1-h6) are block level elements so that's why you specifically need to set them display: inline-block in order to display something next to them.
h1 { display: inline-block }
span { display: inline-block }
<h1>Hello, i'm a big fat heading</h1>
<span>Look at me, i'm a little 'ol span</span>
I tried to style the select element.
I do this:
option {
font-size: medium;
font-weight: bold;
margin-left: 30px;
font-family: "Comic Sans MS", cursive, sans-serif;
color: aliceblue;
}
After the user choose one of the option, I want the same style.
but this is return to the basic atyle/ what can I do to save the style to the selected one?
Here is the jsfiddle
select {
font-size: medium;
font-weight: bold;
font-family: "Comic Sans MS", cursive, sans-serif;
color: aliceblue;
}
Your question is not very clear as to what you aim to accomplish, but it's likely you want to achieve the following effect:
document.getElementsByTagName("select")[0].onchange = function() {
this.classList.add("selected");
};
select,
option {
font-size: medium;
font-weight: bold;
font-family: "Comic Sans MS", cursive, sans-serif;
}
select.selected,
option {
color: red;
}
<select>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
<option>six</option>
</select>
I have an H1 element inside a DIV inside a header:
<header class="container_12">
<div class="grid_3">
<h1><b>xx</b></h1>
</div>
</header>
and the following CSS:
.container_12 .grid_3 {
width: 23%;
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
display: inline;
float: left;
margin-left: 0.99%;
margin-right: 0.99%;
}
header h1 {
margin:0 auto;
text-align:center;
display: inline;
line-height: 77px;
color: #ddd;
font-size: 4em;
font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Segoe UI Symbol", "Helvetica Neue", Arial;
}
I am looking for some advice. I would like to position the "xx" text in the middle of the grid_3 with the same
amount of space to the left right and left of the "xx".
You need:
text-align:center;
Should do the trick, applied to the h1.
Here's a fiddle:
http://jsfiddle.net/qGaCY/1/
.grid_3 {
text-align: center;
}
NOTE: <b>..</b> is deprecated in HTML5. Use <strong>..</strong> instead.
You can either do:
text-align: center;
https://developer.mozilla.org/en-US/docs/CSS/text-align
margin: 0 auto;
https://developer.mozilla.org/en-US/docs/CSS/margin
.container_12 .grid_3 {
width: 23%;
}
.container_12 > .grid_3 > h1 {
text-align: center
}
A jsfiddle for your current example: http://jsfiddle.net/bxG27/
h1 {
text-align:center;
line-height: 77px;
color: #ddd;
font-size: 4em;
font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Segoe UI Symbol", "Helvetica Neue", Arial;
}
JSFiddle. I've given the heading a dark background so you can easily see that the text is centrally aligned.
As I mentioned in my comment on your post, display:inline; on your h1 is what's causing it to fail for you, as widths are not applied to inline elements.
I am having a hard time to create make the background color stretch across the browser
here is some code
body {
font-size: 1.1em;
font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", "Calibri", sans-serif;
margin: 0px auto;
padding-bottom: 25px;
width: 980px;
}
div#black_bar{
background-color: #000000;
}
div#header {
height: 66px;
font-family: arial;
margin: 0 auto;
color: #FFFFFF;
margin-top: 5px;
}
of course as you can see i have specified the width to be 980px in the body and this apply to the header of course, any ideas how to solve this
and by the way this black bar is actually a div containing the header in it
Thanks in advance.
You will need the header wrapper to be inside the body with width 100%, and to specify width=980px both on the header and content below, like this :
CSS
body, html{
width:100%;
}
div#black_bar{
background-color: #000000;
width:100%;
}
div#header {
height: 66px;
font-family: arial;
color: #FFFFFF;
margin-top: 5px;
width:980px;
margin:0 auto;
}
#content{
font-size: 1.1em;
font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", "Calibri", sans-serif;
padding-bottom: 25px;
margin: 0 auto;
width: 980px;
}
HTML
<body>
<div id="black_bar">
<div id="header">
</div>
</div>
<div id="content">
</div>
</body>