Hi, so I am working on a new nav bar and I am having a little trouble with my logo and another image I want them to look like the image: I tried using the float method did not quiet work as far as I know.
Hi, so I am working on a new nav bar and I am having a little trouble with my logo and another image I want them to look like the image: I tried using the float method did not quiet work as far as I know.
I just whipped this up real fast - I’m sure others can improve this but it’s certainly a starting point for you.
http://codepen.io/ryanreese09/pen/GJKzGP
right the table cell method hehe
So I see my use of margins was incorrect?
Yes it was. You were givign a random number (38em off the top of my head) to sorta guess where it should be placed. That would not work in a fluid/responsive environment.
oh I see
I’ve not seen that techniques before. Out of curiosity, is it equally amenable to the creation of a vertically stacked menu for use in a sidebar?
howcome there are two widths being used here?, just out of curiosity…
#nav {
display:table;
margin:auto;
max-width:1000px;
width:100%;
}
I took a lot of allergy medication so I’m a bit loopy right now. I’d need a screenshot highlighting what you are attempting to do.
I also did that code sample within a few minutes so it’s not perfect and certainly can be improved.
They aren’t two widths. It’s one width.
Display:table shrink wraps by default. So we want it to be close to a display:block; functionality and be fluid. So we give it width:100%. Oops! Now it’s too wide! It’s 100% of the page but we want to restrict it to 1000px max width to line up with the other crap on the page.
Thus max-width:1000px adds on.
One for tomorrow then - gone midnight here, and I’m not sure I’m up to wrangling the iPad for it whilst lying in bed…
Sure thing - feel free to just make a new thread for it (to not hijack this) and I’ll take a look when I have time.
I added a mag. glass by the search bar not sure if my coding is correct. LINK
#search:before {
position: absolute;
right: 460px;
width: 40px;
height: 36px;
line-height: 37px;
background: red;
text-align: center;
color: #fff;
font-family: 'FontAwesome';
content: '\f002';
}
You’re better off just putting it as a background image on the input (#inside_search). You’re aplying it to the parent right now which is the wrong element to put it on.
Im working on a new concept but I am having trouble aligning the right of the nav bar.
I attached an image of how I want it to look like. PAGE
Can you please give us your attempt? Codepen preferred right now since I’m only on a chromebook.
Were you just having issue getting the right logo placed?
http://codepen.io/ryanreese09/pen/vOYejr
and I wanted to align the nav with the left logo better like here depicted with the blue underline
:
Also I was wondering if I coded the full width of my image correctly it is a 1920x576 image, because I want to make the image full width.