I am trying to close the gap between my top two elements (an h1 tag and an image tag which is wrapped in a link tag).
I've tried changing margins and floating... I'm stuck :(
<div align="center">
<h1 style="color:blue; background-color:lightgrey; font-size:100px;">Inner Planets - Museum</h1>
<img src="http://csc2.madonna.edu/~brabahy/hw5/images/Banner1.jpg" height="400" width="1250">
</div>
And another style to h1 element in order to close the space.
Add margin-bottom:10px in style of h1.
<h1 style="color:blue; background-color:lightgrey; margin-bottom:10px; font-size:100px;">Inner Planets - Museum</h1>
Here is a plunker for same - http://plnkr.co/edit/1zvOxIar7RQOVcwmKV7B?p=preview
Related
I'm trying to edit a wordpress theme. I created a child theme and need to change the header. The current header has the following:
<hgroup>
<h1 class="site-title">sustainablewestonma</h1>
<h2 class="site-description"></h2>
</hgroup>
What I want to be able to do is independently control the placement of the span but margin-top or padding-top is being applied to both the image and the span. How can I control that?
<hgroup>
<img style="vertical-align:middle;" src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/cropped-45795044_561214090992995_7744636018275385344_n.jpg" class="header-image" width="25%" alt="sustainablewestonma">
<span style="display:inline-block;margin-top:10px"> Educate Initiate collaborate</span>
</hgroup>
Is the style supposed to go in the html tag? If so, try putting a margin-top:0; on the image alongside the margin-top:10px; on the span.
Let say I have two elements <img> and <p> as
<img style="background-color:#ffffff;width:250px;height:auto;float:left" src="http://somesite/p3.png" />
<p>
alibabaanakjalanan.</p>
Currently, the paragraph content is shown exactly nex to the image. How can I set some spacing between the elements ?
If you are floating the image you all you have to do is give it some margin-right, I would advise moving away from adding the styles inline by maybe giving the image a class something like this although my classname is very weak:
CSS
.img {
background-color:#ffffff;
width:250px;
height:auto;
float:left;
margin-right: 20px;
}
HTML
<img src="http://somesite/p3.png" class="img" />
<p class="para">alibabaanakjalanan.</p>
In action http://jsfiddle.net/PqWAh/1/
This is best practice for seperating styles from markup
Add margin for img.
margin-right:20px;
So code would be
<img style="background-color:#ffffff;width:250px;height:auto;float:left;margin-right:20px;"
I want to create a site with a background one color and the centered content section another color. I am having trouble setting up custom tags to achieve this. Here's what I have:
A custom body tag -
<body style="background-color: #000000" >
<div style="text-align:right; padding: 10px; background-color:white; width:800px">
<jsp:doBody />
</div>
<n:footer></n:footer>
</body>
It seems to me that anything that I include between the custom body tags on my jsp should have the background-color = white and everything else around it should be color = #000000. This isn't the case. Instead I only have a band 10px high across the page. What am I doing wrong?
The <div> collapses if there is no content. Give it some text.
usually I just do this:
<body style="padding:0;margin:0;background-color:#000;">
<div style="margin:0 auto;width:800px;background-color:#fff;">This is the content</div>
</body>
since div has margin:auto for its left and right margins, it will automatically center itself. Just make sure to add a width property, else it won't work.
I'm trying to reduce the vertical space between two sections, however, being a knob at CSS doesn't help. Using tables (heh) the spacing she is gone, but with CSS I'm pulling my hair out.
If you copy/paste the code below you'll notice the vertical spacing between "Link Heading" and "www.123.com" is different than that between "www.123.com" and "Some more text":
Link Heading...
www.123.com
Some more text...
Here's the skinny
<head>
<style>
body{font:13px/27px Arial,sans-serif}
.link{color:#0000cc}
.heading{float:left;font-size:1.2em;margin:0;font-weight:normal}
.result{font-size:0.850em;line-height:1em;margin-bottom:20px}
.site,.info{float:left;font-size:1em}
.info{color:#222234}
</style>
</head>
<body>
<a class=link href='http://www.123.com/'>
<span class=heading>Link Heading...</span>
</a>
<br>
<div class=result>
<span class=site>www.123.com</span>
<br>
<span class=info>Some more text...</span>
</div>
<br>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td><a class=link href='http://www.123.com/'>Link Heading...</a></td></tr>
<tr><td>www.123.com</td></tr>
<tr><td>Some more text...</td></tr>
</table>
</body>
Now I know the answer is going to be something obvious, but I can't see the forest for the friggin css trees anymore.
I'd appreciate any pointers.
Thanks
use CSS line-height: or negativ margin: to change that vertical space
also be sure if you are using breaks <br> that their height: also changes the vertical space
It is because the table rows () has a height of 27 pixels.
If you set class to info in both and style .info {height: 27px; color:#222234}, they will be the same height as in the table.
<div class=result>
<span class=info>www.123.com</span>
<br>
<span class=info>Some more text...</span>
</div>
I would suggest getting rid of your <br> tags, and using a Block Element.
From the related Block formatting contexts:
In a block formatting context, boxes are laid out one after the other,
vertically, beginning at the top of a containing block. The vertical
distance between two sibling boxes is determined by the 'margin'
properties. Vertical margins between adjacent block-level boxes in a
block formatting context collapse.
This means that block elements, such as <div> and <p> (among others) will automatically include a line break after them, and the space between them can be controlled with margin. As such, I'd change your code to look more like the following:
<body>
<div class="heading">
<a class=link href='http://www.123.com/'>Link Heading...</a>
</div>
<div class=result>
<p class=site>www.123.com</p>
<p class=info>Some more text...</p>
</div>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td><a class=link href='http://www.123.com/'>Link Heading...</a></td></tr>
<tr><td>www.123.com</td></tr>
<tr><td>Some more text...</td></tr>
</table>
</body>
A couple other nitpicks:
Use quotes around your attribute values (<p class="site">...</p>)
Don't use tables for layout (using tables for tabular data is okay)
Proper indentation makes your code more readable
Hi here is a simple solution by putting everything and the same div and only applying a style the the link by using the "a".
<head>
<style>
body{font:13px/27px Arial,sans-serif}
.result{
font-size:0.850em;
line-height:1.2em;
margin-bottom:20px
}
.result a
{
float:left;
font-size:1.2em;
margin:0;
font-weight:normal
}
.result a:link
{
color:#0000cc;
text-decoration: underline;
}
.result a:hover
{
color: #1a0186;
text-decoration: none;
}
</style>
</head>
<body>
<div class=result>
<a href='http://www.123.com/'>Link Heading...</a><br>
www.123.com <br>
Some more text...
</div>
</body>
I am trying to position some stuff in 3 columns. The first column has an icon, 2nd column has text, and the 3rd column has an image.
I wish to do this without using the Table tag. Using CSS I have gotten the first 2 columns placed correctly, here is an image:
On the right, I need to add another image, without disturbing the text on the left.
This is my HTML code (stripped down to the basics):
<img src="Images/icon-1.png" />
<span class="content-title">My title 1</span>
<p>
Here is my text ...
</p>
<br />
<img src="Images/Icon-2.png" />
<span class="content-title">My Title 2</span>
<p>
Here is my text ...
</p>
<br />
And the CSS that emulates the table layout:
.content-title
{
font-size: 26px;
font-family: Helvetica,Arial,sans-serif;
color: #363636;
top: -28px;
position:relative;
left:+10px;
font-weight: bold;
}
#content-benefits p
{
margin-left:80px;
top:-30px;
position:relative;
width:325px;
}
My issue is, that I can't figure out how to place my image on the right, without making it's position:absolute;, but if I do that, I have to (AFAIK) use JavaScript to place the images relatively to their corresponding paragraphs.
If you want another image add it to the HTML before the rest of the "section" and then float it right with:
img {
float: right;
}
On another note, why aren't you using heading tags to display your headings?
You could use the css display:table to make it apear using a table take a look at the docs for this found here
Place the image after the titles span end tag
<img src="Images/icon-1.png" />
<span class="content-title">My title 1</span>
<img src="Images/icon-1.png" />
<p>
Here is my text ...
</p>
<br />
if i properly understand your layout i would do this
<img style="float:left; width:80px" src="image/icon-1.png"/>
<div style="width:405px">
<img style="float:right; width:80px"/>
<div style="float:left; width:325px">
<span/>
<p>
...
</p>
</div>
</div>
you wont need the other positioning you used
if you cannot change the markup,
than put width to the span and p and float:left, and put float:right and width to img
putting float automatically converts the element to display:inline-block which mean that it no longer distributes to the free page width, but takes the minimal allowed space (set by width) and stays rectangular. This way it becomes something like a column.