I want to move my text to the left-hand side from the centre. text-align or float properties don't work.
I know there is a previous question like this but none of the solutions worked. Can anyone see if I am doing anything wrong here? I am using Brackets and here is my code:
.logo {
color: #0000000
float: left;
padding-left: 25px;
font-size: 16px;
font-weight: bold;
}
.logo > a {
text-decoration: none;
color: #000000;
}
Here is the .html
<ul class="gws">
<div class="logo">
LOGO
</div>
Here is how the website currently looks
http://prntscr.com/k14jf5
Here is the full coding
http://prntscr.com/k1b1zl and http://prntscr.com/k1b2gn
try this: To move Left side use
{
float:right;
padding-right:50px;
}
To move Right side
{
float:left;
padding-left:50px;
}
Hex colors contain 6 digits, yours has 7, also do not forget to place a semicolon (;) behind the color and the float: left; See if that works.
There are 2 things that I would suggest:
The float is missing the ending semicolon. It should be like this:
float: left;
What's the width of the unordered list class? Make sure it's sufficient to let your logo to align to the left. If it has a fixed width then make it large.
If you could provide more information then I would be able to help better!
To get the desired result you should give anchor tag to.
.logo {
color: #0000000;
padding-left: 25px;
font-size: 16px;
font-weight: bold;
}
.logo > a {
text-decoration: none;
color: #000000;
text-align: left;
}
Related
I am using bulma for a css framework and i ran into an interesting learning experience. I am trying to align the nav buttons to the bottom of the red field. However, as you can see they have shifted out of alignment. I have tried to apply an inline css style to them, however that does not correct the issue.
Can anyone point me in the right directory, it would be greatly appreciated.
https://codepen.io/robot43298/pen/WNGENNL
.navbar-end {
.button{
color: white;
font-size: 18px;
border: 2px dashed white;
background-color: red;
}
.dropdown-trigger{
margin-top: 15%;
display: inline;
vertical-align: bottom;
}
& li{
font-size: 16px;
}
}
Try this,
Remove this margin
.navbar-end .dropdown-trigger {
margin-top: 15%; /* Remove this margin */
display: inline;
vertical-align: bottom;
}
and add some padding here as per your need
.dropdown{
padding-top: 20px;
}
This should do the trick;
I tried looking your code in console, I added one line and removed one.
and it seems to work as per you expectation.
Do let me know if this what you wanted.
I have a design below which I have to replicate in HTML/CSS.
The above design is basically a text with arrow button at the left.
I have replicated the text in fiddle (which is extremely simple). I am wondering how can I put the arrow left to the text ?
I tried following this tutorial from w3schools but somehow I wasn't able to replicate the same arrow.
The CSS code for the text (which I have used in the fiddle):
.share {
padding-left: 6%;
padding-top: 5%;
font-family: Roboto-Regular;
font-size: 16px;
color: #4676F2;
}
Please try the following code. The unicode arrow is not precisely the way you mocked-up but close. If you need the arrow to be precise, you can switch the .share::before rule to use a background image.
.share {
padding-left: 6%;
padding-top: 5%;
font-family: Roboto-Regular;
font-size: 16px;
color: #4676F2;
}
.share::before {
content: "\27A6";
color:#000;
padding-right:8px;
}
<div class="share">Share This Article</div>
Based on the other answer, this one lays the font entity out right.
As discussed in your comments above, the arrow is not the same exact one you are looking for. You need to cut it out and create an image to add to the image tag, or find the source of the image in text form.
.share {
padding-left: 6%;
padding-top: 5%;
font-family: Roboto-Regular;
font-size: 16px;
color: #4676F2;
}
.share p::before {
content: "\27A6";
color:#000;
padding-right:8px;
font-size: 25px;
vertical-align: middle;
}
.share p {
vertical-align: middle;
}
<div class="share">
<p>Share This Article</p>
</div>
<div class="share">
<p><img src=""/>Share This Article</p>
</div>
I have two labels in the footer of my mobile website. Sometimes the title of the selected product is large and it comes very close to the price as shown below:
THE HTML:
<div style="margin:5px;">
<span class="stickyProductctName">This is a really really really rea</span>
<div class="stickyPrice">$1142.00</div>
</div>
The styles for both the elements are shown below:
#stickyFooter .stickyProductctName {
text-transform: uppercase;
width: 85%;
}
#stickyFooter .stickyPrice {
font-weight: bold;
width: 15%;
float: right;
margin-right: 20px;
}
How can I improve it? Wrap it!
This behavior is because you have a total width of the elements of 100% and a margin-right of 20px. It is overflowing.
put the margin-right on the .stickyProductctName;
add display:inline-block; to .stickyPrice
How bout stack them on top of each other for mobile view?
CSS:
#stickyFooter .stickyProductctName {
text-transform: uppercase;
display: block;
text-align: center;
}
#stickyFooter .stickyPrice {
font-weight: bold;
text-align: center;
}
Here is a JSFiddle.
http://jsfiddle.net/shannabarnard/Ls75o3cr/
Firstly, you need to put both elements in a span, it doesn't work well semantically to have one as a span and the other as a div contained within another div.
Change your widths, and give the price both a left and right padding.
HTML:
<div style="margin:5px;">
<span class="stickyProductctName">This is a really re ally reall yreally really re ally really re reall y really really rereally really really re rea</span>
<span class="stickyPrice">$1142.00</span>
</div>
CSS:
.stickyProductctName {
text-transform: uppercase;
float: left;
display:inline;
width:85%;
}
.stickyPrice {
font-weight: bold;
width: 10%;
float: right;
margin: 0 10px;
}
The mistake is that you used margin instead of padding. As long as border-box is being used (It is standard on frameworks), padding eats the inside of containers instead of adding it. All you need to change is:
#stickyFooter .stickyPrice {
font-weight: bold;
width: 15%;
float: right;
padding-right: 20px;
}
In case you don't have border-box on the site, here is a good article about it. Frameworks usually use a rule like this:
* {
box-sizing: border-box;
}
My inaugural post here, hope you all can help. :)
I have been working on creating a pure XHTML strict website no images but the products however I'm in a small jam. I can't seem to find a way to make the a button that appears as such as shown here:
Where it has a hover state, rectangle and currently is
<div class="topprodcartadd">Add to Cart</div>
I made a little CSS class that looks like this:
.topprodcartadd {
width: 190px;
height: 50px;
background-color: #000;
margin: 10px 0px;
padding:0px 10px 10px 0px;
float: left;
text-align: right;
vertical-align: middle;
}
.topprodcartadd:hover {
background-color: #00a7e6;
}
.topprodcartadd a {
text-decoration: none;
color: #00a7e6;
}
.topprodcartadd a:hover {
color: #fff;
}
I want to make it link somehow but in XHTML Strict it gives me validation errors when I rock the code like this:
<div class="topprodcartadd">Add to Cart</div>
So does anyone have any other ideas on what I can do to make the button appear that way?
Thanks!
Change your CSS for the anchor to:
.topprodcartadd a {
text-decoration: none;
color: #00a7e6;
display:block;
width: 190px;
height: 50px;
}
jsFiddle example
I added display:block and a width and height so that the link takes up all the room in the div.
So, if I get your problem right:
1) you can set display: block for a so it fill the parent element.
2) are you sure that you need XHTML Strict?
If you simple need mouse cursor to change into a hand, just add cursor:pointer to your DIV's style, you don't have to use an anchor.
I have a newsfeed which is obviously organized by an . When the user hovers over each of the items, the background is highlighted. I'd also like to have a small "x" in the top right hand corner of each item, only shown when hovered. This "x" would be a delete button to remove that post.
Right now I just have some basic html stating: <div class="hide-button">x</div>
I know that I don't want the "x" displayed in the html, but rather have it in the CSS. So I have the <li> css below for hovering, as well as the CSS for the hide button. I'd like to know the best method to integrate the hide button div into the <li>
.hide-button {
float: right;
margin-top: -13px;
font-size: 11px;
font-family: helvetica;
color: gray;
}
.hide-button a{
text-decoration: none;
color:gray;
}
.hide-button a:hover {
text-decoration: underline;
color:gray;
}
and the list:
.newsfeedlist li {
background: white;
border-bottom: 1px solid #E4E4E4;
padding: 12px 0px 12px 0px;
overflow: hidden;
}
.newsfeedlist li:hover {
background-color: #F3F3F3;
}
Thank you so much!!!!!
Presuming your delete buttons are inside another container you could do something like
.hide-button {
float: right;
margin-top: -13px;
font-size: 11px;
font-family: helvetica;
color: tray;
display: none;
}
... the other bits of CSS ...
.newsfeedlist li:hover .hide-button {
display: block;
}
Modifying the close button to be hidden by default and then when hovering on a list item you set the display back again on the close button.
Hope this makes sense
Tim
You might really be in need of this:
Demo at jsFiddle.net
I modified an example and tushed it up for multiple content areas or images.
But hide-button element in the li and do
.newsfeedlist li:hover .hide-button {
display: inline-block;
}
and add display: none; to .hide-button
Otherwise, there's always javascript.