Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > CSS question

CSS question
Thread Tools
Mac Elite
Join Date: Oct 2000
Location: Middle of Germany
Status: Offline
Reply With Quote
Jan 4, 2017, 02:47 PM
 
Hey everyone,

I have a CSS question. Look here:
CopyRight

Do you see that the difference between the border of the general page (the white one) and its content is not very big? Only a few pixels! I don't know the English word, margin or so... How can I change this with CSS? Can I increase this difference somehow? Twice as big would be not so bad, much better...

Thanks,
PeterParker
Think a new age is coming.
     
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Jan 4, 2017, 03:26 PM
 
It looks fine to me. The logo is worse, the art is crashing the outline of the rectangle, and not in an intentional-seeming way.

but if you wanted to increase the padding, increase the padding here:

.everything {
background-color: white;
margin: 0 auto;
padding: 40px; <---------
width: 800px;
}
     
Mac Elite
Join Date: Oct 2000
Location: Middle of Germany
Status: Offline
Reply With Quote
Jan 4, 2017, 03:49 PM
 
The logo isn't finished yet...

Thanks!
Think a new age is coming.
     
Mac Elite
Join Date: Oct 2000
Location: Middle of Germany
Status: Offline
Reply With Quote
Jan 18, 2017, 07:10 AM
 
Hey,

I have another CSS question: How to create a fixed sidebar?

Like here: Agentur für Corporate Design und Responsive Webdesign in Frankfurt Rhein-Main – finalart design

it is fixed even on the iPad, which is pretty good. It looks nice, how can I do this? I can't find anything on the web, but I'll look.

Greetings,
PeterParker
Think a new age is coming.
     
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Jan 18, 2017, 07:20 AM
 
do your search on fixed position, and hidden overflow.

Do they have you use Firebug in your class? It is a good way to see what others have done.
     
Mac Elite
Join Date: Oct 2000
Location: Middle of Germany
Status: Offline
Reply With Quote
Jan 19, 2017, 09:27 AM
 
No, no Firebug. I'm no trying. I found an article which told me how to create a fixed sidebar in the upper right hand corner. Not what I wanted.

I want a sidebar attached to the original content, to the body, in a way. I'll search "fixed position" and "hidden overflow"...
Think a new age is coming.
     
Mac Elite
Join Date: Oct 2000
Location: Middle of Germany
Status: Offline
Reply With Quote
Jan 19, 2017, 02:28 PM
 
Trying around for a while, I somehow managed to solve the problem. I just created two columns, one being fixed and having "float: left", one being the content-column that contains the website. It looks great and works perfectly!
Think a new age is coming.
     
Mac Elite
Join Date: Oct 2000
Location: Middle of Germany
Status: Offline
Reply With Quote
Jan 21, 2017, 10:04 AM
 
I eventually managed to create my sidebar. Look here:
CopyRight

I now have a different question. How do I eradicate the distance between the top of the browser window and the top of the page? There's no over a cm difference, many pixels. Looks not so good. Any idea? Dunno how to code this...

Greetings,
PeterParker
Think a new age is coming.
     
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Jan 22, 2017, 01:58 PM
 
Look at your class everything. What do you see?
     
Mac Elite
Join Date: Oct 2000
Location: Middle of Germany
Status: Offline
Reply With Quote
Jan 26, 2017, 08:20 AM
 
Okay, okay... Thx! I just changed the padding and now everything is alright. I didn't think like that, I thought the padding was the distance between the left and right borders and the body. Greetings... Nearly finished with my exercise, a webpage for a copy shop :-)
Think a new age is coming.
     
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Jan 27, 2017, 06:36 PM
 
Looks good!
     
Mac Elite
Join Date: Oct 2000
Location: Middle of Germany
Status: Offline
Reply With Quote
Jan 28, 2017, 08:28 AM
 
Originally Posted by andi*pandi View Post
Looks good!
Thanks? Thought you meant the whole website, not only the padding

Was four weeks of actual work. We built the elements in class - logo and photos in my case - and then added everything up, so that there is a finished web site. Building the page was a bit fast, but alright, did some new "programming" I hadn't done before. Programming might be an overstatement for CSS, but they call it that in class. So, let's see...

You can see the older versions by replacing the url's end through "studium5" or "studium4", these were the former versions.

Cool, I resolved most of my issues.
Think a new age is coming.
     
Mac Elite
Join Date: Oct 2000
Location: Middle of Germany
Status: Offline
Reply With Quote
Feb 18, 2017, 06:06 AM
 
Hey everyone,

I have a new problem, here:
Galerie

Apparently - when you look at it in Chrome -, the slider nav doesn't work, there are no left and right slider buttons. I didn't find the images, so I downloaded the example, but without the images, so... Where are they? It's from this website: SlidesJS Standard Code Example

The name could be something with "chevron".

I have another problem, apparently I can't resize the width properly. Whenever I do it, it changes the height, too. I didn't want any resizing anyway and thought I would just use properly resized images from Photoshop. So...

Any help?
Greetings,
Parker
Think a new age is coming.
     
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Feb 19, 2017, 02:50 PM
 
have you studied web fonts yet?

and if you are not being taught firebug or developer tools, you should look into it. very helpful tools.
     
Mac Elite
Join Date: Oct 2000
Location: Middle of Germany
Status: Offline
Reply With Quote
Feb 20, 2017, 10:18 AM
 
Well, hey andi-pandi... you a web designer, right... So, I just took a short class which was entitled "HTML course" and which was really a class on CSS and some galleries with jQuery... So, we didn't learn much about Firebug or Developer Tools. I don't know when I'm going to get in touch again with all of this, but maybe only in a few years. I just wanted to build this gallery with navigation controls, so I could use it on the website of my parents.... Just for me, for fun really... I checked, and it's this class "chevron right" and "left" etc. and there's a note in the one CSS file, but there isn't a link anywhere... What to do? Wrong gallery?
I might as well pick a different gallery...
Think a new age is coming.
     
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Feb 20, 2017, 02:03 PM
 
Hi Peter, I am trying to give hints without doing your homework for you. I'm not sure how your teacher could have taught you css without Firebug, it is really instrumental in seeing how others have built their sites, and for testing your own sites.

The chevron is a font icon from Font Awesome. Did you install the webfont on your server, or link to Font-Awesome directly?
     
Mac Elite
Join Date: Oct 2000
Location: Middle of Germany
Status: Offline
Reply With Quote
Feb 20, 2017, 05:02 PM
 
Hey...

no, no homework... Last day of studies for the semester was three weeks ago. This is for my mum's website. I had hoped you can use this slider for commercial use, too, to be honest. The site is www.designbooks.de, which is already cool, bilingual, with some scripts and a nice look, but it lacks a gallery with more information on the books. So, I wanted to use this slider which is also great on iPad - so, the website is great on iPad in landscape mode - and which works well, with animation, on the Mac. I have some problems, though... I don't know about the arrows for previous and next and I have some problem with width and height, although I dunno if the latter is so important, I wouldn't want to resize images, anyway, I'd just use original images which I'd crop in Photoshop, so they would already have the same size. So, the arrows might be all my problem, other than that, the gallery is cool

Thanks already...
Peter
Think a new age is coming.
     
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Feb 22, 2017, 08:28 AM
 
You can use the slider, for the icons just put the link for the webfont FontAwesome in your site header. Read more here:

Font Awesome, the iconic font and CSS toolkit

I've never used this particular carousel before, but if you are having issues with sizing, perhaps the carousel is trying to resize images responsively for you.
     
Mac Elite
Join Date: Oct 2000
Location: Middle of Germany
Status: Offline
Reply With Quote
Feb 22, 2017, 08:32 AM
 
I'll try...
Think a new age is coming.
     
Mac Elite
Join Date: Oct 2000
Location: Middle of Germany
Status: Offline
Reply With Quote
Feb 22, 2017, 09:08 AM
 
hey... still awake?

Now, the arrows are there! I installed the whole font-awesome directory, somehow... It still says "Previous" and "Next" when I try... huh? Why would it do that?

Here: Galerie

Weird...

Thx for all the input, though, looks pretty nice already...
Think a new age is coming.
     
Mac Elite
Join Date: Oct 2000
Location: Middle of Germany
Status: Offline
Reply With Quote
Feb 23, 2017, 05:57 AM
 
Hey andi*pandi

Look here: Galerie

It doesn't really work, you see? I think I'll go with another gallery. This was the gallery they taught us in class, and, as you see, they didn't really tell us how to use it if you wanted to use all the buttons and really integrate it into your website... So, I'll pick a different one I can handle on my own

Thanks for all the input. It's important to me to get a cool slider into it, so the website should work great on an iPad and everything. At least, there's a good general direction, but it seems to be some work

Greetings!
Peter
Think a new age is coming.
     
Moderator
Join Date: Jun 2000
Location: inside 128, north of 90
Status: Offline
Reply With Quote
Feb 27, 2017, 11:49 AM
 
Sorry Peter, I was on vacation.

You can try another gallery, but you were almost there with this one. Up to you!
     
Mac Elite
Join Date: Oct 2000
Location: Middle of Germany
Status: Offline
Reply With Quote
Feb 27, 2017, 11:56 AM
 
Good vacation?

No, no, I just went with another one. I was looking for a really simple one with a swipe-effect on an iPad. So, this is what I have done:
http://daten.design-books.de
Then click on "More", just have a look :-) The images are not so well picked yet, but other than that, everything is really great. The gallery is cool and was easy to integrate.
Think a new age is coming.
     
   
Thread Tools
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Top
Privacy Policy
All times are GMT -4. The time now is 08:51 PM.
All contents of these forums © 1995-2015 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2015, Jelsoft Enterprises Ltd., Content Relevant URLs by vBSEO 3.3.2