The html code for the widget header is as follows.
<div class="widget-header">
<span>caption</span>
more
<img src="/img/widgets/widgets_more.gif" />
</div>
My CSS code is
.widget-header span { float: left; }
.widget-header a, img { float: right; }
If this, the widgets_more right arrow would position to the left of text 'more' like this,
How can I get the right order with modifying the css code?
Thanks.
Instead of placing the arrow next to the link as an image, you should set it as a background image in a class.
Something like this should do it (untested but should work):
CSS:
a.widgets-more{
background-image:url(/img/widgets/widgets_more.gif);
background-position:right;
background-repeat:no-repeat;
padding-right:10px;
}
If you want the link to appear on the left of the link, then use the following:
a.widgets-more{
background-image:url(/img/widgets/widgets_more.gif);
background-position:left;
background-repeat:no-repeat;
padding-left:10px;
}
Then apply the class to your link:
<a class="widgets-more" href="sh/index.php?type=rec">more</a>
Also, the element floated to the right should be stacked above the element floated to the left. So rearrange your HTML to look like this:
<div class="widget-header">
<a class="widgets-more" href="sh/index.php?type=rec">more</a>
<span>caption</span>
</div>
Related
HTML/CSS newbie here. I am making a web page with a text header in the top center of the page and a login button on the upper right. I'm writing in Bootstrap using React (which uses embedded HTML). Here is the code.
Header:
<div className="page-header">
<h1 id="header">Header text</h1>
</div>
Login button:
<div id="login">
/*Displays login button if user is logged in, 'Welcome, user' if not*/
{this.state.loggedIn?
<div className="welcomeText">
<p>Welcome, {this.state.user}</p>
</div> :
<div>
<button id="loginButton" onClick={this.onClick}>Login</button>
</div>
}
</div>
CSS:
#header {
text-align:center;
}
#login {
float:right;
}
.welcomeText {
float:right;
}
The issue is that the login button is pushing the header text to the left and I have no way to move it back. I can temporarily solve this using padding; however, when the login button is replaced by a username, it gets pushed over even further the longer the username is. I'd like to know how I can fix this so that the username will be right-aligned and the header will stay in place. Thanks in advance!
As you write in it seems it may be react or something like javascript jsx format.
for header fix you should have to write code like below. this below given code is just to fix header at top position as per your need.
.page-header{
position:fixed;
top:0;
width:100%;
}
I'd use absolute positioning. I've simplified the example but you should get a good idea.
HTML
<div id="page-header">
<h1 id="header">Header text</h1>
<div id="login">
<div className="welcomeText">
<p>Welcome, Test User</p>
</div>
<div>
<button id="loginButton">Login</button>
</div>
</div>
</div>
CSS
#page-header {
background-color: #f0f0f0;
padding: 1em;
position: relative;
text-align: center;
}
#login {
position: absolute;
right: 1em;
top: 1em;
}
Set position: relative on #page-header so that the child element is positioned relative to it rather than the page. Then set position: absolute on the #login element. If you set its right position it will always sit to the right of the centralised #header text.
As long as you apply to absolute position to the #login element the size of the children won't matter. You'll probably need to tweak this on smaller devices, though, as there will be text overlapping.
https://codepen.io/raptorkraine/pen/QBdbPy
I have two selectors to play with to achieve this design:
I have tried almost everything but I just cant seem to get the text to float right next to the big letters
Here is the code:
Jsbin
html:
<div class="processlinks-section-template">
<div class="processlinks-section-item" data-letter="H">
<div class="processlinks-section-item-title">
Haftonbladet.se
</div>
<div class="processlinks-section-item-title">
Hteabagz.com
</div>
</div>
<div class="processlinks-section-item" data-letter="C">
<div class="processlinks-section-item-title">
Cftonbladet.se
</div>
<div class="processlinks-section-item-title">
Cteabagz.com
</div>
</div>
</div>
CSS:
[data-letter] {
margin:7px;
background:#ef8;
}
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
}
.processlinks-section-template
{
width: 270px;
height: 100%;
}
}
.processlinks-section-item-title
{
margin-top:5px;
}
.processlinks-section-item-title a
{
color:black;
}
.processlinks-section-item-title a:visited
{
color:black;
}
.processlinks-section-item-title a:hover
{
color:#0084c9;
}
Any kind of help is appreciated
Note: I have a javascript that appends stuff so I rather just stay with these two selectors.
If there is one item it seems to ruin the design and I think thats the problem.
Take a look: jsbin.com/UHiZUJU/9/edit
Float both the letter and link to left and add clearfix with it.
Updated jsfiddle
Add float: left to the :before psuedo-element that contains the letter, and clear: left to the section container:
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
display:inline-block;
}
.processlinks-section-item {
clear:left;
}
Updated JSBin
Currently your :before psuedo-element is display: block by default in the absence of another display declaration, which means it automatically fills 100% the width of its parent and functions like it has a line break after it (as compared to inline elements).
Floating a block element means it only fills the width it needs rather than its usual behavior of filling the full width and also removes the implicit presence of a line break. The clear: left on the container just ensures the float is reset for each section.
To make it like in your image change your margin:auto 7px;
Image
I tried this with the following CSS and HTML. It looks fine when the browser is of full width and scrambled when browser is resized. I WANT the elements to be where there and a HORIZONTAL SCROLL has to appear when the BROWSER is RESIZED. Pretty new to web programming. Text-align:center for positioning the center column would not work because, every time a new text is added in the left or right, it gets relocated and also center column element in ROW1(text) and ROW2(Button) do not appear along the same line. That is, text appears a bit right and the button a bit left. Text-align won't work here.
CSS:
#charset "utf-8";
/* CSS Document */
body
{
background-color:#000;
}
.wrapper
{
width:70%;
margin:0 auto;
padding:2px;
background-color:#fff;
}
.second_row
{
padding:2px;
margin-top:10px;
}
.center_container
{
width:30%;
margin:0 auto;
}
.left_container
{
width:33%;
float:left;
}
.right_container
{
width:33%;
float:right;
}
.topelements
{
margin-top:0px;
color:#777;
padding:2px;
}
.topelements a:link
{
color:#29a3cc;
}
.topelements a:active a:hover
{
color:#29a3cc;
}
.logo
{
overflow:hidden;
}
HTML code:
<div class="wrapper">
<span class="topelements float_left" >Mail us: admin#admin.com</span>
<span class="topelements float_right">Left links My xyz</span>
<span class="topelements center_container">Welcome to xyz ! Sign in or Signup.</span>
</div>
<div class="wrapper second_row">
<span class="left_container">Srini</span>
<span class="right_container">Vas</span>
<form class="center_container">
<input type="text" placeholder="Goooooooooooo!" />
<input type="submit" value="Search" />
</form>
</div>
<div class="wrapper">
If you want to align you object in the center, there are a couple of different ways. First of all, there is the text-align:center; which you don't need right now. There is also object-position:center; which basically does the same, but with an object. This way isn't the best, but you could add a certain percentage of padding to either side but that's not recommended. Lastly, there's alignment-adjust:central;. This may not be perfect for your situation but just try out all of these and see if they work. Good luck!
One way that would work is to set your wrapper width to a fixed value (something in 800px for example). As long as this width was longer than all the content you are putting within that wrapper, everything should work as you want. The browser will automatically place a horizontal scroll bar when the window gets smaller than the width of the wrapper.
This is just a small error I found in the CSS and I don't know if this will help too much. The div you added was not referred to as a div, but a class. For example, if you wanted to style a div in CSS, you would do this:
#divname {
CSS for div goes here...
}
On the other hand, if you wanted to add a little style to a class, you would go like this:
.classname {
CSS for class goes here...
}
If you were wondering what the difference for each is, the answer is simple. A class can define multiple objects while the divs are just limited to one object or element.
I'm very new to web development, I have a code like this :
<style type="text/css">
span {
background:red;
background: transparent url(../images/skin/exception.png) 0.4em 100% no-repeat;
}
</style>
<span>
Contents.
</span>
I get the output but the image is been placed over Contents text. I tried with :
background-position: 25px;
But that is making the image to disappear! But what I was looking for is :
Contents . . . . . . . . . . . . . my_image
(note that . in above is space)
Where I'm making the mistake?
Thanks in advance.
Remember that <span> is an inline element, which is not the correct markup to use for items that you wish to display in a block manner. For that, you should use a <div>. That being said, you can use text-indent: 25px; to move your text to the right. Alternatively, you can move the new <div> to the right using left: 25px;. Remember that left will tell it how far from the left border you wish to place it. Then, you can place the text in another <div>:
<style type="text/css">
div {
display:inline-block;
}
div.image {
background:red;
background:transparent url(../images/skin/exception.png) 0.4em 100% no-repeat;
left:25px;
}
</style>
<div class="box">
Contents.
<div class="image"></div>
</div>
If you don't need that your image is a background-image you can apply this:
CSS:
<style>
div#box{
width: 100%;
}
img#image {
float: right;
}
</style>
HTML :
<div id="box">
<span id="content">
Contents.
</span>
<img src="bkg.jpg" alt="Image not available">
</div>
I am also agree with #L0j1k that span is a inline level element. Why you are placing some content inside a span and then applying a background image in that span. Anyways please check the jsfiddle link
DEMO
http://jsfiddle.net/saorabhkr/BvMyg/
Inline:-
<span>
//content
<img src="images/skin/exception.png" style="float:right">
</span>
I am trying to align a full name,picture and the post just like they do in most social networks (linked-in or facebook).But i cant align them the well.Can anybody please try to fill the gaps with necessary css commands?Thank you in advance.
<div>
<span class="picture"> <img src="/assets/images/rails.png"/></span>
user-full-name
<span class="post"></span>
</div>
css
.picture{height:40px;
width:40px;
}
.user-name{
margin-bottom:35px;
}
.post{ }
.inline_table{
display: inline-table;
position: relative;
}
is another property you might want to look at ... any element which has both position relative AND inline table .. will be aligned left to right butted up against each other.
so in this example:
<div id="profile_picture" class="inline_table">
<div id="profile_name" class="inline_table">
<div id="profile_post" class="inline_table">
will all be aligned along the same row
Here's a basic example: http://jsfiddle.net/GU2aM/ to get you started.
span.picture {
display: block;
float: left;
margin-right: 10px;
}