Jump to content

Search the Community

Showing results for tags 'align'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 19 results

  1. Est

    Position & centering <div>

    Hi all, i am learning html and css from 3wschool, and i am a little lost. i have read all html and css tutorial section and really dont know why i dont understand, thanks for your help & time. Right now i am trying to understand how place some <div> where i want in the page. as you can see i have made 2 div (objects) that will contain things i want be able to place them in everywhere in the "main zone". (or any zone) ?) I cant get my objects centered in the div ?) there is a way to place a div to 100px on the right ( without use margin or padding ) ?)Am i in error, if i think to use div as a box sistem to place things where i want? ?) can someone make a "card" with all the useful and usable div things ? the site talk only about the align attribute and its not supported by html5.. https://www.w3schools.com/tags/tag_div.asp Searching for a solution i found out this site https://css-tricks.com/centering-css-complete-guide/ They use a line of code i didnt find on 3wschool, did i miss it? There they use .child {· position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);} i am also pretty confused by https://www.w3schools.com/cssref/playit.asp?filename=playcss_position i attach a screenshot of his behaviour , it is right? if it is i am fully lost.
  2. Hi, in this hover dropdown menu example (https://www.w3schools.com/howto/tryi...ropdown_navbar), the menu words are aligned left starting from 'Home'. Where do you place the 'text-align: center' statement in the coding to shift all the words towards the center of the navigation bar? Somehow it isn't as simple as it seems to me. For your benefit, I attach sample coding in example.html. Thanks for your advice. example.html
  3. Tarzan67

    Align containers using CSS

    I created two containers in wordpress and inserted the code below. While the pictures display properly to alignment seems to be way off. I want them to be side by side. <!DOCTYPE html> <html> <body> <img src="http://reverseloansforseniors.com/wp-content/uploads/2017/03/Oldham1.jpg" style="width:350px;height:275px;"> </body> </html>
  4. ShynedM

    center navigation

    Hi, I've downloaded a template and I'm now editing it in Dreamweaver. I am trying to center the top navigation menu, and from some reason I can't do it. Please see attached screen shot of the style sheet. Any advice would be helpful. Many thanks
  5. mykindajerk

    Need Help With My Event Page

    Hey guys/gals, I am a bit of a coding dinosaur, and recently got back into html coding, and have slowly been developing my comedy groups website. I've been slowly working with "css", and the list functionality On my event page, I want to display rows of 3 events each, that will have a rounded rectangle background, and the information about each event (with a picture) enclosed within the rectangle. You can find what I am working on at www.standupseoul.com/test1.html My problem is that I need to: 1. Align the 3 events to the middle of the page, not to the right. 2. I want there to be some separation between each <li> . As you can see, they bleed into each other. You should be able to view the source on my page. Any help, suggestions, or tips would be greatly appreciated. If you see some of my coding looks messy or I've put something in a bad spot, feel free to give me your opinion. In the end, I want it to look like I have on this page, but without using Tockify. http://www.standupseoul.com/pages/events.html I used to make pages back in the 90s and early 2000s with just HTML and a little java script, Im kind of getting back into all of this slowly. Thanks a lot!
  6. Sunamena

    CSS: Table in the center of the page

    Hello, i am currently using this to make my table appear in the center.<table align="center">...When i look, it works, but the validator suggests to use CSS. I have tried some things like:<table style="align:center"><table style="text-align:center">But none of them seem to work. What am i doing wrong?Thanks in advance! =D
  7. Hello all, I have a master div (#master) and inside it I have other class boxes. I want to align my contentbox class up against the left border of my master div, but there is always a space there of about 10px. I am editing a tutorial file which I followed, so perhaps the original tutorial specified this space somewhere, I don't know, but I can't get rid of it. I have tried combinations of float-left, margin and padding none and played around with positioning but have had no joy. My master file CSS is: #master /*the box we work in - struggling to get this tight up against the header*/ { width: 1024px; height:auto; background-color: rgb(255,255,255); padding: none; padding-left:none; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; border: 1px solid #999; /*replace with border: none; after the images have been alligned*/ } The content box class which I want to place within my master 'frame' and have aligned to the left is as followes. There are three content boxes but I want the first one to be placed to the left, within the master div. I have attached code for contentbox and associated images... .contentbox { width: 300px; margin: none; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: none; border: none; float: left;} .contentbox p {font-family:verdana; font-size:80%; line-height:140%;} .contentbox img { margin-bottom: 10px; border: none; padding-left: none; margin-left: none; float: left;}
  8. FateAce

    Help with header

    Hey guys, this is probably a newbie topic, but I can't seem to get the header to work for a website I'm making. I want to have it the where the div tag (or any other tag if it's better suited) be flush with the sides of the screen, much like it is on this site, and many others, such as the face punch forums. I have have tinkered, fiddled, and even copied directly from templates, in an attempt to make it do this. Butt every time, theres ALWAYS a 10px gap to the left side of the box. I have done and researched all I can, and I still cannot figure out why this is happening. What do I have to do to make it work? Also, sorry if I sound annoyed. I have been fighting this for almost 2 full days now with no results.
  9. lora

    UL column alignment help

    I'm using the CSS below to turn a list of links into columns for the footer: [font='Helvetica Neue', Arial, Verdana, sans-serif]#footernav {[/font]width: 90%;padding: 20 20 20 20;}.footernavee ul {list-style-type: none;float: right;margin: 10px 0 0 0;padding: 0 10px 0 0;width:240px;}.footernavee {color: #999;text-align: right;text-transform: uppercase;}.footernavee a {color: #999;text-transform: uppercase;text-decoration: none;font-size: .7em;} It's working but the columns appear oddly staggered. How can I align the columns vertically to the top of the div they are in? Thanks in advance!
  10. rutgervs94

    I can't get my nav-bar align in the center

    The problem is that I can't get my nav-bar align in the center. This is my code: <div id="nav"><ul><li><a href="startpagina.html">Startpagina</a></li><li><a href="zomercollectie.html">Zomercollectie</a></li><li><a href="wintercollectie.html">Wintercollecite</a></li><li><a href="kerstcollectie.html">Kerstcollectie</a></li><li><a href="contact.html">Contact</a><ul><li><a href="contact-voor-particulieren.html">Contact voor particulieren</a><li><a href="contact-voor-bedrijven.html">Contact voor bedrijven</a> </ul><li><a href="over-ons.html">Over ons</a></li></ul> <br class="clearboth"/></div> .clearboth { margin: 0; padding: 0; clear: both;} #nav { font-family: verdana; font-weight: bold; font-size: 9pt; margin: 10px auto 10px auto; text-align: center;} #nav ul { margin: 0; padding: 0; list-style: none; text-align:center;} #nav a:link,#nav a:visited { color: #ffffff; text-decoration: none;} #nav a { display: block; padding: 6px 8px;} #nav li { float: left; background-color: #44A04D; margin-right: 1px; position: relative; width:15%;} #nav li li{ width: 100%; margin-top: 1px;} #nav li:hover { background-color: #006837;}#nav li li:hover { background-color: #006837;} #nav ul ul { position: absolute; visibility: hidden;} #nav ul ul ul{ position: absolute; left: 100%; top: -2px; border: solid 1px transparent;} #nav li:hover > ul { visibility: visible;} .right-arrow { float: right;} Can anyone solve my problem?
  11. I am trying to get our social media icons to stay in place, no matter how zoomed in or out you are (ctrl+scroll). We have clients with varying monitor sizes, technologies, browsers, etc. The website is www.cleantelligent.com Currently our icons are floated and aligned right, so no matter how you look at it, they line up with the right side of the screen. How do I get them to "stick" right under the "get started" button, no matter where you look? There's a lot of CSS formatting on this page that deals with the slider right below and I don't want to displace or mess anything else up. Is there any way to get them to stay right under the button while in their own div, span, aside, or whatever? The code is as follows:Quote:<div id="main"> <div id="primary" class="showcase"> <div id="content" role="main"> <article id="post-89" class="post-89 page type-page status-publish hentry intro"><header class="entry-header"><h2 class="entry-title">Home</h2> </header><!-- .entry-header --> <div class="entry-content"><!--SOCIAL MEDIA ICONS--><div style="align: right; float: right; padding-right: 50px;" id="first" class="widget-area" role="complementary"><aside id="text-2" class="widget widget_text"><div class="textwidget"><div class='footer_social_icons'><a href="http://www.facebook.com/CleanTelligent"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/facebook.png" /></a><a href="http://www.linkedin.com/company/cleantelligent_software"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/linkedin.png" /></a><a href="https://twitter.com/#!/CleanTelligent1"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/twitter.png" /></a><a href="/news-and-events/rss.xml" ><img src='/wp-content/uploads/2012/05/Blog-button.png' ></a></div></div></div><!--END OF SOCIAL MEDIA ICONS--> <div class='slider' id='slider-1'><div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div><img src="/wp-content/uploads/2012/02/clean-slide-1.jpg" alt="Slide 1" /><div class='slide-desc'><h2>Productivity</h2>We believe technology is not only for automation, but for empowerment. <a class="alignright" title="Productivity" href="/about-us/janitorial-service-software/efficiency-in-the-workplace/">Meet and Exceed Expectations</a> </div></div>
  12. MarkT

    Css Problems Alignment

    Hello,Sorry I'm experiencing problems with my css, #title {width: 200px;height: auto;margin-top: -10px;margin-left: 20px;background-color:#000;border-radius: 2px;color: #DF3A01;}#search {width: 600px;height: auto;color: #FFF;margin-top: 28px;position: absolute;margin-left: 190px;display: inline;}#buttons {width: 300px;height: auto;color: #FFF;margin-top: 28px;position: absolute;margin-right: 30px;display: inline;}#buttons li {border-left: 2px dashed #FE9A2E;padding: 5px 5px 5px 5px;display: inline;}#buttons ul {display: inline;}#bar {margin-left: -15px;margin-right: -15px;margin-top: -12px;width: 110%;height: 50px;background-color: #000;position: fixed;border-radius: 3px;padding-left: 15px;padding-right: 15px;padding-top: 12px;} and my html; <div id="bar"><div id="title"><h1 color="#FE9A2E" style="float: left;">PitchIT</h1></div><div id="search"><?PHP// Array for Config variables$Config['CanSearch'] = false; // Falseif($Config['CanSearch'] == true){ echo 'form name="search" method="post" action="<?=$PHP_SELF?>"><input type="text" size="50" name="query" placeholder="Enter Search Query Here..." /> by<Select NAME="field"><Option VALUE="name">Name</option><Option VALUE="email">Email</option><Option VALUE="id">ID</option></Select><input type="hidden" name="searching" value="yes" /><input type="submit" name="search" value="Search" /></form>';}else{ echo 'Search Currently Unavailable!';}?></div><div id="buttons"><ul><li>Bob</li><li>Bob</li></ul></div></div> But it shows as the image attached below. The bob li's show up in the middle f the search and title.they're meant to be on the far right.... Thanks in advance!all help appreciated!
  13. Gerbrandd

    Aligning <div>

    Hello, I'm experiencing a little problem when trying to align different div sections. The page loads correctly in Safari/Chrome but when using other browsers, there is a little displacement (see image). I don't know what is causing the problem. Hope anyone of you can help me. Thanks in advance! <html><head>(...)<style>body{background-color:rgb(235,235,235);}.header{background-color:rgb(17,76,131);position:absolute;top:0px;left:0px;right:0px;height:120px;}.base{background-color:rgb(250,193,37);margin:auto;padding-bottom:15px;width:980px;padding-top:125px;height:auto;text-align:center;}.tabbed_box{margin:0px auto 0px auto;width:950px;}.tabbed_area{border:1px solid #494e52;background-color:#636d76;padding:8px;}ul.tabs{margin:0px;padding:0px;margin-top:5px;margin-bottom:5px;}ul.tabs li {list-style:none;display:inline;}ul.tabs li a{background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;text-transform:uppercase;border:1px solid #464c54;}ul.tabs li a:hover{background-color:#2f343a;border-color:#2f343a;}ul.tabs li a.active{background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom:1px solid red;}ul.list{list-style-type: square;font-family:"Segoe UI", sans-serif;font-size:14px;}.content{background-color:#ffffff;padding:10px;border:1px solid #464c54;text-align:left;font-size:12px;font-family:Verdana, Arial, Helvetica, sans-serif;}#content_2,#content_3,#content_4,#content_5,#content_6,#content_7,#content_8,#content_9 {display:none;}</style></head><body><div class="header">Test?</div><div class="base"> <div id="tabbed_box_1" class="tabbed_box"> <div class="tabbed_area"> <script src="js/functions.js" type="text/javascript"></script> <ul class="tabs"> <li><a href="javascript:tabSwitch_2(1,9,'tab_','content_');" id="tab_1" class="active">Ligging</a></li> <li><a href="javascript:tabSwitch_2(2,9,'tab_','content_');" id="tab_2">Faciliteiten</a></li> <li><a href="javascript:tabSwitch_2(3,9,'tab_','content_');" id="tab_3">Logies</a></li> <li><a href="javascript:tabSwitch_2(4,9,'tab_','content_');" id="tab_4">Eten & Drinken</a></li> <li><a href="javascript:tabSwitch_2(5,9,'tab_','content_');" id="tab_5">Sport</a></li> <li><a href="javascript:tabSwitch_2(6,9,'tab_','content_');" id="tab_6">Animatie</a></li> <li><a href="javascript:tabSwitch_2(7,9,'tab_','content_');" id="tab_7">Kinderen</a></li> <li><a href="javascript:tabSwitch_2(8,9,'tab_','content_');" id="tab_8">Extra</a></li> <li><a href="javascript:tabSwitch_2(9,9,'tab_','content_');" id="tab_9">Prijzen & Contact</a></li> </ul> <div id="content_1" class="content">Content for Tab 1</div> <div id="content_2" class="content">Content for Tab 2</div> <div id="content_3" class="content">Content for Tab 3</div> <div id="content_4" class="content">Content for Tab 4</div> <div id="content_5" class="content">Content for Tab 5</div> <div id="content_6" class="content">Content for Tab 6</div> <div id="content_7" class="content">Content for Tab 7</div> <div id="content_8" class="content">Content for Tab 8</div> <div id="content_9" class="content">Content for Tab 9</div> </div> </div></div></body></html>
  14. dorlevi

    align to center ruin the html file

    Hello,i am decoding a psd to html and css,and i have this code: <!DOCTYPE html><html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8" /> <title>בית ספר לקעקועים</title> <style> body { background-color:#042870; no-repeat fixed 100% 100%; } </style> </head> <body> <div> <img src="images/platform.png " style="position:relative; z-index:-1;" /> <a href="about.html"> <img class="alignImg" src="images/about.png " style="position: absolute;left:920px; top: 250px;" /> </a> this code works (no matter what the screen size is)but when i add align to center it ruiz the pagewhen the page is bigger then the html file all the buttons move from where they should be....(i want them in the a specific location and when i dont use the align it put them in the right place but when i use the align when the screen is very big like mine it moves the buttons from their location....) how can i fix it? thx from advance
  15. rnv

    Center align table with CSS

    Hi, I can simply use the following tag to horizontally align a table to center: <table align="center" class="centertable"> I would like to use the CSS to do the same but somehow I cannot make it work. here is how i tried. Will appreciate help. .centertable {align:center;} with best regards,rnv
  16. Suncross

    Body Positioning

    I seem to be having problems positioning my background image and colors. body{background-color:#8e97a4;background-image:url(wi/bliner1.png);background-repeat:repeat-x; } That is the current code. Right there in chrome and firefox, the image "blinder1.png" is normal. However, as we all know, this is just going to repeat across the top of the page from left to right. Whenever I add the following stipulation background-position:bottom; it seems to warp the image to a fraction of its' size, let alone not align to the "bottom" of the page. Using the left, it still warps the image but not as much. The latent function, the image warping, is really not a main issue for me right now. I am really wondering how to properly align my image across the bottom of the page. I have used the search function, and searched for about an hour or more today but I havent seen any documentation anywhere about this happening. Can anyone help?
  17. dalawh


    I am having a little trouble with aligning <div> in my webpage.I want to move the <div> with "TIME GOES HERE" all the way down to the top of the grey navigation bar.
  18. dalawh

    Appear at bottom + Align

    How do I make something appear at the bottom most parts of the page? What I mean is if I wanted to add a footer, I would want it to be at the bottom at all times no matter how the page is changing. I was wondering how I would align something in the center. Like if I wanted to align a div or table in the center, but not the text itself. I know I can use text-align:center, but that just seems weird and I tried align:center, but I am not sure if that is right.
  19. jackdsargeant

    Box Alignment

    Hi all, On my website, www.anf1blog.com, all of the boxes of content on the homepage are different sizes. How can I make them all one size, with the box info (the read full post/add comments bit) aligned at the bottom of the box? The box.css code (which I think is relevant) is below. .title{margin: 0 0 0 0px;padding: 0px 0px 0px 0px;}.sidim{float:none;margin:12px 10px 5px 0px;height:113px;width:289px;}.boximage img{border:1px solid #d29903;}.boxtitle{}.boxtitle h2{font-size: 15px ;}.boxtitle h2 a, .boxtitle h2 a:link, .boxtitle h2 a:visited {color:#00aeef;background-color: transparent;}.boxtitle h2 a:hover {color: #0182ae;background-color: transparent;}.box {width:308px;margin: 10px 10px 5px 0px;height:100%;color:#666;font: 13px Tahoma, century gothic,Arial,verdana, sans-serif;float:left;background:#f2f2f2;border:1px solid #ddd;}.box:hover {background:#dddddd;}.boxcover{padding:10px;}.boxinfo{width:308px;height:30px;background:#00aeef;overflow:hidden;position:relative;}.boxmore{float:left;width:100px;margin:5px 0px 5px 10px;display:inline;}.boxmore a:link, .boxmore a:hover,.boxmore a:visited{color:#fff;}.boxcoms{float:right;width:100px;margin:5px 10px 5px 10px;display:inline;text-align:right;}.boxcoms a:link, .boxcoms a:hover,.boxcoms a:visited{color:#fff;}.videopost{margin-bottom:10px;}.videopost embed{width:260px;height:200px;} Thanks!