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 ....
Related
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...
I use to be a full stack web developer 15 years ago when CSS was budding. We of course used tables for everything. Well i'm back and really put some time into CSS because i have to say its cool.. But i find it AN ABSOLUTE RIDICULOUS PAIN to do some simple things that tables STILL do far easier and better than Divs with CSS. I've found dozens of alignment solutions online (Most that don't work or only work if you have fixed pixel size content, but only a couple few that just look nasty bulky and require additional header/trailer container html parent elements to properly center a simple element like a button or image. It just seems like the resulting CSS is far more of a work around than what people claim Tables were. So my question is what is the simplest repeatable approach for dynamically aligning content with CSS (Aligning Right, Left, Center...Both vertical and horizontal.)?
I will keep this answer short and simple.
The Best Way
Use grid. It's the most robust css stuff out there. With tons of customization, you can make the page look nearly exactly the way you want. It's a 2-dimensional system. Well, the configuration can sometimes takes a bit pain. If the layout is pretty simple and speed is of essence, try flex
The best resource: https://css-tricks.com/snippets/css/complete-guide-grid/
The Easy Way
Use flex. It's an efficient, simple way to go for if your layout isn't too demanding. Relatively easy to setup. It's 1-dimensional system, however. If you're looking for complex grid, you're barking the wrong tree. Try grid.
The best resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
These are the ones that I always use. I have also outlined a simple tip when you would want to go for one over other. It's worth mastering both. Trust me. Hope this helps.
"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.
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.
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.