I'm trying to get four different layouts, some text with either another bit of text to the left, to the right, above or below.
I have this code:
<div>
<span class="icon">H</span>
<span class="text">Hello</span>
</div>
Then this CSS
div { background: grey; position: absolute;}
.icon {font-family: calibri; position: absolute;}
//.text {padding-left: 15px;} .icon {left: 0;} // Icon left of text
//.text {padding-right: 15px;} .icon {right: 0;} //Icon right of text
//.text { padding-top: 15px; } .icon {top: 0;} // Icon top of text
//.text { padding-bottom: 15px; } .icon {bottom: 0;} // Icon bottom of text
Then depending on which one of the last four lines I uncomment out should determines the position of icon text in relation to the main text. However, it doesn't seem to work, and I'm only able to really achieve the "Icon left of text" position.
Can anyone explain where I am going wrong.
You have two issues that are effecting the output:
Incorrect comments
CSS only supports /**/ comments and not //, this means that the browser is getting confused and is implementing/ignoring rules.
.text and .icon are inline elements
.text and .icon are spans which makes them inline elements by default. inline elements don't support top and bottom padding so your top and bottom rules will not have the desired effect. This can be rectifed by making .text and .icon block elements instead.
div {
background: grey;
position: absolute;
}
.icon {
font-family: calibri;
position: absolute;
}
span {
display: block;
}
.left {
top: 0;
}
.left .text {
padding-left: 15px;
}
.left .icon {
left: 0;
}
.right {
top: 3em;
}
.right .text {
padding-right: 15px;
}
.right .icon {
right: 0;
}
.top {
top: 6em;
}
.top .text {
padding-top: 15px;
}
.top .icon {
top: 0;
}
.bottom {
top: 9em
}
.bottom .text {
padding-bottom: 15px;
}
.bottom .icon {
bottom: 0;
}
<div class="left">
<span class="icon">H</span>
<span class="text">Hello</span>
</div>
<div class="right">
<span class="icon">H</span>
<span class="text">Hello</span>
</div>
<div class="top">
<span class="icon">H</span>
<span class="text">Hello</span>
</div>
<div class="bottom">
<span class="icon">H</span>
<span class="text">Hello</span>
</div>
Related
Problem is about , it works great on desktop but on mobile fails....
[http://jsfiddle.net/9vv914uL/][1]
i want to make this divider responsive... because it is working very well on higher resolutions , as you can see....
and bonus is to make words inside tag in different colors...
this is css stylesheet:
.divider {
text-align:center;
font-family: 'montserrat';
}
.divider hr {
margin-left:auto;
margin-right:auto;
width:40%;
}
.left {
float:left;
}
.right {
float:right;
}
this is
<div style="padding-top:10px; padding-bottom:20px;"class="divider">
<hr class="left" style="margin-top:12px;"/>BLUE RED<hr class="right" style="margin-top:12px;"/>
</div>
I dont know what to say about this problem, this is just plain text. I must go back to the stars <3
:)
There are other ways that this can be handled that would work better for what you are trying to do. In my example, I am using both a heading element and an empty div. The text in the heading element can be expanded as much as you would like without needing to worry about available space, and the solution is responsive out of the box.
HTML
<h3 class="divider">
<span>Title</span>
</h3>
<div class="divider">
<span></span>
</div>
CSS
.divider {
border-color: #000;
border-style: solid;
border-width: 0 0 1px;
height: 10px;
line-height: 20px;
text-align:center;
overflow: visable;
}
.divider span {
background-color: #FFF;
display: inline-block;
padding: 0 10px;
min-height: 20px;
min-width: 10%;
}
Fiddle: http://jsfiddle.net/6uux0cbn/1/
I'd probably do it like this rather than messing with floats:
.divider {
text-align: center;
}
.divider:after {
content: "";
height: 1px;
background: #000;
display: block;
position: relative;
top: -8px; /* this value depends on the font size */
}
.divider > span {
background: #fff;
padding: 0 10px;
position: relative;
z-index: 1;
}
<div class="divider"><span>BLUE RED</span></div>
HTML:
<div style="padding-top:10px; padding-bottom:20px;"class="divider">
<hr class="left" style="margin-top:12px;"/>
<div class="title">BLUE RED</div>
</div>
CSS:
.divider {
text-align:center;
font-family: 'montserrat';
position:relative;
height: 68px;
}
.div hr {
width:100%;
position: absolute;
z-index: 888;
}
.title {
position: absolute;
left:50%;
width:100px;
margin-left: -50px;
z-index: 9999;
top:15px;
background: white;
}
I don't understand why my links are not the .pushMenu divs (left and right),
html:
<header class="header">
<div class="pushMenu" id="left">
<p>l</p>
</div>
<div class="pushMenu" id="right">
<p>r</p>
</div>
<div>
<span class="myTitle">title</span>
<span class="myBy">(by me)</span>
</div>
css:
header {
text-align: center !important;
line-height: 60px;
font-weight: bold;
position: absolute;
top: 0; left: 0; right: 0;
height: 60px;
color: #ffffff;
}
header div.pushMenu {
position: absolute;
width: 30px;
height: 30px;
top: 10px;
border: 1px solid white;
}
header div.pushMenu#left {left: 10px;}
header div.pushMenu#right {right: 10px;}
header div.pushMenu a {
width: 30px;
height: 30px;
display: block;
}
see in action: http://jsfiddle.net/GDQdU/4/
what's wrong ?
This is happening because the line-height specified for the header is being rendered by the child elements also. Check below to correct this.
Remove the p tag from the a tag and the html will be like this r
and add line-height:30px to the a tag.
header div.pushMenu a{
line-height:30px;
}
DEMO
OR
If you want the p tag to be there then make the following css changes
header div.pushMenu p{
margin:0;
line-height:30px;
}
DEMO
I want a div to go under another div. In this example I want the #under to go under #box. I've played a bit around with z-index, but I can't get it to work, I suppose it has to do with the way my markup is arranged.
My question is - is it possible to make #under go under #box without changing the markup?
You can check out my example here: http://jsfiddle.net/timkl/hrsHY/
This is my HTML:
<div id="main-content">
<div id="box">
<h2>box</h2>
</div><!-- /box -->
</div><!-- /main-content -->
<div id="under">
<h2>under</h2>
</div><!-- /under-->
<div id="footer">
<h2>footer</h2>
</div><!-- /footer -->
This is my CSS:
#container {
font-family: Helvetica;
color: #ccc;
font-weight: bold;
}
#main-content, #box, #footer, #under {
padding: 16px;
}
#box {
background: #F3F3F1;
height: 200px;
}
#under {
height: 40px;
background: orange;
margin-top: -100px;
z-index: -10;
opacity: .7;
color: brown;
}
#footer {
background: #F3F3F1;
}
Z-index only works with absolute positioning.
#container {
font-family: Helvetica;
color: #ccc;
font-weight: bold;
position: absolute;
}
#under {
height: 40px;
background: orange;
margin-top: -100px;
z-index: -10;
opacity: .7;
color: brown;
position: absolute;
}
When you desire them to be positioned relative (as in postion: relative;) You can position them absolute within a surrounding div which you position relative to acquire relative positioning of the two div's combined.
Your z-indexed elements need to have a position for the z-index to apply. Try adding position: relative to each div with a z-index.
#under {
height: 40px;
background: orange;
margin-top: -100px;
z-index: -10;
opacity: .7;
color: brown;
position: relative;
}
I am trying to align a element center in a div where i am not giving any width to parent div becouse it will spread according to screen size , there is total 3 element in div :
Buttons
Heading
Logo
buttons will always align left and logo will align right whenever screen size will be change and the heading will always align center like this
My code is here
http://jsfiddle.net/7AE7J/1/
please let me know where i am going wrong and what css i should apply for getting the element (heading) align center always.
HTML
<div id="header">
<div id="buttons">
link 1
link 2
</div>
<h1>Heading of the page</h1>
<div id="logo">
<a href="#">
<img src="http://lorempixum.com/60/60" width="178" height="31" alt="logo" />
</a>
</div>
</div>
CSS
#header {
background:green;
height:44px;
width:100% }
#buttons {
float: left;
margin-top: 7px;
}
#buttons a {
display: block;
font-size: 13px;
font-weight: bold;
height: 30px;
text-decoration: none;
color:blue;
float:left}
#buttons a.button_back {
margin-left: 8px;
padding-left:10px;
padding-top: 8px;
padding-right:15px }
#header h1 {
color: #EEEEEE;
font-size: 21px;
padding-top: 9px ;
margin:0 auto}
#logo {
float: right;
padding-top: 9px;
}
You can use inline-block for this:
#header {
text-align: center;
}
#header h1 {
display: inline-block;
}
How about this:
#header {
position: relative;
text-align: center;
}
#header h1 {
display: inline;
}
#header #buttons {
position: absolute;
left: 0;
top: 0;
}
#header #logo {
position: absolute;
right: 0;
top: 0;
}
display: inline is actually a bit more cross-browser than display: inline-block;
Try
.centered {
margin: 0 auto;
}
I have created a button with background image parts on the left, center and right. I would like to position it at the center of the page, but I can't do it.
I have simplified the example with simple color backgrounds instead of images.
HTML:
<a id="button" href="#">
<div id="b-left"></div>
<div id="b-center">Content</div>
<div id="b-right"></div>
</a>
CSS:
#button {
height: 40px;
margin: 0 auto;
}
#b-left, #b-right, #b-center {
display: inline;
float: left;
height: inherit;
}
#b-left {
background-color: blue;
width: 30px;
}
#b-right {
background-color: green;
width: 30px;
}
#b-center {
background-color: yellow;
}
Here's the demo:
http://jsfiddle.net/yh6sS/4/
Thanks a lot.
Replace all divs inside your link with spans. This will make the code to be valid.
"margin: 0 auto;" property only works, when there's a fixed width, for example 100px. So it can be deleted in your case.
Use the next technique to make all buttons: http://jsfiddle.net/2GJu2/
<div class="outer">
<a href="#">
<span class="b-left"></span>
<span class="b-center">Content</span>
<span class="b-right"></span>
</a>
</div>
.outer { text-align: center; }
a {
display: inline-block; margin: 0 10px; line-height: 30px;
position: relative; }
a span { display: inline-block; }
.b-center { background: yellow; }
.b-left,
.b-right { position: absolute; top: 0; width: 10px; height: 30px; }
.b-left { left: -10px; background: red; }
.b-right { right: -10px; background: green; }
Add text-align: center to a parent element, and add display: inline-block to #button.
See: http://jsfiddle.net/thirtydot/yh6sS/7/