I'm working on this website: docksteaderlending.ca.
I had several text blocks in the page that I didn't want to be full width, so I used this piece of css:
div.textwidget{
width: 500px;
margin-right: auto;
margin-left: auto;
}
div.textwidget {
max-width: 500px;
margin: auto;
}
However, this changed all the text blocks. Initially it wasn't a big deal, but I've realized it's messed up the text blocks I have in the footer.
I'm quite new to css/html so i'm not sure how I can exclude certain text blocks.
I tried replacing textwidget with the name of the text block (ex. text-2) but that hasn't worked.
All help is appreciated, thank you!
Just apply a class to the text blocks which you want to be affected and set up a CSS rule for that class (not for the textwidget class)
div.myclass {
width: 500px;
margin-right: auto;
margin-left: auto;
}
div.myclass {
max-width: 500px;
margin: auto;
}
<div class="myclass">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
</div>
<div class="notmyclass">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
</div>
Let me see if I understand the title "making certain div sections NOT full width"... You are trying to get different widths from a certain DIV? If so, I think what you should be doing is have multiple child divs inside THAT div and give them different width. Let me know if I understood right so I can give my best on helping out!
Related
Is it possible to put two <p> in the same line? I've tried setting the margin to 0, put it still won't work. Does anybody have an answer to this?
Thanks!
That's what inline-blocks are for. Assign display: inline-block and a width less than 50% to the paragraphs to get the desired result
.myclass {
display: inline-block;
width: 47%;
padding: 1%;
}
<p class="myclass">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
</p>
<p class="myclass">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
</p>
The paragraph <p> tag is a block level element where as the span <span> tag is an inline level element.
If you want to make the paragraph tag inline you may do this:
p {
display:inline;
}
.spacer-text {
margin-top:15px;
margin-bottom:5px;
text-decoration:underline;
}
<div>Two paragraph tags:</div>
<div><p style="color:olivedrab;">Voilà! In view, a humble vaudevillian veteran, cast vicariously as both victim and villain by the vicissitudes of Fate. This visage, no mere veneer of vanity, is a vestige of the vox populi, now vacant, vanished. </p><p style="color:rebeccapurple;">However, this valorous visitation of a by-gone vexation, stands vivified and has vowed to vanquish these venal and virulent vermin vanguarding vice and vouchsafing the violently vicious and voracious violation of volition.</p></div>
<div class="spacer-text">A nicer approach would be two spans:</div>
<div><span style="color:firebrick;">The only verdict is vengeance; a vendetta, held as a votive, not in vain, for the value and veracity of such shall one day vindicate the vigilant and the virtuous.</span><span style="color:peru;">Verily, this vichyssoise of verbiage veers most verbose, so let me simply add that it's my very good honor to meet you and you may call me V</span></div>
Why the inline elements ignored margin top and bottom?
just accept margin right and left?
span {
margin-top:20px;
margin-bottom:20px;
}
Inline, by definition, doesn't have top or bottom margin. What you'll want to use is display: inline-block. The height for inline is determined by the contained objects only.
Edit: Here's the relevant spec.
Just because it's inline. Inline elements cannot have any top and bottom margins (and also no top or bottom padding):
span {
margin: 30px;
padding: 20px;
color: red;
}
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. <span>Donec pede justo,</span> fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,
</p>
On my Wordpress blog, I have right aligned the images when inserting them, where the body text wraps around them perfectly. I would however like to include text underneath the images such as "Click Here to Order".
I tried adding the order link html as a caption to the image media but that didn't seem to work. I also tried wrapping the image in a DIV and putting the link below it but it didn't group them as desired.
What would be the best way to accomplish this?
<h2>Best Mixers</h2>
[table id=2 /]
<h2><a name="kitchenaid"></a>Kitchenaid</h2>
<img class="alignright size-medium wp-image-1323" src="https://website.com/mixer-300x300.jpg" alt="Kitchenaid Mixer" width="300" height="300" />
I Hope Help You:
img {
width: 300px;
}
#divPic {
float: right;
margin-left:10px;
}
#divPic h3 {
text-align: center;
background: #000;
color:orange;
margin:0;
padding: 0;
}
<div id="wrapper">
<div id="divPic">
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg">
<h3>Click Here to Order</h3>
</div>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec
</div>
</div>
Did you try
<div class="alignright">
<img><br>
text
</div>
(Note the <br>)
I'm not sure what Wordpress' various CSS rulesets (referred to by the class attribute) do, but your objective is to group the image and its caption together in a <div> and have that "object" (rather than just the <img>) float to the right.
So, I have a container that has a gradient background but I want to add another different colored gradient background to some text at the top of my container. Here is an example of what I am talking about:
Basically what I want to do is add that dark grey background to the top of my container but also keep the gradient background below it.
Thanks for any help
It depends which direction the gradients should go. If both are from top to bottom, you can simply write it as ONE gradient in the same background rule, using the same pixel or percentage value for the two different colors where you want to have the border between the two gradients (here 20%):
.x {
width: 80%;
margin: 30px auto;
background: linear-gradient(to bottom, #6df 0%, #0d3 20%, #ffd 20%, #d90 100%);
}
<div class="x">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate
eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit
cursus nunc,</p>
</div>
You can make a div, set the gradient for most of the background, make a child div, and set a new background color for it. Here is an example:
#parent {background: black;
width: 100px;
height: 100px;
}
#child {background: grey; width: 100px; height: 20px;}
* {color: white;} /*so you can see text*/
<div id="parent"><div id="child">Special Text</div>Other gradient</div>
Hope it helped!
This question already has answers here:
How do you make div elements display inline?
(20 answers)
Closed 6 years ago.
Trying to get these two div's in one paragraph, does anyone have a solution?
<div class="boxed">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
<div class="boxed">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
From what I understand of your question, you want to insert two <div>'s in a single <p>?
If so its quite simple:
<p>
<div id="div1"></div>
<div id="div2"></div>
</p>
This obviously wraps two <div>s in a single <p> (paragraph). Then just add the inline css class to your <div>s:
css style for inline:
<style type="text/css">
div.inline { float:left; }
.clearBoth { clear:both; }
</style>
Now just add the inline class to both your divs:
<div id="div1" class="inline">test</div>
<div id="div2"class="inline">test</div>
Output:
testtest
Hope that helps