No matter what I have tried - I can not seem to get a group of images to center on my page. Anyone have any thoughts? This is wracking my brain.
breakwatersurf.com is where the uncentered images are. You will see the shop mens and shop womens don't line up with the bottom divider lines.
Stack overflow doesn't like my code and wont allow me to use code tags so please inspect the elements on my webpage for html / css
I Have tried so many variations of css without any luck. I know the answer is simple but I can't seem to find out why my won't center anywhere.
Thanks for the help!
Give to the shop womens image a float: right style in your CSS. I did this with the element inspector and it works:
<img class="groupcenter" src="http://breakwatersurfcompany.com/wp-content/uploads/2013/01/righthalf.png" alt="righthalf" width="565" height="500" style="float:right">
And learn how to use the site. People here don't like to help if you don't follow the site rules.
Related
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; }
I'm new in HTML/CSS world, and just started my first project, so i need some help :) I'm trying to create temporary "coming soon" page, that has only company logo that is made of Company Name, and short 4-word Description that goes directly under Company paralel with last 4 letters.. Company Name font is diferent and way larger than Description.. animation needs to raplace that Description with Coming Soon message.. once i group that all togeather i have a problem positioning it in center of a browser and to be responsive.. i'm usin h1 for Company Name and p for Description and message..
I have sorted out your problem into 2 main parts, Font Sizes and Responsive elements, tell me if any other problem is required.
Firstly, The use of h1 element is not encouraged, you should be using font-size:10px as that can give out much more option Css Trick had made a great article on it:https://css-tricks.com/almanac/properties/f/font-size/
Secondly, Responsive element that needs to be always in middle can be made with margin: auto; or text-align: center;.
Again, W3School had some pro tip on it:https://www.w3schools.com/css/css_align.asp
Hope this can solve your problem and good lucking on learning Webpage making!
i have website in which i use bootstrap and new in css so there is space in right , want to remove that but some how can't do it , kindly help me . here the website link http://www.sabkideal.com/
and how to make mobile friendly website which display in google light browser because when i run the site they give error and not show the website . Kindly help me out
<div style="padding-top: 20px; margin-left: -10px;" class="container">
You have to remove margin
<div style="padding-top: 20px;" class="container">
well it entirely depends on what sort of content / html element you are working with.
This link has numerous solutions to your problem. Out of all of the solutions proposed in this link, solution 1 is my personal recommendation.
If you are working with a <p> element, which I dont think you are, you can use the CSS white space property.
If you working with the inner text of an element and are open not using CSS to fix this problem, then I would recommend using JS to clean up for the text for display.
By the look of the posts here I'm in the deep end with the big boys whereas I need the toddlers paddling pool. So apologies if I'm in the wrong place with my basic problem.
I can't get images to float with LightBox [v. 2.6]
I have a sample problem page here - http://quivis.co.uk/PROBLEMS/lightbox-float/index.html
That page has 2 copies of the same image. Both 'work' in the sense that when you click them LightBox does its brilliant thing and fires up correctly, but both image links display incorrectly.
The top image looks as it should i.e. with mouse-over highlights/border colours etc but will not float right. In some browsers there is also a large redundant area to the left that I am unable to remove.
The bottom image floats as I want it to but in the process the image link styling is lost.
As all things are possible it must be possible to combine the look of 1 with the positioning of 2 but I can't see how to do it!
All the related files are within the 'PROBLEMS' folder. Please let me know if I should paste the html or css here.
Any help much appreciated. Thanks, Duncan
Set float:right style to a tag instead of float:right to images.
And there is mis-spelling of class attribute in second a tag, it is mentioned as 'xclass', correct that spelling too.
I am very new to this and have a very hard time understanding my lecturer (who unfortunately helps me very little)
This is my assignment (image below). It's a mock up clothing website and my desired layout is on the left, whereas my current progress is on the right. This is my first ever attempt at HTML/CSS so if you could please help me out that would make me a happy man!
Paragraphing the categories like I have to the right
Aligning the black text boxes with the photos above them
Floating the titles on the left, with the paragraphs to the right. (I have tried multiple things with this but to no avail)
Also, I put <h1> for each heading but they aren't going to that size?
using CSS you can set "position: absolute" then use something like "left:100px;"
that is assuming your div tags are correctly set up (or set up in general) from your last statement "Also, I put for each heading but they aren't going to that size?" it seems that your div id, or class id's are incorrectly labelled.
I highly recommend taking a look at http://jsfiddle.net/
It's very possibly the single most useful tool I've ever encountered for css/html/javascript testing/editing/learning. (short of something like Dreamweaver, I suppose).
There are plenty of good tutorials around on how to use it, but it'll really let you toy with little options along the learning process, and will help you 'teach yourself' when things get rough with the teacher.