I am stuck trying to figure it out how exactly inline element and floated element behave when are next to each other. I have following code in which inline element comes before the floated one and the second situation when inline element comes after the floated one and in both situation.
html code is the same in both examples so I am gonna put it just here:
<body>
<p class="first">first paragraph</p>
<p class="second">second pargraph</p>
<p class="clearBoth"></p>
</body>
So here is first example in which is the inline element before the floated one, along with following css:
html{
background:white;
}
p.clearBoth{
clear:both;
}
body{
width:400px;
margin:0 auto;
background:red;
}
p.first{
display:inline;
background:yellow;
color:black;
}
p.second{
float:left;
background:black;
color:white;
}
and here is the link what this code does
Here is second example where the floated element is first element, along with the following css code:
html{
background:white;
}
p.clearBoth{
clear:both;
}
body{
width:400px;
margin:0 auto;
background:red;
}
p.first{
float:left;
background:yellow;
color:black;
}
p.second{
display:inline;
background:black;
color:white;
}
And here is link what it does
In both cases I've noticed that the float element will be first to the left no matter which one is first in html document, but I find this align very strangeto happen since I would normally expect both to be in same line.
That's because web browsers apply a margin property to the top and bottom of the <p> element.
For instance, Google chrome applies the following:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
You need to reset the default user agent style sheet by using CSS Reset
As a tiny fix, just for the demo:
* { margin: 0; padding: 0; }
/* Or just:
p { margin: 0; }
*/
UPDATED DEMO #1
UPDATED DEMO #2
Related
In Bootstrap 3, inline forms (http://getbootstrap.com/css/#forms-inline) -
I cannot seem to find the reason for the spacing between .form-group classes.
fiddle: https://jsfiddle.net/6ek1oa3s/1/
The reason I'm asking is because on my dev environment I have this spacing, but after I build with gulp, in the deployment version - the spacing is gone.
That space is generated by the property inline-block is compared to treating the elements as text, if you have on your markup each element on a new line this generates a space and each element is a "new word".
Check the Snippet
section {
background:white;
margin:20px auto;
}
div {
display:inline-block;
height:50px;
width:30%;
margin:20px auto;
background:red;
border:thin solid orange
}
<section>
<div></div>
<div></div>
<div></div>
</section>
I guess when you build with gulp you minify your html making your html with no spaces between items and then has no space making all elements "one word".
Check the Snippet
section {
background:white;
margin:20px auto;
}
div {
display:inline-block;
height:50px;
width:30%;
margin:20px auto;
background:red;
border:thin solid orange
}
<section>
<div></div><div></div><div></div>
</section>
To solve this you can add on your style a margin-right value like:
.form-inline .form-group {
margin-right:4px;
}
Add margin-right or left to your form-group inside your form
You can see on the developer tools where the spacing comes from.
.form-group {
margin-bottom: 15px;
}
I'm trying to do something like this using css:
I need it to:
Only have background (with padding) around the text, and
Have a solid line occupying 100% page width thereafter
For example, I'd like to be able to do the following:
<div style="my-custom-style">T E X T</div>
Would appreciate some input
You can use the :after pseudo element to minimise markup.
The point is to position the pseudo element absolutly and keep the div's position to default static position. This way, setting the pseudo element to width:100%; will make it span the whole width of the divs parent (you will although need to set that parent to an other position than the default static position. In the following demo it is the body element) :
DEMO
CSS :
body{
position:relative;
}
div{
background-color:#FF7F27;
display:inline-block;
}
div:after{
position:absolute;
display:block;
content:'';
width:100%;
height:5px;
background-color:inherit;
}
EDIT:
As stated in comments by #Paulie_D, you should be using a text node to display text like <span> <p> <li> <h1> <h2> ... Using this technique, <span> or a title tag should suit you depending on the content you need to display.
As Stated by #KheemaPandey using a manual space between the letters isn't the best considering HTML semantics , maintainability of your code and the "concept" of CSS styling.
You should be using letters-spacing to space your letters.
Considering both points, your code could look like this :
DEMO
HTML :
<span>TEXT</span>
CSS :
body{
position:relative;
}
span{
background-color:#FF7F27;
display:inline-block;
letter-spacing:0.5em;
}
span:after{
position:absolute;
display:block;
content:'';
width:100%;
height:5px;
background-color:inherit;
}
Try following code
DEMO
<div style="my-custom-style"><span>T E X T</span></div>
div{
border-bottom: 3px solid orange;
}
span{
display: inline-block;
padding: 3px 5px;
background: orange
}
The problem: (http://i.imgur.com/mU5HBoa.png)
As you can see in the image above the mainContent floats just below the actual top op the browser view port, i cant make it stick to the top and stay centered at the same time.
Also a quick side question, how do i get the #mainContent, .rightContentBorder and .leftContentBorder to get their height from the #contentBox ID
body {
background-image:url(img/CampusDjursland_Tourneyhjemmeside_grafik/RESTEN/BG_pattern.png);
background-repeat:repeat;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
p {
text-align:left;
}
li {
text-align:left;
}
#contentBox {
margin: 1px auto 1px auto;
width:786px;
height:auto;
min-height:700px;
max-height:none;
}
.leftContentBorder {
width:27px;
height:700px;
float:left;
background-image:url(img/CampusDjursland_Tourneyhjemmeside_grafik/RESTEN/Leftside_orangebar1px.png);
background-repeat:repeat-y;
}
.rightContentBorder {
width:27px;
height:700px;
float:right;
background-image:url(img/CampusDjursland_Tourneyhjemmeside_grafik/RESTEN/Rightside_orangebar1px.png);
background-repeat:repeat-y;
}
#mainContent {
margin: 0 auto 0 auto;
width:732px;
height:700px;
background-color:#CCC;
}
The HTML
<body>
<div id="contentBox">
<div class="leftContentBorder"></div>
<div class="rightContentBorder"></div>
<div id="mainContent">
test
</div>
</div>
</body>
do a basic css reset like this:
* {
margin:0;
padding:0;
}
This removes default paddings margins on all elements.
Have you tried setting the body and html margin/padding in css?
html, body {
padding:0;
margin:0; }
As for getting the divs to take the height of their parent div. You can set divs to have height:100%; but that means nothing if the parent div doesn't have a set height. Your parent div has height:auto so it won't work.
body {
margin:0;
padding:0;
}
I wouldn't really touch the parent html. If the body rule fails, best guess are different values set along the way. If all else fails you could use positioning and make it absolute. Prepare for headaches though.
This css has been somewhat difficult to figure out...Basically what I want is what is in this picture, but with dynamically changing content.
so I set up my html like this, basically all the elements are piled into the wrapper, the pictures and titles will be dynamically rotating and will be different widths and heights:
<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>
Everything I have tried Hasn't worked out. how should I go about this?
The closest I have got is this, but the title field can change heights and that makes this method not work, since, I have to position the image relatively and its relative position changes with the title element growing and shrinking:
#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}
If you mean the Title in the center use this way:
#title {
margin: 0 auto;
width: /* your width */
}
the position should be relative at the wrapper.
JsFiddle UP
I just reorganized the body structure, adding one more div and floating everything.
Then inside the central section I added title and image that you can style to be centered to the relative div.
If you provided some example code we would better be able to assist you. In the meantime, the following code should take care of what you're looking for:
HTML
<div id="wrapper">
<div id="title"><h2>Article Headline</h2></div>
<div id="image"><img></div>
<div id="leftbutton"><img></div>
<div id="rightbutton"><img></div>
</div>
CSS
#wrapper {
background:#6cb6d9;
display:inline-block;
position:relative;}
#title {
position:absolute;
top:0;
width:100%;
text-align:center;}
#title h2 {
background:green;
color:white;
padding:10px 15px 10px 15px;
display:inline-block;
max-width:200px}
#image {}
#image img {
min-width:200px;
height:300px;
width:500px; }
#leftbutton {
position:absolute;
left:0;
top:0;
height:100%;
width:75px;
background:black;}
#rightbutton {
position:absolute;
right:0;
top:0;
height:100%;
width:75px;
background:black;}
Though instead of hardcoding the img size, just remove those lines of CSS to have the div automatically adjust to the default size of the img.
http://jsfiddle.net/b7c7c/
None of these solutions worked correctly, ultimately the way to get it to work is with this trick: How to center absolutely positioned element in div?
Then you just position all elements absolutely within the wrapper and the sub elements relatively as seen in the post
I dont get it. I wrote the code to have the footer always at the bottom. lets say sticky-footer. Here is my code.
body {
background-color: #edecd8;
margin:0;
padding:0;
height:100%;
}
#container {min-height:100%; position:relative;}
#body {
padding-bottom:20px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:20px;/* Height of the footer */
background: #FC0;}
</style>
<div id="footer"> contact | the athens store | Mitropoleos 37 </div>
With these code it didnt work well, actually the footer was not at the bottom but a bit higher. And then I added in the very beginning an html tag like this and it worked! Why was it wrong before?
html,body {
background-color: #edecd8;
margin:0;
padding:0;
height:100%;
}
browsers have a default page margin and padding, thats why you got a little space under you bar, and that is why developers use a css reset to ower write these.
Or by useing a simple code
if you replace this
html,body {
background-color: #edecd8;
margin:0;
padding:0;
height:100%;
}
to this
* {
margin:0;
padding:0;
}
body {
background-color: #edecd8;
height:100%;
}
it will work and owewrite all the default browser paddings and margins
Browsers have a standard (and often differing) css for elements. The html element may have had a margin or padding applied, keeping your footer off the bottom a little bit.
Or the html element needed to be given the 100% height to get it to expand the full height of the window.
This is why CSS resets are used, to get to a baseline standard between the browsers.