I'm doing a portfolio for freecodecamp and i'm trying to get my image and the the phrase side by side, picture on the right and description on the left. How do i line them up next to each other and keep them the same distance even when I shrink the page?
I'm trying to copy and paste the html but when I do it puts my page here, not the code.
Related
I am attempting to make a webpage that resembles this https://www.swellbox.com/requestwizard (only page 1 and the request popup). I am currently working on the header and I would like it to be formatted like this https://www.convert.com/ but with two rows of text on the left side and the nav bar right justified on the right side. Thanks in advance!
I attempted copying the websites HTML with all of the references CSS and JS, but it just isnt working.
My current problem looks like this:
Current Code
There is some script in there that I could not get into the screenshot.
I am wanting the twitter feed to go on the far left (in line with the rest of the text, and also a few logos centered horizontally and vertically on the right with a header above them.
Here's a js fiddle of the problem: http://bit.ly/Zd8JAU
I'm trying to place a header with a logo and a centred title at the top of the page. The idea is to center the title to the page itself and not within the gap left to the right of the logo, if that makes sense?
So I floated the logo over the top of the title and then altered the position of the logo shifting it upwards (as otherwise it insists on going beneath the title). The problem is this then creates a gap, which cascades down the page and I'd have to somehow shift everything up by the hight of the logo, and I really don't want to have to do that.
So is there a better way to get my logo positioned to the left of the title without creating gaps anywhere and without it causing an off-set on the text in the title?
EDIT: updated the fiddle to be clearer what I'm trying to achieve.
Yes, consider using a CSS background for your logo as part of your NAV element, which makes it easier to pad your text and position the image without interference.
I added a custom control to a .NET page which allows user to upload a picture.
This control has a div element which parents an image that is supposed to get printed. The control is positioned near the bottom of the HTML structure and therefore the image gets printed on page two.
However the problem is that I want the picture to get printed on page one but no matter what I try the picture never gets there. I've tried absolute positioning and floating.
Now what to do, what to do? :)
Update:
The HTML page includes many forms and stuff so it's difficult to give code examples but here's what it basically looks like:
<div class="col">Bunch of stuff</div> // Left column
<div class="col">Bunch of stuff + the image control</div> // Right column
When print; the columns are stacked upon each other by using float, but I want the image element to be positioned on top of page one.
Since I couldn't figure out a solution for this problem, I ended up with restructuring the HTML so that the "image control" was at the top. Then I was able to position the control at the top of the printed page.
I have a html page with 12 thumbnails (spliced Photoshop) within a table (Table_01) within a div and when you hover over one of the thumbs a new image pops up.
At the moment when you hover over the "Ice white" thumb (this is the one I'm testing with at the moment) the new image pops up at the top of the page.
This is no good. It needs to pop up exactly to the right of the div which Table_01 is contained in (preferably top of pop up image flush with top of div and left side of pop up image touching right side of div if that makes sense). CSS is within head of source code near the end. It's not the best written webpage and is very messily coded but this bit should be easy to weed out and identify a solution hopefully. Any help greatly appreciated.
Late response obviously but I hope, it will help you out anyways.
As far as your comments above, those popping out new images needs to have absolute position with some right and top positions fixes. For example, considering that you are having a 3 divs in a row, each div is having an image, you should mention the parent div (containing the image) to have relative position; inside it the image (actually the popup image or thumb) should have position absolute and then it should have right and top adjustments in CSS as per your requirement.
I hope it will help you out...