Ok, I am pretty experienced at CSS but at this point I am at a loss.
I layed out how I want the title to look like in photoshop:
alt text http://screensnapr.com/u/qz26q5.png
however, the closest I can approach it with css is:
alt text http://screensnapr.com/u/s7xi7a.png
I need the black background to extend to the edges of the image and padding on the right side of the title.
I hope you understand my question! thanks.
here is the html:
<div class="glossary_image">
<img src="<?php echo $custom_fields['image'][0]; ?>" />
<div class="title">
<h2><?php the_title(); ?></h2>
</div>
</div>
and the css:
.glossary_image {
position: relative;
height: 300px;
width: 300px;
margin-top:10px;
margin-bottom: 10px;
}
.glossary_image .title {
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
}
.glossary_image .title h2 {
display: inline;
font-family:Arial, Helvetica, sans-serif;
font-size: 30px;
font-weight:bold;
line-height: 35px;
color: #fff;
text-transform:uppercase;
background: #000;
}
Remove the padding from .glossary_image .title and add padding-right: 10px; to .glossary_image .title h2.
You might also want to add padding-top to the h2.
You could make the image the background of a div element, by doing this the overlay positioning should be no problem.
Related
Trying to put an image next to a paragraph but it does not seem to work.
This is what I have:
<div class="dhn-info-div">
<p>DEVONSHIRE HOUSE NETWORK IS A <span class="dhn-purple">PEOPLE-FOCUSED</span> MEMBERSHIP CLUB FOR DIRECTOR-LEVEL <span class="dhn-purple">PROFESSIONALS</span> IN LEADERSHIP ROLES WHO HAVE AN INSTINCTIVE FOCUS ON <span class="dhn-purple">THE HUMAN SIDE OF ENTERPRISE..</span></p>
<img src="wp-content/themes/expound/images/dhn-directors.png" alt="Devonshire House Network Directors">
<div style="clear:both"></div>
</div>
and CSS:
.dhn-info-div {
margin-top: 20px;
background-color: #a20e45;
width: 95%;
display: inline-block;
}
.dhn-info-div p {
padding: 20px 40px 20px 40px;
color: white;
font-size: 18px;
line-height: 35px;
word-spacing: 5px;
}
.dhn-info-div img {
float: right;
}
Image has to be on the right of the text. The div shouldn't be 100% in size. Cheers
This is how I want it to look:
http://i.stack.imgur.com/bPxbB.png
Depending on if you want to wrap the text around the image or have 2 columns, here’s both solutions:
If you want to wrap the text around the image it needs to be within the p tag. See example (I have also added 10px padding around the image).
If you want 2 columns you need to define the width of both so they fit in. I have also added float: left; to both and some padding to the image to make it look slightly better. See example
EXAMPLE
You needed to add some width to some elements such as the text
also you had no width or height on your image.
I also added top:40px; to your image to bring it down to the level of the text
Can you put the <img> in your <p> at top? that would fix it:
<div class="dhn-info-div">
<p>
<img src="wp-content/themes/expound/images/dhn-directors.png" alt="Devonshire House Network Directors" />
DEVONSHIRE HOUSE NETWORK IS A <span class="dhn-purple">PEOPLE-FOCUSED</span> MEMBERSHIP CLUB FOR DIRECTOR-LEVEL <span class="dhn-purple">PROFESSIONALS</span> IN LEADERSHIP ROLES WHO HAVE AN INSTINCTIVE FOCUS ON <span class="dhn-purple">THE HUMAN SIDE OF ENTERPRISE..</span>
</p>
<div style="clear:both"></div>
</div>
Edit: is now responsive!
i made this fiddle, check it http://jsfiddle.net/fYh7u/
you can wrap the text in a div, and the image in another div, inside the main div "dnh-info-div", in my example i miss the "div", at end of class, because is obvious.
HTML:
<div class="dhn-info">
<div class="dhn-text">
<p>devonshire house network is a <span class="text-purple">people-focused</span> membership club for director-level <span class="text-purple">professionals</span> in leadership roles who have an <span class="text-purple">instinctive focus</span> on <span class="text-purple">the human side of enterprise.</span></p>
</div>
<div class="dhn-img">
<img src="http://i.imgur.com/kzJiOjx.jpg" alt="" />
</div>
CSS:
.dhn-info {
width: 100%;
background-color: #a20e45;
display: inline-block;
}
.dhn-info .dhn-text {
width: 50%;
height: auto;
float: left;
padding: 20px 10px 0px 35px;
}
.dhn-info .dhn-text p {
font-family: arial;
font-size: 24px;
color: #fff;
line-height: 30px;
text-transform: uppercase;
word-spacing: 5px;
margin: 0;
padding: 0;
display: block;
}
.dhn-info .dhn-img {
width: 40%;
height: 100%;
float: right;
}
.dhn-info .dhn-text p > span.text-purple {
color: #9b59b6;
}
.dhn-info .dhn-img img {
display: block;
height: auto;
max-width: 100%;
}
I am trying to float my logo to the left in the header but it doesn't float to left at all. I would really appreciate if someone could point our my error since I am new to CSS.
This is my website if you would like to see my problem live: http://cashski.com/
Here is my HTML code:
<div id="navigation">
<div class="center_navigation">
Contact
Instagram Followers
Instagram Photo Likes
<img src="img/logo.png" />
</div>
</div>
Here is my CSS code:
body {
padding: 0px;
margin: 0px;
font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
}
#navigation{
width: 100%;
height: 50px;
margin: 0px auto;
position: relative;
background-color: #2d5b89;
border-bottom: 1px solid #244a75;
}
.center_navigation {
width: 960px;
height: 50px;
margin:0px auto;
font-size: 16px;
}
.center_navigation a {
padding: 10px 0 10px 30px;
float: right;
margin-top: 4px;
color: #babcc5;
text-decoration: none;
}
.center_navigation a:hover {
color: white;
}
.center_navigation a img {
float: left;
}
The problem is your all anchor tags are float:right and your image is inside a anchor tag, so making img float:left doesn't change much.
So you either need to put the style on the container of image ie. anchor tag like this
<a href="index.php" style="float: left;">
<img src="img/logo.png">
</a>
or if your image is always in last anchor tag then you can also use this
.center_navigation a:last-child{
float: left;
}
Js Fiddle Demo
The project is to create a micro-blogging website similar to Twitter. I chose to name the site Chirper (how clever of me). Each post is structured by a parent div, an avatar div and a content div. The avatar and content divs are displayed inline, but they are not aligned properly. Any help is appreciated.
HTML:
<div class="chirp">
<div class="chirp_avatar_region">
<img src="img/avatar/default.png" alt="Avatar" width="64" height="64">
</div>
<div class="chirp_content">
<p>
USER
<span class="timeStamp">2013-11-22 16:43:59</span>
</p>
<p>
COMMENT
</p>
<p>
ReChirp!
</p>
</div>
The div's aren't aligned how I want them to be (level and 100% of the parent).
I can't post images, so here is a link to an imgur page: http://imgur.com/Mn9mE5q
Relevant CSS:
body {
font-family: Verdana, Geneva, sans-serif;
color: #000;
background-color: #666;
font-size: 1em;
}
/* Containers */
div {
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border-style: solid;
border-width: 3px;
border-color: #000;
padding: 10px;
}
div.pane {
width: 70%;
background-color: 0099FF;
}
div.chirp {
border-width: 1px;
margin-bottom: -1px;
width: 80%;
padding: 5px;
}
div.chirp_avatar_region {
display: inline-block;
width: 10%;
height: 100%;
text-align: center;
/*border-style: none;*/
}
div.chirp_content {
display: inline-block;
width: 80%;
height: 100%;
/*border-style: none;*/
}
div.chirp_avatar_region > img, div.chirp_content > p {
margin-top: 0;
vertical-align: middle;
}
You can either float your inner divs then clear the float following the container
or
use vertical-align:top to position your divs at the top of the container
Not entirely sure, but what I think is happening is that by defining position:inline-block, it's putting them on the same line, and making the line-height the height of the chirp_content container. In a sense anyway.
Set to vertical-align:top; and it should solve it.
Ex.
.chirp_content, .chirp_avatar_region{ vertical-align:top; }
JS Fiddle
Give to the avatar_region a float: left, and remove its width: and height: setting. Remove the chirp_content div, it circumvents the inlining.
I have a situation where I have one div of fixed width, containing an image pulled from Twitter, and another div of variable width containing user text of variable length. What I want to achieve is something like the following:
I can do this well enough with a single div that has background-image and padding-left. But I want to be able to apply border-radius to the img element, which simply won't be possible with a background-image.
If I do text-align: center on the outer div, it gets me halfway there. Here's a DEMO and a screenshot:
But this obviously isn't fully what I want.
How can I accomplish this?
Ask and you shall receive — a simplified jsFiddle example:
As an added bonus, the text is vertically centered too!
HTML:
<div class="logo">
<div class="logo-container">
<img src="http://img.tweetimag.es/i/appsumo_b.png" />
</div>
<div class="logo-name">
AppSumo is a really really long title that continues down the page
</div>
</div>
CSS:
.logo {
background-color: #eee;
display: table-cell;
height: 100px;
position: relative;
text-align: center;
vertical-align: middle;
width: 600px;
}
.logo-container {
background-color: #fff;
border-radius: 10px;
left: 10px;
position: absolute;
top: 10px;
width: 75px;
}
.logo-name {
font: bold 28px/115% Helvetica, Arial, sans-serif;
padding-left: 85px;
}
Would it be something like this?
http://jsfiddle.net/uPPTM/6/
.logo {
width:80%;
margin:auto;
background-color: red;
}
.logo-container {
border: 1px solid gold;
width:73px;
height: 73px;
display: inline-block;
vertical-align:middle;
}
.logo-name {
display: inline-block;
}
You can float the image container (or image itself without the container) to the left, clearing anything the left... and then float the text to the left, clearing anything to the right.
.logo-container{
float:left;
clear:left;
}
.logo-name{
float:left;
clear:right;
}
You can adjust the distance of the text using margins.
.logo-name{
float:left;
clear:right;
margin-top:10px;
margin-left:5px;
}
Use absolute positioning with a left position to push the title text past the image.
http://jsfiddle.net/uPPTM/9/
.logo { width: 50px; }
.title {
position: absolute;
top: 0;
left: 50px;
font-size: 32px;
text-align: center;
}
img {
border: 1px solid gray;
border-radius: 15px;
}
<div class="logo">
<div class="logo-container">
<img src="http://img.tweetimag.es/i/appsumo_b.png">
</div>
<div class="logo-name">AppSumo</div>
</div>
I'm not that great at CSS. I get how the properties work together but sometimes I don't get the results I want. I have a banner at the top of my page which contains a logo and some text.
They are contained in separate div tags in one larger div tag but my Text aligns to the top of the div tag while my image is centered vertically. How do I get the centers aligned vertically?
<div id="webBanner">
<div id="bannerImage">
<a href="Dashboard.aspx" title="Accreditation Data">
<img src="Images/logo.png" />
</a>
</div>
<div id="bannerText">
Accreditation Database (AD)
</div>
</div>
CSS:
#webBanner
{
height: 60px;
width: 100%;
vertical-align: top;
}
#bannerText
{
font-family: Arial;
font-size: xx-large;
font-style: italic;
color: #fff;
margin: 2px 5px;
}
#bannerImage
{
height: inherit;
float:left;
width: 223px;
vertical-align: middle;
margin: 2px 5px;
}
CSS vertical align does not work the way most people expect it to. It won't actually do anything at all in this particular case.
What you probably want to do is solve this with padding on your bannerText element.
For example, to vertically center 20px text in a 60px wrapper:
#webBanner {
height: 60px;
width: 100%;
}
#bannerText {
font-size: 20px;
height: 20px;
padding: 20px 0;
/* 20px padding on top and bottom plus 20px height = 60px total */
}
Note, the 0 in the padding refers to the left and right padding. You may want to adjust that depending on how your banner is designed.
Also, the "height: 20px" declaration is redundant if the only content in the div is text and the line height is not adjusted. I included it to provide a general solution.
#bannerText {
line-height: 60px;
}
Is one way..
I'd recommend something along the lines of this...
HTML:
<div id="webBanner">
<a id="bannerLink" href="Dashboard.aspx" title="Accreditation Data">
<img src="Images/logo.png" />
</a>
<h1>Accreditation Database (AD)</h1>
</div>
CSS:
#webBanner
{
height: 60px;
}
#webBanner h1
{
color: #fff;
float: left;
font-family: Arial;
font-style: italic;
line-height: 60px;
}
#bannerLink
{
display: block;
float: left;
height: 60px;
width: 223px;
}
You can adjust the CSS to vertically center the logo image by using margin:.
Given your text is inside a div, this may work:
#bannerText {
vertical-align: middle;
}
See this clear tutorial for more information on your options.