Get paragraph on same line as header in CSS - html

I have the following HTML and CSS code which I've taken from a WordPress theme.
<div class="ws-contact-info">
<div class="col-sm-4">
<h2 style="text-align: center;">Phone:</h2>
<p style="text-align: center;">(098) 765-4321</p>
</div>
</div>
On a webpage it presents as follows
Phone:
(098) 765-4321
How can I write my CSS to make the elements fit into one row, like this:
Phone: (098) 765-4321

Apply display: inline-block to the <h2> and <p> elements, as they are both block elements, so they are taking up the whole width, causing the line break.
Alternatively, you could apply float: left to both of them.

Related

Why are the contents of the span next to the div appearing on different lines?

I have this basic structure in html but it the contents are showing up in two lines but I want them to be on the same line right beside each-other. Replicated in this codepen
<div>
<span>span</span>
<div>div</div>
</div>
How do I get those two elements to display the text next to eachother?
Also when copying and pasting the text it should match the inline structure
You can use two spans, or if you need to use a div for the second element, you can use style="display: inline-block"
<div>
<span>span</span>
<span>div</span>
</div>
<div>
<span>span</span>
<div style="display: inline-block">div with inline block</div>
</div>
<div> is a block element and will always show on its own line by default. To change that
<div style='display:inline'></div>
<!-- or -->
<div style='display:inline-block'></div>
or in your <style> tag
div {
display:inline-block;
}

Put box around both p and blockquote element if they're both there

Let's say I have:
<div class='header'>...</div>
That contains multiple elements depending on the file.
In some files it looks like:
<div class='header'>
<p>
...
</p>
</div>
In others it might look like:
<div class='header'>
<p>
...
</p>
<blockquote>
...
</blockquote>
<h1>
...
</h1>
</div>
I want to create some css code that puts one box around all the <p> and <blockquote> elements (not separate boxes around each) that exist in this .header (while not including the h1 element in this box). Is that possible or do I have to write separate css for each scenario?
To make a box around the paragraph and block quote elements while leaving other sibling elements outside, create a div and put them inside that. Then add a border to that div:
.header .container {
border: 1px solid #000;
}
<div class="header">
<div class="container">
<p>Paragraph</p>
<blockquote>Block quote</blockquote>
</div>
<h1>H1</h1>
</div>
If you wanted to do this without creating another div (100% CSS), you would need to do a lot more additional styling (that would be entirely dependent on the rest of your page) to have the borders around each element connect to form one big box.

How can I remove spaces in my web layout?

On my web page, I have spaces between the rows (each section of the page is it's own row). As seen below in the responses, I had "Colspec" tags where my "Col-md" tags should've gone. I also didn't have the 'row' tag in there. Fixed those, thanks to those that helped. I've tried replacing the 'colspec' tags with the 'col-md-12' tags. This gave me spaces on the sides of each row/column, which I also don't like. I have since pulled out the 'col-med' tags. The rows now go all the way to each side. Great. However, I still have spaces between each row.
In an attempt to be more clear, here is the code for one of my rows:
<div class="container-fluid">
<div class="row">
<div class="classWithPad2">
<h1 class="customfont">TEXT</h1>
<div class="classWithPad">
<p class="customfont">TEXT<span tabindex="0" data-term="goog_20335794">TEXT<br>
TEXT<br>
TEXT<a href="mailto:XXX#XXXXX.com">
<span class="glyphicon glyphicon-envelope"></a><br>
</p>
</div>
<div class="classWithPad2"><h1 class="customfont">PRICES</h1>
<div class="classWithPad">
<p class="customfont">TEXT<br>
TEXT</p>
</div>
</div>
</div>
Each row is coded similarly.
SITE IS HERE
What does colspec-md-12 do in your HTML? You have assigned colspec-md-12 as class to many divs. Replace that with col-md-12 which is a bootstrap class, which will remove the blank spaces.
As others mentioned in their comments, your markup is not at all valid.
For the bootstrap to work correctly, the col-md-12 class should be nested inside a .row class, which itself should be nested inside a .containerclass.
Please see the official page of bootstrap for more details
There are multiple issues here
One, the class should be col-md-12 instead of colspec-md-12
Second of all, the col-md-12 class should be nested inside a .row class, which should itself be nested inside a .container or .container-fluid class. It should look something like this
<div class="container">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
The space between sections indicates that there is a margin between these sections. Probably has to do with these lines of code
.classWithPad {
margin:30px;
}
.classWithPad2 {
margin:15px;
}
It looks like you are confusing margin with padding. I'd change the margin property to padding property, which allows space at the end of the section, instead of between sections.

Reducing link clickable width

I have a link on my website and I dont like the way it is clickable along the whole width of the page.
I have tried putting blank divs with width attributes on either side of the link and tried putting a width attribute in the link itself. I also tried the overflow attribute recommended in another answer.
Does anyone have any suggestions? Here is the code:
<div align= 'center'>
<p style="font-size: 15px;">text</p>
</div>
p stands for a paragraph, which is a block level element. These use the full width available to them by default. Your case looks like you want a span instead, which is an inline element, like the link itself, that only spans the contained text.
<div align= "center">
<span style="font-size: 15px;">text</span>
</div>
Alternatively, you could skip the tag completely by applying the style directly to the link instead.
<div align= "center">
text
</div>
change your code to this:
<div align= 'center'>
<p style="font-size: 15px;">text</p>
</div>

Change size of blank line in HTML

I'd like to insert a blank line in my HTML code but I'd like to change the size of this blank line to see if it fits with the rest of the page.
Does someone know how to do this ?
The nicest way would be to put a bottom margin on the element you want some spacing after. The other solutions posted are not semantic and your markup will end up to be a giant mess of spacer elements without content.
CSS is the right way for presentation.
For example if you have two paragraphs, and want some spacing after the first one:
<p style="margin-bottom: 20px;">Blabla</p>
<p>Blabla 2</p>
This is just an illustration, your best bet would be using id / class and a separate stylesheet.
The only other semantic solution I can think of is a <HR> element, but it is a quite problematic one if you want to style it cross-browser (see details on the link).
You could use something like:
<p style="height: 200px"></p>
How about using the line-height css property?
Like this:
<span style="line-height: 50px;"> </span>
You could insert a div and change the height with css?
<div class="spacer"> </div>
CSS:
.spacer {
height: 100px;
}
But a better solution would be to put a bottom margin on the element preceding the space you want.
<div class="some_content">
The stuff before the space
</div>
<!-- space here -->
CSS
.some_content {
margin-bottom: 100px
}
Would give you a 100px space below the content.