I'm writing a website and I have some problems with margin.
I have a following HTML code:
<div id="mainBody">
<div class="subTitle" id="backgroundTitle" >
<h3>
Background
</h3>
</div>
</div>
my CSS code is the following:
#mainBody{
height:200px;
width: 500px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
.subTitle {
margin-top=0px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
h3 {
margin-top:100px;
margin-bottom:0px;
}
the result I'm expecting is that the "mainBody" div has 0px top margin while the h3 inside has 100px top margin. However, what I got instead is that the "mainBody" div shifts down with h3 together, meaning that they both have a top-margin of 100px with respect to the top of the page.
Does anyone know why this happens?
Thanks a lot!
Add display:inline-block; to h3 element class.
h3 {
margin-top:100px;
margin-bottom:0px;
display:inline-block;
}
Js Fiddle Demo
I don't see any problem! See the Fiddle. I added borders to the elements to clearly see the element position.
Note:I have tested in FF 26.0, Chrome 32.0 on Ubuntu 12.04 LTS.
This is how it looks:
I added borders to see the element boundaries:
#mainBody{
...
border:1px solid red;
}
.subTitle {
...
border:1px solid green;
}
h3 {
...
border:1px solid blue;
}
During the workflow, You will need to remove collapsing, for that you probably need this http://nicolasgallagher.com/micro-clearfix-hack/
I'm not sure you really need the <h3> - you could just style the text in the subtitle.
CSS
#mainBody{
height:200px;
width: 500px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
}
.subTitle {
margin-top=0px;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 70px;
border: 1px solid red;
font-size: 26px;
font-weight: bold;
text-align: center;
border-top: 6px solid red;
}
HTML
<div id="mainBody">
<div class="subTitle" id="backgroundTitle" >
Background
</div>
</div>
FIDDLE
Related
I'm a real beginner in CSS...
Do you know how could I do this sort of alignment ? I try a lot a things but I don't get what I need... So I just draw it if you have any code idea...
<div id="sys-wrap">
<img src="image.png">
<p>Long message texte</p>
</div>
#sys-wrap {}
#sys-wrap p {
border: 1px solid #ffffff;
float:left;
margin: 15px;
width: 691px;
}
#sys-wrap img {
border: 1px solid #ffffff;
float: left;
margin: 15px 15px 15px 100px;
vertical-align: top;
}
Thanks!
(source: imgsafe.org)
I made a fiddle. Does this work for you?
https://jsfiddle.net/hnf8jou4/3/
HTML:
<div>
<div id="left">
<img src="http://lorempixel.com/400/200" id="inner">
</div>
<div id="right"></div>
</div>
CSS:
#left {
width:25%;
height:200px;
float: left;
background-color:#f00;
}
#right {
width:75%;
height:200px;
background-color:#0f0;
}
#inner {
display:block;
width:100px;
margin-left: auto;
margin-right: 0;
background-color: #00f;
}
It is really unclear what exactly you are trying to achieve. But since i saw the drawing u made i suppose this is what u need. U need to have a div for wrap and add float: right to the right div. The other things are just playing with height in % and paddings.
https://jsfiddle.net/hnf8jou4/4/
For #sys-wrap img inside of your CSS file, add a float: right; and a margin of 15px
Your new CSS should look similar to this:
#sys-wrap img {
width: 50px;
height: 50px;
border: 1px solid #ffffff;
float: right;
margin: 15px;
}
Also, give it's parent container a set width and height:
#sys-wrap {
width: 150px;
height: 150px;
background: red; // just to make it pretty
}
And just as a little fyi, vertical-align does not work, unless the specified element has a display of table-cell. :-)
Here's a fiddle: https://jsfiddle.net/d2ae3ub3/
I have an image I would like to display as a circle with (border-radius:50%) and on the same line I would like to have some text with a set width and background. I would not like to hard code any values. What is the best way of accomplishing this?
Here is a picture
fiddle
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
<p class="headingText">Hello</p>
</div>
.i {
width: 80px;
height: 80px;
border-radius: 50%;
}
.headingText {
color: white;
background: black;
display: inline-block;
width: 350px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
You could try something like this:
.header
{
padding-top:26px;
padding-left:40px;
position:relative;
}
.i
{
position:absolute;
width:80px;
height:80px;
border-radius:50%;
top:0;
left:0;
}
.headingText
{
color:white;
background:black;
display:inline-block;
width:350px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
}
Using pseudo-classes and absolute positioning you can get the effect you want.
The below answer uses your existing HTML so you don't have to change any of that and just changes your CSS.
You can add some more padding to the text to make it a bit more spaced out if required and the background should sort itself out.
.header {
position: relative;
display: inline-block;
margin: 30px;
overflow: visible;
}
.header img.i {
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
bottom: 16px;
left: -40px;
z-index: 1;
overflow: hidden;
border: 3px solid black;
}
.header p.headingText {
padding: 16px 32px 16px 80px;
color: black;
border: 3px solid black;
}
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg" />
<p class="headingText">Hello</p>
</div>
Just add position: absolute in i class then control the margin of headingtext:
HTML:
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
<p class="headingText">Hello</p>
</div>
CSS:
.i
{
width:80px;
height:80px;
border-radius:50%;
position: absolute;
}
.headingText
{
color:white;
background:black;
display:inline-block;
width:350px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
margin: 40px 0 0 37px;
}
FIDDLE
use a block element instead with a negative margin to the top (half circle size - half of the padding) and a margin to the left (half circle size). Just change:
.headingText {
/*display: inline-block;*/
display: block;
margin-top: -45px;
margin-left: 40px;
}
Example fiddle: https://jsfiddle.net/c67dchhv/
just simple make .header class position:relative; if you want to define any height and width you can, .i class position:absolute; give margin on .headingtext class https://jsfiddle.net/hamzanisar/aphzeyyt/ maybe it will helpful for you.
I am trying to get a bottom border to work but it is not working as I want. When I create my border there is a small line below the border that is still the background. How can i fix this?
HTML:
<div class="bottomborder"></div>
CSS:
.bottomborder {
background-color: black;
width: auto;
height: auto;
height: 20px;
margin-left: -20px;
margin-right: -20px;
}
What Exactly you want?
Your information and code is not sufficient still Please see this Demo
.bottomborder
{
background-color: black;
width: auto;
height: auto;
height: 20px;
margin-left: -20px;
margin-right: -20px;
border-bottom:2px solid red;
}
<div class="bottomborder"></div>
Note: Your are not closing <div> properly
You could do it easily by inspecting element. Also the way Rawat suggested.
Have a look here:-
<div class="bottomborder" id="div1"></div>
CSS:-
.bottomborder {
background-color: black;
width: auto;
height: auto;
height: 20px;
margin-left: -30px;
margin-right: -30px;
border-bottom: 2px solid green;
}
See the Working demo here
Hope it helps
Just use border instead of background-color like this:
HTML:
<div class="bottomborder"></div>
CSS:
.bottomborder {
background-color: none;
width: auto;
margin-left: -20px;
margin-right: -20px;
border-bottom: 20px solid #000;
}
P.s. you specified two height properties of 20px as well as auto on the div.
I am developing a website.
The site is in a very early state, and my problem is the header on the top of the page. I would like to have the Mainline "PersIntra" stand beside the little box with the "log out button" and not over it. I have tried to make this work with my css. I have tried nesting divs.
The header is getting too wide vertical. I want to make the headline text size bigger without the header itself needing to grow wider because of the text is not beside the logout box but over it.
Here is some links to tell you what I mean. (It is complicated to describe in text.)
Screenshot of header
The website is in Danish, but that shouldn't stop you from seeing my problem (screenshot..).
Here is the html:
<div id="header">
<h2> PersIntra </h2>
<div id="border">
Velkommen <?php echo $_SESSION['enummer']; ?> <br>
Du har 1 ny besked <br>
Log Ud <br>
</div>
</div>
</div>
Here is the css:
#header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
}
#border {
width: 150px;
padding: 5px;
border: 5px solid navy;
margin: 25px;
border-style: solid;
border-color: #eeeeee;
}
Try edit your css.
#header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
}
#header h2 {
margin-top:50px;
float:right;
margin-right:300px;
}
#border {
width: 150px;
padding: 5px;
border: 5px solid navy;
margin: 25px;
border-style: solid;
border-color: #eeeeee;
}
There are lots of ways to do that kind of thing. One is to float the header to the left and display the header and login box inline, like so:
#header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
}
h2 {
float: left;
display: inline;
width: 80%;
font-size: 2em;
}
#border {
display: inline;
width: 20%;
width: 150px;
padding: 5px;
border: 5px solid navy;
margin: 25px;
border-style: solid;
border-color: #eeeeee;
}
If you're trying to get something up and running quickly, you might consider using a css framework like bootstrap (http://getbootstrap.com/). If you're trying to learn css, I'd recommend pulling down the code for a framework like that and/or looking at the site for it with dev tools open, and explore what they're doing.
Hope that helps.
If you want to have text bigger or move around without affecting other content you could similar to this:
#header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
position: relative;
}
#header h2 {
position: absolute;
top: 0;
left: 25px;
}
I would just add this to #border:
#border {
position: absolute;
bottom: 20px
left: 20px;
}
and add position: relative to the surrounding element:
#header {
position: relative;
}
Tha way #border will not take any space in the surrounding element and you can center-align you header without problems.
I saw many posts and question asked on this issue but none was useful for me so i ask another one. I have a div that has some text in it and then an img, i have several of these divs in a row and when i open the page on different resolutions the texts sometimes expand to two rows instead of one, so the pictures are not on the same level. because of that i want to make the OMG stick to the bottom of the div so when the text expands they will still be on same level.
any suggestions?
code:
<div id="put_entry" class="main_banner">
<h1>
<center>
published
</center>
</h1>
<center>i published those items<br /><center>
<center>
<img src="search_torent.png" id="index_banner" onclick="document.location='published.php';return false;"/>
</center>
</div>
css:
.main_banner{
margin-left: 15px;
direction: rtl;
border-radius: 10px;
background: #D1E3F3;
border: 1px solid #707070;
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
min-height: 273px;
width: 270px;
float: left;
}
.main_banner img{
cursor: pointer;
}
Fiddle: http://jsfiddle.net/EFPt7/
.main_banner{
margin-left: 15px;
direction: rtl;
border-radius: 10px;
background: #D1E3F3;
border: 1px solid #707070;
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
min-height: 273px;
width: 270px;
float: left;
position: relative;
}
.main_banner img{
cursor: pointer;
position: absolute;
bottom: 0;
}
try position:absolute and then set the width, height and margin.
fiddle: http://jsfiddle.net/EFPt7/15/
I suggest you should add new div for published item and then new row for img. Adding some code for css of new div like this for fixed min height of you publish and then new row for image. Anyway you can used align in div class main_banner.
---html---
<div id="put_entry" class="main_banner" align="center">
<div>
<h1>published</h1>
i published those items
<br/>
</div>
<img src="https://www.google.co.th/images/srpr/logo4w.png"
id="index_banner"
onclick="document.location='published.php';return false;"
width="270px"/>
</div>
--- css ---
.main_banner{
margin-left:15px;
direction:rtl;
border-radius:10px;
background:#D1E3F3;
border:1px solid #707070;
margin-top:10px;
margin-bottom:10px;
padding:10px;
width:270px;
float:left;
}
.main_banner img{
cursor:pointer;
}
.main_banner div{
min-height:273px;
}