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%.
Related
I can't seem to get my text next to a square div/span.
I've tried a div, then float with the text; I also tried a span with display: inline-block and display:block. I can't seem to find out what I'm doing wrong. Already searched on Stack Overflow, but those solutions don't seem to work for me.
Here is the code I use:
.event-date{
background-color: #2C3846;
color: white;
width: 50px;
height: 50px;
margin: 20px;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
.event-text{
float: left;
}
<body>
<div class="main-container">
<section class="col-content">
<main>
<h1>Onze evenementen</h1>
<section>
<div class="event-date">9<br>apr</div>
<h2 class="event-text">Discussiebijeenkomst Europa</h2>
<p class="event-text"><q>Wat betekent Europa nu concreet voor mij, in mijn dagelijks leven als
...</q></p>
</main>
</section>
</div>
</body>
I want the 'h2' and the 'p' stuff next to the blue square. it's going to be like an event list, and the blue box is the date.
Well, it's pretty simple, you have the main div, which will include both, the date and the text. You put the float on the wrong class, as the element that'll go after the div will be the text, so you have to add float: left; to the date div. Nevertheless, you'll have something like this :
.event-date {
background-color: #2C3846;
color: white;
width: 50px;
height: 50px;
margin: 20px;
float: left;
text-align: center;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
.event-text {
margin: 0;
padding: 0;
}
<body>
<div class="main-container">
<section class="col-content">
<main>
<h1>Onze evenementen</h1>
<section>
<div class="event-date">9<br>apr</div>
<br><h2 class="event-text">Discussiebijeenkomst Europa</h2>
<p class="event-text"><q>Wat betekent Europa nu concreet voor mij, in mijn dagelijks leven als
...</q></p>
</section>
</main>
</section>
</div>
</body>
I addded simply float: left; to the date div, got rid of the padding and margin of the text (to fit better the date space) and added a <br> to break the upper empty space that would put the text too much on top (see it before the <h2> mark). Hope it helped. If you wish also, here's the a Fiddle too :
JSFiddle DEMO
You can amend this simply by displaying the date and text inline-block
.event-date, .event-text{
display:inline-block;
}
If you want the date to float to the left of the text, add float:left to the date CSS.
JSFiddle Demo
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.
I've got multiple div elements nested in a div. What I want is for the #title-text div to be next to the image - in this case using a float.
The problem is that the text in the div spaces out the div when it has no more room in width as you can see in this jsFiddle.
I want to use floats because there will be multiple tiles using the same classes, and those tiles have different sizes and images etc. Also I don't want to have the #title-text to have a fixed width because of multiple tiles using it and thus having different widths.
Here's the HTML:
<div id="tile-wrapper">
<div id="category-text">
<p class="category-content">Smartphones / software</p>
</div>
<div id="tile-image">
<img src="images/wp10.jpg" class="tile-image" name="title" />
</div>
<div id="title-text">
Placeholder Text placeholder text placeholder text placeholder text
</div>
<div id="date-time-text">
<p class="date-time">3 minutes ago.</p>
</div>
</div>
Okay, so first I added display inline to your classes like this
.tile-image {
margin: 0 auto;
display:inline;
}
.title-text {
margin: 0 5px 5px 0px;
font-weight: 300;
text-shadow: 1px 1px 3px rgba(0,0,0,.3);
text-decoration: none;
font-size: 22px;
color: black;
display:inline;
}
then I put a width and alignment on #title-text
#title-text {
float: left;
margin-left: 5px;
margin-bottom:10px;
text-align:left;
width:50%;
}
I found the answer to my question with Jquery. Here's the solution if anyone wonders.
$(document).ready(function () {
var imageWidth = $('#tile-image').width();
var titleTextWidth = $('#title-text').width();
$('#title-text').width(imageWidth);
$('#tile-wrapper').width(imageWidth * 2 + 30); // +30 for margins.
});
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.
I'm applying a css class for the following asp.net custom control which renders in browser something like this:
<div class="box search_mlo">
<div class="gray_box">
<div class="blue_box">
<div>
<input id="Search_srcText" class="btn" type="text" onblur="return objSearchWidgetLibrary.searchLostFocus(ECMSSearchTextBox2_srcText)" onfocus="return objSearchWidgetLibrary.clearText2(ECMSSearchTextBox2_srcText)" onkeypress="return objSearchWidgetLibrary.fnTrapKD2('ECMSSearchTextBox2_srchAnchor1',event)" name="ECMSSearchTextBox2$srcText">
</input>
<a id="Search_srchAnchor1" class="btn" onclick="return objSearchWidgetLibrary.onsearchclick1('ECMSSearchTextBox2_srcText','ECMSSearchTextBox2_srchAnchor1')" href="../System/SearchResults.aspx?k=">
<span>Search</span>
</a>
</div>
</div>
</div>
</div>
The CSS class is:
.blue_box div a.btn
{
background: url("/publish/images/btn_search.jpg") no-repeat;
height: 36px;
width: 86px;
}
.blue_box div input.btn
{
background: url("/publish/images/bg_search.jpg") no-repeat scroll 9px 6px #FFFFFF;
border: 1px solid #0064AD;
color: #BFBFBF;
float: left;
font-size: 1.3em;
font-style: italic;
font-weight: bold;
height: 21px;
margin-right: 4px;
margin-top: 2px;
padding: 5px;
width: 328px;
}
so it looks something like search box and button to submit. This control is used by other sites so, for some sites we require only hyperlink search button and in some we replace image. But in this case I'm trying to replace image but I'm getting only half of the image something like below..
http://i.stack.imgur.com/Dfaqn.jpg
You can see a search text coming inside that image.
The prototype is something like this and the first button should match with this:
http://i.stack.imgur.com/QpRmg.jpg
I cannot remove that span tag present inside anchor tag since in other sites its working fine and removing that would create problem in them.
can any one help with feasible solution where I can get the entire image.?
Thanks in advance.
#Sayed; a tag is an inline element & inline elements didn't take height, width, vertical margin & padding. So; give display:block in your css for a tag like this:
.blue_box div a.btn
{
background: url("/publish/images/btn_search.jpg") no-repeat;
height: 36px;
width: 86px;
display:block
}