I do hate to keep asking questions. I have been trying to add code to my website. No matter what code I add, none of it works. I have changed the names of the CSS names thinking that would work but it fails.
Currently I am trying to add in some image gallery blocks. I am on w3 schools and it works.
https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery
I bring the CSS and code to my website and it looks like this:
https://postimg.cc/image/ifn4dsqrr/
I have tried so many card and block codes and they all either mess up my homepage or ruin the css and I have to revert back to the previous version.
Over the last 2 days I have spent 6 hours trying to get 4 little responsive blocks with image background and text overlay to simply work in between 2 banners.
Here is a link to my test store where I am building out a homepage:
http://newdev-vitavibe-com.3dcartstores.com/
I am determined to learn why. I opened up a request to pay someone to build this homepage for me. I had lots of offers but I really want to learn how myself.
If you are willing to use bootstrap you could put them in containers, I linked below the documentation for this. Bootstrap will make your life a lot easier when it comes to grids, saved my butt plenty of times.
https://getbootstrap.com/docs/4.0/layout/grid/
Inspecting the html of your site, a saw that what you want could be accomplished with the following html structure
<div id="fullWidthBlock" class="fullWidthBlock2">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div id="fullWidthBlock">...</div> <!-- all the div.gall where here -->
Note that the <br/> between the two div#fullWidthBlock where removed.
And dont repeat the id attribute it is meant to be unique in each html document.
Thats the page with the changes:
Take a look at "!important" keyword in CSS. You should use it like that:
#smth { color: red !important; }
So I've this problem with an addon for wordpress that don't seem to be supported but is something I'd like to use anyway.
Name of the addon is VS Restaurant Menu (Visual Composer).
The problem I'm facing is maybe something that has an easy solution but I don't have the skill to make it happen, and don't really know how to explain it best.
Thank you all in advance!
Problem
So the addon make it possible to easy place menu-items in Visual Composer, but when the dish title is to long it pushes down the price, and I don't want that.
The addon is made in Span1, Span2 and Span 3.
Span 1 : Number
Span 2 : Dish Title
Span 3 : Price
This is how the spans look on the site:
What I'm looking for
I want the spans to stay on the same line and grow downwards instead of pushing down the next span.
I've tried to look for a solution with all kinds of css, but nothing works.
Any ideas?
Thank you!
Your description doesn't contain any code, which really isn't the way you should ask a question here, but here is a general approach:
Apply width settings in percent to the spans (like 10% / 75% / 10%), make them display: inline-block and add vertical-align: top;
I'm trying to make a blogpost into a forum-format, which i thought would be quite simple with html-tables and some css. I can't attach an image because this is my first question/answer here, but everyone knows the forum/disqus format: two-column with a narrow one on the left for the avatar and a wider one for the text.
Fact is that using just hmtml-css tables, the text floats to the left as soon as it (vertically) passes the image. That is solved by using "position:absolute", but then the whole image&text overlap each other AND most or everything that is beneath it, depending on how one resize the window.
Anyway, it's just the old forum-format, what am I doing wrong. Can't link to a page, not a live site yet. I'm using WP with the (modified) Blaskan theme.
It is isn't clear if you're trying to add a forum or just a table that looks like a forum-format table.
If you want to a forum in WP, then you might want to follow
http://wordpress.org/support/topic/add-forum-to-wordpress
http://wpmatter.com/top-5-wordpress-forum-plugins/
If you are trying to add a two column table, you'll need to post the html and css using.
For example, you can post like this http://jsfiddle.net/minerva/UJjup/. You must've added a "position: absolute" in the <td> tag and that is why your text is overlapping
Remove the position:absolute from the tag.
table td
{
position:absolute
}
Then add your css style specifically on the first column and or second column.
I'm building a website for someone and they wanted the text and bulk of the information to be centered on the page. Problem is I can get everything contained in a tag and then assign the class, but I can't get the whole thing to center. It always hangs to the left even if I apply centering to the div class.
I guess you could say that it is stuck on the left side of the page when I want everything to be centered. I would just make everything format larger but they want some space left in the background for the color and maybe some imagery later on. They haven't made up their minds.
If you want to take a look here is the link where I'm building or testing stuff. I know the header and such needs to be re proportioned to fit with everything, but just as a frame of reference. Don't worry about the header, just know that I want the white text information area with the purple border to stay the same size, but just move to the center and if some one could tell me how to do that I would appreciate it greatly.
just add margin: 0 auto; to that class CSS, for this to work, that object needs to have a width
<div align="center" class="stylex" style="margin:0 auto;width:606px">
<span class="heading"><strong>About The Book</strong></span><br>
<span class="stylez">Mable's Magic Spell</span> Features 28<br>
of the most commonly misspelled words by children.<br>
<br>
Through rhyming, a visual clue, or a word association,<br>
<span class="stylez">Mable</span> and her dog <span class="stylez">Mixie</span> take a close look at these words.<br><img src="http://new-wav.com/mable/MableBookCover_small.jpg" class="img" width="457" height="550" align="middle"><br>
<span class="stylez">Mable's Magic Spell</span> is a book children should read many times.<br> Through repetition, children can succeed at spelling these everyday words.<p></p>
</div>
For your div set the css margin: auto;
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I have stopped to insert "img" tags for the logo of the page. Because its not an image that is part of the content, its a design element but its still a information I want to have control over. So I just write the title in a "a" element as display: block, overflow: hidden and I push the text out with some padding. I think thats a good solution for SEO because you are keeping control of how important the logo should be on a page.
But now my dilemma is starting. How important is the logo of a page?
"A list apart" puts the logo in a h1 element. But is the logo really that important? On article pages you have two H1 elements (the logo and the title of the article) Most of the sites just use a img balbal /a, but I don't like this solution. Because I just want to use img for images that are part of the content...
Its kinda philosophical question, I hope you can give me some input or some articles to read about that...
Think about it this way: "How should a text-to-speach browser translates the page if a disabled person visit the site?".
Do you want the text-to-speach to mention the logo as an image? If yes: the logo should be an img with a caption providing a textual description. If no: use whatever alternative to no have image as content.
Do you want to emphasize the importance the page title, the article time, and the logo?
I guess I would
use an img for the logo (so that it's also printed, which is not always case if you use background image)
provide a nice caption (with "alt" attribute) that describes the logo and the company
have the page title be "company - page title"
have the main title be h1.
I feel like it should also gives decent SEO results.
For the homepage, the logo is a very important heading.
<h1><img src="/logo" alt="ACME inc."></h1>
…and it is an image that is part of the content, it isn't decorative or part of the background.
For other pages, it isn't.
<div><img src="/logo" alt="ACME inc."></div>
<h1>Products</h1>
Your logo represents your brand identity. It is the ONE thing you want your visitors to remember (if they like your site, that is).
I personally recommend always using a CSS image replacement technique for your logo in an <h1> tag because you want search engines to recognize this as your bread and butter. You want to ensure you rank on the top for your company name. This will help get you there.
h1#logo { height: LOGOHEIGHTpx; width: LOGOWIDTHpx; text-indent: -999em; overflow: hidden; background: transparent url('/path/to/logo.gif') 0 0 no-repeat; }
Q: -How important is the websitelogo on a page?
A: -Very important! :)
I prefer putting the logo in an H1 and hide the name of the website. The logo is a big part of the website's identity but it's also often the "home" link... so it's important enough!
edit: CODE SNIPPET TIME!!
<h1>my company</h1>
with a background image on the link (and displayed block with a set width and height etc.)
Speaking as an old search engine guy, the logo itself is not really what the page is about. I normally put it (img or text) in a styled div. The title of the specific purpose of the page is normally what you want to wrap in an H1. This is usually the same as the TITLE, although I normally tack on a " | SiteName.com" to the title so that the site name shows up clearly in the results listing.
I always do this:
HTML:
<h1 id="logo">Company Name (with tagline, if any)</h1>
CSS:
#logo a {
float:left;
width: ...px;
height: ...px;
text-indent:-1000em;
background: url(/path/to/image) no-repeat;
}
You can replace the H1 with H2, H3 etc.. on the inner pages, but I prefer keeping the header (and other sections) consistent as much as possible.
I believe it is good practice to have your <h1> tags match (or contain) similar text to the <title> of the page. For this reason, I think the following pattern is a good one:
<title>Your Site Name Here</title>
...
<h1 id="logo">Your Site Name Here</h1>
And on other pages:
<title> Article Title Here | Your Site Name Here</title>
...
<div id="logo">Your Site Name Here</div>
...
<h1>Article Title Here</h1>
Having the nested <a> tag in the div#logo allows you to have a different click area than logo display. For instance, if you have a wide drop shadow or other element that doesn't make sense to have clickable, the a could be smaller than the div#logo and help with that.
10 years back when i first visited a new search engine i only saw a textbox and a logo on top that said 'google'.The web page was ordinary didnot have any a lot of html elements infact only a textbox and a logo, but i always remembered the page due to the logo and the excellent search results.
Logo is important man, very important
Take a look at the top of this page. You can't go much of anywhere on this site without seeing the "stack overflow" logo up in the corner.
I'd say at least 90% (probably more!) of web sites I visit on a regular basis have a recurring logo. Marketing is a sick and twisted thing, but if so many web sites are doing it, it's probably not too far wrong.
From a visual standpoint, a logo is crucial -- it is part of the identity of the page, and users will associate it with the content. It's almost an imperceptible thing, but I know if I didn't see a logo at the top of a content page, it'd almost smack of unprofessional design to me! It's a subtle thing. Make sure the users know where they are and what they're looking at; form a psychological association.
Yes, search engine results are important, but that doesn't mean the logo is a throwaway.
I used to do the same image-replacement thing, but I finally realised it was a waste of time. As long as a meaningful alt attribute is present, you should just have the image.
As for the appropriate markup: on the home page I have the logo as h1 as it's the title of the page. On other pages I have it in a p and the actual title of the page is h1.
For example, home page is:
<div id="header">
<h1><img src="logo.jpg" alt="HyperGlobalMegaCorp"></h1>
</div>
<div id="content">
<h2>Welcome to the HyperGlobalMegaCorp website</h2>
</div>
whereas contact page is:
<div id="header">
<p><img src="logo.jpg" alt="HyperGlobalMegaCorp"></p>
</div>
<div id="content">
<h1>Contact HyperGlobalMegaCorp</h1>
</div>
...and that's HTML, not XHTML, before some zealot starts going on about closing the img elements ;-)
I use the both logo image and text for improving SEO on my site
<h1 id="pageheading"><a href="http://mysite.com" title="site description">
<span>Site name</span><img src="mylogo.gif" alt="my brand" />
</a></h1>
then I used css for formatting display so visitor can see only my logo but SE can see the both that make double search result for 2 type of search text and image. The image which use searched is the brand of your site, when visitor see your logo, they thought about your site, your products, services like as HP, IBM, DELL etc.... In other case you can make paragraph tag for more description about your site to focus some keywords in your site.
My language skill is not good but I still want to share to you some knowledge, dont laugh me when I got mistake about grammar please :)
Thank you for your inputs, it helped me a lot. This is my conclusion of all your answers and my thoughts:
It depends on your programming style and personal philosophy how you implement your logo technically. Some are using IMGs inside H tags, some are hiding the content of what ever tag they used and are placing the logo as background image.
But i think i have got my answers:
Consider the website as a book or magazine. On the front cover you want to have the title of the book as most important element and maybe some headlines. But inside the media you gonna implement your book/magazine title into the header and maybe the footer.
In order to make this understandable for a text navigator or a search engine. I would now choose a h1 tag to place my logo on the main/home page. But on the other pages a simple IMG, A or whatever tag but H.
Please share your thoughts about my conclusion.