I'm creating a very specific website design that I hope will turn out like this: http://prntscr.com/298r2m Problem is, coding isn't one of my strong points.
What I've got so far is this: http://prntscr.com/29i0ed and as you can see, the content background is under the Navigation menu and below image. I was wondering how to change that so that it ONLY starts at the point where the posts begin like in the picture above?
Also, does anyone know how to add a top and bottom border to the content background, instead of it looking like it's been cut off? I use blogger.
Cheers!
If I did, you just have two elements to the image and the body of your blog and being elements with different colors, I hope it helped you
Related
I have built a simple website which includes a parallax image gallery with accompanying text descriptions for each image. The gallery is underlaid with a simple repeating pattern wallpaper.
The images have no margin between them. Their borders are covered by the text box which has a higher z-index, and the discrepancy between the scroll speed of the images and texts creates the parallax effect.
I would like to allow the background wallpaper (bottom layer) to also be the background of the textbox but to achieve this, I would need to make the middle layer (the image) transparent where it is obscured by the text box.
I have no idea where to start with this - I suspect my best bet is to just ignore this problem remove the wallpaper altogether but perhaps there is a straightforward answer to this issue?
The included image has a semi-transparent text-box and borders to give an idea of the layout and the problem I'm facing. Would appreciate any ideas. thanks
Link to the image
I'm having trouble with my code with my CSS stylesheet and HTML index coding. I only have one problem and that is my CSS stylesheet isn't letting me place a div class into it. I'm using the free Brackets software which includes syntax highlighting and it's coming up red which is an error. Here is a picture of it:
http://i58.tinypic.com/ju97cl.png
As you can see in that picture, I've boxed around the place where it's disallowing me to place the div class into the stylsheet in white. I've given a working example with the blue box so I'm confused to why it's doing this.
My main question for you today is how do I create buttons directly in the center on the side of my page with CSS or however possible and how to edit these buttons like adding hover animations, visual looks etc? (I'm new to this by the way) Also, I want to lock the scrolling of my page in a certain area like in the picture described:
http://i62.tinypic.com/wmbyw.png
Lastly, I wish to ask how to make my content on the white area transition by sliding to the side for when I click a button to go onto the next page. However possible I would really appreciate if somebody gives me the time for this. Sadly I can't give another image because I don't have 10 reputation. so I hope you can make out what I'm trying to say.
I will be so grateful to anyone who helps me with this.
First off you need to close your .right-menu class with a }.
For effects and animations check out w3schools:
http://www.w3schools.com/css/css3_transitions.asp - transistion property
http://www.w3schools.com/css/css3_animations.asp - animations
Centering in CSS can be done with text-align: center or margin-left:auto; margin-right: auto.
To prevent scrolling of the body do body {overflow:hidden}
For sliding page content refer to my links above or checkout jQuery
http://www.w3schools.com/jquery/jquery_slide.asp
I am looking to create a left nav bar like the one on the Treehouse site here:
http://teamtreehouse.com/library
The main thing I am trying to replicate is the links tooltip that slides out/fades in beside the icon. Looking at the source, I believe thats done through CSS? correct me if I'm wrong.
Also, I noticed they have svg classes on the links, are they just for site responsiveness and not really related to the function of the links/tooltip?
Thanks for any help on this and please let me know if I can provide any other info.
For the bar itself simply have floated div extended to 100% height and set it's position to fixed.
The tooltips that pop out can either be done with javascript or CSS.
For javascript or jQuery, there are numerous tooltip libraries that will give you the same functionality. In CSS you can add a hover state that shows the div. Either one of these approaches will work.
For the CSS solution see this related question: Using only CSS, show div on hover over <a>
The SVG class on these from what I can tell is actually the icon itself. SVG is a neat format that lets you apply font styling to images. If you look at the bootstrap framework icons you'll see this is how they are displayed. I'm guessing that the same technique is being used here.
I would like to be able to have a logo overhang from a header, see this link for a visual example. From what I've searched, most of the results are about making this happen with WordPress rather than just in terms of HTML/CSS (including the provided link). I'm using RoR alongside Twitter Bootstrap in order to create some quick styling of the page including the header (possibly pertinent information).
I'm guessing the answer to this question really is HTML/CSS-centric, so, if I had a header <div> that included a logo to the left as well as a set of navigation links to the right, how could I go about making that logo overhang into the rest of the page below?
Also, bonus points if the ability to add a slight shadow to the part that overhangs is included :)
You can use the z-index property (CSS) to set your logo image so that it is always in front, then you can position the image in your header and it will look like it's hanging. The slight shadow should be part of the image itself.
Try using css code with
position: absolute;
This will ensure your logo floats on top of wherever you want it. Then adjust how you want to place your logo image with:
margin-top: 100px;
using whatever px you want.
Can anyone please help?
I am trying to do the following layout in HTML and CSS. This image is just a rough representation of the general layout for a website.
The top bar (or header) will be e.g. light grey and the sidebar 1 will be the same colour. The sidebar 1 also has a rounded bottom left corner and the sidebar 2 has a rounded top right hand corner. The effect I’m trying to recreate is that the header will “flow” into the sidebar 1 and that the sidebar 2 will “flow” into the footer.
So far I have the boxes coded so that it seems that they are touching and I also have the rounded corners done. But what Ive been stuck with for the whole day now is how to do the colours so that it seems that the 1 is flowing into the next one. Here is an example of what I have so far (still very rough as I am just trying to block out the shapes etc.) hansmoolman.com
The relevant section in the website above is the one called "This is the main container" which is about half way down the page and contains the sidebar 1 (the one with the Twitter feed) and sidebar 2 (the one with all the Lorenm Ipsum stuff). The top bar will be the one with the logo and navigation stuff. The footer is not yet implemented.
Can anyone suggest how I can do this? I am trying to stay away from a background image that will represent this as the sidebar 1 and 2 should be able to grow dynamically and independently of one another should more content be added.
Or can this done with a background image/images?
Can anyone please help as all the solutions I have been working on has become very messy with boxes inside and on top of other boxes. It does not look good code wise and I am concerned that it might not display as intended on all devices.
If more clarity or code is needed on this question just let me know and I can provide both.
Thanks in advance
*Edit - this is a possible solution as suggested by flem
Build your layot with divs like this (spacing just for visibility):
You will also need an element behind each of the rounded corners with the opposite colour. (You only need to do one of them if you set your body background colour.)