Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 days ago.
Improve this question
Can someone advise how to move below section (skills) to left side of page.
enter image description here
and still keep below sections on right side same time ( work history, education, courses)
enter image description here
Here is my code. Please speak like to Chihuahua. Its very first code in my life.
enter image description here
<section >
<h3>
Skills
</h3>
<ul>
<h4>Languages</h4>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Java</li>
<h4>Libraries</h4>
<li>React</li>
<h4>Framework</h4>
<li>
Angular.js
</li>
<h4>CI/CS</h4>
<li>
GIT
</li>
</ul>
</section>
<section>
<h2>Work History</h2>
<ul>
<li>2015 Amazon</li>
<li>Amazon Manager</li>
<li> DHL</li>
</ul>
</section>
<section>
<h2>Education</h2>
<ul>
<li>ALO</li>
</ul>
</section>
<section>
<h2>Courses</h2>
<ul class="Courses">
<li><img src="car.png"/> Driving licence</li>
</ul>
</section>
</main>
</div>
</body>
Please if someone can advise how to make amend css to make it work.
Try something like this :
<div style="display: flex; align-items: flex-start;justify-content:space-around;flex-flow: row wrap;">
<section>...</section>
<section>...</section>
</div>
Maybe this :
<div style="display: flex; align-items: flex-start;justify-content:space-around;flex-flow: row wrap;">
<section>
<h3>
Skills
</h3>
<ul>
<h4>Languages</h4>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Java</li>
<h4>Libraries</h4>
<li>React</li>
<h4>Framework</h4>
<li> Angular.js</li>
<h4>CI/CS</h4>
<li>GIT</li>
</ul>
</section>
<div>
<section>
<h2>Work History</h2>
<ul>
<li>2015 Amazon</li>
<li>Amazon Manager</li>
<li> DHL</li>
</ul>
</section>
<section>
<h2>Education</h2>
<ul>
<li>ALO</li>
</ul>
</section>
<section>
<h2>Courses</h2>
<ul class="Courses">
<li><img src="car.png"/>Driving licence</li>
</ul>
</section>
</div>
</div>
Related
I wrote an HTML document with seven anchor links to jump to different section on the page. However, only the first and the last links are working and the rest are not working. I cloned the first section which is working alright and then changed the id to the second section. And that made the second anchor link working. So, I know that somewhere in my second to the second last section is not working. However, I cannot find where is wrong. My code passed the w3.org's validator. Could someone look into my code to see what is the problem. I'm still a beginner so please go easy on me. Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jade Ichinose Resume</title>
</head>
<body>
<h1>Jade</h1>
<span id="email">Email:</span>
<span id="phone">Mobile:</span>
My LinkedIn Profile
<section>
<h3>Overview</h3>
<ul>
<!-- Link to every section in the page -->
<li>Personal Summary</li>
<li>Education</li>
<li>Skillset</li>
<li>Working Experience</li>
<li>Voluntary Experience</li>
<li>Hobbies and Interests</li>
<li>Referees</li>
</ul>
</section>
<section id="personal_summary">
<h2>Personal Summary</h2>
<p>
describing myself what I studied experience job, volunteering Career goal -> What I want to achieve for the company using my skills and experience
</p>
</section>
<section id=“education”>
<h2>Education</h2>
<ul>
<li>date (start mmm/yy - completed mmm/yy) school</li>
<li>major</li>
<li>Achievement — what I did well in the study —
<ul>
<li>computer programming with the result A+
<ul>
<li> languages and field, courses</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
<section id=“skillset”>
<h2>Skillset</h2>
<ul>
<li>Hard skills— languages, maths, software, SublimeText3, Wing, Geany, Spyder</li>
<li>Soft skills, English, Japanese, fundamental level Chinese(mandarin), team-orientated, time management,</li>
</ul>
</section>
<section id=“working_experience”>
<h2>Working Experience</h2>
<ul>
<li>date (start mmm/yy - completed mmm/yy) company </li>
<li>role, position</li>
<li>Achievement — what I did well in the job —
<ul>
<li>example1
<ul>
<li> detail about example1 may not be required</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
<section id=“voluntary_experiene”>
<h2>Voluntary Experience</h2>
<ul>
<li>date (start mmm/yy - completed mmm/yy) company or organisation (church)</li>
<li>role, position</li>
<li>Achievement — what I did well in the job —
<ul>
<li>example1
<ul>
<li> detail about example1 may not be required</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
<section id=“hobbies_interests”>
<h2>Hobbies and Interests</h2>
<ul>
<li>Cooking</li>
<li>Minerals and Lapidary</li>
</ul>
</section>
<section id="referees">
<h2>Referees</h2>
<ul>
<li>name of the referee, position, company, contact detail (email or phone number)</li>
<li>referee 2</li>
<li>referee 3</li>
</ul>
</section>
</body>
</html>
Take a close look on your ".
<section id=“education”>
<section id="education">
The first is not working, the second does work. You are using a 'right double quotation mark' (”) and not a 'normal quotation mark' (") in the other sections. The first section personal_summary is fine.
The quotation marks that you have used for id are wrong
Use
<section id="education">
Instead of
<section id=“education”>
Same for all other non-working sections
You made a tiny mistake on the type of quotation mark you used.The first and the last are fine and you've used ".." but on the rest you've made the mistake of using “...”. For example for education, you had it as: section id=“education” Instead of:section id="education"
You've also named an ID as id=“voluntary_experiene” and called it using:href="#voluntary_experience" which has a slight spelling mistake. The code below has all the fixed/working anchor tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jade Ichinose Resume</title>
</head>
<body>
<h1>Jade</h1>
<span id="email">Email:</span>
<span id="phone">Mobile:</span>
My LinkedIn Profile
<section>
<h3>Overview</h3>
<ul>
<!-- Link to every section in the page -->
<li>Personal Summary</li>
<li>Education</li>
<li>Skillset</li>
<li>Working Experience</li>
<li>Voluntary Experience</li>
<li>Hobbies and Interests</li>
<li>Referees</li>
</ul>
</section>
<section id="personal_summary">
<h2>Personal Summary</h2>
<p>
describing myself
what I studied
experience job, volunteering
Career goal -> What I want to achieve for the company using my skills and experience
</p>
</section>
<section id="education">
<h2>Education</h2>
<ul>
<li>date (start mmm/yy - completed mmm/yy) school</li>
<li>major</li>
<li>Achievement — what I did well in the study —
<ul>
<li>computer programming with the result A+
<ul>
<li> languages and field, courses</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
<section id="skillset">
<h2>Skillset</h2>
<ul>
<li>Hard skills— languages, maths, software, SublimeText3, Wing, Geany, Spyder</li>
<li>Soft skills, English, Japanese, fundamental level Chinese(mandarin), team-orientated, time management,</li>
</ul>
</section>
<section id="working_experience">
<h2>Working Experience</h2>
<ul>
<li>date (start mmm/yy - completed mmm/yy) company </li>
<li>role, position</li>
<li>Achievement — what I did well in the job —
<ul>
<li>example1
<ul>
<li> detail about example1 may not be required</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
<section id="voluntary_experience">
<h2>Voluntary Experience</h2>
<ul>
<li>date (start mmm/yy - completed mmm/yy) company or organisation (church)</li>
<li>role, position</li>
<li>Achievement — what I did well in the job —
<ul>
<li>example1
<ul>
<li> detail about example1 may not be required</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
<section id="hobbies_interests">
<h2>Hobbies and Interests</h2>
<ul>
<li>Cooking</li>
<li>Minerals and Lapidary</li>
</ul>
</section>
<section id="referees">
<h2>Referees</h2>
<ul>
<li>name of the referee, position, company, contact detail (email or phone number)</li>
<li>referee 2</li>
<li>referee 3</li>
</ul>
</section>
</body>
</html>
I want to list 3 points for 1 column and 3 points for second column. I want the "P" to be centered.
<div class="maindiv">
<p>This is a list of Adobe softwares</p>
<ul>
<li>Dreamweaver</li>
<li>Photoshop</li>
<li>Flash</li>
</ul>
<ul>
<li>Indesign</li>
<li>Illustrator</li>
<li>After Effects</li>
</ul>
</div>
See the fiddle
Below given is the HTML that i've used
<div class="maindiv">
<p class="centertext">This is a list of Adobe softwares</p>
<div class="floated">
<ul>
<li>Dreamweaver</li>
<li>Photoshop</li>
<li>Flash</li>
</ul>
</div>
<div class="floated">
<ul>
<li>Indesign</li>
<li>Illustrator</li>
<li>After Effects</li>
</ul>
</div>
</div>
And the CSS that I've used
.floated {
float:left;
width:50%;
}
.centertext {
text-align:center;
}
http://jsfiddle.net/ApS9L
I have this DIV which I am trying to align with the other two divs. In the fiddle, you can see there is the border of 'our data center' and 'our other services', which align with each other in a 960 width frame (works great when resizing). However, I can't get the 'every account includes' to stay aligned with the two other sections below, and it stretches across, far beyond 960px.
Can you help me get the top div to align with the other two divs.
Here is an image of live to show you my issues (there is a another column but it was breaking the fiddle). The colums are all grid_4 so grid_4*3 = 12, which shouldn't be causing issues..
Here is FULL HTML, please look on fiddle for CSS
<div id="hostingservices" class="grid_12">
<div id="insidehostingservices" class="grid_12margin">
<div class="constrain">
<h1 class="bigtitle">Every Account Includes</h1>
<div class="grid_4 alpha">
<h2>Email Features</h2>
<ul>
<li>UNLIMITED 1GB eMail Inboxes</li>
<li>POP3, IMAP & SMTP Access</li>
<li>Autoresponders & Mailing Lists</li>
<li>Email Forwarding, Catch All & Spam filtering</li>
<li>Junk Mail Filters</li>
</ul>
<h2>Website Statistics</h2>
<ul>
<li>Error & Access/Referrer/Agent Logs</li>
<li>Website Statistics</li>
<li>Google Sitemaps Generator</li>
<li>Webalizer Graphical Statistics</li>
<li>AWStats Graphical Statistics</li>
<li>Advanced Graphical & Text Counters</li>
<li>Bandwidth Statistics</li>
<li>Tracewatch</li>
</ul>
<h2>Access Features</h2>
<ul>
<li>Master & Additional FTP Accounts</li>
<li>SSH Access</li>
</ul>
<h2>Databases</h2>
<ul>
<li>MySQL 5 Databases</li>
<li>MySQL Web GUI</li>
</ul>
</div> <!-- end of insideourdataservices grid9 alpha-->
<div class="grid_4">
<h2>Advanced Features</h2>
<ul>
<li>eXtend Based Control Panel</li>
<li>Sub Domains</li>
<li>Microsoft FrontPage Extensions</li>
<li>Online File Manager</li>
<li>Website Redirection</li>
<li>Website submission to Google</li>
<li>Advanced Website Password Protection</li>
<li>Scheduled Tasks</li>
<li>IP Adress Blocking</li>
</ul>
<h2>Programming</h2>
<ul>
<li>PHP 4, PHP5 with SOAP Support</li>
<li>Perl, Python, Miva, RealAudio</li>
<li>Sun ONE ASP (Chilisoft ASP)</li>
<li>Ruby, Rails, ImageMagick, Ghostscript</li>
<li>Zend Optimizer, GD</li>
</ul>
<h2>E-Commerce</h2>
<ul>
<li>Shared Secure Server Access (https)</li>
<li>osCommerce, Zen, CubeCart, Agora</li>
<li>Lots of Free Webtools inc Clipart</li>
<li>Google Adwords</li>
</ul>
</div>
<div class="grid_4 omega">
<h2>One Click Installations</h2>
<ul>
<li>Joomla 1.5</li>
<li>Wordpress Blog, Drupal</li>
<li>phpBB3 Discussion Forums</li>
<li>Elgg Social Networking System</li>
<li>CMS Made Simple, Guestbook, Geeklog</li>
<li>Nucleus Blog, Eblah Online Discussion</li>
<li>Typo3 CMS, Crafty syntax Live help</li>
<li>dot Project Management System</li>
<li>osTicket Ticeting helpdesk system</li>
<li>Form to Email with CAPTCHA</li>
<li>Custom 404 and 500 Error Pages</li>
<li>Online Auction (just like ebay!)</li>
<li>Online Photo Album</li>
<li>Web Calendar</li>
<li>Web Survey</li>
<li>Internet Countdown, Random Text Displayer</li>
<li>Random Images Displayer</li>
<li>Round Cube Webmail, MediaWiki</li>
<li> SugarCRM</li>
<li>Many Javascript Generators</li>
</ul>
</div>
Order Now
</div>
`</div> <!-- end of insideourdataservices grid12 margin-->
</div> <!-- end of ourdataservicesimage grid3 omega-->
<div class="clear"></div> <!-- clears ourdataservices grid12-->
remove min-width from the below style
#hostingservices {
height: 800px;
/* min-width: 1500px; */
background: #F2F7FA;
border-style: solid;
border-bottom-width: thin;
border-color: #ccc;
}
So I got this header, I want the logo in the middle, and then 2 links on the left and 2 links on the right. I guess I know how to do this but not what the best way is. Got what I think that works below. Edit: Obviously no css applied yet, gotta get the html straight first.
So here's the header
<header>
<div id="head-wrap">
<nav>
<ul>
<li>Smartphones</li>
<li>Tablets</li>
<li>Laptops</li>
<li>Desktops</li>
</ul>
</nav>
</div>
</header>
What might work
<header>
<div id="head-wrap">
<nav>
<div id="nav-left>
<ul>
<li>Smartphones</li>
<li>Tablets</li>
</ul>
</div>
<img src="logo.png" alt="Logo" height="42" width="42">
<div id="nav-right">
<ul>
<li>Laptops</li>
<li>Desktops</li>
</ul>
</div>
</nav>
</div>
</header>
Is this the best way or should I do it differently?
Regards
Your example has a lot of superfluous HTML elements in it. Instead of multiple div containers, try something like this:
<nav>
<ul>
<li>
Smartphones
</li>
<li>
Tablets
</li>
<li>
<img src="logo.png" alt="Logo" height="42" width="42" />
</li>
<li>
Laptops
</li>
<li>
Desktops
</li>
</ul>
</nav>
Then display the li elements inline:
li{
display:inline;
}
Example
Obviously you'll need to edit this more to fit your own needs, but a simple structure is the start of a good design.
I'm having some issues when it comes to formatting a webapp I'm working. For some reason when I try to display a table next to a tree it shoves it under the tree instead of beside it.
Considering I haven't made a website since 1998 I think I'm doing ok, but anyway here's the code.
<div style="height:55px;border-bottom: 1px solid black;float:top;">
<div id="menu_div" style="height:50px;width:200px;margin-top:15px;margin-bottom:15px;display:inline-block;">
<ul id="menu">
<li>Menu
<ul>
<li>Configure IP</li>
<li>Configure Local Share</li>
<li>Send Files Now</li>
<li>Allow Remote Access</li>
<li>Add Source
<ul>
<li>MySQL</li>
<li>MSSQL</li>
<li>Remote Share</li>
</ul>
</li>
<li>Refresh Local Share</li>
<li>Backup Device</li>
</ul>
</li>
</ul>
</div>
<div style="float:right;margin-top:10px;display:inline-block;">
<span style="vertical-align:middle;margin-left:20px;"><img src="png/glyphicons_457_transfer.png" /></span>
<span id="deletePic" style="vertical-align:middle;margin-left:20px;"><img src="png/glyphicons_256_delete.png" /></span>
</div>
</div>
<div id="lower">
<div id="mainCon" style="width:300px;height:100%;border-right: 1px solid black;float:left;display:inline-block;">
<div id="browser"></div>
<div id="subBrowser"></div>
</div>
<div>
<div style="float:right;margin-left:320px;display:inline-block;">
<div id="displayTable"></div>
<pre><p style="margin-left:10px;" id="displayText"></p></pre>
</div>
</div>
</div>