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.
Related
I'm having issues trying to create a "banner" above the navigation bar on my website using CSS/HTML.
I can't get a background color to display in the banner, and I also can't manage to get the header text to float to the right of the banner logo/icon. Here is my code so far for both HTML header and CSS.
HTML:
<header>
<link href="index.css" rel="stylesheet">
<div class="banner">
<img src="logo.png" class="profile-picture" alt="Header Logo">
<h1 class="title">Header info 1</h1>
<h2 class="title">Header info 2</h2>
<h3 class="title">Header info 3</h3>
</div>
<nav>
<! --this part works fine so code omitted -->
</nav>
</header>
Here is the CSS:
.header img{
float: left;
}
.header .banner{
display:inline-block;
*display:inline;
padding: 20px;
background-color: #5C5F58;
margin:10px;
}
.header .banner .title{
display:inline-block;
*display:inline;
font-family: 'Bebas Neue', sans-serif;
color: #ffffff;
text-transform: uppercase;
}
So a summary of the problems I'm having:
I can't get the logo to float to the left of the title headings (they appear underneath the logo)
I can't get the background color of the banner to change
I can't get the font style or font color to change
I know it's probably the way I'm referring to these elements in the CSS, but I can't figure out how to refer to them properly.
Thanks in advance for your help
I can't get the logo to float to the left of the title headings (they
appear underneath the logo)
You give 1 sibling inside .banner float and the other one is not floating. This will make them overlap. Give either none or both of them float.
I can't get the background color of the banner to change
Use the background-color css-property.
I can't get the font style or font color to change
Change the .header into header in your css. The first one is targeting the class header and the latter one targets the header html-tag.
Pro tip: try using an online code editor with HTML and CSS like Codepen to ask your questions. This will make it easier for people to try and answer your questions resulting in faster and more elaborate answers.
I have replaced the css class to inline css checkit out if it can help
<div style='background-color:red'>
<img src="https://cdn.pixabay.com/photo/2014/04/14/20/11/pink-324175_1280.jpg" style="float:left; height: 80px; padding:5px;" alt="Header Logo">
<h1 class="title" style='font-size: 25px; color:#ffff00;'>Header info 1</h1>
<h2 class="title" style='font-size: 15px; color:#00ff00;'>Header info 2</h2>
<h3 class="title" style='font-size: 10px; color:#0000ff;'>Header info 3</h3>
</div>
<nav>
<! --this part works fine so code omitted -->
</nav>
Your specificity in your CSS is wrong. If you amend these to the code below you'll get the behaviour you're looking for.
.banner img{
float: left;
}
.banner {
display:inline-block;
*display:inline;
padding: 20px;
background-color: #5C5F58;
margin:10px;
}
.title {
display:inline-block;
*display:inline;
font-family: 'Bebas Neue', sans-serif;
color: #ffffff;
text-transform: uppercase;
}
I am designing a webpage and I am almost finished but there is a small issue that I can't seem to figure out.
HTML:
<html>
<head>
<style>
* {margin:0; padding:0; text-indent:0; }
.float-box-footer{display:inline-block;position:relative;height:37px;background-color:#accb32;max-width: 860px;width: auto\9;}
.p4{font-size: 12pt; color: black; padding-left:5pt; left:0; top:7pt; font-family:National, Arial, sans-serif;position:relative;}
.p5{font-size: 7pt; color: black; padding-left:465pt;}
</style>
</head>
<body>
<div class='float-box-footer'>
<p class="p4">Learn more <a href="http://www.google.com" alt="" >Google.com</a>
</p>
<p class="p5">© 2016 Google Google of Google. All rights reserved.</p>
</div>
</body>
</html>
When you run the code it shows the green bar with text in it. When you resize the web page width wise the green bar shrinks along with the webpage and stays the proper size. However, the text in the far right does not do that. Once you go so far over it goes out of view and starts wrapping. I need the text to move along with the green bar.
I am stuck on this part and can not seem to figure it out. Can you anyone please help me out on what I am not doing?
Thank you in advance
If you want the green bar to respond to the width of the browser window, I would set your width on .float-box-footer to something like 100%. A percentage value will adjust with the window.
The problem you're facing now is that the width of .float-box-footer is being defined by the children elements inside there. The padding value on .p5 is forcing the green box open. If you give .float-box-footer a fluid width value like 100% and throw a text-align: right; or float: right; onto .p5 you should be in business.
I'd suggest reading up on the fundamentals of the CSS box model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Please do refer the code
* {margin:0; padding:0; text-indent:0; }
.float-box-footer{height:37px;background-color:#accb32;max-width: 860px;width: auto\9;}
.p4{font-size: 12pt; color: black; padding-left:5pt; left:0; top:7pt; font-family:National, Arial, sans-serif;position:relative; width:50%;}
.p5{font-size: 7pt; color: black; width:50%; text-align:right; float: right;}
<div class='float-box-footer'>
<p class="p4">Learn more <a href="http://www.google.com" alt="" >Google.com</a>
</p>
<p class="p5">© 2016 Google Google of Google. All rights reserved.</p>
</div>
<style>
* {margin:0; padding:0; text-indent:0; }
.float-box-footer{
display:inline-block;
position:relative;
height:37px;
background-color:#accb32;
max-width: 860px;
width: auto\9;
white-space: nowrap;
}
.p4{
font-size: 12pt;
color: black;
padding-left:5pt;
left:0; top:7pt;
font-family:National, Arial, sans-serif;
position:relative;}
.p5{
font-size: 7pt;
color: black;
padding-left:465pt;
}
</style>
Add a whitespace property with a no wrap value to the floatboxfooter div.
Check the floatboxfooter properties in my example. Hope this helps.
I am fairly new to web development so I apologize if this is a "newbie" question, I've looked on various sites and tried various things but am not able to move a button on my page to where I want it to go.
Here's the code I have for it in HTML:
<div class="crown">
<div class="container">
<img src="http://www.clker.com/cliparts/3/8/d/6/12205466202120645650portablejim_Chess_tile_-_King_1.svg.med.png" height="250" width="200">
<h3><strong>Join today!</strong></h3>
<p style="text-align: center;"><a class="btn-two" href="#">Register</a></p>
</div>
</div>
<section class="footer">
<div class="container">
<p>© 2016</p>
</div>
</div>
</body>
</html>
And here's the CSS for it:
.btn-two {
border: 1px solid black;
padding: 20px;
text-decoration: none;
background-color: black;
color: white;
text-align: center;
margin: 20px 0 -30px 0;}
I've tried a lot of things in the CSS that aren't working. I want the button to be a few inches below the "Join today!" text but it stays where it's at, like a hair below the text when I want there to be space in between the text and the button. Any idea what I'm doing wrong? And again I'm new to all this so I appreciate your understanding. Thank you.
You have to add display:inline-block; or block to the .btn-two since anchor elements are display:inline by default and margin/padding can't affect em
Check the snippet below
.btn-two {
border: 1px solid black;
padding: 20px;
text-decoration: none;
background-color: black;
color: white;
text-align: center;
margin: 60px 0 0 0;
display: inline-block;
}
I am fairly new to web development so I apologize if this is a "newbie" question, I've looked on various sites and tried various things but am not able to move a button on my page to where I want it to go. Here's the code I have for it in HTML:
<div class="crown">
<div class="container">
<img src="http://www.clker.com/cliparts/3/8/d/6/12205466202120645650portablejim_Chess_tile_-_King_1.svg.med.png" height="250" width="200">
<h3><strong>Join today!</strong></h3>
<p style="text-align: center;"><a class="btn-two" href="#">Register</a>
</p>
</div>
</div>
<section class="footer">
<div class="container">
<p>© 2016</p>
</div>
</div>
You can also remove text-align:center; style from the <p> that contains the button.
Working fiddle: https://jsfiddle.net/L210zqvf/
Apply display: inline-block; to your .btn-two. An <a> tag is an inline element, generally not accepting width, height, margins etc. as long you don't do the above.
Yeah, and if you don't want it to be centered, remove style="text-align: center;" from your <p> Tag.
Anchor a elements are display:inline by default in a browser. Inline level elements can't have margin or padding, top or bottom. You can only apply margin and padding to the left or right of an element.
In your case. I'd put a class on the containing paragraph element and add margin to the top of that. Paragraph elements are block level elements.
Hey guys so I have the follow:
http://jsfiddle.net/z3Hr2/
This is my nav that I use to access in JQuery, tables...here is a photo:
Now when I click one of the links a table pops up, like this:
The problem is that in IE there is a huge gap in between the top to the bottom, even though they are display:none ( the tables that are opened when clicking a nav link).
Here is what I mean in IE:
Here is the table containers layout:
<div class="csvemployeestools">
<div class="MemberopenstatusViewer">
<div class="OpenstatusViewertable">
table that is opened depending on which link clicked in nav....
</div>
<div>
.....
</div> <!-- after all tables are defined, this closes it out.
CSS:
.csvemployeestools{
margin-top: 2%;
overflow: hidden;
}
.MemberopenstatusViewer{
display:block;
/*float:left;*/
margin: 0 auto;
font-family: Helvetica, Arial, Sans-Serif;
font-weight: bold;
font-size: .7em;
width:100%;
/*overflow-x: scroll;*/
}
.OpenstatusViewertable {
width:100%;
max-height: 300px;
overflow-y: scroll;
margin-bottom: 3%;
}
Hey guys I figured it out....I just removed the divs around the tables:
<div class="MemberopenstatusViewer">
<div class="OpenstatusViewertable">
</div>
<div>
Thanks though!
I don't know if this will help, but you should be using div IDs for layout not classes.
This is much better:
(class = . )(id = #)
But I'm not sure how this relates to this question.
I've got a html-structure like this:
<div class="campain">
<div class="campainText">
<h2>Ny app til iPhone og iPad</h2>
<h2>Tips og vinn</h2>
</div>
<div class="campainPicture">
Picture goes here
</div><div class="clear"></div>
</div>
And I'd like the campainText to be right-align. The css for this element is this:
font-family: 'Spinnaker', sans-serif;
font-size: 17px;
color: #FFFFFF;
background-color: #A2AD00;
display: table;
padding: 4px;
margin: 4px 4px 4px 4px;
text-decoration: none;
I know that the rest of the css is working. The problem is that the text is left-aligned if I include the table-option in the display-field. As soon as I remove this, it works as expected. Are there any workarounds for this, or do I have to use display: inline and <br /> tags?
Fiddle: http://jsfiddle.net/xbNCZ/
"Table + text-align:right does not work", because a table element doesn't stretch to the full width by default. Add width:100% to get the desired result.
Before / After setting width:100%.