I need to do school work. I need to link the button and put it to the right side of my page but every time i put the link or button to the right it does not work.
What html code should I put and in what order to have button on the right and link to it. On the photo is what I have right now.
This is a simple thing - as noted above - you need to float it to the right.... BUT if you are floating something - this will have consequences on the next elements - so you will also need to clear the float.
Another thing to think of - is that a p element is a block level element - so will take up the entire row - whereas an a element is an inline level element - meaning it won't. This is why doing it this way causes the button to be on the previous line up from the p - which is on the next row. You can alter that - but it needs to be planned out a bit.
Just so you understand the structure of the HTML - this may also allow you to have a different structure to the code. Also - I only put in the text that showed up in the image so it is not a full row.
Also note that I have applied the CSS to the element in the CSS portion as opposed to inline styling - this is better code structure as it keeps the HTML and CSS separate. I also whacked in some styling (from https://www.thoughtco.com/styling-links-with-css-3466838) to give link a button like look.
.button{
float:right;
border-style: solid;
border-width : 1px 4px 4px 1px;
text-decoration : none;
padding : 4px;
color:black;
border-color : #69f #00f #00f #69f;
}
.button:hover {
border-color: black;
color: #00f ;
}
p{
clear:both
}
<a class="button" href="2.html">Next</a>
<p>The most important reason of why you should remain heal</p>
If you put this html code element in:
<button>this page
You will get this:
<button>this page
</button>
And this to your CSS:
button {
float: right;
}
You will get at end this:
<style>button {
float: right;
}
</style>
<button>this page
</button>
You have to add a little bit of CSS.
<button style="float:right;">
Related
I've been trying to put a border around a specific piece of text on my website in CSS, but it won't completely wrap around it.
Here's what I'm talking about:
Image
And here's the code that I used:
.box-outline {
border: 4pm solid black;
border-radius: 4px;
}
For context, I'm using a WordPress theme and trying to put a border around that piece of text on my navigation menu. WordPress gives the option to style menus entries by putting in the CSS class but it's not working correctly. Is it my theme that's screwing me over, or is there something I can change?
Try this:
.box-outline {
border: 4pm solid black;
border-radius: 4px;
z-index: 100500;
}
Maybe there is some another element, that closes your right border... z-index may help.
Or... it seems, you've set incorrect width to your last div/button, or the width of div, that contains all buttons.
OK something strange is going on here, i am using a class for 2 buttons that share styles. But when i apply a float right to one of the buttons it makes it bigger 26px vs 30px in my real world example.
It is only changing by 1px in this http://jsfiddle.net/Mag2D/ but it is still different.
I have a screen grab of inspect elements that show the 26 vs 30 here http://imgur.com/3WJdvcQ
This is the CSS that is being used...
.orderButton {
position: relative;
-moz-borderradius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #004282;
color: #fff;
padding: 5px 35px;
}
.right{float:right;}
Any idea why this is happening?
The answer is that when you float an inline element, it then becomes an inline-block element, which changes the way padding/width/height/margin properties are painted.
Whenever you have an inline element (e.g. span, a, etc) that you want to add padding to, make sure you set it to display: inline-block. It will display much more consistently cross-browser and, most likely, will be more likely to display the way you intended it to.
You have 2 issues here: 1) anchors are not block level elements. 2) when you float non-block level elements, they get turned into an inline-block level element and thus their model is changed.
If you set both to be floated by adding a "left" class to the left button and adding the float, they come out perfect.
HTML :
<a class="orderButton left">Place Order</a>
<a class="orderButton right">Place Order</a>
CSS :
.orderButton {
position: relative;
-moz-borderradius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #004282;
color: #fff;
padding: 5px 35px;
}
.right{float:right;}
.left{float:left;}
Solution #1:
Add this in the CSS:
.left{float:left;}
And add left class to the a tag
<a class="orderButton left">Place Order</a>
Solution #2:
In .orderButton, add:
display:inline-block;
When you float an element, it automatically becomes a block box. This box can then be shifted to the left or right on the current line but it also changes its margin, padding etc.
Demo #1 - With float on both a tags
Demo #2 - With inline-block; on the button class instead
I am trying to fix a couple of problems when you view this web page in IE7.
(the web page looks great in iE8 and iE9)
I have uploaded the single web page onto a test site:
http://www.jrdesign-website.co.uk/bar_menu/bar_menu.html
When the page has loaded, scroll down to view. You will see the prices on the right hand side. The small duplicated full stops should line up with the prices and food description.
Any advice would be greatly appreciated
SO your code has a with the dots underline on it as a repeating background and within that there is a wrapper div floated left with the food item name and nested within a that a class .bar_font_bold_med which is 'float: right'.
Two possible ways of getting to a solution.
1\ Why not have the price i.e. the in its own instead. That will sort out the positioned-on-the right goal. It will also allow you to use or middle or top etc on the price to independently adjust its vertical position in relation to the food item. Also use CSS to supply the dotted underline. Eg consider using a border-style on the lefthand thus.
border-bottom: 5px dotted #fff
How you attach the style is up to you. Perhaps a CSS classname on the relevant s is the best way i.e.
<td align="left" width="565" height="xxx"
bgcolor="#000000" background="images/yellow_dot.jpg"
... becomes...
<td class="foodItemCol" height="xxx">
...and you have the CSS styles
.foodItemCol {
border-bottom: 5px dotted #ffffff;
width: 565px;
background-color: #000000;
}
Or if you go with my suggestion of having another for the price then use this CSS selelector which means you will not have to bother adding a classname
#bar_menu_text table td {
border-bottom: 5px dotted #ffffff;
width: 565px;
background-color: #000000;
}
#bar_menu_text table td + td {
border-bottom: none;
width: auto;
background-color: #000000;
}
What the second style selector is saying where the second or subsequent sibling appears after the first then overwrite the styles that where applied in the '#bar_menu_text table td' rule above i.e. so the price column does not have a dotted underline.
PS You have used a WYSIWYG editor to generate the code for this page haven't you? I have modified my answer baring that in mind as I guess you aren't used to coding HTML /CSS by hand.
PPS you don't need the z-index:5 or any z-index's at all whatsoever...they are only useful when the element the are applied to is position: relative or position: absolute etc.
I have CSS with an image
.backgroundImg {
background: url('./path/file.gif');
background-repeat: no repeat;
width: 24px;
height: 24px;
}
.ui-highlight {
border: 2px solid green;
color: #363636;
padding: 0.7em;
}
I have div tag which imports this class
<div class="ui-highlight ui-corner-all">
<div class="backgroundImg" style="float:left;">
some text.........
</div>
</div>
EDIT
I am trying to achieve a bordered box with image on the left and text on the right of the image. I inspected the element and the image shows up when I hover over the ui-highlight class
I know css and honestly I am not a pro at it. Can someone help me why the image doesn't show up
UPDATE
After adding width and height to the backgroundImg class the image is visible.
The first thing I would do is use Firebug for Firefox or the Developer Tools in a Webkit browser to inspect your situation.
Right-click on "some text...." and choose Inspect Element.
In the HTML inspector click on the div with the class "backgroundImg"
On the right hand side you should see the CSS inspector for this element. Hover your mouse over ('./path/file.gif') and see if the image thumbnail loads. If it doesn't you may have the path set-up incorrectly.
Hover over the div in the HTML inspector and see how it highlights on the page. It may be that your div isn't taking up enough space to reveal the image. If this is the case you'll need to set a width/height or put more content in the div to fill it out.
The jQuery UI classes on your parent div (ui-highlight ui-corner-all) might be setting some styles that obscure the image in the child div. Make sure to inspect this with the HTML/CSS inspector as well.
What you're trying to do from your code is give the text with the background of the image. It works, but not in the way you're intending. Replace the backgroundImg div with an tag in the HTML, with the "align='top'" element. The code I've got is:
<html>
<head>
<style type="text/css">
.ui-highlight {
border: 2px solid green;
color: #363636;
padding: 0.7em;
}
</style>
</head>
<body>
<div class="ui-highlight">
<img src="path/img.gif" style="padding:0px;" align="top">
some text.........
</br>
</div>
</body>
</html>
Try using an absolute path:
background: url('/path/from/root/file.gif')
Or:
background: url('http://example.com/path/from/root/file.gif')
This ensures that there is no ambiguity as to where the image is coming from.
First of all i would advise you to apply some sort of clearfix. The easy way would be to add overflow:hidden; to your .ui-highlight. This is required to give the wrapper some height. DDo some searching on clearfix for the how and why.
Second a would check if the image is actually getting loaded, your path might be wrong. Checking it in the code inspector from Chrome would be the way for me.
There's nothing syntactically with your CSS which leads me to believe that the image is not where you specify in your CSS. Try an absolute URL or a path relative to the CSS file itself.
However: I'm not sure you're going to get the results you're looking for with this CSS, though. If you try changing
background: url('./path/file.gif');
to
background: #f00;
you can preview what you're going to get when you get the image url worked out.
Since you say that you're trying to get "a bordered box with image on the left and text on the right of the image" you might try something like this:
CSS:
.ui-highlight {
background: url('http://www.site.com/file.gif') top left no-repeat;
border: 2px solid green;
color: #363636;
padding: 0.7em;
padding-left: 90px; /* This should be the width of the background image */
}
HTML:
<div class="ui-highlight">
some text.........
</div>
That would draw a border around the div, add a background image to the top left of the div, then write the text to the right of that image.
I have the following that I would like wrapped as units.
<div class='tag-box'>
<a href=#>Axe Committee</a>
<div class='circle'><a href=#>x</a></div>
</div>
The CSS for these classes are:
.tag-box {
display:inline;
}
.circle {
display:inline;
padding-left:4px;
padding-right:4px;
background:rgb(196,15,24); /*dark red*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.circle a {
font-size:10px;
text-decoration:none;
color:#fff;
position:relative; top:-2px;
}
I can have upwards of 20 or 30 of these tag-boxes displayed inline. The problem is that the wrapping will break the words from each other or even break the red circle from the link. This makes it hard to differentiate which circle belongs to which link. (In the future, each circle corresponds to a different action with respect to the link.) See below.
alt text http://www.freeimagehosting.net/uploads/f0c5a72ac9.png
How do I prevent this kind of wrapping from occurring?
You want each of your .tag-box to be inline (not taking all the width available) but still being considered as a block (its content shouldn't be cut in half). Here enters ... inline-block!
Here is a complete HTML code: http://pastebin.com/24tG7tCz
I used a list of links to better represent the lists of couple of links tag+action (bad news: you've a divitis syndrome ;))
I also added titles: your 'x' links aren't accessible at all and can be confusing for everybody, with or without any handicap, because one is never sure if the x will suppress the tag on the left or on the right: there are dozens of links, each with the text 'x'! A title attribute on the a element tells blind users and everybody else via a tooltip what'll really do that x.
With a span inside a.x, you can change the background-color on hover and focus, it wouldn't be possible with a inside a span or div.
0: Use white-space: nowrap;.
1: You could have the circle as background of your .tag-box (or your .circle a). eg:
.tag-box {
display: inline;
background-image: url('circe.png');
background-position: 100%; /* Display to the right */
background-repeat: no-repeat;
padding-right: 10px /* To leave space for the image */
}
2: You could use fixed-size floating .tag-box-es ( :/ )
3: You could have a (ready made) script put a circle on the right of every ".circle a"
You could try:
.tag-box {
display: inline-block;
}
Although you may experience some issues with firefox 2 and older versions of IE