I have created a page with a series of buttons. All the buttons have a height of 65 pixels.
Some of the buttons have fallen out of alignment due to "word-wrap", see linked image.
CSS:
div {
width: 1250px;
margin: 0 0 5px 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-size: 14pt;
font-weight: bold;
font-style: italic;
margin: 0 0 5px 0
}
div button {
height: 65px;
font-size: 11pt;
text-align: center;
margin: 0;
padding: 0 3px 0 3px;
border: none;
color: white;
white-space: normal;
}
The rest of my CSS just affects the color of the buttons.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="Stylesheet" href="styles/home.css"/>
</head>
<body>
<div id="header">
<h1>Process Framework</h1>
</div>
<div id="row1">
<button>Manage Strategy</button><!--
--><button>Manage Stakeholder</button><!--
--><button>Manage Risk</button><!--
--><button>Manage Manage Governance & Compliance</button><!--
--><button>Manage Financial Performance</button>
</div>
<div id="row2">
<button>B.2 Develop New Business</button><!--
--><button>A.1 Manage E&P Mid Term Plan</button><!--
--><button>A.2 Manage Reputation</button><!--
--><button>A.3 Manage E&P Management System</button><!--
--><button>A.4 Manage Legal Entity</button><!--
--><button>A.5 Govern Non-Operated Ventures</button><!--
--><button>A.6 Opportunity Maturation and Project Delivery</button>
</div>
<div id="row3">
<button>C.1 Exploration</button><!--
--><button>C.2 Development</button><!--
--><button>C.3 Production & Maintenance</button><!--
--><button>C.4 Abandonment</button>
</div>
<div id="row4">
<button>D.1 Manage Asset</button><!--
--><button>D.2 Manage Hydrocarbon Resource Volumes</button><!--
--><button>D.3 Manage Integrated Activity Planning</button><!--
--><button>D.4 Manage Activities</button><!--
--><button>D.5 Manage Risk</button><!--
--><button>D.6 Manage Processes</button><!--
--><button>D.7 Manage and Deploy Technology</button><!--
--><button>D.8 Information Management</button>
</div>
<div id="row5">
<button>E.1 Legal</button><!--
--><button>E.2 Finance & Controlling</button><!--
--><button>E.3 Procurement</button><!--
--><button>E.4 HR</button><!--
--><button>E.5 HSSE</button><!--
--><button>E.6 Communication</button><!--
--><button>E.7 Information Technology</button>
</div>
<div id="footer">
</div>
</body>
</html>
Any help would be greatly appreciated.
Thanks in advance.
You should define to your button the vertical alignement. If you really want to keep the display inline-block. Otherwise float: left; do the job without reseting the space between button with comment <!----> (so better for maintainability).
button { vertical-align: middle;}
Put your buttons in an un-styled unordered list and let the list do the aligning for you.
<ul>
<li><button></li>
<li><button></li>
...
</ul>
CSS:
ul, li {
list-style:none;
margin:0;
padding:0
}
li {
float:left
}
Add vertical-align: middle; to the buttons.
Related
This will be an easy question for you to answer. I'm making a Google Clone Homepage, and I'm trying to connect my CSS and HTML. For some reason it isn't working.
My HTML and CSS are in the same folder so that's not the problem. In my HTML sheet, I've already linked to the external CSS stylesheet as well. The HTML code is below.
<style>
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
</style>
I'm expecting to see my HTML change because of my CSS, but I don't see that.
You can find my full HTML code: https://codeshare.io/ay3yrw
And full CSS here: https://codeshare.io/GABLnN
link tag is used directly inside the head tag
It must be like this:
<head>
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
</head>
I check your code and I found three main reasons why your CSS doesn't work properly.
1. link tag
As many others mentioned, you need to remove the <style> ... </style> tag from the <head> tag and use the <link> tag directly inside of it.
2. Not id but class
Your HTML and CSS have many errors. For example, you are styling in the CSS file:
.top left links {
...
}
Here .top is defined as a class but in your HTML code you defined it as an id, check this line:
<!-- Containing Top Left Links on Nav Bar -->
<div id="top left links">
...
</div>
<!--Containing Top Right Links on Nav Bar-->
<div id="top right links">
...
</div>
Remember that an id should be unique therefore you should change id attributes with class attributes.
3. No white spaces
In your CSS file all your definitions are incorrect:
.top left links {
...
}
From this definition, we know that .top is a class, but left and links are representing tags. And we all know that where is no <left> nor <links> tags they should be represented as classes. Also, remember that you concatenate them when you want to refer to a single element with multiple classes and you separate classes by a white space when you want to refer to a descendant element.
So the correct definition will be without white spaces:
.top.left.links {
...
}
Finally, I did some modification on the CSS file for the .search1 class. Check this code:
/* Google Duplicate CSS */
.top.left.links {
float: left;
color: #718090;
text-align: left;
padding: 30px;
margin: auto;
list-style-type: none;
}
.top.left.links a:hover {
text-decoration: none;
}
.top.right.links {
float: right;
color: #718090;
text-align: right;
padding: 30px;
margin: auto;
list-style-type: none;
}
.top.right.links a:hover {
text-decoration: none;
}
#ham_menu {
height: 24px;
width: 24px;
float: right;
}
.search1 {
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f1f1f1));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
-webkit-border-radius: 2px;
-webkit-user-select: none;
color: #5F6368;
height: 36px;
line-height: 27px;
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 4px;
cursor: pointer;
font-family: arial, sans-serif;
font-size: 14px;
margin: 11px 4px;
min-width: 54px;
padding: 0 16px;
text-align: center;
}
.bottom.left.links,
.bottom.right.links {
list-style-type: none;
color: #718090;
padding: 30px;
margin: auto;
font-size: 13px;
}
.bottom.left.links {
float: left;
}
.bottom.right.links {
float: right
}
.footer {
position: fixed;
min-width: 980px;
z-index: 103px;
height: 64px;
background-color: lightgray;
}
<!--Header Menu of Page -->
<header>
<!-- Containing Top Left Links on Nav Bar -->
<div class="top left links">
About
Store
</div>
<!--Containing Top Right Links on Nav Bar-->
<div class="top right links">
<li>Gmail</li>
<li>Images</li>
<li>Sign In</li>
</div>
</header>
<!--Top Right Ham Menu-->
<img id="ham_menu" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" class="right">
<!--Actual Google Image, Search Form, and Buttons-->
<center>
<img src="http://www.google.com/logos/doodles/2019/us-teacher-appreciation-week-2019-begins-4994791740801024-2x.jpg" alt="Happy US Teacher Appreciation Week 2019!" class="center">
<form class="search" input type="text"> </form>
<button class="search1" type="submit" value="Google Search" style="visibility">
Google Search
</button>
<button class="search1">
I'm Feeling Lucky
</button>
<p>We're supporting teachers inspiring the next generation.</p>
</center>
<!--Footer Links-->
<footer>
<div class="bottom left links">
Advertising
Business
</div>
<div class="bottom right links">
<li>Privacy</li>
<li>Terms</li>
</div>
</footer>
Remove the style tag from the beginning and end of the link tag, like the following
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
Remove the style tag from the beginning and end of the link tag, like the following
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
and in this condition make sure your HTML file and CSS file need to be in same folder.
Please, remove the <script> tag so that you can reference this CSS file.
here, i want to place Notification and profile link to right side and home assignment, my course, student, message to left side. I made one div and through CSS i put it in center position and width to some %. Now, I want to place left side link and some space and right side link. how it can be done in a single div.
enter image description here
You can have 3?
<div class="header">
<div id="left">
<--!Whatever code you wrote for the home, assignment, myCourse, student, and message buttons!-->
</div>
<div id="right">
<--!Whatever code you wrote for the notification and profiles button!-->
</div>
</div>
Does that count as one div? I can't think of another way to do it, but I really don't know that much either so others probably know.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav-right {
float: right;
}
</style>
</head>
<body>
<div class="topnav">
Home
MyCourse
Student
Assignment
Message
<div class="topnav-right">
Notification
Profile
</div>
</div>
</body>
</html>
Actual webpage
I'm trying to display code snippets on my webpage. I'm a CSS novice and having trouble creating a dark background on which to display my code snippets.
When I create a class called "test" (which should override all other background specifications, right?) and assign it a color property of blue and a background property of black, the color blue shows up within pre tags but the background remains the default color.
When I switch to span tags and assign the class there instead, both properties work as I command. But I don't want to use span because my instructors say non-semantic tags are bad practice. Something tells me that there's some inherent property of pre tags that I need to override somehow.
Any ideas? I can post the code here if that's proper/necessary.
Edit: I posted an abbreviated version of the code here. I tested it, and got the same issue here. Hopefully with less code it will be easier to pinpoint the problem.
Here's the HTMl:
<!DOCTYPE html>
<head>
<title>Test</title>
<link type="text/css" rel="stylesheet" href="stylesheets/test.css">
</head>
<body>
<p>
<pre class="test">test</pre>
</p>
</body>
</html>
Now the CSS:
.test {
color: blue;
font-weight: bold;
background: black;
}
pre {
font-family: monospace;
font-size: 1.25em;
text-align: left;
line-height: 0px;
background: black;
}
The more specific the rule, the more likely it will be to override a parent class or id. Give this one a shot...
.snippets div{
background-color: #F00;
}
.snippets div.no_code{
background-color: #000;
}
<div class="snippets">
<div> </div>
<div> </div>
<div> </div>
<div class="no_code"> </div>
<div> </div>
<div> </div>
</div>
have you tried with background-color property of pre tag?
Please check my codepen link. http://codepen.io/anon/pen/gaydao
HTML:
<body>
<p>
<pre>test</pre>
</p>
</body>
CSS:
.test {
color: red;
font-weight: bold;
background: black;
}
pre {
font-family: monospace;
font-size: 1.25em;
text-align: left;
line-height: 0px;
border: 1px solid #000;
height: 50px;
background-color:#DDFFDD;
padding: 10px 0 0 10px;
}
you have to use !important on your class because it's already defined the color property in another class...
.code{
background-color: #000 !important;
}
.box{
width: 250px;
height: 20xp;
background-color: red;
display: inline-block;
margin: 5px;
}
.code{
background-color: #000 !important;
}
<div class="box code"> </div>
<div class="box code"> </div>
<div class="box code"> </div>
<div class="box no_code"> </div>
<div class="box code"> </div>
<div class="box no_code"> </div>
<div class="box no_code"> </div>
I have a problem here i am getting space around this text i was not able to get rid off.
i cannot apply globally padding:0 or margin:0 to the all divs. My div is part of the page i want to remove extra space around my div alone i cannot apply padding:0 or margin:0 to body also.
<html>
<body>
<div class="topcont" id="topcont" style="display: block;padding:0px;margin:0px">
<div id="dragcont" style="display: block;padding:0px;margin:0px">
<div style="padding:0px;margin:0px; text-align: center; font-size: 18px; font-weight: bold; font-family: Helvetica Neue;">
Drop up to 5 photos here
</div>
<div style="padding:0px;margin:0px; font-size: 18px; font-family: Helvetica Neue; border: 0px none; height: 18px; text-align: center;">
Or
</div>
</div>
<div style="padding:0px;margin:0px;color:#333; text-align:center; font-size:14px;font-family:Helvetica Neue">
to add them as attachments
</div>
</div>
</body>
</html>
I dont know why i am getting space above the given texts.
You can easily set margins to 0 using the following on any element.
#myDiv{
margin:0px;
}
Note the 0px; and not 0;
For rendering/optimization purposes its good to include the unit of measurement (e.g. px,em,etc)
You need to set the margins to 0 for the elements that border it, depending on the rest of the layout possibly for the relevant directions only.
http://jsfiddle.net/sCj6y/1/ here you go but you should not style elements in the HTML file.
How do I get the p-tag with text "jon harris" beside the p-tag with text "Room 2"
I have tried float-combinations.. but there is something missing..i guess.
here the html code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Twitter Avatar Scrolling</title>
<link rel="stylesheet" href="css/events.css" />
</head>
<body>
<div class="event">
<img src="images/red.jpg" alt="picture" />
<p>Room 2</p>
<p class="patient-name">Jon Harris</p>
<p class="event-text">This is a pixel. A flying pixel!</p>
<p class="event-timestamp">feb 2 2011 - 23:01</p>
</div>
</body>
</html>
here is the css:
body {
font:13px/1.5 "helvetica neue", helvetica, arial, san-serif;
}
.event {
display:block;
background: #ececec;
width:380px;
padding:10px;
margin:10px;
overflow:hidden;
text-align: left;
}
.event img {
float:left;
}
.event p {
margin:0;
padding-left:60px;
font-weight: bold;
}
.patient-name {
color: #999999;
font-size: 9px;
padding-left: 5px;
}
.event-text{
color: #999999;
font-size: 12px;
padding-left: 5px;
}
.event-timestamp{
color: #000;
padding-left: 5px;
font-size: 9px;
}
Here you go ... http://jsfiddle.net/2N6tu/
You just need to turn the first two <p> elements to inline elements.
Create a wrapper around those two P tags, set the width of those two P tags and add float: left to both e.g:
<div class="event">
<img src="images/red.jpg" alt="picture" />
<div class="event-wrapper">
<div class="event-inner-wrap">
<p class="room-number">Room 2</p>
<p class="patient-name">Jon Harris</p>
</div>
<div class="clear"></div>
<p class="event-text">This is a pixel. A flying pixel!</p>
<p class="event-timestamp">feb 2 2011 - 23:01</p>
</div>
</div>
css
.clear {
clear: both;
}
.event-wrapper {
width: 300px; /*** assuming that image is 80px, i didn't measure ***/
float: left;
}
.event-inner-wrap {
width: 300px; /*** assuming that image is 80px, i didn't measure ***/
}
p.room-number {
width: 150px; /** set as whatever you like, just make sure this width plus the width of the patient name is no bigger than the wrapper width **/
float: left;
}
p.patient-name {
width: 150px; /** set as whatever you like, just make sure this width plus the width of the room number is no bigger than the wrapper width **/
float: left;
}
Good luck.
Edit, because I saw that image you posted after I added this.
Edit again, because you don't need the extra clear: both; and I missed off 2 semi's.
Note, if you end up using Span tags instead of P the same above principle applies, however, the Span will require a display: block; on them if setting widths etc.
have you tried
.event p{display:inline;}