I am working on a website(this is my first website as a developer) and I was wondering if someone could help me align these to items next to each other horizontally. I don't know how to code HTML so I am completely unfamiliar with this. For the most part when developing sites I go and make due with what is online to help but this instance I am with your help.
The site is using WordPress and this is going to be a page. With a table from W-P Table reloaded and a Google map.
Here is the code currently:
<p style="text-align: left;">[table id=4 /]<small></small></p><p style="text-align: right;">
<iframe src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Avie's+SKi+Sports+100+Main+Street,+Westerly,+R+02891-2194&aq=&sll=41.375316,-71.831092&sspn=0.006948,0.016512&vpsrc=0&g=100+Main+Street,+Westerly,+R+02891-2194&ie=UTF8&hq=Avie's+SKi+Sports+100+Main+Street,+Westerly,+R+02891-2194&hnear=&radius=15000&t=m&ll=41.379063,-71.831102&spn=0.015457,0.027466&z=15&iwloc=lyrftr:m,9024240540147588029,41.375323,-71.831043&output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="640" height="480"></iframe>
<small><a style="color: #0000ff; text-align: left;" href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Avie%27s+SKi+Sports+100+Main+Street,+Westerly,+R+02891-2194&aq=&sll=41.375316,-71.831092&sspn=0.006948,0.016512&vpsrc=0&g=100+Main+Street,+Westerly,+R+02891-2194&ie=UTF8&hq=Avie%27s+SKi+Sports+100+Main+Street,+Westerly,+R+02891-2194&hnear=&radius=15000&t=m&ll=41.379063,-71.831102&spn=0.015457,0.027466&z=15&iwloc=lyrftr:m,9024240540147588029,41.375323,-71.831043">View Larger Map</a></small></p>
Typically when you want to line something up side by side on a page, you have two options:
The old school way - Use Tables (If you are using a program like Dreamweaver, this should be fairly easy - Insert > Table)
The better way - Using CSS. This may be a little harder for you to deal with since you said you have no experiencing working with HTML and I am presuming CSS.
The CSS way would require you to create a stylesheet with two divisions (divs). Here's an example of some code that would do that:
<style>
#col1{ width:300px; float:left;}
#col2 { width:300px; float: right;}
</style>
The above code would go between your <head></head> tags. Then in the body of your page, you would simply call the two divs:
<div id="col1">YOUR CONTENT</div>
<div id="col2">YOUR CONTENT</div>
I had a similar problem. I tried to use the CSS route but failed. If you are using Wordpress the easiest way would be to place 2 columns in the section you want the division. then place one element in each and then target their HTML codes accordingly.
Related
I need some help here.
I found the "Miniport" template by "html5up" and I want to use this template as a base for my future projetc.
The demo can be seen here: http://html5up.net/miniport
On the demo we can see that bellow the website menu is an circular image and next to it is some texts. I need to know how to remove that image and center the texts so the texts can match the rest of the template (the site has the divs centered too).
I dont have much skills on css nor html5. Im a fan and I want to learn.
If anybode can help me, please..
Sorry about my english.
I too am using this template.
In order to remove the image, open the html document.
Delete this code that is found between ~line 42—46: (this is what formats and holds your image)
<article class="container" id="top">
<div class="row">
<div class="4u">
<span class="image fit"><img src="images/angela.jpg" alt="" width="118%" height="350" /></span>
</div>
Reformat the div tag:
<div class="8u"> to <div class="container" align="center">
By doing this, you are modifying the style within the html document rather than the css doc. This is good since you do not want to change every div tag in the html doc, just this one. Additionally, adding align="center" helps override most css formatting within your divs. You can use that trick later on in your site.
On a side note, double check that you like the command the contact form uses. I do not, since it opens up my computer's email app rather than directly sending the email through the webpage. That's my next project.
Enjoy!
I am designing an HTML email for a company. I'm having a problem with the footer at the bottom. Currently, it looks like this:
I love it!
When it's resized a lot, it looks like this:
Wonderful! I DO want the footer to break onto 3 lines.
However, when I resize the window halfway, it looks like this:
What CSS code can I use to make the footer to either break ALL lines, or none? It needs to ALWAYS look like either this:
or this:
But NEVER this:
and NEVER this:
I tried numerous combinations of white-space: nowrap; to no avail. When ANY lines break, they need to ALL break at the same time. Maybe this could be accomplished with a <table>?
Thank you for your help. The CSS needs to be inline and without media queries. JavaScript support for HTML email is very limited and non-reliable, therefore, I wish to do without it.
A JSFIDDLE for editing can be found here.
The layout which you are trying is possible using media queries or javascript. but most of the email templates doesn't support both solutions.
So, as I see, you have two options:
it will be better if you always keep the footer items independent to each row i.e add br tags between the nav tags.
or
Create different email templates based on the resolution.
Personal suggestion: I would have gone with the first option.
<nav style="display:inline; white-space:nowrap;">
<a moz-do-not-send="true" style="text-decoration:none; word-break:break-all; color:white;" href="tel:1234567890">
(123) 456-7890
</a>
</nav>
Use
word-break:break-all;
Jsfiddle
http://jsfiddle.net/f1uuwexy/8/
You can do this using only html:
<div>
www.hazardmoving.com<br />
Patrickhazard#yahoo.com<br />
(123) 456 7890<br /></div>
You seem to try pushing css beyond its limits
If you feel comfortable including bootstrap you can try:
<link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div style="width: 600px; margin: 60px auto; text-align: center;">
<div class="col-md-4">www.hazardmoving.com</div>
<div class="col-md-4">Patrickhazard#yahoo.com</div>
<div class="col-md-4">(123) 456 7890</div>
</div>
That should do the work. Check my pen:
http://codepen.io/anon/pen/EajwXp
In the footer of the website, I would like to include social widgets. Facebook one is working just fine, Tripadvisor comes with a many lines of code and and is not really styled, jumps off my footer etc.
How do I eventually style the widget which is not styled? If I change anything in the code, a message:
"Please check the TripAdvisor code and install again."
This is their code
<div id="TA_socialButtonBubbles675" class="TA_socialButtonBubbles">
<ul id="7xYqVoY8wKU" class="TA_links LV2VKytU2yB">
<a target="_blank" href="http://www.tripadvisor.com/Attraction_Review-g274707-d6883393- Reviews-I_Love_Segway_Private_Tours-Prague_Bohemia.html">
<img src="http://www.tripadvisor.com/img/cdsi/img2/branding/socialWidget/20x28_green-21693-2.png"/>
</a>
</li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=socialButtonBubbles&uniq=675&locationId=6883393&color=green&size=rect&lang=en_US&langversion=2"></script>
The main problem is that it jumps out of the footer and does not stay in line like I would like to.
Screenshot:
The whole site to check is : http://ilovesegway.com
The best way for you to get it exactly like you want is for you to open your site in your browser of choice and tinker with the styling in the browsers developer tools.
I went in and slightly modified the parent div. I gave it a display: inline-block
<div id="TA_socialButtonBubbles675"
class="TA_socialButtonBubbles"
style="display: inline-block">...
That wasn't enough so I also changed two children divs to inherit the vertical-align styles.
<div class="socialWidgetContainer" had a style of display: table-cell which I removed.
<div class="socialWidget" style="vertical-align: inherit;"
I assume the second modification was generated content by trip advisor, but you should still be able to style this via a .css file or even some JavaScript.
I did all this through the chrome dev tools.
Have you tried using an iframe, similar to what the Facebook widget uses? That way, you could put the TripAdvisor code in a separate HTML fragment and let the iframe dictate where you want the widget to go. That way, you're not fighting against whatever styles are being pushed at you from TripAdvisor's scripts.
<!-- Facebook widget -->
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FI-Love-Segway%2F540468152732697&width=100&layout=button&action=like&show_faces=false&share=false&height=35&appId=487866241269315" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:35px;padding-top:15px;" allowTransparency="true"></iframe>
<!-- Trip Advisor widget; add whatever styles or parameters you need -->
<iframe src="YOURSITE/tripaddvisor.php"></iframe>
You can still apply css rules to the included content. Consider making #TA_socialButtonBubbles675 position:relative and moving it manually to where you would like it to appear. I had some luck with:
#TA_socialButtonBubbles675
{
position: relative;
top: -116px;
left: 360px;
}
Okay, bear with me because I'm new to WEB development.
I have an MVC 4.0 Web API application using Razor and Entity Framework 5 (C#).
One of my links takes me to a page which displays data from the EF.
I added an HTML button to this page called "Export to Excel."
I want to center this button on the screen, above the report results.
What is the correct approach for this and how do I do it? I need to understand the PROPER architecture for files and code.
Do I use CSS? If so, where do I store the file in the solution? How do I use it on my page?
Do I do something specific to Razor?
Should I simply use HTML tags like
Again, all I want to do is center a button on the web page.
Can someone help me with a step by step process to do this correctly?
I'm just having a hard time figuring out where to put code and files (basically how to structure the application properly).
You can use CSS.
.centerAlign {
text-align: center;
}
In your view you can then apply the centerAlign class to the button:
<button class='centerAlign' />
You can also make a custom HTML Helper that will automatically apply the class for you.
namespace YourApplication.Helpers
{
public static class ButtonExtensions
{
public static string ButtonCenter(this HtmlHelper helper, string value)
{
return String.Format("<button class='centerAlign'> {0} </button>", value);
}
}
}
Then in your view you could do:
#Html.ButtonCenter("Click me");
I know there is an answer, but this is a really common way to center objects margin: 0 auto. Since the answer by itself doesn't really explain, I'll provide some detail.
When you build your View it is marked as a .cshtml file. Your View will contain a series of HTML or Hyper Text Markup Language. What you are doing is utilizing a particular Element called a div. These are used to help build a structure or layout for your site.
<div id="Origin">
<div class="origin-container">
<div class="header-style">
<div id="Origin-Header">
<div class="header-container">
// Inside Header Elements
</div>
</div>
</div>
</div>
</div>
So essentially this is a Site Structure. You'll notice that I have a tendency to inner-wrap a lot of my Elements. That is because it makes it easier to customize and style my layout, making it more customizable.
If your thinking "How is it more customizable?" Your partially correct, this HTML is simply a structure- The customization will come from your Stylesheet, Cascading Stylesheet to be exact.
Your HTML will call this Stylesheet to help adapt your layout to give a consistent appearance. So if you'd like to center your header you would put in your stylesheet:
#Origin-Header {
margin: 0 auto;
}
What the command is stating is three things:
Margin: These are the page margins.
0: Is the pixel difference for Top and Bottom.
Auto: The left and right pixels.
So rather then a top, bottom, left, and right they are all merged together in the short-hand. You'll have a lot of additional control to your layout as well through your stylesheet. Bare in mind that this is manipulating those div tags. If your trying to align a particular object, it would work identical but rather then focus on the element- You would point it to your html object.
But I hope that helps.
I do not know if it is good practice, but the only way I have been able to center entire controls like a button in HTML was to do something like
.btn{
margin-left:auto;
margin-right:auto;
}
I have been able to center the control by setting the button's class to "btn" and using the above css. The text-align property has never really worked for me in HTML.
Try this:
[i guess is this what you are looking for]
check LIVE DEMO on jsfiddle
HTML
<section class="iHaveBorder">
<h3>Help me here!...Center stuff...</h3>
<div class="myWorderfullDiv iAmRed">
your report here...
</div>
<center>
<button>DoIt</button>
</center>
</section>
<h1>::::::OR:::::</h1>
<section class="iHaveBorder">
<h3>Help me here!...Center stuff...</h3>
<div class="myWorderfullDiv iAmBlue">your report here...</div>
<div style="text-align: center;" >
<button>DoIt</button>
</div>
</section>
<h1>::::::OR relative:::::</h1>
<section class="iHaveBorder iFeetIn">
<h3>Help me here!...Center stuff...</h3>
<div class="myWorderfullDiv iAmGreen">your report here...</div>
<div class="iWant2BeCenter">
<button>DoIt</button>
</div>
</section>
CSS:
.myWorderfullDiv{
height: 80px; width: 200px;
}
.iAmBlue{background-color: blue}
.iAmRed{background-color: red}
.iAmGreen{background-color: green}
.iHaveBorder{border:2px black solid;}
.iFeetIn{display: inline-block;}
.iWant2BeCenter{text-align: center;}
check LIVE DEMO on jsfiddle
What is the best way to place/layout the google+1 and facebook Like buttons so they align neatly?
Currently, the first "thing" in my body is this heading, appearing on top of all pages (slightly modified after logging in): (linebreaks added for readability) :
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<g:plusone size="small" href="https://www.apebroker.com/">
</g:plusone>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.apebroker.com%2Findex.php&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
</td>
<td align="left"></td><td align="right">It's more fun after you
login
</td>
</tr>
</table>
My problem is that this looks like crap. I know that pages don't need to look exactly the same in every browser, but acceptable ugliness has its limits.
The google button is nicely "vertically centered", while the facebook stuff kind of sticks to the top of the page, 0px down.
See this example:
I tried adding padding:2px; to the style in the facebook iframe, and sure, it came down a bit, but so did the google button too, and the entire heading grew, pushing down the <hr> below.
I obviously don't know much about iframes, but I've managed fine on my own until now.
In my global style sheet I have (amongst other things) this:
body {
margin:0px;
padding:0px;
background-color:#e0e0b0;
color:#302010;
font-family:"Trebuchet MS",Helvetica,Sans-serif;
font-size:100%;
}
And I don't want to change that, as it cascades to all sorts of things that I'm reluctant to break. If you want to check out the complete style sheet and HTML source, an example page can be found here.
Thank you in advance for any hints/suggestions!
How about plus one button, and it's width?
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'ru'}
</script>
A problem is that the table cells are sizing themself based on the font size even though there isn't any text in the table.
The "correct" answer is not to use tables for layout.
However, if you explicitly set:
<td align="left" style="font-size: 1px">
then your life will get slightly better as you'll be able to explicitly control the height of each of the cells and position things. At the moment despite you "asking" for a height of 21px, you're getting 26px.
After that the FB button will look nice and you'll need to move the +1 button around.
But, the real answer is not to use tables:
http://www.w3.org/2002/03/csslayout-howto
http://www.hotdesign.com/seybold/
and various others...
I've found a fix for this using to encapsulate both fb:like and g:plus separately, and then setting the style of both to style="vertical-align: top;". See example at http://www.clonearmycustoms.com/