Because the .container class is likely to be used again leaving it as is &
creating a new class would be a better way to do that for example:
.cntrbrdr {
border-right: 1px solid #eee;
border-left: 1px solid #eee;
padding: 0px 30px;
}
Phil DoughtyWeb Designer / Guitarist Phone: +971 50 8879936
On 5 November 2012 01:07, Juli87 <[email protected]> wrote:
> Thanks for your help! I found now a solution for my last problem.
>
> Am Sonntag, 4. November 2012 18:58:29 UTC+1 schrieb Phil Doughty:
>>
>> look at the source code for
>> scaffolding.html<http://twitter.github.com/bootstrap/scaffolding.html>
>> I learned how to use bootstrap by copy and pasting then editing parts of
>> this page.
>> view-source:http://twitter.**github.com/bootstrap/**scaffolding.html
>>
>>
>> Phil DoughtyWeb Designer / Guitarist Phone: +971 50 8879936
>>
>>
>>
>>
>>
>> On 4 November 2012 21:00, Juli87 <[email protected]> wrote:
>>
>>> Thank you, that helps a lot! The image fits now in my layout and the
>>> responsive design works. If i minimize the screen the border is shown. Is
>>> it also possible to show the vertical border aligned to the image as it was
>>> before?
>>>
>>> Now the site looks like this:
>>> http://juli.beluto.com/test.**html<http://juli.beluto.com/test.html>
>>>
>>> Am Sonntag, 4. November 2012 16:23:33 UTC+1 schrieb Phil Doughty:
>>>>
>>>> Avoid using pixel values for main layout. Bootstrap has it's own strong
>>>> layout grid system that works very well in most cases.
>>>>
>>>> As you probably already know .container is an existing class in
>>>> bootstrap with it's on responsive px width's.
>>>> So there is no need to include the a fixed pixel width. Otherwise your
>>>> design will break.
>>>>
>>>> To keep the grey border, In your file style.css change the class name
>>>> from .main.container name to simply .main
>>>>
>>>> .main{
>>>>
>>>> 1. border: 1px solid #EEE;
>>>> 2. padding: 0px 30px;
>>>>
>>>> }
>>>>
>>>> Also the classes .footer and .titelbild will create
>>>> problems because of the fixed width values.
>>>>
>>>> Phil DoughtyWeb Designer / Guitarist Phone: +971 50 8879936
>>>>
>>>>
>>>>
>>>>
>>>>
>>>> On 4 November 2012 17:34, Juli87 <[email protected]> wrote:
>>>>
>>>>> Thanks for your answer. But isn't there a possibility to create that
>>>>> container outline and the oversized image without giving a fixed width?
>>>>>
>>>>>
>>>>> Am Sonntag, 4. November 2012 14:09:56 UTC+1 schrieb Phil Doughty:
>>>>>
>>>>>> When possible try to use the existing bootstrap span grid classes
>>>>>> & remove the fixed width px values from these classes:
>>>>>>
>>>>>> .titelbild
>>>>>> .main.container
>>>>>> .footer
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> Phil DoughtyWeb Designer / Guitarist Phone: +971 50 8879936
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> On 4 November 2012 16:42, Juli87 <[email protected]> wrote:
>>>>>>
>>>>>>> I'm making a website with responsive design based on twitter
>>>>>>> bootstrap, but my responive design doesnt't work well... I oversize an
>>>>>>> image by giving a fixed width, so that it's outside the bootstrap grid.
>>>>>>> If
>>>>>>> i minimize the screen the image isn't fluid. Is there another
>>>>>>> possibility
>>>>>>> to extend the image and main container, so that it flows over the
>>>>>>> bootstrap
>>>>>>> grid? I want that the border of the main container has the same width
>>>>>>> like
>>>>>>> the oversized image. If I have the screensize of a smartphone the
>>>>>>> oversized
>>>>>>> border can be cut.
>>>>>>>
>>>>>>> My site how it looks like now:
>>>>>>> http://juli.beluto.com/test.**ht****ml<http://juli.beluto.com/test.html>
>>>>>>>
>>>>>>
>>>>>>
>>>>
>>
