This is the jsfiddle link to my HTML page, and its clear that there is space between the header and content divs and in between content and footer divs. What is causing this, how to remove this. What changes should I do in my CSS?
If I do margin-top:-50px in the content div then it touches the bottom of the header div? But this seems more of a hack and this does n't works with the footer? Moreover I don't like this approach.
CSS
html{
font-size:100%;
margin:0;
padding:0;
min-height: 100%;
position: relative;
}
body{
margin:0;
padding:0;
}
#header{
background-color:#007FFF;
width : 100%;
height:130px;
}
#content{
background-color:#B0E2FF;
margin-bottom:0px;
margin-top:0px;
}
#footer{
background-color:#B0E2FF;
position: absolute;
left:0;
bottom: 0;
height: 90px;
width: 100%;
overflow:hidden;
}
h1 {
font: bold italic 3em/1em "Times New Roman", "MS Serif", "New York", serif;
padding: 0.5em 0 0 0;
text-align: center;
margin: 0;
color: #e7ce00;
}
h2 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
padding: 0.5em 0 0 0;
text-align: center;
margin: 0;
color: #e7ce00;
}
#wrapper{
width:60%;
margin:0 auto;
background-color: red;
}
.scrollabletextbox{
width:900px;
height:120px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border:3px solid #00008B;
background-color:#E6E8FA;
}
#querytextarea{
float: left;
}
button{
float: right;
}
form:{
width:90%;
margin:0 auto;
}
HTML
<body>
<div id="header">
<h2>Console</h2>
<h1>Query</h1>
</div>
<div id="content">
<div id="wrapper">
<form>
<h3 style="margin-bottom:1px;margin-top:50px; color:##22316C">Mongo Query</h3>
<textarea id = "querytextarea" class="scrollabletextbox" name="MongoQuery" rows="20" cols="30"></textarea><br>
<button type="submit" form="form1" value="Submit">Submit</button>
<br>
<h3 style="margin-bottom:1px;margin-top:10px; color:##22316C">Result</h3>
<textarea class="scrollabletextbox" name="Result" rows="20" cols="30"></textarea>
</form>
</div>
</div>
<div id="footer">
</div>
</body>
You could exchange the margin-topof the h3 inside the #content with padding-top
#content {
h3 {
margin: 0;
padding-top: 50px;
}
}
Consider using classes for styling instead of an id.
I think your problem is that you have set a margin-top (on HTML file) on your h3 element.
Juste change it like this :
<h3 style="margin-bottom:1px;margin-top:50px; color:##22316C">Mongo Query</h3>
But this should be better, on HTML :
<h3 id="myFirstH3">Mongo Query</h3>
And on CSS add this:
#myFirstH3{
margin-bottom:1px;
margin-top:0px; /*set to 0 because h3 have a margin top by default*/
color:#22316C;
}
It's better to place css on CSS file.
Hope it helps.
EDIT
Response too late ;)
Give a padding of atleast 1px
#content{
padding: 1px;
}
Here is the updated Demo
html{
font-size:100%;
margin:0;
padding:0;
min-height: 100%;
position: relative;
}
body{
margin:0;
padding:0;
}
#header{
background-color:#007FFF;
width : 100%;
height:130px;
}
#content{
background-color:#B0E2FF;
margin-bottom:0px;
margin-top:0px;
}
#footer{
background-color:green;
position: fixed;
left:0;
bottom: 0;
height: 90px;
width: 100%;
overflow:hidden;
}
h1 {
font: bold italic 3em/1em "Times New Roman", "MS Serif", "New York", serif;
padding: 0.5em 0 0 0;
text-align: center;
margin: 0;
color: #e7ce00;
}
h2 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
padding: 0.5em 0 0 0;
text-align: center;
margin: 0;
color: #e7ce00;
}
#wrapper{
width:60%;
margin:0 auto;
background-color: red;
}
.scrollabletextbox{
width:900px;
height:120px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border:3px solid #00008B;
background-color:#E6E8FA;
}
#querytextarea{
float: left;
}
button{
float: right;
}
form:{
width:90%;
margin:0 auto;
}
#content{
padding: 1em;
padding-bottom: 100px; // since footer is having 90px height
}
<body>
<div id="header">
<h2>Console</h2>
<h1>Query</h1>
</div>
<div id="content">
<div id="wrapper">
<form>
<h3 style="margin-bottom:1px;margin-top:50px; color:##22316C">Mongo Query</h3>
<textarea id = "querytextarea" class="scrollabletextbox" name="MongoQuery" rows="20" cols="30"></textarea><br>
<button type="submit" form="form1" value="Submit">Submit</button>
<br>
<h3 style="margin-bottom:1px;margin-top:10px; color:##22316C">Result</h3>
<textarea class="scrollabletextbox" name="Result" rows="20" cols="30"></textarea>
</form>
</div>
</div>
<div id="footer">
</div>
</body>
EDIT
To arrange footer
#content{
padding: 1em;
padding-bottom: 100px; // since footer is having 90px height
}
Here is the updated Demo
Remove top margin from h3
<h3 style="margin-bottom:1px;margin-top:0px; color:#22316C">Mongo Query</h3>
AND
If you also wants to footer comes after content then remove bottom:0 from below css.
#footer{
background-color:#B0E2FF;
position: absolute;
left:0;
bottom: 0;
height: 90px;
width: 100%;
overflow:hidden;
}
Related
Basically I have this title that says testing. On large screens it isn't centered, and is moved to the right. I want it to be centered, but I can't get it centered. On smaller screens it is to the right of the images and pushing them left, keeping nothing centered. In all cases I want it to be below the images and centered in the page. Thanks.
I keep trying aligns, floats, widths, and margins/ padding but nothing works.
<div class="primary-content">
<span class="title">FTC TEAM 4466</span>
egg
<div class="bot-pod">
<div class="bot">
<img src="img/finalbot.svg" alt="old robot">
</div>
<div class="pod">
<img src="img/finalpod.svg" alt="old robot">
</div>
</div>
<div class="team">
<span class="title">testing</span>
<h1>4466</h1>
<span class="egg"> <p>
egg
</p></span>
</div><!-- End -->
</div><!-- End .primary-content -->
body {
color: #000;
font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.primary-content{
text-align:center;
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
font-size: 15rem;
padding-top:20px;
margin-top:0;
padding-bottom: 50px;
margin-bottom:0px;
display:block;
}
.bot {
float:left;
width:47%;
padding:1px 1px 1px 1px;
margin: 0 1px 0 1px;
}
.pod {
float:right;
width:47%;
padding:1px 1px 1px 1px;
margin: 90.66px 1px 90.66px 1px;
}
#media only screen and (max-width: 1300px) {
.bot {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
.pod {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
img[src="img/finalbot.svg"]{
width:70%;
align-content:center;
}
img[src="img/finalpod.svg"]{
width:70%;
align-content:center;
}
}
I though that the div being below the other ones in the code would do it, but it just doesn't. I think the issue on big screens may be that .bot and .pod are different heights, but I dob't know how to make them equal as it changes as the page gets smaller and bigger. I don't know why my issue is happening for the small screens (under 1300px width).
Thanks again.
set display to flex and add justify.content:center to the CSS properties of the div you are trying to center.
this could happen because you are using an tag in the title,
span tags can not get centered, change this for an h1 tag or another
I did some changes to your code and this is what I came up with:
Feel free to use it
body {
color: #000;
font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.primary-content{
text-align:center;
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
font-size: 15rem;
padding-top:20px;
margin-top:0;
padding-bottom: 50px;
margin-bottom:0px;
display:block;
align-content:center;
}
.bot {
float:left;
width:47%;
padding:1px 1px 1px 1px;
margin: 0 1px 0 1px;
}
.pod {
float:right;
width:47%;
padding:1px 1px 1px 1px;
margin: 90.66px 1px 90.66px 1px;
}
#media only screen and (max-width: 1300px) {
.primary-content{
text-align:center;
font-family: 'Abolition Regular', Helvetica, Arial, sans-serif;
font-size: 4rem;
padding-top:20px;
margin-top:0;
padding-bottom: 50px;
margin-bottom:0px;
display:block;
align-content:center;
}
.bot {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
.pod {
text-align:center;
width:100%;
padding:0;
margin: 0;
}
img[src="img/finalbot.svg"]{
width:70%;
align-content:center;
}
img[src="img/finalpod.svg"]{
width:70%;
align-content:center;
}
}
<div class="primary-content">
<h2>FTC TEAM 4466</h2>
egg
<div class="bot-pod">
<div class="bot">
<img src="img/finalbot.svg" alt="old robot">
</div>
<div class="pod">
<img src="img/finalpod.svg" alt="old robot">
</div>
</div>
<div class="team">
<h2>testing</h2>
<h2>4466</h2>
<p>egg</p>
</div><!-- End -->
</div><!-- End .primary-content -->
I’m having trouble centering the divs named ‘one’ and ‘two’. They need to retain their styles exactly as they are which keep them side by side and margins but also be centered which is the bit I can’t work out?
Also the nav divs need to be centered which I have achieved with the styles below.
#header {
position: relative;
overflow: hidden;
min-width:300px;
height:auto;
text-align: center;
border-bottom:1px solid #ccc;
padding-bottom:5px;
margin: 0 5px 0 5px;
}
#header #one {
font: 1.625em "Arial Black", Helvetica, sans-serif;
font-weight:100;
float: left;
color:#95061e;
margin-bottom:10px;
}
#header #two {
font:1.625em Arial, Helvetica, sans-serif;
float:left;
margin-top:3px;
margin-left:3px;
margin-right:5px;
color:#953606;
}
<div id="header">
<div id="one">Birch</div>
<div id="two">Wood</div>
<div class="nav_active"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
</div>
Use display:inline-block; instead of float:left;.
#header {
position: relative;
overflow: hidden;
min-width:300px;
height:auto;
text-align: center;
border-bottom:1px solid #ccc;
padding-bottom:5px;
margin: 0 5px 0 5px;
}
#header #one {
font: 1.625em "Arial Black", Helvetica, sans-serif;
font-weight:100;
display:inline-block;
color:#95061e;
margin-bottom:10px;
}
#header #two {
font:1.625em Arial, Helvetica, sans-serif;
display:inline-block;
margin-top:3px;
margin-left:3px;
margin-right:5px;
color:#953606;
}
<div id="header">
<div id="one">Birch</div>
<div id="two">Wood</div>
<div class="nav_active"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
</div>
use this code:
#header {
position: relative;
overflow: hidden;
height:auto;
text-align: center;
border-bottom:1px solid #ccc;
padding-bottom:5px;
margin: 0 auto;
}
#header #one {
font: 1.625em "Arial Black", Helvetica, sans-serif;
font-weight:100;
color:#95061e;
margin-bottom:10px;display:inline-block;
}
#header #two {
font:1.625em Arial, Helvetica, sans-serif;margin-top:3px;
display:inline-block;
color:#953606;
}
jsfiddle link click here
Remove the floating in your css, as shown here.
https://jsfiddle.net/dy8bzuv3/
If you want to have both divs in a single line, simply add display:inline; to your css rules for #one and also #two
Good luck on your learning journey! The change I've made here is the #one and #two divs are being given display:inline. This will treat them similar to text, so the text-align option applies to them.
#header {
position: relative;
overflow: hidden;
min-width:300px;
height:auto;
text-align: center;
border-bottom:1px solid #ccc;
padding-bottom:5px;
margin: 0 5px 0 5px;
}
#header #one {
font: 1.625em "Arial Black", Helvetica, sans-serif;
font-weight:100;
color:#95061e;
margin-bottom:10px;
display: inline;
}
#header #two {
font:1.625em Arial, Helvetica, sans-serif;
margin-top:3px;
margin-left:3px;
margin-right:5px;
color:#953606;
display: inline;
}
<div id="header">
<div id="one">Birch</div>
<div id="two">Wood</div>
<div class="nav_active"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
<div class="nav_inactive"></div>
</div>
I am trying to make facebook style comment post area but css is not working. What I'm trying to do. When increased the height of the textarea i want to submit button move down at the same time. When you write a few lines in the textarea, you'll see the submit button does not go move down at the same time.
HTML
<div class="stcommenttext">
<form method="post" action="">
<div class="comtextarea">
<div class="yorumyazalani">
<textarea name="comment" class="comment" maxlength="200" id="" rows="2" cols="50" value="Add your comment here...."></textarea>
</div>
<div class="comgonder">
<input type="submit" value="" id="" rel="" class="comment_button wallbutton" />
</div>
</div>
</form>
</div>
CSS
.comment {
border:1px solid #fff;
width:425px;
margin-left:3px;
margin-top:3px;
font-family:'lucida grande', tahoma, verdana, arial, sans-serif;
font-size:12px;
resize:none;
background-color:#f4f4f4;
}
.comtextarea {
float:left;
width:494px;
margin-left:3px;
height:auto;
border:1px solid #d8dbdf;
background-color:#fff;
}
.comtextarea textarea {
min-height:30px;
}
.yorumyazalani {
float:left;
width:auto;
height:auto;
}
.comgonder {
float:right;
width:auto;
height:auto;
bottom:0px;
margin-left:-5px;
}
.wallbutton {
float:left;
background-color: #fff;
min-width: 32px;
padding: 4px;
text-align: center;
background-position: left bottom;
background-repeat: repeat-x;
border: 1px solid #fff;
color: white !important;
cursor: pointer;
font-size: 12px;
font-weight: bold;
margin-top: 7px;
padding: 5px;
margin-left:5px;
text-decoration:none;
background-image:url(https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10291103_828742610487379_816788942451910142_n.jpg);
background-repeat:no-repeat;
background-position:left;
outline:none;
}
Here is the DEMO
You can fix this in a couple of simple steps:
Set position: relative; on .comtextarea. Now each child can relate to it's container.
Set position: absolute; on .comgonder. Now you can position this element in relation to .comtextarea.
Set bottom: 5px; and right: 5px; on .comgondor. It now follows the right corner of .comtextarea.
Codepen Fork
Try this CSS for the button:
.comgonder {
width: auto;
height: auto;
margin-bottom: 8px;
vertical-align: bottom;
display: inline-block;
}
And this for the textarea:
.yorumyazalani {
width: auto;
height: auto;
vertical-align: top;
display: inline-block;
}
This will make your 2 form elements inline (instead of floating them) and allow the button to be aligned based on the bottom of the textarea, instead of the top.
Updated Demo: http://codepen.io/anon/pen/CdxDI
.comtextarea
{
position: relative;
}
.comgonder
{
position: absolute;
right: 0px;
bottom: 0px;
}
You can change the right/bottom offsets for better spacing/alignment if you like
This question already has answers here:
Margin-Top not working for span element?
(6 answers)
Closed 8 years ago.
I can't realize why bottom margin doesn't apply to the menu bar. I tried all types of paddings, margins and everything. I have no clue what to add or change so it can apply to it. I was trying to put position relative to #header and absolute to .menu and then all broke. I dont know what I did wrong?
JsFiddle Link
My HTML:
<body>
<div id="wrapper">
<div id="header">
<div id="header_left"></div>
<div id="header_right">
<div class="menu">Naslovna</div>
<div class="menu">PVC stolarija</div>
<div class="menu">ALU stolarija</div>
<div class="menu">Ostali proizvodi</div>
<div class="menu">Reference</div>
<div class="menu">Kontakt</div>
</div>
</div>
<div id="header_line"></div>
<div id="content">
<p> </p>
<p> </p>
</div>
<div id="footer_line"></div>
<div id="footer"></div>
</div>
</body>
</html>
My CSS:
#charset "utf-8";
/* CSS Document */
body{
background:#FFF;
margin:0;
padding:0;
}
#wrapper{
backgorund:#FFF;
width:100%;
height:100%;
}
#header{
background-image:url(struktura/header_bckg.png);
background-repeat:repeat-x;
height:140px;
width:100%;
}
#header_left{
width:40%;
height:100%;
display:inline;
}
#header_left img{
margin: 10px 0 0 20px;
}
#header_right{
width:55%;
display:inline;
}
.menu{
width: 100%;
display: inline;
font-family: "Myriad Pro";
font-size: 20px;
color: #333333;
margin: 0 0 0 40px;
bottom:20px;
}
#header_line{
background-image:url(struktura/header_line.png);
background-repeat:repeat-x;
height:5px;
width:100%;
}
#content{
background: #FFF;
width: 100%;
height: 600px;
}
#footer_line{
background-image:url(struktura/footer_line.png);
background-repeat:repeat-x;
height:5px;
width:100%;
}
#footer{
background-image:url(struktura/footer_bck.png);
background-repeat:repeat-x;
height:250px;
width:100%;
}
Top and bottom padding/margin has no effect on inline elements.
Here is a good article that explain this.
So, the solution for you might looks like:
.menu{
display: inline-block;
font-family: "Myriad Pro";
font-size: 20px;
color: #333333;
margin: 40px;
bottom: 20px;
}
I have the following code but I am unsure how I would adjust it so that I have 2x boxes left and right of the center box with about 20px margin on the monitor side of the boxes and a 10 to 15px margin in between the boxes.
I also cannot seem to get them aligned in a straight line. I am aware I only have one left box at the moment.
jsFiddle:
http://jsfiddle.net/qY6BT/
CSS:
body{
background-repeat:repeat;
background-image:url('../images/bg.jpg');
}
h1{
text-align:center;
color:#8f4988;
}
.bold{
font-weight: bold;
}
a{
font-weight: bold;
color:#8f4988;
}
p{
margin: 5px 25px 0 25px;
text-align:left;
font-family: Arial, "MS Trebuchet", sans-serif;
}
#wrapper{
margin:8% auto;
background-color:#e3e3e3;
border-radius:5px;
width:550px;
min-height:350px;
}
#logo{
width:150px;
margin:0 auto;
padding:10px 0 10px 0;
}
#socialMedia{
float:right;
width:205px;
height:64px;
margin:10px 0 0 0;
}
#socialMedia p {
float:left;
margin:0 auto;
}
#socialMedia .twitter{
width:49px;
height:64px;
background:url('../images/twittericon.png') no-repeat;
}
#socialMedia .facebook{
width:49px;
height:64px;
background:url('../images/facebookicon.png') no-repeat;
}
#socialMedia .linkedin{
width:49px;
height:64px;
background:url('../images/linkedinicon.png') no-repeat;
}
#portfolio{
height:350px;
width:350px;
margin:-452px 0 0 5px;
background-color:#e3e3e3;
border-radius:5px;
}
#portfolio h3{
padding:15px 0 10px 0;
text-align: center;
font-family: Arial, "MS Trebuchet", sans-serif;
}
#portfolio li{
text-align: center;
padding:0 0 15px 0;
}
#portfolio li a{
font-weight: normal;
color:#000;
text-decoration: none;
}
HTML:
<div id="wrapper">
<div id="logo">
<img src="_assets/images/logo.png" alt="Logo">
</div>
<h1>H1</h1>
<div class="paragraphContent">
<p>Content</p>
<br/><br/>
<p>
Regards,
</p>
<p class="bold">Name</p>
</div>
<div id="socialMedia">
</div>
</div>
<div id="portfolio">
<h3>Portfolio</h3>
<ul>
<li>Text</li>
</ul>
</div>
Are you trying to achieve this?
http://jsfiddle.net/qY6BT/1/