Search the Community
Showing results for tags 'alignment'.
Found 16 results
-
Hello Everyone Good Evening I'm following your w3.css tutorial but I need your help. My questions are: - How do I centralize the Work Experience, Education and Skills sections in the middle of the browser window? - How do you fix datetime on the same level as the timebar, ie on the same line as the timebar? I would appreciate your support, please. https://codepen.io/Quencyjones79/pen/eYRWgOm
-
Can you please Help Me to Fix this Issue? Please Help. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML HTML 5 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" /> <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW" /> <title>Testing</title> <style type="text/css"> body { margin-top: 0px; margin-bottom: 0px; background-color: #CCFFCC; } #MainContainer01 { width: 620px; margin: 0 auto; } .Header { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; text-align: center; font-size: 25pt; background-color: #000080; line-height: 75px; height: 75px; } .HREFNoBorder { border-width: 0px; } .FL { width: 310px; height:381px; text-align: center; padding-bottom: 30px; background-color:fuchsia; float: right; } .gap { line-height: 35px; height:35px; /*clear: both;*/ } .TitleSegment { line-height: 30px; font-family: Arial; font-size: 12pt; background-color: #CCFFFF; text-align: right; width: 301px; } </style> </head> <body> <div id="MainContainer01"> <div class="Header"></div> <div class="gap"></div> <div class="FL"> <div class="TitleSegment">Title Segment</div><a target="_blank" href="#"> <img alt="#" longdesc="#" src="https://post.healthline.com/wp-content/uploads/2020/09/blue-lotus-flower-732x549-thumbnail.jpg" width="301" height="381" class="HREFNoBorder" /></a></div> <div class="FL"> <div class="TitleSegment">Title Segment</div><a target="_blank" href="#"> <img alt="#" longdesc="#" src="https://th.bing.com/th/id/OIP.caLpUQWyd1PZV5SRvDOZFQHaE8?w=270&h=180&c=7&o=5&pid=1.7" width="301" height="381" class="HREFNoBorder" /></a></div> </div> </body> </html>
-
Hi all, As a complete HTML novice, I'm generally able to solve issues through trial and error, but I'm working on a landing page for our new Zoom account and for the life of me I cannot figure out how to get the the 3 buttons centred under the logo/welcome message (see attached). I've copied the code here for your reference: https://docs.google.com/document/d/1zVs9P8ikQyeZz6Lb2mDaZRFBsk8bbEd45VRDd71ib_k/edit?usp=sharing Any suggestions would be much appreciated! 😊 Best, Olivia
-
BACKGROUND: In my most recent effort to fix the alignment problems associated with the responsive design of my site's mainpage I have managed to overcome several important hurdles. There does remain one problem, however, that I cannot seem to fix. This has to do with the rendering of inserted div elements in my site's mainpage. By way of example 1) Open Grammar Captive's mainpage in a smartphone -- preferably iPhone, for this is where I have detected the problem. 2) Click on the About option under Introduction in the navigation bar. The insert appears correct. No background color has been set. 3) Click on the Free Consultation option under Introduction where the background color has been set and notice the alignment failure in the left margin. Now, follow the same three steps, but with any browser on a normal computer, but achieve the affect by narrowing your browser window. The alignment problem does not occur. By the way, when I turn my phone sideways, the problem goes away. QUESTION: What might be causing the above described inconsistency? Roddy
-
I am working on a landing page that has two horizontal columns in bootstrap. Everything works well except that I cannot vertically align the "COMING SOON" text in the top box without separating the 2 boxes and leaving a gutter between them. I would like to vertically center the text in the top column. Any help will be highly appreciated. Below is the code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <style> body{ background-color : #222 !important; /*background-color : #ECECEA; !important*/ } .container{ background-color: white; height:210px; } .row h1{ color: #FF530D; font-size: 3em; font:bold; } .container p{ color: black; font-size: 1.5em; } .jumbotron{ background-color : #222 !important ; } .jumbotron p { color: #A9A9A9; !important; } .jumbotron h1{ color: #FF530D !important ;<!--Thank you Jesus--> } } //vertical-align-self-center; </style> </head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="jumbotron text-center"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> </div> <div class="container text-align center;"> <div class="row align-self-center"> <section="col-sm-12-col-sm-offset-0 "> <SPAN STYLE="color: #FF530D; font-size: 3em;"><center>Coming Soon!</center></SPAN><!--I am trying to vertically aligh coming soon--> </section> <div class="col-sm-12-col-sm-offset-0" style="background-color:#558c89;height:310px; margin-top: 130px; margin-bottom: 130px;"><!--to center a div in bootstrap use this formula 12-n/2 where n is the number in the column--> <!--next put another div inside a div to hold the form and its button--> <div class ="section-center2"> <h2 style="padding-top:65px; margin-bottom:20px;color: black;"><center>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo. <center/></h2> <h3 style="margin-top:65px;"><center><mark>Be the first to know when we launch! Sign up below:<mark/><center/></h3> </div> <center> <form class="form-inline"> `<div class="form-group"> ` <label for="email">Email address:</label> ` <input type="email" class="form-control" id="email"> <button type="submit" class="btn btn-default">Submit</button> ` </div> </center></form> </div> </div> </html>
-
I am making a site using a table with no borders to organize information on the page to display like a list. I was having issues with td pushing the adjacent td over where as I feel they should line up as left alignment. So I copied just the table information and the padding to another page just to simplify the HTML and locate the issue. Even with the code below, the alignment is still off. Even if I remove the padding the alignment is off. I have also tired changing the width of the table, no help. The only thing that seems to work is shortening the td content. Can anyone help me fix this? <!DOCTYPE html> <html> <style> .table { padding:150px; } </style> <body> <div class="table"> <table style="width:100%"> <tr> <th>Job</th> <th>Food</th> </tr> <tr> <td><p>Technology Teacher</p></td> <td><p>Lamb Karahi</p></td> </tr> <tr> <td><p>Previously a Manager</p></td> <td><p>Pho Thai</p></td> </tr> </table> <table style="width:100%"> <tr> <th>Movies</th> <th>Shows</th> </tr> <tr> <td><p>Count of Monte Cristo</p></td> <td><p>Chopped</p></td> </tr> <td><p>Good Will Hunting</p></td> <td><p>West World</p></td> </table> </div> </div> </body> </html>
-
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>
-
Hello, I'm attempting to re-create this Wix page - http://gtnphotography.wix.com/collectivecp#!new-equipment/c10au -in WP using the genesis theme. However, I'm having issues with spacing and alignment. Here's the code I have: <style> div.container{ position: relative; } p { text-align: center; margin-bottom: 60px; } div.container img{ position: absolute; top: -30px; left: -10px; right: -10px; } </style> <div class="container"> <img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Red-One-e1436565960605.png" /> <img src="http://www.collectivecp.com/wp-content/uploads/2015/07/C100.png" /> <img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Titla.png" /> <img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Tilta-2.png" /> <img src="http://www.collectivecp.com/wp-content/uploads/2015/07/24-105mm.png" /> <img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Rokinon-14mm.png" /> <img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Fostex.png" /> <img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Windshield.png" /> <img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Wireless-Mics.png" /> <img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Tascam.png" /> <img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Fluorescent-Banks.png" /> <img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Tungsten-Fresnels.png" /> <img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Green-Screen.png" /> <img src="http://www.collectivecp.com/wp-content/uploads/2015/07/Client-Monitor.png" /> </div> Any help would be great. Thanks, Kelsey
-
Hello. I am a newbie and suggestions would be greatly appreciated. I am redesigning a page within a Dreamweaver template. There are CSS stylesheets and JavaScript attached which is part of branding standards. There are many changes that I would like to make but I am having to comment out elements since the template is for the entire website. I am not allowed to completely change the header or the footer ( I asked our webmaster). Is there a way to override the template header and insert my own navbar while retaining the other presets? Next, I am having trouble with my div box alignment. I want to create div boxes for my left column, middle content, and a few right column boxes. I thought I could use display: inline as a quick fix, but my boxes are aligning vertically. I am trying to amend the current CSS sheets without having to create a new one. Last, my scrolling marquee is not centered. I had a bear of a time sorting through someone else's awful JavaScript but it is still off. Kind of frustrated with guessing. I am attaching files for the code and main css sheets. I am guessing that one of the CSS sheets is overriding the changes I want to make. But I do not know enough to find where. I know this is mostly about my struggle with Dreamweaver. I hope I posted in the right forum. Many thanks in advance! default.html layout.css CSSMenu_library2.css
-
Hello All, I am having an issue with a simple site where I would like an image inside a div to bleed top and bottom, no scroll bar, and have text on either side that is centered horizontally with the image. This is what I have for CSS: body { margin:0; padding:0; border:0; width:100%; background:#fff; max-height:100%; font-size:90%;}a { color:#7e99ad; text-decoration:none; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}a:hover { color:#000000; text-decoration:none;}a:active{ color:#000000; text-decoration:none;}h1 { margin:.8em 0 .2em 0; padding:0; font-size:18px; font-weight:lighter;}h2, h3 { margin:.8em 0 .2em 0; padding:0; font-size:14px; font-weight:lighter;}p { margin:.4em 0 .8em 0; padding:0;}img { margin:10px 0 0px;}#bg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;}#bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%;}#ads img { display:block; padding-top:0px;}/* column container */.colmask { position:relative; clear:both; float:left; max-width:100%; overflow:hidden; }/* common column settings */.colright,.colmid,.colleft { float:left; max-width:100%; position:relative;}.col1{ float:left; position:relative; overflow:hidden; margin: 0; white-space: nowrap; padding: 0; text-align: center;}.col2,.col3 { float:left; position:relative; padding:0 0 1em 0; overflow:hidden;}/* 2 Column (left menu) settings */.leftmenu { background:#fff; /* right column background colour */}.leftmenu .colleft { right:75%; /* right column width */ background:#fff; /* left column background colour */}.leftmenu .col1 { width:71%; /* right column content width */ left:102%; /* 100% plus left column left padding */}.leftmenu .col2 { width:13%; /* left column content width (column width minus left and right padding) */ left:6%; /* (right column left and right padding) plus (left column left padding) */ font:"Plantagenet Cherokee", "New times Roman", serif; color:#86A1BC;} /* Footer styles */#footer { clear:both; float:left; width:100%; border-top:1px solid #000;}#footer p { padding:10px; margin:0;} This is the HTML: <!doctype html><html><head><meta charset="UTF-8"><title>Thornton Rockwell Preservation Services</title><link href="stylesheet.css" rel="stylesheet" type="text/css"></head><body><!--CODE STARTS HERE --><div class="colmask leftmenu"> <div class="colleft"> <div class="col1"> <!-- Column 1 start --><h1><</h1> <img src="images/Abraham_Garfield/beforeafter.jpg" style="float: center; max-width: 100%;"> <h1>></h1> <!-- Column 1 end --> </div> <div class="col2"> <!-- Column 2 start --> <div id="ads"> <a href="Contact.html"><img src="images/Logo.png" width="100%"; border="0" alt="Thornton Rockwell Fine Art Conservation" /></a> </div> <br/> <br> <br/> <table style="width:75%; text-align:right" /> <tr> <td> <h1><p><a href="index.html">Portfolio</a></p></h1> <h1><p><a href="AGarfield.html">Abraham Garfield</a></p></h1> <h2><p><a href="Cenci.html">Beatrice Cenci 17th Century Copy</a></p></h2> <h2><p><a href="Deakin.html">Edwin Deakin</a></p></h2> <h2><p><a href="Healy.html">G.P.A. Healy</a></p></h2> <h2><p><a href="LadyJane.html">Lady Jane Grey</a></p></h2> <h2><p><a href="Hurd.html">Peter Hurd</a></p></h2> <h2><p><a href="RussianIcon.html">Russian Icon</a></p></h2> <h2><p><a href="Sully.html">Thomas Sully</a></p></h2> <h2><p><a href="Coulter.html">William A. Coulter</a></p></h2> </td> </tr> <tr> <td> <br/> <br/> <h1><p><a href="Contact.html">Contact</a></p></h1> </td> </tr> </div> <!-- Column 2 end --> </div> </div></div></body></html> Check out my screen shots as well. You will see that the page scrolls to fit in the whole image. I would like the image to bleed on top and bottom of page with NO scroll. I would like the arrows to be on either side of the image, horizontally centered with the image. Help!
-
I'm trying to make a site for senior project (A huge project in our school where we show skills we learn on our own), and I'll just come right out I have no idea what I'm doing. I'm surprised I have what I've got already. I'm trying to make a CSS document that makes it look like this image I'm about to attach, but so far, the CSS doc I've got looks nasty. Utterly colorless, and when I try adding color to the sides it just doesn't work. See attached image to see what I'm looking for. I'm not sure how to make this work however. And I've got 3 or 4 versions and methods I've attempted, and failed miserably at each. Here's my best one. Can I get some help? (And don't worry about logo placement, I'll fix that on my own after I get the rest figured out) CUE WALL OF CODE! @import url(http://fonts.googleapis.com/css?family=Philosopher);@font-face{font-family: rex;src: url(Fonts/rex.otf)} body{color: #FFFFFF;background-color: #7BD148;font-family: "philosopher", "Palatino Linotype", "Book Antiqua", Palatino, serif;text-indent: 25px;}.NavBar{color: #FFFFFF;background-color:#000000;font-family: "rex", "Arial Black", Gadget, sans-serif;text-indent: 25px;padding: 0;display: inline;text-align: center;width: 100%;float: left;margin: 0;list-style: none;background-color: #000000;border-bottom: 2px solid #d9d9d9;border-top: 2px solid #FFFFFF;}h1{text-align: center;font-weight: bold;font-size: 250%;font-family: "rex", "Arial Black", Gadget, sans-serif;}.article{-webkit-column-count:3; /* Chrome, Safari, Opera */-moz-column-count:3; /* Firefox */column-count:3;-webkit-column-gap:40px; /* Chrome, Safari, Opera */-moz-column-gap:40px; /* Firefox */column-gap:40px;-webkit-column-rule:4px outset #7BD148; /* Chrome, Safari, Opera */-moz-column-rule:4px outset #7BD148; /* Firefox */column-rule:4px outset #7BD148;background-color: #000000;margin-left:25px; margin-right:25px; }.stronger {font-weight: bold;}.tab{display: block;padding: 8px 15px;text-align: center;display: inline;border-right: 1px solid #000000;border-left: 1px solid #000000;}a:link {text-decoration:none;color:#00ADDC;} /* unvisited link */a:visited {text-decoration: none;color: #A47AE2;} /* visited link */a:hover {text-decoration: underline;color: #7BD148;} /* mouse over link */a:active {text-decoration: underline;color: #FF7436} /* selected link */ <!DOCTYPE html><html lang="en"> <head> <title>Template HTML page. </title> <meta content="text/html; charset=windows-1252" http-equiv="content-type"> <link rel="stylesheet" type="text/css" href="style/theme.css"> </head> <body> <div class="NavBar"> <ul class="NavBar"> <li class="tab"><a href="index.html"> Home </a></li> <li class="tab"><a href="challenges"> Challenges </a></li> <li class="tab"><a href="impact"> Impact </a></li> <li class="tab"><a href="powersources"> Power Sources </a></li> <li class="tab"><a href="action"> Action </a></li> </ul> </div> <div class="headline"> <h1> <p><img src="graphics/construction.png" width="728" height="90" alt="This site is under construction..."></p> <p><img src="graphics/banners/logo.png" alt="Energized."></p> <p> </p> <p>Template for Energized.</p> </h1> </div> <div class="article"> <p> Nearly everyone is concerned about how much fuel we use, either in the form of how much we spend on fuel or about global warming. Either way, we're paying for the energy we use to do nearly everything in our lives. Transportation, games, cleaning, cooking, construction, light, internet, EVERYTHING in our lives costs fuel. And everyone has a reason to cut back on fuel usage. There are ways to cut back on fuel usage, either by picking up a skill or simply making a new habit (or breaking one). But how effective is this? Well, it's different for everyone, but I bet that it can be reduced by half for some folks.</p> <p>Will it work for you? I can't tell, but I can help you to find out for yourself. Go ahead!<!--zzz...zZz...ZzZ...ZZZ...--> </p> </div> </body></html>
-
I've been recoding my site to implement some of the html 5 and css 3 into my site that are supported by most browsers currently (my code was way outdated). I decided to make the leap from plain old html tables that I've used for over 10 years and switch over to div tags and css for my "tables". After some struggling I've managed to get it all figured out and my layout looks correct in Firefox 19, however in both IE 8 and Chrome 22, at the bottom of the code where I have a 'footer' on my site, the left and right borders are not aligning correctly and are 2 pixels smaller. (see screenshot of a closeup of the border issue) My best guess at this is that the scrollbar in the browsers is to blame. I have heard of similar issues before. My main "table" is set to 1000px and the footer "table" is also set to 1000px but, like I said above, it's displaying 2px shorter in IE and Chrome. If I switch it to 1002px it is then 2px too large in Firefox. How can I get this fixed so the border lines up across all browsers? I'd prefer not to use a percentage in my width or it will cause issues with my banner which is sized to fit perfectly in the 1000px width area. My knowledge is so outdated with a lot of the code now days so between that and the fact that I've had a horrible headache for the last few days, I just can't get this figured out.
-
Hey there,First time poster here (could'nt find the answer on the site or in the forumtopics). I have this site with the main container centered on the screen. But now there seems to be a problem with the entire site moving a few pixels to the left when 'something' happens. After some lengthy troubleshooting I discovered this happened when the site increased in vertical length beyond the browser window (or beyond something else).It seemed to me I 'broke a box' somewhere but none of my div's have height assigned (as they need to grow with the content). I tried adjusting almost everything but I can't seem to get rid of the 'skip to the left'. Did anyone encounter this before? Not sure what to show you, would me css file help? Thanks in advance.
-
Hi, I would like to have image with caption printed below the image in XSL-FO. the caption should have right alignment. I am using table for that. It prints images with captions but the problem is the alignemnt of the caption compared to the caption. If the alignment of the image is 'right' then all looks fine: caption is just below the image at the right side. but if the image is center or left then still at the far right of the page. The problem is the table is full width of the page but the image is smaller. The problem can be solved if the width and the alignment of the table corresponds to the width and the alignment of the image. please note that for most of the images its width is not specified. Will really appreciate help to resolve this issue. regards, rnv
-
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?
-
So, I have finally worked out how to center my navigation menu horizontally in a cross-browser compatible way. The problem I now have though is with my dropdowns. They have inherited some of the attributes I used to center the nav and now, when the menu parent is hovered over, the dropdown pops up over it, rather than under and to the side a bit. I've tried a few fixes though am not sure the best way to go about resolving the issue in the most browser friendly way.I'm sorry, though my site is not yet live. #nav {-khtml-border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;background-image:url(/wp-content/themes/child/images/banner.png);border-radius: 0px;clear: both;color: #555;margin: 0 auto 0px;overflow: hidden;text-align: center;text-transform: uppercase;height: 35px;width: 920px;}#nav ul {width: 100%;margin: 0 auto;display: inline-block;list-style: none;}#nav li {display: inline-block;list-style: none;}#nav li a {color: #90877C;display: block;font-size: 12px;float: left;margin: 0px 0px 0px 0px;padding: 8px 15px 0px 15px;text-decoration: none;}#nav li a:hover,#nav li a:active,#nav li:hover a,#nav .current_page_item a,#nav .current-cat a,#nav .current-menu-item a {color: #90877C;}#nav li a:hover {color: #222;}#nav li li a,#nav li li a:link,#nav li li a:visited {background: #fbf7eb;border-top-width: 0px;color: #555;font-size: 11px;position: relative;margin: 0px px 0px 5px;text-transform: none;text-align: left;width: 100px;}#nav li li a:hover,#nav li li a:active {color: #222;}#nav li ul {height: auto;left: -9999px;margin: 0 0 0 -1px;position: absolute;width: 150px;z-index: 9999;}#nav li ul a {width: 130px;}#nav li ul ul {margin: -33px 0 0 122px;}#nav li:hover>ul,#nav li.sfHover ul {left: auto;} I should probably mention I'm just learning CSS so any clear suggestions would be great. Thanks so much.
