Im trying to use padding to push an image 18px from the top of a div. Neither margin or padding are working, and after comparing the two padding seems to be what I want anyway.
The problem is with the footer-middle-left-left-image div tag. The margin on the text one works fine though.
Here's the html:
<div id = "footer-middle-left-left">
<div id = "footer-middle-left-left-picture">
<img src = "" alt = "some_text">
</div>
<div id = "footer-middle-left-left-text">
If you would like to join our newsletter, please enter your </br>
email address below.
</div>
<div id = "footer-middle-left-left-email">
</div>
</div>
The CSS I have is:
#footer-middle-left-left {
float: left;
width: 483px;
height: 175px;
}
#footer-middle-left-left-image {
float: left;
width: 483px;
height: 59px;
padding-top: 18px;
}
#footer-middle-left-left-text {
width: 483px;
height: 58px;
float: left;
margin-left: 25px;
color: white;
}
#footer-middle-left-left-email {
height: 58px;
float: left;
width: 483px;
}
Any help would be appreciated! Also any advice, anything at all would be nice too. I'm pretty new so advice not relevant to my problem is also appreciated, like is this a good id-naming convention, etc..
In html you have footer-middle-left-left-picture but in css #footer-middle-left-left-image
Is it this bug or you just make mistake on paste code?
http://jsfiddle.net/CmwHu/
#footer-middle-left-left-image this id doesnt exist in your html.
So i have changed footer-middle-left-left-picture to #footer-middle-left-left-image.
It is working now
DEMO
Related
I've recently started learning web dev. I'm making a site that fetches data from the mealdb api and displays the data. I've mostly gotten everything working, but the issue is when I inspect the web page and view it on mobile, the image is rendered on top of the text, i.e. the title and the ingredients. How do I prevent this from happening?
Ideally, on a mobile device, I'd like to show the title, followed by the image, ingredients and the instructions in a single column.
This is how it looks on desktop:
On mobile:
.Recipe {
padding-top: 30px;
text-align: left;
display: flex;
flex-wrap: wrap;
justify-content: center;
overflow: auto;
vertical-align: text-top;
}
.left-content {
width: 40%;
float: left;
}
.list {
list-style: none;
padding-left: 0px;
padding-bottom: 15px;
font-size: 1.2rem;
}
.right-content {
width: 40%;
float: right;
}
.title {
font-size: 3rem;
justify-content: center;
padding-bottom: 0px;
}
.instructions {
font-size: 1.2rem;
}
.Recipe h1 {
text-align: center;
padding-left: 250px;
}
.image {
float: right;
height: 480px;
width: 480px;
margin: 20px
}
<div className="Recipe">
<div className="left-content">
<h2 className="title">{prop.food.meals[0].strMeal}</h2>
<ul className="list">
{prop.materials.map(function(ingredients){ return
<li key={ingredients.strIngredient}>{ingredients.name + " - " + ingredients.amount}</li>
})}
</ul>
<p className="instructions">{prop.food.meals[0].strInstructions}</p>
</div>
<div className="right-content">
<img src={prop.food.meals[0].strMealThumb} alt="" className="image" />
</div>
</div>
This is a CSS situation, and for this specific situation I highly suggest learning about grid: https://css-tricks.com/snippets/css/complete-guide-grid/
Now, I know you probably don't want to read that much or learn something entirely new just to solve this. So for now I will give you a quick solution, which it isn't so bad in terms of performance.
You can use react-device-detect
It has some components that print specifically on Desktop or Mobile. So in your case you can have something like this:
import {BrowserView, MobileView} from 'react-device-detect';
And in your render:
<div className="Recipe">
<div className="left-content">
<h2 className="title">{prop.food.meals[0].strMeal}</h2>
<MobileView>
<img src={prop.food.meals[0].strMealThumb} alt="" className="image"/>
</MobileView>
<ul className="list">
{prop.materials.map(function(ingredients){
return <li key={ingredients.strIngredient}>{ingredients.name + " - " + ingredients.amount}</li>
})}
</ul>
<p className="instructions">{prop.food.meals[0].strInstructions}</p>
</div>
<BrowserView>
<div className="right-content">
<img src={prop.food.meals[0].strMealThumb} alt="" className="image"/>
</div>
</BrowserView>
</div>
The idea is printing the image "twice", one for mobile and one for desktop. However, they will not be printed at the same time, obviously. And the images on web get requested only once, so you can print the same image dozens of time but it will only be loaded once on the browser, which is why this alternate solution works well.
If you don't want to use react-device-detect, you can print the image twice (on the same location as the example), and on CSS just use Media Query to set a display: none for mobile and desktop when they're not required. Let me know if you prefer CSS and I can elaborate further on how to do this on CSS. But I don't suggest this one because it is less efficient since the HTML will have two tags of the same image even if you're hiding them on CSS.
Let me know if you have any questions. And I hope this was helpful.
ETA: Thanks for all the help, everyone! These all worked beautifully. Thanks so much for your time!
I'm coding a newsletter (live preview here and my goal for it here) and am trying to get the navigation buttons ('Join Meet Learn Support') to sit about halfway down the logo. When I try top-margin in the navButtons class I'm not seeing any success. I suspect it's a display issue, but I'm not sure --- changing from inline to inline-block didn't really help.
<!DOCTYPE html>
<html>
<head>
<title>The Leaflet</title>
<style>
div
{
display: inline;
}
a
{
text-decoration: none;
}
p
{
text-align:left;
margin-left: 130px;
margin-right: 130px;
max-width: 600px;
}
#logo /* This sets the width for the New Leaf logo at the top. This should not change.*/
{
position:relative;
}
#navButtons
{
position:relative;
right:-240px;
}
#announcementImage
{
margin-left: 120px;
margin-right: 120px;
}
a.joinButton
{
margin-left:40%;
color:white;
background-color: #f7853e;
font-size: 30px;
}
a.navButton
{
color:#494541;
font-size: 22px;
}
</style>
</head>
<body>
<div id="logo"> <! --- Sets up the logo --->
<img src ="images/NLNewsletterLogo.png">
</div>
<div id="nav buttons"> <! --- Navigation Bar--->
<a class = "joinButton" href="url">Join</a>
<a class = "navButton" href="url"> Meet </a>
<a class = "navButton" href="url">Learn </a>
<a class = "navButton" href="url">Support </a>
</div>
<br>
<br>
<br>
<br>
<br>
<div id ="announcementImage"><! --- Lead Image-->
<img src="images/announcementGraphic.png">
</div>
<div id = "announcementText">
<p>Thrive Week is in full swing here at the Leaf. So far, we've had Sharon Perry, head of the State
College Area School District Career Center, help participants identify which of 34 traits,
including the special quality of woo, are strengths they employ in various settings so they can
work smarter. Then Anna Gokieli, owner of Tru Meditation and Yoga, got us staying present and
peaceful even in situations that often trigger stress. Will Snyder brought it home last night by
showing how making art and making money don't have to conflict.
Have a comment on a workshop you've attended or a session you'd like to see in our remaining
Design and Launch weeks? Galen would love to hear from you!</p>
</div>
</body>
Try this
#logo {
display: inline-block;
vertical-align: middle;
}
#nav {
display: inline-block;
vertical-align: middle;
width: 100%;
}
I think what your looking for is:
#logo {
vertical-align: middle;
}
Try adding bottom of something like 60px to div with id nav buttons.
Since this element is position: relative, it's placement can be controlled with left, right, top, bottom, like so:
#nav#buttons {
bottom: 50px;
}
Floating the logo left, and adding margin to the #nav will do the trick.
#logo { float: left; }
#nav {margin-top: 80px; width: 100%; display: inline-block; }
h1.title { clear: left; }
You're almost there. Inline-Block is what I'd use with absolute positioned nav, but you have a generic div {position:inline;} that applies to everything on the page inside of a div. You should be more specific for your logo and nav and just get rid of the generic styling by giving each a class like <div class="WHATEVER"> so you can target the div you want to work on.
Then try this:
#logo {
width: 240px;
display: inline-block;
#nav buttons {
margin: 0px 0px 0px 80px;
display: inline-block;
position: absolute;
top: 80px;}
I'm currently building a theme / style for a piece of software.
Currently, the code looks like such:
http://jsfiddle.net/afseW/1/
The relevant code is:
body div[type*=privmsg] .sender {
font-weight: 700;
width:134px;
text-shadow: #fff 0px 1px;
background-color: #eee;
min-height:22px;
border-right: 1px solid #dcdcdc;
padding-right:5px;
text-align:right;
display:inline-block;
overflow: auto;
}
Note that in fiddle, for some reason, the text is collapsing onto the second line, whereas in the client, the image looks like this:
Granted, a span is not meant to be a block, hence I've given it the property of: display: inline-block;
But how do I get the height to inherit the parent p block?
I changed DOM structure. See the inline style. In the first div (.message) I prefer a better solution adding a .clearfix class, see this.
<div class="message" type="privmsg" style="overflow: auto;">
<div class="sender-cont" style="width: 30%; float: left;">
<span class="sender" ondblclick="Textual.nicknameDoubleClicked()" oncontextmenu="Textual.openStandardNicknameContextualMenu()" type="myself" nick="shamil" colornumber="20">+shamil</span>
</div>
<div style="width: 70%; float: left;">
Welcome to <span class="channel" ondblclick="Textual.channelNameDoubleClicked()" oncontextmenu="Textual.openChannelNameContextualMenu()">#textual-testing</span>! This channel is for the users of the Textual IRC Client to test scripts and do other activities in an unregulated environment. — <span class="inline_nickname" ondblclick="Textual.inlineNicknameDoubleClicked()" oncontextmenu="Textual.openInlineNicknameContextualMenu()" colornumber="3">milky</span>'s law states: "On IRC, after a user has executed a command that outputs interesting information to a channel (i.e. /sysinfo), then there will be at least two users that do the same."
</div>
</div>
Hope this helps!
Since the spans are a set width, probably the easiest thing to do here is just make the span have a absolute position.
body div[type*=privmsg] .sender,
body div[type*=action] .sender {
position: absolute;
top: 0;
bottom: 0;
left: 0;
...
}
Then add padding to the parent element:
body span.message {
position: relative;
padding-left: 140px;
...
}
http://jsfiddle.net/afseW/3/
PS: please provide a trimmed down version in jsfiddle next time, the html and css here is pretty epic.
I have recently tried to code a box, contains an image on the left side and next to it an header & paragraph under right like this:
http://gyazo.com/c5165fa45c32f69499768ba95d815328
This is what i have done:
<div class="span4">
<div class="box">
<img src="img/share.png" class="image_margin"/>
<span class="box_title">SHARE</span>
<span id="texting">Upload files straight from you hard disc. Up to 600MB per file upload! the more you earn the more file storage you get.</span>
</div>
</div>
CSS:
.box {
background-image: url("../img/box.png");
width: 305px;
height: 117px;
}
#texting {
font-size: 14px;
}
.image_margin{
margin-top: 25px;
margin-left: 25px;
}
.box_title{
font-size: 24px;
color: #8d8d8d;
margin-left: 15px;
margin-top: 20px;
position: absolute;
}
This is the result:
http://gyazo.com/f600c42f86b51e52de436631fc96656d
Why the text gets out of the box yet its inside the class of the box ?
What have I done wrong? how do I align the title + paragraph like in the first image in CSS so it fits on all screens?
Thank you a lot!
Use align="left" in img tag.
<img src="img/share.png" class="image_margin" align="left"/>
Hope this will help
At the top of a page I've got two divs, one floated to the left and one to the right. I can place text with a border between them, however, I now need to stack two such areas of text between them.
Here's a Fiddle illustrating my problem: http://jsfiddle.net/TcRxp/
I need the orange box under the green box, with each center aligned with the other. The "legend" (floated to the right) used to be at the same level but is shifted down now.
I tried adding another table to the mix but that didn't help.
Excuse the markup - it's not real slick, I know. A few people have touched this over time and none of us are gurus at this.
And yes, I have lobbied for a designer to be added to the team but it hasn't happened yet.
Thanks,
Paul
UPDATE: Incorporating #Jeremy B's suggestion
Does it have to be via CSS changes? When dealing with scenarios like this, you need to be careful of the order in which the HTML elements are defined.
Look at the modification here: http://jsfiddle.net/TcRxp/8/
I was able to acheive what you needed by changing the order of the three DIVs and using the CSS suggesion from #Jeremy B
Essentially, the logic for the layout is
Draw the float-right content
Draw the float-left content
Draw the content in the middle (as it will now render to the right of the float-left content.
First make your top span a block element to stack them:
<span class="color status active bold" style="display:block">Status:</span>
then float the middle div left as well:
add float:left to #headmiddle in your css
It's always going to be difficult to get the desired results when you're combining CSS and tables-for-layout.
I would suggest simplifying your HTML:
<div id="headleft">a little search form here</div>
<div id="headmiddle">
<div class="active"><strong>Status:</strong> Active</div>
<div class="search">Search results displayed</div>
</div>
<div id="headright">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
and your CSS:
div { padding: 2px; }
strong { font-weight: bold; }
#headleft { float: left; font-size: 0.8em; }
#headmiddle { float: left; font-size: 0.8em; }
#headmiddle div { border: 1px solid #000; margin-bottom: 3px; }
.search { background: orange; }
.active { background: #8ed200; }
#headright { float: right; font-size: 0.8em; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
The result is semantically correct HTML, easier to read and therefore easier to modify in the future. Supporting fiddle.
If you need to do it with CSS, see my changes: Fiddle
I added the following:
#headmiddle span.status { display: block }
This will cause your spans to "stack".
I got it by putting together many different sources. Alex Coles' solution was closest right off the bat but the middle wasn't centered. It was much cleaner than my mess too. I started with the code from this post:
<style type="text/css">
.leftit {
float: left;
}
.rightit {
float: right;
}
.centerit {
width: 30%;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.centerpage {
width: 80%;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div class="centerpage">
<div class="leftit">Hello Left</div>
<div class="rightit">Hello Right</div>
<div class="centerit">Hello Middle</div>
</div>
(fiddle for above)
I took the elements Alex cleaned up which got me even closer to my goal, but the center color blocks were way too wide. From this question I learned about "max-width", which ended up being the final piece I needed...or so I thought.
Edit: max-width doesn't work in IE7 quirks mode (which I have to support) so from this page I learned how to tweak my css to work in IE7 quirks mode, IE8, and FF.
The final code (fiddle):
.leftit {
float: left;
font-size: 0.8em;
}
.rightit {
float: right;
font-size: 0.8em;
}
.centerit {
width:220px;
margin-right: auto;
margin-left: auto;
font-size: 0.8em;
}
#headmiddle div {
border: 1px solid #000;
margin-bottom: 3px;
}
.centerpage {
margin-right: auto;
margin-left: auto;
text-align: center;
}
strong { font-weight: bold; }
.search { background: orange; }
.active { background: #8ed200; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
<div class="centerpage">
<div class="leftit">a little search form here</div>
<div class="rightit">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
<div class="centerit" id="headmiddle">
<div class="active"><strong>Status:</strong>
Active</div>
<div class="search">Search results displayed</div>
</div>
</div>
Thanks to all the great answers - I learned a lot from this question.
Paul