well currently I'm converting a PSD file and it has a section like this
luckily in PSD there is a different layer called graph and when I pull it from there the text content look like this
is there any easy way to style content like this. I never did this before like this. can anyone please give me a little instruction.
Pretty sure you could do this with a grid system. I'm seeing a series of three columns, with some text being left, right, or center aligned.
If you're familiar with using a css grid, the following image will be familiar to you.
This won't tell you precisely how to code it but it might help you conceptualize the problem in a way that's easier to write in code.
Related
I am looking for some insight on how to achieve a certain result with email-specific HTML+CSS. I've done some searching and I can't really find anything quite specific enough to fit my needs. I am a decently experienced front-end website designer/builder, but I am new to email HTML. My clients have always used a drag and drop service, but I want to be able to offer higher-quality email designs.
Here is an image that shows my desired outcome, with the green color being the background of the body of the email so that the shape just blocks out the correct parts of the image:
I know this might not be possible with the limited html/css that is required in email design, but if it is I'd love to see an example of it working or if anyone knows a good resource to learn the ins and outs of email code I'd really appreciate it.
My idea originally was to use image 1 as the background of a table, then the 2nd layer of the table, use image 2 as the background, or just add in the image inline with full width. I'd love to be able to put text positioned center, but again that might not be possible, I just don't know the limitations well.
Thanks!
I do a lot of work during the day and I program in quite a few languages so doing CSS work is a little tough because i don't specialize in it. I have run into an issue where wordpress no longer works for me so I have to do mysite on my own. can you guys point me to a web resource that will show me how to get a a look of a multi-level horiz. menu at the top of my homepage similar to the one found here?
https://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/
I got that link from a similar thread here on S/O.
I copied all of the code there and put it in the appropriate CSS and HTML files, but I do not get the multi-leveledness. I only got a vertical menu on the left side without color. I'm a source coder, and generally automate things and I'm horrible at designing anything. I draw stick people and that's as far as my artistic talent goes. so CSS falls into that same boat. thanks!
If you really only got a vertical menu on the left side without color, that sounds like none of the CSS styles are actually taking effect. And since none of the elements have classes from what I can see, it sounds like your CSS isn't actually loading or being applied to the DOM. How have you included the CSS rules into your website? Before trying to use a different demo, try to get this specific one working by looking at your HTML structure and figuring out how to get the styles to grab onto the right elements...
"Use images to break up the content."
What do it means? What can I use code for that? html or css would do. Thank you.
I think this advice is telling you that the content of your page is too condensed (everything is clustered together) - or - the page you're to build should not be one big block of stuff. It sounds like they want you to add images in between blocks of content to spread things out and give space around things - to make things "flow".
Without knowing what the project is it's hard to answer a question like this.
Complex Grid Layout, Help!
I'm making a responsive website using bootstrap 3.0.2 and can't figure out the layout that is stated in the requirements document for the project. I made an image of what I need, and will give more detail, or update my question, if needed. I am open to any suggestion on how to accomplish this.
The Issue
This image describes what I need the design to look like at three different widths.
I should add, each box will be basically a div with an image, article title and summary within it.
Like to say ... in advanced
Id like to say thanks and apologize in advanced if the question is dumb or the answer is obvious. I have been a dev for a long time, but I'm new to responsive design and I've been banging my head on the wall trying to get this to work
The problematic part of your project is to make two smaller blocks side with a bigger one and make these two 50%. As far as I know, there are no mature cross-browser solutions that would accomplish that without javascript.
You may want to take a look at: Flexbox and for Comrade IE Flexie.
Another approach to accomplish the same could be using viewport dimensions. Just be aware of the browsers support.
All in all, if you can do that, I would suggest just using JS, with a fallback to css that will not break the site's look too much. Having just finished a project with similar requirements, I would just like to say good luck.
Hey guys I have got my site looking how I want it to but I feel the code is extremely untidy and was wondering if there was a simpler way to achieve the same layout with friendlier code.
Site here
Also the footer, I would prefer it if I could get it to be a separate div outside of the content, but at the moment its the only way I can sort of achieve the look I want.
I dont see any problems with your layout or code - everything looks pretty tidy to me ...
The Divs are clearly laid out to match the flow of your site - keep it as it is ....