I’m reading some Html code for a web page, where author essentially wanted to create a page with header, footer and content area. The content area would be divided into three columns with center column having the right and left margins set to 200px, and these two margins are to be filled by two other DIVs docked on the page border with absolute positioning.
Here is author’s code for content area ( for the sake of clarity I’ve omitted the header and footer code ):
<div id="container">
<div id="container2">
<div id="centercol">
</div>
<div id="rightcol">
</div>
</div>
<div id="leftcol">
</div>
</div>
CSS file:
body
{
margin: 0px;
font-family: Verdana, Arial, Serif;
font-size: 12px;
}
#container
{
background-color: #818689;
}
#container2
{
background-color: #bcbfc0;
margin-right: 200px;
}
#leftcol
{
position: absolute;
top: 184px;
left: 0px;
width: 200px;
background-color: #bcbfc0;
font-size: 10px;
}
#centercol
{
position: relative;
margin-left: 200px;
padding: 0px;
background-color: white;
}
#rightcol
{
position: absolute;
top: 184px;
right: 0px;
width: 198px;
color: White;
background-color: #818689;
font-size: 10px;
}
Any idea why author decided to put both the center column and the right column inside container2? I see no advantages in doing that and in fact it just complicates the logical structure of the page?!
thanx
It looks like this was so he could have position effectively determined by the width and position of the centercol while allowing for a particular source order for the content. There are a few different ways to do this. Id guess he did it this way to avoid using floats (and the various "fixes" for IE6 compat that entails).
Not the way i would have done it i dont think but i assume it worked well for this site in the grand scheme of things.
Overall though sometimes you have to do some interesting things to match a comp with markup/css. Depending on what the designer has thrown at you and the level of abstraction needed within the system (assuming its built on some sort of dynamic content) you can end up doing something that cant possibly be construed as straight-forward. Nature of the beast until CSS and the browser implementations of it catch up to graphic designers :-)
Usually people adjust their markup due to having their layout and design in mind. That's probably what the author in that article was doing when he put those two sections together. It's not what I would have done, but at the same time you don't want to get yourself worked up about semantic debates on the internet :)
I would rather see someone author web-pages for the content and then design them in CSS (How To: Pure CSS Design)
If the author wants for search-engine purposes the main content to come first then that would be a reason. I'm not sure why he'd use absolutes though as you can't clear them and that would cause problems for a footer.
Related
This is my first ever question on stackoverflow so I apologize if I'm not following standard etiquette.
I'm working on a blog final project for a class that requires a custom theme and I'm using tumblr to host it for reasons independent of coding. This is the first time I've used css for more than extremely basic styling purposes, and I'm relatively new to html/css-related work in general.
For my main page, I have a sticky sidebar on the left 1/4 of the page, and then 3 columns for posts in a tiled gallery sort of like (similar to masonry but I used css grid because masonry confused me). Overall, I'm pretty satisfied with how this is turning out. Due to my inexperience, it's not where I would ideally have it designed, but my goal is to be able to work on it as I learn more html/css/js after this class is over.
main page layout
about page currently
However, I'm having trouble with fixing an individual post page and my about page: when you click on an individual post, it's also being shown as a 3 column post, which is not my intention at all. Same with the about page. I think this is due to my usage of css-grid on the main page, but I'm confused as to how I can fix this on individual posts.
a note on my html/css - my friend let me borrow most of the sidebar-specific code which is why it's much nicer than some of the stuff I've written and she's helped me a lot during this process but the page issue isn't something she's ever really encountered because she doesn't use css-grid or columned design often.
I've tried simply writing a completely new html for the about page, but my sidebar uses meta/variables (that I think are) built into the tumblr theme editing interface, so my sidebar wouldn't show up correctly when I tried to do that. And I haven't tried anything for the posts because I didn't even realize they had an issue until earlier today.
I can provide other code snippets if this would help, but I'm not sure what to include other than these:
#sidebar {
top: 35%;
position: -webkit-sticky;
position: sticky;
background: #ffffff;
height: 40vh;
width: 20%;
text-align: center;
padding: 25px 10px 10px 10px;
border: 2px solid;
border-radius: 70% 30% / 20% 40%;
margin: 2% 2%;
}
#container {
column-count: 3;
display:inline-block;
grid-template-columns: auto auto auto;
grid-area: container;
width: 100%;
column-gap: 20px;
}
#house {
display: flex;
flex-direction: row;
justify-content: right;
}
.content{
width: 90%;
background-color: #ffffff;
padding: 20px;
margin: auto;
margin-bottom: 10px;
float: left;
}
<body id="{select:background}">
<div id="house">
<div id="sidebar">
<a href="/">
<h1>{Title}</h1>
</a>
<div id=“description”>
{Description}
</div>
<br />
<div class="sidebarlink">{text:link 1}</div>
<div class="sidebarlink">{text:link 2}</div>
<div class="sidebarlink">{text:link 3}</div>
<div class="sidebarlink">{text:link 4}</div>
</div>
<div id="container">
{block:Posts}
<div class="content">
[I've omitted the post types and their meta info for clarity]
</div>
{/block:Posts}
</div>
</div>
Any help at all would be greatly appreciated! If this has already been answered please direct me there as well, I'm not too well-versed in navigating stackoverflow yet.
I am working on this task where I need to put the divs in the required positions. The final result should be this:
.
I have the following code:
HTML:
<div class="activity">
<h2>Activity 5</h2>
<section class="hint"><input type="checkbox" > <h3>Hint 5</h3><i></i><div><p>Grid is <strong>not</strong> the right way to do this. In fact there is only one way to really do that...and that is with float. Remember that we float the thing we want the text to wrap around. Also remember to start by making all the shapes the right size and shape.</p><h4>Properties used:</h4><ul><li>float: left;</li></ul></div></section>
Wrap the text around the square like in this image. This is one case where Grid is NOT the right way to solve this one and will in fact make it harder if you try to use it!
<div class="content5" >
<div class="red5" ></div>
<div class="green5" ></div>
<div class="yellow5">Step 01: Continue creating the main page for your chosen web site by modifying the CSS file you created in week 9's Adding Classes and IDs to Your Website assignment. This week, you will position all of the content on your main page using the CSS positioning techniques taught in KhanAcademy. When you are done, your webpage layout should reflect what you outlined in the wireframe you designed in the assignment Your Own Site Diagram and Wireframe in week 3. <br />
If you have changed your mind on how you want the content of your main page laid out, take an opportunity to update your wireframe before completing this assignment (it is much easier to experiment with different layouts in a wireframe than it is to do so by modifying the CSS). Also, if you find that you are having trouble with using CSS positioning, feel free to review the concepts at the learn layout site: http://learnlayout.com/. You should be able to apply these principles to your site. For futher help, refer back to the Max Design site used in the beginning of the course for an example of how to implement your site design.</div>
<div class="blue5"></div>
</div>
</div>
CSS:
.content5 {
/* This is the parent of the activity 5 boxes. */
position: relative;
}
.red5 {
width: 100%;
height: 100px;
background-color: red;
}
.green5 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
}
.yellow5 {
width: 100%;
height: auto;
background-color: gold;
}
.blue5 {
width: 100%;
height: 100px;
background-color: blue;
}
The code I have so far looks like this: I have tried a couple of things to make the text appear next to the div but they haven't worked. The HTML should not be modified. And I need to use CSS for this task, not bootstrap or something else. Thanks!
Add this to .green5 would work.
I've tried it and it actually works well.
.green5 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
I'm trying to teach myself some web coding, so please bare with me. At the moment, I'm creating a modal page whose modal contents have three div elements (a close button, an image, and paragraph tags). I have applied some padding on the left side of the divs in the modal content divs because I wanted the image and the paragraphs to be spaced next to each other pretty nicely. However, I want the padding to only apply to the image and the paragraphs tags, and NOT the close button.
My question is, is there a way to apply padding to only the image and paragraph tags, but NOT the close button div.
CSS
#modalPage1{
height: 100%;
width: 100%;
position:absolute;
top: 0;
background-color: rgba(255, 128, 213, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
#modalPage1 > #modalContent1 {
background-color: white;
height:100%;
width: 75%;
display:flex;
align-items: center;
position:relative;
}
#close{
position: absolute;
top: 0;
right: 14px;
font-size: 50px;
transform: rotate(45deg);
padding:0%;
}
div > #modalTxt{
width: 80%;
}
#modalContent1 > div {
padding-left: 10%;
}
div > #modalImg{
width: 353px;
height: 447px;
}
HTML
<div ID= "modalPage1" class = "modalFish">
<div ID = "modalContent1" class = "modalFishContent">
<div ID="close">+</div>
<div><img ID= "modalImg" class= "modalFishImg" src="Images/Fish School.jpg"></div>
<div><p ID = "modalTxt">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall,
I decided to use this as the background. Being that it's a dark color, it's easy to layer on different
colors that will coordinate well, while adding a pop to it. </p>
<p ID = "modalTxt">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back
to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces
appear a bit obscure, almost reminiscent of a pile of leaves. Looking closely, we can see that the origami is
in fact fish swimming in all different directions.
</p>
</div>
</div>
</div>
The CSS code you currently have below applies the padding to every div that's inside the div with id="modalContent1". That's a problem because you can't specify what elements you want the padding to apply to; if it's a div, it gets padded. You could change the button to something that's not a div, but any other divs you add would still get padded.
#modalContent1 > div {
padding-left: 10%;
}
Instead of doing that, we can use classes instead, so only elements that belong to the class get padded. We can start by replacing the code above with the CSS below.
.padding {
padding-left: 10%;
}
This will apply the padding to every HTML element with class="padding".
Now we just have to add the classes into the HTML. You used ID="modalTxt" in your HTML twice, but IDs should only be used once, so we can replace that with class="modalTxt" instead. Make sure you replace that in your CSS too so you can keep the width customization, just change the # in div > #modalTxt to a . like this:
div > .modalTxt{
width: 80%;
}
Multiple classes can be used as long as they're separated by spaces, and having a separate class for padding lets you customize the padding on its own, and the elements' other attributes on their own. So your HTML would look like:
<div ID= "modalPage1" class = "modalFish">
<div ID = "modalContent1" class = "modalFishContent">
<div ID="close">+</div>
<div><img ID= "modalImg" class = "modalFishImg padding" src="Images/Fish School.jpg"></div>
<div><p class = "modalTxt padding">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall,
I decided to use this as the background. Being that it's a dark color, it's easy to layer on different
colors that will coordinate well, while adding a pop to it. </p>
<p class = "modalTxt padding">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back
to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces
appear a bit obscure, almost reminiscent of a pile of leaves. Looking closely, we can see that the origami is
in fact fish swimming in all different directions.
</p>
</div>
</div>
</div>
One last thing, you can safely remove the "modalFishTmg" class if you're not going to use it in any other elements, since you're already styling the image with an ID. Also, the classes could go in the divs where you put your <img> and <p> tags, but that would give the padding to anything that's in the div, which could be a problem if you add anything else.
To apply styling to every child div of #modalContent1 except for the div with identifier close this snippet uses the CSS :not pseudo class:
#modalContent1 > div:not(#close) {
/* set the padding as required here */
}
Just to make it obvious in this test, the background color of the relevant elements is set rather than padding:
#modalPage1 {
height: 100%;
width: 100%;
position: absolute;
top: 0;
background-color: rgba(255, 128, 213, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
#modalPage1>#modalContent1 {
background-color: white;
height: 100%;
width: 75%;
display: flex;
align-items: center;
position: relative;
}
#close {
position: absolute;
top: 0;
right: 14px;
font-size: 50px;
transform: rotate(45deg);
padding: 0%;
}
div>#modalTxt {
width: 80%;
}
#modalContent1>div {
padding-left: 10%;
}
div>#modalImg {
width: 353px;
height: 447px;
}
#modalContent1>div:not(#close) {
background-color: cyan;
}
<div ID="modalPage1" class="modalFish">
<div ID="modalContent1" class="modalFishContent">
<div id="close">+</div>
<div><img ID="modalImg" class="modalFishImg" src="Images/Fish School.jpg"></div>
<div>
<p ID="modalTxt">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall, I decided to use this as the background. Being that it's a dark color, it's easy to layer on different colors that will coordinate well, while
adding a pop to it. </p>
<p ID="modalTxt">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces appear a bit obscure, almost
reminiscent of a pile of leaves. Looking closely, we can see that the origami is in fact fish swimming in all different directions.
</p>
</div>
</div>
</div>
Note: view in full page othewise elements overlap and the effect cannot be seen correctly.
There are multiple ways to do this .
Add padding in #modalImg & #modalTxt.
Don't use 2 tags in img and p. Bring them under one div tag and apply inline CSS or a separate class or id .
i would like to create a single page where:
1) The top, 100px, fixed
2) The bottom, 100px, fixed
3) Between top and bottom there is dynamic content
I was able to create exactly that but i have an issue, when i am scrolling the dynamic content, the elements go under and over the top and bottom and the same elements are visible thru the fixed top/bottom.
I tried clear: both; on the top and bottom div, but since they are fixed, the clear: both; did'nt works.
I would like to keep the dynamics elements inside the content div between top and bottom and if possible still use the main document scroll bar to scroll inside it.
Here is an example, assume the lines represent the top and bottom fixed div, and the 'element' are the dynamic contents.
element - not correct
element - not correct
element
element
element
element
element
element - not correct
element - not correct
Hope i am clear enough and thanks in advance!
I guess this is what you're looking for.
See this fiddle.
HTML
<header>
This is the header!
</header>
<article>
<p>Goodness one unimaginative rooster some that circa much jay goodness gosh pessimistic scantly dark some modest gasped where unexplainable some before about that a hello firefly macaw ethereally indecisive panda lorikeet where a peskily jellyfish a since lied factiously in and that after but falteringly so worm flabbily yet hey gladly more versus much precarious because a the boisterous quiet fed one alas hawk flawlessly thanks some.</p>
<p>Squirrel much krill regarding before contrary jeez outdid warthog immaturely articulately valiant hey suggestive thus far won darn wow scorpion portentously more hotly miraculous jeepers meagerly since excluding that however pinched yet whale adoringly floppy tenably wow and after via for unproductively as one prior the more on urchin rang much because some more approving near oh a as far lion some lucky far much frog far and beneath underlay far after nosy jaguar subconscious after this far input frequently distant the much positively gagged jeez unobtrusively far sank less before babbled far by when this the this sensible outside.</p>
<p>That far qualitatively intrepid vulture a ferret disgraceful moaned therefore easy much and curt insincerely dachshund notwithstanding yikes and dragonfly and patted until much jeez close fumed divisive copiously wherever near near far perceptible shrewdly ground yikes opened as elaborate adversely spilled that creepy imaginative by in hello groundhog magnificently jeez hence crud versus desperately caterpillar checked one wicked far some yikes.</p>
<p>And darn dependent that urchin upon much jeez ably sniffed a less in far darn far incorrect between inept caterpillar man-of-war manta hence ironically into more amenable negative sanctimoniously tortoise eagle far spoiled clapped tepid yikes irresistibly testy warthog hugged immense much immense alas thus paid therefore agitatedly about well following the hey aboard and that after and condescending seagull because alas slept hey this went dove far much far considering raccoon witless under ungraceful.</p>
<p>Emptied much gosh circuitously inside along a far pointed fanatic hey bravely with far yikes capybara meadowlark sedulous some lion squid floated darn drolly underwrote loving spat maliciously coaxing unwilling goodness seagull elephant snickered balked sloth for kookaburra inside untactfully so the where much human then because pungently cracked heard overtook firm skeptically reverently much some jeez less and hey towards.</p>
</article>
<footer>
This is the footer!
</footer>
CSS
body {
font-family: sans-serif;
}
header, footer {
position: fixed;
height: 100px;
text-align: center;
width: 100%;
background: #ff0450;
color: #fff;
text-transform: uppercase;
line-height: 6em;
}
header {
top: 0;
}
footer {
bottom: 0;
}
article {
margin: 100px 50px 0;
}
article p {
margin: 20px 0;
}
article p:first-line {
font-variant: small-caps;
}
Update
body {
font-family: sans-serif;
}
header, footer {
position: fixed;
height: 100px;
text-align: center;
width: 100%;
background: #ff0450;
color: #fff;
text-transform: uppercase;
line-height: 6em;
}
header:before {
content: "";
position: absolute;
height: 20px;
background: #fff;
z-index: 999;
top: -20px;
width: 100%;
left: 0;
}
footer:before {
content: "";
position: absolute;
height: 20px;
background: #fff;
z-index: 999;
bottom: -20px;
width: 100%;
left: 0;
}
header {
top: 0;
margin-top: 20px;
}
footer {
bottom: 0;
margin-bottom: 20px;
}
article {
margin: 120px 50px 0;
}
article p {
margin: 20px 0;
}
article p:first-line {
font-variant: small-caps;
}
Updated the fiddle too.
here, take a look at this.
http://jsfiddle.net/PxabT/47/
update
http://jsfiddle.net/R4SV5/7/
Give the top and bottom elements a background-color or background image. Also it is probably a good idea to give top and bottom a z-index of 3 or higher.
I'm currently using a combination of CSS and Div tags to achieve rounded corners on a text element. This is the CSS I'm using:
div#installerSearch {
float: left;
position: relative;
color: #000055;
width: 154px;
border: 1px solid #2A5390;
padding: 8px;
background-image: url('images/background.png');
}
div.roundAllGreen {
position: absolute;
width: 8px;
height: 8px;
background-image: url('images/roundgreenthingy.png');
}
div.roundTopLeft {
left: -1px;
top: -1px;
background-position: 0px 0px;
}
div.roundTopRight {
right: -1px;
top: -1px;
background-position: -7px 0px;
}
div.roundBottomLeft {
left: -1px;
bottom: -1px;
background-position: 0px -7px;
}
div.roundBottomRight {
right: -1px;
bottom: -1px;
background-position: -7px -7px;
}
and this is the resulting HTML:
<div id="installerSearch">
<div class="roundAll roundTopLeft"></div>
<div class="roundAll roundTopRight"></div>
<div class="roundAll roundBottomLeft"></div>
<div class="roundAll roundBottomRight"></div>
<p> ... </p>
</div>
Can anyone else spot the issue? I've resorted (for lack of a better method) to including presentation in the form of markup, which makes this a little difficult to re-theme, as I'm trying to do.
What I'd really like would be the ability to have CSS add div tags inside a container div for me. I realize that this breaks the "no content in CSS" rule on a code level, but considering that my rounded corners hardly qualify as content it doesn't break it in my book.
So I guess what I'm asking is, is there a good way to accomplish the same effect (rounded corners using images) without needing to introduce extra tags into my content using CSS? The idea here is to end up with a CSS sheet that I can swap out completely without needing to make modifications to my template HTML page, but if that's not possible I'd accept that as an answer. It just seems that google is utterly failing on me this time. ^_^
Short answer: there is not currently a well-supported CSS-only way to do this.
If you can't wait around for CSS3 support, you may want to look in to JavaScript alternatives. Nifty Corners Cube will add rounded corners, and claims to even anti-alias. There are also many jQuery corner plugins, and this one does many different corner effects.
Is there a particular reason you want to use images for the corners? If all you need is a round corner, you may be able to get by using the aforementioned JavaScript solutions. I would really recommend looking at the Nifty Corners Cube examples.
Edit: If you are concerned about extra markup harming your search engine efficiency, then a JavaScript solution would make even more sense (although a CSS-only solution would be best in my opinion) because the extra markup would be added client-side. I have worked with a few search engines and they purposely strip out script tags before indexing the content.
Can anyone else spot the issue?
The difference in className between roundAll and roundAllGreen?
I've resorted (for lack of a better method) to including presentation in the form of markup, which makes this a little difficult to re-theme, as I'm trying to do.
Some sort of interference with the markup is unavoidable until such time as (a) IE supports border-radius, or (b) multiple background images on a single element become possible.
Another possibility with somewhat less interference is background nesting:
<div class="box"><div><div><div>
Hello
</div></div></div></div>
.box { background: url(topleft.png) top left no-repeat; }
.box div { background: url(topright.png) top right no-repeat; }
.box div div { background: url(bottomleft.png) bottom left no-repeat; }
.box div div div { background: url(bottomright.png) bottom right no-repeat; }
In your current page the width of the box is fixed, so you can get away with only two nested divs, one for the top edge and one for the bottom.
You can write JavaScript that will add those divs for you. But it's a huge problem in CSS, it does depend on the content anyway whatever others might say.
Another jquery plugin that works very nice: Anti-aliased Rounded corners with JQuery
one mod to bobinces's solution:
<div class="box"><div><div><div>
Hello
</div></div></div></div>
.box { background: url(topleft.png) top left no-repeat; }
.box>div { background: url(topright.png) top right no-repeat; }
.box>div>div { background: url(bottomleft.png) bottom left no-repeat; }
.box>div>div>div { background: url(bottomright.png) bottom right no-repeat; }